/* ============================================================================
   NEXUSBODY · SITE STYLES · v2 "The Vitruvian Era" (navy)
   ----------------------------------------------------------------------------
   Built on 00-brand/tokens.css (inlined below verbatim so this file is the
   single stylesheet the site loads). Do NOT hand-pick hex anywhere: reference
   the custom properties. Source laws: CLI_BRIEF.md §1, ux-ui-direction.md.
   Masterline: Master the form.
   ============================================================================ */

/* --- tokens.css, inlined verbatim (source: 00-brand/tokens.css) ------------ */
:root{
  --navy:#1E2B4D;
  --navy-deep:#151F39;
  --porcelain:#F7F5F0;
  --paper:#FFFFFF;
  --slate:#6B7385;
  --slate-light:#AEB4C0;
  --line:#E4E0D7;
  --highlight:#E4E9F4;

  --color-bg:var(--porcelain);
  --color-surface:var(--paper);
  --color-text:var(--navy);
  --color-text-muted:var(--slate);
  --color-border:var(--line);
  --color-emphasis:var(--highlight);
  --color-field-dark:var(--navy-deep);
  --color-text-on-dark:var(--porcelain);
  --color-muted-on-dark:var(--slate-light);

  --font-display:"Cinzel","Times New Roman",serif;
  --font-editorial:"Cormorant Garamond",Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --weight-display:600;
  --weight-editorial:500;
  --weight-body:400;
  --weight-medium:500;
  --weight-semibold:600;

  --kicker-size:11px;
  --kicker-tracking:2.4px;
  --radius-max:8px;
  --hairline-width:1px;

  /* type scale (ux-ui-direction.md §4.2) */
  --text-display-1:clamp(2.5rem,6vw,4.75rem);
  --text-display-2:clamp(1.75rem,3.5vw,2.75rem);
  --text-editorial:clamp(1.625rem,3vw,2.375rem);
  --text-pull:clamp(1.375rem,2.6vw,2rem);
  --text-stat:clamp(2.25rem,4.5vw,3.5rem);
  --text-numeral:clamp(2rem,4vw,3.25rem);

  /* measures (ux-ui-direction.md §5) */
  --w-content:1140px;
  --w-wide:1320px;
  --w-editorial:720px;
}

/* --- reset ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--w-content);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--w-wide);margin:0 auto;padding:0 24px}
.wrap-editorial{max-width:var(--w-editorial);margin:0 auto;padding:0 24px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--porcelain);
  padding:12px 20px;font-size:14px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:12px;top:12px}

/* --- kicker (fixed spec, tokens.css) --------------------------------------- */
.kicker{
  font-family:var(--font-body);
  font-size:var(--kicker-size);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--kicker-tracking);
  text-transform:uppercase;
  color:var(--slate);
}
.kicker.navy{color:var(--navy)}
.kicker.on-dark{color:var(--slate-light)}

/* --- type ------------------------------------------------------------------- */
.display-1,.display-2{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  text-transform:uppercase;
  line-height:1.08;
}
.display-1{font-size:var(--text-display-1);letter-spacing:.05em}
.display-2{font-size:var(--text-display-2);letter-spacing:.06em;line-height:1.12}
.editorial{
  font-family:var(--font-editorial);
  font-weight:var(--weight-editorial);
  font-size:var(--text-editorial);
  line-height:1.2;
}
.pull{
  font-family:var(--font-editorial);
  font-weight:var(--weight-editorial);
  font-style:italic;
  font-size:var(--text-pull);
  line-height:1.35;
}
.body-lg{font-size:1.125rem;line-height:1.6}
.body-sm{font-size:.875rem;line-height:1.55}
.caption{font-size:.8125rem;line-height:1.5;color:var(--slate)}
.muted{color:var(--slate)}
.stat-num{
  font-size:var(--text-stat);
  font-weight:var(--weight-semibold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  line-height:1;
}
.numeral{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--text-numeral);
  line-height:1;
  letter-spacing:.04em;
}
.tnum{font-variant-numeric:tabular-nums}

/* --- buttons ---------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:var(--weight-semibold);
  letter-spacing:.01em;
  text-decoration:none;
  text-align:center;
  padding:16px 32px;
  border-radius:4px;
  border:var(--hairline-width) solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
  cursor:pointer;
}
.btn-primary{background:var(--navy);color:var(--porcelain)}
.btn-primary:hover{background:var(--navy-deep)}
.btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-secondary:hover{background:var(--highlight)}
.btn-inverse{background:var(--porcelain);color:var(--navy)}
.btn-inverse:hover{background:var(--paper)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-block{display:block;width:100%}
.textlink{
  color:var(--navy);
  font-weight:var(--weight-medium);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  cursor:pointer;
}
.textlink.on-dark{color:var(--porcelain)}

/* --- nav -------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--porcelain);
  border-bottom:var(--hairline-width) solid var(--line);
}
.nav-inner{
  max-width:var(--w-wide);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--navy);
}
.brand img{height:34px;width:auto}
.brand .brand-word{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:19px;
  letter-spacing:.14em;
}
.nav-links{display:flex;gap:36px;align-items:center;list-style:none}
.nav-links a{
  font-size:14px;font-weight:var(--weight-medium);
  color:var(--slate);text-decoration:none;
  padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--navy);border-color:var(--navy)}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  padding:8px;margin-right:-8px;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--navy);
  margin:4px 0;transition:transform .2s ease,opacity .2s ease;
}
@media (max-width:900px){
  .nav-links,.nav-right .btn{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-drawer{
    display:none;
    border-top:var(--hairline-width) solid var(--line);
    padding:16px 24px 28px;
  }
  .nav.open .nav-drawer{display:block}
  .nav-drawer a{
    display:block;padding:14px 0;font-size:16px;
    color:var(--navy);text-decoration:none;
    border-bottom:var(--hairline-width) solid var(--line);
  }
  .nav-drawer .btn{display:block;margin-top:20px;width:100%}
}
@media (min-width:901px){.nav-drawer{display:none}}

/* --- sections --------------------------------------------------------------- */
.section{padding:112px 0}
.section-sm{padding:80px 0}
.section-rule{border:0;border-top:var(--hairline-width) solid var(--line);margin:0}
.section-head{max-width:640px;margin-bottom:64px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .kicker{display:block;margin-bottom:16px}
.section-head h2{margin-bottom:20px}
.section-head p{color:var(--slate)}
@media (max-width:640px){
  .section{padding:72px 0}
  .section-sm{padding:56px 0}
  .section-head{margin-bottom:40px}
}

/* --- generic hero ----------------------------------------------------------- */
.hero{padding:96px 0 104px}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.hero .kicker{display:block;margin-bottom:24px}
.hero h1{margin-bottom:28px}
.hero-sub{max-width:56ch;color:var(--navy);margin-bottom:36px}
.hero-cta-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.hero-note{margin-top:2px}
.hero-seal{justify-self:center;width:min(380px,100%)}
.hero-seal img{width:100%;height:auto}
@media (max-width:900px){
  .hero{padding:64px 0 80px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-seal{width:min(280px,80%);order:-1}
}

/* editorial hero (no seal): Method, About */
.hero-editorial{padding:104px 0 72px;text-align:left}
.hero-editorial .wrap-editorial{padding-left:24px;padding-right:24px}
.hero-editorial .kicker{display:block;margin-bottom:24px}
.hero-editorial h1{margin-bottom:24px;max-width:20ch}
.hero-editorial .hero-sub{color:var(--slate);max-width:60ch}
@media (max-width:640px){.hero-editorial{padding:72px 0 56px}}

/* --- stat band -------------------------------------------------------------- */
.statband{background:var(--highlight);padding:88px 0}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-bottom:48px}
.stat .stat-num{margin-bottom:14px}
.stat p{font-size:.9375rem;line-height:1.55;max-width:34ch}
.stat sup{font-size:.65em}
.stat-src{
  border-top:var(--hairline-width) solid rgba(30,43,77,.18);
  padding-top:20px;max-width:96ch;
}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr;gap:36px}}

/* --- enemy statement -------------------------------------------------------- */
.enemy{text-align:center}
.enemy-inner{max-width:var(--w-editorial);margin:0 auto;padding:0 24px}
.enemy .kicker{display:block;margin-bottom:20px}
.enemy .pull{margin-bottom:28px}
.enemy p.body{max-width:58ch;margin:0 auto 16px;color:var(--slate)}

/* --- six systems ------------------------------------------------------------ */
.systems-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--hairline-width) solid var(--line);
  border-left:var(--hairline-width) solid var(--line);
}
.system{
  border-right:var(--hairline-width) solid var(--line);
  border-bottom:var(--hairline-width) solid var(--line);
  padding:44px 36px;
  background:var(--porcelain);
}
.gauge{position:relative;width:92px;height:92px;margin-bottom:24px}
.gauge svg{position:absolute;inset:0;width:100%;height:100%}
.gauge .numeral{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;color:var(--navy);
}
.system h3{font-size:1rem;font-weight:var(--weight-semibold);letter-spacing:.02em;margin-bottom:8px}
.system p{font-size:.9375rem;color:var(--slate);line-height:1.55}
.systems-note{margin-top:28px}
@media (max-width:900px){.systems-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.systems-grid{grid-template-columns:1fr}.system{padding:32px 24px}}

