/* ==========================================================================
   Vivo Health Solutions
   Orange = action. Green = progress, wellness, reassurance. Charcoal = accent.
   ========================================================================== */

:root {
  --cream:#FFF9F2; --cream-2:#FFF1E3; --cream-3:#FFE6D0; --paper:#FFFFFF;
  --mint:#F1F8EC; --hairline:#F2DFC9; --hairline-hi:#E4C7A6; --hairline-g:#CFE3BF;

  --ember:#F47920; --tangerine:#FF8A2B; --gold:#FFC24D; --peach:#FFDCBB;
  --vital:#5B9A42; --leaf:#6DB84A; --sage:#CFE3BF; --sage-2:#E4F0DA;

  --ember-text:#C25A0B; --leaf-text:#3D7527;

  --char:#24190F; --ink:#2A1D12; --ink-dim:#74604D; --ink-faint:#A4907C;
  --on-char:#FFF6EC; --on-char-dim:#D9C4AE;

  --lift:0 2px 4px -2px rgba(90,50,10,.10), 0 10px 26px -12px rgba(120,64,12,.16);
  --lift-2:0 4px 8px -4px rgba(90,50,10,.14), 0 22px 48px -18px rgba(120,64,12,.26);
  --hot:linear-gradient(118deg, var(--gold) 0%, var(--tangerine) 52%, var(--ember) 100%);
  --fresh:linear-gradient(118deg, var(--leaf) 0%, var(--vital) 100%);

  --step--1:clamp(.79rem,.77rem + .1vw,.85rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.09rem);
  --step-1:clamp(1.16rem,1.08rem + .4vw,1.4rem);
  --step-2:clamp(1.55rem,1.34rem + 1vw,2.2rem);
  --step-3:clamp(2rem,1.55rem + 2.4vw,3.7rem);
  --sticky-h:0px;
}

/* auto dark disabled by design; see note above. Tokens live in :root[data-theme="dark"]. */
:root[data-theme="dark"] {
  --cream:#1C1510; --cream-2:#251C14; --cream-3:#30241A; --paper:#221A13;
  --mint:#1E2618; --hairline:#3E2E20; --hairline-hi:#57402C; --hairline-g:#3B4F2E;
  --peach:#6B4526; --sage:#3B4F2E; --sage-2:#2A3720;
  --ember-text:#FFB877; --leaf-text:#9BD183;
  --char:#120D08; --ink:#FFF3E6; --ink-dim:#C2A98F; --ink-faint:#8E7660;
  --lift:0 2px 4px -2px rgba(0,0,0,.5), 0 10px 26px -12px rgba(0,0,0,.6);
  --lift-2:0 4px 8px -4px rgba(0,0,0,.55), 0 22px 48px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--step-0);line-height:1.62;-webkit-font-smoothing:antialiased;
  padding-bottom:var(--sticky-h);
}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.018em;text-wrap:balance}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--ember-text)}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--paper);padding:10px 16px;border-radius:8px;box-shadow:var(--lift-2)}

.eyebrow{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-text);margin:0}
.eyebrow.green{color:var(--leaf-text)}
.grad{background:var(--hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ember)}

/* ---------------- nav ---------------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid var(--hairline)}
@supports (backdrop-filter:blur(1px)){.topbar{background:color-mix(in srgb, var(--cream) 86%, transparent);backdrop-filter:blur(14px) saturate(1.3)}}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none;flex:none}
.brand span{background:var(--hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ember)}
.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.navlinks a{font-size:var(--step--1);font-weight:600;color:var(--ink-dim);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.navlinks a:hover{color:var(--ember-text)}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ember)}
/* Nested to outrank `.navlinks a`, which is more specific than a bare
   `.navcta` and was zeroing this button's horizontal padding, jamming the
   label against the pill edge. Matching the nesting fixes it without
   reaching for !important. */
.navlinks a.navcta{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.87rem;padding:11px 22px;border-radius:99px;background:var(--hot);color:#2A1607;text-decoration:none;border-bottom:0;white-space:nowrap;flex:none;line-height:1.15}
.navcta:hover{filter:saturate(1.08)}
@media (max-width:1040px){
  .masthead{flex-wrap:wrap}
  .navlinks{width:100%;gap:18px;flex-wrap:nowrap;padding-bottom:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap}
  .navcta{display:none}
}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;background:var(--cream);border-bottom:1px solid var(--hairline)}
.hero-art{position:absolute;inset:0;background-image:var(--hero-photo,none),linear-gradient(120deg,var(--cream) 0%,var(--cream-2) 46%,var(--cream-3) 100%);background-size:cover;background-position:65% 34%;background-repeat:no-repeat}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(96deg,var(--cream) 0%,var(--cream) 30%,rgba(255,249,242,.95) 46%,rgba(255,249,242,.55) 62%,rgba(255,249,242,0) 78%)}
:root[data-theme="dark"] .hero-scrim{background:linear-gradient(96deg,var(--cream) 0%,var(--cream) 28%,rgba(28,21,16,.94) 46%,rgba(28,21,16,.5) 64%,rgba(28,21,16,0) 80%)}
.hero-inner{position:relative;padding:32px 0 44px;min-height:min(84vh,800px);display:flex;align-items:center}
.scene-col{width:100%;max-width:660px}

@media (max-width:880px){
  .hero-art{inset:0 0 auto 0;height:31vh;background-position:62% 24%}
  .hero-scrim{background:linear-gradient(180deg,rgba(255,249,242,0) 0%,rgba(255,249,242,0) 14vh,rgba(255,249,242,.88) 24vh,var(--cream) 30vh)}
  :root[data-theme="dark"] .hero-scrim{background:linear-gradient(180deg,rgba(28,21,16,0) 0%,rgba(28,21,16,0) 14vh,rgba(28,21,16,.9) 24vh,var(--cream) 30vh)}
  .hero-inner{min-height:0;padding:29vh 26px 34px;align-items:flex-start}
}

/* page head */
.pagehead{position:relative;overflow:hidden;background:linear-gradient(112deg,var(--cream) 0%,var(--cream-2) 52%,var(--cream-3) 100%);border-bottom:1px solid var(--hairline);padding:52px 0 46px}
.pagehead::after{content:"";position:absolute;right:-25%;top:-80%;width:85%;height:260%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,194,77,.42),rgba(255,194,77,.16) 55%,rgba(255,194,77,0) 100%)}
.pagehead.green::after{background:radial-gradient(closest-side,rgba(109,184,74,.3),rgba(109,184,74,.11) 55%,rgba(109,184,74,0) 100%)}
.pagehead .wrap{position:relative}
.pagehead h1{font-size:var(--step-3);line-height:1.04;margin:14px 0 12px;max-width:24ch}
.pagehead p{color:var(--ink-dim);font-weight:300;font-size:var(--step-1);max-width:56ch;margin:0}

/* ---------------- trust strip ---------------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:660px;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--hairline-g)}
.trust div{display:flex;gap:9px;align-items:flex-start;font-size:.83rem;color:var(--ink-dim);font-weight:400;line-height:1.35}
.trust svg{width:17px;height:17px;flex:none;margin-top:2px;fill:none;stroke:var(--vital);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.trust{grid-template-columns:1fr 1fr;gap:12px}}

/* ---------------- quiz ---------------- */
.kicker{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none;box-shadow:0 0 0 4px rgba(109,184,74,.22)}
.kicker span{font-size:var(--step--1);font-weight:600;color:var(--ink-dim)}
.hero-q{font-size:var(--step-3);line-height:1.02;margin:0 0 12px;max-width:22ch}
.hero-q em{font-style:normal;background:var(--hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ember)}
.hero-sub{font-size:var(--step-1);font-weight:300;color:var(--ink-dim);max-width:46ch;margin:0 0 26px}

.rail{height:5px;border-radius:99px;background:var(--hairline);max-width:660px;margin:0 0 16px;overflow:hidden}
.rail-fill{height:100%;width:0%;background:var(--fresh);border-radius:99px;transition:width .55s cubic-bezier(.2,.7,.3,1)}

.qbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;max-width:660px}
.qmeta{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.qmeta b{color:var(--leaf-text)}
.backbtn{appearance:none;background:none;border:0;padding:6px 2px;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;gap:6px}
.backbtn:hover{color:var(--ember-text)}
.backbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.backbtn:focus-visible{outline:2.5px solid var(--tangerine);outline-offset:3px;border-radius:6px}

.qpanel{animation:panel-in .34s cubic-bezier(.2,.8,.3,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.qpanel{animation:none}}

.q{font-size:var(--step-2);line-height:1.12;margin:0 0 8px;max-width:26ch}
.q-help{color:var(--ink-dim);font-weight:300;max-width:52ch;margin:0 0 20px;font-size:.97rem}

.opts{display:grid;gap:12px;max-width:660px}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opts.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.opts.three{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.opts.three,.opts.two{grid-template-columns:1fr}}

.opt{position:relative;appearance:none;font:inherit;color:var(--ink);text-align:left;background:var(--paper);border:1.5px solid var(--hairline);border-radius:15px;padding:16px 17px;min-height:58px;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--lift);transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s,background .18s}
.opt::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;background:var(--hot);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .18s;pointer-events:none}
.opt:hover{transform:translateY(-3px);box-shadow:var(--lift-2)}
.opt:hover::before{opacity:1}
.opt:active{transform:translateY(-1px) scale(.99)}
.opt:focus-visible{outline:2.5px solid var(--tangerine);outline-offset:3px}
/* selected state is GREEN: this is progress, not action */
.opt[aria-pressed="true"]{border-color:var(--vital);background:var(--mint)}
.opt[aria-pressed="true"]::before{opacity:0}
.opt[aria-pressed="true"] .tick{opacity:1;transform:none}
.tick{position:absolute;top:11px;right:11px;width:20px;height:20px;border-radius:50%;background:var(--fresh);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.tick svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.opt-ico{width:26px;height:26px;flex:none}
.opt-ico svg{width:26px;height:26px;fill:none;stroke:url(#hotgrad);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.opt[aria-pressed="true"] .opt-ico svg{stroke:url(#freshgrad)}
.opt-t{font-weight:700;font-size:1.03rem;line-height:1.22;letter-spacing:-.01em;padding-right:24px}
.opt-d{font-size:.83rem;color:var(--ink-dim);font-weight:300;line-height:1.42}
.opts.feel .opt{padding:18px 17px 17px;gap:9px}
.opt.wide{grid-column:1/-1}

/* "why we ask" disclosure */
details.why{max-width:660px;margin-top:14px;border:1px solid var(--hairline-g);border-radius:11px;background:var(--mint)}
details.why summary{cursor:pointer;list-style:none;padding:11px 15px;font-size:.85rem;font-weight:700;color:var(--leaf-text);display:flex;align-items:center;gap:8px}
details.why summary::-webkit-details-marker{display:none}
details.why summary::after{content:"+";margin-left:auto;font-size:1.1rem;line-height:1}
details.why[open] summary::after{content:"\2212"}
details.why summary:focus-visible{outline:2.5px solid var(--vital);outline-offset:2px;border-radius:11px}
details.why .why-b{padding:0 15px 14px;font-size:.85rem;color:var(--ink-dim);font-weight:300;line-height:1.55}
.sidestep{margin-top:12px;max-width:660px;font-size:.88rem;color:var(--ink-dim)}
.sidestep button{appearance:none;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ember-text);border-bottom:1.5px solid currentColor;cursor:pointer}

/* myth verdict */
.verdict{margin-top:16px;max-width:660px;padding:18px 20px;border-radius:14px;background:var(--mint);border:1.5px solid var(--vital);box-shadow:var(--lift)}
.verdict.miss{background:var(--paper);border-color:var(--tangerine)}
.verdict-tag{font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf-text);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.verdict.miss .verdict-tag{color:var(--ember-text)}
.verdict-tag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.verdict p{margin:0;font-size:.93rem;color:var(--ink-dim);font-weight:300}

.rowend{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.btn{appearance:none;white-space:nowrap;font:inherit;font-weight:700;font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.01em;padding:15px 30px;border-radius:99px;cursor:pointer;border:1.5px solid transparent;text-decoration:none;display:inline-block;text-align:center;transition:transform .16s,box-shadow .16s,filter .16s}
.btn-go{background:var(--hot);color:#2A1607!important;box-shadow:0 8px 22px -10px rgba(244,121,32,.75)}
.btn-go:hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn-ghost{background:none;color:var(--ink-dim)!important;border-color:var(--hairline-hi)}
.btn-ghost:hover{color:var(--ink)!important;border-color:var(--ink-faint)}
.btn:focus-visible{outline:2.5px solid var(--tangerine);outline-offset:3px}
.linkish{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:.9rem;font-weight:600;color:var(--leaf-text);border-bottom:1.5px solid currentColor;cursor:pointer}
.linkish:hover{color:var(--vital)}

/* ---------------- result ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 20px;max-width:660px}
.chip{font-size:.84rem;font-weight:700;padding:8px 15px;border-radius:99px;background:var(--fresh);color:#fff;opacity:0;transform:translateY(8px) scale(.96);animation:chip-in .5s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes chip-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.chip{opacity:1;transform:none;animation:none}}

.reslead{max-width:62ch;color:var(--ink-dim);font-weight:300;margin:0 0 26px;font-size:1rem}

/* the conversion block, deliberately above the education */
.convert{max-width:660px;padding:26px 27px 28px;border-radius:18px;background:var(--paper);border:1.5px solid var(--hairline);box-shadow:var(--lift-2);position:relative;overflow:hidden}
.convert::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--hot)}
.convert h3{font-size:var(--step-1);margin:0 0 8px;max-width:28ch}
.convert > p{margin:0;color:var(--ink-dim);font-weight:300;font-size:.95rem;max-width:52ch}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:20px 0 4px}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.field input,.field select{font:inherit;color:var(--ink);background:var(--cream);border:1.5px solid var(--hairline);border-radius:11px;padding:13px 14px;width:100%}
.field input:focus-visible,.field select:focus-visible{outline:2.5px solid var(--vital);outline-offset:1px;border-color:var(--vital)}
.field.wide{grid-column:1/-1}
.reqd{color:var(--ember)}

fieldset.seg{border:0;padding:0;margin:18px 0 0;grid-column:1/-1}
fieldset.seg legend{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);padding:0;margin-bottom:9px}
.segrow{display:flex;gap:9px;flex-wrap:wrap}
.pill{appearance:none;font:inherit;font-size:.88rem;font-weight:700;padding:10px 17px;min-height:44px;border-radius:99px;cursor:pointer;background:var(--cream);color:var(--ink);border:1.5px solid var(--hairline);transition:background .16s,border-color .16s,color .16s}
.pill:hover{border-color:var(--hairline-hi)}
.pill[aria-pressed="true"]{background:var(--fresh);border-color:transparent;color:#fff}
.pill:focus-visible{outline:2.5px solid var(--vital);outline-offset:2px}

.consent{margin:14px 0 0;padding:13px 15px;border-radius:11px;background:var(--mint);border:1px solid var(--hairline-g);font-size:.79rem;color:var(--ink-dim);font-weight:300;line-height:1.55}
.sent{margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--mint);border:1.5px solid var(--vital);font-size:.92rem;color:var(--ink)}
.sent strong{color:var(--leaf-text)}
.fineprint{margin-top:16px;font-size:.78rem;line-height:1.6;color:var(--ink-faint);font-weight:300;max-width:66ch}

.tenlist{display:grid;gap:11px;max-width:660px}
.ten{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:17px 19px;border-radius:14px;background:var(--paper);border:1.5px solid var(--hairline);box-shadow:var(--lift)}
.ten-n{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--leaf-text)}
.ten-t{font-weight:700;font-size:1rem;line-height:1.28;margin-bottom:4px;letter-spacing:-.012em}
.ten-b{font-size:.87rem;color:var(--ink-dim);font-weight:300;line-height:1.5}

