/* Soma Recoup · home v7 · follows soma-health.ca's spine · Source Serif 4 + Geist
   House rules kept: no eyebrows, no hairlines, no shadows at rest, no gradients, ≤2 faces, ≤5 sizes,
   surfaces separated by tone, product screens only (no stock photography). */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=Geist:wght@400;500;600&display=swap');

:root {
  --navy: #122637; --navy-2: #1a3a52; --navy-deep: #0b1a27;
  --teal: #1EA0B2; --teal-hover: #1a8a99; --teal-ink: #0f6a77;
  --paper: #FBF7F0; --paper-2: #F1E9DB;
  --ink: #16202B; --ink-2: #2E3A47; --ink-3: #5E6974;
  --display: "Source Serif 4", Georgia, serif;
  --text: "Geist", system-ui, sans-serif;
  --h1: clamp(2.8rem, 6.4vw, 5rem);
  --h2: clamp(1.9rem, 3.6vw, 2.9rem);
  --h3: 17px;
  --body: 17px;
  --small: 14px;
  --max: 1160px; --gutter: clamp(16px, 4vw, 40px); --pad: clamp(72px, 9vw, 128px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink)}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0 0 .4em;color:var(--navy);text-wrap:balance;max-width:17ch}
h1{font-size:var(--h1)} h2{font-size:var(--h2)}
h3{font-family:var(--text);font-size:var(--h3);font-weight:600;margin:0 0 .35em;color:var(--navy)}
p{margin:0 0 1em;max-width:52ch;text-wrap:pretty}
.lede{font-size:18px;color:var(--ink-2);max-width:46ch}
.small{font-size:var(--small);color:var(--ink-3)}
ul,ol{margin:0 0 1em;padding-left:1.1em;max-width:52ch;color:var(--ink-2)}
li{margin:.4em 0} li::marker{color:var(--teal-ink)}
strong{font-weight:600;color:var(--navy)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:760px}
section{padding:var(--pad) 0}
.band-2{background:var(--paper-2)}
.band-navy{background:var(--navy);color:var(--paper)}
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy p,.band-navy li,.band-navy strong,.band-navy .small{color:var(--paper)}
.band-navy li::marker,.band-navy a{color:var(--teal)}
.more{font-weight:600;text-decoration:underline}
.btn{display:inline-flex;align-items:center;padding:15px 24px;border-radius:6px;font-weight:600;font-size:1rem;text-decoration:none;border:0;cursor:pointer;font-family:var(--text);line-height:1.1;background:var(--teal);color:var(--navy);transition:transform .18s cubic-bezier(.16,1,.3,1),background .18s}
.btn:hover{background:var(--teal-hover);color:var(--navy);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.btn-ghost{background:var(--paper-2);color:var(--navy)}
.micro{font-size:var(--small);color:var(--ink-3);margin-top:12px}

/* nav */
.nav{background:var(--paper)}
.nav .wrap{display:flex;align-items:center;gap:28px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-family:var(--display);font-size:1.3rem}
.brand img{width:32px;height:32px}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:500;font-size:var(--small)}
.nav .btn{padding:10px 16px;font-size:var(--small)}
.nav-toggle{display:none;margin-left:auto;background:var(--paper-2);border:0;border-radius:8px;padding:8px 12px;color:var(--navy);font:inherit;font-weight:600}
@media(max-width:820px){.nav-links{display:none;position:absolute;left:0;right:0;top:68px;background:var(--paper-2);padding:12px var(--gutter) 20px;flex-direction:column;align-items:flex-start;gap:14px;z-index:5}.nav-links.open{display:flex}.nav-toggle{display:inline-block}}

