/* =============================================================
   150 — Home page styles
   ============================================================= */

/* portrait placeholders (warm tonal until real assets drop in) */
[data-portrait]{
  background:
    radial-gradient(60% 45% at 50% 32%, rgba(244,242,239,.16), transparent 60%),
    linear-gradient(155deg,#3a4434 0%,#5D6B64 55%,#757C5C 100%);
  background-size:cover;background-position:center top;
  position:relative;isolation:isolate;
}
[data-portrait]::after{content:"";position:absolute;inset:0;
  background:radial-gradient(42% 38% at 62% 40%, rgba(0,0,0,.0), rgba(28,35,27,.28));mix-blend-mode:multiply}

/* ---------------- HERO ---------------- */
/* ONE continuous field (m01): the section's own background is the photo's warm
   ambient brown — not olive mushroom — so the text side and the portrait read
   as a single environment, not two panels. */
/* LIGHT hero (client review): warm-white field, premium deep-green accents.
   The figure + ring sit as cutout layers; the brand ring now draws ABOVE the
   body so the whole logo circle reads.
   CURTAIN SCROLL: the hero pins (sticky) while the next sections slide over
   it — native sticky, no scroll-linked JS, so nothing to jitter. */
.hero{position:sticky;top:0;z-index:0;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding-top:clamp(96px,12vh,150px);padding-bottom:clamp(64px,9vh,110px);
  --bg:#F3F1E8;--fg:#1E2A1C;
  /* not flat white: warm layered field — sand halo behind the figure, sage wash
     upper-left, olive grounding lower-right — so the particles read */
  background:
    radial-gradient(46% 68% at 72% 46%, rgba(216,206,164,.55), rgba(216,206,164,0) 70%),
    radial-gradient(58% 78% at 10% 6%, rgba(164,172,138,.30), transparent 62%),
    radial-gradient(72% 90% at 90% 104%, rgba(117,124,92,.22), transparent 66%),
    linear-gradient(118deg,#F8F6EF 0%,#EFEDE2 55%,#E5E3D4 100%)}
/* layer stack: 1 = drift particles (behind body) · 2 = figure cutout · 3 = ring (above body) · 4 = text */
.hero__wave{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* transparent-cutout figure (client's generated green body, gold filaments) —
   no background framing; same ring-aligned frame geometry as before */
.hero__fig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url(../img/hero-body-user.webp);
  background-size:cover;background-position:right center;background-repeat:no-repeat}
.hero__ringwave{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* the brand ring, clean deep-green lines — drawn OVER the figure so the full circle shows */
.hero__ringline{position:absolute;z-index:3;pointer-events:none;overflow:visible;
  max-width:none}  /* JS sizes it past the viewport on mobile — the global svg{max-width:100%} clamp shrank it off the particle ring */
.hrl__thin{fill:none;stroke:rgba(46,59,42,.22);stroke-width:.6}
.hrl__arc{fill:none;stroke:#2E3B2A;stroke-width:3;filter:drop-shadow(0 1px 2px rgba(46,59,42,.18))}
.hrl__o{fill:#F5F4EF;stroke:#2E3B2A;stroke-width:1.3}
.hrl__c{fill:#2E3B2A}

/* ---- text column (left, over the field) ---- */
.hero__inner{position:relative;width:100%;max-width:none;margin:0;z-index:4}
.hero__inner>*{max-width:min(640px,53vw)}
.hero__eyebrow{color:#3E4A38;letter-spacing:.16em;line-height:1.7}
/* brand book p13: headline/display = Overused Grotesk; serif italic on the em */
.hero__h1{margin:.28em 0 .5em;max-width:min(700px,56vw);font-size:clamp(36px,4.4vw,60px);line-height:1.04;color:#1E2A1C}
.hero__h1 em{color:#3E4A38}
.hero__rule{display:block;width:clamp(120px,17vw,220px);height:1px;margin:.1em 0 1.7em;
  background:linear-gradient(90deg,#2E3B2A,rgba(46,59,42,.06));position:relative}
.hero__rule::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:#2E3B2A}
.hero__lede{margin-bottom:2.1em;color:#525A48;max-width:min(520px,47vw)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* premium deep-green primary; muted-green ghost */
.hero .btn--primary{background:#2E3B2A;color:#F5F4EF;
  box-shadow:0 12px 30px -14px rgba(46,59,42,.5)}
.hero .btn--primary:hover{background:#26311F;box-shadow:0 16px 40px -16px rgba(46,59,42,.6)}
.hero .btn--ghost{border-color:rgba(46,59,42,.35);color:#2E3B2A}
@media (max-width:1100px){
  .hero__inner>*{max-width:min(560px,58vw)}
}
@media (max-width:860px){
  .hero{flex-direction:column;align-items:flex-start;justify-content:center;padding-bottom:clamp(40px,7vh,80px)}
  /* portrait: figure drifts to the top-right; LIGHT wash so copy stays legible */
  .hero__fig{background-position:72% top;opacity:.5}
  .hero__fig::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(245,244,239,.25) 0%, rgba(245,244,239,.6) 46%, rgba(245,244,239,.88) 72%)}
  /* portrait: the ring crosses the headline — barely-there (client: still too visible at .22) */
  .hero__ringline{opacity:.12}
  .hero__ringwave{opacity:.32}
  .hero__h1{max-width:100%}
  .hero__inner>*{max-width:100%}
}


/* ---------------- HOW IT WORKS ---------------- */
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin-top:2.4em}
.how__panel{display:flex;flex-direction:column}
.how__viz{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--panel-line);
  background:var(--panel);margin-bottom:1.3em;display:flex;align-items:center;justify-content:center;padding:14px}
.how__viz--center{padding:0}
/* Cellular Continuity disc dissolving into the readout */
.how__thumb--cells{position:absolute;inset:0;width:66%;display:flex;align-items:center;justify-content:center;color:var(--tan);
  -webkit-mask:linear-gradient(90deg,#000 58%,transparent 97%);
  mask:linear-gradient(90deg,#000 58%,transparent 97%)}
.how__thumb--cells svg{width:88%;height:auto}
.how__viz .read-scan__line{left:0;width:58%}
.how__readout{position:absolute;right:0;top:0;bottom:0;width:46%;background:linear-gradient(90deg,transparent,var(--oat) 22%);
  padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:.35em;font-size:11px}
.how__readout .mono-label{margin-bottom:.4em;font-size:9px}
.how__readout dl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--rule);padding-bottom:.25em}
.how__readout dt{color:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.how__readout dd{font-family:var(--mono);font-size:10px;color:var(--fg)}
.how__readout dd b{font-family:var(--sans);font-size:13px;font-weight:440}
.how__viz-cap{position:absolute;top:12px;left:14px;font-size:9px}
.how__viz-cap em{font-style:normal;color:var(--accent)}
.how__projected{position:absolute;right:14px;bottom:12px;display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.how__projected b{font-size:26px;color:var(--ember)}
.how__projected .mono-label{font-size:8px}
.how__h{font-size:clamp(28px,2.6vw,40px);margin-bottom:.3em;color:var(--fg)}
.how__foot{margin-top:2.2em}
/* the read scan */
.read-scan__line{position:absolute;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(244,239,226,.9),transparent);box-shadow:0 0 14px 2px rgba(244,239,226,.5);
  opacity:0;z-index:4}
.read-scan.is-scanning .read-scan__line{animation:readpass 4.6s var(--ease-soft) .2s infinite}
@keyframes readpass{0%{top:6%;opacity:0}6%{opacity:1}46%{top:94%;opacity:.9}54%{top:94%;opacity:0}100%{top:6%;opacity:0}}
@media (max-width:860px){.how__grid{grid-template-columns:1fr}}

/* ---------------- COMPLETE PICTURE ---------------- */
/* ONE horizontal composition (m04 reference): copy + principles LEFT,
   the living instrument (sources → body → readers) RIGHT, metrics below. */
.complete .sec__inner{display:grid;grid-template-columns:minmax(320px,1.05fr) 1.95fr;gap:clamp(22px,3vw,56px);align-items:center}
.complete__head{grid-column:1;grid-row:1;max-width:none;margin-bottom:0}
.complete__head .statement{font-size:clamp(34px,3.7vw,60px)}
.complete__head .body{margin-top:1.2em}
.complete__viz{grid-column:2;grid-row:1}
.complete__metrics{grid-column:1/-1}
.complete__closer{grid-column:1/-1}
@media (max-width:980px){.complete .sec__inner{display:block}}
/* the four "principles" badges (m04 lower-left): how 150 reads you */
.complete__viz{position:relative;margin:0}
/* the reader notes flanking the right edge (m04: AI READER above, PHYSICIAN READER below) */
.complete__reader{position:absolute;right:0;max-width:190px;z-index:3}
.complete__reader--ai{top:13%}
.complete__reader--phys{bottom:11%}
.complete__reader .mono-label{color:var(--sand)}
.complete__reader p{font-size:.78rem;color:#AEB49D;line-height:1.45;margin-top:4px}
@media (max-width:980px){.complete__reader{position:static;max-width:none;margin-top:1em}}
/* the brand orb at the convergence hub, haloed by a Cellular Continuity disc
   (the "complete picture" = every signal converging into 150) */
.complete__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(230px,25vw,380px);aspect-ratio:1;z-index:2;
  display:grid;place-items:center}
.complete__corecells{position:absolute;inset:0;color:#8E9772;opacity:.6}
.complete__coreorb{position:relative;width:44%;color:#EFE9D4;
  filter:drop-shadow(0 0 22px rgba(233,222,180,.5)) drop-shadow(0 0 50px rgba(217,188,122,.3))}
.complete__coreorb .orb-sm{width:100%;height:100%}
.complete__readout{position:absolute;right:13%;top:55%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.45em;z-index:3;text-align:left}
.complete__big{display:flex;align-items:center;gap:.2em;font-size:clamp(40px,5vw,72px);color:var(--fg);line-height:1}
.complete__big .orb-sm{color:var(--sand);width:.5em;height:.5em}
.complete__status{color:var(--muted);font-size:.9rem}
.complete__pill{align-self:flex-start;border:1px solid var(--rule);border-radius:999px;padding:.4em .8em;color:var(--olive)}
.sec--bark .complete__pill{color:#A4AC8A}
.complete__metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.metric{display:flex;flex-direction:column;gap:.4em;padding:1.5em clamp(10px,1.4vw,22px);border-left:1px solid var(--rule)}
.metric:first-child{border-left:none}
.metric__ico{width:26px;height:26px;color:var(--sand)}
.metric .num{font-size:clamp(20px,2vw,30px);color:var(--fg)}
.metric__t{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.metric__t--up{color:#A4AC8A}.metric__t--down{color:#D9BC7A}
.complete__closer{max-width:680px;margin:2.4em auto 0;text-align:center;font-size:var(--fs-body-lg)}
.complete__closer em{font-style:italic;color:var(--sand)}
@media (max-width:980px){.complete__metrics{grid-template-columns:repeat(2,1fr)}.metric{border-top:1px solid var(--rule)}.metric:nth-child(odd){border-left:none}
  .complete__readout{position:static;transform:none;align-items:center;text-align:center;margin-top:1.4em}.complete__core{display:none}}
/* phones: the diagram doesn't survive portrait (Safari foreignObject bugs,
   cramped curves) — client call: text only, no animation */
@media (max-width:640px){
  .complete__viz{display:flex;flex-direction:column;align-items:flex-start;min-height:0}
  .complete__converge{display:none}
  .complete__core{display:none}
  .complete__reader{display:none}   /* client: no AI/physician blocks on phones */
  .complete__readout{margin-top:.2em}
}

/* ---------------- TEAM ---------------- */
/* m05: round physician avatar — care-signal connector — concierge node.
   One physician label only (no duplicate, no big rectangle). */
.team__thread{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin-top:2.6em}
.team__node{display:flex;align-items:center;gap:14px;flex:none}
.team__node--conc{flex-direction:row-reverse;text-align:right}
.team__node .mono-label{line-height:1.6}
.team__avatar{width:64px;height:64px;border-radius:50%;border:1px solid var(--rule);overflow:hidden;flex:none}
.team__avatar--lg{width:clamp(88px,9vw,116px);height:clamp(88px,9vw,116px)}
.team__avatar--orb{display:grid;place-items:center;color:var(--sand)}.team__avatar--orb .orb-sm{width:46%;height:46%}
.team__node .mono-label b{font-family:var(--sans);color:var(--fg);font-size:1rem;font-weight:500}
.team__wire{flex:1;display:flex;align-items:center;gap:10px;min-width:60px}
.team__wireline{flex:1;height:1px;background:linear-gradient(90deg,var(--sand),transparent,var(--sand))}
.team__signal{white-space:nowrap;color:var(--muted);letter-spacing:.16em}
@media (max-width:760px){.team__thread{flex-direction:column;align-items:flex-start;gap:18px}.team__node--conc{flex-direction:row;text-align:left}.team__wire{flex-direction:column;height:30px;margin-left:40px}.team__wireline{width:1px;flex:1}.team__signal{writing-mode:vertical-lr}}
.team__chat{padding:18px;max-width:420px;margin-left:auto;background:rgba(244,242,239,.96);color:#2A3128;border-color:rgba(45,56,42,.1)}
.chat__head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(36,30,21,.1)}
.chat__av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none}
.chat__av--orb{display:grid;place-items:center;background:#E3E5D8;color:#757C5C;overflow:visible}.chat__av--orb .orb-sm{width:56%;height:56%}
.chat__head b{display:block;font-size:.95rem}.chat__head .mono-label{color:#6E7561}
.chat__wa{margin-left:auto;width:30px;height:30px;color:#4F513A}
.chat__msg{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:10px;padding:12px 14px;margin-top:12px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.chat__ico{width:26px;height:26px;flex:none;color:var(--tan);margin-top:2px}
.chat__msg b{display:block;font-size:.9rem}.chat__msg span{font-size:.82rem;color:#6E7561}
.chat__bar{display:flex;align-items:center;gap:10px;margin-top:14px;color:#90966E}
.chat__input{flex:1;height:34px;background:#fff;border-radius:999px;border:1px solid rgba(45,56,42,.08)}
.chat__send{width:34px;height:34px;border-radius:50%;background:#4F513A;color:#fff;display:grid;place-items:center;font-size:.8rem}
.team__foot{margin-top:3em;letter-spacing:.16em}
.team__foot-orb{color:var(--sand);width:1.1em;height:1.1em}
/* phones: stack the physician↔concierge thread vertically (it overflowed in a row) */
@media (max-width:640px){
  .team__thread{flex-direction:column;align-items:flex-start;gap:14px}
  .team__wire{flex:none;flex-direction:column;align-items:center;width:auto;min-width:0;height:26px;margin-left:31px;gap:0}
  .team__wireline{flex:1;width:1px;height:auto;background:linear-gradient(var(--sand),transparent,var(--sand))}
}

/* ---------------- APP ---------------- */
/* the app floats in the brand's Green Shade Gradient light-field */
.app{--bg:#4A5340;
  background:
    radial-gradient(70% 90% at 68% 28%, rgba(210,210,192,.45), transparent 62%),
    linear-gradient(118deg,#7E7D6B 0%,#5C5D49 36%,#434532 66%,#26261F 100%);
  --fg:#F4F2EF;--muted:rgba(244,242,239,.85);--rule:rgba(244,242,239,.26);--accent:#F4F2EF;
  --panel:rgba(244,242,239,.14);--panel-line:rgba(244,242,239,.28)}
.app__copy .lede{color:rgba(244,242,239,.9)}
/* no glow/gradient behind the phone (user note) */
.app .phone::before{background:none;display:none}
/* the phone screen is its own light world — restore dark-on-cream tokens inside */
.app .phone__screen{--fg:#2A3128;--muted:#6E7561;--rule:rgba(45,56,42,.1);--accent:var(--tan)}
.phone{width:min(300px,80%);margin:0 auto;aspect-ratio:300/620;background:#0d100b;border-radius:42px;padding:11px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(164,172,138,.14),inset 0 0 0 2px #222a20;position:relative}
/* warm glow halo behind the phone (m06) — breathes */
.phone::before{content:"";position:absolute;inset:-24%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,206,143,.28),rgba(231,206,143,.08) 45%,transparent 68%);
  animation:soft-glow 4.5s ease-in-out infinite}
.phone__notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#0d0b08;border-radius:14px;z-index:5}
.phone__screen{width:100%;height:100%;background:var(--oat);border-radius:32px;overflow:hidden;padding:30px 14px 14px;display:flex;flex-direction:column;gap:9px;color:#2A3128}
.appui__top{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 6px}
.appui__logo{display:flex;align-items:center;gap:4px;font-family:var(--serif);font-weight:300}.appui__logo .orb-sm{width:16px;height:16px}
.appui__set{opacity:.5}
.appui__card{background:#fff;border-radius:12px;padding:11px 13px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.appui__age{display:flex;align-items:center;justify-content:space-between}
.appui__age .num{font-size:38px}.appui__ring{color:var(--tan);width:34px;height:34px}
.appui__delta{font-size:10px;color:#6E7561}.appui__delta i{color:var(--olive);font-style:normal;font-weight:600}
.appui__protocol ul{list-style:none;margin-top:6px}
.appui__protocol li{display:flex;justify-content:space-between;font-size:11px;padding:5px 0;border-bottom:1px solid rgba(36,30,21,.06)}
.appui__protocol li i{font-style:normal;color:#90966E;font-family:var(--mono);font-size:9px}
.appui__next{background:var(--bark);color:var(--oat);border-radius:12px;padding:11px 13px;margin-top:auto}
.appui__next-row{display:flex;align-items:center;gap:8px;margin-top:5px}
.appui__next-row b{font-size:13px}.appui__sun{color:var(--sand)}
.appui__go{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--tan);color:var(--bark);display:grid;place-items:center;font-size:.7rem}
.appui__mono{font-size:9px}

/* ---------------- SCIENCE CTA ---------------- */
.science-cta .statement{margin:.4em 0 .7em}
.sci__btn{margin-top:1.6em}
.sciproof{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,30px);margin-top:3em}
.sciproof__card{padding:20px 22px}
.sciproof__chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sciproof__chead .mono-label{display:flex;align-items:center;gap:8px}.sciproof__chead .mono-label svg{width:16px;height:16px}
.sciproof__body{display:flex;align-items:center;gap:18px}
.sciproof__motif{width:54px;flex:none;color:var(--tan)}.dna-motif{width:100%;height:auto}
.sciproof__val{display:flex;align-items:baseline;gap:4px}.sciproof__val .num{font-size:clamp(34px,5vw,46px)}.sciproof__val span{color:var(--muted)}
.sciproof__link{color:var(--sand)}.ic-check{width:46px;height:46px}
.sciproof__cap{margin-top:2em;opacity:.7}
@media (max-width:860px){.sciproof{grid-template-columns:1fr}.sciproof__link{transform:rotate(90deg);justify-self:center}}

/* ---------------- WHY FIFTY ---------------- */
.whyfifty__copy .statement{font-size:clamp(34px,3.7vw,60px)}  /* matched to the complete-section headline (client: consistent sizes) */
/* sub-statement: same display treatment as the section headlines, one size down
   (scoped under __copy to outrank the .whyfifty__copy .statement size above) */
.whyfifty__copy .whyfifty__sub{font-size:clamp(24px,2.5vw,38px);margin:.5em 0 1.1em}
.whyfifty__rule{display:block;width:46px;height:1px;background:var(--rule);margin:1em 0 1.4em}
.whyfifty__copy .body{margin-bottom:1em}
.whyfifty__amb{color:var(--fg)}
.whyfifty__tag{display:inline-block;margin-top:1.2em;border:1px solid var(--rule);border-radius:4px;padding:.5em .8em;font-size:11px;color:var(--muted)}

/* ---------------- APPLY (home) ---------------- */
/* solo layout after the "50" orbit mark was removed — copy stands on its own */
.applyhome--solo .applyhome__copy{max-width:760px}
.applyhome__copy .statement{margin:.3em 0 .6em}
/* "150." carries the brand grotesk, not the serif italic (screen review) */
.applyhome__copy .statement em{font-family:var(--sans);font-style:normal;color:var(--sand)}
.applyhome__copy .btn{margin-top:1.8em}
.applyhome__mark{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:280px}
.applyhome__50{font-size:clamp(120px,16vw,230px);color:var(--sand);line-height:1}
.applyhome__orbit{position:relative;width:clamp(120px,15vw,210px);aspect-ratio:1;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;color:var(--sand)}
.applyhome__orbit::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(205,187,163,.3)}
/* icon pinned to the exact circle centre (screen review: it sat high) */
.applyhome__steth{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;height:38%;color:var(--sand);display:grid;place-items:center}
.applyhome__steth svg{width:100%;height:100%}
.applyhome__rl{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;color:var(--muted)}
/* orbital cardinal dots glow + breathe (consistency with the endcta orbital — "everything glows") */
.applyhome__d{position:absolute;border-radius:50%;background:var(--sand);
  box-shadow:0 0 7px 1px var(--sand),0 0 16px 3px rgba(231,206,143,.42);
  animation:dot-pulse 2.8s ease-in-out infinite}
.applyhome__d1{width:10px;height:10px;top:-5px;left:50%;transform:translateX(-50%)}
.applyhome__d2{width:8px;height:8px;right:-4px;top:50%;transform:translateY(-50%);animation-delay:-.9s}
.applyhome__d3{width:12px;height:12px;bottom:-6px;left:42%;animation-delay:-1.8s}
.applyhome__pulse{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:2.4em auto 0}
.applyhome__pulseline{flex:1;height:1px;background:linear-gradient(90deg,var(--sand),transparent)}
@media (max-width:860px){.applyhome__50{font-size:clamp(84px,26vw,120px)}.applyhome__mark{min-height:200px}}
/* the HTML reader notes carry the AI/PHYSICIAN labels — hide the instrument's
   own circle captions so they don't collide (m04) */
.complete__converge text[text-anchor="middle"]{display:none}

/* ---------------- THE FOUR ORBITAL POINTS (deck p4–5) ---------------- */
.oiel{padding-top:clamp(50px,7vh,90px);padding-bottom:clamp(50px,7vh,90px)}
.oiel .mono-label{display:block;text-align:center;margin-bottom:2.2em;color:var(--tan)}
.oiel__row{display:flex;align-items:flex-start;justify-content:center;gap:clamp(14px,2.6vw,44px);flex-wrap:wrap}
.oiel__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45em;min-width:150px}
.oiel__item em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,2.6vw,40px);color:var(--display,#757C5C);line-height:1}
.oiel__cap{font-size:.82rem;color:var(--muted);line-height:1.45}
.oiel__arr{font-size:clamp(18px,1.8vw,26px);color:var(--tan);opacity:.6;margin-top:.5em}
/* the four dots pulse in sequence — the cycle turning (glow, in brand language) */
/* the dots GROW along the sequence — Longevity carries the largest */
.oiel__dot{width:8px;height:8px;border-radius:50%;background:var(--tan);margin-bottom:.3em;
  animation:oiel-pulse 4.8s ease-in-out infinite}
.oiel__dot--e{animation-delay:1.2s;width:12px;height:12px}
.oiel__dot--s{animation-delay:2.4s;width:16px;height:16px}
.oiel__dot--w{animation-delay:3.6s;width:22px;height:22px}
@keyframes oiel-pulse{0%,100%{box-shadow:0 0 0 0 rgba(144,150,110,0);opacity:.75}
  8%{box-shadow:0 0 14px 4px rgba(217,188,122,.55);opacity:1}16%{box-shadow:0 0 0 0 rgba(144,150,110,0)}}
@media (max-width:760px){.oiel__arr{display:none}.oiel__row{gap:26px}}

/* ---------------- YOUR CLOCK (doc 2026-07-15) ---------------- */
.clock{text-align:center;padding-bottom:clamp(44px,6vh,80px)}
.clock .statement{margin-bottom:.8em}
.clock__body{max-width:58ch;margin:0 auto 1em}
.clock__strong{color:var(--fg);font-weight:600}
/* close the dead band between the clock statement and the how cards (screen review) */
.how{padding-top:clamp(44px,6vh,80px)}
/* the schedule CTA sits centred under the whole section, not tucked bottom-left */
.complete__cta{grid-column:1/-1;text-align:center;margin-top:2.6em}

/* ============================================================
   LIGHT LANDING THEME (client review) — warm-white field, premium
   deep-green accents. Scoped to the home page so other pages are
   untouched. Hero handled above; this covers nav + buttons + the
   complete/apply sections now flipped to sec--oat-deep.
   ============================================================ */
/* nav reads dark over the light home */
body[data-page="home"] .nav{color:#22271F}
/* translucent glass bar (client ask) — blur + low-opacity warm white */
body[data-page="home"] .nav--solid{background:rgba(246,244,238,.55);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-bottom-color:rgba(34,39,31,.08)}
body[data-page="home"] .nav__apply:hover{background:#2E3B2A}
body[data-page="home"] .nav__apply:hover span{color:#F5F4EF}

/* premium deep-green filled buttons across the landing (was bright sage) */
body[data-page="home"] .btn--sand,
body[data-page="home"] .btn--primary{background:#2E3B2A;color:#F5F4EF;
  box-shadow:0 12px 30px -16px rgba(46,59,42,.5)}
body[data-page="home"] .btn--sand:hover,
body[data-page="home"] .btn--primary:hover{background:#26311F;
  box-shadow:0 16px 40px -18px rgba(46,59,42,.6)}
body[data-page="home"] .btn--ghost{border-color:rgba(46,59,42,.34);color:#2E3B2A}

/* complete + apply: green accents that read on the new light background */
.complete__coreorb{color:#2E3B2A}
.complete__reader .mono-label{color:#3E4A38}
.complete__reader p{color:#5A6152}
.complete__closer em{color:#3E4A38}
.applyhome__copy .statement em{color:#3E4A38}
.applyhome__pulseline{background:linear-gradient(90deg,#2E3B2A,transparent)}
.applyhome .glow-dot{background:#2E3B2A;box-shadow:0 0 10px 1px rgba(46,59,42,.25)}

/* ============================================================
   CHARM PASS (client: "landing lost its charm") — light-premium
   polish, all elements kept. Editorial warmth: gold eyebrows,
   white cards with soft green shadows, layered section fields.
   ============================================================ */
/* eyebrows in antique gold — warm signal, not grey */
body[data-page="home"] .eyebrow{color:#8A6D2F}

/* HOW: the 3 instrument panels become clean white cards */
.how{background:
  radial-gradient(60% 90% at 100% 0%, rgba(164,172,138,.14), transparent 60%),
  var(--oat)}
.how__viz{background:#FFFFFF;border:1px solid rgba(45,56,42,.08);border-radius:16px;
  box-shadow:0 24px 48px -32px rgba(45,56,42,.25)}
.how__h{position:relative;padding-top:.55em}
.how__h::before{content:"";position:absolute;top:0;left:2px;width:34px;height:2px;
  background:linear-gradient(90deg,#8A6D2F,rgba(138,109,47,.15))}
.how__readout{background:linear-gradient(90deg,transparent,#fff 22%)}

/* WHY-150: soft sand aura behind the gauge so the dial floats */
.whyfifty{background:
  radial-gradient(42% 60% at 76% 50%, rgba(216,206,164,.5), transparent 70%),
  var(--oat)}

/* COMPLETE: rings removed — clean deeper-cream band with hairlines,
   and fix the dark-theme leftovers that washed out on light */
.complete{border-top:1px solid rgba(45,56,42,.1);border-bottom:1px solid rgba(45,56,42,.1);
  background:
    radial-gradient(50% 70% at 82% 30%, rgba(164,172,138,.16), transparent 65%),
    var(--oat-deep)}
.complete__corecells{color:#90966E;opacity:.55}
.complete__coreorb{color:#2E3B2A;filter:none}
.complete__closer{color:#4A5142}

/* APPLY: centred, quiet, confident close */
.applyhome--solo{text-align:center}
.applyhome--solo .applyhome__copy{margin:0 auto}
.applyhome--solo .applyhome__copy .body{margin-left:auto;margin-right:auto}
.applyhome__pulse{max-width:520px;justify-content:center}
.applyhome__pulse .mono-label{color:#8A6D2F}

/* ============================================================
   AUDIT FIX PASS — authority, depth, exclusivity (client review 2).
   Later rules override the charm-pass block above by cascade order.
   ============================================================ */

/* 0 · HEADLINES: deep forest, never washed olive. Gold on the em accents. */
body[data-page="home"] .statement{color:#22301F}
body[data-page="home"] .statement em{color:#90966E}  /* the wordmark's logo green, per brand palette */
body[data-page="home"] .hero__h1{color:#1E2A1C}

/* the middle type voice — body copy speaks, doesn't annotate */
body[data-page="home"] .body{font-size:clamp(16px,1.15vw,18px);color:#4C5443}

/* 1 · HERO: statement-scale headline, confident nav, scroll invitation */
.hero__h1{font-size:clamp(40px,4.9vw,72px);max-width:min(780px,58vw)}
body[data-page="home"] .nav__link{opacity:.85;font-weight:460}
.hero__fig{mix-blend-mode:multiply}   /* kills any residual light box around the figure */
.hero__scrollcue{position:absolute;left:var(--pad-x);bottom:28px;display:flex;align-items:center;gap:12px;z-index:4}
.hero__scrollcue .mono-label{color:#8A6D2F;font-size:9px}
.hero__scrollline{width:64px;height:1px;background:rgba(46,59,42,.25);position:relative;overflow:hidden}
.hero__scrollline::after{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;background:#8A6D2F;
  animation:scrollcue 2.8s var(--ease-soft) infinite}
@keyframes scrollcue{to{left:110%}}

/* 2 · HOW: numbered sequence, living cards, stronger instruments */
.how__headline{margin-top:.5em;max-width:760px;
  font-size:clamp(34px,3.7vw,60px)}  /* same scale as the other section headlines */
/* the curtain edge: soft shadow where the how section slides over the hero */
.how{box-shadow:0 -34px 70px -34px rgba(46,59,42,.18)}
/* how -> whyfifty: separation via alternating field tones (no hairline) —
   sections run hero(deep) / how(light) / whyfifty(deep) / complete(light) */
.how{padding-bottom:calc(var(--sec-y)*.62)}
.whyfifty{padding-top:calc(var(--sec-y)*.68)}
.how__grid{counter-reset:step}
.how__panel{position:relative;counter-increment:step;
  transition:transform .55s var(--ease-settle)}
.how__panel::before{content:"0" counter(step);display:block;margin-bottom:.8em;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:#8A6D2F}
.how__viz{transition:box-shadow .55s var(--ease-settle),border-color .55s var(--ease-settle);
  color:#3A4534}
.how__panel .body{color:#565E4C}
.how__h::before{transition:width .5s var(--ease-settle)}
/* card animation: quiet lift, shadow bloom, gold rule grows */
.how__panel:hover{transform:translateY(-8px)}
.how__panel:hover .how__viz{box-shadow:0 36px 68px -32px rgba(46,59,42,.42);
  border-color:rgba(46,59,42,.18)}
.how__panel:hover .how__h::before{width:64px}
/* the loop dial's "On track" no longer shouts over the card */
.how__viz--center{color:#3E4A38}
.how__viz .inst--loop .inst-num{font-size:26px}

/* v153 · HOW cards match the client mockup: number chip, title, copy, then
   the instrument — all inside ONE soft panel; CTA moves under the headline */
.how__cta{margin-top:1.6em}
.how .how__grid{margin-top:2em}
.how__panel{background:rgba(255,255,255,.55);border:1px solid rgba(45,56,42,.1);
  border-radius:16px;padding:clamp(20px,2vw,30px);
  box-shadow:0 24px 50px -40px rgba(46,59,42,.28);
  transition:transform .55s var(--ease-settle),box-shadow .55s var(--ease-settle)}
.how__panel::before{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(138,109,47,.45);border-radius:50%;letter-spacing:.12em;text-indent:.12em}
.how__panel .body{margin-bottom:1.5em}
/* the instrument sits flush at the card's bottom, no box-in-a-box */
.how__panel .how__viz{margin:auto 0 0;background:transparent;border:none}
.how__panel:hover{box-shadow:0 36px 68px -32px rgba(46,59,42,.4)}
.how__panel:hover .how__viz{box-shadow:none;border-color:transparent}

/* 3 · WHY-150: the arc-of-life timeline (gauge dial retired, v137) */
.whyfifty{background:
  radial-gradient(40% 56% at 78% 62%, rgba(216,206,164,.34), transparent 70%),
  radial-gradient(52% 78% at 6% 8%, rgba(164,172,138,.16), transparent 60%),
  var(--oat-deep)}
/* copy left, timeline in the right column beside it (client: "this image should
   go in this empty space") — asymmetric split so the wide art gets room */
@media (min-width:861px){.whyfifty__grid{grid-template-columns:1fr 1.35fr}}  /* scoped: an unscoped rule out-cascades styles.css's mobile 1fr collapse */
.whyfifty__timeline{position:relative;width:100%;align-self:center;margin:0;
  container-type:inline-size}
@media (max-width:860px){
  .whyfifty__timeline{margin-top:clamp(26px,5vw,48px)}
}
.wtl__img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.wtl__lab{position:absolute;translate:-50% 0;text-align:center;  /* `translate`, not transform — GSAP rise tween owns transform */
  font-family:var(--sans);font-weight:620;text-transform:uppercase;
  letter-spacing:.26em;font-size:clamp(8px,1.05vw,12.5px);line-height:1.55;
  font-size:clamp(7.5px,1.15cqw,12.5px);   /* scales with the figure, not the viewport (vw line above = fallback) */
  color:#4A543F;white-space:nowrap}
.wtl__lab--peak{color:#8A6D2F;white-space:normal;width:11em}
.wtl__axis{position:absolute;left:6.3%;width:82.4%;top:87.5%}
.wtl__axis i{display:block;height:5px;
  background:
    repeating-linear-gradient(90deg, rgba(46,59,42,.3) 0 1px, transparent 1px 5%),
    linear-gradient(rgba(46,59,42,.26), rgba(46,59,42,.26)) 0 100%/100% 1px no-repeat}
.wtl__axis b{position:absolute;left:50%;top:9px;transform:translateX(-50%);
  font-family:var(--sans);font-weight:620;text-transform:uppercase;
  letter-spacing:.3em;font-size:clamp(8px,.95vw,11px);font-size:clamp(7.5px,1cqw,11px);color:#6B7261}

/* 4 · COMPLETE: field warmth back (no circles), visible instrument, a real closer */
.complete{background:
  radial-gradient(46% 66% at 80% 36%, rgba(216,206,164,.3), transparent 68%),
  radial-gradient(52% 82% at 4% 92%, rgba(164,172,138,.16), transparent 62%),
  var(--oat)}
.complete__viz{color:#2E3B2A}
.complete__reader{border-left:2px solid #8A6D2F;padding-left:12px}
.complete__reader .mono-label{color:#8A6D2F}
body[data-page="home"] .complete__closer{font-size:clamp(19px,1.9vw,27px);line-height:1.5;color:#3E4636;max-width:860px}  /* page-scoped to outrank the .body base size */
.complete__closer em{font-family:var(--serif);font-style:italic;color:#757C5C}  /* olive (palette) — readable at lede size */

/* 5 · APPLY: scarcity staged — a quiet monumental 50 behind the words */
.applyhome--solo{position:relative;overflow:hidden}
.applyhome--solo::before{content:"50";position:absolute;right:4%;top:50%;transform:translateY(-52%);
  font-family:var(--sans);font-weight:620;line-height:1;pointer-events:none;
  font-size:clamp(220px,30vw,460px);color:rgba(138,109,47,.08)}
.applyhome--solo .sec__inner{position:relative;z-index:1}
.applyhome__pulse .mono-label{color:#8A6D2F;letter-spacing:.22em}

@media (max-width:860px){
  .hero__scrollcue{display:none}
  .applyhome--solo::before{font-size:200px;right:-6%;opacity:.7}
}