/* Hallmark v2.0.0 · redesign: full · / · theme: brand (live zl.css tokens, none changed) · shape: object-led, stepped sheets, a draft waiting for approval · built: hand-written, sloplint not run in the background run · copy: verbatim */
/* critique: a navy page of gradient headline text, glow panels and label-left/rows-right templates becomes paper sheets with a cut corner and a coloured edge, steps that drop like stairs, and a hero that shows the one thing it sells: a draft waiting for your approval */
/* waive 12/13: the live hero headline (13 words) and fine print are kept word for word, so the hero runs past seven words; the fine print sits in the band under the hero */
/* W-041: home page look only (design, no wording). Loaded after zl.css by index.html alone and scoped to body.zl-home, so no other page changes.
   Every colour is a live token from assets/zl.css; the light theme follows because the tokens already swap per theme and per navy zone.
   Specificity: zl.css's light rules go up to five classes (a nth-child card shadow), so every selector here starts with the same
   ":root body.zl-home.zl-home" prefix to win without !important. */

:root{
  --edge-v:linear-gradient(180deg,var(--zl-rule-a),var(--zl-rule-m),var(--zl-rule-b));
  --lift:color-mix(in srgb,var(--zl-ink) 55%,transparent);
  --tab:28px; --r:2px;
  --pl:clamp(1.5rem,3.4vw,2.25rem); --pr:clamp(1.25rem,3vw,2rem); --pv:clamp(1.25rem,3vw,2rem);
}
html,body{overflow-x:clip}

/* ---- sheets: raised card colour, one cut corner, a coloured edge ---- */
:root body.zl-home.zl-home .zl-rows li,
:root body.zl-home.zl-home .zl-probs>div,
:root body.zl-home.zl-home .zl-plan,
:root body.zl-home.zl-home .zl-callout,
:root body.zl-home.zl-home #retainer-detail .zl-costs li,
:root body.zl-home.zl-home #contactForm{
  --edge:var(--zl-rule-a);
  position:relative;background:var(--bg-card);color:var(--text);border:0;
  border-radius:var(--r) var(--tab) var(--r) var(--r);
  padding:var(--pv) var(--pr) var(--pv) var(--pl);
  box-shadow:0 22px 40px -26px var(--lift);
}
:root body.zl-home.zl-home .zl-rows li::before,
:root body.zl-home.zl-home .zl-probs>div::before,
:root body.zl-home.zl-home .zl-plan::before,
:root body.zl-home.zl-home .zl-callout::before,
:root body.zl-home.zl-home #retainer-detail .zl-costs li::before,
:root body.zl-home.zl-home #contactForm::before{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;height:auto;padding:0;opacity:1;transition:none;
  -webkit-mask:none;mask:none;border-radius:var(--r) 0 0 var(--r);background:var(--edge);
}
:root body.zl-home.zl-home .zl-rows li:nth-child(even),
:root body.zl-home.zl-home .zl-probs>div:nth-child(even),
:root body.zl-home.zl-home .zl-plans>.zl-plan:nth-child(even),
:root body.zl-home.zl-home .zl-callout~.zl-callout,
:root body.zl-home.zl-home #retainer-detail .zl-costs li:nth-child(even){--edge:var(--zl-rule-b)}
:root body.zl-home.zl-home .zl-plans>.zl-plan:nth-child(n){box-shadow:0 22px 40px -26px var(--lift)}
:root body.zl-home.zl-home #contactForm{transform:none}
:root body.zl-home.zl-home #contactForm:hover{transform:none;box-shadow:0 22px 40px -26px var(--lift)}

/* ---- header of each section: a tall tick in the accent, then the heading ---- */
:root body.zl-home.zl-home .zl-sect{padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:clamp(3.5rem,8vw,6.5rem)}
:root body.zl-home.zl-home .zl-two>div:first-child,
:root body.zl-home.zl-home .zl-sect .max-w-7xl>h2.zl-h{
  border-left:6px solid transparent;border-image:var(--edge-v) 1;padding-left:1.25rem;
}
:root body.zl-home.zl-home .zl-h{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08}
:root body.zl-home.zl-home .zl-h-sm{font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.2}
:root body.zl-home.zl-home .zl-h::after{content:none}
:root body.zl-home.zl-home .zl-note{max-width:60ch}
:root body.zl-home.zl-home .zl-two{grid-template-columns:minmax(0,1fr);gap:2rem}
@media (min-width:900px){
  :root body.zl-home.zl-home #free-audit .zl-two{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.5rem;align-items:start}
}
:root body.zl-home.zl-home .zl-sect .max-w-7xl>h2.zl-h{margin-bottom:2rem}