/* --- programs by arc (home + list) ----------------------------------------- */
.programs-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.arc-label{
  display:flex;align-items:baseline;gap:16px;
  border-bottom:var(--hairline-width) solid var(--navy);
  padding-bottom:14px;margin-bottom:8px;
}
.arc-label .kicker{color:var(--navy)}
.arc-label span.arc-sub{font-size:.8125rem;color:var(--slate)}
.program{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:20px 0;border-bottom:var(--hairline-width) solid var(--line);
}
.program h4{font-size:1.0625rem;font-weight:var(--weight-semibold);letter-spacing:.01em}
.program p{font-size:.875rem;color:var(--slate);text-align:right}
.programs-cta{margin-top:56px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
@media (max-width:900px){.programs-grid{grid-template-columns:1fr;gap:48px}}

/* --- arc explainer panels (Programs page) ---------------------------------- */
.arc-panels{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.arc-panel{
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:40px 36px;background:var(--paper);
}
.arc-panel .kicker{display:block;color:var(--navy);margin-bottom:14px}
.arc-panel h3{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:1.75rem;margin-bottom:12px;line-height:1.2}
.arc-panel p{color:var(--slate);font-size:.9375rem}
@media (max-width:768px){.arc-panels{grid-template-columns:1fr}}

/* --- program cards (Programs page, persona blocks) ------------------------- */
.pcard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pcard{
  background:var(--paper);
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:32px;display:flex;flex-direction:column;gap:14px;
}
.pcard-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pcard h3{font-size:1.1875rem;font-weight:var(--weight-semibold)}
.pcard .arc-tag{
  font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--navy);background:var(--highlight);
  border-radius:3px;padding:4px 8px;white-space:nowrap;
}
.pcard .builds{font-size:.875rem;color:var(--slate);font-weight:var(--weight-medium)}
.pcard .situation{font-family:var(--font-editorial);font-style:italic;font-size:1.125rem;color:var(--navy);line-height:1.35}
.pcard ul{list-style:none;border-top:var(--hairline-width) solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:9px}
.pcard li{font-size:.875rem;color:var(--slate);padding-left:18px;position:relative}
.pcard li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border:1px solid var(--navy);border-radius:1px}
@media (max-width:768px){.pcard-grid{grid-template-columns:1fr}}

/* --- constants / feature row (Inside every program) ------------------------ */
.constants{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:var(--hairline-width) solid var(--line);
}
.constant{
  border-bottom:var(--hairline-width) solid var(--line);
  border-right:var(--hairline-width) solid var(--line);
  padding:28px 24px;
}
.constant:last-child{border-right:0}
.constant .numeral{font-size:1.25rem;color:var(--slate);margin-bottom:14px}
.constant h4{font-size:.9375rem;font-weight:var(--weight-semibold);margin-bottom:6px}
.constant p{font-size:.8125rem;color:var(--slate);line-height:1.5}
@media (max-width:900px){.constants{grid-template-columns:1fr 1fr}.constant:nth-child(2n){border-right:0}}
@media (max-width:480px){.constants{grid-template-columns:1fr}.constant{border-right:0}}

/* --- intake profile card (Future's "Michelle" pattern) --------------------- */
.intake{
  background:var(--paper);
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:40px;max-width:520px;
}
.intake .kicker{display:block;margin-bottom:22px;color:var(--navy)}
.intake dl{display:grid;grid-template-columns:auto 1fr;gap:14px 24px;margin-bottom:20px}
.intake dt{font-size:.8125rem;color:var(--slate);text-transform:uppercase;letter-spacing:1.2px;font-weight:var(--weight-semibold)}
.intake dd{font-size:.9375rem;font-weight:var(--weight-medium);text-align:right}
.intake dd.private{color:var(--slate);font-style:italic;font-weight:var(--weight-body)}
.intake .intake-foot{border-top:var(--hairline-width) solid var(--line);padding-top:16px}

/* --- proof cards ------------------------------------------------------------ */
.proof-lede{max-width:var(--w-editorial);margin-bottom:56px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proof-card{
  background:var(--paper);
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:32px;
  display:flex;flex-direction:column;gap:16px;min-height:220px;
}
.proof-card .kicker{font-size:10px}
.proof-card .pull{font-size:1.125rem;color:var(--slate)}
.proof-card .caption{margin-top:auto}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr}}

/* --- arc filter tabs (Proof) ----------------------------------------------- */
.tabs{display:inline-flex;border:var(--hairline-width) solid var(--line);border-radius:var(--radius-max);overflow:hidden;margin-bottom:40px}
.tabs button{
  background:var(--paper);border:0;cursor:pointer;
  font-family:var(--font-body);font-size:13px;font-weight:var(--weight-semibold);
  letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);
  padding:12px 24px;border-right:var(--hairline-width) solid var(--line);
  transition:background .15s ease,color .15s ease;
}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:var(--highlight);color:var(--navy)}

/* --- how it works steps ----------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.step .numeral{color:var(--slate);font-size:2.25rem;margin-bottom:20px}
.step h3{font-size:1.0625rem;font-weight:var(--weight-semibold);margin-bottom:10px}
.step p{font-size:.9375rem;color:var(--slate)}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:36px}}

/* --- pricing ---------------------------------------------------------------- */
.provisional{
  display:inline-block;
  font-size:11px;font-weight:var(--weight-semibold);
  letter-spacing:1.6px;text-transform:uppercase;
  color:var(--slate);
  border:var(--hairline-width) solid var(--line);
  border-radius:3px;
  padding:5px 10px;margin-bottom:20px;background:var(--paper);
}
.shared-features{
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:28px 32px;margin-bottom:32px;background:var(--paper);
}
.shared-features .kicker{display:block;margin-bottom:16px;color:var(--navy)}
.shared-features ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 32px}
.shared-features li{font-size:.875rem;color:var(--navy);padding-left:20px;position:relative}
.shared-features li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border:1.5px solid var(--navy);border-radius:1px}
@media (max-width:768px){.shared-features ul{grid-template-columns:1fr}}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{
  background:var(--paper);
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:36px 32px;
  display:flex;flex-direction:column;gap:14px;
}
.tier.recommended{border-color:var(--navy)}
.tier .tag{
  align-self:flex-start;font-size:10px;font-weight:var(--weight-semibold);
  letter-spacing:1.6px;text-transform:uppercase;color:var(--navy);
  background:var(--highlight);border-radius:3px;padding:4px 8px;
}
.tier h3{font-size:1.0625rem;font-weight:var(--weight-semibold)}
.tier .price{font-size:1.875rem;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.tier .price span{font-size:.875rem;font-weight:var(--weight-body);color:var(--slate)}
.tier .perday{font-size:.8125rem;color:var(--slate)}
.tier .adds{font-size:.9375rem;color:var(--slate);line-height:1.55}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.tier li{font-size:.875rem;color:var(--navy);padding-left:18px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border:1px solid var(--navy);border-radius:1px}
.tier .tier-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.tier .caption{margin-top:0}
.pricing-foot{margin-top:36px}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}

/* --- comparison table ------------------------------------------------------- */
.table-scroll{overflow-x:auto}
.compare{width:100%;border-collapse:collapse;min-width:640px}
.compare th,.compare td{
  text-align:left;padding:18px 20px;
  border-bottom:var(--hairline-width) solid var(--line);
  font-size:.9375rem;
}
.compare thead th{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--slate);font-weight:var(--weight-semibold);vertical-align:bottom;
}
.compare thead th.us{color:var(--navy)}
.compare tbody th{font-weight:var(--weight-medium);color:var(--navy)}
.compare td{color:var(--slate);text-align:center}
.compare td.yes{color:var(--navy);font-weight:var(--weight-semibold)}
.compare td.no{color:var(--slate-light)}
.compare .col-us{background:var(--highlight)}

/* --- essay / prose ---------------------------------------------------------- */
.prose{max-width:var(--w-editorial);margin:0 auto}
.prose p{margin-bottom:20px;line-height:1.7}
.prose p:last-child{margin-bottom:0}
.prose .lead{font-family:var(--font-editorial);font-size:1.375rem;line-height:1.4;color:var(--navy);margin-bottom:28px}
.doctrine{max-width:62ch;margin:0 auto;text-align:left}
.doctrine p{font-family:var(--font-editorial);font-size:1.3125rem;line-height:1.5;color:var(--navy);margin-bottom:22px}

/* --- method system blocks --------------------------------------------------- */
.msys{padding:96px 0;border-top:var(--hairline-width) solid var(--line)}
.msys-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.msys.flip .msys-grid{grid-template-columns:7fr 5fr}
.msys.flip .msys-art{order:-1}
.msys .kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.msys .kicker .numeral{font-size:2rem;color:var(--navy)}
.msys .kicker .kick-name{color:var(--slate)}
.msys h2{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.15;margin-bottom:18px}
.msys p{color:var(--slate);max-width:52ch}
.msys-art{display:flex;align-items:center;justify-content:center}
.msys-art svg{width:100%;max-width:360px;height:auto}
@media (max-width:900px){
  .msys-grid,.msys.flip .msys-grid{grid-template-columns:1fr;gap:40px}
  .msys.flip .msys-art{order:0}
  .msys-art{order:-1}
}

/* --- enhancement-on-top diagram -------------------------------------------- */
.ontop{text-align:center}
.ontop-diagram{max-width:520px;margin:0 auto 40px}
.ontop-diagram svg{width:100%;height:auto}

/* --- lineage ---------------------------------------------------------------- */
.lineage{text-align:center}
.lineage .seal-mark{width:180px;margin:0 auto 32px}
.lineage .pull{max-width:24ch;margin:0 auto 20px}

/* --- tenets (About) --------------------------------------------------------- */
.tenets{list-style:none;border-top:var(--hairline-width) solid var(--line)}
.tenets li{
  display:flex;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:var(--hairline-width) solid var(--line);
}
.tenets .num{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--slate);font-size:1.25rem;min-width:2ch}
.tenets .t-text{font-family:var(--font-editorial);font-size:1.375rem;line-height:1.35;color:var(--navy)}

