/* 7-0 Marketing, round 19: Webflow-class dark product page.
   Tokens first. No raw hex below :root. Dark theme locked site-wide. */
/* self-hosted fonts (Google Fonts latin subsets, OFL) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/instrument-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* size-matched fallback so the page does not shift when Figtree arrives (measured: regular 1.006x Arial, bold 0.957x Arial Bold) */
@font-face{font-family:'Figtree Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT');size-adjust:100.6%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');size-adjust:95.7%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
:root{
  --ground:#080b12;        /* near-black with a navy cast, never pure black */
  --ground-2:#0e121c;      /* raised band */
  --surface:#121724;       /* panels, inputs */
  --surface-2:#182030;     /* hover */
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.22);
  --text:#ffffff;
  --text-2:rgba(255,255,255,.72);
  --text-3:rgba(255,255,255,.52);
  --accent:#1a6bff;        /* logo blue, the only accent */
  --accent-ink:#3b82ff;    /* hover and links on dark */
  --accent-soft:rgba(26,107,255,.16);
  --accent-on-card:#0d4fd0;  /* blue that passes AA on the light card */
  --accent-vein:#9dc0ff;   /* the 7-0 written in veins */
  --accent-core:#bfd6ff;   /* the bright core of a travelling pulse */
  --on-accent:#ffffff;
  --card:#f3f5f9;          /* the light product card, the one bright object */
  --card-2:#ffffff;
  --card-line:rgba(11,31,58,.12);
  --card-line-strong:rgba(11,31,58,.26);
  --card-ink:#0b1f3a;
  --card-ink-2:#3a4a66;
  --card-ink-3:#5f6c84;
  --warn:#ff7a7a;
  --warn-bg:rgba(255,122,122,.12);

  /* aliases kept for older markup on the acupuncture track */
  --ink:#ffffff; --ink-2:rgba(255,255,255,.72); --ink-3:rgba(255,255,255,.52);
  --paper:#121724; --tint:#0e121c; --tint-2:#121724;
  --on-navy:#ffffff; --on-navy-2:rgba(255,255,255,.72); --navy-line:rgba(255,255,255,.12);
  --ok:#1a6bff;

  --font:'Figtree','Figtree Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-0:clamp(.8125rem,.78rem + .15vw,.875rem);
  --fs-1:clamp(1.0625rem,1rem + .25vw,1.125rem);
  --fs-2:clamp(1.1875rem,1.1rem + .4vw,1.375rem);
  --fs-3:clamp(1.5rem,1.3rem + .9vw,2rem);
  --fs-4:clamp(1.875rem,1.5rem + 1.8vw,3rem);
  --fs-5:clamp(2.5rem,1.6rem + 3.6vw,5.25rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-10:40px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  --r-input:6px;
  --r-panel:12px;
  --r-card:16px;
  --r-pill:999px;

  --shadow-card:0 30px 60px -28px rgba(0,0,0,.7);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms; --dur-base:320ms; --dur-slow:720ms;

  --wrap:1280px;
  --gutter:clamp(20px,5vw,64px);
  --nav-h:64px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--line-strong) var(--ground)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);font-size:var(--fs-1);line-height:1.6;color:var(--text);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button,input,select,textarea,label{touch-action:manipulation;-webkit-tap-highlight-color:rgba(26,107,255,.2)}
ul,ol{list-style:none}
strong,b{font-weight:600}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h1{font-size:var(--fs-5);letter-spacing:-.03em}
h2{font-size:var(--fs-4)}
h3,.h3{font-size:var(--fs-3);letter-spacing:-.02em}
h4,.h4{font-size:var(--fs-2);letter-spacing:-.01em;line-height:1.25}
p{max-width:62ch;text-wrap:pretty}
.lede{font-size:var(--fs-2);line-height:1.5;color:var(--text-2);max-width:54ch}
.small{font-size:var(--fs-0);color:var(--text-3)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-4);top:-60px;z-index:400;background:var(--accent);color:var(--on-accent);padding:var(--s-3) var(--s-4);border-radius:var(--r-input)}
.skip:focus{top:var(--s-4)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--s-24);padding-bottom:var(--s-24)}
.section.tight{padding-top:var(--s-16);padding-bottom:var(--s-16)}
@media (max-width:720px){.section{padding-top:var(--s-16);padding-bottom:var(--s-16)}.section.tight{padding-top:var(--s-12);padding-bottom:var(--s-12)}}
.band-tint,.band-tint2{background:var(--ground-2)}
.band-navy{background:var(--ground-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:64ch;margin-bottom:var(--s-12)}
.sec-head p{margin-top:var(--s-4)}
.grid{display:grid;gap:var(--s-8)}
.grid > *{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-5-7{grid-template-columns:5fr 7fr}
.grid-7-5{grid-template-columns:7fr 5fr}
.grid-4-8{grid-template-columns:4fr 8fr}
@media (max-width:900px){.grid-2,.grid-5-7,.grid-7-5,.grid-4-8{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-6);border-radius:var(--r-input);font-weight:600;font-size:var(--fs-1);white-space:nowrap;border:1px solid transparent;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-ink)}
.btn-outline,.btn-ghost-navy{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn-outline:hover,.btn-ghost-navy:hover{background:var(--surface-2);border-color:var(--text-2)}
.btn-lg{min-height:56px;padding:0 var(--s-8)}
.link{font-weight:600;color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{color:var(--text)}
.link-dark,.link-light{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;color:var(--text)}
.link-dark:hover,.link-light:hover{color:var(--accent-ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* ---------- top bar + nav ---------- */
.topbar{background:var(--accent);color:var(--on-accent);font-size:var(--fs-0);font-weight:500}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:var(--s-4)}
.topbar a{color:var(--on-accent)}
.topbar a:hover{text-decoration:underline;text-underline-offset:3px}
.topbar .tb-left,.topbar .tb-right{display:flex;gap:var(--s-6)}
@media (max-width:720px){.topbar .tb-right{display:none}.topbar .tb-left a:nth-child(2){display:none}}
.nav{position:sticky;top:0;z-index:300;background:rgba(8,11,18,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h);gap:var(--s-6)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:32px;width:auto}
.nav-links{display:flex;align-items:center;gap:var(--s-6);font-weight:500;font-size:var(--fs-0)}
.nav-links a{padding:var(--s-2) 0;color:var(--text-2);transition:color var(--dur-fast)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta{display:flex;gap:var(--s-2)}
.nav-cta .btn{min-height:40px;padding:0 var(--s-4);font-size:var(--fs-0)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:var(--r-input)}
.burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1040px){.nav-links,.nav-cta{display:none}.burger{display:flex}}
.sheet{position:fixed;inset:0;top:calc(var(--nav-h) + 40px);z-index:290;background:var(--ground);overscroll-behavior:contain;padding:var(--s-6) var(--gutter) var(--s-24);display:flex;flex-direction:column;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base);overflow-y:auto}
.sheet.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.sheet a{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) 0;border-bottom:1px solid var(--line);font-weight:600;font-size:var(--fs-2)}
.sheet a[aria-current="page"]{color:var(--accent-ink)}
.sheet .sheet-ctas{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-6)}
.sheet .sheet-ctas a{padding:0 var(--s-6);justify-content:center;border-bottom:0;font-size:var(--fs-1)}
.sheet .sheet-meta{margin-top:var(--s-8);font-size:var(--fs-0);color:var(--text-3)}
body.menu-open{overflow:hidden}

/* ---------- hero (split, inner-page style) ---------- */
.hero{background:var(--ground)}
.hero .wrap{display:grid;grid-template-columns:6fr 6fr;gap:var(--s-12);align-items:center;padding-top:var(--s-16);padding-bottom:var(--s-16)}
.hero h1{max-width:14ch}
.hero .lede{margin-top:var(--s-6);max-width:44ch}
.hero .cta-row{margin-top:var(--s-8)}
.hero-media{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--surface);aspect-ratio:3/2;border:1px solid var(--line)}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:var(--s-8);padding-top:var(--s-8);padding-bottom:var(--s-12)}.hero-media{order:-1;aspect-ratio:4/3}}

/* the stage hero: headline on top, the product rail beneath */
.hero.stage .wrap{display:block;padding-top:var(--s-16);padding-bottom:var(--s-16)}
.hero.stage h1{max-width:12ch}
.hero.stage .lede{max-width:44ch}
.rail-cards{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-4);margin-top:var(--s-16);align-items:stretch}
.rail-cards > *{min-width:0}
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
a.pcard:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.pcard .pcard-img{flex:1;min-height:220px;overflow:hidden;background:var(--ground-2)}
.pcard .pcard-img img{width:100%;height:100%;object-fit:cover;object-position:top left}
.pcard .pcard-cap{padding:var(--s-4) var(--s-6) var(--s-6);border-top:1px solid var(--line)}
.pcard .pcard-cap .k{font-size:var(--fs-3);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.pcard .pcard-cap .v{margin-top:var(--s-1);color:var(--text-2);font-size:var(--fs-0)}
.pcard .pcard-cap .go{display:inline-block;margin-top:var(--s-3);font-size:var(--fs-0);font-weight:600;color:var(--accent-ink)}
@media (max-width:1040px){.rail-cards{grid-template-columns:1fr 1fr}.rail-cards > .calc{grid-column:1 / -1}}
@media (max-width:640px){.rail-cards{grid-template-columns:1fr;margin-top:var(--s-10)}.hero.stage .wrap{padding-top:var(--s-8);padding-bottom:var(--s-12)}}

/* page hero for inner pages */
.page-head{background:var(--ground);border-bottom:1px solid var(--line)}
.page-head .wrap{padding-top:var(--s-16);padding-bottom:var(--s-16);display:grid;grid-template-columns:7fr 5fr;gap:var(--s-12);align-items:end}
.page-head .wrap.solo{grid-template-columns:1fr}
.page-head h1{max-width:16ch;font-size:clamp(2.25rem,1.6rem + 2.6vw,4rem)}
.page-head .lede{margin-top:var(--s-4)}
.page-head .crumbs{font-size:var(--fs-0);color:var(--text-3);margin-bottom:var(--s-6);font-weight:500}
.page-head .crumbs a:hover{color:var(--text)}
.page-head .intro{font-size:var(--fs-1);font-weight:500;color:var(--text-2);max-width:56ch;margin-bottom:var(--s-4);line-height:1.5}
.page-head .ph-media{border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/2;background:var(--surface);border:1px solid var(--line)}
.page-head .ph-media img{width:100%;height:100%;object-fit:cover}
.page-head .ph-quote{align-self:center;margin:0;position:relative;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-8)}
.page-head .ph-quote p{font-size:var(--fs-2);line-height:1.45;font-weight:500;letter-spacing:-.01em}
.page-head .ph-quote cite{display:block;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);font-style:normal;font-size:var(--fs-0);color:var(--text-2)}
.page-head .ph-quote cite b{display:block;color:var(--text);font-size:var(--fs-1)}
.page-head .ph-quote .fine{margin-top:var(--s-4);font-size:var(--fs-0);font-weight:400;color:var(--text-3);line-height:1.5}
.qualify-head .wrap{padding-top:var(--s-12);padding-bottom:var(--s-12)}
.qualify-head h1{max-width:24ch;font-size:var(--fs-4)}
@media (max-width:900px){.page-head .wrap{grid-template-columns:1fr;padding-top:var(--s-12);padding-bottom:var(--s-12)}.page-head .ph-media{display:none}.page-head .ph-quote{margin-top:var(--s-6)}}
@media (max-width:480px){.page-head .ph-quote{padding:var(--s-6)}}

/* ---------- check list ---------- */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-6);margin-top:var(--s-8)}
.checks li{display:flex;gap:var(--s-3);align-items:flex-start;font-weight:500;line-height:1.4}
.checks svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--accent-ink)}
.checks-1{grid-template-columns:1fr}
@media (max-width:560px){.checks{grid-template-columns:1fr}}

/* ---------- numbered rail ---------- */
.rail{position:relative;display:grid;gap:0}
.rail::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:1px;background:var(--line)}
.rail::after{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:1px;background:var(--accent);transform-origin:top;transform:scaleY(var(--rail-scale,0));transition:transform var(--dur-slow) var(--ease-out)}
.rail-item{position:relative;display:grid;grid-template-columns:40px 1fr;gap:var(--s-6);padding:var(--s-6) 0}
.rail-item + .rail-item{border-top:1px solid var(--line)}
.rail-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:var(--fs-0);background:var(--ground);border:1px solid var(--line-strong);color:var(--text-2);position:relative;z-index:1;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.band-tint .rail-num,.band-tint2 .rail-num,.band-navy .rail-num{background:var(--ground-2)}
.rail-item.is-on .rail-num{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rail-body h3{margin-bottom:var(--s-2)}
.rail-body p{color:var(--text-2)}
.rail-body .who{display:inline-block;margin-top:var(--s-3);font-size:var(--fs-0);font-weight:500;color:var(--text-3)}
.rail-body .who b{color:var(--text)}
@media (max-width:560px){.rail::before,.rail::after{left:15px}.rail-item{grid-template-columns:32px 1fr;gap:var(--s-4)}.rail-num{width:32px;height:32px;font-size:.75rem}}

/* ---------- chevron list ---------- */
.chev-list li{border-top:1px solid var(--line)}
.chev-list li:last-child{border-bottom:1px solid var(--line)}
.chev-list a,.chev-list .row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) 0;font-weight:600}
.chev-list a:hover{color:var(--accent-ink)}
.chev-list svg{flex:none;width:18px;height:18px}
.chev-list .row .meta{font-weight:400;color:var(--text-3);font-size:var(--fs-0)}

