/* Home page (design-spec.md). Loaded on index.html only, after site.css.
   Spacing scale: 4 8 12 16 24 32 48 64 96 112. Breakpoints: 1200, 992, 768, 480. */
:root{
  --accent-text:#087A56; --ink:#0D1E21; --muted:#4A5A5D; --line:#DCE4E3;
  --sec-y:112px; --sec-y-compact:72px; --gutter:80px; --head-gap:48px;
}
body{font-weight:400}

/* ── Frame ── */
.wrap{max-width:75rem;margin:0 auto;padding:0 var(--gutter);box-sizing:content-box}
.hm{padding:var(--sec-y) 0}
.hm.s-compact{padding:var(--sec-y-compact) 0}
.s-white{background:#fff}
.s-mint{background:var(--800)}
.s-mint-diag{background:linear-gradient(160deg,var(--800) 0 62%,#EAF6F2 62% 100%)}
.s-dark{background:var(--brandgreen);color:#fff}
[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── Type ── */
.h1{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.5rem);line-height:1.05;letter-spacing:-.02em;font-weight:600;margin:0}
.h2{font-size:clamp(1.875rem,1.35rem + 1.7vw,2.75rem);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:0}
.h2 .text-gradient-overlay,.h1 .text-gradient-overlay{display:inline;text-align:inherit}
.text-gradient-overlay.dark{text-align:inherit}
.h2-small{font-size:1.5rem;line-height:1.25;font-weight:600;color:var(--brandgreen);margin:0}
.kicker{font-size:.875rem;line-height:1.2;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.lead{font-size:1.125rem;line-height:1.55;color:var(--muted);margin:0}
@media (min-width:1280px){.lead{font-size:1.25rem}}
.s-dark .lead,.s-dark p{color:rgba(255,255,255,.84)}
.s-dark .kicker{color:var(--accent-light)}

/* Section heads: one rule. Centred above full-width components, left beside content, left on phones. */
.shead{display:flex;flex-direction:column;gap:16px;margin-bottom:var(--head-gap)}
.shead .kicker{margin-bottom:-4px}
.shead.center{text-align:center;align-items:center;max-width:42rem;margin-left:auto;margin-right:auto}
.shead:not(.center) .lead{max-width:36rem}
.split57 .shead{margin-bottom:24px}

/* ── Buttons ── */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.btns.center{justify-content:center}
.hm .button,.hm-hero .button,.cta2 .button{min-height:48px;padding:0 24px;border-radius:8px;font-size:18px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.hm .button:hover,.hm-hero .button:hover,.cta2 .button:hover{background-color:#0B9568}
.hm-hero .button-secondary.white,.cta2 .button-secondary.white{min-height:48px;padding:0 24px;border-radius:8px;font-size:18px;font-weight:600;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.4)}

/* ── S1 hero ── */
.hm-hero{background:linear-gradient(112deg,var(--brandgreen) 0 57%,var(--800) 57% 100%);padding:144px 0 112px;color:#fff}
.hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.hero-copy .lead{color:rgba(255,255,255,.86);max-width:34rem;margin-top:16px}
.reassure{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.875rem;color:rgba(255,255,255,.86)}
.reassure li{display:flex;align-items:center;gap:8px;margin:0;padding:0}
.reassure .tick{width:16px;height:16px}
.reassure .tick circle{fill:var(--accent-light)} .reassure .tick path{stroke:var(--brandgreen)}
.hero-visual{position:relative;padding-bottom:8%}
.hero-ws{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 30px 60px rgba(4,40,46,.28),0 0 0 1px rgba(4,40,46,.08)}
.hero-phone{position:absolute;width:30%;height:auto;left:-6%;bottom:-6%}

/* ── S2 proof ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:0}
.stats > div{border-top:2px solid var(--accent);padding-top:20px;margin:0}
.stats dt{font-size:2.75rem;line-height:1;font-weight:600;color:var(--brandgreen);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.stats dd{margin:12px 0 0;font-size:1rem;line-height:1.45;color:var(--muted);max-width:16rem}
.works-label{margin:48px 0 16px;text-align:center;font-size:.875rem;color:var(--muted)}
.integrations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.integrations li{margin:0;padding:12px 16px;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:.9375rem;font-weight:500;color:var(--ink);line-height:1.3}

/* ── Splits ── */
.split57{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.split57.top{align-items:start}
.split57.flip > :first-child{order:2}

/* ── S3 problem ── */
.problem .lead{font-size:1.25rem;color:var(--ink)}
.stall{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.stall li{margin:0;padding:0;display:flex;align-items:center;gap:14px;font-size:1.0625rem;font-weight:500;color:var(--ink)}
.stall i{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.stall i::before,.stall i::after{content:"";width:3px;height:12px;background:var(--brandgreen);border-radius:1px}
.problem .closing{margin:24px 0 0;font-size:1.125rem;font-weight:600;color:var(--brandgreen)}

/* ── Checklist ── */
.ticks2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks2 li{margin:0;padding:0;display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.5;color:var(--ink)}
.tick{width:22px;height:22px;flex:none;margin-top:1px}
.tick circle{fill:var(--accent)} .tick path{stroke:#fff}
.ticks2.dark li{color:rgba(255,255,255,.9)}
.ticks2.dark .tick circle{fill:var(--accent-light)} .ticks2.dark .tick path{stroke:var(--brandgreen)}

/* ── S4 loop ── */
.loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;counter-reset:none}
.loop-step{position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 24px;display:flex;flex-direction:column;gap:12px}
.loop-step img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:8px;background:var(--800);display:block}
.loop-t{display:flex;align-items:center;gap:10px}
.loop-t h3{margin:0;font-size:1.125rem;line-height:1.3;font-weight:600;color:var(--brandgreen)}
.badge{width:32px;height:32px;border-radius:50%;background:var(--brandgreen);color:#fff;font-size:.875rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none}
.loop-step p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.loop-step:not(:last-child)::after{content:"";position:absolute;right:-19px;top:calc(16px + 12% );width:10px;height:10px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}
.loop-return{position:relative;height:32px;margin:0 10% 0;border:2px dashed var(--accent);border-top:0;border-radius:0 0 12px 12px;text-align:center}
.loop-return::before{content:"";position:absolute;left:-7px;top:-6px;width:10px;height:10px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg)}
.loop-return span{position:relative;top:22px;background:#fff;padding:0 12px;font-size:.875rem;font-weight:500;color:var(--brandgreen)}
#how .btns{margin-top:64px}

/* ── S5 safety ── */
.shot-dark{width:100%;height:auto;display:block;border-radius:12px;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 48px rgba(0,0,0,.35)}
.s-dark .ticks2{margin-top:8px}
.s-dark .text-gradient-overlay{background-image:linear-gradient(90deg,#fff 72%,var(--accent-light))}

/* ── S6 owner ── */
.owner-phone{display:flex;justify-content:center}
.owner-phone img{width:320px;max-width:100%;height:auto}

/* ── S7 tabs (reuses .showcase-tabs/.showcase-panel from site.css) ── */
#product .showcase-tabs{margin-bottom:40px}
#product .showcase-tabs [role=tab]{min-height:44px;padding:0 20px}
#product .showcase-panel{grid-template-columns:5fr 7fr;gap:56px}
.showcase-copy h3{margin:0 0 20px;font-size:1.25rem;line-height:1.3;font-weight:600;color:var(--brandgreen)}
.showcase-copy .text-link-arrow{display:inline-block;margin-top:24px;color:var(--accent-text)}
.frame1610{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 50px rgba(4,40,46,.12);background:var(--800)}
.frame1610 img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}

/* ── S8 AI answers ── */
.split57 > img.shot{width:100%;height:auto}

/* ── S9 agency cards ── */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.media-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.media-card .media{aspect-ratio:16/10;background:var(--800);padding:24px 24px 0;overflow:hidden}
.media-card .media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px 8px 0 0;box-shadow:0 -1px 0 var(--line),0 8px 24px rgba(4,40,46,.10)}
.mc-body{padding:28px;display:flex;flex-direction:column;gap:8px}
.mc-body h3{margin:0;font-size:1.25rem;line-height:1.3;font-weight:600;color:var(--brandgreen)}
.mc-body p{margin:0;color:var(--muted);line-height:1.6}

/* ── S10 FAQ ── */
.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.faq-head{position:sticky;top:120px}
.faq-head .shead{margin-bottom:16px}
.faq-head .body{margin:0;color:var(--muted)}
.faq-head a{color:var(--accent-text);font-weight:600}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid transparent;border-radius:12px}
.faq-item:hover{border-color:var(--accent)}
.faq-item summary{list-style:none;cursor:pointer;min-height:64px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:1.125rem;font-weight:600;color:var(--brandgreen);line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.faq-item summary i{position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line)}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--brandgreen)}
.faq-item summary i::after{transform:rotate(90deg)}
.faq-item[open] summary i{background:var(--brandgreen);border-color:var(--brandgreen)}
.faq-item[open] summary i::before{background:#fff}
.faq-item[open] summary i::after{display:none}
.faq-a{padding:0 24px 24px}
.faq-a p{margin:0;max-width:40rem;color:var(--muted);line-height:1.6}

/* ── S11 final CTA ── */
.cta2{background:var(--brandgreen);border-radius:16px;padding:80px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta2 .text-gradient-overlay{background-image:linear-gradient(90deg,#fff 72%,var(--accent-light))}
.cta2 .lead{color:rgba(255,255,255,.86);max-width:36rem}
.cta2 .btns{margin-top:16px}
.cta2 .micro{margin:0;font-size:.875rem;color:rgba(255,255,255,.8)}

/* ── ≤1199: loop becomes a vertical rail ── */
@media (max-width:1199px){
  :root{--gutter:48px}
  .loop{grid-template-columns:1fr;gap:0}
  .loop-step{display:grid;grid-template-columns:48px 1fr 240px;grid-template-rows:auto 1fr;column-gap:20px;row-gap:8px;border:0;background:none;padding:0 0 32px;border-radius:0}
  .loop-step::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--accent)}
  .loop-step:not(:last-child)::after{display:none}
  .loop-step img{grid-column:3;grid-row:1 / span 2;align-self:start}
  .loop-t{grid-column:1 / span 2;grid-row:1}
  .loop-step p{grid-column:2;grid-row:2}
  .badge{width:40px;height:40px;font-size:1rem}
  .loop-t{gap:20px}
  .loop-return{border:0;height:auto;margin:0 0 0 0;text-align:left;padding-left:68px}
  .loop-return::before{display:none}
  .loop-return span{position:static;padding:0;background:none}
}
/* ── tablet ── */
@media (max-width:991px){
  :root{--sec-y:88px;--sec-y-compact:64px}
  .hm-hero{background:var(--brandgreen);padding:120px 0 88px}
  .hero-grid,.split57,.faq-grid{grid-template-columns:1fr;gap:40px}
  .split57.flip > :first-child{order:0}
  .hero-visual{background:var(--800);border-radius:16px;padding:32px 24px 48px;max-width:720px;width:100%;box-sizing:border-box;justify-self:center}
  .hero-phone{width:28%;left:2%;bottom:-4%}
  .stats{grid-template-columns:1fr 1fr;row-gap:32px}
  .integrations{grid-template-columns:1fr 1fr}
  #product .showcase-panel{grid-template-columns:1fr;gap:32px}
  .faq-head{position:static}
  .owner-phone img{width:280px}
  .split57 > img,.split57 > .shot-dark{max-width:720px;justify-self:center}
}
@media (max-width:767px){
  :root{--gutter:20px}
  .cards2{grid-template-columns:1fr}
  .loop-step{grid-template-columns:48px 1fr;grid-template-rows:auto auto auto}
  .loop-step img{grid-column:2;grid-row:3;max-width:320px;margin-top:8px}
}
/* ── phone ── */
@media (max-width:479px){
  :root{--sec-y:56px;--sec-y-compact:48px;--head-gap:32px}
  .shead.center{text-align:left;align-items:flex-start}
  .btns,.btns.center{flex-direction:column;align-items:stretch}
  .btns .button,.btns .button-secondary{width:100%}
  .reassure{flex-direction:column;gap:8px}
  .hm-hero{padding:104px 0 56px}
  .hero-visual{padding:24px;display:flex;justify-content:center}
  .hero-ws{display:none}
  .hero-phone{position:static;width:220px}
  .stats{grid-template-columns:1fr;gap:24px}
  .stats dt{font-size:2.25rem}
  .works-label{text-align:left}
  .integrations li{font-size:.875rem;min-height:56px}
  .owner-phone img{width:240px}
  #product .showcase-tabs{display:none}
  #product .showcase-panel[hidden]{display:grid}
  #product .showcase-panel + .showcase-panel{margin-top:48px}
  .cta2{padding:48px 20px;text-align:left;align-items:flex-start}
  .faq-item summary{padding:18px 20px;font-size:1.0625rem}
  .faq-a{padding:0 20px 20px}
}

/* review fixes */
.faq-list{align-items:stretch}
.faq-item{display:block;width:100%;box-sizing:border-box}
.media-card .media img[src*="screen-email"]{object-position:left top}

/* ── Design pass (round 2) ── */
/* Lead size: one step down in split columns so text blocks breathe */
.split57 .lead,.faq-head .lead{font-size:1.125rem}
@media (min-width:1280px){.split57 .lead{font-size:1.125rem}}

/* S2 stats: number + small unit, one short label, equal cards */
.stats{gap:20px}
.stats .stat{border:0;background:#F3F9F7;border-radius:12px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px}
.stats dt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:inherit;white-space:normal}
.stats dt .n{font-size:2.25rem;line-height:1;font-weight:600;color:var(--brandgreen);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.stats dt .u{font-size:1rem;font-weight:600;color:var(--accent-text)}
.stats dd{margin:0;font-size:.9375rem;line-height:1.45;color:var(--muted);max-width:none}
@media (min-width:992px) and (max-width:1199px){.stats dt .n{font-size:1.875rem}}

/* S3 problem: real rows with icons */
.stall{gap:12px;margin-top:24px}
.stall li{align-items:flex-start;gap:16px;background:#fff;border-radius:12px;padding:16px 20px;font-weight:400}
.stall .si{width:40px;height:40px;flex:none;border-radius:10px;background:#FCEEDD;display:inline-flex;align-items:center;justify-content:center}
.stall .si svg{width:20px;height:20px;fill:none;stroke:#9A4A00;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stall li > span:last-child{display:flex;flex-direction:column;gap:2px}
.stall b{font-size:1.0625rem;font-weight:600;color:var(--ink)}
.stall small{font-size:.9375rem;color:var(--muted)}
.stall i{display:none}
.problem .closing{display:flex;gap:10px;align-items:center;font-size:1.125rem;font-weight:600;color:var(--brandgreen);margin-top:28px}
.problem .closing span{color:var(--accent)}

/* S4 loop at ≥1200: an open timeline, no boxed cards or tiny screenshots */
@media (min-width:1200px){
  .loop{gap:32px;position:relative}
  .loop::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:2px;background:var(--accent)}
  .loop-step{background:none;border:0;padding:0;gap:14px}
  .loop-step img{display:none}
  .loop-step:not(:last-child)::after{display:none}
  .loop-t{flex-direction:column;align-items:flex-start;gap:16px}
  .badge{width:40px;height:40px;font-size:1rem;position:relative;z-index:1;box-shadow:0 0 0 6px #fff}
  .loop-t h3{font-size:1.25rem}
  .loop-step p{font-size:1rem;line-height:1.6}
  .loop-return{margin:40px 20px 0;height:36px;border-radius:0 0 14px 14px}
  .loop-return::before{left:-7px;top:-6px}
  .loop-return span{top:26px}
}

/* S5 safety: balanced columns, smaller checklist */
#safety .split57{grid-template-columns:1fr 1fr;gap:72px}
#safety .ticks2{gap:12px}
#safety .ticks2 li{font-size:1rem}
@media (max-width:991px){#safety .split57{grid-template-columns:1fr;gap:40px}}
.stats dt{flex-wrap:nowrap}
.stats dt .n{font-size:clamp(1.625rem,1rem + 1.1vw,2.25rem)}
@media (min-width:1200px){.loop::before{right:calc((100% - 128px) / 5 - 20px)}}

/* ── Review fixes (round 3) ── */
/* Headings: flat ink with an accent phrase; balanced line breaks */
.h1,.h2{text-wrap:balance}
.hm .h2,.hm-hero .h1,.cta2 .h2{color:var(--brandgreen)}
.hm-hero .h1,.s-dark .h2,.cta2 .h2{color:#fff}
.acc{color:#0B8F65}
.hm-hero .acc,.s-dark .acc,.cta2 .acc{color:var(--accent-light)}
.hm .lead{color:var(--muted)}
.s-dark .lead{color:rgba(255,255,255,.84)}
.problem .lead{color:var(--ink)}
.showcase-copy h3,.mc-body h3,.loop-t h3{letter-spacing:-.005em}

/* Proof: equal columns, quiet integrations line */
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats dt .n{font-size:2.5rem}
.integrations{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.integrations li{border:0;background:none;min-height:0;padding:0;color:var(--muted);font-size:.9375rem;font-weight:500;position:relative}
.integrations li + li::before{content:"";position:absolute;left:-16px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#B9C7C5}
@media (max-width:991px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.stats{grid-template-columns:1fr}.integrations{justify-content:flex-start}}

/* One left edge: header and footer share the content frame on this page */
.nav-container,.section.footer > .container-large{max-width:75rem;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:content-box}
.nav,.section.footer{padding-left:0;padding-right:0}

/* Owner section: flat mint, no leftover diagonal */
.s-mint-diag{background:var(--800)}

/* Hero: phone covers the sidebar, not the to-do text */
.hero-phone{left:-10%;bottom:-8%;width:28%}
@media (min-width:992px) and (max-width:1199px){.hm-hero .btns{flex-wrap:nowrap}.hm-hero .btns .button,.hm-hero .btns .button-secondary{font-size:16px;padding:0 18px}}

/* Cards: crop from the top-left so no words are cut */
.media-card .media img{object-position:left top !important}

/* Loop rail (≤1199): title and text share one edge, tighter rows */
@media (max-width:1199px){
  .loop-step{grid-template-columns:40px 1fr 240px;padding-bottom:24px}
  .loop-t{gap:16px}
  .loop-step::before{left:19px}
  .loop-step p{grid-column:2}
}
@media (max-width:767px){.loop-step{grid-template-columns:40px 1fr}}
/* Loop line (≥1200): return path from step 5's badge back to step 1's */
@media (min-width:1200px){.loop-return{margin-left:20px;margin-right:calc((100% - 128px) / 5 - 20px)}}
.section.footer > .container-large,.nav-container{width:auto}
@media (max-width:479px){
  .hero-phone{width:220px;left:auto;bottom:auto}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stats .stat{padding:18px 16px}
  .stats dt .n{font-size:2rem}
  .stats dd{font-size:.875rem}
  .integrations{gap:8px 20px}
  .integrations li + li::before{display:none}
}
/* The CTA card is dark: its lead stays white (the .hm .lead rule above would grey it) */
.hm .cta2 .lead{color:rgba(255,255,255,.9)}

/* ── Subpages (review round 4): same system as the home page ── */
.page-hero{padding-top:152px;padding-bottom:72px}
.page-hero .shead{margin-bottom:0;max-width:46rem}
.page-hero .shead.center{max-width:46rem}
.h1.dark{color:var(--brandgreen)}
.h1 .acc{color:#0B8F65}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:.9375rem;font-weight:500;text-decoration:none}
.jump a:hover{border-color:var(--accent);color:var(--brandgreen)}
.panel{background:#F3F9F7;border:1px solid var(--line);border-radius:16px;padding:32px}
.panel-h{margin:0 0 20px;font-size:1.25rem;line-height:1.3;font-weight:600;color:var(--brandgreen)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px}
.s-white .tile{background:#F3F9F7}
.tile-i{width:44px;height:44px;border-radius:12px;background:var(--800);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.s-white .tile-i{background:#fff}
.tile-i img{width:22px;height:22px}
.tile h3{margin:0;font-size:1.125rem;line-height:1.3;font-weight:600;color:var(--brandgreen);letter-spacing:-.005em}
.tile p{margin:0;color:var(--muted);line-height:1.6;flex:1}
.tile-btn{align-self:flex-start;margin-top:12px;min-height:48px;padding:0 20px;border-radius:8px;font-size:16px;font-weight:600;display:inline-flex;align-items:center}
.body-link{margin:24px 0 0}
.body-link a,.prose-card a{color:var(--accent-text);font-weight:600}
.prose-card{max-width:46rem;background:#F3F9F7;border:1px solid var(--line);border-radius:16px;padding:32px;color:var(--muted);line-height:1.6}
.prose-card p{margin:0}
.nf{min-height:60vh;display:flex;align-items:center}
.nf .wrap{width:100%}
.hm .split57 > img.shot{border-radius:12px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(4,40,46,.12)}
@media (max-width:991px){.tiles{grid-template-columns:1fr 1fr}.page-hero{padding-top:120px;padding-bottom:56px}}
@media (max-width:767px){.tiles,.tiles.three{grid-template-columns:1fr}}
@media (max-width:479px){.page-hero{padding-top:104px;padding-bottom:40px}.jump a{min-height:36px;padding:0 12px;font-size:.875rem}.panel,.tile,.prose-card{padding:22px 18px}.tile-btn{align-self:stretch;justify-content:center}}

/* ── Subpage review fixes (round 5) ── */
/* Header: current page in brand colour with an underline, not the template's grey pill */
.nav-link.w--current,.nav-link.w--current:hover{background:transparent;color:var(--brandgreen);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
/* Secondary buttons on light backgrounds */
.hm .button-secondary:not(.white){min-height:48px;padding:0 20px;border:1px solid #C2CECC;background:#fff;color:var(--brandgreen);border-radius:8px;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.hm .button-secondary:not(.white):hover{border-color:var(--accent);background:#fff}
/* Contact: no orphan tile at tablet width */
@media (min-width:768px) and (max-width:991px){.tiles.three > :last-child:nth-child(odd){grid-column:1 / -1}}
/* Features jump bar scrolls sideways on phones instead of wrapping */
@media (max-width:767px){.jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);padding-bottom:4px}.jump::-webkit-scrollbar{display:none}.jump a{flex:none}}
/* Features agency cards: three across */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:991px){.cards3{grid-template-columns:1fr}}
/* Legal: the note sits in the hero */
.legal .prose-card{margin-top:32px;background:#fff}
.prose-h{font-size:1.125rem;line-height:1.3;color:var(--brandgreen);margin:24px 0 8px;font-weight:600}
/* Early access on the shared system: head and steps left, form right; on small screens the form comes right after the head */
.ea2 .ea-grid{display:grid;grid-template-columns:5fr 6fr;grid-template-areas:"head card" "copy card";column-gap:64px;row-gap:8px;align-items:start}
.ea2 .ea-head{grid-area:head;margin-bottom:24px}
.ea2 .ea-copy{grid-area:copy}
.ea2 .ea-card{grid-area:card}
.ea-sub{font-size:1rem;font-weight:600;color:var(--brandgreen);margin:0 0 4px}
.ea2 .ea-next{margin-top:12px}
@media (max-width:991px){.ea2 .ea-grid{grid-template-columns:1fr;grid-template-areas:"head" "card" "copy";row-gap:32px}.ea2 .ea-head{margin-bottom:0}}
/* Form details */
.fld select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.fld select:has(option[value=""]:checked){color:#61656D}
.fld.has-err textarea{border-color:#B3261E}
.fld .err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#B3261E;color:#fff;font-size:11px;font-weight:700;margin-right:6px;vertical-align:-2px}
.ea-ok{width:56px;height:56px;border-radius:50%;background:#E3F3EA;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.ea-ok svg{width:28px;height:28px;fill:none;stroke:#0B6B48;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Phone image: no clipped shadow edge */
.owner-phone img{width:360px}
@media (max-width:991px){.owner-phone img{width:300px}}
@media (max-width:479px){.owner-phone img{width:260px}}