/* --- numbered standard / promises ------------------------------------------ */
.standard{counter-reset:std;list-style:none;max-width:760px}
.standard li{
  position:relative;padding:22px 0 22px 56px;
  border-bottom:var(--hairline-width) solid var(--line);
  color:var(--slate);font-size:.9375rem;line-height:1.6;
}
.standard li::before{
  counter-increment:std;content:counter(std);
  position:absolute;left:0;top:22px;
  font-family:var(--font-display);font-weight:var(--weight-display);
  color:var(--navy);font-size:1.125rem;
}
.standard li strong{color:var(--navy);font-weight:var(--weight-semibold)}

/* --- founder block (About) -------------------------------------------------- */
.founder{
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:44px;max-width:760px;background:var(--paper);
}
.founder .kicker{display:block;margin-bottom:16px;color:var(--navy)}
.founder h3{font-family:var(--font-editorial);font-size:1.75rem;font-weight:var(--weight-editorial);margin-bottom:14px}
.founder p{color:var(--slate);max-width:60ch}

/* --- partner strip (home) --------------------------------------------------- */
.partner{
  border-top:var(--hairline-width) solid var(--line);
  border-bottom:var(--hairline-width) solid var(--line);
  padding:72px 0;
}
.partner-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.partner h2{font-size:var(--text-editorial);max-width:22ch;font-family:var(--font-editorial);font-weight:var(--weight-editorial);line-height:1.2}
.partner .kicker{display:block;margin-bottom:14px}
.partner p{color:var(--slate);max-width:52ch;margin-top:12px;font-size:.9375rem}
@media (max-width:900px){.partner-inner{flex-direction:column;align-items:flex-start}}

/* --- partners page (B2B) ---------------------------------------------------- */
.dark{background:var(--navy-deep);color:var(--porcelain)}
.dark .kicker{color:var(--slate-light)}
.dark p{color:var(--slate-light)}
.hero-dark{background:var(--navy-deep);color:var(--porcelain);padding:120px 0}
.hero-dark .kicker{display:block;margin-bottom:24px;color:var(--slate-light)}
.hero-dark h1{margin-bottom:24px;max-width:16ch}
.hero-dark .hero-sub{color:var(--slate-light);max-width:48ch;margin-bottom:32px}
.segments{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.segment{
  border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);
  padding:32px 28px;background:var(--paper);
  display:flex;flex-direction:column;gap:14px;
}
.segment h3{font-size:1.0625rem;font-weight:var(--weight-semibold)}
.segment p{font-size:.875rem;color:var(--slate);flex-grow:1}
.segment .textlink{font-size:.875rem;align-self:flex-start}
@media (max-width:900px){.segments{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.segments{grid-template-columns:1fr}}

.retmath{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.retmath .stat-num{margin-bottom:12px;color:var(--navy)}
.retmath p{font-size:.9375rem;color:var(--slate);max-width:32ch}
@media (max-width:900px){.retmath{grid-template-columns:1fr;gap:32px}}

.compliance-block{
  background:var(--highlight);border-radius:var(--radius-max);
  padding:56px 48px;text-align:center;
}
.compliance-block .kicker{display:block;margin-bottom:20px;color:var(--navy)}
.compliance-block p{font-family:var(--font-editorial);font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.4;color:var(--navy);max-width:34ch;margin:0 auto}

.getlist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.getlist li{padding:20px 0 20px 24px;position:relative;border-bottom:var(--hairline-width) solid var(--line);font-size:.9375rem;color:var(--navy)}
.getlist li span{display:block;color:var(--slate);font-size:.8125rem;margin-top:4px}
.getlist li::before{content:"";position:absolute;left:0;top:26px;width:8px;height:8px;border:1.5px solid var(--navy);border-radius:1px}
@media (max-width:768px){.getlist{grid-template-columns:1fr}}

/* --- contact form stub ------------------------------------------------------ */
.form{max-width:560px}
.form .field{margin-bottom:20px}
.form label{display:block;font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.4px;margin-bottom:8px;color:var(--navy)}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--navy);
  background:var(--paper);border:var(--hairline-width) solid var(--line);
  border-radius:4px;padding:13px 15px;
  transition:border-color .15s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--navy)}
.form textarea{resize:vertical;min-height:110px}
.form .form-note{margin-top:14px}
.form-ok{
  display:none;border:var(--hairline-width) solid var(--line);border-radius:var(--radius-max);
  padding:28px 32px;background:var(--highlight);
}
.form-ok.show{display:block}
.form-ok h3{font-family:var(--font-editorial);font-size:1.5rem;margin-bottom:8px}

/* --- FAQ accordions (native details) --------------------------------------- */
.faq-group{margin-bottom:56px}
.faq-group > .kicker{display:block;margin-bottom:8px;color:var(--navy)}
.faq details{border-bottom:var(--hairline-width) solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-size:1.0625rem;font-weight:var(--weight-medium);color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:30px;
  width:10px;height:10px;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-body{padding:0 40px 26px 0;color:var(--slate);max-width:70ch}
.faq .faq-body p{margin-bottom:12px}
.faq .faq-body p:last-child{margin-bottom:0}

/* --- privacy pledge block (Levels pattern) --------------------------------- */
.pledge{
  border:var(--hairline-width) solid var(--navy);
  border-radius:var(--radius-max);
  padding:36px 40px;background:var(--paper);max-width:760px;
}
.pledge .kicker{display:block;margin-bottom:16px;color:var(--navy)}
.pledge p{color:var(--slate);max-width:62ch}
.pledge p + p{margin-top:12px}

/* --- closer + footer -------------------------------------------------------- */
.closer{background:var(--navy-deep);color:var(--porcelain);padding:128px 0 0;text-align:center}
.closer h2{margin-bottom:20px}
.closer .body-lg{color:var(--slate-light);max-width:46ch;margin:0 auto 40px}
@media (max-width:640px){.closer{padding:88px 0 0}}
.footer{
  margin-top:112px;
  border-top:var(--hairline-width) solid rgba(174,180,192,.25);
  padding:56px 0 48px;text-align:left;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:48px;margin-bottom:48px}
.footer .brand{color:var(--porcelain)}
.footer .brand .brand-word{font-size:17px}
.footer .est{font-size:11px;letter-spacing:2.4px;color:var(--slate-light);margin-top:12px;text-transform:uppercase}
.footer ul{list-style:none}
.footer ul a{display:block;font-size:13px;color:var(--slate-light);text-decoration:none;padding:5px 0}
.footer ul a:hover{color:var(--porcelain)}
.footer h5{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:2px;text-transform:uppercase;color:var(--slate-light);margin-bottom:12px}
.notes p{font-size:12px;line-height:1.6;color:var(--slate-light);margin-bottom:10px}
.notes sup{color:var(--porcelain)}
.copyright{
  border-top:var(--hairline-width) solid rgba(174,180,192,.2);
  padding-top:24px;font-size:12px;color:var(--slate-light);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* --- utilities -------------------------------------------------------------- */
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.stack-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap}

/* --- motion: progressive enhancement (ux-ui-direction.md §8) ---------------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .hero-sub,.hero-cta-row,.hero-note{animation:fadeup .4s ease both}
  .hero-cta-row{animation-delay:.1s}
  .hero-note{animation-delay:.2s}
  @keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-sub,.hero-cta-row,.hero-note{animation:none}
}

/* ============================================================================
   QUIZ (quiz.html) · one-question-per-screen flow, mobile-first
   ============================================================================ */
.quiz-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--porcelain)}
.quiz-top{border-bottom:var(--hairline-width) solid var(--line);background:var(--porcelain)}
.quiz-top-inner{max-width:640px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:16px}
.quiz-back{
  background:none;border:0;cursor:pointer;color:var(--slate);
  font-family:var(--font-body);font-size:22px;line-height:1;padding:4px 8px;border-radius:4px;
}
.quiz-back:hover{color:var(--navy)}
.quiz-back[hidden]{visibility:hidden}
.quiz-progress{flex:1}
.quiz-progress-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.quiz-progress-fill{height:100%;background:var(--navy);width:0;transition:width .3s ease}
.quiz-progress-label{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--slate);font-weight:var(--weight-semibold);white-space:nowrap}
.quiz-brand{display:flex;align-items:center}
.quiz-brand img{height:28px}
.quiz-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:56px 24px 96px}
.quiz-card{width:100%;max-width:560px}
.quiz-screen{display:none}
.quiz-screen.active{display:block;animation:qfade .15s ease both}
@media (prefers-reduced-motion:reduce){.quiz-screen.active{animation:none}}
@keyframes qfade{from{opacity:0}to{opacity:1}}
.quiz-screen .kicker{display:block;margin-bottom:18px}
.quiz-screen .kicker.optional{color:var(--navy)}
.quiz-q{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:clamp(1.625rem,4vw,2.25rem);line-height:1.2;margin-bottom:14px}
.quiz-sub{color:var(--slate);margin-bottom:32px;max-width:52ch}
.quiz-options{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.quiz-opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--paper);border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);padding:20px 22px;cursor:pointer;
  font-family:var(--font-body);font-size:1.0625rem;color:var(--navy);
  transition:border-color .15s ease,background .15s ease;
}
.quiz-opt:hover{border-color:var(--navy)}
.quiz-opt[aria-pressed="true"],.quiz-opt.selected{background:var(--highlight);border-color:var(--navy)}
.quiz-opt .dot{width:18px;height:18px;border:1.5px solid var(--slate-light);border-radius:50%;flex-shrink:0;position:relative;transition:border-color .15s ease}
.quiz-opt.selected .dot{border-color:var(--navy)}
.quiz-opt.selected .dot::after{content:"";position:absolute;inset:3px;background:var(--navy);border-radius:50%}
.quiz-privacy{
  display:flex;gap:12px;border-left:2px solid var(--navy);
  padding:14px 0 14px 18px;margin-bottom:24px;
}
.quiz-privacy p{font-size:.8125rem;color:var(--slate);line-height:1.5;max-width:60ch}
.quiz-interstitial{text-align:center;padding:24px 0}
.quiz-interstitial .pull{margin-bottom:24px;max-width:32ch;margin-left:auto;margin-right:auto}
.quiz-btn-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:8px}
.quiz-fields{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.quiz-fields label{display:block;font-size:13px;font-weight:var(--weight-semibold);margin-bottom:7px;color:var(--navy)}
.quiz-fields input{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--navy);
  background:var(--paper);border:var(--hairline-width) solid var(--line);
  border-radius:4px;padding:14px 15px;
}
.quiz-fields input:focus{outline:none;border-color:var(--navy)}
.quiz-inline{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:440px){.quiz-inline{grid-template-columns:1fr}}