/* ---------- definition rows ---------- */
.defs{border-top:1px solid var(--line)}
.defs > div{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:var(--s-4) var(--s-8);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.defs dt{font-weight:600}
.defs dd{color:var(--text-2)}
@media (max-width:640px){.defs > div{grid-template-columns:1fr;gap:var(--s-1)}}

/* ---------- compare ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.compare > div{padding:var(--s-8);border-radius:var(--r-card);border:1px solid var(--line)}
.compare .bad{background:var(--ground)}
.compare .bad h4,.compare .bad .h4,.compare .bad ul li{color:var(--text-2)}
.compare .good{background:var(--surface);border-color:var(--line-strong)}
.compare h4,.compare .h4{margin-bottom:var(--s-4)}
.compare ul li{padding:var(--s-3) 0;border-top:1px solid var(--line);line-height:1.45}
@media (max-width:760px){.compare{grid-template-columns:1fr}}

/* ---------- proof / photo panels ---------- */
.figure{border-radius:var(--r-card);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.figure img{width:100%;height:auto}
.figure figcaption{padding:var(--s-3) var(--s-4);font-size:var(--fs-0);color:var(--text-2);border-top:1px solid var(--line)}
.phone-shot{max-width:260px}
.photo{border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/2;background:var(--surface);border:1px solid var(--line)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.tall{aspect-ratio:4/5}
.bleed-right{margin-right:calc(-1*var(--gutter))}
@media (max-width:900px){.bleed-right{margin-right:0}}
.quote{padding-left:var(--s-6);border-left:1px solid var(--line-strong)}
.quote p{font-size:var(--fs-2);line-height:1.45;font-weight:500;max-width:52ch}
.quote cite{display:block;margin-top:var(--s-4);font-style:normal;font-size:var(--fs-0);color:var(--text-3)}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8);border-top:1px solid var(--line);padding-top:var(--s-8)}
.stat-row .k{font-size:var(--fs-4);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat-row .v{margin-top:var(--s-2);color:var(--text-2)}
@media (max-width:720px){.stat-row{grid-template-columns:1fr;gap:var(--s-6)}}

/* customer story cards (exactly two on the site) */
.stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.story{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.story:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.story .story-img{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--ground-2)}
.story .story-img img{width:100%;height:100%;object-fit:cover;object-position:top left}
.story .story-body{padding:var(--s-8)}
.story .k{font-size:var(--fs-4);font-weight:600;letter-spacing:-.03em;line-height:1}
.story .kv{margin-top:var(--s-2);color:var(--text-2);font-weight:500}
.story blockquote{margin-top:var(--s-6);font-size:var(--fs-1);line-height:1.5;color:var(--text)}
.story cite{display:block;margin-top:var(--s-4);font-style:normal;font-size:var(--fs-0);color:var(--text-3)}
.story cite b{display:block;color:var(--text);font-weight:600}
.story .story-foot{margin-top:auto;padding:var(--s-4) var(--s-8);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s-4);font-size:var(--fs-0);color:var(--text-3)}
.story .story-foot a{color:var(--accent-ink);font-weight:600}
@media (max-width:900px){.stories{grid-template-columns:1fr}.story .story-body{padding:var(--s-6)}.story .story-foot{padding:var(--s-4) var(--s-6)}}

/* ---------- three-up ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.trio > div{padding:var(--s-8);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.trio h4,.trio .h4{margin-bottom:var(--s-3)}
.trio ul li{padding:var(--s-2) 0;border-top:1px solid var(--line);font-weight:500;font-size:var(--fs-0)}
@media (max-width:900px){.trio{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-6);align-items:center;padding:20px 0;font-weight:600;font-size:var(--fs-2);line-height:1.3;transition:color var(--dur-fast)}
.faq summary:hover{color:var(--accent-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-weight:400;transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast),border-color var(--dur-fast)}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq details p{padding-bottom:var(--s-6);color:var(--text-2);max-width:66ch}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s-6)}
.field{display:grid;gap:var(--s-2)}
.field label,.field-legend{font-weight:600;font-size:var(--fs-0)}
.field-legend{display:block;margin-bottom:var(--s-2)}
.field label .opt{font-weight:400;color:var(--text-3)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:var(--s-3) var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-input);background:var(--ground);font:inherit;color:var(--text);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field select option{background:var(--surface);color:var(--text)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field .err{display:none;font-size:var(--fs-0);color:var(--warn);font-weight:500}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:var(--warn)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
.form .field-row > fieldset.field{min-width:0}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:420px){.choices{grid-template-columns:1fr}}
.choices label{display:flex;align-items:center;gap:var(--s-3);min-height:48px;padding:var(--s-3) var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-input);font-weight:500;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.choices label:hover{border-color:var(--text-2)}
.choices input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.choices label:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft)}
.consent{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--fs-0);color:var(--text-2)}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent);flex:none}
.form-steps{display:flex;gap:var(--s-2);margin-bottom:var(--s-6)}
.form-steps span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.form-steps span.on{background:var(--accent)}
.form-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-8)}
@media (max-width:640px){.form-panel{padding:var(--s-6)}}
.form-note{font-size:var(--fs-0);color:var(--text-3)}
.form-msg{display:none;padding:var(--s-4);border-radius:var(--r-input);font-weight:500}
.form-msg.error{display:block;background:var(--warn-bg);color:var(--warn)}
.form-done{display:none}
.form-done.show{display:block}

/* ---------- quiz ---------- */
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-8)}
.quiz-q{display:none}
.quiz-q.on{display:block;animation:qin var(--dur-base) var(--ease-out)}
@keyframes qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quiz .qnum{display:block;font-size:var(--fs-0);font-weight:600;color:var(--accent-ink);margin-bottom:var(--s-3)}
.quiz-q h2,.quiz-q .h3{font-size:var(--fs-3);margin-bottom:var(--s-4);max-width:24ch}
.quiz-q .why{color:var(--text-2);margin-bottom:var(--s-8);max-width:60ch}
.quiz-opts{display:grid;gap:var(--s-3)}
.quiz-opts button{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);text-align:left;min-height:60px;padding:var(--s-4) var(--s-6);border:1px solid var(--line-strong);border-radius:var(--r-input);font-weight:500;font-size:var(--fs-1);background:var(--ground);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.quiz-opts button:hover{border-color:var(--text-2)}
.quiz-opts button.picked{border-color:var(--accent-ink);background:var(--accent-soft)}
.quiz-opts button .key{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-0);font-weight:600;background:var(--surface);color:var(--text-2);margin-right:var(--s-3)}
.quiz-opts button:hover .key,.quiz-opts button.picked .key{background:var(--accent);color:var(--on-accent)}
.quiz-opts button .lbl{flex:1;text-align:left}
.quiz-opts button .chev{width:18px;height:18px;flex:none;color:var(--text-3)}
.quiz-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line)}
.quiz-foot .btn{min-height:44px}
.quiz-prog{font-weight:500;font-size:var(--fs-0);color:var(--text-3)}
.quiz-prog-bar{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s-1);margin-bottom:var(--s-6)}
.quiz-prog-bar span{height:4px;border-radius:2px;background:var(--line);transition:background var(--dur-base) var(--ease-out)}
.quiz-prog-bar span.done{background:var(--accent)}
.quiz-prog-bar span.cur{background:var(--text)}
.quiz-result{display:none}
.quiz-result.on{display:block}
.quiz-result .h3{font-size:var(--fs-4);letter-spacing:-.025em;line-height:1.1}
.quiz-result .lede{margin-top:var(--s-4)}
.quiz-result .checks{margin-top:var(--s-6)}
.quiz-stage{max-width:800px;margin:0 auto}
.result-tag{display:inline-block;padding:var(--s-1) var(--s-3);border-radius:var(--r-input);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--fs-0);margin-bottom:var(--s-4)}
.result-tag.warn{background:var(--surface-2);color:var(--text)}
.sell{margin-top:var(--s-8);padding:var(--s-8);border-radius:var(--r-card);background:var(--ground);border:1px solid var(--line-strong)}
.sell h3{font-size:var(--fs-3);letter-spacing:-.02em;line-height:1.15;max-width:26ch}
.sell .checks{margin-top:var(--s-6)}
.sell .cta-row{margin-top:var(--s-8)}
.sell .sell-alt{margin-top:var(--s-6);font-size:var(--fs-0);color:var(--text-2)}
.sell .sell-alt a{color:var(--text);text-decoration:underline;text-underline-offset:4px;font-weight:600}
@media (max-width:640px){.quiz{padding:var(--s-6)}.sell{padding:var(--s-6)}.quiz-opts button{min-height:56px;padding:var(--s-3) var(--s-4)}}
@media (max-width:900px){#check .grid > div:last-child,#qualify .grid > div:last-child{order:-1}}

/* ---------- CTA band (the one blue field) ---------- */
.cta-band{background:var(--accent);color:var(--on-accent)}
.cta-band .wrap{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-12);align-items:center;padding-top:var(--s-24);padding-bottom:var(--s-24)}
.cta-band h2{color:var(--on-accent)}
.cta-band p{color:var(--on-accent);margin-top:var(--s-4)}
.cta-band .btn-primary{background:var(--on-accent);color:var(--accent)}
.cta-band .btn-primary:hover{background:var(--card)}
.cta-band .btn-ghost-navy,.cta-band .btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:var(--on-accent)}
.cta-band .btn-ghost-navy:hover,.cta-band .btn-outline:hover{background:rgba(255,255,255,.12);border-color:var(--on-accent)}
.cta-band :focus-visible{outline-color:var(--on-accent)}
@media (max-width:900px){.cta-band .wrap{grid-template-columns:1fr;padding-top:var(--s-16);padding-bottom:var(--s-16)}}

/* ---------- footer ---------- */
.footer{background:var(--ground);color:var(--text-2);font-size:var(--fs-0);border-top:1px solid var(--line)}
.footer .wrap{padding-top:var(--s-16);padding-bottom:var(--s-16);display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:var(--s-10)}
.footer .f-h{font-size:var(--fs-0);font-weight:600;margin-bottom:var(--s-4);color:var(--text)}
.footer li a{color:var(--text-2);transition:color var(--dur-fast)}
.footer li{padding:var(--s-1) 0}
.footer li a:hover{color:var(--text)}
.footer .f-brand img{height:30px;width:auto;margin-bottom:var(--s-4)}
.footer .f-brand p{max-width:34ch}
.footer .f-brand .f-contact{margin-top:var(--s-4)}
.footer .f-brand .f-contact a{display:block;font-weight:600;padding:2px 0;color:var(--text)}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-4);padding-bottom:calc(var(--s-4) + var(--sticky-pad,0px));color:var(--text-3)}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
.footer-bottom nav a{color:var(--text-2)}
.footer-bottom nav a:hover{color:var(--text)}
@media (max-width:900px){.footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer .wrap{grid-template-columns:1fr;gap:var(--s-8)}}

/* ---------- mobile sticky bar ---------- */
.sticky-bar{display:none}
@media (max-width:900px){
  .sticky-bar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);position:fixed;left:0;right:0;bottom:0;z-index:280;padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));background:rgba(8,11,18,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .sticky-bar .btn{min-height:48px;padding:0 var(--s-3)}
  body{padding-bottom:72px}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:80ms}.rv-d2{transition-delay:160ms}.rv-d3{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rail::after{transition:none}*{animation:none!important}}

/* ---------- legal ---------- */
.legal{max-width:72ch}
.legal h2{font-size:var(--fs-3);margin-top:var(--s-12);margin-bottom:var(--s-3)}
.legal h3{font-size:var(--fs-2);margin-top:var(--s-8);margin-bottom:var(--s-2)}
.legal p,.legal li{color:var(--text-2);margin-bottom:var(--s-3)}
.legal ul{list-style:disc;padding-left:var(--s-6)}
.legal ol{list-style:decimal}
.legal ol,.legal ul{padding-left:var(--s-6);margin-top:var(--s-3)}
.legal li{margin-top:var(--s-2)}
.legal hr{border:0;border-top:1px solid var(--line);margin:var(--s-8) 0}
.legal a{color:var(--accent-ink);text-decoration:underline;overflow-wrap:anywhere}
.draft{background:var(--warn-bg);border:1px solid var(--warn);border-radius:var(--r-input);padding:var(--s-3) var(--s-4);font-size:var(--fs-0);font-weight:500;margin-bottom:var(--s-8);line-height:1.5}

/* ---------- utilities ---------- */
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}.mt-12{margin-top:var(--s-12)}
.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}
.max-60{max-width:60ch}
.divider{border:0;border-top:1px solid var(--line);margin:var(--s-12) 0}
.calendly-inline-widget{min-width:280px;height:760px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--card-2)}
.media-pause{position:absolute;right:var(--s-3);bottom:var(--s-3);z-index:2;display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;padding:0 var(--s-3);border-radius:var(--r-pill);background:rgba(8,11,18,.78);color:var(--text);font-size:var(--fs-0);font-weight:600;border:1px solid var(--line)}
@media (max-width:560px){.btn{white-space:normal;text-align:center;line-height:1.25;padding-top:var(--s-3);padding-bottom:var(--s-3)}.cta-row .btn{width:100%}.quiz-foot .btn{width:auto}.nav .btn,.sticky-bar .btn{width:auto}}

/* ===== the light product card: the calculator ===== */
.calc{background:var(--card);color:var(--card-ink);border-radius:var(--r-card);padding:var(--s-8);border:1px solid var(--card-line);box-shadow:var(--shadow-card)}
.calc h2{font-size:var(--fs-2);letter-spacing:-.015em;line-height:1.25}
.calc .calc-sub{color:var(--card-ink-2);font-size:var(--fs-0);margin-top:var(--s-2)}
.calc-row{display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-4);align-items:center;padding:var(--s-4) 0;border-top:1px solid var(--card-line)}
.calc-row:first-of-type{border-top:0;margin-top:var(--s-4)}
.calc-row label{font-weight:600;font-size:var(--fs-0)}
.calc-row output{font-weight:600;font-variant-numeric:tabular-nums;min-width:3.5ch;text-align:right}
.calc-row input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--accent);height:32px}
.calc .seg{display:inline-flex;border:1px solid var(--card-line-strong);border-radius:var(--r-pill);padding:3px;gap:2px}
.calc .seg button{min-height:36px;padding:0 var(--s-4);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-0);color:var(--card-ink-2)}
.calc .seg button[aria-pressed="true"]{background:var(--card-ink);color:var(--card-2)}
.calc-out{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--card-ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
.calc-out > div{min-width:0}
.calc-out .k{font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent-on-card)}
.calc-out .v{font-size:var(--fs-0);font-weight:500;color:var(--card-ink-2);margin-top:var(--s-2)}
.calc-note{font-size:var(--fs-0);color:var(--card-ink-3);margin-top:var(--s-4)}
.calc .cta-row{margin-top:var(--s-6)}
.calc .link{color:var(--accent-on-card)}
.calc-out-3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.calc .h4{font-size:var(--fs-2)}
.calc :focus-visible{outline-color:var(--accent)}
.calc .btn-primary:hover{background:var(--card-ink)}
@media (max-width:640px){.calc{padding:var(--s-6)}.calc-out,.calc-out-3{grid-template-columns:1fr}}

/* tabs (acupuncture track) */
.tabs{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.tablist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--ground);border-bottom:1px solid var(--line)}
.tablist button{min-height:56px;padding:var(--s-3) var(--s-4);font-weight:600;font-size:var(--fs-0);color:var(--text-2);border-bottom:2px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast)}
.tablist button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent);background:var(--surface)}
.tabpanel{display:none;padding:var(--s-8);grid-template-columns:7fr 5fr;gap:var(--s-8);align-items:start}
.tabpanel.on{display:grid}
.tabpanel h3{margin-bottom:var(--s-3)}
.tabpanel .defs > div{grid-template-columns:minmax(120px,1fr) 2.2fr;padding:var(--s-3) 0}
.tabpanel figure.doc{margin:0}
.doc{display:block;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--ground);transition:border-color var(--dur-fast)}
.doc:hover{border-color:var(--line-strong)}
.doc img{width:100%;height:auto;display:block}
.doc .doc-cap{padding:var(--s-3) var(--s-4);font-size:var(--fs-0);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s-3);align-items:center;color:var(--text-2)}
.doc .doc-cap strong{color:var(--text)}
.doc .doc-cap span{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.tabpanel{grid-template-columns:1fr;padding:var(--s-6)}}
@media (max-width:560px){.tablist button{font-size:.8rem;padding:var(--s-2)}}

/* compact module accordion (acupuncture) */
.mods details{border-top:1px solid var(--line)}
.mods details:last-child{border-bottom:1px solid var(--line)}
.mods summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 28px;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;font-weight:600;font-size:var(--fs-2);line-height:1.25}
.mods summary::-webkit-details-marker{display:none}
.mods summary .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:600;background:var(--surface);color:var(--text)}
.mods details[open] summary .n{background:var(--accent);color:var(--on-accent)}
.mods summary .plus{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:1rem;transition:transform var(--dur-base) var(--ease-out)}
.mods details[open] summary .plus{transform:rotate(45deg)}
.mods .mod-body{padding:0 0 var(--s-6) calc(48px + var(--s-4));color:var(--text-2)}
.mods .mod-body .who{display:block;margin-top:var(--s-3);font-size:var(--fs-0);font-weight:500;color:var(--text-3)}
@media (max-width:560px){.mods summary{grid-template-columns:36px 1fr 24px;font-size:var(--fs-1)}.mods summary .n{width:32px;height:32px;font-size:.7rem}.mods .mod-body{padding-left:0}}