/* hero: navy field like the Canadian site, the real report beside the claim */
.hero{background:var(--navy);color:var(--paper);padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,96px)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{color:var(--paper)}
.hero .lede{color:#D8E0E6}
.hero .micro{color:#B9C3CD}
.trust{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:20px;font-size:var(--small);color:#D8E0E6}
.trust span+span::before{content:"·";margin:0 10px;color:#8F9BA7}
.frame{background:var(--paper);overflow:hidden;border-radius:8px}
.frame .tab{padding:9px 14px;background:var(--paper-2);color:var(--ink-2);font-size:var(--small);font-weight:500}
.frame img,.frame video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.hero .frame img{aspect-ratio:auto}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}}

/* stats strip (like the product page) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 0 8px}
.stat .n{font-family:var(--display);font-size:var(--h2);color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{color:var(--ink-3);margin-top:6px;max-width:22ch}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:20px}}

/* the four jobs: one lead block + three (tone, not cards-in-cards) */
.jobs{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:stretch}
.job{background:var(--paper-2);padding:30px;border-radius:8px;display:flex;flex-direction:column;justify-content:center}
.job.lead{grid-row:span 3;background:var(--navy);color:var(--paper)}
.job.lead h3,.job.lead p,.job.lead li,.job.lead .small{color:var(--paper)}
.job.lead li::marker{color:var(--teal)}
.job.lead .frame{margin-top:22px;border-radius:6px}
.job .small{margin:0}
@media(max-width:860px){.jobs{grid-template-columns:1fr}.job.lead{grid-row:auto}}

/* report block */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.row.flip>:first-child{order:2}
@media(max-width:860px){.row{grid-template-columns:1fr}.row.flip>:first-child{order:0}}
.checks{list-style:none;padding:0}
.checks li{padding-left:28px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--teal)}

/* how it works: three tracks */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.track{background:var(--paper);padding:28px;border-radius:8px}
.track ol{margin:10px 0 0;padding-left:1.1em}
.track li{margin:.5em 0}
.track li b{font-weight:600;color:var(--navy)}
@media(max-width:900px){.tracks{grid-template-columns:1fr}}

/* after the draft: ask → does */
.asks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 32px}
.ask{padding:16px 0}
.ask .q{font-family:var(--display);font-size:1.3rem;color:var(--navy);margin:0 0 4px;line-height:1.2}
.ask .a{color:var(--ink-2);margin:0}
@media(max-width:700px){.asks{grid-template-columns:1fr}}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{margin:0;background:var(--paper);padding:26px;border-radius:8px}
.quote p{font-family:var(--display);font-size:1.3rem;line-height:1.3;color:var(--navy);margin-bottom:10px;max-width:none}
.quote cite{font-style:normal;font-size:var(--small);color:var(--ink-3)}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}