/* loader */
.quiz-loader{text-align:center;padding:20px 0}
.quiz-loader h2{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:1.875rem;margin-bottom:36px}
.loader-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:420px;margin:0 auto}
.loader-gauge{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.35;transition:opacity .3s ease}
.loader-gauge.on{opacity:1}
.loader-gauge .gauge{width:64px;height:64px;margin:0}
.loader-gauge .numeral{font-size:1.25rem}
.loader-gauge span.lg-name{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--slate);font-weight:var(--weight-semibold)}

/* results / payoff */
.quiz-payoff{text-align:center}
.payoff-match{
  display:inline-flex;flex-direction:column;gap:6px;align-items:center;
  border:var(--hairline-width) solid var(--navy);border-radius:var(--radius-max);
  padding:28px 44px;margin-bottom:24px;background:var(--paper);
}
.payoff-match .p-arc{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--slate);font-weight:var(--weight-semibold)}
.payoff-match .p-prog{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:1.75rem;letter-spacing:.05em;color:var(--navy)}
.payoff-blur{
  margin-top:32px;border:var(--hairline-width) solid var(--line);border-radius:var(--radius-max);
  padding:32px;filter:blur(5px);opacity:.6;pointer-events:none;user-select:none;text-align:left;
}
.results-blueprint{display:flex;flex-direction:column;gap:40px}
.results-head{text-align:center;margin-bottom:8px}
.result-block{border-top:var(--hairline-width) solid var(--line);padding-top:28px}
.result-block > .kicker{display:block;margin-bottom:16px;color:var(--navy)}
.result-tier{
  border:var(--hairline-width) solid var(--navy);border-radius:var(--radius-max);
  padding:32px;background:var(--highlight);
}
.result-tier .reason{font-family:var(--font-editorial);font-style:italic;font-size:1.1875rem;color:var(--navy);margin-bottom:16px}
.result-tier .price{font-size:1.75rem;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;margin-bottom:6px}
.result-tier .price span{font-size:.875rem;font-weight:var(--weight-body);color:var(--slate)}

/* ============================================================================
   THE "MASTER THE FORM" EXPERIENCE  (scroll-driven marble statue)  [statue.js]
   ----------------------------------------------------------------------------
   Two layouts share one markup:
     · BASE (no-JS / prefers-reduced-motion): a calm STATIC composition, in
       normal flow. Headline, poster statue feathered into the porcelain field,
       the six systems, and the CTAs. Everything paints without JS.
     · .is-scroll (added by statue.js when motion is allowed): a pinned,
       scroll-scrubbed sequence. The figure turns and catches light; the six
       systems annotate the form; the headline recedes; the CTAs resolve.
   Colors reference the navy tokens. One navy emphasis; whitespace as luxury.
   ============================================================================ */

.form-exp{position:relative;background:var(--porcelain)}

/* ---- BASE (static) layout ---- */
.form-sticky{position:relative}
.form-stage{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:40px;max-width:var(--w-content);margin:0 auto;padding:88px 24px 96px;
}
.form-figure{position:relative;width:min(340px,72vw);aspect-ratio:760/1008}
.form-poster,.form-canvas{
  width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(58% 60% at 50% 46%,#000 55%,rgba(0,0,0,.55) 74%,transparent 92%);
          mask-image:radial-gradient(58% 60% at 50% 46%,#000 55%,rgba(0,0,0,.55) 74%,transparent 92%);
  filter:brightness(1.05) contrast(1.015) saturate(.86) sepia(.05);
}
.form-canvas{display:none}
.form-vitruvian{display:none}

.form-lede .kicker{display:block;margin-bottom:18px;color:var(--slate)}
.form-lede h1{
  font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;
  font-size:clamp(2.4rem,6.2vw,5rem);letter-spacing:.06em;line-height:1.02;color:var(--navy);
}
.form-lede p{max-width:48ch;margin:20px auto 0;color:var(--navy);font-size:1.06rem;line-height:1.6}

.form-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px;
  text-align:left;max-width:620px;margin:0 auto}
.rail-item{display:flex;align-items:baseline;gap:14px;color:var(--navy);
  padding:12px 0;border-top:var(--hairline-width) solid var(--line)}
.rail-item .rn{font-family:var(--font-display);font-size:14px;letter-spacing:.08em;
  width:2.4em;color:var(--navy)}
.rail-item .rl{font-family:var(--font-body);font-size:12px;font-weight:var(--weight-semibold);
  letter-spacing:.16em;text-transform:uppercase}
.form-anno{display:none}
.form-close .cl-line{font-family:var(--font-editorial);font-weight:var(--weight-editorial);
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--navy);margin-bottom:22px}
.form-cta-row{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.form-hint{display:none}

/* ---- .is-scroll (pinned, scroll-scrubbed) layout ---- */
.form-exp.is-scroll{height:380vh}
.is-scroll .form-sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 42%,#FCFBF8 0%,var(--porcelain) 55%,#EFEBE3 100%)}
.is-scroll .form-stage{position:absolute;inset:0;display:block;padding:0;max-width:none}

.is-scroll .form-figure{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:min(46vh,88vw);will-change:transform}
.is-scroll .form-poster{position:absolute;inset:0}
.is-scroll .form-canvas{position:absolute;inset:0;display:block;opacity:0;transition:opacity .5s}
.is-scroll .form-canvas.ready{opacity:1}

.is-scroll .form-vitruvian{display:block;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:min(62vh,120vw);aspect-ratio:1/1;
  pointer-events:none;z-index:1}
.is-scroll .form-vitruvian circle,.is-scroll .form-vitruvian rect{
  fill:none;stroke:var(--navy);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.26;
  stroke-dasharray:100;stroke-dashoffset:100}

.is-scroll .form-lede{position:absolute;left:0;right:0;top:13vh;text-align:center;
  padding:0 24px;z-index:5;will-change:transform,opacity}
.is-scroll .form-lede p{display:none}

.is-scroll .form-rail{position:absolute;left:max(4vw,28px);top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;gap:14px;grid-template-columns:none;
  max-width:none;margin:0;opacity:0;transition:opacity .5s}
.is-scroll .form-rail.show{opacity:1}
.is-scroll .rail-item{opacity:.32;border-top:0;padding:0;transition:opacity .4s,color .4s;color:var(--slate)}
.is-scroll .rail-item .rn{width:2.2em;font-size:13px;color:var(--slate)}
.is-scroll .rail-item.active{opacity:1;color:var(--navy)}
.is-scroll .rail-item.active .rn{color:var(--navy)}

.is-scroll .form-anno{display:block;position:absolute;right:max(4vw,28px);top:50%;
  transform:translateY(-50%);width:min(300px,42vw);z-index:6;opacity:0;transition:opacity .5s;text-align:left}
.is-scroll .form-anno.show{opacity:1}
.is-scroll .form-anno .an-num{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.8rem);
  color:var(--navy);letter-spacing:.06em;line-height:1;margin-bottom:12px}
.is-scroll .form-anno .an-name{font-family:var(--font-editorial);font-weight:var(--weight-editorial);
  font-size:clamp(1.5rem,2.4vw,2rem);color:var(--navy);line-height:1.1;margin-bottom:12px}
.is-scroll .form-anno .an-rule{width:44px;height:1px;background:var(--navy);opacity:.5;margin-bottom:18px}
.is-scroll .form-anno .an-desc{font-size:.95rem;line-height:1.55;color:var(--slate)}