/* fact strip */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8)}
.facts > div{padding-top:var(--s-6);border-top:1px solid var(--line-strong)}
.facts .k{font-size:clamp(2.5rem,1.6rem + 3vw,4.5rem);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.facts .v{margin-top:var(--s-3);color:var(--text-2)}
.facts .src{display:block;margin-top:var(--s-3);font-size:var(--fs-0);color:var(--text-3)}
.facts .src a{text-decoration:underline;text-underline-offset:3px}
.facts .src a:hover{color:var(--text)}
@media (max-width:760px){.facts{grid-template-columns:1fr;gap:var(--s-6)}}

/* feature rows: image + text, at most two in a row */
.feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);align-items:center}
.feature + .feature{margin-top:var(--s-24)}
.feature.flip > .figure{order:-1}
.feature .defs{margin-top:var(--s-8)}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:var(--s-8)}.feature.flip > .figure{order:0}.feature + .feature{margin-top:var(--s-16)}}

/* price panel */
.price-panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:var(--s-8)}
.price-panel .result-tag{margin-bottom:var(--s-6)}
.price-panel .amt{font-size:clamp(2.5rem,1.6rem + 3vw,4.25rem);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.price-panel .amt small{font-size:var(--fs-1);font-weight:500;color:var(--text-3);letter-spacing:0;margin-left:var(--s-2)}
.price-panel p{color:var(--text-2)}
@media (max-width:640px){.price-panel{padding:var(--s-6)}}

/* tool panels (acupuncture track markup) */
.tool .tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-6)}
.tool .f{min-width:0}
.tool .f.wide{grid-column:1 / -1}
.tool .f label{display:block;font-weight:600;font-size:var(--fs-0);margin-bottom:var(--s-1);line-height:1.3}
.tool .f input,.tool .f select,.tool table input[type=date]{width:100%;min-height:44px;padding:0 var(--s-3);border:1px solid var(--card-line-strong);border-radius:var(--r-input);font:inherit;font-size:var(--fs-1);color:var(--card-ink);background:var(--card-2)}
.tool .note{font-size:var(--fs-0);margin-top:var(--s-6);padding:var(--s-3) var(--s-4);border-radius:var(--r-input);background:var(--accent-soft)}
.tool .out{margin-top:var(--s-4);border-top:1px solid var(--card-ink);padding-top:var(--s-2)}
.tool .kv{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--card-line);font-size:var(--fs-0);font-weight:500}
.tool .kv b{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.tool .kv.big b{color:var(--accent-on-card);font-size:var(--fs-3);letter-spacing:-.02em}
.tool .warn{margin-top:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-input);background:var(--warn-bg);font-size:var(--fs-0)}
.tool .btn-sm{min-height:36px;padding:0 var(--s-3);font-size:var(--fs-0)}
@media (max-width:560px){.tool .tool-grid{grid-template-columns:1fr}}
.pcard .pcard-img.center img{object-position:center 30%}
.story .story-body .k{margin-top:var(--s-2)}