/* ---------------- sections ---------------- */
section{padding:74px 0}
.sec-h{font-size:var(--step-2);line-height:1.1;margin:15px 0 12px;max-width:28ch}
.sec-p{color:var(--ink-dim);font-weight:300;max-width:60ch;margin:0 0 34px}
.band-dark{background:var(--char);color:var(--on-char);position:relative;overflow:hidden}
.band-dark .eyebrow{color:var(--gold)}
.band-dark .eyebrow.green{color:var(--leaf)}
.band-dark .sec-h,.band-dark h3{color:var(--on-char)}
.band-dark .sec-p,.band-dark p{color:var(--on-char-dim)}
.band-dark::after{content:"";position:absolute;right:-10%;top:-40%;width:52%;height:180%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,138,43,.24),rgba(255,138,43,0) 65%)}
.band-cream{background:var(--cream-2)}
.band-mint{background:var(--mint)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
@media (max-width:840px){.pillars{grid-template-columns:1fr;gap:26px}}
.pillar{border-top:3px solid;border-image:var(--hot) 1;padding-top:18px}
.pillar.g{border-image:var(--fresh) 1}
.pillar h3{font-size:1.14rem;margin:0 0 9px}
.pillar p{margin:0;font-size:.93rem;font-weight:300;line-height:1.62}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:920px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:var(--paper);border:1.5px solid var(--hairline);border-radius:17px;padding:24px 23px;box-shadow:var(--lift);display:flex;flex-direction:column;gap:9px;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--lift-2)}
.card-ico{width:30px;height:30px}
.card-ico svg{width:30px;height:30px;fill:none;stroke:url(#freshgrad);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.13rem;margin:4px 0 0}
.card p{margin:0;font-size:.91rem;color:var(--ink-dim);font-weight:300;line-height:1.58}
.card ul{margin:4px 0 0;padding-left:18px;font-size:.87rem;color:var(--ink-dim);font-weight:300;line-height:1.7}
.card .tag{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf-text)}

/* alternating image + copy */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.flip .split-img{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:30px}.split.flip .split-img{order:0}}
.split-img{border-radius:20px;overflow:hidden;box-shadow:var(--lift-2);aspect-ratio:3/2;background:var(--cream-3)}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-copy h2{font-size:var(--step-2);line-height:1.1;margin:14px 0 12px;max-width:24ch}
.split-copy p{color:var(--ink-dim);font-weight:300;margin:0 0 14px}
.split-copy ul{margin:0;padding-left:20px;color:var(--ink-dim);font-weight:300;line-height:1.75}