.is-scroll .form-close{position:absolute;left:0;right:0;bottom:9vh;text-align:center;
  padding:0 24px;z-index:6;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.is-scroll .form-close.show{opacity:1;transform:none}

.is-scroll .form-hint{display:flex;position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);
  z-index:6;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
  flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
.is-scroll .form-hint .bar{width:1px;height:34px;background:linear-gradient(var(--slate),transparent);
  animation:hintpulse 2s ease-in-out infinite}
@keyframes hintpulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

@media (max-width:820px){
  .form-exp.is-scroll{height:300vh}
  .is-scroll .form-figure{width:min(52vh,76vw)}
  .is-scroll .form-lede{top:10vh}
  .is-scroll .form-rail{left:16px;gap:10px}
  .is-scroll .rail-item .rl{display:none}
  .is-scroll .form-anno{right:16px;left:16px;width:auto;top:auto;bottom:13vh;transform:none;text-align:center}
  .is-scroll .form-anno .an-rule{margin-left:auto;margin-right:auto}
}
@media (max-width:640px){
  .form-rail{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .is-scroll .form-hint{display:none}
}

/* ============================================================================
   HOMEPAGE v3 · "Apple grammar" rebuild
   Hero (dark, resolves to light) · product device mockups · how-it-works
   feature sections · the six-systems dark beat · stat band. Home-only classes;
   no shared rule from the sections above is modified.
   ============================================================================ */

/* --- shared: the marble figure composited into a dark navy niche ----------- */
.fig,.sysbeat-poster,.sysbeat-canvas{
  -webkit-mask-image:radial-gradient(56% 62% at 50% 44%,#000 50%,rgba(0,0,0,.5) 72%,transparent 90%);
          mask-image:radial-gradient(56% 62% at 50% 44%,#000 50%,rgba(0,0,0,.5) 72%,transparent 90%);
}
.fig-dark,.sysbeat-poster,.sysbeat-canvas{
  filter:brightness(.64) contrast(1.16) saturate(.55) sepia(.24) hue-rotate(178deg);
}
.fig-light{
  filter:brightness(1.06) contrast(1.02) saturate(.86) sepia(.05);
}

/* --- 1 · HERO --------------------------------------------------------------- */
.hero-form{position:relative;background:var(--navy-deep);color:var(--porcelain)}
.hero-sticky{position:relative}
.hero-stage{
  position:relative;min-height:92vh;display:grid;place-items:center;
  padding:96px 24px 88px;
}
.hero-glow{
  position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);
  width:min(74vh,128vw);height:min(74vh,128vw);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(208,210,214,.44) 0%,rgba(200,203,210,.15) 36%,transparent 66%);
}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hero-figure{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-49%);
  width:min(50vh,88vw);aspect-ratio:760/1008;z-index:1;
}
.hero-figure .fig{position:absolute;inset:0;width:100%;height:100%}
.hero-figure .fig-light{opacity:0}
.hero-lede{position:relative;z-index:3;text-align:center;max-width:760px;will-change:transform,opacity}
.hero-lede::before{
  content:"";position:absolute;inset:-48px -80px;z-index:-1;
  background:radial-gradient(62% 62% at 50% 44%,rgba(19,28,52,.74),rgba(19,28,52,0) 78%);
}
.hero-lede .kicker{display:block;margin-bottom:20px;color:var(--slate-light)}
.hero-lede h1{
  font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:.06em;line-height:1.0;color:var(--porcelain);
}
.hero-lede p{max-width:34ch;margin:22px auto 0;color:var(--slate-light);font-size:1.08rem;line-height:1.55}
.hero-cta{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-trial{font-size:.8125rem;color:var(--slate-light);margin:0}
.hero-hint{display:none}
.hero-form:not(.is-pin) .hero-particles{display:none}

.hero-form.is-pin{height:152vh}
.hero-form.is-pin .hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.hero-form.is-pin .hero-stage{position:absolute;inset:0;min-height:0}
.is-pin .hero-hint{
  display:flex;position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:4;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-light);
  flex-direction:column;align-items:center;gap:8px;transition:opacity .4s;
}
.is-pin .hero-hint .bar{width:1px;height:34px;background:linear-gradient(var(--slate-light),transparent);animation:hintpulse 2s ease-in-out infinite}
@media (max-width:640px){
  .hero-figure{width:min(52vh,80vw)}
  .hero-lede h1{font-size:clamp(2.6rem,13vw,4rem)}
}

/* --- device mockup (hand-built iPhone, crisp at any DPI) -------------------- */
.device{--dw:302px;width:var(--dw);max-width:100%;margin:0 auto}
.device-sm{--dw:288px}
.device-frame{
  position:relative;aspect-ratio:9 / 19.3;
  background:linear-gradient(155deg,#2b3a5f 0%,#1b2745 46%,#141d36 100%);
  border-radius:46px;padding:11px;
  box-shadow:
    0 34px 70px -26px rgba(15,22,42,.55),
    0 4px 14px -6px rgba(15,22,42,.4),
    0 0 0 1px rgba(30,43,77,.18),
    0 0 0 6px rgba(30,43,77,.06);
}
.device-island{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:34%;height:22px;background:linear-gradient(#0c142a,#0b1024);border-radius:14px;z-index:4;
}
.device-screen{
  position:relative;height:100%;background:var(--porcelain);
  border-radius:35px;overflow:hidden;
}
.scr{height:100%;display:flex;flex-direction:column;padding:40px 20px 20px;gap:13px;color:var(--navy)}
.scr-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:var(--weight-semibold);opacity:.62;letter-spacing:.02em}
.scr-bat{width:22px;height:11px;border:1.5px solid var(--navy);border-radius:3px;position:relative}
.scr-bat::after{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:11px;background:var(--navy);border-radius:1px}
.scr-k{font-family:var(--font-body);font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1.8px;text-transform:uppercase;color:var(--slate)}

.scr-goal{display:flex;flex-direction:column;gap:5px;border-bottom:var(--hairline-width) solid var(--line);padding-bottom:12px}
.scr-goal strong{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:20px;line-height:1.05}

.dash-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 6px;padding:4px 0}
.dgauge{display:flex;flex-direction:column;align-items:center;gap:7px}
.dg-face{position:relative;width:47px;height:47px}
.dg-face svg{position:absolute;inset:0;width:100%;height:100%}
.dg-face .numeral{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--navy)}
.dg-name{font-size:8.5px;letter-spacing:.4px;color:var(--slate);text-transform:uppercase;font-weight:var(--weight-semibold);text-align:center;line-height:1}
.g-track{fill:none;stroke:var(--line);stroke-width:3}
.g-arc{fill:none;stroke:var(--navy);stroke-width:3.2;stroke-linecap:round;--circ:107;stroke-dasharray:var(--circ);stroke-dashoffset:calc(var(--circ) - var(--fill))}
.js .reveal:not(.in) .g-arc{stroke-dashoffset:var(--circ)}
.js .reveal .g-arc{transition:stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i) * .1s)}

.scr-session{margin-top:auto;background:var(--highlight);border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.ss-title{font-size:14px;font-weight:var(--weight-semibold)}
.ss-sub{font-size:11px;color:var(--slate)}

.scr-goalin{gap:12px}
.gi-k{margin-top:4px}
.gi-q{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:20px;line-height:1.12}
.gi-field{border:1.5px solid var(--navy);border-radius:11px;padding:11px 13px;font-size:13px;font-weight:var(--weight-medium);display:flex;align-items:center}
.gi-caret{display:inline-block;width:1.5px;height:15px;background:var(--navy);margin-left:2px;animation:caret 1.1s step-end infinite}
@keyframes caret{50%{opacity:0}}
.gi-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.gi-chips .chip{font-size:11px;padding:5px 10px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{font-size:12px;font-weight:var(--weight-medium);color:var(--navy);background:var(--paper);border:var(--hairline-width) solid var(--line);border-radius:999px;padding:6px 13px;line-height:1;white-space:nowrap}
.chip-on{background:var(--navy);color:var(--porcelain);border-color:var(--navy)}

.week-list{list-style:none;display:flex;flex-direction:column;margin-top:2px}
.week-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:var(--hairline-width) solid var(--line);font-size:12px}
.week-list li:last-child{border-bottom:0}
.week-list .wd{font-weight:var(--weight-semibold);color:var(--slate);text-transform:uppercase;letter-spacing:1px;font-size:10px;width:32px}
.week-list .wn{color:var(--navy);flex:1;text-align:right}
.week-list .today{background:var(--highlight);border-radius:9px;margin:2px -10px;padding:9px 10px;border-bottom:0}
.week-list .today .wn{font-weight:var(--weight-semibold)}

.msg-head{display:flex;flex-direction:column;gap:3px;border-bottom:var(--hairline-width) solid var(--line);padding-bottom:11px}
.msg-head strong{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:18px}
.chat{display:flex;flex-direction:column;gap:9px;padding:8px 0;flex:1}
.bubble{font-size:11.5px;line-height:1.42;padding:9px 11px;border-radius:14px;max-width:88%}
.bin{background:var(--highlight);color:var(--navy);border-bottom-left-radius:4px;align-self:flex-start}
.bout{background:var(--navy);color:var(--porcelain);border-bottom-right-radius:4px;align-self:flex-end}
.msg-checkin{display:flex;align-items:center;gap:9px;margin-top:auto;font-size:11px;font-weight:var(--weight-semibold);background:var(--highlight);border-radius:11px;padding:11px 13px}
.mc-dot{width:8px;height:8px;border-radius:50%;background:var(--navy);flex-shrink:0}

/* --- 2 · WHAT IT IS --------------------------------------------------------- */
.what-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}
.what-copy .kicker{display:block;margin-bottom:18px}
.what-copy h2{margin-bottom:22px;max-width:19ch}
.what-copy p{color:var(--slate)}
.what-device{display:flex;flex-direction:column;align-items:center;gap:18px}
.device-cap{text-align:center;max-width:32ch}
@media (max-width:900px){.what-grid{grid-template-columns:1fr;gap:44px}}

/* --- 3 · HOW IT WORKS (feature sections; text pins, product scrolls) -------- */
.how .section-head{margin-bottom:8px}
.how .section-head h2{max-width:20ch}
.how-steps{display:flex;flex-direction:column}
.how-step{display:grid;grid-template-columns:1fr 1fr;gap:64px;min-height:118vh;align-items:stretch}
.how-text{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.how-step.flip .how-text{order:2}
.how-text .kicker{display:block;margin-bottom:16px;color:var(--navy)}
.how-text h3{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:clamp(1.6rem,2.7vw,2.3rem);line-height:1.14;margin-bottom:16px;max-width:15ch}
.how-text p{color:var(--slate);max-width:42ch}
.how-visual{display:flex;align-items:center;justify-content:center;padding:18vh 0}
@media (max-width:900px){
  .how-step{grid-template-columns:1fr;min-height:0;gap:30px;padding:6px 0 60px}
  .how-step:last-child{padding-bottom:0}
  .how-text{position:static;height:auto;display:block}
  .how-step.flip .how-text{order:0}
  .how-visual{padding:0}
  .how-text h3{max-width:20ch}
  .how-text .chips{display:none}
}

/* --- 4 · THE SIX SYSTEMS (the one dark beat on the light page) -------------- */
.sysbeat{position:relative;background:var(--navy-deep);color:var(--porcelain)}
.sysbeat-sticky{position:relative}
.sysbeat-stage{
  position:relative;max-width:var(--w-content);margin:0 auto;padding:104px 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:38px;
}
.sysbeat-glow{background:radial-gradient(circle,rgba(150,160,186,.30) 0%,rgba(120,132,164,.10) 38%,transparent 66%)}
.sysbeat-figure{position:relative;width:min(320px,72vw);aspect-ratio:760/1008;z-index:1}
.sysbeat-poster,.sysbeat-canvas{position:absolute;inset:0;width:100%;height:100%}
.sysbeat-canvas{display:none}

.sysbeat-head .kicker{display:block;margin-bottom:14px}
.sysbeat-head h2{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;color:var(--porcelain);margin-bottom:14px}
.sysbeat-head p{color:var(--slate-light);max-width:46ch;margin:0 auto;font-size:.98rem}

.sys-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;text-align:left;max-width:560px;margin:0 auto}
.sys-rail .rail-item{display:flex;align-items:baseline;gap:14px;color:var(--porcelain);padding:11px 0;border-top:var(--hairline-width) solid rgba(174,180,192,.24)}
.sys-rail .rn{font-family:var(--font-display);font-size:14px;letter-spacing:.08em;width:2.4em;color:var(--slate-light)}
.sys-rail .rl{font-family:var(--font-body);font-size:12px;font-weight:var(--weight-semibold);letter-spacing:.16em;text-transform:uppercase}
.sys-anno{display:none}
.sysbeat-close .cl-line{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--porcelain);margin-bottom:16px}