/* ---- round 21: section rhythm, topo motif, client logo plates ---- */
:root{--ground-3:#141a28}
.section{border-top:1px solid var(--line)}
.hero + .section,.page-head + .section{border-top:0}
.band-navy{border-top:0}
.band-tint2{background:var(--ground-3)}
.topo{position:relative;isolation:isolate}
.topo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/contours-blue.svg) no-repeat;background-size:1200px auto;background-position:right -140px top -60px;opacity:.26;-webkit-mask-image:radial-gradient(70% 80% at 82% 18%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 80% at 82% 18%,#000 30%,transparent 100%)}
.topo.topo-left::before{background-position:left -220px bottom -120px;-webkit-mask-image:radial-gradient(60% 80% at 12% 90%,#000 25%,transparent 100%);mask-image:radial-gradient(60% 80% at 12% 90%,#000 25%,transparent 100%)}
.topo.topo-white::before{background-image:url(/assets/contours-white.svg);opacity:.16;background-position:right -200px center;-webkit-mask-image:radial-gradient(60% 120% at 90% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 120% at 90% 50%,#000 30%,transparent 100%)}
.topo > *{position:relative}
@media (max-width:720px){.topo::before{background-size:900px auto;background-position:right -300px top -40px;opacity:.2}.topo.topo-left::before{background-position:left -320px bottom -80px}}
.logo-plate{display:grid;place-items:center;background:var(--card);padding:var(--s-8)}
.logo-plate img{width:auto;height:auto;max-width:min(280px,72%);max-height:96px;object-fit:contain}
.story .story-img.logo-plate{aspect-ratio:auto;min-height:200px}
.story-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}
.story-stats .k{font-size:var(--fs-3);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.story-stats .v{margin-top:var(--s-2);font-size:var(--fs-0);color:var(--text-2);line-height:1.35}
.story-stats .src{grid-column:1/-1;font-size:var(--fs-0);color:var(--text-3)}
.client-strip{display:grid;grid-template-columns:300px 1fr;gap:var(--s-8);align-items:stretch;margin-bottom:var(--s-12)}
.client-strip .logo-plate{border-radius:var(--r-card);min-height:180px}
.client-strip .stat-row{border-top:0;padding-top:0;align-content:center}
.client-strip .stat-row .src{grid-column:1/-1;font-size:var(--fs-0);color:var(--text-3)}
@media (max-width:900px){.client-strip{grid-template-columns:1fr}.client-strip .logo-plate{min-height:150px}}
@media (max-width:420px){.story-stats{grid-template-columns:1fr 1fr}}
.story .story-img.logo-plate{background:var(--card);border-bottom:1px solid var(--card-line)}
.story .story-img.logo-plate img{width:auto;height:auto;max-width:min(280px,72%);max-height:96px;object-fit:contain;object-position:center}

/* ---- round 22: topo sheet as inline SVG (pulses + 7-0 pins), logo cards in the hero rail ---- */
.topo::before,.topo.topo-left::before,.topo.topo-white::before{content:none}
.topo-svg{position:absolute;z-index:-1;pointer-events:none;width:1200px;height:auto;right:-140px;top:-60px;color:var(--accent-ink);overflow:visible;
  -webkit-mask-image:radial-gradient(70% 80% at 82% 18%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 80% at 82% 18%,#000 30%,transparent 100%)}
.topo-left .topo-svg{right:auto;left:-220px;top:auto;bottom:-120px;-webkit-mask-image:radial-gradient(60% 80% at 12% 90%,#000 25%,transparent 100%);mask-image:radial-gradient(60% 80% at 12% 90%,#000 25%,transparent 100%)}
.topo-mid .topo-svg{top:50%;transform:translateY(-50%);right:-260px;-webkit-mask-image:radial-gradient(60% 110% at 88% 50%,#000 25%,transparent 100%);mask-image:radial-gradient(60% 110% at 88% 50%,#000 25%,transparent 100%)}
.topo-white .topo-svg{color:#fff;right:-200px;top:50%;transform:translateY(-50%);-webkit-mask-image:radial-gradient(60% 120% at 90% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 120% at 90% 50%,#000 30%,transparent 100%)}
.topo-svg .lines path{fill:none;stroke:currentColor;stroke-opacity:.26;stroke-width:1.2;stroke-linejoin:round}
.topo-white .topo-svg .lines path{stroke-opacity:.18}
.topo-svg .pulse{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:34 966;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor)}
.topo.on .topo-svg .pulse{opacity:.95;animation:topo-run var(--dur,14s) linear infinite}
@keyframes topo-run{to{stroke-dashoffset:-1000}}
.topo-svg .pin .dot{fill:var(--accent)}
.topo-svg .pin .ring{fill:none;stroke:currentColor;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.topo.on .topo-svg .pin .ring{animation:topo-ping 3.2s ease-out infinite}
.topo-svg .pin text{fill:#fff;font:700 10.5px/1 var(--font);text-anchor:middle;letter-spacing:.02em}
.topo-white .topo-svg .pin .dot{fill:#fff}
.topo-white .topo-svg .pin text{fill:var(--accent)}
.topo-svg .pin .halo{fill:currentColor;opacity:.16;filter:blur(10px)}
@keyframes topo-ping{0%{transform:scale(.7);opacity:.75}100%{transform:scale(2.4);opacity:0}}
@media (max-width:720px){.topo-svg{width:900px;right:-300px;top:-40px}.topo-left .topo-svg{left:-320px;bottom:-80px}.topo-mid .topo-svg,.topo-white .topo-svg{right:-380px}.topo-svg .lines path{stroke-opacity:.2}}
@media (prefers-reduced-motion:reduce){.topo.on .topo-svg .pulse{animation:none;opacity:.5}.topo.on .topo-svg .pin .ring{animation:none}}
.pcard .pcard-img.logo-plate{background:var(--card);display:grid;place-items:center;padding:var(--s-8);border-bottom:1px solid var(--card-line)}
.pcard .pcard-img.logo-plate img{width:auto;height:auto;max-width:min(300px,76%);max-height:110px;object-fit:contain;object-position:center}
.pcard .pcard-cap .k.name{font-size:var(--fs-2)}
.pcard .pcard-cap .stat{margin-top:var(--s-3);font-size:var(--fs-3);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.topo{overflow:clip}
@supports not (overflow:clip){.topo{overflow:hidden}}

/* ---- round 23: page-wide veins layer, pulses only in the 7-0 rings, muted logo plates, dark calculator ---- */
.topo::before,.topo.topo-left::before,.topo.topo-white::before{content:none}
.topo{overflow:visible;isolation:auto}
.topo-svg{display:none}
body{position:relative}
.topbar{position:relative;z-index:2}
main,.footer{position:relative;z-index:1}
.hero,.page-head,.footer{background:transparent}
.band-tint,.band-navy{background:rgba(255,255,255,.03)}
.band-tint2{background:rgba(255,255,255,.055)}
.cta-band{position:relative;z-index:1}
:root{--plate:#d8e0ed;--plate-2:#eef2f8;--plate-3:#c4cfe0}
.logo-plate,.story .story-img.logo-plate,.pcard .pcard-img.logo-plate,.client-strip .logo-plate{background:radial-gradient(120% 100% at 68% 18%,var(--plate-2) 0%,var(--plate) 55%,var(--plate-3) 100%);box-shadow:inset 0 0 0 1px rgba(11,31,58,.08)}
.calc{background:var(--surface);color:var(--text);border:1px solid var(--line-strong);box-shadow:none;position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);box-shadow:0 0 18px 2px rgba(26,107,255,.55)}
.calc .calc-sub{color:var(--text-2)}
.calc-row{border-top-color:var(--line)}
.calc-row label,.calc-row output{color:var(--text)}
.calc-out{border-top-color:var(--line-strong)}
.calc-out .k{color:var(--accent-ink);text-shadow:0 0 18px rgba(59,130,255,.35)}
.calc-out .v{color:var(--text-2)}
.calc-note{color:var(--text-3)}
.calc .link{color:var(--accent-ink)}
.calc .btn-primary:hover{background:var(--accent-ink)}
.calc-row input[type=range]{accent-color:var(--accent)}
.feature-text + .feature-text{margin-top:var(--s-20,80px)}
.feature-text .defs{margin-top:0}
.feature-text .cta-row{margin-top:var(--s-6)}

/* ---- round 34: the round 23/31 line field (streamlines + travelling pulses); the 7-0 is a placed render, not drawn by the lines ---- */

/* ---- round 35: wires. Higgsfield artwork: the 7-0 formed by glowing wires under the hero copy, and the same wires running down both margins of every page. No code-drawn lines. ---- */
.wires{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero.stage .wrap{text-align:center}
.hero.stage h1,.hero.stage .lede{margin-left:auto;margin-right:auto}
.hero.stage .cta-row{justify-content:center}
.wires-hero{position:relative;width:100vw;margin:var(--s-10) calc(50% - 50vw) 0;line-height:0}
.wires-hero img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent)}
.wires-hero::after{content:"";position:absolute;inset:0;background:url(/assets/wires-hero-1344.webp) center / cover no-repeat;mix-blend-mode:screen;opacity:0;animation:wire-breathe 4.2s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent)}
@keyframes wire-breathe{0%,100%{opacity:0}50%{opacity:.5}}
.rail-cards{position:relative;z-index:1}
.hero.stage .rail-cards{margin-top:var(--s-4)}
@media (max-width:719px){
  .wires-hero{height:72vw;overflow:hidden}
  .wires-hero img{height:100%;object-fit:cover;object-position:center}
}
@media (prefers-reduced-motion:reduce){.wires-hero::after{animation:none}}
/* round 35b: crop the artwork so the 7-0 starts inside the first screen; calmer margin bundles */
@media (min-width:720px){
  .hero.stage .wrap{padding-top:var(--s-10)}
  .wires-hero{height:clamp(420px,46vw,700px);overflow:hidden;margin-top:var(--s-8)}
  .wires-hero img{height:100%;object-fit:cover;object-position:center 45%}
  .wires-hero::after{background-position:center 45%}
}
@media (max-width:719px){.wires-hero::after{background-image:url(/assets/wires-hero-600.webp)}}
/* round 35c: the hero h1 width in em, not ch, so the fallback font wraps it exactly like Figtree (12ch differed by a line and shifted the artwork) */
.hero.stage h1{max-width:8.6em}

/* ---- round 36: the wires run through the open space of every page. Higgsfield sweep render (Cullen's pick 2 of 4), full width, tiled with its vertical mirror so it is seamless, screen-blended so its black is the ground. ---- */
.wires-sweep{position:absolute;top:0;bottom:0;left:0;right:0;background:url(/assets/wires-sweep-752.webp) center top / 100% auto repeat-y;mix-blend-mode:screen;opacity:.85;
  -webkit-mask-image:linear-gradient(transparent 120px,#000 420px);mask-image:linear-gradient(transparent 120px,#000 420px)}
body:has(.hero.stage) .wires-sweep{-webkit-mask-image:linear-gradient(transparent 1000px,#000 1400px);mask-image:linear-gradient(transparent 1000px,#000 1400px)}
@media (max-width:719px){.wires-sweep{opacity:.8;-webkit-mask-image:linear-gradient(transparent 80px,#000 300px);mask-image:linear-gradient(transparent 80px,#000 300px)}
  body:has(.hero.stage) .wires-sweep{-webkit-mask-image:linear-gradient(transparent 860px,#000 1150px);mask-image:linear-gradient(transparent 860px,#000 1150px)}}
@media (min-width:720px){.wires-sweep{background-image:url(/assets/wires-sweep-1504.webp)}}

/* ---- round 37: the wires move. Desktop only (app.js mounts the video after load); the still image stays underneath as the poster. ---- */
.wires-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms var(--ease-out)}
.has-video .wires-video{opacity:1}
.wires-hero .wires-video{object-position:center 45%;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent)}
.wires-hero.has-video::after{animation:none;opacity:0}
.wires-sweep .wires-video{position:absolute;left:0;width:100%;height:auto;object-fit:fill}
.wires-sweep .wires-video.flip{transform:scaleY(-1)}
/* round 38: built for the visitor, not the owner. Shorter hero artwork so the proof comes up sooner; page wires quieter so text always wins. */
@media (min-width:720px){.wires-hero{height:clamp(380px,36vw,560px)}.wires-sweep{opacity:.6}}
@media (max-width:719px){.wires-hero{height:64vw}.wires-sweep{opacity:.55}}


/* ---- round 39: the page under the hero. Result cards, the sticky three-things piece, the who index. Hero untouched. ---- */
.rcard{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-6);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);color:var(--text);transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.rcard:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.rc-logo{height:44px;display:flex;align-items:center;margin-bottom:var(--s-6)}
.rc-logo img{width:auto;height:auto;max-height:36px;max-width:180px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.rc-big{font-size:clamp(2.6rem,1.6rem + 3.2vw,4.6rem);font-weight:600;letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.rc-big span{font-size:.42em;font-weight:500;letter-spacing:-.01em;color:var(--text-2);vertical-align:.18em;margin:0 .08em}
.rc-what{margin-top:var(--s-2);font-size:var(--fs-1);font-weight:500;line-height:1.35;max-width:24ch}
.rc-meta{margin-top:auto;padding-top:var(--s-6);font-size:var(--fs-0);color:var(--text-2)}
.rc-go{margin-top:var(--s-3);font-size:var(--fs-0);font-weight:600;color:var(--accent-ink)}
.rc-go::after{content:" \2192"}
/* sticky three-things */
.steps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-16);align-items:start}
.steps-nav{position:sticky;top:calc(var(--nav-h) + var(--s-8));align-self:start}
.steps-index{margin-top:var(--s-10);border-top:1px solid var(--line)}
.steps-index li{border-bottom:1px solid var(--line)}
.steps-index a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) 0;font-size:var(--fs-2);font-weight:600;color:var(--text-3);transition:color var(--dur-base) var(--ease-out),padding-left var(--dur-base) var(--ease-out)}
.steps-index a::after{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.steps-index a:hover,.steps-index a.on{color:var(--text)}
.steps-index a.on{padding-left:var(--s-3)}
.steps-index a.on::after{opacity:1;color:var(--accent-ink)}
.steps-list{display:grid;gap:var(--s-16)}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:center;padding:var(--s-8);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.step-art{border-radius:var(--r-panel);overflow:hidden;background:var(--ground);aspect-ratio:3/4}
.step-art img{display:block;width:100%;height:100%;object-fit:cover}
.step-body h3{letter-spacing:-.02em}
.step-body p{margin-top:var(--s-4);color:var(--text-2)}
.step-body .defs{margin-top:var(--s-6)}
.step-body .defs > div{grid-template-columns:minmax(120px,1fr) 2.4fr;padding:var(--s-3) 0}
/* who index */
.who{border-top:1px solid var(--line)}
.who > div{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:var(--s-2) var(--s-8);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.who dt{font-weight:600;font-size:var(--fs-2);letter-spacing:-.01em}
.who dd{color:var(--text-2);margin:0;align-self:center}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:var(--s-10)}
  .steps-nav{position:static}
  .steps-index{display:none}
  .step{grid-template-columns:1fr;padding:var(--s-6)}
  .step-art{aspect-ratio:4/3}
  .step-art img{object-position:center 18%}
  .who > div{grid-template-columns:1fr}
}
@media (max-width:640px){.rcard{padding:var(--s-5,20px)}}
@media (prefers-reduced-motion:reduce){.rcard,.steps-index a{transition:none}}

/* round 39b */
.rc-logo{height:56px;padding:0 var(--s-4);border-radius:var(--r-input);background:var(--card);display:flex;align-items:center;align-self:flex-start;margin-bottom:var(--s-6)}
.rc-logo img{filter:none;opacity:1;max-height:34px;max-width:170px}
.rc-what{max-width:none}
.rc-stats{margin-top:auto;padding-top:var(--s-6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);border-top:1px solid var(--line);margin-top:var(--s-6)}
.rc-stats dt{font-size:var(--fs-2);font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.rc-stats dd{margin:var(--s-1) 0 0;font-size:var(--fs-0);color:var(--text-2);line-height:1.3}
.rcard{justify-content:flex-start}
.rcard .rc-stats{margin-top:auto}
.step{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-10);padding:var(--s-8) var(--s-10) var(--s-8) var(--s-8)}
.step-art{aspect-ratio:546/1034;max-height:520px;justify-self:center;width:100%;max-width:280px}
.step-body .defs > div{grid-template-columns:150px 1fr;padding:var(--s-3) 0}
.steps-list{gap:var(--s-10)}
@media (max-width:900px){
  .step{grid-template-columns:1fr;padding:var(--s-6)}
  .step-art{aspect-ratio:546/1034;max-height:none;width:60%;max-width:260px;margin:0 auto}
  .step-art img{object-position:center}
  .rc-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* round 39c: results stacked beside the calculator; step labels above their text */
@media (min-width:641px){
  .rail-cards{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto}
  .rail-cards .calc{grid-row:1/3}
  .rc-big{font-size:clamp(2.4rem,1.4rem + 2.6vw,3.8rem)}
}
.step-body .defs > div{grid-template-columns:1fr;gap:var(--s-1);padding:var(--s-4) 0}
.step-body .defs dt{font-size:var(--fs-0);letter-spacing:.01em;color:var(--text-3);font-weight:600}
.step-body .defs dd{color:var(--text)}
.step{align-items:center}
@media (max-width:900px){.step-art{width:52%}}

/* round 40: no wires. Hero is copy only; the cards follow at a normal distance. */
.hero.stage .rail-cards{margin-top:var(--s-16)}
@media (min-width:720px){.hero.stage .wrap{padding-top:var(--s-16)}}

/* round 40: the hero is a split. Copy left, the brand mark (steel 7-0, blue arrow) right, on the ground. */
.hero.stage.split .wrap{text-align:left}
.hero.stage.split h1,.hero.stage.split .lede{margin-left:0;margin-right:0}
.hero.stage.split .cta-row{justify-content:flex-start}
.hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-12);align-items:center}
.hero-mark{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3}
.hero-mark img{display:block;width:100%;height:100%;object-fit:cover}
.hero-mark::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit;pointer-events:none}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:var(--s-8)}.hero-mark{order:-1;aspect-ratio:16/10}}
.hero-mark{aspect-ratio:1200/868;border-radius:0;overflow:visible}.hero-mark::after{content:none}.hero-mark img{-webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 55%,transparent 100%)}
@media (max-width:860px){.hero-mark{aspect-ratio:1200/868}}


/* =====================================================================================================
   ROUND 41, THE DESIGN SYSTEM: STEEL ON PAPER
   Light ground, navy ink, logo blue the only accent. Bricolage Grotesque for display, Instrument Sans for everything else.
   One radius system (pill buttons, 20px cards, 10px inputs). Soft navy-tinted ambient shadows, no grey hairline boxes.
   The brand mark is a physical steel object photographed on the page's own white surface. One deep navy band.
   ===================================================================================================== */
:root{
  --ground:#f4f5f7;--ground-2:#eceef2;--ground-3:#ffffff;--surface:#ffffff;--surface-2:#f4f5f7;
  --navy:#0b1f3a;--navy-2:#13305c;--on-navy:#ffffff;--on-navy-2:rgba(255,255,255,.74);--on-navy-3:rgba(255,255,255,.54);--navy-line:rgba(255,255,255,.14);
  --text:#0b1f3a;--text-2:rgba(11,31,58,.74);--text-3:rgba(11,31,58,.54);
  --line:rgba(11,31,58,.09);--line-strong:rgba(11,31,58,.2);
  --accent:#1a6bff;--accent-ink:#0d4fd0;--accent-soft:rgba(26,107,255,.1);--accent-on-card:#0d4fd0;--on-accent:#ffffff;
  --card:#ffffff;--card-2:#f4f5f7;--card-line:rgba(11,31,58,.09);--card-line-strong:rgba(11,31,58,.2);--card-ink:#0b1f3a;--card-ink-2:rgba(11,31,58,.74);--card-ink-3:rgba(11,31,58,.54);
  --ink:#0b1f3a;--ink-2:rgba(11,31,58,.74);--ink-3:rgba(11,31,58,.54);--paper:#ffffff;--tint:#f4f5f7;--tint-2:#eceef2;--plate:#ffffff;--plate-2:#ffffff;--plate-3:#eceef2;
  --font:'Instrument Sans','Figtree Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --r-input:10px;--r-panel:16px;--r-card:20px;
  --shadow-card:0 1px 2px rgba(11,31,58,.04),0 24px 48px -24px rgba(11,31,58,.22);
  --shadow-float:0 2px 4px rgba(11,31,58,.04),0 40px 80px -32px rgba(11,31,58,.28);
  --ease-out:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}
html{scrollbar-color:var(--line-strong) var(--ground)}
body{background:var(--ground);color:var(--text)}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,.h3,.display{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-variation-settings:"opsz" 96}
h1{letter-spacing:-.04em}
h4,.h4,dt,strong,b{font-weight:600}
.btn{border-radius:var(--r-pill);font-weight:600;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn-primary{box-shadow:0 8px 20px -10px rgba(26,107,255,.6)}
.btn-primary:hover{background:var(--accent-ink);box-shadow:0 12px 28px -12px rgba(26,107,255,.7)}
.btn-outline,.btn-ghost-navy{background:#fff;border-color:var(--line-strong);color:var(--text)}
.btn-outline:hover,.btn-ghost-navy:hover{background:#fff;border-color:var(--text)}
.link,.link-dark,.link-light{color:var(--accent-ink)}
.link-dark:hover,.link-light:hover,.link:hover{color:var(--text)}
/* top bar and nav */
.topbar{background:var(--navy);color:var(--on-navy)}
.topbar a{color:var(--on-navy)}
.nav{background:rgba(244,245,247,.86);border-bottom:1px solid var(--line)}
.nav-links a{color:var(--text-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta .btn-ghost-navy{background:transparent;border-color:transparent;color:var(--text)}
.nav-cta .btn-ghost-navy:hover{background:#fff;border-color:var(--line-strong)}
.burger span{background:var(--text)}
.sheet{background:var(--ground)}
.sheet a[aria-current="page"]{color:var(--accent-ink)}
.sticky-bar{background:rgba(244,245,247,.92);border-top:1px solid var(--line)}
/* bands */
.section{border-top:0}
.band-tint,.band-navy{background:var(--ground-2);border:0}
.band-tint2{background:#fff}
.hero,.page-head{background:var(--ground)}
.page-head{border-bottom:0}
/* dark band: scoped tokens so everything inside inherits */
.dark,.footer{--ground:var(--navy);--ground-2:var(--navy-2);--ground-3:var(--navy-2);--surface:var(--navy-2);--surface-2:#1a3b6e;--text:var(--on-navy);--text-2:var(--on-navy-2);--text-3:var(--on-navy-3);--line:var(--navy-line);--line-strong:rgba(255,255,255,.26);--accent-ink:#8ab4ff;--shadow-card:none;background:var(--navy);color:var(--on-navy)}
/* hero: the steel mark photographed on the white surface */
.hero.photo{position:relative;overflow:hidden;background:#f1f2f4}
.hero.photo .hero-photo{position:absolute;inset:0;z-index:0}
.hero.photo .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;display:block}
.hero.photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(241,242,244,.96) 0%,rgba(241,242,244,.9) 34%,rgba(241,242,244,.4) 52%,rgba(241,242,244,0) 66%)}
.hero.photo .wrap{position:relative;z-index:2;min-height:min(86vh,820px);display:flex;align-items:center;padding-top:var(--s-16);padding-bottom:var(--s-24)}
.hero-copy{max-width:min(46%,600px)}
.hero.photo h1{font-size:clamp(2.75rem,1.6rem + 4vw,5.5rem);line-height:.98;max-width:11ch}
.hero.photo .lede{margin-top:var(--s-6);max-width:40ch}
.hero.photo .cta-row{margin-top:var(--s-8)}
/* the tools row pulls up over the hero's bottom edge */
.tools{position:relative;z-index:3;margin-top:calc(-1 * var(--s-16));padding-bottom:var(--s-24)}
.tools .rail-cards{margin-top:0}
.calc,.rcard,.story,.price-panel,.quiz,.form-panel,.step,.pcard{background:#fff;border:0;box-shadow:var(--shadow-card);border-radius:var(--r-card)}
.calc{box-shadow:var(--shadow-float);color:var(--text)}
.calc::before{content:none}
.calc h2{font-family:var(--display);font-weight:800;letter-spacing:-.025em}
.calc-row{border-top-color:var(--line)}
.calc-row label,.calc-row output{color:var(--text)}
.calc-row input[type=range]{accent-color:var(--accent)}
.calc-out{border-top-color:var(--line-strong)}
.calc-out .k{color:var(--accent-ink);text-shadow:none;font-family:var(--display);font-weight:800}
.calc-out .v{color:var(--text-2)}
.calc-note{color:var(--text-3)}
.calc .link{color:var(--accent-ink)}
.rcard:hover{border:0;box-shadow:var(--shadow-float)}
.rc-logo{background:#fff;padding:0;height:40px;margin-bottom:var(--s-8)}
.rc-logo img{max-height:40px;max-width:190px}
.rc-big{font-family:var(--display);font-weight:800}
.rc-big span{color:var(--text-3)}
.rc-stats{border-top-color:var(--line)}
.rc-go{color:var(--accent-ink)}
/* facts */
.facts > div{border-top:2px solid var(--text)}
.facts .k{font-family:var(--display);font-weight:800;letter-spacing:-.04em}
.facts .src a{color:var(--text-3)}
/* three things, on the navy band */
.dark .step{background:var(--navy-2);box-shadow:none}
.dark .step-art{background:#07152b}
.dark .steps-index{border-top-color:var(--navy-line)}
.dark .steps-index li{border-bottom-color:var(--navy-line)}
.dark .steps-index a{color:var(--on-navy-3)}
.dark .steps-index a:hover,.dark .steps-index a.on{color:var(--on-navy)}
.dark .steps-index a.on::after{color:var(--accent)}
.dark .step-body .defs > div{border-bottom-color:var(--navy-line)}
.dark .step-body .defs dt{color:var(--on-navy-3)}
.dark .step-body .defs dd{color:var(--on-navy)}
.dark .btn-outline{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.dark .btn-outline:hover{background:rgba(255,255,255,.08);border-color:#fff}
/* plan */
.rail-num{background:#fff;border-color:var(--line-strong);color:var(--text-2)}
.rail-item.is-on .rail-num{background:var(--accent);border-color:var(--accent);color:#fff}
.rail::after{background:var(--accent)}
.price-panel .amt{font-family:var(--display);font-weight:800;letter-spacing:-.04em}
.result-tag{background:var(--accent-soft);color:var(--accent-ink)}
.checks svg{color:var(--accent-ink)}
/* proof stories */
.story:hover{border:0;box-shadow:var(--shadow-float)}
.story .story-img.logo-plate,.logo-plate,.pcard .pcard-img.logo-plate,.client-strip .logo-plate{background:#fff;border-bottom:1px solid var(--line)}
.story .k{font-family:var(--display);font-weight:800}
.story .story-foot{border-top-color:var(--line)}
.story .story-foot a{color:var(--accent-ink)}
.story-stats{border-top-color:var(--line)}
.story-stats .k{font-family:var(--display);font-weight:800}
/* who index, defs, faq */
.who{border-top-color:var(--line)}
.who > div{border-bottom-color:var(--line)}
.defs{border-top-color:var(--line)}
.defs > div{border-bottom-color:var(--line)}
.faq details{border-top-color:var(--line)}
.faq details:last-child{border-bottom-color:var(--line)}
.faq summary .plus{border-color:var(--line-strong)}
.faq details[open] summary .plus{background:var(--accent);border-color:var(--accent);color:#fff}
/* quiz */
.quiz .qnum{color:var(--accent-ink)}
.quiz-opts button{background:#fff;border-color:var(--line-strong)}
.quiz-opts button.picked{border-color:var(--accent-ink);background:var(--accent-soft)}
.quiz-opts button:hover .key,.quiz-opts button.picked .key{background:var(--accent);color:#fff}
.quiz-prog-bar span.done{background:var(--accent)}
.sell{background:var(--ground);border-color:var(--line-strong)}
/* forms */
.field input,.field select,.field textarea{background:#fff;border-color:var(--line-strong);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.choices label:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft)}
.form-steps span.on{background:var(--accent)}
/* cta band and footer */
.cta-band{background:var(--accent)}
.cta-band .btn-primary{background:#fff;color:var(--accent-ink);box-shadow:none}
.cta-band .btn-primary:hover{background:var(--card-2)}
.cta-band .btn-outline{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.footer{border-top:0}
.footer a:hover{color:#fff}
.footer .f-contact a{color:#fff}
/* compare, trio, sell on other pages */
.compare .bad{background:var(--ground-2)}
.compare .good{background:#fff;border-color:var(--line-strong)}
.trio > div{background:#fff;border:0;box-shadow:var(--shadow-card)}
/* entrance: one authored moment */
.rv{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}}
/* responsive */
@media (max-width:860px){
  .hero.photo .hero-photo{position:relative;aspect-ratio:16/10;inset:auto}
  .hero.photo .hero-photo img{object-position:60% 50%}
  .hero.photo::before{content:none}
  .hero.photo .wrap{min-height:0;padding-top:var(--s-8);padding-bottom:var(--s-16)}
  .hero-copy{max-width:none}
  .tools{margin-top:0;padding-top:0}
}
@media (max-width:640px){.hero.photo .hero-photo{aspect-ratio:4/3}}

/* round 41b: contrast and perf */
:root{--text-3:rgba(11,31,58,.66);--card-ink-3:rgba(11,31,58,.66);--ink-3:rgba(11,31,58,.66);--on-navy-3:rgba(255,255,255,.62)}
.facts .src a,.src a{color:var(--text-2)}
.rv{filter:none;transform:translateY(14px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}

/* round 41c: the hero box on phones; the picture is a block, the section grows with the copy */
.hero.photo .hero-photo{display:block}
@media (max-width:860px){.hero.photo{overflow:visible;display:flow-root}.hero.photo .hero-photo{position:static;height:auto;aspect-ratio:16/10;overflow:hidden}.hero.photo .hero-photo img{height:100%}.hero.photo .wrap{position:static}}
@media (max-width:640px){.hero.photo .hero-photo{aspect-ratio:4/3}}

/* round 42: the map phone shows the real Google results, Martin and Cheshire, crossfading */
.step-art.swap{position:relative;background:#07152b}
.step-art.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.step-art.swap img + img{animation:swapfade 10s var(--ease-out) infinite}
@keyframes swapfade{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.step-art.swap img + img{animation:none;opacity:0}}
.step:has(.swap) .step-art + .art-cap{display:none}
.art-cap{margin-top:var(--s-3);font-size:var(--fs-0);color:var(--text-3);text-align:center}
.step > div:first-child{display:block}

/* round 42: hero uses the wider shot, mark anchored right with room, square crop on phones */
.hero.photo .hero-photo img{object-position:100% 55%}
.hero.photo::before{background:linear-gradient(90deg,rgba(241,242,244,.94) 0%,rgba(241,242,244,.85) 32%,rgba(241,242,244,.3) 50%,rgba(241,242,244,0) 60%)}
@media (max-width:860px){.hero.photo .hero-photo{aspect-ratio:4/3}.hero.photo .hero-photo img{object-position:50% 60%}}
@media (min-width:861px){.hero.photo .wrap{min-height:min(76vh,660px)}.hero.photo .hero-photo img{object-position:100% 62%}}
.hero.photo{aspect-ratio:auto}

/* round 43: results as business stats only */
.rc-name{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);letter-spacing:-.03em;line-height:1.05}
.rc-where{margin-top:var(--s-1);color:var(--text-2)}
.rc-logo{margin-bottom:var(--s-6)}
.plan-head{position:sticky;top:calc(var(--nav-h) + var(--s-8));align-self:start}@media (max-width:900px){.plan-head{position:static}}
/* round 44: our real work on all three phones */
.step-art{aspect-ratio:1080/2046}
.art-note{font-size:var(--fs-0);color:var(--text-3)}
/* round 44b: bigger phones so the screens read */
@media (min-width:901px){.step{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);padding:var(--s-8)}}
.step-art{max-width:340px;max-height:none}
@media (max-width:900px){.step-art{width:82%;max-width:340px}}
.quote-lg{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);letter-spacing:-.02em;line-height:1.2;max-width:34ch}.quote-lg cite{display:block;margin-top:var(--s-3);font:500 var(--fs-0)/1.4 var(--font);font-style:normal;color:var(--text-2);letter-spacing:0}
/* round 46: phones large enough to read */
@media (min-width:901px){.step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-10);align-items:center}.step-art{max-width:400px;width:100%;justify-self:center}}
@media (max-width:900px){.step-art{width:92%;max-width:420px}}
/* round 46b: steps use the full width so the phones are big */
@media (min-width:901px){
  .steps{grid-template-columns:1fr;gap:var(--s-12)}
  .steps-nav{position:static;max-width:52ch}
  .steps-index{display:none}
  .step{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:var(--s-16);padding:var(--s-10) var(--s-12);align-items:center}
  .step-art{max-width:440px;width:100%}
  .step-body h3{font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem)}
}
/* round 47: phone on the right */
@media (min-width:901px){.step{grid-template-columns:minmax(0,1fr) minmax(0,440px)}.step .step-art{order:2}.step .step-body{order:1}}

/* round 48: smaller phones, same sharp renders */
@media (min-width:901px){.step{grid-template-columns:minmax(0,1fr) minmax(0,340px)}.step-art{max-width:340px}}
@media (max-width:900px){.step-art{width:78%;max-width:340px}}
/* round 49: phones sit on the card with no box or glow behind them */
.step-art,.dark .step-art,.step-art.swap{background:transparent;border-radius:0;box-shadow:none;overflow:visible}

/* round 49: what we do as a menu of ruled rows, no sequence numbers */
.menu{border-top:1px solid var(--line)}
.menu > div{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:var(--s-2) var(--s-8);padding:var(--s-5,20px) 0;border-bottom:1px solid var(--line)}
.menu dt{font-family:var(--display);font-weight:800;font-size:var(--fs-2);letter-spacing:-.02em;line-height:1.15}
.menu dd{margin:0;color:var(--text-2)}
@media (max-width:760px){.menu > div{grid-template-columns:1fr}}
.rail-num:empty{width:14px;height:14px;margin:14px 13px 0;border-radius:50%;background:var(--accent);border:0}
.hero.photo h1{max-width:14ch;font-size:clamp(2.6rem,1.5rem + 3.4vw,4.75rem)}@media (min-width:861px){.hero-copy{max-width:min(52%,660px)}}

/* round 51: What we do, animated. Titles fill with ink as they scroll in, a blue rule sweeps across, the line under each
   title rises in after it. Hover slides the row and brings in an arrow. transform/opacity/background-position only. */
.menu{border-top:0}
.menu > div{position:relative;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-3) var(--s-10);align-items:baseline;padding:var(--s-8) 0 var(--s-8);border-bottom:0;cursor:default}
.menu > div::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-strong)}
.menu > div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
.menu dt{display:flex;align-items:baseline;gap:var(--s-4);font-size:clamp(1.7rem,1.1rem + 1.9vw,2.9rem);line-height:1.02;letter-spacing:-.035em}
.menu .mt{background:linear-gradient(90deg,var(--text) 0 50%,rgba(11,31,58,.16) 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.2s var(--ease-out),transform .5s var(--ease-out);display:inline-block}
.menu .ma{color:var(--accent);font-family:var(--font);font-weight:600;font-size:.7em;opacity:0;transform:translateX(-12px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.menu dd{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out) .25s,transform .8s var(--ease-out) .25s;font-size:var(--fs-1)}
.menu > div.lit .mt{background-position:0 0}
.menu > div.lit::after{transform:scaleX(1)}
.menu > div.lit dd{opacity:1;transform:none}
.menu > div:hover .mt{transform:translateX(10px)}
.menu > div:hover .ma{opacity:1;transform:none}
.menu > div:hover::after{background:var(--accent-ink)}
@media (max-width:760px){.menu > div{grid-template-columns:1fr;padding:var(--s-6) 0}}
@media (prefers-reduced-motion:reduce){.menu .mt{background-position:0 0;transition:none}.menu > div::after{transform:scaleX(1);transition:none}.menu dd{opacity:1;transform:none;transition:none}.menu .ma,.menu .mt{transition:none}}
.dark .link{color:var(--accent-ink)}
.menu dd .link{white-space:nowrap}
.ai-fit h3{font-family:var(--display);font-weight:800}

/* round 57: AI systems explorer */
.ax-tabs{display:flex;gap:var(--s-8);border-bottom:1px solid var(--line-strong);overflow-x:auto;scrollbar-width:none}
.ax-tabs::-webkit-scrollbar{display:none}
.ax-tab{position:relative;flex:none;padding:var(--s-4) 0;font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,.9rem + .7vw,1.5rem);letter-spacing:-.02em;color:var(--text-3);transition:color var(--dur-base) var(--ease-out)}
.ax-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.ax-tab:hover{color:var(--text-2)}
.ax-tab[aria-selected="true"]{color:var(--text)}
.ax-tab[aria-selected="true"]::after{transform:scaleX(1)}
.ax-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);margin-top:var(--s-8);align-items:start}
.ax-list{display:grid;gap:var(--s-2)}
.ax-item{display:block;text-align:left;width:100%;padding:var(--s-5,20px) var(--s-6);border-radius:var(--r-panel);background:transparent;border:1px solid transparent;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ax-item b{display:block;font-family:var(--display);font-weight:800;font-size:var(--fs-2);letter-spacing:-.02em;color:var(--text-2);transition:color var(--dur-base) var(--ease-out)}
.ax-item span{display:block;margin-top:2px;color:var(--text-3);font-size:var(--fs-0)}
.ax-item:hover{background:rgba(255,255,255,.6)}
.ax-item[aria-pressed="true"]{background:#fff;border-color:var(--line);box-shadow:var(--shadow-card)}
.ax-item[aria-pressed="true"] b{color:var(--text)}
.ax-stage{position:relative;border-radius:var(--r-card);background:var(--navy);color:#fff;padding:var(--s-10);min-height:100%;box-shadow:var(--shadow-float)}
.ax-demo h3{color:#fff;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem);letter-spacing:-.03em}
.flow{position:relative;margin-top:var(--s-8);display:grid;gap:var(--s-6)}
.flow::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--accent),rgba(26,107,255,.25));transform-origin:top}
.flow li{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:var(--s-5,20px);align-items:start}
.flow .node{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--navy-2);border:1px solid rgba(255,255,255,.2);font-weight:600;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.85);position:relative;z-index:1}
.flow .ai .node{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 6px rgba(26,107,255,.18)}
.flow .lbl{font-size:var(--fs-0);font-weight:600;color:rgba(255,255,255,.62)}
.flow p{margin-top:2px;color:#fff;font-size:var(--fs-1);line-height:1.45}
.flow .ai p{font-weight:500}
.works{margin-top:var(--s-8);padding-top:var(--s-5,20px);border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78);font-size:var(--fs-0)}
.works b{color:#8ab4ff;margin-right:var(--s-2)}
.ax-demo.show h3,.ax-demo.show .flow li,.ax-demo.show .works{animation:axin .6s var(--ease-out) both}
.ax-demo.show .flow li:nth-child(1){animation-delay:.08s}
.ax-demo.show .flow li:nth-child(2){animation-delay:.2s}
.ax-demo.show .flow li:nth-child(3){animation-delay:.32s}
.ax-demo.show .works{animation-delay:.44s}
.ax-demo.show .flow::before{animation:axline .7s var(--ease-out) both .1s}
@keyframes axin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes axline{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:900px){.ax-panel{grid-template-columns:1fr}.ax-stage{padding:var(--s-8) var(--s-6)}.ax-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ax-demo.show *,.ax-demo.show .flow::before{animation:none!important}.ax-tab::after{transition:none}}
@media (max-width:640px){.ax-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-4);overflow:visible}.ax-tab{text-align:left;font-size:1.02rem;padding:var(--s-3) 0}}

/* round 58: how we use AI ourselves */
.ours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.ours > div{padding:var(--s-8) var(--s-6);border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--s-3)}
.ours .k{align-self:flex-start;font-size:var(--fs-0);font-weight:600;color:var(--accent-ink)}
.ours h3{font-size:var(--fs-2);letter-spacing:-.02em}
.ours p{color:var(--text-2)}
@media (max-width:1000px){.ours{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ours{grid-template-columns:1fr}}
.ax-tabs{gap:var(--s-10)}@media (max-width:640px){.ax-tabs{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){.ax-tabs{display:flex;flex-wrap:wrap;gap:0 var(--s-6)}.ax-tab{padding:var(--s-3) 0;white-space:nowrap}}


/* round 61: the AI demo reads the site, rebuilds the homepage, answers a call, turns a review into a post; AI marketing section */
:root{
  --deep:#07152b;            /* the demo stage, one step under navy */
  --deep-2:#0d2240;          /* raised panel on the stage */
  --deep-line:rgba(255,255,255,.1);
  --scan:rgba(26,107,255,.22);
  --ai-ink:#8ab4ff;          /* AI labels on navy, AA on --deep */
  --ok:#5fd39a;              /* found */
  --miss:#ffb86b;            /* missing */
  --bubble-in:rgba(255,255,255,.09);
  --star:#f5b301;
  --browser:#ffffff;         /* their page, drawn light the way they see it */
  --browser-ink:#0b1f3a;
  --browser-ink-2:rgba(11,31,58,.62);
  --browser-bar:#eceef2;
}

/* C. built tools: big ruled rows with where each one runs */
.aim-built{margin-bottom:var(--s-16)}
.aim-built > h3{font-size:var(--fs-3);letter-spacing:-.03em;padding-bottom:var(--s-4);border-bottom:2px solid var(--text)}
.aim-built dl > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s-2) var(--s-8);padding:var(--s-8) 0;border-bottom:1px solid var(--line-strong)}
.aim-built dt{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.05;letter-spacing:-.03em;color:var(--text)}
.aim-built dd{margin:0;color:var(--text-2);font-size:var(--fs-1)}
.aim-built dd span{display:block;margin-top:var(--s-2);font-size:var(--fs-0);font-weight:600;color:var(--accent-ink)}
@media (max-width:900px){.aim-built dl > div{grid-template-columns:1fr;padding:var(--s-6) 0}}
/* C. AI marketing: a directory of the tools, grouped */
.aim{padding:var(--s-24) 0}
.aim-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-16)}
.aim-head{position:sticky;top:120px;align-self:start}
.aim-head h2{font-size:clamp(2.3rem,1.4rem + 3.2vw,4.6rem);line-height:.98;letter-spacing:-.04em;max-width:11ch}
.aim-head .lede{margin-top:var(--s-6);max-width:40ch}
.aim-head .cta-row{margin-top:var(--s-8)}
.aim-group + .aim-group{margin-top:var(--s-16)}
.aim-group h3{font-size:var(--fs-3);letter-spacing:-.03em;padding-bottom:var(--s-4);border-bottom:2px solid var(--text)}
.aim-group dl > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s-2) var(--s-8);padding:var(--s-5,20px) 0;border-bottom:1px solid var(--line-strong);transition:background-color .3s var(--ease-out)}
.aim-group dt{font-weight:600;font-size:var(--fs-1);color:var(--text)}
.aim-group dd{margin:0;color:var(--text-2)}
.aim-group dl > div:hover dt{color:var(--accent-ink)}
@media (max-width:900px){.aim{padding:var(--s-16) 0}.aim-grid{grid-template-columns:1fr;gap:var(--s-10)}.aim-head{position:static}.aim-group dl > div{grid-template-columns:1fr}}
.cmp{--pos:100%;position:relative;display:grid;border-radius:var(--r-card);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);user-select:none;touch-action:pan-y;transition:opacity .6s var(--ease-out)}
.cmp.on{opacity:1}
.cmp > .side{grid-area:1/1;min-width:0}
.cmp .after{clip-path:inset(0 0 0 var(--pos))}
.cmp.sweep{transition:opacity .6s var(--ease-out)}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:2;display:none}
.cmp.ready.mid .handle{display:block}
.cmp .handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--on-accent)}
.cmp .knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--on-accent);color:var(--navy);display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.5);cursor:ew-resize;border:0;padding:0}
.cmp .knob:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cmp .knob svg{width:22px;height:22px}
.cmp .lab{position:absolute;bottom:14px;z-index:3;padding:8px 14px;border-radius:999px;font:600 13px/1.2 var(--font);border:0;cursor:pointer}
.cmp .lab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cmp .lab[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}
.cmp > .lab.t{left:14px;background:var(--browser);color:var(--browser-ink)}
.cmp > .lab.r{right:14px;background:var(--on-accent);color:var(--navy)}
/* before: their page as read */
.cmp .before{background:var(--browser);color:var(--browser-ink);padding:32px 32px 64px;display:grid;gap:14px;align-content:start}
.cmp .before .b-nav{font-weight:600;font-size:14px;color:var(--browser-ink-2)}
.cmp .before .b-h{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.02em;max-width:26ch}
.cmp .before .b-d{font-size:15px;color:var(--browser-ink-2);max-width:56ch}
.cmp .before ul{display:grid;gap:6px;font-size:14px;color:var(--accent-ink)}
.cmp .before ul li{text-decoration:underline;text-underline-offset:3px}
.cmp .before .b-miss{margin-top:6px;font-size:13px;color:var(--browser-ink-2)}
/* after: rebuilt by AI in their own colours */
.cmp .after{--b:var(--navy);--b-ink:var(--on-navy);--b-ink-2:var(--on-navy-2);background:var(--b);color:var(--b-ink);display:grid;grid-template-rows:auto 1fr auto}
.cmp .a-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.14)}
.cmp.lite .a-nav{border-bottom-color:rgba(0,0,0,.12)}
.cmp .a-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;min-width:0}
.cmp .a-brand img,.cmp .a-brand .ini{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:none;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:13px}
.cmp .a-brand span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp .a-call{flex:none;padding:9px 16px;border-radius:999px;background:var(--b-ink);color:var(--b);font-weight:600;font-size:14px;white-space:nowrap}
.cmp .a-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;padding:36px 28px;align-items:center}
.cmp .a-h{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.7rem);line-height:1.02;letter-spacing:-.035em}
.cmp .a-s{margin-top:14px;color:var(--b-ink-2);font-size:16px;max-width:44ch}
.cmp .a-btns{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.cmp .a-btns span{padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px}
.cmp .a-btns .p{background:var(--b-ink);color:var(--b)}
.cmp .a-btns .g{border:1px solid currentColor;opacity:.92}
.cmp .a-proof{margin-top:22px;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--b-ink-2);max-width:46ch}
.cmp .a-proof .stars{display:flex;gap:1px;color:var(--star);flex:none;margin-top:2px}.cmp .a-proof svg{width:14px;height:14px}
.cmp .a-proof b{color:var(--b-ink);font-weight:600}
.cmp .a-img{aspect-ratio:var(--ar,1);border-radius:18px;background:rgba(255,255,255,.1) center/cover no-repeat}
.cmp .a-svc{display:flex;flex-wrap:wrap;gap:8px 24px;padding:16px 28px 64px;font-size:14px;font-weight:600;color:var(--b-ink-2);border-top:1px solid rgba(255,255,255,.14)}
.cmp.lite .a-svc{border-top-color:rgba(0,0,0,.12)}
.cmp .a-svc span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:2px;opacity:.6}

@media (max-width:900px){
  .cmp .a-main{grid-template-columns:1fr;padding:24px 20px}
  .cmp .a-img{aspect-ratio:var(--ar,16/9)}
  .cmp .a-nav{padding:14px 20px}.cmp .a-svc{padding:14px 20px 60px}
  .cmp .before{padding:24px 20px 56px}
}
.cmp .after{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.cmp .a-main{grid-template-columns:minmax(0,1fr)}.cmp .a-call{padding:8px 12px;font-size:13px}.cmp .a-btns span{padding:11px 16px;font-size:14px}}

/* home AI preview: one link on to the full list on /ai-systems */
.aim-more{margin-top:var(--s-4, 18px);font-weight:600}
.aim-more a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* 404 page: links as ruled rows */
.ruled-links{list-style:none;margin:0;padding:0;max-width:640px}
.ruled-links li{border-bottom:1px solid var(--line, currentColor)}
.ruled-links a{display:block;padding:var(--s-4) 0;font-weight:600;min-height:44px}

/* small label above a page headline: what and where, on every screen size */
.kicker{font-size:var(--fs-0, .9rem);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-on-card);margin:0 0 var(--s-3);max-width:46ch}
.price-line{font-size:var(--fs-1, 1.05rem);border-left:3px solid var(--accent);padding-left:var(--s-4)}

/* tap targets (WCAG 2.2): small text links get a taller hit area without changing how they look */
.topbar a{display:inline-flex;align-items:center;min-height:32px}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;padding-inline:2px}
.footer ul a{display:inline-flex;align-items:center;min-height:40px}
.footer-bottom nav a{display:inline-flex;align-items:center;min-height:36px}
.f-contact a{display:inline-flex;align-items:center;min-height:40px}
/* the Call / Free breakdown bar stays off the two pages that already are the call to action */
[data-page="/free-audit"] .sticky-bar,[data-page="/contact"] .sticky-bar{display:none}
@media (max-width:900px){[data-page="/free-audit"],[data-page="/contact"]{padding-bottom:0}}

/* Contact: calendar box, sized before Calendly loads so nothing jumps */
.cal-box{display:grid;justify-items:start;gap:var(--s-2)}
.cal-box.loaded{display:block;min-height:700px}

/* plain ruled rows (no links) */
.ruled-list{list-style:none;margin:0;padding:0}
.ruled-list li{padding:var(--s-3) 0;border-bottom:1px solid var(--line, currentColor)}

/* town pages: the dated Google snapshot table */
.snap{margin:0 0 var(--s-6)}
.snap figcaption{font-size:var(--fs-0);color:var(--text-3);margin-bottom:var(--s-2)}
.snap-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-input, 8px)}
.snap table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:440px}
.snap th,.snap td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.snap th{font-size:var(--fs-0);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.snap tr:last-child td{border-bottom:0}
.snap .num{text-align:right;white-space:nowrap}
/* areas hub: towns as ruled index rows, each with its one real number */
.town-index{list-style:none;margin:0;padding:0;border-top:2px solid currentColor}
.town-index a{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;align-items:baseline}
.town-index a:hover b,.town-index a:focus-visible b{color:var(--accent)}
.town-index b{font-size:var(--fs-3)}
@media (max-width:560px){.town-index a{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}}

/* founder portrait: the photo is square, so show all of it (a tall frame cut off the head and shoulders) */
.photo.square{aspect-ratio:1/1}
.photo.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* ===== depth pass (Oct 14 2026): the system's own soft navy shadows, applied consistently so pages are not flat =====
   Rule: one raised white surface per block. In tinted bands, the content column sits on a white panel; media and data
   tables float; the page header fades from white into the page ground. Shadows stay soft (no glow on type or buttons). */
.page-head{background:linear-gradient(180deg,var(--surface) 0%,var(--ground) 100%)}
.band-tint .grid > div > .defs,.band-tint2 .grid > div > .defs,
.band-tint .grid > div > .rail,.band-tint2 .grid > div > .rail,
.band-tint .grid > div > .ruled-list,.band-tint2 .grid > div > .ruled-list,
.band-tint .grid > div > .ruled-links,.band-tint2 .grid > div > .ruled-links{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:var(--s-2) var(--s-8);border-top:0}
.band-tint .grid > div > .defs > div:last-child,.band-tint2 .grid > div > .defs > div:last-child,
.band-tint .grid > div > .ruled-list li:last-child,.band-tint2 .grid > div > .ruled-list li:last-child,
.band-tint .grid > div > .ruled-links li:last-child,.band-tint2 .grid > div > .ruled-links li:last-child{border-bottom:0}
@media (max-width:560px){.band-tint .grid > div > .defs,.band-tint2 .grid > div > .defs,.band-tint .grid > div > .rail,.band-tint2 .grid > div > .rail,.band-tint .grid > div > .ruled-list,.band-tint2 .grid > div > .ruled-list,.band-tint .grid > div > .ruled-links,.band-tint2 .grid > div > .ruled-links{padding:var(--s-1) var(--s-4)}}
.snap-wrap{background:var(--surface);border:0;box-shadow:var(--shadow-card)}
.photo,.figure,.page-head .ph-media,.page-head .ph-quote,.compare > div{border:0;box-shadow:var(--shadow-card)}
.compare > .good{background:var(--surface)}
.price-line{background:var(--surface);border-radius:0 var(--r-input) var(--r-input) 0;padding:var(--s-4) var(--s-6);box-shadow:var(--shadow-card)}
/* the rail's step numbers get a filled disc, so the steps read as a sequence at a glance */
.rail-num{background:var(--accent-soft);color:var(--accent-on-card);font-weight:700}

/* footer, mid widths: the brand block spans the top, the four link columns sit under it */
@media (min-width:901px) and (max-width:1180px){.footer .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}.footer .f-brand{grid-column:1/-1}}

/* Contact: three ways to reach us as raised tap cards (three distinct items, so each earns its box) */
.contact-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);max-width:1040px}
.ctile{display:grid;gap:var(--s-1);padding:var(--s-6);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);color:var(--text);text-decoration:none;min-width:0;transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.ctile:hover,.ctile:focus-visible{box-shadow:var(--shadow-float);transform:translateY(-2px)}
.ctile-k{font-size:var(--fs-0);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-on-card)}
.ctile-v{font-family:var(--display);font-weight:800;font-size:var(--fs-2);overflow-wrap:anywhere}
.ctile-s{font-size:var(--fs-0);color:var(--text-2)}
@media (max-width:760px){.contact-tiles{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ctile{transition:none}.ctile:hover{transform:none}}
/* Contact: the calendar panel */
.book-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-10);align-items:start}
@media (max-width:960px){.book-grid{grid-template-columns:minmax(0,1fr)}}
.cal-panel{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:var(--s-8);min-width:0}
.cal-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-4)}
.cal-box{min-height:700px;display:block}
.cal-wait{color:var(--text-2);padding:var(--s-8) 0}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent-on-card);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
@media (max-width:560px){.cal-panel{padding:var(--s-4)}}
/* depth pass fixes: facts in a narrow column stack label over value; the step connector line stays out of the white panels */
.grid-4-8 > div > .defs > div{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
.band-tint .grid > div > .rail::before,.band-tint .grid > div > .rail::after,.band-tint2 .grid > div > .rail::before,.band-tint2 .grid > div > .rail::after{display:none}

/* ===== polish pass (Oct 14 2026): spots that read as unfinished ===== */
/* 3. "Three things": the section index fills the right side of the header on desktop */
@media (min-width:901px){
  #three .steps-nav{max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--s-16);align-items:end}
  #three .steps-nav > h2,#three .steps-nav > .lede{grid-column:1}
  #three .steps-index{display:block;grid-column:2;grid-row:1 / span 2;margin-top:0;counter-reset:st}
  #three .steps-index a{justify-content:flex-start;gap:var(--s-4);font-size:var(--fs-3);color:var(--on-navy-2)}
  #three .steps-index a::before{counter-increment:st;content:"0" counter(st);font-size:var(--fs-0);font-weight:700;letter-spacing:.06em;color:var(--accent-vein, #9dc0ff);min-width:2.2em}
  #three .steps-index a::after{display:none}
  #three .steps-index a:hover{color:var(--on-navy)}
}
/* 4. "What we do": a row that has not lit up yet is still readable */
.menu .mt{background-image:linear-gradient(90deg,var(--text) 0 50%,rgba(11,31,58,.38) 50% 100%)}
.menu dd{opacity:1}
/* 5. the AI section ends in two real next steps */
.aim-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-8)}
.aim-next-card{display:grid;gap:var(--s-1);padding:var(--s-6);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);color:var(--text);text-decoration:none;transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.aim-next-card:hover,.aim-next-card:focus-visible{box-shadow:var(--shadow-float);transform:translateY(-2px)}
.aim-next-card .k{font-size:var(--fs-0);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-on-card)}
.aim-next-card b{font-family:var(--display);font-weight:800;font-size:var(--fs-2)}
.aim-next-card span:last-child{font-size:var(--fs-0);color:var(--text-2)}
@media (max-width:640px){.aim-next{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.aim-next-card{transition:none}.aim-next-card:hover{transform:none}}
/* 6. the 60-second check card is as tall as its question, not as tall as the column beside it */
#check .quiz{align-self:start}
/* 7. the blue closing band: its two buttons line up at one width */
.cta-band .cta-row{flex-direction:column;align-items:stretch;max-width:360px;width:100%;justify-self:end}
.cta-band .cta-row .btn{justify-content:center;width:100%}
@media (max-width:900px){.cta-band .cta-row{justify-self:start}}
/* 8. footer facts */
.f-facts{display:grid;gap:var(--s-2);margin:var(--s-4) 0 0}
.f-facts > div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s-3)}
.f-facts dt{color:var(--on-navy-3, rgba(255,255,255,.54));font-size:var(--fs-0);font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.f-facts dd{margin:0}
/* 2. Free breakdown: the header card */
.ph-card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:var(--s-8);align-self:center;min-width:0}
.ph-checklist{list-style:none;margin:0;padding:0;counter-reset:pc}
.ph-checklist li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.ph-checklist li::before{counter-increment:pc;content:counter(pc);grid-row:1 / span 2;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-on-card);font-weight:700;font-size:var(--fs-0);display:grid;place-items:center}
.ph-checklist b{font-weight:700}
.ph-checklist span{font-size:var(--fs-0);color:var(--text-2)}
.ph-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:var(--s-4) 0 0}
.ph-facts > div{text-align:center}
.ph-facts dt{font-family:var(--display);font-weight:800;font-size:var(--fs-2)}
.ph-facts dd{margin:0;font-size:var(--fs-0);color:var(--text-3)}
@media (max-width:560px){.ph-card{padding:var(--s-5, 20px)}}