/* ---- hero ---- */
:root body.zl-home.zl-home .zl-hero{padding-top:clamp(6rem,9vw,7.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}
:root body.zl-home.zl-home .zl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 1.5px) 0 0/28px 28px}
:root body.zl-home.zl-home .zl-hero h1{font-size:clamp(2.1rem,3.9vw,3.5rem);line-height:1.04;letter-spacing:-.035em;max-width:18ch}
:root body.zl-home.zl-home .zl-hero .grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:inherit}
:root body.zl-home.zl-home .zl-rule{width:120px;height:6px;border-radius:1px}
:root body.zl-home.zl-home .zl-sub{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:44ch}
:root body.zl-home.zl-home .zl-hero .grid{gap:3rem}
@media (min-width:1024px){
  :root body.zl-home.zl-home .zl-hero .grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4rem}
}

/* the slip: a decorative draft, built from the agent card wording */
:root body.zl-home.zl-home .zl-slip{
  position:relative;background:var(--bg-card);border-radius:var(--r) var(--tab) var(--r) var(--r);
  padding:1.75rem 1.75rem 1.5rem 2.25rem;transform:rotate(1.2deg);box-shadow:0 30px 50px -28px var(--lift);
}
:root body.zl-home.zl-home .zl-slip::before{content:"";position:absolute;inset:0 auto 0 0;width:8px;border-radius:var(--r) 0 0 var(--r);background:var(--edge-v)}
.zl-slip-t{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--zl-white);margin:0 0 1.25rem}
.zl-slip ol{margin:0;padding:0;list-style:none}
.zl-slip li{display:flex;align-items:center;gap:.9rem;min-height:2.75rem;padding:.35rem 0;border-bottom:1px solid var(--line);color:var(--text);font-size:1rem;line-height:1.3}
.zl-slip li svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--zl-text-a);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.zl-slip-ok{margin:1.5rem 0 0;display:flex;gap:.75rem;align-items:center;color:var(--zl-white);font-weight:600;line-height:1.35}
.zl-slip-ok span{flex:none;width:2.2rem;height:2.2rem;border-radius:var(--r);background:var(--zl-a-solid);display:grid;place-items:center}
.zl-slip-ok svg{width:18px;height:18px;fill:none;stroke:var(--zl-ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1023px){:root body.zl-home.zl-home .zl-slip{transform:none;max-width:34rem}}

/* ---- the Free check band under the hero ---- */
:root body.zl-home.zl-home .zl-checkband{background:linear-gradient(120deg,var(--zl-band) 0%,var(--zl-indigo) 100%);color:var(--text)}
:root[data-theme="light"] .zl-checkband,
:root[data-theme="light"] .zl-checkband .zl-panel{
  /* same dark tokens zl.css gives the header, hero and footer in the light theme (the band sits on navy) */
  --bg:#0B1220; --bg-raised:#111B30; --bg-card:#111B30; --line:#24324D; --text:#E8EEF8; --muted:#A9B6CC;
  --zl-ctl:#5B6F94; --zl-link:#4FACFE; --zl-white:#FFFFFF; --zl-focus:#FFFFFF; color-scheme:dark;
}
:root body.zl-home.zl-home .zl-cb{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:2.5rem;padding-bottom:2.5rem}
@media (min-width:960px){:root body.zl-home.zl-home .zl-cb{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4rem}}
:root body.zl-home.zl-home .zl-checkband .zl-panel{background:none;border:0;padding:0;max-width:34rem}
:root body.zl-home.zl-home .zl-checkband .zl-panel h2{font-size:1.6rem;letter-spacing:-.015em}
:root body.zl-home.zl-home .zl-checkband .zl-panel .zl-free{color:var(--zl-on-dark);font-weight:600}
:root body.zl-home.zl-home .zl-checkband .zl-panel label{margin-top:1.25rem;color:var(--zl-on-dark-2);font-weight:400}
:root body.zl-home.zl-home .zl-checkband .zl-panel .zl-go{background:var(--zl-a-solid);border:0;color:var(--zl-ink);transition:background-color .15s}
:root body.zl-home.zl-home .zl-checkband .zl-panel .zl-go:hover{background:var(--zl-a-solid-hover);color:var(--zl-ink)}
:root body.zl-home.zl-home .zl-checkband .zl-panel .zl-go:active{background:var(--zl-a-solid-press)}
:root body.zl-home.zl-home .zl-checkband .zl-panel .zl-covers{border-top-color:var(--zl-ctl);color:var(--zl-on-dark-2)}
:root body.zl-home.zl-home .zl-checkband .zl-panel li{color:var(--zl-on-dark)}
.zl-fines{display:grid;gap:.5rem;align-content:center;max-width:44ch}
.zl-fines .zl-fine{margin-top:0!important;color:var(--zl-on-dark-3)}

/* ---- Who we help / What we do: three sheets that step down ---- */
:root body.zl-home.zl-home .zl-rows{border-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:start;padding:0}
@media (min-width:900px){
  :root body.zl-home.zl-home .zl-rows{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root body.zl-home.zl-home .zl-rows li:nth-child(2){margin-top:2.5rem}
  :root body.zl-home.zl-home .zl-rows li:nth-child(3){margin-top:5rem}
}
:root body.zl-home.zl-home .zl-rows li{transition:transform .2s}
:root body.zl-home.zl-home .zl-rows li:hover{transform:translateY(-4px)}
:root body.zl-home.zl-home .zl-row{display:flex;flex-direction:column;gap:.9rem;padding:0;color:var(--text)}
:root body.zl-home.zl-home .zl-row .zl-name{font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.12;letter-spacing:-.025em;color:var(--zl-white)}
:root body.zl-home.zl-home .zl-row .zl-line{color:var(--muted)}
:root body.zl-home.zl-home .zl-row .zl-go{display:inline-block;margin-top:auto;padding:.5rem 0 0;border-radius:0;background:none;color:var(--zl-link);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
:root body.zl-home.zl-home .zl-row:hover .zl-name{text-decoration:none}
:root body.zl-home.zl-home .zl-row:hover .zl-go{color:var(--zl-text-a)}

/* ---- list rows with a cyan tick ---- */
:root body.zl-home.zl-home .zl-costs{border-top:0}
:root body.zl-home.zl-home .zl-costs li{position:relative;padding:.9rem 0 .9rem 1.6rem;border-top:1px solid var(--line);border-bottom:0}
:root body.zl-home.zl-home .zl-costs li:last-child{border-bottom:1px solid var(--line)}
:root body.zl-home.zl-home .zl-costs li::before{content:"";position:absolute;left:0;top:1.6rem;width:.7rem;height:2px;background:var(--zl-text-a)}
:root body.zl-home.zl-home .zl-costs li{max-width:70ch}
/* Site Care: three sheets, the tick is replaced by the sheet edge */
:root body.zl-home.zl-home #retainer-detail .zl-costs{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;border-top:0}
:root body.zl-home.zl-home #retainer-detail .zl-costs li{max-width:none;border-top:0;border-bottom:0}
:root body.zl-home.zl-home #retainer-detail .zl-costs li:last-child{border-bottom:0}
@media (min-width:900px){:root body.zl-home.zl-home #retainer-detail .zl-costs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- common questions: sheets, the first one full width ---- */
:root body.zl-home.zl-home .zl-probs{border-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
:root body.zl-home.zl-home .zl-probs>div{display:block}
:root body.zl-home.zl-home .zl-probs p{margin-top:.6rem;color:var(--muted)}
@media (min-width:900px){
  :root body.zl-home.zl-home .zl-probs{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root body.zl-home.zl-home .zl-probs>div:first-child{grid-column:1/-1}
}

/* ---- pricing: agent sheets with a full-width action bar, then website slabs ---- */
:root body.zl-home.zl-home .zl-plans{gap:1.25rem}
:root body.zl-home.zl-home .zl-plan h3{font-size:1.5rem;line-height:1.15}
:root body.zl-home.zl-home .zl-agents .zl-plan{display:flex;flex-direction:column;padding-bottom:0}
:root body.zl-home.zl-home .zl-agents .zl-plan>p.zl-aprice{margin-top:1.5rem;font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.04em;line-height:1;color:var(--zl-white)}
:root body.zl-home.zl-home .zl-agents .zl-plan>p.zl-amo{margin-top:.4rem;color:var(--muted);font-size:.9375rem}
:root body.zl-home.zl-home .zl-agent-cta{margin:auto calc(-1 * var(--pr)) 0 calc(-1 * var(--pl));padding-top:1.5rem}
:root body.zl-home.zl-home .zl-agent-cta .zl-btn-large{display:block;width:100%;max-width:none;border-radius:0 0 var(--r) var(--r);padding:1.1rem 1.25rem}
@media (min-width:900px){:root body.zl-home.zl-home .zl-plans{gap:1.5rem}}

:root body.zl-home.zl-home .zl-table{display:block;width:100%;background:none;border:0;box-shadow:none}
:root body.zl-home.zl-home .zl-table tbody{display:block}
:root body.zl-home.zl-home .zl-table thead{position:absolute;left:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root body.zl-home.zl-home .zl-table tbody tr{
  --edge:var(--zl-rule-a);
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;position:relative;
  background:var(--bg-card);border:0;border-radius:var(--r) var(--tab) var(--r) var(--r);
  padding:var(--pv) var(--pr) var(--pv) var(--pl);box-shadow:0 22px 40px -26px var(--lift);
}
:root body.zl-home.zl-home .zl-table tbody tr+tr{margin-top:1.25rem}
:root body.zl-home.zl-home .zl-table tbody tr::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;border-radius:var(--r) 0 0 var(--r);background:var(--edge)}
:root body.zl-home.zl-home .zl-table tbody tr.zl-pop{--edge:var(--zl-a-solid);background:var(--bg-card);box-shadow:0 22px 40px -26px var(--lift)}
:root body.zl-home.zl-home .zl-table tbody tr:nth-child(3){--edge:var(--zl-rule-b)}
:root body.zl-home.zl-home .zl-table tbody tr:nth-child(3).zl-pop{--edge:var(--zl-a-solid)}
:root body.zl-home.zl-home .zl-table :is(th,td){display:block;min-width:0;padding:0;border:0;text-align:left}
:root body.zl-home.zl-home .zl-table tbody th{font-size:1.4rem;letter-spacing:-.02em}
:root body.zl-home.zl-home .zl-table td[data-l]::before{content:attr(data-l);display:block;margin-bottom:.4rem;font-size:.9375rem;font-weight:400;letter-spacing:normal;line-height:1.5;color:var(--muted)}
:root body.zl-home.zl-home .zl-table td.zl-price{margin-top:0;font-size:clamp(2.1rem,3.4vw,2.8rem);letter-spacing:-.04em;line-height:1;white-space:normal;min-width:0}
:root body.zl-home.zl-home .zl-table td.zl-price.zl-o{font-size:clamp(1.6rem,2.4vw,2rem);color:var(--muted)}
/* The tight tracking and line height above are set on the big price figure, and the fine print inside the same cell inherits them
   (letter-spacing is inherited as a length, so -.04em of 2.8rem squeezes 13px text). Reset them on everything nested in a price
   cell and in the row heading cell, which sets its own -.02em. Sizes and weights stay as on the live page (the note's own inline style). */
:root body.zl-home.zl-home .zl-table td.zl-price :is(small,a),
:root body.zl-home.zl-home .zl-table tbody th :is(ul,li,p){letter-spacing:normal;line-height:1.5}
:root body.zl-home.zl-home .zl-table td.zl-price small{font-weight:400}
@media (min-width:1000px){
  :root body.zl-home.zl-home .zl-table tbody tr{grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr) minmax(0,.6fr) auto;gap:2.5rem;align-items:start}
}

/* ---- bands ---- */
:root body.zl-home.zl-home .zl-band{background:linear-gradient(120deg,var(--zl-band) 0%,var(--zl-indigo) 100%);border:0}
:root body.zl-home.zl-home .zl-badge{text-transform:lowercase}
:root body.zl-home.zl-home .zl-badge::first-letter{text-transform:uppercase}

/* ---- W-048: outcome headline, proof block high on the page, plain Websites list ---- */
:root body.zl-home.zl-home .zl-kicker{margin:0 0 1rem;font-size:.9rem;font-weight:600;letter-spacing:.04em;color:var(--zl-text-a)}
:root body.zl-home.zl-home .zl-hero h1{max-width:16ch}
:root body.zl-home.zl-home .zl-proof-tag{margin:0 0 1rem}
:root body.zl-home.zl-home .zl-proof{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.zl-webgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.zl-webgrid li{position:relative;padding:1.1rem 0 1.1rem 1.6rem;border-top:1px solid var(--line)}
.zl-webgrid li:last-child{border-bottom:1px solid var(--line)}
.zl-webgrid li::before{content:"";position:absolute;left:0;top:1.95rem;width:.7rem;height:2px;background:var(--zl-text-a)}
.zl-webgrid h3{margin:0 0 .35rem;font-size:1.2rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--zl-white)}
.zl-webgrid p{margin:0;color:var(--muted);line-height:1.55;max-width:52ch}
@media (min-width:720px){.zl-webgrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}.zl-webgrid li:nth-last-child(2):nth-child(even){border-bottom:1px solid var(--line)}}

/* ---- footer: two tracks that may shrink (the pre-built two-column footer class has an unbounded first track) ---- */
@media (min-width:1024px){
  footer#contact .max-w-7xl>.grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}

@media (prefers-reduced-motion:reduce){
  :root body.zl-home.zl-home .zl-rows li{transition:none}
  :root body.zl-home.zl-home .zl-rows li:hover{transform:none}
  :root body.zl-home.zl-home .zl-slip{transform:none}
}