/* pinned scroll-scrubbed layout (added by statue.js) */
.sysbeat.is-scroll{height:260vh}
.sysbeat.is-scroll .sysbeat-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.sysbeat.is-scroll .sysbeat-stage{position:absolute;inset:0;display:block;padding:0;max-width:none}
.sysbeat.is-scroll .sysbeat-figure{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(44vh,84vw);will-change:transform}
.sysbeat.is-scroll .sysbeat-canvas{display:block;opacity:0;transition:opacity .5s}
.sysbeat.is-scroll .sysbeat-canvas.ready{opacity:1}
.sysbeat.is-scroll .hero-glow{top:50%}
.sysbeat.is-scroll .sysbeat-head{position:absolute;left:0;right:0;top:11vh;padding:0 24px;z-index:5}
.sysbeat.is-scroll .sysbeat-head p{display:none}
.sysbeat.is-scroll .sys-rail{
  position:absolute;left:max(4vw,24px);top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:13px;grid-template-columns:none;max-width:none;margin:0;
  opacity:0;transition:opacity .5s;
}
.sysbeat.is-scroll .sys-rail.show{opacity:1}
.sysbeat.is-scroll .sys-rail .rail-item{opacity:.34;border-top:0;padding:0;color:var(--slate-light);transition:opacity .4s,color .4s}
.sysbeat.is-scroll .sys-rail .rn{color:var(--slate-light)}
.sysbeat.is-scroll .sys-rail .rail-item.active{opacity:1;color:var(--porcelain)}
.sysbeat.is-scroll .sys-rail .rail-item.active .rn{color:var(--porcelain)}
.sysbeat.is-scroll .sys-anno{
  display:block;position:absolute;right:max(4vw,24px);top:50%;transform:translateY(-50%);
  width:min(300px,42vw);z-index:6;opacity:0;transition:opacity .5s;text-align:left;
}
.sysbeat.is-scroll .sys-anno.show{opacity:1}
.sys-anno .an-num{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.8rem);color:var(--porcelain);letter-spacing:.06em;line-height:1;margin-bottom:12px}
.sys-anno .an-name{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--porcelain);line-height:1.1;margin-bottom:12px}
.sys-anno .an-rule{width:44px;height:1px;background:var(--slate-light);opacity:.6;margin-bottom:16px}
.sys-anno .an-desc{font-size:.95rem;line-height:1.55;color:var(--slate-light)}
.sysbeat.is-scroll .sysbeat-close{
  position:absolute;left:0;right:0;bottom:9vh;text-align:center;padding:0 24px;z-index:6;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;
}
.sysbeat.is-scroll .sysbeat-close.show{opacity:1;transform:none}
@media (max-width:820px){
  .sysbeat.is-scroll{height:230vh}
  .sysbeat.is-scroll .sysbeat-figure{width:min(50vh,76vw)}
  .sysbeat.is-scroll .sysbeat-head{top:9vh}
  .sysbeat.is-scroll .sys-rail{left:16px;gap:10px}
  .sysbeat.is-scroll .sys-rail .rl{display:none}
  .sysbeat.is-scroll .sys-anno{right:16px;left:16px;width:auto;top:auto;bottom:12vh;transform:none;text-align:center}
  .sysbeat.is-scroll .sys-anno .an-rule{margin-left:auto;margin-right:auto}
}
@media (max-width:640px){.sys-rail{grid-template-columns:1fr}}

/* ============================================================================
   4b · THE BODY-SCAN  (upgrade to the six-systems beat)
   ----------------------------------------------------------------------------
   The founder's brief: a scan descends the Roman figure and words pop anchored
   to the anatomy, one body region per system, closing on the Vitruvian plate.
   Progressive enhancement holds: with no JS / prefers-reduced-motion the section
   is a composed STATIC teaching plate (figure + six numbered reticles on the
   body + Vitruvian geometry + the six-system legend). statue.js adds .is-scroll
   to turn it into the pinned, scan-driven choreography.
   Anchor calibration: normalized (x,y) per region were hand-read against a 0.1
   grid laid over the actual frames (f001..f048). The turntable's positional
   drift across the whole sequence is under ~1% of frame width, so one calibrated
   anchor per region tracks the anatomy at every rotation angle.
   ============================================================================ */
.sysbeat-figure{overflow:visible}

/* Vitruvian geometry (frame-pixel viewBox 760x1008) */
.vitruvian{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}
.vitruvian circle,.vitruvian rect,.vitruvian line{
  fill:none;stroke:var(--slate-light);stroke-width:1.3px;vector-effect:non-scaling-stroke;opacity:.85;
}
.vitruvian .vit-guide{opacity:.45}

/* body-scan sweep */
.scan-wash{
  position:absolute;left:0;top:0;width:100%;height:0;z-index:3;pointer-events:none;display:none;
  background:linear-gradient(180deg,rgba(120,185,215,0) 55%,rgba(150,205,232,.16) 100%);
  mix-blend-mode:screen;
}
.scan-line{
  position:absolute;left:-6%;top:0;width:112%;height:2px;z-index:4;pointer-events:none;display:none;opacity:0;
  background:linear-gradient(90deg,transparent 0%,rgba(176,224,240,.85) 20%,rgba(224,244,252,1) 50%,rgba(176,224,240,.85) 80%,transparent 100%);
  box-shadow:0 0 14px 2px rgba(150,205,235,.6),0 8px 26px 6px rgba(120,180,220,.28);
  will-change:top,opacity;
}

/* on-body markers (each .sysmark spans the full figure box; the anchor comes
   from the inline --mx/--my custom properties, so % positioning tracks the body) */
.sys-markers{position:absolute;inset:0;z-index:5;pointer-events:none}
.sysmark{position:absolute;inset:0}
.sm-dot{
  position:absolute;left:calc(var(--mx)*100%);top:calc(var(--my)*100%);
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  border:1.5px solid rgba(224,232,240,.9);background:rgba(150,205,230,.18);
  box-shadow:0 0 8px rgba(150,205,230,.5);
}
.sm-dot::before{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#eaf3f8}
.sm-dot::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;border:1px solid rgba(176,224,240,.85);opacity:0}
.sm-num{
  position:absolute;top:calc(var(--my)*100%);left:calc(var(--mx)*100% + 16px);transform:translateY(-50%);
  font-family:var(--font-display);font-size:12px;letter-spacing:.1em;color:var(--slate-light);white-space:nowrap;
}
.sysmark[data-side=left] .sm-num{left:auto;right:calc((1 - var(--mx))*100% + 16px)}
.sm-lead{
  position:absolute;top:calc(var(--my)*100%);height:1px;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(90deg,rgba(176,224,240,.9),rgba(176,224,240,0));
}
.sysmark[data-side=right] .sm-lead{left:calc(var(--mx)*100%);width:calc((1.12 - var(--mx))*100%)}
.sysmark[data-side=left] .sm-lead{right:calc((1 - var(--mx))*100%);width:calc((var(--mx) + 0.12)*100%);
  background:linear-gradient(270deg,rgba(176,224,240,.9),rgba(176,224,240,0));}
.sm-card{
  position:absolute;top:calc(var(--my)*100%);width:min(258px,30vw);display:none;
  opacity:0;transform:translateY(-50%) translateY(10px);transition:opacity .55s ease,transform .55s ease;
}
.sysmark[data-side=right] .sm-card{left:calc(112% + 6px)}
.sysmark[data-side=left] .sm-card{right:calc(112% + 6px);text-align:right}
.card-num{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.06em;color:var(--porcelain);display:block;margin-bottom:10px}
.sm-name{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:clamp(1.4rem,2.1vw,1.9rem);color:var(--porcelain);line-height:1.08;display:block;margin-bottom:12px}
.sm-rule{display:block;width:40px;height:1px;background:var(--slate-light);opacity:.55;margin-bottom:14px}
.sysmark[data-side=left] .sm-rule{margin-left:auto}
.sm-desc{font-size:.92rem;line-height:1.55;color:var(--slate-light);margin:0}