#three .steps-index a.on{padding-left:0}
.page-head .wrap:has(.ph-card){align-items:center}

/* home proof: Martin's card shows its best real result instead of an empty gap */
.story-proof{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-4);align-items:center;margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}
.story-proof img{width:120px;height:auto;border-radius:var(--r-input);box-shadow:var(--shadow-card)}
.story-proof p{font-size:var(--fs-0);color:var(--text-2);margin:0}
.story-proof b{color:var(--text)}
@media (max-width:480px){.story-proof{grid-template-columns:minmax(0,1fr)}.story-proof img{width:100%}}

/* footer on phones: link groups two across, the brand block on top */
@media (max-width:560px){.footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--s-6)}.footer .f-brand{grid-column:1/-1}.footer ul a{min-height:36px}}

/* Services: the three fixes as three raised cards (three distinct items, each earns its box) */
.fix-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.fix-card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:var(--s-8);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.fix-n{font-family:var(--display);font-weight:800;font-size:var(--fs-0);letter-spacing:.06em;color:var(--accent-on-card)}
.fix-card h3{font-size:var(--fs-3)}
.fix-card > p{color:var(--text-2)}
.fix-card .ruled-list{margin-top:var(--s-2)}
.fix-card .ruled-list li{font-size:var(--fs-0)}
.fix-proof{margin-top:auto;padding-top:var(--s-4);font-size:var(--fs-0);color:var(--text-2);border-top:2px solid var(--accent-soft)}
.fix-more{max-width:70ch;color:var(--text-2)}
@media (max-width:960px){.fix-trio{grid-template-columns:minmax(0,1fr)}}