/* five-step timeline */
.timeline{position:relative;max-width:860px;padding-left:8px}
.tl{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;padding:0 0 34px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:27px;top:46px;bottom:-6px;width:2px;background:linear-gradient(180deg,var(--vital),var(--hairline-g))}
.tl:last-child::before{display:none}
.tlnode{width:56px;height:56px;border-radius:50%;background:var(--fresh);color:#fff;display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.28rem;box-shadow:0 8px 20px -8px rgba(91,154,66,.7);position:relative;z-index:1}
.tl h3{font-size:1.16rem;margin:10px 0 6px}
.tl p{margin:0;font-size:.94rem;color:var(--ink-dim);font-weight:300;line-height:1.62}
@media (max-width:560px){.tl{grid-template-columns:44px 1fr;gap:16px}.tlnode{width:44px;height:44px;font-size:1.05rem}.tl::before{left:21px;top:36px}}

/* editorial thumbs for Learn */
.thumb{aspect-ratio:16/10;border-radius:14px;margin-bottom:4px;position:relative;overflow:hidden;display:grid;place-items:center}
.thumb svg{width:52%;height:52%;fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.t1{background:linear-gradient(135deg,#FFC24D,#F47920)}
.t2{background:linear-gradient(135deg,#8FD06E,#4F8A36)}
.t3{background:linear-gradient(135deg,#FFDCBB,#FF8A2B)}
.t4{background:linear-gradient(135deg,#CFE3BF,#5B9A42)}
.t5{background:linear-gradient(135deg,#FFB877,#C25A0B)}
.t6{background:linear-gradient(135deg,#B7DCA0,#3D7527)}

/* founder block */
.founders{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
@media (max-width:880px){.founders{grid-template-columns:1fr;gap:28px}}
.fphoto{border-radius:20px;aspect-ratio:4/5;background:linear-gradient(150deg,var(--cream-2),var(--cream-3));border:1.5px dashed var(--hairline-hi);display:grid;place-items:center;text-align:center;padding:30px}
.fphoto p{margin:10px 0 0;font-size:.83rem;color:var(--ink-faint);font-weight:300;line-height:1.5;max-width:24ch}
.fphoto svg{width:40px;height:40px;fill:none;stroke:var(--hairline-hi);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin:0 auto}
.people{display:grid;gap:12px;margin:22px 0 0}
.person{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:15px 17px;border-radius:14px;background:var(--paper);border:1.5px solid var(--hairline)}
.pav{width:44px;height:44px;border-radius:50%;background:var(--fresh);color:#fff;display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.05rem}
.person b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.02rem;letter-spacing:-.01em}
.person span{font-size:.84rem;color:var(--ink-dim);font-weight:300}

.values{display:grid;gap:13px;max-width:860px}
.val{padding:20px 22px;border-radius:15px;background:var(--paper);border:1.5px solid var(--hairline);box-shadow:var(--lift);border-left:4px solid var(--vital)}
.val h3{font-size:1.06rem;margin:0 0 5px}
.val p{margin:0;font-size:.91rem;color:var(--ink-dim);font-weight:300;line-height:1.6}

.prose{max-width:62ch}
.prose p{color:var(--ink-dim);font-weight:300;margin:0 0 18px}
.prose p.lead{font-size:var(--step-1);color:var(--ink);font-weight:400}

.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:920px}
@media (max-width:760px){.statrow{grid-template-columns:1fr 1fr}}
.stat{padding:20px 0 0;border-top:3px solid;border-image:var(--fresh) 1}
.stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.03em;line-height:1.15;margin-bottom:4px}
.stat span{font-size:.84rem;color:var(--ink-dim);font-weight:300}
.band-dark .stat span{color:var(--on-char-dim)}

.faq{max-width:860px;display:grid;gap:10px}
details.qa{background:var(--paper);border:1.5px solid var(--hairline);border-radius:13px;box-shadow:var(--lift)}
details.qa summary{cursor:pointer;padding:17px 20px;font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.012em}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";color:var(--vital);font-size:1.35rem;line-height:1;flex:none}
details.qa[open] summary::after{content:"\2212"}
details.qa summary:focus-visible{outline:2.5px solid var(--vital);outline-offset:2px;border-radius:13px}
details.qa .qa-b{padding:0 20px 19px;font-size:.93rem;color:var(--ink-dim);font-weight:300;line-height:1.65}

/* ---------------- footer ---------------- */
footer{padding:48px 0 70px;border-top:1.5px solid var(--hairline);color:var(--ink-faint);font-size:.81rem;font-weight:300;line-height:1.72;background:var(--cream-2)}
footer strong{color:var(--ink-dim);font-weight:700}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;margin-bottom:32px}
@media (max-width:780px){.footgrid{grid-template-columns:1fr 1fr}}
.footgrid h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 12px;font-family:Cinzel,serif;font-weight:600}
.footgrid a{display:block;color:var(--ink-dim);text-decoration:none;margin-bottom:6px}
.footgrid a:hover{color:var(--ember-text)}

/* ---------------- chat + sticky ---------------- */
.chatbtn{position:fixed;right:22px;bottom:var(--fab-bottom,22px);z-index:80;appearance:none;border:0;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 20px 13px 16px;border-radius:99px;background:var(--fresh);color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.92rem;box-shadow:0 10px 30px -8px rgba(91,154,66,.7);transition:transform .16s,bottom .2s}
.chatbtn:hover{transform:translateY(-2px)}
.chatbtn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chatbtn:focus-visible{outline:3px solid var(--tangerine);outline-offset:3px}
.chatpanel{position:fixed;right:22px;bottom:var(--panel-bottom,84px);z-index:80;width:min(360px,calc(100vw - 44px));background:var(--paper);border:1.5px solid var(--hairline);border-radius:18px;box-shadow:var(--lift-2);overflow:hidden;transition:bottom .2s}
.chathead{padding:17px 19px 14px;border-bottom:1px solid var(--hairline)}
.chathead h4{margin:0 0 3px;font-size:1.04rem}
.chathead p{margin:0;font-size:.8rem;color:var(--ink-faint);font-weight:300}
.chatbody{padding:17px 19px 19px;font-size:.89rem;color:var(--ink-dim);font-weight:300;line-height:1.6}
.chatbody .btn{margin-top:14px;padding:12px 22px;font-size:.9rem}

.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;padding:11px 16px;background:var(--cream);border-top:1.5px solid var(--hairline);box-shadow:0 -8px 24px -12px rgba(90,50,10,.3)}
.stickycta .btn{width:100%;padding:14px 20px}
@media (max-width:880px){
  .stickycta.show{display:block}
  /* One place sets the offsets; the button and panel just read them. */
  body.has-sticky{--sticky-h:74px;--fab-bottom:88px;--panel-bottom:150px}
  .chatbtn{right:14px;padding:12px 17px 12px 14px;font-size:.88rem}
  .chatpanel{right:14px}
}

/* ==========================================================================
   Ask Vivo - nonclinical consultation concierge
   ========================================================================== */

.chatwin{
  position:fixed;right:22px;bottom:84px;z-index:95;
  width:min(392px,calc(100vw - 44px));height:min(620px,calc(100vh - 130px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1.5px solid var(--hairline);border-radius:20px;
  box-shadow:var(--lift-2);transition:bottom .2s;
}
.chatwin[hidden]{display:none!important}
.cw-head{padding:15px 17px;border-bottom:1px solid var(--hairline);background:var(--mint);display:flex;gap:12px;align-items:flex-start}
.cw-mark{width:36px;height:36px;border-radius:50%;background:var(--fresh);color:#fff;display:grid;place-items:center;flex:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.9rem}
.cw-head h4{margin:0;font-size1:1rem;font-size:1rem;line-height:1.2}
.cw-head p{margin:2px 0 0;font-size:.74rem;color:var(--ink-dim);font-weight:400}
.cw-x{margin-left:auto;appearance:none;background:none;border:0;cursor:pointer;color:var(--ink-dim);font-size:1.5rem;line-height:1;padding:0 2px}
.cw-x:hover{color:var(--ink)}
.cw-x:focus-visible{outline:2.5px solid var(--vital);outline-offset:2px;border-radius:6px}

.msgs{flex:1;overflow-y:auto;padding:16px 17px 8px;display:flex;flex-direction:column;gap:11px;-webkit-overflow-scrolling:touch}
.msg{max-width:86%;padding:11px 14px;border-radius:15px;font-size:.9rem;line-height:1.55;white-space:pre-line}
.msg.bot{align-self:flex-start;background:var(--cream-2);color:var(--ink);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--fresh);color:#fff;border-bottom-right-radius:5px}
.msg b{font-weight:700}

.cw-notice{align-self:stretch;max-width:100%;background:var(--mint);border:1px solid var(--hairline-g);border-radius:12px;padding:11px 13px;font-size:.78rem;color:var(--ink-dim);line-height:1.5}
.cw-alarm{align-self:stretch;max-width:100%;background:#FFF3E6;border:1.5px solid var(--ember);border-radius:12px;padding:13px 15px;font-size:.86rem;color:var(--ink);line-height:1.55}
:root[data-theme="dark"] .cw-alarm{background:#3A2612}
.cw-alarm b{display:block;margin-bottom:4px;color:var(--ember-text)}
.cw-alarm a{color:var(--ember-text);font-weight:700}
.cw-card{align-self:stretch;max-width:100%;background:var(--paper);border:1.5px solid var(--vital);border-radius:13px;padding:13px 15px;font-size:.85rem;line-height:1.6}
.cw-card h5{margin:0 0 7px;font-size:.83rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf-text);font-family:Karla,sans-serif;font-weight:800}
.cw-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.cw-card dt{color:var(--ink-faint);font-size:.78rem}
.cw-card dd{margin:0;font-weight:600}

.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:var(--cream-2);border-radius:15px;border-bottom-left-radius:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:tdot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes tdot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.typing i{animation:none;opacity:.6}}

.quick{display:flex;flex-wrap:wrap;gap:7px;padding:2px 17px 12px;flex:none}
.quick button{appearance:none;font:inherit;font-size:.82rem;font-weight:600;padding:8px 14px;min-height:38px;border-radius:99px;cursor:pointer;background:var(--paper);color:var(--leaf-text);border:1.5px solid var(--hairline-g)}
.quick button:hover{background:var(--mint);border-color:var(--vital)}
.quick button:focus-visible{outline:2.5px solid var(--vital);outline-offset:2px}
.quick button.act{background:var(--hot);color:#2A1607;border-color:transparent}

.composer{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--hairline);background:var(--cream)}
.composer input{flex:1;min-width:0;font:inherit;font-size:.9rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--hairline);border-radius:99px;padding:11px 16px}
.composer input:focus-visible{outline:2.5px solid var(--vital);outline-offset:1px;border-color:var(--vital)}
.composer button{appearance:none;border:0;cursor:pointer;width:42px;height:42px;flex:none;border-radius:50%;background:var(--hot);display:grid;place-items:center}
.composer button svg{width:19px;height:19px;fill:none;stroke:#2A1607;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.composer button:focus-visible{outline:2.5px solid var(--vital);outline-offset:2px}
.cw-foot{padding:0 14px 11px;font-size:.68rem;color:var(--ink-faint);text-align:center;background:var(--cream);line-height:1.4}

@media (max-width:640px){
  .chatwin{right:0;left:0;bottom:0;width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  body.has-sticky .chatwin{bottom:0}
  body.chat-open{overflow:hidden}
  body.chat-open .stickycta,body.chat-open .chatbtn{display:none!important}
}

/* self-test harness, opened with ?selftest=1 */
.selftest{max-width:1000px;margin:0 auto;padding:28px 26px 70px;font-size:.87rem}
.selftest h2{font-size:1.5rem;margin:0 0 6px}
.selftest table{width:100%;border-collapse:collapse;margin-top:16px}
.selftest th,.selftest td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--hairline);vertical-align:top}
.selftest th{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.selftest .ok{color:var(--leaf-text);font-weight:800}
.selftest .no{color:#B3261E;font-weight:800}
.selftest code{font-size:.82rem;background:var(--cream-2);padding:1px 5px;border-radius:4px}
.selftest .tally{display:inline-block;padding:7px 15px;border-radius:99px;background:var(--fresh);color:#fff;font-weight:800}

/* discreet client-review notice on anything that looks like a lead form */
.mocknote{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 20px;padding:7px 14px;border-radius:99px;
  background:var(--cream-3);border:1px solid var(--hairline-hi);
  font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--ink-dim);
}
.mocknote::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember);flex:none}
.convert .mocknote{margin:0 0 4px}

/* emergency lockdown: only the resources and a way out remain */
.cw-end{align-self:stretch;display:flex;justify-content:center;padding:6px 0 2px}
.cw-endbtn{padding:11px 26px;font-size:.9rem}

/* ---------- chat polish: progress, cards, mobile comfort ---------- */

.cw-card dd a{color:var(--ember-text);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.cw-card h5 svg{width:13px;height:13px;fill:none;stroke:var(--vital);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:-1px;margin-right:5px}
.cw-card-note{margin:10px 0 0;font-size:.75rem;color:var(--ink-faint);line-height:1.5}
.cw-card pre{margin:0;font-size:.72rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-word;background:var(--cream);padding:10px 12px;border-radius:9px;border:1px solid var(--hairline)}

/* the bot bubble gets a little more air and a warmer edge */
.msg.bot{border:1px solid var(--hairline)}
.msg.me{box-shadow:0 4px 12px -6px rgba(91,154,66,.6)}

/* the transcript is what scrolls; the action row is never clipped */
.msgs{min-height:0}
.quick{max-height:none}

@media (max-width:640px){
  .chatwin{padding-bottom:env(safe-area-inset-bottom)}
  .cw-head{padding-top:calc(15px + env(safe-area-inset-top))}
  .msgs{padding:14px 15px 6px}
  .msg{max-width:90%;font-size:.94rem}
  .composer{padding:11px 13px calc(11px + env(safe-area-inset-bottom))}
  .composer input{font-size:1rem}      /* 16px stops iOS zooming on focus */
  .quick{padding:2px 15px 10px;max-height:none}
  .quick button{min-height:42px}
}

/* ---------- form polish: reassurance, errors, review ---------- */
.reassure{margin:12px 0 0!important;font-size:.79rem;color:var(--leaf-text);font-weight:700;letter-spacing:.01em}
.field .hint{font-size:.73rem;color:var(--ink-faint);font-weight:300;line-height:1.4}
.field .err{font-size:.76rem;font-weight:700;color:#B3261E;line-height:1.4}
:root[data-theme="dark"] .field .err{color:#FF8A80}
.field input[aria-invalid="true"]{border-color:#B3261E}
.sent.warn{background:#FFF1E6;border-color:var(--ember)}
:root[data-theme="dark"] .sent.warn{background:#3A2612}
.sent.review{background:var(--paper);border-color:var(--vital)}
.sent.review h4{margin:0 0 10px;font-size:1.02rem}
.sent.review dl{margin:0 0 12px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px}
.sent.review dt{font-size:.76rem;color:var(--ink-faint);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sent.review dd{margin:0;font-weight:600;font-size:.92rem}
.sent.review p{margin:0;font-size:.78rem;color:var(--ink-faint);font-weight:300}
.sent .evt{font-size:.72rem;color:var(--ink-faint);font-family:ui-monospace,Menlo,monospace}
.altcontact{margin:14px 0 0;font-size:.82rem;color:var(--ink-dim);font-weight:300}
.altcontact a{font-weight:700}

/* Anchor the transcript to the bottom the way a real chat does, so a short
   conversation sits just above the actions instead of leaving a void.
   margin-top:auto on the first child rather than justify-content:flex-end,
   which clips the top of an overflowing column in some engines. */
.msgs > *:first-child{margin-top:auto}

/* ---------- the real logo ---------- */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{width:44px;height:44px;flex:none;display:block}
.brand-type{display:flex;flex-direction:column;line-height:1;gap:3px}
.brand-name{
  font-family:Cinzel,Georgia,serif;font-weight:600;font-size:1.32rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ember-text);
}
.brand-sub{
  font-size:.58rem;font-weight:700;letter-spacing:.235em;text-transform:uppercase;
  color:var(--ink-dim);white-space:nowrap;
}
@media (max-width:1040px){
  .brand-mark{width:38px;height:38px}
  .brand-name{font-size:1.16rem}
  .brand-sub{font-size:.6rem;letter-spacing:.2em}
}
/* Below this the subline would render around 8px, too small to read and too
   small to be worth the space. The emblem plus wordmark is a legitimate
   compact lockup; the full name still appears in the footer. */
@media (max-width:430px){
  .brand-sub{display:none}
  .brand-name{font-size:1.24rem;letter-spacing:.08em}
}
.footlogo{width:min(220px,60%);height:auto;margin:0 0 16px}
img.cw-mark{border-radius:50%;background:none;width:36px;height:36px;flex:none;padding:0}

/* text is the preferred contact route; mark it so in the chat card */
.cw-pref{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--fresh);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}


/* the existing ember glow would fight the strand, so it steps back */
.band-dark.has-helix::after{opacity:.3}
@media (max-width:720px){
  .helix-canvas{opacity:.72}
  .helix-scrim{background:
    radial-gradient(140% 80% at 50% 50%, rgba(36,25,15,.9) 0%, rgba(36,25,15,.75) 45%, rgba(36,25,15,.45) 100%);}
}

/* ==========================================================================
   Helix hero.

   Vivo's own photographic strand carries the hero. No wireframe, no redraw.
   The tokens are re-scoped rather than every component restyled, so the
   existing hero, trust strip and questionnaire all invert with one block.
   ========================================================================== */
.hero.hero-dark{
  --ink:#FFF6EC;
  --ink-dim:#E0CDB6;
  --ink-faint:#A89179;
  --hairline:#4A3626;
  --hairline-g:#4E5F3C;
  background:#150E08;
  /* Re-scoping --ink alone is not enough: body already resolved `color` to a
     concrete value, and colour inherits computed rather than as a variable
     reference, so the subtree needs the declaration repeated here. */
  color:var(--ink);
}
.hero.hero-dark .opt,
.hero.hero-dark .verdict,
.hero.hero-dark .convert,
.hero.hero-dark .ten,
.hero.hero-dark .startpoint{color:var(--ink)}
.hero-dark .hero-art{
  background-position:34% 46%;
  transform:scale(1.08);
  transform-origin:34% 46%;
  will-change:transform;
  /* the source is a warm image on near-black already; this deepens the
     blacks so the copper reads hotter against them */
  filter:contrast(1.2) saturate(1.12) brightness(.93);
}
/* Localised darkening only, so the strand is never washed out as a whole. */
.hero-dark .hero-scrim{
  background:
    linear-gradient(100deg,
      rgba(10,6,3,.96) 0%,
      rgba(10,6,3,.93) 26%,
      rgba(12,7,4,.74) 44%,
      rgba(14,8,4,.30) 62%,
      rgba(16,9,5,0) 82%),
    radial-gradient(120% 75% at 50% 108%, rgba(8,5,2,.85) 0%, rgba(8,5,2,0) 60%);
}
.hero-motes{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;opacity:.85}
.hero-dark .hero-inner{z-index:1}
.hero-dark .kicker .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(255,194,77,.18)}
.hero-dark .hero-q em{background:linear-gradient(118deg,#FFD59A 0%,#FF9C3D 55%,#F47920 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-dark .hero-q{text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero-dark .hero-sub,.hero-dark .kicker span{text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero-dark .trust{border-top-color:rgba(255,214,158,.22)}
.hero-dark .trust svg{stroke:var(--gold)}
.hero-dark .trust div b{color:#FFF6EC!important}

/* Cards stay light so they lift off the strand. Re-scope the tokens inside
   them, otherwise the inverted hero palette would put pale text on white. */
.hero-dark .opt,.hero-dark .verdict,.hero-dark .convert,.hero-dark .ten,.hero-dark .startpoint{
  --ink:#2A1D12; --ink-dim:#74604D; --ink-faint:#A4907C; --hairline:#F2DFC9;
  background:var(--paper);
  border-color:#EADAC6;
  box-shadow:0 3px 8px -3px rgba(0,0,0,.5),0 20px 44px -18px rgba(0,0,0,.65);
}
.hero-dark .rail{background:rgba(255,214,158,.20)}
.hero-dark .qmeta{color:#C9B097}
.hero-dark .backbtn{color:#D9C4AE}
.hero-dark .backbtn:hover{color:var(--gold)}
.hero-dark details.why{background:rgba(24,42,18,.55);border-color:rgba(120,170,96,.38)}
.hero-dark details.why summary{color:#B7DCA0}
.hero-dark details.why .why-b{color:#D9CDBC}
.hero-dark .sidestep{color:#D9C4AE}
.hero-dark .sidestep button{color:var(--gold)}

@media (max-width:880px){
  .hero-dark .hero-art{background-position:46% 40%}
  .hero-dark .hero-scrim{
    background:
      linear-gradient(180deg, rgba(10,6,3,.55) 0%, rgba(10,6,3,.28) 18%, rgba(10,6,3,.82) 46%, rgba(12,7,4,.96) 62%, rgba(12,7,4,.98) 100%);
  }
  .hero-motes{opacity:.6}
}

/* ---------- make the first action unmissable ----------
   The client reported that on a phone it was not obvious the hero cards were
   the thing to tap. They looked like six facts. This names the action, marks
   the position in the flow, and gives each card a press affordance. */
.startcue{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;max-width:660px;
}
.startcue-step{
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding:5px 11px;border-radius:99px;
  border:1px solid rgba(255,194,77,.42);background:rgba(255,194,77,.10);
  white-space:nowrap;
}
.startcue-do{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.95rem;font-weight:700;color:var(--ink);
}
.startcue-do svg{
  width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  animation:cue-nudge 2.6s ease-in-out infinite;
}
@keyframes cue-nudge{0%,68%,100%{transform:translateY(0)}80%{transform:translateY(3px)}}

/* chevron: a card should look pressable */
.opt .go{
  position:absolute;right:13px;bottom:12px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--cream-2);
  transition:background .18s,transform .18s;
}
.opt .go svg{width:12px;height:12px;fill:none;stroke:var(--ember);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.opt:hover .go{background:var(--hot);transform:translateX(2px)}
.opt:hover .go svg{stroke:#2A1607}
.opt[aria-pressed="true"] .go{opacity:0}
.opts.two .opt .go,.opts.path .opt .go{bottom:14px}

@media (prefers-reduced-motion: reduce){
  .startcue-do svg{animation:none}
}
@media (max-width:640px){
  /* on a phone the instruction carries the most weight, so it gets its own line */
  .startcue{gap:9px;margin-bottom:12px}
  .startcue-do{font-size:1rem}
  .opt .go{right:12px;bottom:11px;width:26px;height:26px;background:var(--hot)}
  .opt .go svg{stroke:#2A1607;width:13px;height:13px}
}

/* the chevron sits bottom-right, so the last line of the description must
   not run under it */
.opt-d{padding-right:30px}
@media (max-width:640px){.opt-d{padding-right:36px}}

/* ---------- Learn articles ------------------------------------------- */
/* A .card that is also an <a>. The card already owns the hover lift, so
   this only has to undo the link defaults and add the read affordance.   */
.cardlink{text-decoration:none;color:inherit}
.cardlink h3{color:var(--ink)}
.card-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;
  font-size:.83rem;font-weight:700;letter-spacing:.01em;color:var(--ember-text)}
.card-go .go-a{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.cardlink:hover .go-a{transform:translateX(4px)}
.cardlink:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

.art-head .eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumb{color:var(--ember-text);text-decoration:none;border-bottom:1.5px solid transparent}
.crumb:hover{border-bottom-color:currentColor}
.art-lede{max-width:62ch}
.art-meta{display:flex;align-items:center;gap:12px;margin:18px 0 0;
  font-size:.84rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.thumb-chip{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.thumb-chip svg{width:20px;height:20px;fill:none;stroke:rgba(255,255,255,.95);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.art-grid{display:grid;grid-template-columns:225px minmax(0,1fr);gap:54px;align-items:start}
.art-toc{position:sticky;top:96px}
.art-toc p{margin:0 0 12px;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim)}
.art-toc ol{list-style:none;margin:0;padding:0;counter-reset:none}
.art-toc li{margin:0 0 2px}
.art-toc a{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:baseline;
  padding:7px 9px;border-radius:9px;text-decoration:none;color:var(--ink-dim);
  font-size:.86rem;font-weight:400;line-height:1.4;transition:background .15s,color .15s}
.art-toc a span{font-weight:800;color:var(--ember-text);font-size:.78rem}
.art-toc a:hover{background:var(--cream-3);color:var(--ink)}

.art{max-width:68ch}
.art-pt{display:grid;grid-template-columns:52px minmax(0,1fr);gap:22px;
  padding:0 0 34px;margin:0 0 34px;border-bottom:1.5px solid var(--hairline)}
.art-pt:last-of-type{border-bottom:none}
.art-n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--hot);color:#fff;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:1.2rem;box-shadow:0 8px 20px -9px rgba(244,121,32,.75)}
.art-c h2{font-size:1.34rem;line-height:1.25;margin:9px 0 12px;max-width:30ch}
.art-c p{margin:0 0 13px;color:var(--ink-dim);font-weight:300;line-height:1.72}
.art-take{margin:16px 0 0 !important;padding:13px 17px;border-radius:12px;
  background:var(--cream-3);border-left:3px solid var(--vital);
  color:var(--ink) !important;font-weight:600 !important;line-height:1.55 !important}
.art-src{margin:6px 0 26px;padding-top:22px;border-top:1.5px solid var(--hairline);
  font-size:.83rem;color:var(--ink-dim);font-weight:300;line-height:1.65}

@media (max-width:980px){
  .art-grid{grid-template-columns:1fr;gap:30px}
  .art-toc{position:static;border:1.5px solid var(--hairline);border-radius:15px;
    padding:18px 16px;background:var(--paper)}
  .art-toc ol{columns:2;column-gap:18px}
}
@media (max-width:640px){
  .art-toc ol{columns:1}
  .art-pt{grid-template-columns:40px minmax(0,1fr);gap:15px;padding-bottom:28px;margin-bottom:28px}
  .art-n{width:40px;height:40px;font-size:1.02rem}
  .art-c h2{font-size:1.18rem;margin-top:5px}
}

/* article links offered inside the chat */
.cw-lib ul.lib{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cw-lib .lib li{margin:0}
.cw-lib .lib a{display:block;padding:9px 11px;border-radius:10px;background:var(--cream);
  border:1px solid var(--hairline);text-decoration:none;color:var(--ink);
  font-weight:600;line-height:1.4;font-size:.83rem;transition:border-color .15s,background .15s}
.cw-lib .lib a:hover{background:var(--cream-2);border-color:var(--hairline-hi)}
.cw-lib .lib-tag{display:block;font-size:.68rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--leaf-text);margin-bottom:3px}

/* ---------- dark header ----------------------------------------------
   The emblem is drawn as white filaments over a near-black disc: it was
   authored for a dark ground. On the cream bar that disc read as a smudge
   pasted onto the page and the filaments had nothing to sit against, which
   is worst on a phone where the mark is the only branding on screen.
   Putting the bar on --char, the same near-black the dark bands already
   use, costs no new colour and lets the mark do what it was drawn to do.

   Colours below are literal, not token references, because this surface is
   dark in BOTH schemes: a token would flip underneath it in dark mode and
   put light text on light again.                                         */
.topbar{background:var(--char);border-bottom:1px solid rgba(255,246,236,.11)}
@supports (backdrop-filter:blur(1px)){
  .topbar{background:color-mix(in srgb, var(--char) 88%, transparent);
          backdrop-filter:blur(14px) saturate(1.25)}
}
.topbar .brand-name{color:#FFB877}
.topbar .brand-sub{color:#C0A98E}
.topbar .navlinks a{color:#D9C4AE}
.topbar .navlinks a:hover{color:#FFC24D}
.topbar .navlinks a[aria-current="page"]{color:#FFF6EC;border-bottom-color:var(--ember)}
/* `.topbar .navlinks a` ties with `.navlinks a.navcta` on specificity and is
   declared later, so without this the chip's dark label would be overwritten
   by the light link colour and land on its own orange gradient. */
.topbar .navlinks a.navcta{color:#2A1607}

/* The founding story, told without naming anyone. This replaced a two-column
   block with a portrait slot and two named cards: at the founders' request the
   page identifies nobody, so there is no face to put beside the story and no
   half-empty column to justify. One statement, full measure. */
.origin{max-width:64ch}
.origin .sec-p{margin:0 0 14px}
.origin .rowend{margin-top:22px}

/* ==========================================================================
   Vivo Optimization Score
   ========================================================================== */

/* ---------- quick-fire rating answers ----------
   One column of rows, each with a five-pip meter, so the answer's position on
   the scale is visible before the words are read. That is what lets twelve
   of these go by in about a minute. */
.opts.scale{grid-template-columns:1fr;gap:9px}
.opts.scale .opt{flex-direction:row;align-items:center;gap:15px;min-height:54px;padding:12px 58px 12px 16px}
.opts.scale .opt-t{font-size:1rem;padding-right:0}
.opts.scale .opt .go,
.opts.scale .opt .tick{top:50%;bottom:auto;right:14px;transform:translateY(-50%)}
.opts.scale .opt .tick{transform:translateY(-50%) scale(.6)}
.opts.scale .opt[aria-pressed="true"] .tick{transform:translateY(-50%)}
.opts.scale .opt:hover .go{transform:translateY(-50%) translateX(2px)}
.meter{display:flex;gap:4px;flex:none}
.meter i{width:7px;height:18px;border-radius:3px;background:var(--hairline)}
.meter i.on{background:var(--hot)}
.opt[aria-pressed="true"] .meter i.on{background:var(--fresh)}
@media (max-width:640px){
  .opts.scale .opt{min-height:52px;padding:11px 54px 11px 14px;gap:12px}
  .meter i{width:6px;height:16px}
}

/* ---------- Optimization IQ ----------
   The first answer counts, so the options stop taking taps once one is in. */
.opts.iq.locked .opt{pointer-events:none;cursor:default}
.opts.iq.locked .opt:not(.right):not(.wrong){opacity:.55}
.opts.iq.locked .opt.right{border-color:var(--vital);background:var(--mint)}
.opts.iq.locked .opt.right .tick{opacity:1;transform:none}
.opts.iq.locked .opt.wrong{border-color:var(--tangerine)}
.opts.iq.locked .opt.wrong .tick{opacity:0}
.opts.iq.locked .opt .go{opacity:0}
.iq-tally{margin:12px 0 0!important;padding-top:11px;border-top:1px dashed var(--hairline);
  font-size:.8rem!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)!important}
.iq-tally b{color:var(--leaf-text);font-variant-numeric:tabular-nums}

/* ---------- the reveal ---------- */
.scorecard{max-width:660px;margin:0 0 40px;padding:26px 27px 24px;border-radius:20px;
  background:var(--paper);border:1.5px solid var(--hairline);box-shadow:var(--lift-2);position:relative;overflow:hidden}
.scorecard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--hot)}
.score-eyebrow{margin:0 0 14px;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-text)}
.score-hero{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.ring{position:relative;width:136px;height:136px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring-track{fill:none;stroke:var(--cream-3);stroke-width:11}
.ring-fill{fill:none;stroke:url(#hotgrad);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1)}
.ring-label{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:44px}
.score-num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.7rem;line-height:1;
  letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.score-of{font-size:.9rem;font-weight:700;color:var(--ink-faint);margin-left:2px}
/* A perfect score is the only three-digit one, and "100/100" at full size is
   106px wide inside a 111px clear circle, so the glyph tops meet the stroke. */
.ring[data-digits="3"] .ring-label{padding-top:48px}
.ring[data-digits="3"] .score-num{font-size:2.15rem}
.ring[data-digits="3"] .score-of{font-size:.78rem}
.band{margin:0 0 6px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.45rem;
  line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.band-msg{margin:0;font-size:.95rem;line-height:1.58;color:var(--ink-dim);font-weight:300}
.score-cta{margin-top:14px;display:inline-flex;align-items:center;gap:8px}
.score-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#consult{scroll-margin-top:90px}
@media (max-width:1040px){#consult{scroll-margin-top:132px}}
#consult h3:focus{outline:none}
@media (max-width:640px){.score-cta{width:100%;justify-content:center}}
.score-note{margin:18px 0 20px;padding:11px 14px;border-radius:11px;background:var(--cream);
  border:1px solid var(--hairline);font-size:.8rem;line-height:1.55;color:var(--ink-dim)}

.cats{display:grid;gap:15px}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.cat-name{font-weight:700;font-size:.95rem;color:var(--ink)}
.cat-score{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.05rem;
  color:var(--ink);font-variant-numeric:tabular-nums}
.cat-bar{height:9px;border-radius:99px;background:var(--cream-3);overflow:hidden}
.cat-fill{height:100%;width:0;border-radius:99px;background:var(--fresh);
  transition:width 1s cubic-bezier(.2,.7,.3,1)}
.cat-basis{margin:5px 0 0;font-size:.78rem;color:var(--ink-faint);line-height:1.4}

.score-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.score-mini{padding:15px 16px;border-radius:14px;background:var(--cream);border:1.5px solid var(--hairline)}
.score-mini.opp{border-color:var(--tangerine);background:#FFF6EC}
.score-mini.iq{border-color:var(--hairline-g);background:var(--mint)}
.mini-eyebrow{margin:0 0 5px;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.mini-h{margin:0 0 6px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.1rem;line-height:1.2;color:var(--ink)}
.mini-h span{font-family:Karla,sans-serif;font-weight:700;font-size:.8rem;color:var(--ink-dim);margin-left:4px}
.mini-b{margin:0;font-size:.84rem;line-height:1.52;color:var(--ink-dim);font-weight:300}
.mini-link{display:inline-block;margin-top:9px;font-size:.83rem;font-weight:700;color:var(--ember-text);
  text-decoration:none;border-bottom:1.5px solid currentColor}

/* Standing fine print for everyone: the privacy promise and the support note.
   Set quietly, under a hairline, so it reads as always-there information and
   not as a response to how someone answered. */
.score-fine{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline);display:grid;gap:8px}
.score-fine .privacy-note{margin:0}
.support-note{margin:0;font-size:.8rem;line-height:1.5;color:var(--ink-dim)}
.support-note a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.privacy-note{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-faint)}
.privacy-note svg{flex:none;width:15px;height:15px;margin-top:2px;fill:none;stroke:var(--vital);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.res-next{margin-top:6px}

@media (max-width:640px){
  .scorecard{padding:22px 18px 20px}
  .score-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .score-cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .ring-fill,.cat-fill{transition:none}
}

/* On the dark hero the scorecard stays light, like the other cards, so its
   tokens are re-scoped. `color` has to be repeated: it inherits as a computed
   value, not as a variable reference, so re-scoping --ink alone would leave
   the hero's pale text on a white card. */
.hero-dark .scorecard{
  --ink:#2A1D12; --ink-dim:#74604D; --ink-faint:#A4907C; --hairline:#F2DFC9; --hairline-g:#CFE3BF;
  color:var(--ink);
  background:var(--paper);
  border-color:#EADAC6;
  box-shadow:0 3px 8px -3px rgba(0,0,0,.5),0 20px 44px -18px rgba(0,0,0,.65);
}
.hero-dark .res-next{color:var(--ink)}

/* ==========================================================================
   Progress silhouette, and the shortcut for people who are already sold
   ========================================================================== */

/* The figure fills from the feet up as questions are answered. The fill is a
   count of answered steps, never an answer or a score. */
.prog{display:flex;align-items:center;gap:16px;max-width:660px;margin:0 0 18px}
.sil{width:74px;height:185px;flex:none;overflow:visible}
.sil-outline{fill:none;stroke:var(--hairline-hi);stroke-width:3.5;stroke-linejoin:round}
.sil-fill{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);
  transition:transform .75s cubic-bezier(.2,.7,.3,1)}
.prog-body{flex:1;min-width:0;display:grid;gap:4px}
.prog-label{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.prog-count{margin:0;font-size:.92rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.prog-bar{height:5px;border-radius:99px;background:var(--hairline);overflow:hidden;max-width:320px}
.prog-bar-fill{height:100%;border-radius:99px;background:var(--hot);
  transition:width .75s cubic-bezier(.2,.7,.3,1)}

/* the finish: a brief lift, then the results replace the panel */
.prog.done .sil{animation:sil-done .9s cubic-bezier(.2,.8,.3,1)}
.prog.done .prog-count{color:var(--leaf-text)}
@keyframes sil-done{0%{transform:none}35%{transform:translateY(-6px) scale(1.04)}100%{transform:none}}

@media (max-width:640px){
  .prog{gap:13px;margin-bottom:14px}
  .sil{width:52px;height:130px}
  .prog-count{font-size:.88rem}
}
@media (prefers-reduced-motion: reduce){
  .sil-fill,.prog-bar-fill{transition:none}
  .prog.done .sil{animation:none}
}

/* On the dark hero the outline needs its own colour: the card tokens do not
   reach it, because the figure sits on the strand, not on a card. */
.hero-dark .sil-outline{stroke:rgba(255,214,158,.38)}
.hero-dark .prog-label{color:#C9B097}
.hero-dark .prog-count{color:#FFF6EC}
.hero-dark .prog-bar{background:rgba(255,214,158,.20)}
.hero-dark .prog.done .prog-count{color:#B7DCA0}

/* the shortcut in the hero, beside the cue to start the quiz */
.herojump{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;max-width:660px}
.herojump-or{font-size:.9rem;color:var(--ink-dim)}
.hero-dark .herojump-or{color:#D9C4AE}
/* Solid green, matching the Ask Vivo button, at Vivo's request. */
.btn-ready{background:var(--fresh);color:#fff!important;border:0;font-weight:700;white-space:nowrap;
  box-shadow:0 10px 30px -8px rgba(91,154,66,.7)}
.btn-ready:hover{filter:saturate(1.08);transform:translateY(-1px)}
.btn-ready:active{transform:none}
@media (prefers-reduced-motion: reduce){.btn-ready:hover{transform:none}}
@media (max-width:640px){
  /* Stop short of the floating chat button so it can never sit on top of this
     one, at any scroll position. The label wraps rather than being clipped. */
  .herojump{gap:9px}
  .btn-ready{width:auto;max-width:calc(100% - 104px);justify-content:center;
    white-space:normal;text-align:center;line-height:1.25}
}

/* ---------- the JotForm embed on the consultation page ----------
   The form itself is Vivo's HIPAA-enabled JotForm. The site frames it and
   says what it is; it never collects or forwards any of the answers. */
.formwrap{max-width:720px;display:grid;gap:14px}
.formnote{margin:0;color:var(--ink-dim);font-weight:300;line-height:1.6;max-width:62ch}
.formnote b{color:var(--ink);font-weight:700}
/* Height measured from the form itself: 1170px at desktop width, 1172px at
   375px, after the state field was added. The margin absorbs the error
   messages the form shows when a required field is missed. */
.jotform{width:1px;min-width:100%;min-height:1280px;border:1.5px solid var(--hairline);border-radius:18px;
  background:transparent;box-shadow:var(--lift);display:block}
.formfall{margin:0;font-size:.86rem;color:var(--ink-faint)}
.formfall a{color:var(--ember-text);font-weight:700}
@media (max-width:640px){.jotform{min-height:1300px;border-radius:14px}}

/* the results screen ends with the invitation; the form itself lives on
   /consultation/, so this is a card and a link, never a field */
.convert-cta{max-width:660px;padding:24px 26px;border-radius:18px;background:var(--paper);
  border:1.5px solid var(--hairline);box-shadow:var(--lift-2);position:relative;overflow:hidden;display:grid;gap:10px}
.convert-cta::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--hot)}
.convert-cta h3{font-size:var(--step-1);margin:4px 0 0;max-width:26ch}
.convert-cta p{margin:0;color:var(--ink-dim);font-weight:300;font-size:.95rem;max-width:52ch}
.hero-dark .convert-cta{--ink:#2A1D12;--ink-dim:#74604D;--hairline:#F2DFC9;color:var(--ink);
  background:var(--paper);border-color:#EADAC6;
  box-shadow:0 3px 8px -3px rgba(0,0,0,.5),0 20px 44px -18px rgba(0,0,0,.65)}

/* Vivo's legal text, reproduced verbatim from their WordPress site. Plain
   long-form reading: one column, generous line height, nothing decorative. */
.legal{max-width:760px;color:var(--ink)}
.legal p,.legal li{font-size:16px;line-height:1.72;margin:0 0 14px}
.legal h3{font-size:19px;line-height:1.3;margin:30px 0 10px}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px}
.legal li{margin:0 0 8px}
.legal hr{border:0;border-top:1.5px solid var(--hairline);margin:26px 0}
.legal strong{font-weight:700}

/* The one action the chat offers: open Vivo's own request form. */
.cw-go{display:inline-block;background:var(--fresh);color:#0b1f14;font-weight:700;
  text-decoration:none;padding:11px 18px;border-radius:999px;line-height:1}
.cw-go:hover{filter:brightness(1.06)}

/* The intake shown in place after the quiz. */
.quiz-intake{margin-top:36px;scroll-margin-top:130px}
.quiz-intake .eyebrow{margin:0}

/* ==========================================================================
   Vivo Optimization Score: intro, six questions, profile (2026-09-17)
   ========================================================================== */
.introgo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px;max-width:660px}
.btn-start{display:inline-flex;align-items:center;gap:10px;font-size:1.08rem;padding:17px 32px}
.btn-start svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.introtime{margin:0;font-size:.92rem;font-weight:600;color:var(--ink-dim)}
.introareas{max-width:660px;margin:0 0 18px}
.introareas-h{margin:0 0 8px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.introareas .chips{margin:0}
.introareas .chip{background:rgba(109,184,74,.16);color:var(--ink);border:1px solid var(--hairline-g)}
.introskip{margin:0;max-width:660px;font-size:.92rem;color:var(--ink-dim)}
.introskip a,.sidestep a{color:var(--ember-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hero-dark .introtime{color:#E0CDB6}
.hero-dark .introareas-h{color:#C9B097}
.hero-dark .introareas .chip{background:rgba(109,184,74,.18);color:#EAF5E2;border-color:rgba(120,170,96,.45)}
.hero-dark .introskip{color:#D9C4AE;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-dark .introskip a,.hero-dark .sidestep a{color:var(--gold)}
@media (max-width:640px){
  /* full width, and clear of the floating Ask Vivo button below it */
  .btn-start{width:100%;justify-content:center}
  .introgo{gap:8px}
}
[data-focus]:focus{outline:none}
[data-focus]:focus-visible{outline:2.5px solid var(--tangerine);outline-offset:4px;border-radius:6px}

/* progress: six pips */
.prog-pips .pips{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:4px 0 0;padding:0;max-width:340px}
.pips li{height:7px;border-radius:99px;background:var(--hairline);transition:background .35s,transform .35s}
.pips li.on{background:var(--hot)}
.pips li.now{box-shadow:0 0 0 2px var(--tangerine) inset}
.prog-pips.done .pips li{background:var(--fresh)}
.hero-dark .pips li{background:rgba(255,214,158,.20)}
.hero-dark .pips li.on{background:var(--hot)}
.hero-dark .prog-pips.done .pips li{background:var(--fresh)}
@media (prefers-reduced-motion: reduce){.pips li{transition:none}}

/* question 3: four steps, each with a meter */
.opts.impact .meter i{width:9px}
/* question 5: choose all that apply */
.choose-all{font-weight:700!important;color:var(--ink)!important}
.hero-dark .choose-all{color:#FFF6EC!important}
.opts.multi .opt{padding-right:46px}
.opts.multi .opt .tick{opacity:1;transform:none;border-radius:6px;background:transparent;border:1.5px solid var(--hairline-hi)}
.opts.multi .opt .tick svg{opacity:0}
.opts.multi .opt[aria-pressed="true"] .tick{background:var(--vital);border-color:var(--vital)}
.opts.multi .opt[aria-pressed="true"] .tick svg{opacity:1}
.multi-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 0;max-width:660px}
.multi-go .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.multi-count{font-size:.9rem;font-weight:600;color:var(--ink-dim)}
.hero-dark .multi-count{color:#E0CDB6}
/* ends before the floating Ask Vivo button, which starts 134px from the right */
@media (max-width:640px){.multi-go .btn{width:calc(100% - 140px)}}

/* the profile */
.profile-h{font-size:var(--step-2);line-height:1.1;margin:0 0 10px;max-width:22ch}
.profile-lead{margin:0 0 4px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.18rem;line-height:1.3;color:var(--ink)}
.profile .score-note{margin:14px 0 14px}
.profile-p{margin:0 0 12px;color:var(--ink-dim);font-weight:300;line-height:1.6;max-width:58ch}
.cats-lead{margin:22px 0 10px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.profile .cats{margin-top:0}
.cat-level{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.cat.is-theme .cat-name{color:var(--ember-text)}
.cat.is-theme .cat-level{color:var(--ember-text)}
.profile .cat-fill{background:var(--hot);opacity:.42}
.cat.is-theme .cat-fill{opacity:1}
.cat-key{margin:16px 0 12px;font-size:.84rem;line-height:1.55;color:var(--ink-dim)}
.cat-key b{color:var(--ink)}
details.told{margin:6px 0 0;border:1.5px solid var(--hairline);border-radius:12px;padding:10px 14px}
details.told summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--ink)}
details.told dl{margin:10px 0 2px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.86rem}
details.told dt{font-weight:700;color:var(--ink-faint)}
details.told dd{margin:0;color:var(--ink)}
@media (max-width:460px){details.told dl{grid-template-columns:1fr}details.told dd{margin-bottom:6px}}
.convert-cta .cta-fine{font-size:.82rem;color:var(--ink-faint)}
.hero-dark .convert-cta{--ink-faint:#A4907C}
.resmore{max-width:660px;margin-top:34px}
.resmore .eyebrow{margin-bottom:2px}
.resmore .mini-link{font-size:1rem;margin-top:4px}
.hero-dark .resmore .mini-link{color:var(--gold)}