/* --- .is-scroll (pinned scan choreography, added by statue.js) --- */
.sysbeat.is-scroll .sys-rail{display:none}
.sysbeat.is-scroll .sm-num{display:none}
.sysbeat.is-scroll .sm-dot{opacity:0;transition:opacity .45s ease}
.sysbeat.is-scroll .sysmark.visited .sm-dot{opacity:.42}
.sysbeat.is-scroll .sysmark.active .sm-dot{opacity:1}
.sysbeat.is-scroll .sysmark.active .sm-dot::after{animation:sm-reticle 1.8s ease-out infinite}
.sysbeat.is-scroll .sm-card{display:block}
.sysbeat.is-scroll .sysmark.active .sm-card{opacity:1;transform:translateY(-50%)}
.sysbeat.is-scroll .sysmark.active .sm-lead{opacity:.75}
.sysbeat.is-scroll .scan-line{display:block}
.sysbeat.is-scroll .scan-wash{display:block}
@keyframes sm-reticle{0%{opacity:.85;transform:scale(1)}70%{opacity:0;transform:scale(3)}100%{opacity:0;transform:scale(3)}}

@media (max-width:820px){
  /* mobile motion: callouts stack below the figure (the figure is centred in the
     viewport, so left:50% of the figure box == viewport centre), leaders removed */
  .sysbeat.is-scroll .sysmark .sm-card{
    left:50%;right:auto;top:103%;bottom:auto;width:86vw;text-align:center;
    transform:translateX(-50%) translateY(10px);
  }
  .sysbeat.is-scroll .sysmark.active .sm-card{transform:translateX(-50%)}
  .sysbeat.is-scroll .sm-lead{display:none}
  .sysbeat.is-scroll .sm-card .sm-rule{margin-left:auto;margin-right:auto}
  .sysbeat.is-scroll .card-num{margin-bottom:6px}
}

/* --- 5 · ENHANCEMENT-ERA STAT BAND ----------------------------------------- */
.statband-sec{background:var(--highlight)}
.statband-head{max-width:680px;margin-bottom:48px}
.statband-head .kicker{display:block;margin-bottom:16px}
.statband-head h2{margin-bottom:16px}
.statband-head p{color:var(--slate)}
.statband-sec .stat-src{border-top-color:rgba(30,43,77,.18)}

/* ============================================================================
   PARTNERS PAGE v2 · "The Aftercare Layer" (B2B rebuild)
   ----------------------------------------------------------------------------
   Audience: a med-spa owner and their medical director. Goal: a booked demo.
   Same navy register as the homepage: one dark statue accent (the hero), the
   rest porcelain and calm. Component vocabulary reused: .device phone mockups,
   .stat-grid, .steps, kicker/editorial/pull. New here: the compact dark hero,
   the four-step flow strip, the revenue calculator, and the partner-report
   browser mockup. All new classes are partners-scoped (.phero, .flowstrip,
   .calc, .report, .pcompliance, .pilot); no rule above is modified.
   ============================================================================ */

/* --- 1 · COMPACT DARK HERO (restrained statue + particle, resolves to light) */
.phero{
  position:relative;background:var(--navy-deep);color:var(--porcelain);
  overflow:hidden;isolation:isolate;
}
.phero-inner{
  position:relative;z-index:3;
  max-width:var(--w-content);margin:0 auto;padding:104px 24px 132px;
  max-width:920px;
}
.phero .kicker{display:block;margin-bottom:22px;color:var(--slate-light)}
.phero h1{
  font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.3rem);letter-spacing:.045em;line-height:1.1;
  color:var(--porcelain);max-width:16ch;
}
.phero .phero-sub{margin-top:22px;max-width:46ch;color:var(--slate-light);font-size:1.1rem;line-height:1.55}
.phero .phero-cta{margin-top:34px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.phero-note{margin-top:16px;font-size:.8125rem;color:var(--slate-light)}
/* restrained accent: a spotlit marble figure feathered into the niche, off-right */
.phero-figure{
  position:absolute;top:50%;right:max(3vw,12px);transform:translateY(-50%);
  width:min(300px,40vw);aspect-ratio:760/1008;z-index:1;pointer-events:none;opacity:.7;
}
.phero-figure img{width:100%;height:100%;
  -webkit-mask-image:radial-gradient(54% 60% at 54% 44%,#000 42%,rgba(0,0,0,.4) 68%,transparent 88%);
          mask-image:radial-gradient(54% 60% at 54% 44%,#000 42%,rgba(0,0,0,.4) 68%,transparent 88%);
  filter:brightness(.66) contrast(1.16) saturate(.55) sepia(.24) hue-rotate(178deg);
}
.phero-glow{
  position:absolute;top:44%;right:6%;transform:translateY(-50%);
  width:min(56vh,90vw);height:min(56vh,90vw);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(200,203,210,.30) 0%,rgba(190,196,208,.10) 40%,transparent 66%);
}
.phero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
/* the resolve-to-light: the dark niche hands off to the porcelain body below */
.phero-resolve{
  position:absolute;left:0;right:0;bottom:0;height:180px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(247,245,240,0),var(--porcelain));
}
@media (max-width:760px){
  .phero-inner{padding:80px 24px 104px}
  .phero-figure{opacity:.32;right:-6vw;width:min(320px,72vw)}
}

/* --- 2 · WHAT THE PARTNERSHIP IS · flow strip ------------------------------ */
.p-lede{max-width:44ch;font-family:var(--font-editorial);font-weight:var(--weight-editorial);
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.28;color:var(--navy);margin-bottom:56px}
.flowstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:var(--hairline-width) solid var(--line)}
.flowstep{position:relative;padding:32px 28px 32px 0}
.flowstep + .flowstep{padding-left:28px;border-left:var(--hairline-width) solid var(--line)}
.flowstep .fs-n{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:1.125rem;color:var(--navy);letter-spacing:.06em;margin-bottom:16px;display:block}
.flowstep h3{font-size:1rem;font-weight:var(--weight-semibold);letter-spacing:.01em;margin-bottom:8px}
.flowstep p{font-size:.9375rem;color:var(--slate);line-height:1.55}
/* the hairline connector: a thin arrow-dot on the top rule between steps */
.flowstep::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  background:var(--navy);border-radius:50%}
.flowstep:first-child::before{left:0}
@media (max-width:820px){
  .flowstrip{grid-template-columns:1fr 1fr}
  .flowstep{border-left:0!important;padding:28px 24px 28px 0}
  .flowstep:nth-child(3),.flowstep:nth-child(4){border-top:var(--hairline-width) solid var(--line)}
}
@media (max-width:480px){
  .flowstrip{grid-template-columns:1fr}
  .flowstep{border-top:var(--hairline-width) solid var(--line)}
  .flowstep:first-child{border-top:0}
}

/* --- 3 · REVENUE CALCULATOR ------------------------------------------------- */
.calc{max-width:920px;margin:0 auto;background:var(--paper);
  border:var(--hairline-width) solid var(--line);border-radius:var(--radius-max);
  padding:clamp(28px,4vw,52px)}
.calc-controls{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-bottom:44px}
.calc-control .cc-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.calc-control label{font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.3px;color:var(--navy);max-width:22ch}
.calc-control .cc-val{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:1.5rem;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.calc-range{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:var(--line);outline:none;cursor:pointer;margin:6px 0}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--navy);border:4px solid var(--paper);
  box-shadow:0 0 0 1px var(--navy),0 2px 6px -1px rgba(15,22,42,.4);cursor:pointer;transition:transform .12s ease}
.calc-range::-webkit-slider-thumb:hover{transform:scale(1.08)}
.calc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--navy);
  border:4px solid var(--paper);box-shadow:0 0 0 1px var(--navy),0 2px 6px -1px rgba(15,22,42,.4);cursor:pointer}
.calc-range:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.calc-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--slate);
  letter-spacing:.4px;margin-top:10px}
.calc-outputs{border-top:var(--hairline-width) solid var(--line);padding-top:36px}
.calc-context{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.calc-out{display:flex;flex-direction:column;gap:6px}
.calc-out .co-label{font-size:11px;font-weight:var(--weight-semibold);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--slate)}
.calc-out .co-num{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(1.75rem,3.6vw,2.6rem);line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.calc-out .co-sub{font-size:.8125rem;color:var(--slate)}
.calc-share{background:var(--highlight);border-radius:var(--radius-max);
  padding:32px clamp(24px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;align-items:end}
.calc-share .cs-head{grid-column:1/-1;font-size:11px;font-weight:var(--weight-semibold);
  letter-spacing:1.6px;text-transform:uppercase;color:var(--navy)}
.calc-out.big .co-num{font-size:clamp(2.5rem,6vw,4rem);letter-spacing:.005em}
.calc-out.big .co-label{color:var(--navy)}
.calc-foot{margin-top:28px;display:flex;flex-direction:column;gap:8px}
.calc-foot .cf-lead{font-family:var(--font-editorial);font-style:italic;font-size:1.1875rem;
  color:var(--navy);line-height:1.35}
@media (max-width:760px){
  .calc-controls{grid-template-columns:1fr;gap:32px}
  .calc-context{grid-template-columns:1fr;gap:22px}
  .calc-share{grid-template-columns:1fr;gap:22px}
}
/* CTA sits directly under the result: capture intent at the numbers */
.calc-cta{margin-top:32px;display:flex;justify-content:center}
.calc-cta .btn{min-width:min(340px,100%)}
@media (max-width:480px){.calc-cta .btn{width:100%}}

/* --- 4 · phone mockups reuse: caption line under each ----------------------- */
.p-phones{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:760px;margin:0 auto;align-items:start}
.p-phone{display:flex;flex-direction:column;align-items:center;gap:20px}
.p-phone .caption{text-align:center;max-width:30ch}
@media (max-width:640px){.p-phones{grid-template-columns:1fr;gap:48px}}

/* --- 5 · PARTNER-REPORT browser/tablet mockup ------------------------------ */
.report-frame{max-width:940px;margin:0 auto;background:var(--paper);
  border:var(--hairline-width) solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 34px 70px -32px rgba(15,22,42,.34),0 4px 14px -8px rgba(15,22,42,.3)}
.report-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;
  background:var(--navy-deep);border-bottom:var(--hairline-width) solid rgba(174,180,192,.2)}
.report-bar .rb-dot{width:11px;height:11px;border-radius:50%;background:rgba(174,180,192,.4)}
.report-bar .rb-addr{margin-left:14px;flex:1;background:rgba(255,255,255,.06);border-radius:6px;
  padding:6px 14px;font-size:12px;color:var(--slate-light);letter-spacing:.02em;
  font-family:var(--font-body);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.report-tag{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--slate-light);white-space:nowrap}
.report-body{padding:clamp(24px,3.4vw,44px)}
.report-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-bottom:var(--hairline-width) solid var(--line);padding-bottom:22px;margin-bottom:28px}
.report-head .rh-k{display:block;font-size:11px;font-weight:var(--weight-semibold);letter-spacing:1.8px;
  text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.report-head h3{font-family:var(--font-editorial);font-weight:var(--weight-editorial);
  font-size:1.75rem;line-height:1.15;color:var(--navy)}
.report-head .rh-period{font-size:.875rem;color:var(--slate);text-align:right}
.report-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.rtile{background:var(--porcelain);border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);padding:20px 22px}
.rtile .rt-num{font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.875rem;
  color:var(--navy);font-variant-numeric:tabular-nums;line-height:1;margin-bottom:8px}