/* AI receptionist: the real test call */
:root{--ok:#16825d;--ok-soft:rgba(22,130,93,.15);--warn-soft:#fff7e6;--warn-line:#f0c36d;--warn-ink:#6b4a00}
.watch-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--s-16);align-items:center}
@media (max-width:960px){.watch-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-10)}}
.kicker-on-navy{color:var(--accent-vein, #9dc0ff)}
.watch-notes{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.watch-notes li{padding-left:var(--s-6);position:relative;color:var(--on-navy-2)}
.watch-notes li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.watch-notes b{color:var(--on-navy)}
.btn-outline-light{background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--on-navy)}
.btn-outline-light:hover{border-color:var(--on-navy);background:rgba(255,255,255,.08)}
.callsim{background:var(--surface);color:var(--text);border-radius:32px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 8px rgba(255,255,255,.06);overflow:hidden;min-width:0}
.cs-top{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5, 20px);border-bottom:1px solid var(--line);background:var(--surface-2, #f4f5f7)}
.cs-top b{display:block;font-size:var(--fs-0)}
.cs-top span{font-size:12px;color:var(--text-3)}
.cs-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft);flex:none}
.cs-lines{list-style:none;margin:0;padding:var(--s-5, 20px);display:flex;flex-direction:column;gap:var(--s-2);height:520px;overflow-y:auto;scroll-behavior:smooth}
.cs-lines > li{max-width:86%;padding:10px 14px;border-radius:18px;font-size:var(--fs-0);line-height:1.45}
.cs-ai{align-self:flex-start;background:var(--surface-2, #eef1f6);border-bottom-left-radius:6px}
.cs-me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.cs-src{display:block;margin-top:4px;font-size:11px;color:var(--accent-on-card);font-weight:600}
.cs-flag{align-self:stretch;max-width:none!important;background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:12px!important}
.cs-report{align-self:stretch;max-width:none!important;background:var(--navy);color:#fff;border-radius:12px!important}
.cs-report b,.cs-flag b{display:block;margin-bottom:2px}
.callsim.playing .cs-lines > li{opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.callsim.playing .cs-lines > li.on{opacity:1;transform:none}
@media (max-width:560px){.cs-lines{height:460px}.callsim{border-radius:24px}}
.dark .callsim .cs-src{color:var(--accent-vein, #9dc0ff)}
.watch-notes.mt-6{margin-top:var(--s-8)}

/* Full-width photo page header: the photo runs edge to edge behind the headline */
.page-head.ph-full{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--on-navy);border:0}
.page-head.ph-full .ph-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.page-head.ph-full::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,18,36,.92) 0%,rgba(7,18,36,.78) 38%,rgba(7,18,36,.25) 70%,rgba(7,18,36,.1) 100%),linear-gradient(0deg,rgba(7,18,36,.55) 0%,rgba(7,18,36,0) 35%)}
.page-head.ph-full .wrap{min-height:min(78vh,760px);align-items:center;padding-top:var(--s-20, 96px);padding-bottom:var(--s-20, 96px)}
.page-head.ph-full h1{color:var(--on-navy)}
.page-head.ph-full .lede{color:var(--on-navy-2);max-width:52ch}
.page-head.ph-full .crumbs,.page-head.ph-full .crumbs a{color:var(--on-navy-2)}
.page-head.ph-full .crumbs a:hover{color:var(--on-navy)}
.page-head.ph-full .kicker{color:var(--accent-vein, #9dc0ff)}
.page-head.ph-full .btn-ghost-navy{background:transparent;border-color:rgba(255,255,255,.45);color:var(--on-navy)}
.page-head.ph-full .btn-ghost-navy:hover{border-color:var(--on-navy);background:rgba(255,255,255,.08)}
@media (max-width:900px){
  .page-head.ph-full .wrap{min-height:0;padding-top:var(--s-16);padding-bottom:var(--s-12)}
  .page-head.ph-full .ph-bg{object-position:72% 50%}
  .page-head.ph-full::before{background:linear-gradient(180deg,rgba(7,18,36,.55) 0%,rgba(7,18,36,.8) 45%,rgba(7,18,36,.94) 100%)}
}
.hero.photo .crumbs{font-size:var(--fs-0);color:var(--text-3);margin-bottom:var(--s-6);font-weight:500}.hero.photo .crumbs a:hover{color:var(--text)}

/* Services: what we build, as ruled index rows */
.build-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.build-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s-4);padding:var(--s-5, 20px) 0;border-bottom:1px solid var(--line)}
.build-list .bn{font-weight:800;font-size:var(--fs-0);letter-spacing:.06em;color:var(--accent-on-card);padding-top:.35em}
.build-list h3{font-size:var(--fs-2)}
.build-list p{margin-top:var(--s-1);color:var(--text-2)}
@media (min-width:901px){.build-head{position:sticky;top:120px;align-self:start}}

/* Real proof image inside a content column */
.proof-fig{margin-left:0;margin-right:0}
.proof-fig img{display:block;width:100%;height:auto;border-radius:var(--r-card);box-shadow:var(--shadow-card);background:var(--surface)}
.proof-fig figcaption{margin-top:var(--s-3);font-size:var(--fs-0);color:var(--text-2)}

/* AI receptionist: the live demo form */
.try-card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:var(--s-8);min-width:0}
.try-card label{display:block;font-size:var(--fs-0);font-weight:600;margin:var(--s-4) 0 var(--s-2)}
.try-card label:first-child,.try-step > label:first-child{margin-top:0}
.try-card input[type=text],.try-card input:not([type]),.try-card input[type=tel]{width:100%;min-height:48px;padding:0 var(--s-4);border:1px solid var(--line);border-radius:var(--r-input, 12px);font:inherit;background:var(--surface)}
.try-card input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.try-card .try-consent{display:flex;gap:var(--s-3);align-items:flex-start;font-weight:400;color:var(--text-2);line-height:1.45}
.try-consent input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.try-ts{margin:var(--s-4) 0;min-height:65px}
.try-card .btn{width:100%;justify-content:center;margin-top:var(--s-2)}
.try-head{font-size:var(--fs-2, 1.25rem);font-weight:700;line-height:1.25;margin:0}
.try-sub{margin:var(--s-2) 0 var(--s-5, 20px);color:var(--text-2);font-size:var(--fs-0);line-height:1.45}
.try-back{display:block;margin:var(--s-3) auto 0;background:none;border:0;color:var(--text-2);font:inherit;font-size:var(--fs-0);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.try-back:hover{color:var(--text)}
.try-card.on-code #tryStep1 > :not(.try-ts):not(.try-voices){display:none}
.try-card.on-done #tryStep1 > .try-voices{display:none}
.try-card.on-code .try-ts{margin:0 0 var(--s-4)}
.try-card .try-warn{margin:var(--s-3) 0 0;padding:var(--s-3) var(--s-4);background:var(--warn-bg);border-left:3px solid var(--warn);border-radius:var(--r-input, 12px);font-size:var(--fs-0);line-height:1.5;color:var(--text)}
.try-done{text-align:center;padding:var(--s-4) 0}
.try-check{width:72px;height:72px;display:block;margin:0 auto var(--s-4)}
.try-check circle{fill:none;stroke:var(--accent);stroke-width:4}
.try-check path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:try-tick .5s .15s ease-out forwards}
@keyframes try-tick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.try-check path{animation:none;stroke-dashoffset:0}}
.try-done-h{font-size:var(--fs-3, 1.6rem);font-weight:700;margin:0;outline:none}
.try-done-p{margin:var(--s-3) auto 0;max-width:34ch;color:var(--text-2);line-height:1.5}
.try-done-p b{color:var(--text)}
.try-card.on-done #tryStep1,.try-card.on-done .try-fine{display:none}
.try-msg{margin-top:var(--s-4);font-weight:600;min-height:1.5em}
.try-msg.bad{color:var(--warn-ink)}
.try-fine{margin-top:var(--s-2);font-size:var(--fs-0);color:var(--text-3)}
.try-notes li{color:var(--text-2)}.try-notes b{color:var(--text)}
@media (max-width:560px){.try-card{padding:var(--s-5, 20px)}}

/* Live AI demo as the page header (AI systems, AI receptionist): dark band, the form on a glowing-edge card like the calculator */
.demo-hero{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.demo-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:var(--s-12);align-items:center;padding-top:var(--s-16);padding-bottom:var(--s-16)}
.demo-hero .crumbs{font-size:var(--fs-0);color:var(--on-navy-2);margin-bottom:var(--s-6);font-weight:500}
.demo-hero .crumbs a{color:var(--on-navy-2)}.demo-hero .crumbs a:hover{color:var(--on-navy)}
.demo-hero .kicker{color:var(--accent-vein, #9dc0ff)}
.demo-hero h1{color:var(--on-navy);font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem);line-height:1.02;max-width:15ch}
.demo-hero .lede{color:var(--on-navy-2);margin-top:var(--s-4);max-width:46ch}
.dh-steps{list-style:none;margin:var(--s-8) 0 0;padding:0;display:grid;gap:var(--s-3)}
.dh-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-3);align-items:center;color:var(--on-navy)}
.dh-steps b{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:var(--fs-0)}
.dh-card{box-shadow:0 0 0 1px rgba(26,107,255,.55),0 0 48px rgba(26,107,255,.35),0 30px 60px -30px rgba(0,0,0,.6)}
.dh-card .try-fine{color:var(--text-3)}
@media (max-width:900px){
  .demo-hero .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-8);padding-top:var(--s-10);padding-bottom:var(--s-12)}
  .demo-hero h1{font-size:clamp(1.9rem,1.3rem + 3vw,2.6rem)}
  .dh-steps{margin-top:var(--s-6)}
}
.ai-head-2 .ai-h2{font-size:clamp(1.9rem,1.3rem + 2vw,3rem);max-width:16ch}
.dh-card{color:var(--text)}
.dh-card label,.dh-card .try-msg{color:var(--text)}
.dh-card .try-consent{color:var(--text-2)}
@media (max-width:900px){.demo-hero .dh-steps{display:none}.demo-hero .lede{font-size:var(--fs-1)}}