/* trust facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fact{background:var(--navy-2);padding:24px;border-radius:8px}
.fact h3{color:var(--paper);margin-bottom:6px}
.fact p{color:#D8E0E6;margin:0;max-width:none}
@media(max-width:860px){.facts{grid-template-columns:1fr}}

/* form */
.form{display:grid;gap:14px;max-width:540px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form .two{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-size:var(--small);font-weight:600;color:var(--navy)}
input,select{font:inherit;padding:12px 14px;border:1px solid rgba(18,38,55,.25);border-radius:6px;background:var(--paper);color:var(--ink);width:100%}
input:focus,select:focus{outline:2px solid var(--teal);outline-offset:1px}

/* footer */
footer{background:var(--navy-deep);color:var(--paper);padding:56px 0 32px;font-size:var(--small)}
footer .name{font-family:var(--display);font-size:clamp(2.6rem,8vw,6.4rem);line-height:1;margin:0 0 24px;color:var(--paper)}
footer .r{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:8px 0}
footer a{color:var(--paper);text-decoration:none} footer a:hover{color:var(--teal)}
footer p{margin:0;max-width:none;opacity:.85}

/* consent bar (top, never over text) + motion */
.consent{background:var(--navy-deep);color:var(--paper);padding:12px var(--gutter);display:none;gap:12px;align-items:center;flex-wrap:wrap;font-size:var(--small)}
.consent.show{display:flex} .consent p{margin:0;flex:1 1 360px;max-width:none} .consent a{color:var(--teal)}
.consent .btn{padding:10px 14px;font-size:var(--small);color:var(--navy)} .consent .btn-ghost{background:var(--navy-2);color:var(--paper)}
[data-rise]>*{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
[data-rise].in>*{opacity:1;transform:none}
[data-rise].in>:nth-child(2){transition-delay:.07s}[data-rise].in>:nth-child(3){transition-delay:.14s}[data-rise].in>:nth-child(4){transition-delay:.21s}[data-rise].in>:nth-child(5){transition-delay:.28s}[data-rise].in>:nth-child(6){transition-delay:.35s}
@media(prefers-reduced-motion:reduce){[data-rise]>*{opacity:1;transform:none;transition:none}}
.sticky-cta{display:none}

/* ───────────────────────────────────────────────────────────────
   v8 (2026-10-20) — rebuilt to the 2026 conversion research in
   research/marketing-website-2026.md. Hero carries name + category +
   the hours promise + one number + one button. Proof moved high.
   One motion vocabulary; one signature moment (the hours line).
   ─────────────────────────────────────────────────────────────── */

/* hero */
.hero .grid{align-items:center}
.hero h1{max-width:15ch;letter-spacing:-.02em}
.hero .promise{font-family:var(--display);font-size:var(--h2);line-height:1.05;color:var(--teal);margin:0 0 .5em;max-width:18ch;letter-spacing:-.01em}
.hero .lede{max-width:44ch}
.hero-copy>*{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.16,1,.3,1) forwards}
.hero-copy>:nth-child(1){animation-delay:.05s}
.hero-copy>:nth-child(2){animation-delay:.14s}
.hero-copy>:nth-child(3){animation-delay:.22s}
.hero-copy>:nth-child(4){animation-delay:.30s}
.hero-copy>:nth-child(5){animation-delay:.38s}
.hero-copy>:nth-child(6){animation-delay:.44s}
.hero-copy>:nth-child(7){animation-delay:.50s}
.hero-art{opacity:0;transform:translateY(20px);animation:rise .9s cubic-bezier(.16,1,.3,1) .26s forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-copy>*,.hero-art{opacity:1;transform:none;animation:none}}

/* the one number, and the one signature moment */
.meter{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);margin:30px 0 28px;flex-wrap:nowrap}
.meter .n{display:block;font-family:var(--display);font-size:clamp(2rem,4.2vw,3.2rem);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.meter .l{display:block;font-size:var(--small);color:#B9C3CD;margin-top:8px;max-width:15ch}
.meter-arrow{flex:0 0 auto;width:clamp(36px,6vw,84px);height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left center;transition:transform .85s cubic-bezier(.16,1,.3,1) .15s;align-self:flex-start;margin-top:clamp(16px,2vw,26px);position:relative}
.meter-arrow::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;border-top:2px solid var(--teal);border-right:2px solid var(--teal);transform:translate(1px,-50%) rotate(45deg);opacity:0;transition:opacity .3s ease .85s}
.meter-to{opacity:0;transform:translateX(-10px);transition:opacity .6s ease .6s,transform .6s cubic-bezier(.16,1,.3,1) .6s}
.meter-to .n{color:var(--teal)}
.meter.ran .meter-arrow{transform:scaleX(1)}
.meter.ran .meter-arrow::after{opacity:1}
.meter.ran .meter-to{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.meter-arrow{transform:scaleX(1);transition:none}.meter-arrow::after{opacity:1;transition:none}.meter-to{opacity:1;transform:none;transition:none}}
@media(max-width:420px){.meter{gap:12px}.meter .l{max-width:11ch}}

.btn-lg{padding:18px 30px;font-size:1.05rem;border-radius:8px}

/* proof bar — social proof and the facts, directly under the hero */
.proofbar{background:var(--paper-2);padding:clamp(40px,5vw,64px) 0}
.proof-quote{margin:0 0 clamp(32px,4vw,48px);max-width:68ch}
.proof-quote p{font-family:var(--display);font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.3;color:var(--navy);margin:0 0 10px;max-width:none}
.proof-quote cite{font-style:normal;font-size:var(--small);color:var(--ink-3)}
.proofbar .stats{grid-template-columns:repeat(3,1fr);padding:0}
.stat .of{font-size:.5em;color:var(--ink-3);letter-spacing:0}
@media(max-width:760px){.proofbar .stats{grid-template-columns:1fr;gap:22px}}

/* value props — the time prop leads, the other three support */
.props{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:stretch;margin-top:8px}
.prop{background:var(--paper-2);padding:clamp(24px,3vw,34px);border-radius:8px;display:flex;flex-direction:column;justify-content:center}
.prop h3{font-size:var(--h3)}
.prop p{margin:0 0 .8em;max-width:46ch}
.prop p:last-child{margin-bottom:0}
.prop.lead{grid-row:span 3;background:var(--navy);color:var(--paper)}
.prop.lead h3{color:var(--paper);font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;margin-bottom:.35em;letter-spacing:-.01em}
.prop.lead p{color:#D8E0E6}
@media(max-width:860px){.props{grid-template-columns:1fr}.prop.lead{grid-row:auto}}

/* nav: three links, so let them breathe */
.nav-links{gap:28px}
.nav-links a{font-size:15px}

/* v8 fold fit: the one button must be visible on a 1366×768 laptop (research:
   74% of attention lands in the first two screenfuls; one CTA, above the fold). */
.hero{padding:clamp(40px,4.6vw,68px) 0 clamp(52px,6vw,88px)}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.55rem);max-width:16ch;margin-bottom:.32em}
.hero .promise{font-size:clamp(1.7rem,2.9vw,2.45rem);margin-bottom:.45em;max-width:20ch}
.hero .lede{font-size:17px;max-width:46ch;margin-bottom:0}
.meter{margin:24px 0 24px}
.meter .n{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.meter .l{margin-top:6px}
.hero .micro{margin-top:14px}
.hero .trust{margin-top:14px}

/* ── v8.1 (2026-10-20): the real product loop, feature screenshots, people photos ── */

/* hero: the loop sits in the same document frame the still used */
.frame .loop{display:block;width:100%;height:auto;aspect-ratio:1270/864;object-fit:cover;object-position:top left;background:var(--paper)}

/* a dark product crop needs its own ground, not paper */
.frame.dark{background:#0E0E0E}
.frame.dark img{aspect-ratio:auto}

/* feature screenshots inside the value-prop cards */
.shot{margin-top:18px;border-radius:6px;overflow:hidden;background:var(--paper)}
.shot img{width:100%;height:auto;display:block}
.shot-wide img{aspect-ratio:3226/466}
.shot-sidebar{background:#0E0E0E;max-width:230px}
.shot-sidebar img{width:100%}
.prop.lead .shot,.prop.lead .photo{margin-top:22px}

/* people photography — used sparingly, always doing a job */
.photo{margin:0;border-radius:8px;overflow:hidden;line-height:0}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.row.intro{align-items:center;margin-bottom:clamp(28px,4vw,44px)}
.row.intro .photo{aspect-ratio:3/2}
.photo.inset{aspect-ratio:16/9}
.photo.inset img{object-position:center 42%}
#book .photo{aspect-ratio:16/10;max-width:520px}
@media(max-width:860px){.row.intro .photo{aspect-ratio:16/9}}

/* ── v8.2 (2026-10-20): scale to the window. On a wide monitor the 1160px column
   left a wall of empty paper and navy around everything. The page now grows with
   the viewport, and the hero art fills its half instead of floating in blue. ── */
:root{
  --max: min(1480px, 92vw);
  --gutter: clamp(16px, 3.2vw, 56px);
  --pad: clamp(64px, 7vw, 120px);
  --h1: clamp(2.8rem, 5.4vw, 5rem);
  --h2: clamp(1.9rem, 3.2vw, 3.1rem);
}
.wrap.narrow{max-width:min(860px,92vw)}

/* hero: give the art the larger share and let it fill top to bottom */
.hero .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:clamp(32px,4.5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.3rem,3.9vw,4.1rem);max-width:15ch}
.hero .promise{font-size:clamp(1.7rem,2.7vw,2.8rem);max-width:19ch}
.hero .lede{font-size:clamp(17px,1.15vw,19px);max-width:48ch}
.hero-art{align-self:stretch;display:flex;align-items:center}
.hero-art .frame{width:100%}
.meter .n{font-size:clamp(1.8rem,3vw,3rem)}

/* the product frames were capped far below the width they now have */
#reports .frame,#how .frame,.band-2 .frame{max-width:none!important}
.row{gap:clamp(32px,4.5vw,72px)}

/* small UI fragments inside the value-prop cards: shown near actual size, never
   a whole screen shrunk to illegibility */
.shot{display:inline-block;max-width:100%;border-radius:6px}
.shot.shot-dark{background:#0E0E0E;padding:0}
.shot.shot-dark img,.shot img{border-radius:6px}
.shot-sidebar{background:#0E0E0E;max-width:220px}
.prop .shot img{width:auto;max-width:100%;height:auto}
.prop .shot.shot-dark img{width:100%}

/* photos follow the new widths */
.row.intro .photo{aspect-ratio:16/10}
#book .photo{max-width:none;aspect-ratio:16/9}

/* v8.3 polish */
/* the trust line was dropping a separator onto the start of a wrapped row */
.trust{gap:8px 26px}
.trust span+span::before{content:none}
/* the home photo needs room for the person AND the laptop */
.photo.inset{aspect-ratio:4/3}
.photo.inset img{object-position:center 48%}

/* ── v9 (2026-10-20): document pages (HIPAA, privacy) on the home page's system ── */
.doc-hero{padding-bottom:clamp(36px,4vw,56px)}
.doc-hero h1{max-width:18ch}
.doc-hero .promise{font-size:clamp(1.3rem,1.9vw,1.8rem);max-width:28ch}
.doc-hero .lede{max-width:62ch;color:#D8E0E6}

/* the jump bar */
.switch{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.switch a{padding:9px 15px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;background:var(--navy-2);color:var(--paper)}
.switch a:hover{background:var(--teal);color:var(--navy)}
.band-2 .switch a,section:not(.hero) .switch a{background:var(--paper);color:var(--navy)}

/* the document body */
.doc{max-width:88ch}
.doc h2{font-size:clamp(1.6rem,2.4vw,2.3rem);margin:2.1em 0 .5em;max-width:28ch}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:17px;margin:1.7em 0 .35em}
.doc p,.doc li{color:var(--ink-2);max-width:78ch}
.doc .small{color:var(--ink-3)}
.doc ol.path{counter-reset:none;padding-left:1.2em}
.doc ol.path li{margin:.7em 0}

/* tables: the thing a security review actually reads */
.t{width:100%;border-collapse:collapse;margin:1.2em 0 1.6em;font-size:15.5px;background:var(--paper);border-radius:8px;overflow:hidden}
.t caption{text-align:left;color:var(--ink-3);font-size:14px;padding-bottom:8px}
.t th,.t td{text-align:left;vertical-align:top;padding:14px 16px;color:var(--ink-2);max-width:none}
.t thead th{background:var(--navy);color:var(--paper);font-weight:600;font-size:14px;letter-spacing:.01em}
.t tbody th[scope="row"]{color:var(--navy);font-weight:600;width:22%;min-width:150px}
.t tbody tr+tr th,.t tbody tr+tr td{border-top:1px solid rgba(18,38,55,.12)}
.t a{color:var(--teal-ink)}
@media(max-width:720px){
  .t,.t tbody,.t tr,.t th,.t td{display:block;width:auto}
  .t thead{position:absolute;left:-9999px}
  .t tbody tr{padding:6px 0;border-top:1px solid rgba(18,38,55,.12)}
  .t tbody tr:first-child{border-top:0}
  .t th,.t td{padding:6px 16px}
  .t tbody tr+tr th,.t tbody tr+tr td{border-top:0}
  .t tbody th[scope="row"]{width:auto;padding-top:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2 (2026-10-20) — the new blocks: the product journey, the agent diagram,
   and the clinic / enterprise section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- embedded live components ------------------------------------------ */
.embed{position:relative;width:100%;overflow:hidden;border-radius:10px;background:#121212}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed.journey{aspect-ratio:1270/620}
.embed.diagram{aspect-ratio:1000/640;background:transparent;border-radius:0}

/* the journey sits in the same document frame the rest of the site uses */
.journey-frame{background:var(--paper);border-radius:10px;overflow:hidden}
.journey-frame .tab{padding:9px 14px;background:var(--paper-2);color:var(--ink-2);font-size:var(--small);font-weight:500}

/* ═══════════════════════════════════════════════════════════════════════════
   v2 · the judge's verdict applied.
   Tonal ledger, enforced: exactly TWO navy sections — the hero and the
   journey — and they are never adjacent. Everything else is paper or paper-2.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- hero: the field is CSS, so it runs on every machine ----------------
   It was drifting at 34–52 s over a few percent, which reads as "nothing is
   moving". Now: four swaths on different paths and periods, big travel, plus a
   slow rotation of the whole field — the CSS answer to MeshGradient's
   "soft drifting colour swaths whose seams wrap through the palette".
   It also blooms in on load so the motion is visible immediately. ------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .wrap,.hero-rail{position:relative;z-index:1}
.field{position:absolute;inset:-18%;z-index:-2;overflow:hidden;animation:fieldIn 1.5s cubic-bezier(.16,1,.3,1) both,fieldSpin 120s linear infinite 1.5s}
@keyframes fieldIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}
@keyframes fieldSpin{to{transform:rotate(360deg)}}
.field span{position:absolute;display:block;border-radius:50%;filter:blur(64px);will-change:transform,opacity}
.field .a{width:46vw;height:46vw;min-width:460px;min-height:460px;left:2%;top:-14%;
  background:radial-gradient(circle at 50% 50%,rgba(30,160,178,.62),rgba(30,160,178,0) 66%);
  animation:swathA 17s ease-in-out infinite alternate}
.field .b{width:42vw;height:42vw;min-width:420px;min-height:420px;right:-4%;top:6%;
  background:radial-gradient(circle at 50% 50%,rgba(38,86,120,1),rgba(38,86,120,0) 68%);
  animation:swathB 23s ease-in-out infinite alternate}
.field .c{width:34vw;height:34vw;min-width:340px;min-height:340px;left:34%;bottom:-18%;
  background:radial-gradient(circle at 50% 50%,rgba(30,160,178,.45),rgba(30,160,178,0) 70%);
  animation:swathC 14s ease-in-out infinite alternate}
.field .d{width:30vw;height:30vw;min-width:300px;min-height:300px;left:-6%;bottom:-6%;
  background:radial-gradient(circle at 50% 50%,rgba(18,38,55,1),rgba(18,38,55,0) 72%);
  animation:swathD 29s ease-in-out infinite alternate}
@keyframes swathA{from{transform:translate3d(0,0,0) scale(1);opacity:.55}
  to{transform:translate3d(34%,26%,0) scale(1.28);opacity:.95}}
@keyframes swathB{from{transform:translate3d(0,0,0) scale(1.1);opacity:.85}
  to{transform:translate3d(-30%,34%,0) scale(.86);opacity:.5}}
@keyframes swathC{from{transform:translate3d(0,0,0) scale(.9);opacity:.45}
  to{transform:translate3d(-26%,-30%,0) scale(1.3);opacity:.9}}
@keyframes swathD{from{transform:translate3d(0,0,0) scale(1);opacity:.9}
  to{transform:translate3d(28%,-22%,0) scale(1.22);opacity:.6}}
.grain{position:absolute;inset:0;z-index:-1;opacity:.45;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
/* the WebGPU shader replaces the CSS field only where an adapter is granted */
#gpufield{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:none}
.hero[data-gpu="on"] #gpufield{display:block}
.hero[data-gpu="on"] .field{display:none}

/* the attributed line that sits under the one button */
.hero-quote{margin:20px 0 0;max-width:46ch;font-family:var(--display);font-size:1.25rem;line-height:1.35;color:var(--paper)}
.hero-quote cite{display:block;font-style:normal;font-family:var(--text);font-size:13.5px;color:#B9C3CD;margin-top:7px}

/* the product's own six-stage rail, promised at the foot of the hero */
.hero-rail{display:flex;gap:0;align-items:center;max-width:var(--max);margin:clamp(30px,4vw,52px) auto 0;
  padding:16px var(--gutter) 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.hero-rail .hr{display:flex;align-items:center;gap:9px;padding-right:30px;white-space:nowrap;
  font-size:13px;color:#8C9AA6;flex:0 0 auto}
.hero-rail .hr i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;border:1.5px solid rgba(255,255,255,.18)}
.hero-rail .hr.on{color:var(--paper)}
.hero-rail .hr.on i{border-color:var(--teal);background:rgba(30,160,178,.16);color:#7FD6E2}

/* ---- proof bar: every figure says where it came from -------------------- */
.proofbar .stats{grid-template-columns:repeat(4,1fr);padding:0}
.stat .src{font-size:12.5px;color:var(--ink-3);margin-top:7px;max-width:26ch;line-height:1.45}
@media(max-width:900px){.proofbar .stats{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:560px){.proofbar .stats{grid-template-columns:1fr}}

/* ---- embedded live components ------------------------------------------ */
.embed{position:relative;width:100%;overflow:hidden;border-radius:10px;background:#121212}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed.journey{aspect-ratio:1270/620;border-radius:0}
.embed.diagram{aspect-ratio:1000/690;background:transparent;border-radius:0;margin-top:clamp(18px,2.5vw,32px)}

/* ---- the journey, the page's one dark theatre --------------------------- */
.journey-section{background:var(--navy-deep)}
.journey-wrap{margin-top:clamp(24px,3vw,38px)}
.stage-col{list-style:none;margin:0;padding:0;counter-reset:sc;align-self:center}
.stage-col li{counter-increment:sc;display:flex;gap:10px;align-items:baseline;padding:9px 0;
  font-size:14px;color:#6F808D;transition:none}
.stage-col li::before{content:counter(sc);font-family:var(--text);font-size:11.5px;color:#55656F;min-width:12px}
.journey-frame{background:var(--paper);border-radius:10px;overflow:hidden}
.journey-frame .tab{padding:9px 14px;background:var(--paper-2);color:var(--ink-2);font-size:var(--small);font-weight:500}
/* the column shares the asset's own 26 s loop — no scroll-jacking */
@keyframes scLit{0%,2%{color:var(--paper)}20%,100%{color:#6F808D}}
.stage-col li{animation:scLit 26s linear infinite}
.stage-col .sc1{animation-delay:0s}.stage-col .sc2{animation-delay:5s}.stage-col .sc3{animation-delay:9.6s}
.stage-col .sc4{animation-delay:14.1s}.stage-col .sc5{animation-delay:17.6s}.stage-col .sc6{animation-delay:22.1s}
@media(max-width:860px){.journey-wrap{grid-template-columns:1fr}.stage-col{display:flex;flex-wrap:wrap;gap:0 22px}}

/* ---- drop figure (grafted from the editorial pass) ---------------------- */
.dropfig{float:left;font-family:var(--display);font-size:clamp(76px,7vw,116px);line-height:.82;
  color:rgba(30,160,178,.30);margin:0 18px 0 0;shape-outside:margin-box;user-select:none}

/* ---- the identifiers strip --------------------------------------------- */
.redact{background:var(--paper-2);border-radius:10px;overflow:hidden;margin:clamp(24px,3vw,34px) 0 0;max-width:820px}
.redact-head{padding:11px 18px;font-size:13.5px;font-weight:600;color:var(--navy);background:rgba(18,38,55,.06)}
.redact-rows{padding:6px 18px 16px}
.rr{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid rgba(18,38,55,.10);font-size:15px}
.rr:first-child{border-top:0}
.rr .cat{font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);min-width:124px}
.rr .was{color:var(--ink-2)}
.rr .arr{flex:0 0 auto;width:26px;height:1.5px;background:var(--teal);position:relative}
.rr .arr::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1.5px solid var(--teal);
  border-right:1.5px solid var(--teal);transform:translate(1px,-50%) rotate(45deg)}
.rr .tok{font-size:13.5px;color:var(--teal-ink);background:rgba(30,160,178,.12);border-radius:5px;padding:3px 9px}
@media(max-width:600px){.rr{flex-wrap:wrap;gap:8px}.rr .cat{min-width:0;width:100%}}

/* ---- "what we don't claim" --------------------------------------------- */
.nocl{background:var(--paper-2);border-radius:10px;padding:clamp(24px,3vw,34px);margin-top:clamp(24px,3vw,34px);max-width:820px}
.nocl h3{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.5em}
.nocl ul{margin:0;padding-left:1.1em;max-width:72ch}
.nocl li{margin:.5em 0;color:var(--ink-2)}

/* ---- trust facts, now on paper not navy -------------------------------- */
#trust .facts{grid-template-columns:repeat(4,1fr);margin-top:clamp(24px,3vw,34px)}
#trust .fact{background:var(--paper-2)}
#trust .fact h3{color:var(--navy)}
#trust .fact p{color:var(--ink-2)}
@media(max-width:980px){#trust .facts{grid-template-columns:1fr 1fr}}
@media(max-width:620px){#trust .facts{grid-template-columns:1fr}}

/* ---- clinics / enterprise, on paper-2 ---------------------------------- */
.ent{background:var(--paper-2)}
.ent .lede{max-width:56ch}
.ent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,3.5vw,44px)}
.ent-item{background:var(--paper);border-radius:8px;padding:clamp(22px,2.4vw,30px)}
.ent-item h3{font-size:var(--h3);margin-bottom:.4em;color:var(--navy)}
.ent-item p{color:var(--ink-2);margin:0;max-width:40ch;font-size:15.5px}
.ent-item .n{display:block;font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--teal-ink);margin-bottom:12px}
@media(max-width:980px){.ent-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.ent-grid{grid-template-columns:1fr}}
.ent-foot{margin-top:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.ent-foot a{color:var(--teal-ink);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(30,160,178,.45);padding-bottom:1px}
.ent-foot a:hover{color:var(--navy);border-color:var(--navy)}
.ent-foot .small{margin:0}

@media(prefers-reduced-motion:reduce){
  .field span,.stage-col li{animation:none}
  .stage-col li{color:#9AAAB6}
}

/* v2 fix: the v2 hero grid rule came after the original breakpoint and
   re-imposed two columns on a phone, squeezing the headline to 45% width.
   These overrides must stay LAST in the file. */
@media(max-width:900px){
  .hero .grid{grid-template-columns:1fr!important;gap:28px}
  .hero-art{align-self:auto}
  .hero-rail{display:none}
}
@media(max-width:620px){
  .hero h1{font-size:clamp(2.1rem,8.4vw,2.8rem);max-width:none}
  .hero .promise{font-size:clamp(1.5rem,6.4vw,2rem);max-width:none}
  .hero .lede{max-width:none}
  .hero-quote{font-size:1.1rem;max-width:none}
  .meter{gap:14px}
  .row.intro{gap:24px}
}

/* v2.1: the hero shows the chat path live, not a still */
.embed.chat{aspect-ratio:1270/620;border-radius:0}

/* ═══ the enterprise room — its own feel: deep navy, teal filament, serif scale ═══ */
.ent2{background:var(--navy-deep);color:var(--paper);border-top:2px solid var(--teal);position:relative}
.ent2 h2{color:var(--paper);max-width:24ch}
.ent2 .lede{color:#C4D2DC}
.ent2 .lede strong{color:var(--paper)}
.ent2-sub{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem);color:var(--teal);margin:0 0 .4em;letter-spacing:-.01em}
/* the scale ladder: solo → group → public */
.scaleline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:clamp(30px,4vw,46px) 0;align-items:end}
.scaleline .sc{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#C4D2DC}
.scaleline .sc strong{color:var(--paper);font-size:16px}
.scaleline .bar{display:block;border-radius:5px 5px 0 0;background:linear-gradient(180deg,rgba(30,160,178,.75),rgba(30,160,178,.18));width:100%}
.scaleline .b1{height:34px}.scaleline .b2{height:72px}.scaleline .b3{height:118px}
/* the case, in serif */
.case{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-item{background:rgba(255,255,255,.045);border-radius:10px;padding:clamp(22px,2.6vw,32px)}
.c-item h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2vw,1.8rem);color:var(--paper);margin:0 0 .45em;letter-spacing:-.01em}
.c-item p{color:#C4D2DC;margin:0;font-size:15.5px;max-width:44ch}
.embed.ent-diagram{aspect-ratio:1000/640;background:transparent;border-radius:0;margin-top:clamp(14px,2vw,22px)}
/* the six hooks restyled for the dark room */
.ent2 .ent-grid{margin-top:clamp(34px,4vw,50px)}
.ent2 .ent-item{background:rgba(255,255,255,.045)}
.ent2 .ent-item h3{color:var(--paper)}
.ent2 .ent-item p{color:#C4D2DC}
.ent2 .ent-item .n{color:var(--teal)}
.ent2 .ent-foot a{color:var(--teal);border-color:rgba(30,160,178,.5)}
.ent2 .ent-foot a:hover{color:var(--paper);border-color:var(--paper)}
.ent2 .ent-foot .small{color:#9FB3BF}
@media(max-width:860px){.scaleline,.case{grid-template-columns:1fr}.scaleline{align-items:start}.scaleline .bar{width:120px}}

/* five figures in the proof bar */
.proofbar .stats{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.proofbar .stats{grid-template-columns:repeat(3,1fr);gap:26px}}
@media(max-width:700px){.proofbar .stats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.proofbar .stats{grid-template-columns:1fr}}

/* ═══ photo dressing — the CSS answer to the shaders Duotone/Vignette/FilmGrain
   stack, so it renders for every visitor. One class, deliberately quiet:
   a touch less saturation, a navy wash, a soft edge vignette. ═══ */
.photo{position:relative}
.photo img{filter:saturate(.82) contrast(1.04) brightness(1.02)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(18,38,55,0) 55%, rgba(18,38,55,.26) 100%),
    linear-gradient(0deg, rgba(18,38,55,.16), rgba(18,38,55,.16));
  mix-blend-mode:multiply}
.photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* the two live cards */
.embed.panes{aspect-ratio:760/520;background:#121212;border-radius:12px;margin-top:18px}
.embed.voice{aspect-ratio:560/238;background:transparent;border-radius:10px;margin-top:18px}