:root{
    --accent:#F03A00; --accent-hover:#D93300;
    --dark-900:#030508; --dark-800:#070B14; --dark-700:#0B1120;
    --paper:#FFFFFF; --light-200:#F8FAFC; --light-300:#F1F5F9; --light-400:#E2E8F0;
    --ink:#0F172A; --muted:#64748B;
    --gain:#0E6E4E; --loss:#B42318;
    --r-lg:16px; --r-xl:24px;
    --shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  }
      *{box-sizing:border-box}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:Inter,-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  .wrap{ width:min(100%,1080px); margin:0 auto; padding:0 20px; }
  section{ padding:56px 0; }
  .kicker{
    display:inline-block; color:var(--accent); text-transform:uppercase;
    letter-spacing:.14em; font-size:11.5px; font-weight:800; margin-bottom:14px;
  }
  h2{ font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.025em; line-height:1.1; margin:0 0 10px; text-wrap:balance; }
  .h2-accent{ color:var(--accent); }
  .dek{ color:var(--muted); font-size:16.5px; line-height:1.65; margin:0 0 28px; max-width:56ch; }
  .dek--wide{ max-width:none; }

  /* ---------- HERO ---------- */
  .hero{
    background:linear-gradient(168deg, var(--dark-900) 0%, var(--dark-700) 78%, #123528 100%);
    color:#fff; padding:54px 0 46px;
  }
  .hero .wrap{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; }
  @media (max-width:860px){
    .hero .wrap{ grid-template-columns:1fr; gap:34px; }
  }
  .hero .pill{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(240,58,0,.16); border:1px solid rgba(240,58,0,.5);
    color:#FF7A4D; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    border-radius:999px; padding:7px 14px; margin-bottom:20px;
  }
  .hero .pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:#FF5A21; }
  .hero .wordmark{
    font-size:clamp(34px,7vw,58px); font-weight:900; letter-spacing:.34em;
    line-height:1; margin:0 0 10px; color:#fff; text-indent:.17em;
  }
  .hero .wordmark sup{ font-size:.32em; letter-spacing:0; vertical-align:top; color:#FF5A21; }
  .hero .category{
    font-size:clamp(30px,4.4vw,50px); font-weight:900; letter-spacing:-.03em;
    color:#fff; margin:0 0 18px; line-height:1.08; text-wrap:balance; max-width:14ch;
  }
  .hero .category em{ font-style:normal; color:#FF5A21; }
  .hero .contrast{
    font-size:clamp(19px,2.6vw,25px); font-weight:800; letter-spacing:-.018em;
    line-height:1.3; color:#fff; margin:0 0 12px; max-width:30ch; text-wrap:balance;
  }
  .hero .contrast em{ font-style:normal; color:#FF5A21; }
  .hero .sub{
    color:rgba(226,232,240,.85); font-size:clamp(15.5px,1.8vw,18px); line-height:1.6;
    max-width:44ch; margin:0 0 22px;
  }
  .hero .triad{
    list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px;
    max-width:46ch;
  }
  .hero .triad li{
    position:relative; padding-left:24px;
    color:rgba(226,232,240,.85); font-size:15.5px; line-height:1.5;
  }
  .hero .triad li::before{
    content:""; position:absolute; left:0; top:7px; width:9px; height:9px;
    border-radius:2px; background:#FF5A21; transform:rotate(45deg);
  }
  .hero .triad b{ color:#fff; font-weight:700; }
  .triad-coda{
    color:rgba(226,232,240,.85); font-size:15.5px; line-height:1.55;
    max-width:46ch; margin:0 0 26px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .triad-coda b{ color:#FF5A21; font-weight:700; }
  /* [hidden] needs the !important because .badges/.cta-register set display */
  [hidden]{ display:none!important; }
  .btn--lg{ min-height:54px; padding:0 28px; font-size:16.5px; }
  .cta-register__note{ color:rgba(226,232,240,.7); font-size:13px; margin:10px 0 0; }
  .close .cta-register__note{ color:rgba(255,255,255,.7); }
  .cta-band{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
  .cta-band--end{ margin-top:26px; justify-content:center; text-align:center; }
  .cta-band--end .cta-register__note{ color:var(--muted); }

  /* ---------- STICKY CTA ---------- */
  /* Bottom rather than a pinned header: the nav is display:none below 700px, so
     on mobile there is no header to pin — and the bottom is where the thumb is.
     env(safe-area-inset-bottom) keeps it clear of the iOS home indicator. */
  .stickycta{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(3,5,8,.94); border-top:1px solid rgba(255,255,255,.12);
    padding:12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    transform:translateY(110%); transition:transform .28s ease;
  }
  @supports (backdrop-filter:blur(8px)){
    .stickycta{ background:rgba(3,5,8,.82); backdrop-filter:blur(8px); }
  }
  .stickycta.is-on{ transform:translateY(0); }
  .stickycta__inner{
    width:min(100%,1080px); margin:0 auto; padding:0 20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .stickycta__label{
    color:rgba(226,232,240,.72); font-size:12.5px; font-weight:600;
    letter-spacing:.02em; white-space:nowrap;
  }
  .stickycta .btn{ min-height:44px; font-size:14.5px; padding:0 18px; white-space:nowrap; }
  @media (max-width:560px){
    .stickycta__label{ display:none; }              /* button gets the full width */
    .stickycta__inner{ padding:0 16px; }
    .stickycta .btn{ width:100%; }
  }
  @media (prefers-reduced-motion:reduce){ .stickycta{ transition:none; } }
  .badges{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .badge-link{ display:block; border-radius:8px; overflow:hidden; }
  .badge-link img{ display:block; height:42px; width:auto; transform:scale(1.045); }
  .badge{
    display:inline-flex; flex-direction:column; justify-content:center;
    background:#000; color:#fff; border:1px solid rgba(255,255,255,.28);
    border-radius:12px; padding:8px 18px; min-height:52px; min-width:150px;
    text-decoration:none; line-height:1.2;
  }
  .badge small{ font-size:9.5px; opacity:.75; letter-spacing:.04em; }
  .badge span{ font-size:16px; font-weight:700; letter-spacing:-.01em; }


  /* width:100% is load-bearing — auto margins on a grid item disable stretch, and
     every child is absolutely positioned, so the box would otherwise compute to 0
     and fling the fan off the left edge. Offsets are % of the same 480px geometry
     (180/480 = 37.5%, 300/480 = 62.5%, 150/480 = 31.25%) so the fan always fits. */
  .hero-fan{ position:relative; width:100%; min-height:500px; max-width:480px; margin-left:auto; }
  /* All three sources are 480x1040 (9:19.5), so height:auto gives three identical
     boxes with no cropping — no fixed height or object-fit needed. min-height covers
     the tallest case (fan at its full 480px, 561-860px viewports). */
  .hero-fan img{ position:absolute; width:37.5%; height:auto;
    border-radius:12px; border:1px solid rgba(0,0,0,.1); box-shadow:0 20px 40px rgba(0,0,0,.15); }
  .hero-fan img:nth-child(1){ right:62.5%; top:0; z-index:1; }
  .hero-fan img:nth-child(2){ right:31.25%; top:50px; z-index:2; }
  .hero-fan img:nth-child(3){ right:0; top:100px; z-index:3; }
  @media (max-width:560px){
    /* horizontal geometry is inherited from the % offsets above — only the
       vertical stagger and the box change at this breakpoint */
    .hero-fan{ min-height:375px; max-width:344px; margin:0 auto; }
    .hero-fan img:nth-child(2){ top:44px; }
    .hero-fan img:nth-child(3){ top:88px; }
  }
  .tagbreak{
    background:#061109;
    border-top:1px solid rgba(255,255,255,.07);
    padding:58px 0; text-align:center;
  }
  .tagbreak p{ margin:0; white-space:nowrap;
    font-size:clamp(15px,1.7vw,20px); font-weight:800; letter-spacing:-.02em; line-height:1.4; }
  .tagbreak .dim{ color:rgba(226,232,240,.45); }
  .tagbreak .lit{ color:#fff; }
  .tagbreak .lit em{ font-style:normal; color:#FF5A21; }
  .testi{ margin:0 auto; max-width:760px; display:flex; align-items:center; gap:28px; text-align:left; }
  .testi__photo{ width:112px; height:112px; border-radius:50%; object-fit:cover; flex-shrink:0;
    border:2px solid rgba(255,255,255,.25); }
  .testi__body{ border-left:3px solid #FF5A21; padding-left:26px; }
  .testi blockquote{ margin:0; }
  .testi .dim, .testi .lit{ display:block; white-space:nowrap; }
  .testi figcaption{ margin-top:12px; line-height:1.35; }
  .testi figcaption b{ color:#fff; font-size:15px; font-weight:700; display:block; }
  .testi figcaption small{ color:rgba(226,232,240,.55); font-size:13px; }
  /* scoped past .tagbreak p, which would otherwise style this as the tagline */
  .testi .testi__disc{ margin:9px 0 0; font-size:11px; font-weight:400;
    line-height:1.45; letter-spacing:0; white-space:normal;
    color:rgba(226,232,240,.66); max-width:46ch; }
  @media (max-width:860px){
    .tagbreak{ padding:42px 0; }
    .tagbreak p{ font-size:clamp(16px,4.4vw,20px); }
    .testi{ flex-direction:column; align-items:flex-start; gap:18px; }
    .testi__photo{ width:76px; height:76px; }
    .testi .dim, .testi .lit{ white-space:normal; }
  }

  /* ---------- TRANSFORMATION ---------- */
  .xform{ padding-top:30px; padding-bottom:48px; }
  .xform__stage{
    display:grid; grid-template-columns:1fr 44px 1fr; gap:14px; align-items:center;
    max-width:760px; margin:0 auto;
  }
  .card-mock{
    background:#FDFBF5; border:1px solid #E4DFCE; border-radius:10px;
    padding:14px 14px 12px; color:#3B3A33;
    box-shadow:var(--shadow); transform:rotate(-1.6deg);
  }
  .card-mock h4{ margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.1em; color:#8A8672; }
  .card-mock table{ width:100%; border-collapse:collapse; font-size:10.5px; }
  .card-mock td,.card-mock th{ border:1px solid #DDD6C0; padding:3px 5px; text-align:center; font-weight:600; }
  .card-mock .pencil{ font-family:'Comic Sans MS','Bradley Hand',cursive; color:#2F4CAB; font-weight:700; }
  .xform__arrow{ text-align:center; color:var(--accent); font-size:26px; font-weight:900; }
  .caro{ position:relative; transform:rotate(1.2deg); }
  .caro::before,.caro::after{
    content:""; position:absolute; inset:0; border-radius:14px;
    background:var(--dark-700); opacity:.55; z-index:-1;
    transform:translate(7px,7px) rotate(1.4deg);
  }
  .caro::after{ transform:translate(14px,14px) rotate(2.8deg); opacity:.28; }
  .caro__track{ position:relative; min-height:196px; }
  .sg-mock{
    background:var(--dark-800); border-radius:14px; padding:16px 16px 14px;
    color:#EDF2F7; box-shadow:var(--shadow);
    position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
  }
  .sg-mock.is-on{ opacity:1; }
  .caro__dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; }
  .caro__dots i{ width:6px; height:6px; border-radius:50%; background:var(--light-400); transition:background .3s; }
  .caro__dots i.is-on{ background:var(--accent); }
  @media (prefers-reduced-motion:reduce){ .sg-mock{ transition:none; } }
  .sg-mock h4{ margin:0 0 10px; font-size:10px; font-weight:800; letter-spacing:.14em; color:#8A97AB; }
  .sg-row{ display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:12.5px; }
  .sg-row:last-child{ border-bottom:0; }
  .sg-row b{ font-variant-numeric:tabular-nums; font-weight:800; }
  .sg-neg{ color:#F27D6F; } .sg-pos{ color:#3FBF8E; }
  .xform__cap{ text-align:center; color:var(--muted); font-size:13.5px; margin-top:18px; }

  /* ---------- DIAGNOSE PRESCRIBE VALIDATE ---------- */
  .dpv{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dpv__card{
    background:var(--light-200); border:1px solid var(--light-400);
    border-radius:var(--r-lg); padding:22px 20px;
  }
  .dpv__num{ font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--accent); }
  .dpv__card h3{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin:6px 0 8px; }
  .dpv__card p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }
  .dpv__foot{ margin-top:18px; font-size:15px; color:var(--ink); font-weight:600; }
  .dpv__foot em{ font-style:normal; color:var(--accent); }

  /* ---------- CAPTURE ---------- */
  .cap{ background:var(--light-200); border-top:1px solid var(--light-400); border-bottom:1px solid var(--light-400); }
  .cap__grid{ display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cap__item{ background:var(--paper); border:1px solid var(--light-400); border-radius:var(--r-lg); padding:18px; }
  .cap__item b{ display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; margin-bottom:5px; }
  .cap__item span{ color:var(--muted); font-size:14px; line-height:1.55; }
  .sci{
    margin-top:18px; padding:20px 22px;
    background:var(--paper); border:1px solid var(--light-400);
    border-left:4px solid var(--accent); border-radius:12px;
  }
  .sci b{ display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
  .sci p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink); }
  .sci small{ display:block; margin-top:10px; font-size:12px; color:var(--muted); line-height:1.5; }
  .sci small a{ color:var(--muted); }

  /* ---------- SAMPLE ---------- */
  .sample__panel{
    background:var(--light-200); border:1px solid var(--light-400);
    border-radius:var(--r-xl); padding:26px 24px; box-shadow:var(--shadow);
  }
  .sample__chip{
    display:inline-block; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); border:1px dashed var(--light-400); border-radius:999px; padding:4px 11px; margin-bottom:14px;
  }
  .sample__row{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 18px; }
  .stat{
    flex:1 1 130px; background:var(--paper); border:1px solid var(--light-400);
    border-radius:12px; padding:12px 14px;
  }
  .stat small{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
  .stat b{ font-size:21px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .stat .neg{ color:var(--loss); } .stat .pos{ color:var(--gain); }
  .sample__line{ font-size:16px; line-height:1.6; margin:0 0 18px; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; min-height:46px;
    padding:0 20px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none;
  }
  .btn--primary{ background:var(--accent); color:#fff; }
  .btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--light-400); }

  /* ---------- SAMPLE MODAL ---------- */
  .smodal{ position:fixed; inset:0; z-index:60; display:none; }
  .smodal.is-open{ display:block; }
  .smodal__backdrop{ position:absolute; inset:0; background:rgba(3,5,8,.72); }
  .smodal__panel{
    position:absolute; inset:4vh 4vw; max-width:900px; margin:0 auto;
    background:var(--paper); border-radius:var(--r-xl);
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  }
  .smodal__head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--light-400);
  }
  .smodal__title{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
  .smodal__title small{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-top:2px; }
  .smodal__close{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--light-400);
    background:var(--light-200); color:var(--ink); font-size:18px; font-weight:700; cursor:pointer;
  }
  .smodal__close:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .smodal__tabs{
    display:flex; gap:6px; padding:12px 20px; overflow-x:auto;
    border-bottom:1px solid var(--light-400); flex-shrink:0;
  }
  .smodal__tab{
    border:1px solid var(--light-400); background:var(--paper); color:var(--muted);
    border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
  }
  .smodal__tab[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .smodal__body{ overflow-y:auto; padding:20px; flex:1; background:var(--light-200); }
  .smodal__shot{ display:none; }
  .smodal__shot.is-on{ display:block; }
  .smodal__shot img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--light-400); display:block; }
  .smodal__ph{
    border:2px dashed var(--light-400); border-radius:12px; background:var(--paper);
    min-height:420px; display:grid; place-items:center; text-align:center; padding:30px;
  }
  .smodal__ph b{ display:block; font-size:15px; margin-bottom:6px; }
  .smodal__ph span{ color:var(--muted); font-size:13.5px; max-width:40ch; line-height:1.6; }
  @media (max-width:640px){ .smodal__panel{ inset:0; border-radius:0; } }

  /* ---------- SEGMENTS ---------- */
  .seg__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .chip{
    border:1px solid var(--light-400); background:var(--paper); color:var(--muted);
    border-radius:999px; padding:9px 16px; font-size:14px; font-weight:700; cursor:pointer;
  }
  .chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .chip:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .seg__body{
    background:var(--light-200); border:1px solid var(--light-400); border-radius:var(--r-lg);
    padding:20px 22px; font-size:15.5px; line-height:1.65; color:var(--ink);
  }
  .seg__body b{ font-weight:700; }

  /* ---------- STEPS ---------- */
  .steps{ display:grid; gap:12px; }
  .step{ display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start;
    background:var(--light-200); border:1px solid var(--light-400); border-radius:var(--r-lg); padding:16px 18px; }
  .step__n{
    width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff;
    display:grid; place-items:center; font-weight:800; font-size:14px; margin-top:2px;
  }
  .step b{ display:block; font-size:15.5px; margin-bottom:3px; }
  .step span{ color:var(--ink); font-size:14.5px; line-height:1.55; }

  .stepsec{ background:#061109; border-top:1px solid rgba(255,255,255,.07); }
  .stepsec h2{ color:#fff; }
  .stepsec .step{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13); }
  .stepsec .step b{ color:#fff; }
  .stepsec .step span{ color:#fff; }
  /* ---------- CLOSE ---------- */
  .close{ background:var(--dark-900); color:#fff; border-radius:var(--r-xl); padding:38px 28px; text-align:center; }
  .close h2{ color:#fff; }
  .close p{ color:#fff; max-width:none; white-space:nowrap; margin:0 auto 22px; }
  @media (max-width:640px){ .close p{ white-space:normal; max-width:44ch; } }
  .close .badges{ justify-content:center; }

  footer{ padding:26px 0 60px; }
  .fine{ color:var(--muted); font-size:12.5px; line-height:1.6; }

  @media (max-width:760px){
    section{ padding:44px 0; }
    .dpv,.cap__grid{ grid-template-columns:1fr; }
    .xform__stage{ grid-template-columns:1fr; }
    .xform__arrow{ transform:rotate(90deg); font-size:22px; }
    .card-mock,.sg-mock{ transform:none; max-width:340px; margin:0 auto; width:100%; }
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---------- site chrome ---------- */
.site-nav{ background:var(--paper); border-bottom:1px solid var(--light-400); }
.site-nav__row{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.site-nav__logo{ font-weight:900; letter-spacing:.3em; font-size:18px; color:var(--ink); text-decoration:none; }
.site-nav__logo sup{ font-size:.45em; color:var(--accent); letter-spacing:0; }
.site-nav__links{ display:flex; gap:22px; }
.site-nav__links a{ color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:600; }
.site-nav__links a:hover{ color:var(--ink); }
.site-foot{ border-top:1px solid var(--light-400); padding:34px 0 60px; }
.site-foot p{ margin:0 0 8px; color:var(--muted); font-size:14px; }
.site-foot__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.site-foot__brand img{ display:block; height:18px; width:auto; margin-bottom:8px; }
.site-foot__brand p{ margin:0; white-space:nowrap; }
.site-foot__row p{ margin:0; white-space:nowrap; }
@media (max-width:760px){ .site-foot__row{ flex-direction:column; gap:6px; } .site-foot__row p{ white-space:normal; } }
.site-foot b{ color:var(--ink); }
.site-foot a{ color:var(--muted); }
.site-foot__copy{ font-size:12.5px; }
@media (max-width:700px){ .site-nav__links{ display:none; } }