.rtile .rt-label{font-size:11px;font-weight:var(--weight-semibold);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--slate)}
.report-table-wrap{overflow-x:auto}
.report-table{width:100%;border-collapse:collapse;min-width:520px}
.report-table th{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--slate);text-align:left;padding:0 16px 12px;border-bottom:var(--hairline-width) solid var(--line)}
.report-table td{font-size:.875rem;color:var(--navy);padding:13px 16px;
  border-bottom:var(--hairline-width) solid var(--line);font-variant-numeric:tabular-nums}
.report-table tr:last-child td{border-bottom:0}
.report-table .rc-client{font-weight:var(--weight-semibold)}
.report-table .rc-prog{color:var(--slate)}
.status-dot{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--slate)}
.status-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy)}
.status-dot.active::before{background:#2f7d5b}
.status-dot.hold::before{background:var(--slate-light)}
.report-statement{margin-top:28px;border-top:var(--hairline-width) solid var(--line);padding-top:22px;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.report-statement .rs-label{font-size:.9375rem;color:var(--slate);max-width:40ch}
.report-statement .rs-amt{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:1.75rem;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.report-sample{text-align:center;margin-top:20px;font-size:11px;font-weight:var(--weight-semibold);
  letter-spacing:1.8px;text-transform:uppercase;color:var(--slate)}
@media (max-width:640px){.report-tiles{grid-template-columns:1fr;gap:12px}}

/* --- 7 · COMPLIANCE CARD (closes the medical director) --------------------- */
.pcompliance{max-width:900px;margin:0 auto;background:var(--navy-deep);color:var(--porcelain);
  border-radius:var(--radius-max);padding:clamp(36px,4vw,64px)}
.pcompliance .kicker{display:block;margin-bottom:22px;color:var(--slate-light)}
.pcompliance h2{font-family:var(--font-editorial);font-weight:var(--weight-editorial);
  font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.2;color:var(--porcelain);
  margin-bottom:36px;max-width:26ch}
.pledge-lines{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  border-top:var(--hairline-width) solid rgba(174,180,192,.24)}
.pledge-line{padding:22px 0;border-bottom:var(--hairline-width) solid rgba(174,180,192,.16)}
.pledge-line .pl-k{display:block;font-size:11px;font-weight:var(--weight-semibold);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--slate-light);margin-bottom:10px}
.pledge-line p{font-size:.95rem;line-height:1.55;color:var(--porcelain);max-width:36ch}
.pledge-line.never .pl-k{color:#e6b8b0}
@media (max-width:640px){.pledge-lines{grid-template-columns:1fr}}

/* --- 9 · PILOT CTA offer ---------------------------------------------------- */
.pilot{background:var(--highlight);border-radius:var(--radius-max);
  padding:clamp(36px,4vw,64px);text-align:center;max-width:820px;margin:0 auto}
.pilot .kicker{display:block;margin-bottom:18px;color:var(--navy)}
.pilot h2{font-family:var(--font-editorial);font-weight:var(--weight-editorial);
  font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.16;color:var(--navy);margin-bottom:18px;
  max-width:20ch;margin-left:auto;margin-right:auto}
.pilot .pilot-terms{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 30px}
.pilot .pilot-term{font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.3px;color:var(--navy);
  background:var(--paper);border:var(--hairline-width) solid var(--line);border-radius:999px;padding:9px 18px}
.pilot .pilot-cta{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.pilot .pilot-note{margin-top:16px;font-size:.8125rem;color:var(--slate)}
.pilot .pilot-deck{margin-top:14px;font-size:.8125rem}
.pilot .pilot-deck a{color:var(--navy)}

/* ============================================================================
   THE RECLINING COLOSSUS · homepage hero (index.html #heroForm)  [statue.js]
   ----------------------------------------------------------------------------
   A colossal classical marble figure, WHOLE and mastered, laid across the full
   width of the void. Our world, not the reference: deep navy void (--navy-deep
   #151F39), cold white-blue current and light, porcelain marble as the only
   bright mass, clinical and desaturated. The figure floats (no ground plane):
   a soft under-glow, restrained particle drift, and thin cold scan-beams
   descending onto the body. On scroll the void RESOLVES TO PORCELAIN and hands
   off to the product sections (the signature transition, preserved).
   Every selector below is scoped to .hero-form so nothing here can touch the
   six-systems beat (.sysbeat/.hero-glow) or any other page. Appended only; no
   existing rule is modified. LCP = the live headline text; the small hero webp
   paints progressively over the solid navy void (no flash, no data-URI).
   ============================================================================ */
.hero-colossus-sec{overflow:hidden;isolation:isolate}

/* the floating marble scene (full-bleed, feathered into the void) */
.hero-form .hero-colossus{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  background:var(--navy-deep);
  will-change:opacity,transform;transform:translateZ(0);
}
.hero-form .hero-colossus picture{position:absolute;inset:0;display:block}
.hero-form .colossus-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;
  filter:saturate(.8) contrast(1.04) brightness(1.02);
}

/* soft under-glow so the colossus reads as suspended (no ground plane) */
.hero-form .hero-underglow{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:min(128vw,1560px);height:56vh;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 62%,rgba(126,156,196,.34),rgba(96,126,170,.12) 46%,transparent 72%);
  filter:blur(8px);
}

/* thin cold scan-beams descending onto the body (our clinical stage-light) */
.hero-form .hero-beams{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.hero-form .hero-beams span{
  position:absolute;top:0;height:100%;width:1px;
  background:linear-gradient(to bottom,rgba(198,222,245,0) 0%,rgba(198,222,245,.26) 26%,rgba(198,222,245,.12) 68%,rgba(198,222,245,0) 100%);
  box-shadow:0 0 6px rgba(190,216,244,.32);opacity:.5;
}
.hero-form .hero-beams span::after{
  content:"";position:absolute;left:-1px;width:3px;height:16%;top:0;border-radius:2px;
  background:linear-gradient(to bottom,rgba(226,240,253,0),rgba(226,240,253,.85),rgba(226,240,253,0));
  filter:blur(.6px);
}
.hero-form .hero-beams span:nth-child(1){left:34%}
.hero-form .hero-beams span:nth-child(2){left:50%}
.hero-form .hero-beams span:nth-child(3){left:63%}
@media (prefers-reduced-motion:no-preference){
  .hero-form .hero-beams span{animation:nbBeamBreathe 9s ease-in-out infinite}
  .hero-form .hero-beams span:nth-child(2){animation-delay:-3s}
  .hero-form .hero-beams span:nth-child(3){animation-delay:-6s}
  .hero-form .hero-beams span::after{animation:nbBeamScan 8.5s linear infinite}
  .hero-form .hero-beams span:nth-child(2)::after{animation-duration:11s;animation-delay:-4.2s}
  .hero-form .hero-beams span:nth-child(3)::after{animation-duration:13s;animation-delay:-8.4s}
}
@keyframes nbBeamBreathe{0%,100%{opacity:.34}50%{opacity:.72}}
@keyframes nbBeamScan{0%{transform:translateY(-40%);opacity:0}12%{opacity:1}86%{opacity:1}100%{transform:translateY(600%);opacity:0}}

/* vignette scrim: feather the scene into the void + hold headline legibility */
.hero-form .hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(122% 92% at 50% 40%,transparent 44%,rgba(21,31,57,.26) 78%,rgba(21,31,57,.52) 100%),
    linear-gradient(to bottom,rgba(21,31,57,.30) 0%,transparent 22%,transparent 60%,rgba(21,31,57,.44) 100%);
}

/* headline sits above the scene; monumental over the colossus */
.hero-form .hero-lede{z-index:4}
.hero-form .hero-lede h1{font-size:clamp(2.9rem,7.4vw,5.8rem);letter-spacing:.05em}
.hero-form .hero-hint{z-index:5}

/* mobile: the face-priority vertical crop carries the frame */
@media (max-width:640px){
  .hero-form .colossus-img{object-position:50% 34%}
  .hero-form .hero-beams span:nth-child(1){left:30%}
  .hero-form .hero-beams span:nth-child(3){left:68%}
  .hero-form .hero-underglow{bottom:2%;height:48vh}
  /* stronger backdrop so the headline stays legible over the bright face */
  .hero-form .hero-lede::before{
    inset:-36px -26px;
    background:radial-gradient(74% 58% at 50% 47%,rgba(16,23,44,.9),rgba(16,23,44,.34) 64%,transparent 86%);
  }
  .hero-form .hero-lede h1{text-shadow:0 2px 22px rgba(10,15,30,.5)}
  .hero-form .hero-lede p{text-shadow:0 1px 14px rgba(10,15,30,.55)}
}