/* Site-wide: every inner page header is the dark band (matches the live AI demo header); header pictures show on phones too */
.page-head:not(.ph-full){background:var(--navy);color:var(--on-navy);border:0}
.page-head:not(.ph-full) h1{color:var(--on-navy)}
.page-head:not(.ph-full) .lede,.page-head:not(.ph-full) .intro{color:var(--on-navy-2)}
.page-head:not(.ph-full) .wrap > div > p:not(.kicker){color:var(--on-navy-2)}
.page-head:not(.ph-full) .crumbs,.page-head:not(.ph-full) .crumbs a{color:var(--on-navy-2)}
.page-head:not(.ph-full) .crumbs a:hover{color:var(--on-navy)}
.page-head:not(.ph-full) .kicker{color:var(--accent-vein, #9dc0ff)}
.page-head:not(.ph-full) .link{color:var(--accent-vein, #9dc0ff)}
.page-head:not(.ph-full) .btn-ghost-navy,.page-head:not(.ph-full) .btn-outline{background:transparent;border-color:rgba(255,255,255,.45);color:var(--on-navy)}
.page-head:not(.ph-full) .btn-ghost-navy:hover,.page-head:not(.ph-full) .btn-outline:hover{border-color:var(--on-navy);background:rgba(255,255,255,.08)}
.page-head .ph-card,.page-head .ph-quote,.page-head .ctile,.page-head .ph-media{color:var(--text)}
.page-head .ph-media{border-color:transparent;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
@media (max-width:900px){.page-head .ph-media{display:block;margin-top:var(--s-8)}}
.page-head .ph-card .kicker,.page-head .ctile .ctile-k{color:var(--accent-on-card)}

/* Home hero on phones reads like desktop: one studio scene, the headline on the light wall, the 7-0 rising beneath it */
@media (max-width:860px){
  .hero.photo{display:flex;flex-direction:column;background:var(--ground-studio, #f1f2f4)}
  .hero.photo .wrap{order:1;position:relative;z-index:2;padding-top:var(--s-10);padding-bottom:0}
  .hero.photo .hero-photo{order:2;position:relative;z-index:1;aspect-ratio:4/3;margin-top:calc(-1 * var(--s-12));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28%);mask-image:linear-gradient(180deg,transparent 0,#000 28%)}
  .hero.photo .hero-photo img{object-position:60% 70%}
}

/* ===== Phones show the desktop layout (Oct 15 2026, Cullen's call): every section keeps its desktop arrangement,
   same order, same pictures, things side by side stay side by side. Only the type and spacing are scaled down so it
   fits a phone and stays easy to read and tap. Phones only (under 640px wide); desktop is untouched. ===== */
@media (max-width:640px){
  :root{--fs-0:.75rem;--fs-1:.875rem;--fs-2:.9375rem;--fs-3:1.0625rem;--fs-4:1.375rem;--fs-5:1.875rem;--gutter:14px}
  body{line-height:1.5}
  .section,.aim,.band-tint,.band-tint2,.band-navy{padding-top:40px;padding-bottom:40px}
  .kicker{font-size:.6875rem}

  /* hero: the desktop picture (the 7-0 on the right) with the copy over its left side, buttons side by side */
  .hero.photo{overflow:hidden;display:block}
  .hero.photo .hero-photo{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .hero.photo .hero-photo img{height:100%;object-position:74% 50%}
  .hero.photo .wrap{position:relative;min-height:0;display:block;padding-top:28px;padding-bottom:72px}
  .hero-copy{max-width:60%}
  .hero.photo h1{font-size:1.75rem;line-height:1.02;max-width:none}
  .hero.photo .lede{font-size:.8125rem;line-height:1.45;margin-top:10px}
  .hero.photo .cta-row{margin-top:14px;width:calc(100vw - 2 * var(--gutter))}
  .cta-row{flex-wrap:nowrap;gap:8px}
  .cta-row .btn,.cta-row .btn-lg{min-height:42px;padding:0 14px;font-size:.8125rem;white-space:nowrap}

  /* calculator with its three results in a row; the client cards side by side */
  .tools{margin-top:-40px;padding-bottom:40px}
  .rail-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0}
  .rail-cards > .calc{grid-column:1 / -1}
  .calc{padding:16px}
  .calc-out,.calc-out-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .calc-out .k{font-size:1.25rem}
  .rcard{padding:14px}
  .rc-logo{height:26px;margin-bottom:10px}
  .rc-logo img{max-height:26px;max-width:120px}

  /* the three stats in a row */
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .facts .k{font-size:1.625rem}

  /* section headline on the left, content on the right */
  .grid.grid-5-7,.grid-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px}
  .grid.grid-7-5,.grid-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px}
  .grid.grid-4-8,.grid-4-8{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:14px}
  .aim-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px}
  .aim-next{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  /* the steps: screenshot and text side by side */
  .step{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;padding:14px;align-items:start}
  .steps-list{gap:16px}

  /* client stories side by side, their numbers in a row */
  .stories{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .story-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

  /* AI page: the system's description next to its example */
  .ax-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px}
  .ax-tabs{gap:14px}
}
@media (max-width:640px){
  /* hero, like desktop: the 7-0 on the right, clear space behind the copy on the left */
  .hero.photo::before{content:none}
  .hero.photo .hero-photo{inset:auto;right:-10%;top:50%;left:auto;bottom:auto;transform:translateY(-58%);width:64%;height:auto;aspect-ratio:4/3;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
  .hero.photo .hero-photo img{object-position:50% 55%}
  .hero-copy{max-width:58%;position:relative;z-index:2}
  .hero.photo h1{font-size:1.625rem}
  .hero .kicker{font-size:.625rem;max-width:30ch}

  /* client cards: names and numbers sized to fit two across */
  .rc-name{font-size:1.0625rem;line-height:1.1}
  .rc-where{font-size:.75rem}
  .rc-stats{gap:6px;padding-top:10px;margin-top:10px}
  .rc-stats dt{font-size:.875rem}
  .rc-stats dd{font-size:.625rem}
  .rc-go{font-size:.75rem}

  /* text in narrow columns: a size that reads well on a phone without making the column a tower */
  .facts p,.facts .v,.facts dd{font-size:.8125rem;line-height:1.45}
  .facts .src,.facts .src a{font-size:.6875rem}
  .step .lede,.step p,.step dd,.step dt,.aim-grid p,.aim-grid dd,.grid-5-7 dd,.grid-7-5 dd,.grid-4-8 dd,.ax-panel p{font-size:.8125rem;line-height:1.45}
  .step h3,.step .h3{font-size:1.0625rem}

  /* the quiz buttons wrap their words instead of pushing past the screen edge */
  .grid > *{min-width:0}
  .quiz-opts button{white-space:normal;min-height:48px;padding:10px 12px;font-size:.8125rem}
}
@media (max-width:640px){
  .quiz{padding:12px}
  .quiz-opts{grid-template-columns:minmax(0,1fr)}
  .quiz-opts button{min-width:0;gap:8px}
  .quiz-opts .chev{display:none}
}
@media (max-width:640px){
  /* headings inside a side-by-side column scale with the column, like desktop's proportions */
  .aim-grid h2,.grid-5-7 h2,.grid-7-5 h2,.grid-4-8 h2,.aim-grid .h2{font-size:1.375rem;line-height:1.08;overflow-wrap:break-word}
  .aim-grid h3,.grid-5-7 h3,.grid-7-5 h3,.grid-4-8 h3{font-size:1.0625rem;line-height:1.15}
  .quiz h3,.quiz .q{font-size:1rem;line-height:1.2}
  /* buttons in a narrow column: the label wraps instead of being cut off */
  .grid .btn,.aim-grid .btn{white-space:normal;text-align:center;line-height:1.2;min-height:44px;padding:8px 14px;font-size:.8125rem}
  /* story card footer: one column so the links have room */
  .story-foot{flex-direction:column;align-items:flex-start;gap:8px}
  .rc-stats dt{font-size:.75rem;letter-spacing:-.01em}
}
/* Whole site: the remaining desktop layouts kept side by side on phones (Oct 15 2026) */
@media (max-width:640px){
  .defs > div{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:4px 12px;padding:10px 0}
  .defs dt{font-size:.75rem}
  .defs dd{font-size:.8125rem;line-height:1.45}
  .client-strip{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px}
  .client-strip .logo-plate{min-height:0}
  .stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:12px}
  .contact-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .contact-tiles > *{padding:12px;min-width:0}
  .ctile-v{font-size:.8125rem;overflow-wrap:anywhere}
  .ctile-s{font-size:.6875rem}
  .book-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px}
  .field-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .compare > *{padding:12px;min-width:0}
  .grid.grid-2,.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .steps4{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  .steps4 li,.steps4 p{font-size:.6875rem;line-height:1.35}
  .steps4::before{display:none}
  /* the Google results tables fit the screen: smaller text, tighter cells */
  .snap-wrap table{width:100%;font-size:.6875rem;table-layout:auto}
  .snap-wrap th,.snap-wrap td{padding:6px 4px;white-space:normal}
  /* nothing under 11px */
  .rc-stats dd,.steps4 small{font-size:.6875rem}
}
@media (max-width:640px){.snap table{min-width:0}.snap,.snap figcaption{max-width:100%;min-width:0}.snap figcaption{font-size:.75rem}}
@media (max-width:640px){.snap table{table-layout:fixed;width:100%}.snap th,.snap td{overflow-wrap:anywhere;word-break:normal}.hero .kicker,.kicker{font-size:.6875rem}}
@media (max-width:640px){.cta-row{flex-wrap:wrap}.cta-row .btn{max-width:100%}}
@media (max-width:640px){.hero .cta-row{flex-wrap:nowrap}.hero .cta-row .btn{padding:0 12px;font-size:.78125rem;flex:0 1 auto}}
/* Phones: the only places that don't sit side by side like desktop, because they'd be unusable that narrow:
   forms and the booking calendar take the full width, and a label/detail list inside a narrow column puts the label above. */
@media (max-width:640px){
  .book-grid,.grid:has(form),.grid:has(.form-panel),.grid:has(iframe){grid-template-columns:minmax(0,1fr)}
  .field-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid .defs > div,.aim-grid .defs > div,.step .defs > div,.ax-panel .defs > div{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* Phones: the page must never slide sideways. iPhones ignore overflow-x on body alone, so clip on html too, and
   let anything inside a grid column shrink to the column instead of poking out of it. */
@media (max-width:640px){
  html,body{overflow-x:clip;max-width:100%}
  .hero.photo{overflow:clip}
  [class*="grid"] > *,.facts > *,.rail-cards > *,.stories > *,.story-stats > *,.rc-stats > *,.calc-out > *,.stat-row > *,.compare > *{min-width:0}
  .k,.facts .k,.calc-out .k,.story-stats .k{overflow-wrap:anywhere}
}
@media (max-width:640px){
  /* a row of cards inside an already narrow column stacks within that column */
  .aim-grid .aim-next{grid-template-columns:minmax(0,1fr)}
  .aim-next-card{padding:12px}
}
@media (max-width:640px){
  .menu .mt,.menu dt{font-size:1.125rem;line-height:1.15}
  .menu dd{font-size:.8125rem;line-height:1.45}
}
@media (max-width:640px){
  /* inside a half-width story card: each number on its own row with its label beside it */
  .stories .story-stats{grid-template-columns:minmax(0,1fr);gap:6px}
  .stories .story-stats > *{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .stories .story-stats .k{font-size:1rem;white-space:nowrap;overflow-wrap:normal}
  .stories .story-stats .v,.stories .story-stats dd,.stories .story-stats span{font-size:.75rem;line-height:1.3}
  .stories .logo-plate,.story-img.logo-plate{min-height:0;height:96px;padding:12px}
  .stories .logo-plate img{max-height:44px;width:auto}
  .story blockquote{font-size:.875rem;line-height:1.45}
  .story cite{font-size:.75rem}
  /* quiz answers: letter right next to its words */
  .quiz-opts button{justify-content:flex-start;text-align:left}
  .quiz-opts .key{flex:none;width:24px;height:24px;font-size:.75rem}
}
@media (max-width:640px){.story .story-img.logo-plate{min-height:0;height:96px;padding:12px}}
@media (max-width:640px){
  /* the quiz keeps its desktop spot on the right, but takes the wider share of the row so its answers read normally */
  #check .grid-7-5{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .quiz-q h2,.quiz-q .h3{font-size:.9375rem;line-height:1.25}
  .quiz-q .why{font-size:.75rem}
}
@media (max-width:640px){.stories .story-body > .k{font-size:1.0625rem;line-height:1.1;overflow-wrap:normal}.stories .story-body > .kv{font-size:.75rem}}
/* Phones, final say: section headers (a long heading in a narrow left column) go across the top with their content
   below, because a 139px heading column turns every heading into a stack of two-word lines. Everything inside the
   content that sits side by side on desktop (cards, stats, results, steps with screenshots) stays side by side. */
@media (max-width:640px){
  .grid.grid-5-7,.grid-5-7,.grid.grid-7-5,.grid-7-5,.grid.grid-4-8,.grid-4-8,.aim-grid,#check .grid-7-5{grid-template-columns:minmax(0,1fr);gap:20px}
  .aim-grid h2,.grid-5-7 h2,.grid-7-5 h2,.grid-4-8 h2{font-size:var(--fs-4);line-height:1.08}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 12px!important}
  .steps4 li,.steps4 p{font-size:.8125rem}
  /* label/detail lists are full width again, so the label sits beside the detail like desktop */
  .grid .defs > div,.aim-grid .defs > div{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:4px 12px}
  .aim-grid .aim-next{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .aim-head h2,.aim-head .h2{max-width:none}
  .ax-panel{grid-template-columns:minmax(0,1fr)}
  .rc-stats dt{font-size:.6875rem}
  .compare h3,.compare li,.compare p{font-size:.75rem;line-height:1.4}
}
@media (max-width:359px){.rc-stats{grid-template-columns:minmax(0,1fr);gap:4px}.rc-stats > div{display:flex;gap:6px;align-items:baseline}}
/* ===== Phone pass, Oct 15 2026 (Cullen: "tiny boxes with text next to them 10 times the length").
   Rule: two things sit side by side on a phone only when they are about the same length.
   A picture sits beside the heading and first paragraph it belongs to; the details run full width under both. ===== */
@media (max-width:640px){
  /* home, three facts: number on the left, its sentence on the right, one fact per row */
  .facts{grid-template-columns:minmax(0,1fr);gap:0}
  .facts > div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:2px 14px;padding:14px 0;align-items:start}
  .facts .k{grid-row:span 2;font-size:1.75rem;overflow-wrap:normal}
  .facts .v{margin-top:0;font-size:.875rem;line-height:1.45}
  .facts .src{margin-top:4px}

  /* home, three things: phone shot beside the heading and first paragraph, details full width below */
  .step{grid-template-columns:minmax(0,38fr) minmax(0,62fr);grid-template-areas:"art h" "art p" "d d" "c c";gap:0 14px;align-items:start;padding:16px}
  .step .step-body{display:contents}
  .step .step-art{grid-area:art;width:100%;max-width:none;margin:0}
  .step .step-body h3{grid-area:h;font-size:1.0625rem;line-height:1.2}
  .step .step-body > p{grid-area:p;margin-top:8px;font-size:.8125rem;line-height:1.45}
  .step .step-body .defs{grid-area:d;margin-top:14px}
  .step .step-body .defs > div{grid-template-columns:96px minmax(0,1fr);gap:4px 12px;padding:10px 0}
  .step .step-body .cta-row{grid-area:c;margin-top:12px}

  /* client stories: one story at a time, full width (two 176px columns ran 1,000px long) */
  .stories{grid-template-columns:minmax(0,1fr);gap:16px}
  .stories .story-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .stories .story-stats > *{display:block}
  .stories .story-stats .src{grid-column:1/-1}
  .stories .story-stats .k{font-size:1.25rem}
  .story-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
  .story-proof img{width:100%;height:auto;border-radius:8px}
  .story-proof p{margin:0;font-size:.8125rem;line-height:1.45}

  /* results page: the logo is a short band on top, the numbers sit across under it */
  .client-strip{grid-template-columns:minmax(0,1fr);gap:12px}
  .client-strip .logo-plate{height:84px;min-height:0;padding:12px}
  .client-strip .logo-plate img{max-height:52px;width:auto}
  .client-strip .stat-row .k{overflow-wrap:normal;white-space:nowrap;font-size:1.375rem}

  /* "what you have probably been sold" vs "what you get": each pair reads across */
  .compare{grid-template-columns:minmax(0,1fr);gap:12px}

  /* the menu headings no longer half-fade on a narrow screen */
  .menu .mt{background:none;color:var(--text);transform:none}

  /* the 60-second check: say what it is before asking the first question */
  #check .grid-7-5 > .quiz{order:2}
  #check .grid-7-5 > div:not(.quiz){order:1}

  /* footer: links closer together */
  .footer ul a{min-height:34px}
  .footer .wrap{gap:20px 16px;padding-top:40px;padding-bottom:32px}
  .footer .f-brand{grid-column:1/-1}
}
@media (max-width:640px){
  /* areas: the town name heads its paragraph instead of sitting in a thin column beside it */
  #bytown .defs > div{grid-template-columns:minmax(0,1fr);gap:4px}
  #bytown .defs dt{font-size:1rem}
  /* contact: call and text side by side, email across the full width so the address fits on one line */
  .contact-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-tiles > :last-child{grid-column:1/-1}
  .contact-tiles > :last-child .ctile-v{overflow-wrap:normal;word-break:normal;font-size:.8125rem}
}
@media (max-width:640px){
  /* town pages: two search tables stack, each gets the full width so names and towns stay whole */
  .grid-2:has(.snap),.grid.grid-2:has(.snap){grid-template-columns:minmax(0,1fr);gap:16px}
  .snap th,.snap td{overflow-wrap:normal;word-break:normal}
}
@media (max-width:640px){
  /* question lists and "who we work with" lists: a full sentence never sits in a thin label column */
  #faq .defs > div,#who .defs > div,#fit .defs > div{grid-template-columns:minmax(0,1fr);gap:4px}
  #faq .defs dt,#who .defs dt,#fit .defs dt{font-size:.9375rem;line-height:1.3}
}

.try-voices{border:0;padding:0;margin:var(--s-4) 0 var(--s-2);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}