/* VitalX Wellness — "Deeper"
   Warm, photo-led, one idea per screen. rem sizing follows the reader's text size
   (iOS/iPadOS Text Size via -apple-system-body). Container queries in em simplify layouts
   as text grows. Colour follows the device, and after 9 PM the site switches to a
   candle-warm night reading palette (the reader can keep it bright). */

:root{
  --bg:#f7f4ee; --paper:#fffdf9; --linen:#eee8dd; --line:#d8d0c1; --line-soft:#e7e1d6;
  --text:#24272b; --muted:#555a60; --accent:#76633f; --gold:#c6b891; --on-gold:#1e2124;
  --ink:#1e2124; --on-ink:#ece7dc; --on-ink-muted:#b2ada3; --signal:#8fb3ad;
  --shade:rgba(247,244,238,.95); --glass:rgba(24,22,20,.58);
  --img-filter:none; --shadow:0 1.4rem 3rem -1.8rem rgba(30,33,36,.45);
  --f-display:"Jost","Avenir Next","Century Gothic",system-ui,sans-serif;
  --f-accent:"Cormorant Garamond","Cormorant",Georgia,serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --max:76rem; --gut:clamp(min(1.1rem,5vw),4vw,3rem); --r:.45rem;
  color-scheme:light;
}
/* evening: a warmer paper */
@media (prefers-color-scheme:light){ :root[data-time="evening"]{ --bg:#f5efe5; --paper:#fdf8f0; --linen:#ece3d4; } }
/* night palette: device dark mode, or after 9 PM unless the reader keeps it bright */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#171614; --paper:#201e1b; --linen:#27241f; --line:#3d3934; --line-soft:#2d2a26;
    --text:#ede4d3; --muted:#bcb3a3; --accent:#d8c496; --gold:#cdbf97; --on-gold:#171614;
    --ink:#0f0f10; --on-ink:#ede4d3; --on-ink-muted:#a9a295;
    --shade:rgba(23,22,20,.93); --glass:rgba(12,11,10,.62);
    --img-filter:brightness(.84) contrast(1.03) sepia(.06); --shadow:0 1.4rem 3rem -1.8rem rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-time="night"]:not(.keep-bright){
  --bg:#171614; --paper:#201e1b; --linen:#27241f; --line:#3d3934; --line-soft:#2d2a26;
  --text:#ede4d3; --muted:#bcb3a3; --accent:#d8c496; --gold:#cdbf97; --on-gold:#171614;
  --ink:#0f0f10; --on-ink:#ede4d3; --on-ink-muted:#a9a295;
  --shade:rgba(23,22,20,.93); --glass:rgba(12,11,10,.62);
  --img-filter:brightness(.8) contrast(1.03) sepia(.1); --shadow:0 1.4rem 3rem -1.8rem rgba(0,0,0,.8);
  color-scheme:dark;
}
@supports (font:-apple-system-body) and (-webkit-touch-callout:none){ html{font:-apple-system-body} }
html{font-family:var(--f-body);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5.5rem}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;transition:background-color .6s,color .6s}
img{max-width:100%;height:auto;display:block;filter:var(--img-filter)}
a{color:inherit}
p,ul,ol,figure,dl,dd,h1,h2,h3,h4{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:350;letter-spacing:-.012em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.5rem + 3.4vw,4.8rem)}
h2{font-size:clamp(2rem,1.4rem + 2vw,3.2rem)}
h3{font-size:1.4rem;font-weight:400;line-height:1.2}
em.a{font-family:var(--f-accent);font-style:italic;font-weight:500;color:var(--accent);letter-spacing:0;font-size:1.07em}
.eyebrow{font-family:var(--f-display);font-weight:500;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--f-mono);font-size:.85rem;letter-spacing:.04em}
.lead{font-size:1.2rem;line-height:1.55;color:var(--muted);max-width:34em;text-wrap:pretty}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:50rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999rem;top:.5rem;background:var(--text);color:var(--bg);padding:.8rem 1.2rem;z-index:100;border-radius:var(--r)}
.skip:focus{left:1rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
main,footer{container-type:inline-size}
/* never wider than the screen, even at very large text sizes */
h1,h2,h3,h4{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.top>*,.labteaser>*,.proof>*,.duo>*,.tiers>*,.lanes>*,.lane>*,.contact>*,.doc>*,.why>li,.acc,.acc details,.card,.tier,.exp,.head,.card-glass,.foot__grid>*{min-width:0}
.crumbs li{overflow-wrap:anywhere}
.top__copy,.card-glass,.lane,.exp,.tier,.card,.prose,.acc__body,.head,.doc__copy,.step,.lanes,.tiers,.duo,.contact,.proof,.labteaser,.meter,.form,.nf,.people,.person{grid-template-columns:minmax(0,1fr)}
.step>.wrap,.prose>*,.acc__body>*,.exp>*,.card>*,.tier>*{min-width:0}
.labteaser__list li{flex-wrap:wrap}
.labteaser__list li>span{min-width:0}
.card-glass{padding:clamp(min(1.3rem,5vw),1rem + 1.2vw,2.1rem)}
.person b,.card-glass .depth b{overflow-wrap:anywhere}
.acc,.acc details,.qa{grid-template-columns:minmax(0,1fr)}
.btn{max-width:100%;overflow-wrap:anywhere}
.chip{max-width:100%;overflow-wrap:anywhere}
.term{max-width:100%;overflow-wrap:anywhere;text-align:inherit}
.prose li,.qa b,.qa p{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
@container (max-width:22em){ .btn{padding-inline:1em} }
@container (max-width:17em){ .menu-btn .menu-btn__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3.2rem;padding:.8em 1.5em;border-radius:99rem;border:1px solid transparent;font-family:var(--f-display);font-weight:500;font-size:1.02rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .2s,color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;text-align:center}
.btn:active{transform:scale(.96)}
.btn--solid{background:var(--text);color:var(--bg)}
.btn--solid:hover{box-shadow:var(--shadow)}
.btn--gold{background:var(--gold);color:var(--on-gold)}
.btn--gold:hover{box-shadow:var(--shadow)}
.btn--line{border-color:currentColor;background:transparent;color:inherit}
.btn--line:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--ghost{border-color:rgba(237,228,211,.5);color:#f4ecdd;background:transparent}
.btn--ghost:hover{background:#f4ecdd;color:#1e2124}
.link{font-family:var(--f-display);font-weight:500;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.35em;min-height:2.6rem}
.link:hover{text-decoration:underline;text-underline-offset:.3em}
.actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- header / menu / dock ---------- */
.demo{background:var(--gold);color:var(--on-gold);font-family:var(--f-display);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:.4rem var(--gut)}
.hdr{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);container-type:inline-size;padding-top:env(safe-area-inset-top,0px);transition:background-color .6s}
.hdr__in{display:flex;align-items:center;gap:1.2rem;min-height:4.4rem}
.logo{margin-right:auto;display:block;flex:none}
.logo img{height:min(2.6rem,46px);width:auto;filter:none}
.logo .on-dark{display:none}
@media (prefers-color-scheme:dark){ .logo .on-light{display:none} .logo .on-dark{display:block} }
:root[data-time="night"]:not(.keep-bright) .logo .on-light{display:none}
:root[data-time="night"]:not(.keep-bright) .logo .on-dark{display:block}
.nav{display:none;gap:1.5rem;font-family:var(--f-display);font-size:1rem}
.nav a{text-decoration:none;padding-block:.5rem;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--accent)}
.nav a[aria-current]{box-shadow:inset 0 -1.5px 0 var(--accent)}
.hdr .btn{min-height:2.8rem;padding:.55em 1.2em}
.hdr__book{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:2.8rem;padding:.5em 1em;font-size:min(1rem,20px)!important;flex:none;background:none;border:1px solid var(--line);border-radius:99rem;color:var(--text);font-family:var(--f-display);font-size:1rem;cursor:pointer}
.menu-btn i{display:grid;gap:.28rem;width:1.05rem}
.menu-btn i::before,.menu-btn i::after{content:"";height:1.5px;background:currentColor}
@container (min-width:44em){ .hdr__book{display:inline-flex} }
@container (min-width:66em){ .nav{display:flex} .menu-btn{display:none} }
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 1rem) var(--gut) calc(env(safe-area-inset-bottom,0px) + 1.5rem);overflow-y:auto;animation:fade .25s ease}
.menu[hidden]{display:none}
.menu__top{display:flex;justify-content:space-between;align-items:center;min-height:3.5rem;margin-bottom:1.2rem}
.menu nav{display:grid}
.menu nav a{font-family:var(--f-display);font-size:1.7rem;font-weight:350;text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
.menu .actions{margin-top:2rem}
.menu .actions .btn{flex:1 1 12rem}
@keyframes fade{from{opacity:0}}
.dock{display:none}
@media (max-width:599px){
  /* one round Call button; sized in rem so it follows the reader's text-size setting */
  .dock{display:block;position:fixed;right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);z-index:25}
  .dock__call{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;color:var(--bg);background:var(--text);box-shadow:0 .6rem 1.5rem -.8rem rgba(0,0,0,.5)}
  .dock__ico{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .dock__call:active{transform:scale(.94)}
  body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4.5rem)}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.sec--linen{background:var(--linen)}
.sec--ink{background:var(--ink);color:var(--on-ink)}
.sec--ink .lead{color:var(--on-ink-muted)}
.sec--ink .eyebrow,.sec--ink em.a{color:var(--gold)}
.head{display:grid;gap:.8rem;margin-bottom:clamp(1.8rem,1.4rem + 1.5vw,2.8rem);max-width:42rem}
.head--row{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2rem}
.head--row>div{display:grid;gap:.8rem;max-width:42rem}
.js .reveal{opacity:0;transform:translateY(1.2rem);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* ================= THE DIVE ================= */
.dive{position:relative;background:#141210;color:#f4ecdd}
.dive__stage{display:none}
.js .dive.is-live .dive__stage{display:block;position:sticky;top:0;height:100vh;height:100svh;height:var(--stage-h,100svh);overflow:hidden;margin-bottom:-100vh;margin-bottom:-100svh;margin-bottom:calc(-1 * var(--stage-h,100svh));z-index:0}
.dive__gauge{display:none}
.js .dive.is-live .dive__gauge{display:block;position:sticky;top:0;height:100vh;height:100svh;height:var(--stage-h,100svh);margin-bottom:-100vh;margin-bottom:-100svh;margin-bottom:calc(-1 * var(--stage-h,100svh));z-index:3;pointer-events:none}
.dive__stage canvas,.dive__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.dive__photo{filter:var(--img-filter)}
.dive__photo--in{opacity:1;object-position:80% 32%;transform-origin:62% 36%}
.dive__photo--out{object-position:80% 32%;transform-origin:62% 36%}
.dive__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,12,10,.55) 0%,rgba(14,12,10,.18) 45%,rgba(14,12,10,0) 70%)}
.steps{position:relative;z-index:1}
.step{min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:6rem 0 7rem}
.step .wrap{width:100%}
.card-glass{max-width:30rem;display:grid;gap:1rem;padding:clamp(1.3rem,1rem + 1.2vw,2.1rem);border-radius:calc(var(--r)*2.5);background:rgba(14,12,10,.55);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);border:1px solid rgba(255,255,255,.1);box-shadow:0 2rem 4rem -2rem rgba(0,0,0,.6);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .dive.is-live .step:not(.is-active) .card-glass{opacity:.25;transform:translateY(1rem) scale(.98)}
.card-glass .eyebrow{color:#e0cf9f}
.card-glass h2{font-size:clamp(2rem,1.5rem + 1.8vw,3.1rem);color:#faf4e8}
.card-glass em.a{color:#e5d3a2}
.card-glass p{color:rgba(244,236,221,.86);font-size:1.15rem;line-height:1.55}
.depth{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;font-family:var(--f-mono);font-size:.85rem;letter-spacing:.06em;color:#e0cf9f;text-transform:uppercase}
.depth b{font-family:var(--f-display);font-size:1.6rem;font-weight:400;letter-spacing:0;text-transform:none;color:#faf4e8}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:2.8rem;padding:.45em 1em;border-radius:99rem;border:1px solid rgba(244,236,221,.35);text-decoration:none;font-family:var(--f-display);font-size:1rem;color:#f4ecdd;transition:background .2s,color .2s,transform .15s}
.chip::after{content:"→";opacity:.7}
.chip:hover{background:#f4ecdd;color:#1e2124}
.chip:active{transform:scale(.96)}
.step--intro .card-glass,.step--outro .card-glass{max-width:36rem}
/* keep the hero face clear of the frosted panel on wide screens */
@media (min-width:900px){ .dive .step--intro .card-glass{max-width:min(36rem,42vw)} }
.step--intro h1{font-size:clamp(2.7rem,1.6rem + 3.6vw,5rem);color:#faf4e8}
.hint{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#e0cf9f}
.hint i{width:1.3rem;height:2rem;border:1.5px solid currentColor;border-radius:1rem;position:relative}
.hint i::after{content:"";position:absolute;left:50%;top:.35rem;width:.2rem;height:.4rem;margin-left:-.1rem;border-radius:1rem;background:currentColor;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(.6rem);opacity:0}100%{opacity:0}}
.skipdive{color:#e0cf9f;font-family:var(--f-display);font-size:.98rem}

/* ruler */
.ruler{position:absolute;right:max(var(--gut),1rem);top:50%;transform:translateY(-50%);z-index:2;display:grid;grid-template-columns:auto auto;gap:0 .9rem;align-items:stretch;pointer-events:none;transition:opacity .6s}
.ruler__track{position:relative;width:2px;background:rgba(244,236,221,.2);border-radius:2px}
.ruler__fill{position:absolute;inset:0;background:#e0cf9f;transform-origin:top;transform:scaleY(var(--p,0));transition:transform .15s linear}
.ruler ol{display:grid;gap:1.4rem;padding:.2rem 0}
.ruler li{display:grid;gap:.05rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,236,221,.45);transition:color .3s;position:relative}
.ruler li::before{content:"";position:absolute;left:calc(-.9rem - 5px);top:.35rem;width:8px;height:8px;border-radius:50%;background:#141210;border:1.5px solid rgba(244,236,221,.4);transition:all .3s}
.ruler li b{font-family:var(--f-display);font-weight:400;font-size:1rem;letter-spacing:0;text-transform:none}
.ruler li.is-past{color:rgba(244,236,221,.7)}
.ruler li.is-past::before{background:#e0cf9f;border-color:#e0cf9f}
.ruler li.is-on{color:#faf4e8}
.ruler li.is-on::before{background:#e0cf9f;border-color:#e0cf9f;box-shadow:0 0 0 5px rgba(224,207,159,.25)}
.ruler__read{display:none}
.dive:not(.is-deep) .ruler{opacity:0}
@media (max-width:899px){
  /* phones: slim horizontal depth strip under the header, above the story cards */
  .ruler{left:var(--gut);right:var(--gut);top:calc(env(safe-area-inset-top,0px) + 5rem);transform:none;grid-template-columns:minmax(0,1fr) auto;gap:0 .9rem;align-items:center;padding:.55rem .9rem;border-radius:99rem;background:rgba(14,12,10,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
  .ruler__track{grid-area:1/1;width:auto;height:2px;margin-inline:4px}
  .ruler__fill{transform-origin:left;transform:scaleX(var(--p,0))}
  .ruler ol{grid-area:1/1;display:flex;justify-content:space-between;align-items:center;gap:0;padding:0}
  .ruler li{width:8px;height:8px;font-size:0}
  .ruler li b{display:none}
  .ruler li::before{left:0;top:0}
  .ruler li.is-on::before{box-shadow:0 0 0 4px rgba(224,207,159,.25)}
  .ruler__read{display:block;grid-area:1/2;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#faf4e8;white-space:nowrap}
  .step{align-items:end;padding-top:8rem;padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
  .card-glass{gap:.8rem}
  .card-glass p{font-size:1.05rem}
  .dive__stage::after{background:linear-gradient(0deg,rgba(14,12,10,.6) 0%,rgba(14,12,10,.1) 55%,rgba(14,12,10,0) 80%)}
}
/* no JS / no stage: the story still reads */
.dive:not(.is-live) .step{min-height:auto;padding:4rem 0;background:linear-gradient(135deg,#2a1d19,#141210)}
.dive:not(.is-live) .step--intro{background:#141210 url(/assets/img/photo/ai-hero.webp) 80% 30%/cover}
@media (prefers-reduced-motion:reduce){ .hint i::after{animation:none} }

/* ================= TILES ================= */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.tile{position:relative;display:block;overflow:hidden;border-radius:calc(var(--r)*2);aspect-ratio:4/5;text-decoration:none;color:#fbf8f2;background:#1e2124;isolation:isolate;transition:transform .2s ease,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,20,20,0) 35%,rgba(20,20,20,.8) 100%)}
.tile__body{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem 1.1rem;display:grid;gap:.25rem}
.tile__body{container-type:inline-size}
@media (max-width:399px){ .tiles--wide{grid-template-columns:minmax(0,1fr)} }
.tile h3{font-size:min(clamp(1.2rem,1rem + .8vw,1.65rem),11.5cqi);font-weight:400;color:#fbf8f2}
.tile p{font-size:.92rem;line-height:1.4;color:rgba(251,248,242,.86)}
.tile__go{position:absolute;top:.8rem;right:.8rem;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:rgba(251,248,242,.9);color:#1e2124;font-size:1.1rem;transition:transform .25s ease}
.tile__tag{position:absolute;top:.8rem;left:.8rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.35em .7em;border-radius:99rem;background:rgba(20,20,20,.55);color:#f4ecdd;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tile:hover{box-shadow:var(--shadow)}
.tile:hover img{transform:scale(1.05)}
.tile:hover .tile__go{transform:translateX(.2rem)}
.tile:active{transform:scale(.97)}
.tiles--wide .tile{aspect-ratio:4/3}
@container (min-width:44em){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem} .tile{aspect-ratio:4/4.4} .tiles--wide .tile{aspect-ratio:4/3} .tile__body{padding:1.3rem 1.4rem 1.4rem} }
@media (max-width:599px){ .tile p{display:none} .tiles--list{grid-template-columns:1fr} .tiles--list .tile{aspect-ratio:16/9} .tiles--list .tile p{display:block} }

/* ================= WHY / CARDS ================= */
.why{display:grid;gap:1rem}
.why li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.2rem 1rem;align-items:start;padding:1.2rem;border-radius:calc(var(--r)*2);background:var(--paper);border:1px solid var(--line-soft)}
.why li>svg{grid-row:span 2}
.ico{width:3.2rem;height:3.2rem;padding:.7rem;border-radius:50%;background:var(--linen);stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.why b{font-family:var(--f-display);font-weight:500;font-size:1.2rem}
.why p{color:var(--muted);font-size:1rem}
@container (min-width:52em){ .why{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem} .why li{grid-template-columns:1fr;padding:1.6rem} .why li>svg{grid-row:auto;margin-bottom:.6rem} }
.duo{display:grid;gap:1rem}
.card{position:relative;display:grid;gap:.8rem;align-content:start;padding:clamp(1.5rem,1.2rem + 1.2vw,2.4rem);border-radius:calc(var(--r)*2.5);text-decoration:none;transition:transform .2s ease,box-shadow .3s;overflow:hidden}
a.card:active{transform:scale(.98)}
a.card:hover{box-shadow:var(--shadow)}
.card--gold{background:var(--gold);color:var(--on-gold)}
.card--ink{background:var(--ink);color:var(--on-ink)}
.card--paper{background:var(--paper);border:1px solid var(--line-soft)}
.card .eyebrow{color:inherit;opacity:.78}
.card--paper .eyebrow{color:var(--accent);opacity:1}
.card h3{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);font-weight:350;color:inherit}
.card p{opacity:.88}
.card .price{font-family:var(--f-display);font-size:2.4rem;font-weight:350;font-variant-numeric:tabular-nums;opacity:1}
.card .price small{font-size:1rem;opacity:.75;margin-left:.3rem}
.card .go{font-family:var(--f-display);font-weight:500;margin-top:.4rem}
.card__mark{position:absolute;right:-1.5rem;bottom:-1.5rem;width:9rem;opacity:.12;stroke:currentColor;fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pill{justify-self:start;font-family:var(--f-display);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:.35em .8em;border-radius:99rem;background:var(--gold);color:var(--on-gold)}
@container (min-width:48em){ .duo{grid-template-columns:1fr 1fr;gap:1.2rem} }

.proof{display:grid;gap:1.5rem}
.reviews-slot{border:1.5px dashed var(--line);border-radius:calc(var(--r)*2);padding:1.6rem;display:grid;gap:.5rem;color:var(--muted)}
.stars{color:var(--gold);letter-spacing:.15em;font-size:1.3rem}
.insurers{display:flex;flex-wrap:wrap;gap:.6rem}
.insurers li{padding:.55em 1.1em;border-radius:99rem;border:1px solid var(--line);background:var(--paper);font-family:var(--f-display);font-size:1rem}
@container (min-width:52em){ .proof{grid-template-columns:1fr 1fr;align-items:center;gap:3rem} }

/* ================= PAGE TOP ================= */
.top{display:grid;background:var(--linen);transition:background-color .6s}
.top__img{width:100%;aspect-ratio:16/10;object-fit:cover}
.top__copy{display:grid;gap:1.1rem;padding-block:1.6rem 2.4rem;align-content:center}
/* the title shrinks to fit its column, so long words never break mid-word */
.top__copy{container-type:inline-size;width:100%}
.top h1{font-size:min(clamp(2.5rem,1.5rem + 3.4vw,4.8rem),12.5cqi)}
.top--text .top__copy{padding-block:clamp(2.5rem,2rem + 3vw,5rem)}
.crumbs{font-size:.95rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.facts{display:flex;flex-wrap:wrap;gap:.5rem}
.facts li{display:grid;gap:.05rem;padding:.6rem 1rem;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-soft);min-width:0}
.facts span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--f-display);font-weight:500}
.facts b{font-family:var(--f-display);font-weight:400;font-size:1.05rem}
@container (min-width:52em){
  .top:not(.top--text){grid-template-columns:minmax(0,max(50%,calc((100% - var(--max))/2 + 46rem))) minmax(0,1fr);min-height:min(38rem,76vh)}
  .top:not(.top--text) .top__img{height:100%;aspect-ratio:auto;order:2}
  .top:not(.top--text) .top__copy{max-width:none;margin-inline:0;padding:3rem clamp(1.5rem,4vw,4rem) 3rem max(var(--gut),calc((100cqw - var(--max))/2 + var(--gut)))}
}

/* depth meter (where a treatment works) */
.meter{display:grid;gap:.6rem;padding:1rem 1.1rem;border-radius:calc(var(--r)*2);background:var(--paper);border:1px solid var(--line-soft);max-width:34rem}
.meter__head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap}
.meter__head .mono{color:var(--muted);text-transform:uppercase}
.meter__head b{font-family:var(--f-display);font-weight:500}
.meter ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem}
.meter li a{display:grid;gap:.35rem;text-decoration:none;min-height:2.75rem;align-content:start}
.meter li i{height:.5rem;border-radius:1rem;background:var(--line-soft);transition:background .2s}
.meter li.on i{background:linear-gradient(90deg,var(--gold),var(--accent))}
.meter li span{font-size:.72rem;font-family:var(--f-mono);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter li.on span{color:var(--text)}
.meter li a:hover span{color:var(--accent)}

/* accordion */
.acc{display:grid;gap:.7rem;max-width:52rem}
.acc details{border-radius:calc(var(--r)*2);background:var(--paper);border:1px solid var(--line-soft);transition:box-shadow .3s,background-color .6s}
.acc details[open]{box-shadow:var(--shadow)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.6rem minmax(0,1fr) 2rem;gap:1rem;align-items:center;min-height:4.2rem;padding:.8rem 1.2rem;-webkit-tap-highlight-color:transparent}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ico{width:2.6rem;height:2.6rem;padding:.55rem}
.acc summary b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1.25}
.acc summary small{display:block;font-size:.95rem;color:var(--muted);font-family:var(--f-body)}
.acc summary i{width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);position:relative;transition:background .2s}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:1.5px;background:var(--accent);transform:translate(-50%,-50%)}
.acc summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease}
.acc details[open] summary i{background:var(--linen)}
.acc details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.acc summary:hover b{color:var(--accent)}
.acc__body{padding:0 1.2rem 1.4rem calc(1.2rem + 2.6rem + 1rem);display:grid;gap:1rem;animation:open .35s ease}
@keyframes open{from{opacity:0;transform:translateY(-.4rem)}}
@container (max-width:34em){ .acc__body{padding-left:1.2rem} }
.acc__body p{color:var(--muted);max-width:40em}
.acc--wide{margin-top:.7rem}
.acc--plain summary{grid-template-columns:minmax(0,1fr) 2rem}
.acc--plain .acc__body{padding-left:1.2rem}
.ticks{display:grid;gap:.5rem}
.ticks li{display:grid;grid-template-columns:1.3rem minmax(0,1fr);gap:.5rem}
.ticks li::before{content:"";width:.65rem;height:.4rem;margin-top:.6rem;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.nums{display:grid;gap:.8rem;counter-reset:s}
.nums li{counter-increment:s;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.8rem}
.nums li::before{content:counter(s);width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--on-gold);font-family:var(--f-display);font-weight:500;font-size:.95rem}
.nums b{font-family:var(--f-display);font-weight:500}
.nums p{color:var(--muted)}
.mk{display:grid;gap:.1rem;padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
.mk:last-child{border-bottom:0}
.mk b{font-family:var(--f-display);font-weight:500}
.mk span{color:var(--muted);font-size:1rem}
.qa{display:grid;gap:.3rem}
.qa b{font-family:var(--f-display);font-weight:500;font-size:1.1rem}

/* prose (journal, legal, story) */
.prose{display:grid;gap:1.1rem;max-width:40em;font-size:1.15rem}
.prose h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);margin-top:1rem}
.prose ul{display:grid;gap:.45rem;padding-left:1.2rem;list-style:disc}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose strong{font-weight:600}
.meta{font-family:var(--f-display);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:.8rem}
.meta span+span::before{content:"·";margin-right:.8rem}
.note{padding:1rem 1.2rem;border-left:3px solid var(--gold);background:var(--paper);border-radius:0 var(--r) var(--r) 0;color:var(--muted);font-size:1rem}

/* tap-to-explain */
.term{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:.22em}
.term:hover{color:var(--accent)}
.sheet{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;width:min(34rem,calc(100% - 2rem));display:grid;gap:.5rem;padding:1.2rem 1.3rem 1.3rem;border-radius:calc(var(--r)*2.5);background:var(--ink);color:var(--on-ink);box-shadow:0 2rem 4rem -1.5rem rgba(0,0,0,.6);animation:up .3s cubic-bezier(.2,.7,.2,1)}
.sheet[hidden]{display:none}
.sheet .eyebrow{color:var(--gold)}
.sheet b{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.sheet p{color:var(--on-ink-muted)}
.sheet button{position:absolute;top:.7rem;right:.7rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:var(--on-ink);font-size:1.2rem;cursor:pointer}
@media (max-width:599px){ .sheet{bottom:calc(5rem + env(safe-area-inset-bottom,0px))} }
@keyframes up{from{opacity:0;transform:translate(-50%,1rem)}}

/* evening greeting */
.greet{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:65;display:flex;align-items:center;gap:.8rem;max-width:min(30rem,calc(100% - 2rem));padding:.8rem .9rem .8rem 1.1rem;border-radius:1.4rem;background:var(--paper);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow);animation:up2 .5s .8s cubic-bezier(.2,.7,.2,1) both;font-size:1rem}
.greet[hidden]{display:none}
.greet p{line-height:1.35}
.greet button{flex:none;min-height:2.6rem;padding:.4em .9em;border-radius:99rem;border:1px solid var(--line);background:none;color:inherit;font-family:var(--f-display);font-size:.95rem;cursor:pointer}
.greet .x{width:2.6rem;padding:0}
@media (max-width:599px){ .greet{bottom:calc(5rem + env(safe-area-inset-bottom,0px))} }
@keyframes up2{from{opacity:0;transform:translateY(1rem)}}

/* ================= THE LAB ================= */
.lanes{display:grid;gap:1.2rem}
.lane{display:grid;gap:.8rem;align-content:start}
.lane__head{display:flex;align-items:center;gap:.7rem;padding-bottom:.8rem;border-bottom:2px solid var(--text)}
.lane__head i{width:.8rem;height:.8rem;border-radius:50%;border:2px solid var(--accent)}
.lane--1 .lane__head i{background:transparent}
.lane--2 .lane__head i{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.lane--3 .lane__head i{background:var(--accent)}
.lane__head h3{font-size:1.3rem}
.lane__head span{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.exp{display:grid;gap:.6rem;padding:1.2rem;border-radius:calc(var(--r)*2);background:var(--paper);border:1px solid var(--line-soft)}
.exp b{font-family:var(--f-display);font-weight:500;font-size:1.2rem}
.exp p{color:var(--muted);font-size:1rem}
.exp .mono{color:var(--accent);text-transform:uppercase}
.track{display:flex;gap:.3rem}
.track i{flex:1;height:.3rem;border-radius:1rem;background:var(--line-soft)}
.track i.on{background:var(--accent)}
.notify{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.notify input{flex:1 1 9rem;min-width:0;min-height:3rem;padding:.6em 1em;border-radius:99rem;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:1rem}
.notify .btn{min-height:3rem}
.notify output{flex-basis:100%;font-size:.95rem;color:var(--accent)}
@container (min-width:60em){ .lanes{grid-template-columns:repeat(var(--lanes,3),minmax(0,1fr));gap:1.5rem} }
.labteaser{display:grid;gap:1.5rem;align-items:center}
.labteaser__list{display:grid;gap:.6rem}
.labteaser__list li{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;border-radius:calc(var(--r)*2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.labteaser__list .mono{margin-left:auto;color:var(--gold);text-transform:uppercase;font-size:.75rem;text-align:right}
@container (min-width:56em){ .labteaser{grid-template-columns:1fr 1fr;gap:4rem} }

/* ================= MEMBERSHIP / TABLE ================= */
.tiers{display:grid;gap:1rem}
.tier{display:grid;gap:1rem;align-content:start;padding:clamp(1.5rem,1.2rem + 1vw,2.2rem);border-radius:calc(var(--r)*2.5);background:var(--paper);border:1px solid var(--line-soft);position:relative}
.tier--feat{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tier h3{font-family:var(--f-display);font-weight:500;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.tier--feat h3{color:var(--gold)}
.tier .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3rem;font-family:var(--f-display);font-weight:350;font-size:2.8rem;line-height:1.05;font-variant-numeric:tabular-nums}
.tier .price small{font-size:1rem;color:var(--muted);margin-left:.3rem}
.tier--feat .price small,.tier--feat p{color:var(--on-ink-muted)}
.tier p{color:var(--muted)}
.tier .ticks{padding-top:1rem;border-top:1px solid var(--line-soft);font-size:1rem}
.tier--feat .ticks{border-color:rgba(255,255,255,.12)}
.tier--feat .ticks li::before{border-color:var(--gold)}
.tier .pill{position:absolute;top:-.8rem;left:1.5rem}
@container (min-width:56em){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem} }
.table-wrap{overflow-x:auto;border-radius:calc(var(--r)*2);border:1px solid var(--line-soft);background:var(--paper)}
.ctable{width:100%;border-collapse:collapse;min-width:36rem;font-size:1rem}
.ctable th,.ctable td{padding:.9rem 1rem;text-align:center;border-bottom:1px solid var(--line-soft)}
.ctable th:first-child,.ctable td:first-child{text-align:left;font-weight:400}
.ctable thead th{font-family:var(--f-display);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ctable tr:last-child td,.ctable tr:last-child th{border-bottom:0}

/* ================= TEAM / CONTACT / FORMS ================= */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.person{display:grid;gap:.6rem}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--r)*2)}
.person b{font-family:var(--f-display);font-weight:400;font-size:1.15rem;display:block}
.person span{font-size:.95rem;color:var(--muted)}
@container (min-width:44em){ .people{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (min-width:64em){ .people{grid-template-columns:repeat(5,minmax(0,1fr))} }
.doc{display:grid;gap:2rem;align-items:center}
.doc img{width:100%;max-width:24rem;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--r)*2.5)}
.doc__copy{display:grid;gap:1.1rem}
.creds{display:flex;flex-wrap:wrap;gap:.5rem}
.creds li{padding:.45em 1em;border-radius:99rem;border:1px solid var(--line);font-size:.95rem}
@container (min-width:52em){ .doc{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem} }
.contact{display:grid;gap:1rem}
@container (min-width:52em){ .contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem} }
.hours{display:grid;gap:.4rem}
.hours div{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.form{display:grid;gap:.9rem}
.form label{display:grid;gap:.35rem;font-family:var(--f-display);font-weight:500;font-size:.95rem}
.form input,.form textarea{width:100%;min-height:3.1rem;padding:.7em 1em;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:1.05rem}
.form textarea{min-height:8rem;resize:vertical}
.form .hp{position:absolute;left:-999rem}
.form output{font-size:1rem;color:var(--accent)}
.form small{color:var(--muted);font-family:var(--f-body);font-weight:400}

/* close + footer */
.close{display:grid;gap:1.2rem;justify-items:center;text-align:center}
.close .lead{margin-inline:auto}
.foot{background:var(--ink);color:var(--on-ink-muted);padding-block:3rem 2rem;font-size:1rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--on-ink)}
.foot__grid{display:grid;gap:1.8rem}
.foot__brand img{height:3rem;width:auto;filter:none;margin-bottom:.8rem}
.foot h2{font-family:var(--f-display);font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.foot ul{display:grid;gap:.45rem}
.social{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.social a{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}
.social a:hover{border-color:var(--gold);color:var(--gold)}
.social svg{width:1rem;height:1rem;fill:currentColor}
.foot__legal{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}
.foot__legal nav{display:flex;flex-wrap:wrap;gap:1.2rem}
@container (min-width:48em){ .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (min-width:66em){ .foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.nf{display:grid;gap:1.3rem;padding-block:6rem;justify-items:start}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}
/* ================= PHONE vs DESKTOP =================
   Phones (under 700px) get the short, tap-to-open site; iPads and computers get everything on screen. */
@media (max-width:699px){ .desk{display:none!important} }
@media (min-width:700px){ .phone-only{display:none!important} }

.infobar{background:var(--ink);color:var(--on-ink-muted);font-size:.9rem}
.infobar .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;padding-block:.45rem}
.infobar a{color:var(--on-ink);text-decoration:none;font-weight:600;margin-left:auto}

/* flattened topics: every section open, read like a page */
.acc.is-flat{gap:0}
.acc.is-flat details{background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.acc.is-flat details:last-child{border-bottom:1px solid var(--line)}
.acc.is-flat summary{cursor:default;pointer-events:none;grid-template-columns:2.6rem minmax(0,1fr);padding:1.6rem 0 .6rem}
.acc.is-flat summary i{display:none}
.acc.is-flat summary b{font-size:1.55rem}
.acc.is-flat .acc__body{padding:0 0 1.8rem calc(2.6rem + 1rem);animation:none}
.acc--plain.is-flat summary{grid-template-columns:minmax(0,1fr)}
.acc--plain.is-flat .acc__body{padding-left:0}
@media (min-width:1000px){ .acc--plain.is-flat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem} .acc--plain.is-flat details{border-bottom:0} }

/* treatment page: topics + sticky sidebar */
.detail{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr)}
.detail__side{display:grid;gap:1rem;align-content:start}
.detail__side .card{padding:1.5rem}
.detail__side .card h3{font-size:1.5rem}
.detail__side .btn{width:100%}
.sidefacts{display:grid;gap:.7rem}
.sidefacts div{display:grid;gap:.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-soft)}
.sidefacts dt{font-family:var(--f-display);font-weight:500;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sidefacts dd{font-family:var(--f-display);font-size:1.1rem}
.detail__side .meter{border:0;padding:0;background:none}
.sidelinks{display:grid}
.sidelinks a{display:grid;gap:.1rem;padding:.7rem 0;border-bottom:1px solid var(--line-soft);text-decoration:none}
.sidelinks a:hover b{color:var(--accent)}
.sidelinks b{font-family:var(--f-display);font-weight:500}
.sidelinks span{font-size:.92rem;color:var(--muted)}
@media (min-width:1000px){
  .detail{grid-template-columns:minmax(0,1fr) 21rem;gap:3.5rem;align-items:start}
  .detail__side{position:sticky;top:6rem}
}

/* treatment-area page: detailed cards */
.rows{display:grid;gap:1.2rem}
.rowcard{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.6rem;align-items:start;padding:1rem;border-radius:calc(var(--r)*2.5);background:var(--paper);border:1px solid var(--line-soft);text-decoration:none;transition:box-shadow .3s,transform .2s}
.rowcard:hover{box-shadow:var(--shadow)}
.rowcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r)*1.8)}
.rowcard__body{display:grid;gap:.6rem;padding-block:.3rem;min-width:0}
.rowcard__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center}
.rowcard__meta .mono{color:var(--muted);text-transform:uppercase;font-size:.75rem}
.rowcard h3{font-size:1.7rem}
.rowcard p{color:var(--muted)}
.rowcard .ticks{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.5rem;font-size:1rem}
@media (min-width:1100px){ .rows{grid-template-columns:repeat(2,minmax(0,1fr))} .rowcard{grid-template-columns:minmax(0,11rem) minmax(0,1fr)} .rowcard .ticks{grid-template-columns:minmax(0,1fr)} }
/* desktop: bullets run the full card width under the photo, so each fits on one line */
@media (min-width:1100px){
  .rowcard{column-gap:1.4rem;row-gap:.6rem}
  .rowcard__body{display:contents}
  .rowcard img{grid-column:1;grid-row:1 / span 3;align-self:start}
  .rowcard__meta,.rowcard h3,.rowcard__body>p:not(.rowcard__meta){grid-column:2}
  .rowcard__meta{grid-row:1;margin-top:.3rem} .rowcard h3{grid-row:2} .rowcard__body>p:not(.rowcard__meta){grid-row:3}
  .rowcard .ticks{grid-column:1 / -1;grid-row:4;grid-template-columns:minmax(0,1fr);gap:.35rem;font-size:.9rem;padding:.6rem .3rem 0;border-top:1px solid var(--line-soft)}
  .rowcard .link{grid-column:1 / -1;grid-row:5;padding:0 .3rem .3rem}
}
/* no single word left alone on a line */
p,li,dd,summary small{text-wrap:pretty}

/* dive card list (desktop) */
.divelist{display:grid;border-top:1px solid rgba(244,236,221,.18)}
.divelist a{display:grid;gap:.1rem;padding:.7rem 1.6rem .7rem 0;border-bottom:1px solid rgba(244,236,221,.18);text-decoration:none;color:#f4ecdd;position:relative}
.divelist a::after{content:"→";position:absolute;right:0;top:50%;transform:translateY(-50%);color:#e0cf9f}
.divelist a:hover b{color:#e0cf9f}
.divelist b{font-family:var(--f-display);font-weight:500;font-size:1.1rem}
.divelist span{font-size:.95rem;color:rgba(244,236,221,.72)}

/* homepage: treatment index + systems */
.index{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.index__col h3{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:.8rem;border-bottom:2px solid var(--text);font-size:1.45rem}
.index__col h3 a{text-decoration:none}
.index__col h3 .mono{color:var(--muted)}
.index__col a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.index__col a:hover b{color:var(--accent)}
.index__col b{font-family:var(--f-display);font-weight:500;font-size:1.08rem}
.index__col span{grid-column:1;font-size:.93rem;color:var(--muted)}
.index__col i{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;font-size:.72rem;text-transform:uppercase;color:var(--accent);text-align:right}
.systems{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem}
@media (min-width:900px){ .systems{grid-template-columns:repeat(3,minmax(0,1fr))} }
.systems li{display:grid;gap:.2rem;padding:1.1rem 1.2rem;border-radius:calc(var(--r)*2);background:var(--paper);border:1px solid var(--line-soft)}
.systems .mono{color:var(--accent);font-size:.75rem}
.systems b{font-family:var(--f-display);font-weight:500;font-size:1.15rem}
.systems span:last-child{color:var(--muted);font-size:.95rem}

.tile img,.top__img,.rowcard img{object-position:50% 32%}
/* ================= DESKTOP: FULL, WARM, ORGANIC (1000px+) =================
   Phones stay exactly as they are. Big screens scale text with the window so content
   fills the space the way it does on a phone, lose the boxy borders, and gain texture. */
@supports not (-webkit-touch-callout:none){
  @media (min-width:1000px){ html{font-size:clamp(100%, calc(81.25% + .35vw), 125%)} }
}
.photoband{position:relative;overflow:hidden;color:#f7efe2;background:#2a211b;isolation:isolate}
.photoband img{position:absolute;top:0;right:0;width:58%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2}
.photoband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#2a211b 0%,#2a211b 40%,rgba(42,33,27,.6) 50%,rgba(42,33,27,0) 62%)}
.photoband .wrap{padding-block:clamp(5rem,9vw,9rem)}
.photoband__copy{display:grid;gap:1.2rem;max-width:36rem;justify-items:start}
.photoband .eyebrow{color:#e5d3a2}
.photoband em.a{color:#e8d6a6}
.photoband h2{font-size:clamp(2.4rem,3.6vw,4rem);color:#fbf4e6}
.photoband p{font-size:1.2rem;color:rgba(247,239,226,.88)}
@media (max-width:699px){
  .photoband img{position:relative;z-index:auto;width:100%;height:auto;aspect-ratio:16/10;display:block}
  .photoband::after{display:none}
  .photoband .wrap{padding-block:2rem 3.5rem}
  .photoband p{font-size:1.08rem}
  .doc{gap:1.4rem}
  .doc img{max-width:15rem;aspect-ratio:1}
}
.idxm ul{display:grid;gap:0}
.idxm li a{display:block;padding:.7rem 0;border-bottom:1px solid var(--line-soft);text-decoration:none;font-family:var(--f-display);font-size:1.08rem}

@media (min-width:1000px){
  body{background-image:
    radial-gradient(60rem 40rem at 8% -5%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 70%),
    radial-gradient(50rem 36rem at 105% 30%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-attachment:fixed,fixed,scroll}
  .sec{padding-block:clamp(3.5rem,5vw,5.5rem)}
  .sec--linen{background:linear-gradient(180deg,color-mix(in srgb,var(--linen) 92%,transparent),color-mix(in srgb,var(--linen) 70%,transparent))}
  .head{max-width:56rem}
  .head h2{font-size:clamp(2.4rem,3.2vw,3.8rem)}
  .lead{max-width:46em;font-size:1.3rem}
  .head--row>div{max-width:52rem}

  /* softer, less manufactured surfaces */
  .card--paper,.acc details,.rowcard,.why li,.systems li,.exp,.tier,.meter,.facts li,.contact .card{border-color:transparent!important;border-radius:1.4rem;box-shadow:0 1.2rem 2.6rem -2rem rgba(60,45,30,.35)}
  .tile{border-radius:1.4rem}
  .top{background:linear-gradient(120deg,var(--linen),color-mix(in srgb,var(--linen) 55%,var(--bg)))}
  .top:not(.top--text) .top__img{border-radius:0 0 0 3rem}
  .top h1{font-size:min(clamp(3rem,4.4vw,5.6rem),12.5cqi)}

  /* treatment topics: the phone's soft cards, all open, flowing in columns */
  .detail{grid-template-columns:minmax(0,1fr)!important}
  .detail__side{display:none!important}
  .detail__main .head{max-width:60rem}
  .acc.is-open{display:block;column-count:2;column-gap:1.4rem;max-width:none}
  .acc.is-open details{break-inside:avoid;display:block;margin:0 0 1.4rem;background:var(--paper)}
  .acc.is-open .acc__body{animation:none}
  .acc.is-open summary{cursor:default}
  .acc--plain.is-open{column-count:2}
  .acc--wide.is-open{column-count:1!important}
  .acc--wide.is-open .acc__body p{max-width:none}

  /* the dive: a bigger, fuller card so the art frames the words */
  .card-glass{max-width:min(46rem,58vw);padding:clamp(1.8rem,2.4vw,3rem);gap:1.3rem}
  .card-glass h2{font-size:clamp(2.6rem,3.6vw,4.2rem)}
  .step--intro h1{font-size:clamp(3.2rem,5vw,6rem)}
  .card-glass p{font-size:1.3rem}
  .step--intro .card-glass,.step--outro .card-glass{max-width:min(50rem,62vw)}
  .divelist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.6rem}

  .rows{gap:1.4rem}
  .rowcard{padding:1.2rem}
  .index{gap:3rem}
}
@media (min-width:1500px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media print{ .hdr,.dock,.greet,.sheet,.demo,.dive__stage{display:none!important} }
/* LegitScript seal */
.seal{display:inline-flex;flex:none;line-height:0}
.seal img{width:auto;height:4.2rem;filter:none}
.seal--md img{height:3.4rem}
/* top bar: the seal runs the full height of the bar, top to bottom */
.infobar .wrap{position:relative;padding-right:calc(var(--gut) + 14.5rem)}
.infobar__seal{position:absolute;top:0;bottom:0;right:var(--gut);display:flex;align-items:center;gap:.6rem;color:var(--on-ink)}
.seal--bar{height:100%}
.seal--bar img{height:100%;width:auto;padding-block:2px}
.infobar .infobar__seal a{margin:0;font-weight:inherit}
.foot__seal,.seal-row{display:flex;align-items:center;gap:.8rem;font-size:.9rem}
.foot__seal{margin-top:1.2rem}
.seal-row{color:var(--muted)}
/* four reasons in one row */
@container (min-width:52em){ .why:has(>li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))} }
/* top bar: two info lines on the left, phone centered vertically */
.infobar .wrap{align-items:center;flex-wrap:nowrap}
.infobar__info{display:grid;gap:.3rem}
.infobar a[href^="tel"]{white-space:nowrap}
/* narrower desktops: the seal alone, so nothing crowds the phone number */
@media (max-width:1199px){ .infobar .wrap{padding-right:calc(var(--gut) + 7.5rem)} .infobar__seal{font-size:0;gap:0} }
.lane--0 .lane__head i{background:transparent;border-style:dashed}
/* Lab: research links under a monitored item */
.exp__src summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.95rem}
.exp__src ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.6rem}
.exp__src li{display:grid;gap:.1rem;font-size:.92rem;line-height:1.35}
.exp__src a{color:var(--text)}
.exp__src span{color:var(--muted);font-size:.82rem}

/* ================= SHOP (Shopify) ================= */
.bag-btn{position:relative;flex:none;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.bag-btn svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.bag-btn:hover{border-color:var(--text)}
.bag-btn__n{position:absolute;top:-.3rem;right:-.3rem;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:99rem;background:var(--gold);color:var(--on-gold);font:600 .72rem/1.3rem var(--f-body);text-align:center}
.bag-btn__n[hidden]{display:none}
.bag{position:fixed;inset:0;z-index:70}
.bag[hidden]{display:none}
.bag__scrim{position:absolute;inset:0;background:rgba(20,18,16,.45);opacity:0;transition:opacity .3s}
.bag__panel{position:absolute;top:0;right:0;bottom:0;width:min(27rem,100%);display:flex;flex-direction:column;background:var(--bg);box-shadow:var(--shadow);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);padding:calc(env(safe-area-inset-top,0px) + .6rem) 0 calc(env(safe-area-inset-bottom,0px) + .6rem)}
.bag.is-open .bag__scrim{opacity:1}
.bag.is-open .bag__panel{transform:none}
.bag__panel.is-busy .bag__body,.bag__panel.is-busy .bag__foot{opacity:.5;pointer-events:none}
.bag__head{display:flex;justify-content:space-between;align-items:center;padding:.4rem 1.3rem .8rem;border-bottom:1px solid var(--line-soft)}
.bag__head h2{font-size:1.6rem}
.bag__x{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text);font-size:1.4rem;cursor:pointer}
.bag__body{flex:1;overflow-y:auto;padding:.4rem 1.3rem;transition:opacity .2s}
.bag__empty{padding:2.5rem 0;color:var(--muted);text-align:center}
.bline{display:grid;grid-template-columns:4.4rem minmax(0,1fr) auto;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.bline__img{width:4.4rem;height:4.4rem;border-radius:var(--r);background:#fff;overflow:hidden;display:block}
.bline__img img{width:100%;height:100%;object-fit:contain}
.bline__body{display:grid;gap:.15rem;align-content:start;min-width:0}
.bline__body .mono{font-size:.72rem;color:var(--muted);text-transform:uppercase}
.bline__t{font-family:var(--f-display);font-size:1.02rem;line-height:1.25;text-decoration:none}
.bline__t:hover{color:var(--accent)}
.bline__body small{color:var(--muted);font-size:.85rem}
.bline__end{display:grid;justify-items:end;align-content:space-between;gap:.4rem}
.bline__end b{font-weight:600;font-size:1rem}
.bline__rm{background:none;border:0;padding:.3rem 0;color:var(--muted);font-size:.85rem;text-decoration:underline;cursor:pointer}
.bag__foot{padding:1rem 1.3rem 0;border-top:1px solid var(--line-soft);display:grid;gap:.8rem}
.bag__foot[hidden]{display:none}
.bag__sum{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);font-size:1.15rem}
.bag__sum b{font-weight:500;font-size:1.35rem}
.bag__go{width:100%}
.bag__foot .note{font-size:.88rem;padding:.6rem .9rem}
.bag__more{padding:.4rem 1.3rem 0;text-align:center}
.bag__msg{padding:0 1.3rem;font-size:.9rem;color:var(--muted);min-height:1.3rem;text-align:center}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99rem;overflow:hidden;background:var(--paper)}
.qty button{width:2.8rem;height:2.8rem;border:0;background:none;color:var(--text);font-size:1.2rem;cursor:pointer}
.qty button:hover{background:var(--linen)}
.qty input,.qty output{width:2.6rem;text-align:center;border:0;background:none;color:var(--text);font:500 1rem var(--f-body);-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty--s{margin-top:.4rem;justify-self:start}
.qty--s button{width:2.2rem;height:2.2rem;font-size:1rem}
.qty--s output{width:1.8rem;font-size:.92rem}

/* shop page */
.shop-brands{display:flex;flex-wrap:wrap;gap:.5rem}
.shop-brands a{display:inline-flex;align-items:center;min-height:2.6rem;padding:.4em 1.05em;border-radius:99rem;border:1px solid var(--line);background:var(--paper);font-family:var(--f-display);text-decoration:none}
.shop-brands a:hover{border-color:var(--text)}
.shop{padding-top:clamp(2rem,1.6rem + 2vw,3.5rem)}
.shopbar{display:grid;gap:.8rem;margin-bottom:1.2rem}
.shopbar__search input{width:100%;min-height:3rem;padding:.6em 1.2em;border-radius:99rem;border:1px solid var(--line);background:var(--paper);color:var(--text);font:inherit;font-size:1rem}
.shopbar__search input:focus{outline:2px solid var(--accent);outline-offset:1px}
.fchips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:none;min-height:2.6rem;padding:.4em 1em;border-radius:99rem;border:1px solid var(--line);background:none;color:var(--text);font-family:var(--f-display);font-size:.97rem;cursor:pointer;white-space:nowrap}
.fchip:hover{border-color:var(--text)}
.fchip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.shopbar__sort{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-size:.97rem;color:var(--muted);justify-self:start}
.shopbar__sort select,.popt select{min-height:2.6rem;padding:.3em 2.2em .3em 1em;border-radius:99rem;border:1px solid var(--line);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 8%22%3E%3Cpath d=%22M1 1l5 5 5-5%22 fill=%22none%22 stroke=%22%2376633f%22 stroke-width=%221.5%22/%3E%3C/svg%3E") no-repeat right .9em center/.7em;color:var(--text);font:inherit;font-size:.97rem;-webkit-appearance:none;appearance:none}
@container (min-width:56em){ .shopbar{grid-template-columns:minmax(0,1fr) auto;align-items:center} .shopbar__search{grid-column:1} .shopbar__sort{grid-column:2;grid-row:1} .fchips{grid-column:1 / -1;flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0} }
.shop__count{color:var(--muted);margin-bottom:1rem}
.shop__none{padding:3rem 0;text-align:center;color:var(--muted)}
.shop__none .link{background:none;border:0;cursor:pointer;font-size:1rem}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .8rem}
@container (min-width:44em){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.1rem} }
@container (min-width:66em){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pcard{display:grid;grid-template-rows:auto 1fr;gap:.8rem;min-width:0}
.pcard[hidden]{display:none}
.pcard__img{display:block;aspect-ratio:1;border-radius:calc(var(--r)*2);background:#fff;overflow:hidden;border:1px solid var(--line-soft)}
.pcard__img img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard__body{display:grid;gap:.3rem;align-content:start;grid-template-rows:auto auto auto 1fr}
.pcard__brand{color:var(--muted);font-size:.72rem;text-transform:uppercase}
.pcard h3{font-size:clamp(1rem,.95rem + .25vw,1.15rem);line-height:1.3;font-weight:400}
.pcard h3 a{text-decoration:none}
.pcard h3 a:hover{color:var(--accent)}
.pcard__price{font-weight:600;font-size:1rem}
.pcard__price s{font-weight:400;color:var(--muted)}
.pcard__add{align-self:end;justify-self:start;min-height:2.6rem!important;padding:.45em 1.1em!important;font-size:.95rem;margin-top:.35rem}
.pcard__add:disabled{opacity:.45;cursor:default}
@container (max-width:30em){ .pcard__add{width:100%} }

/* product page */
.pdp{padding-block:clamp(1.4rem,1rem + 1.5vw,2.4rem) clamp(3rem,2.5rem + 3vw,5.5rem)}
.pdp .crumbs{margin-bottom:1.4rem}
.pdp__grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
.pdp__gallery,.pdp__details{min-width:0}
@container (min-width:52em){ .pdp__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.5rem;align-items:start} .pdp__gallery{position:sticky;top:6rem} }
.pdp__main{aspect-ratio:1;border-radius:calc(var(--r)*2.5);background:#fff;overflow:hidden;border:1px solid var(--line-soft)}
.pdp__main img{width:100%;height:100%;object-fit:contain;padding:5%}
.pdp__thumbs{display:flex;gap:.5rem;margin-top:.7rem;overflow-x:auto;scrollbar-width:none}
.pdp__thumbs button{flex:none;width:4.4rem;height:4.4rem;padding:0;border-radius:var(--r);border:1px solid var(--line-soft);background:#fff;overflow:hidden;cursor:pointer}
.pdp__thumbs button[aria-pressed="true"]{border:2px solid var(--accent)}
.pdp__thumbs img{width:100%;height:100%;object-fit:contain}
.pdp__info{display:grid;gap:1rem;align-content:start;min-width:0}
.pdp__info h1{font-size:clamp(2rem,1.5rem + 1.8vw,3.1rem)}
.pdp__price{font-family:var(--f-display);font-size:1.7rem}
.pdp__price s{font-size:1.1rem;color:var(--muted);margin-left:.5rem}
.pdp__for{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.pdp__for .mono{color:var(--muted);font-size:.75rem;text-transform:uppercase;margin-right:.3rem}
.pdp__for .tag{padding:.3em .8em;border-radius:99rem;background:var(--linen);font-size:.9rem}
.pdp__sum{color:var(--muted);font-size:1.1rem;line-height:1.55}
.pdp__buy{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;padding-top:.4rem}
.pdp__buy .btn{flex:1 1 10rem}
.pdp__add:disabled{opacity:.45;cursor:default}
.popt{display:grid;gap:.3rem;flex-basis:100%;font-family:var(--f-display);font-size:.95rem;color:var(--muted)}
.popt select{justify-self:start;min-width:12rem}
.pdp__stock{color:var(--accent);font-size:.82rem}
.pdp__details{margin-top:clamp(2.5rem,2rem + 2vw,4rem);max-width:52rem}
.pdp__h{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);margin-bottom:1.2rem}
.pdp__h small{font-family:var(--f-accent);font-style:italic;color:var(--accent);font-size:.7em}
.pdp__desc{font-size:1.05rem}
.pdp__desc h3,.pdp__desc h4{font-size:1.2rem;margin-top:.6rem}
/* related row: 2 on phones, 4 on desktop */
.pgrid--row .pcard__add{display:none}
@container (min-width:44em){ .pgrid--row{grid-template-columns:repeat(4,minmax(0,1fr))} .pgrid--row .pcard__add{display:inline-flex} }
@media print{ .bag,.bag-btn{display:none!important} }
/* four memberships: two by two, then four across on wide screens */
@container (min-width:56em){ .tiers:has(>.tier:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (min-width:80em){ .tiers:has(>.tier:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))} }
/* "VitalX" in the logo's lettering, inline with text */
.wm{display:inline-block;line-height:0;vertical-align:-.12em}
.wm img{height:.82em;width:auto;filter:none}
.wm--light{display:none}
.tier--feat .wm--dark{display:none} .tier--feat .wm--light{display:inline}
@media (prefers-color-scheme:dark){ .wm--dark{display:none} .wm--light{display:inline} }
:root[data-time="night"]:not(.keep-bright) .wm--dark{display:none}
:root[data-time="night"]:not(.keep-bright) .wm--light{display:inline}