/* DoctorFizz Rank Checker
   Design system lifted from doctorfizz.com: Manrope and Fira Code, a rust to gold ramp on
   near black, all caps compound headings split across two tones. */

:root{
  /* sampled from the doctorfizz.com stylesheet */
  --bg:#0D0D0D;
  --bg-2:#111111;
  --panel:#1D1D1D;
  --panel-2:#151515;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --white:#FFFFFF;
  --t1:#F1F1F1;
  --t2:#A9A29B;
  --t3:#6E6862;

  --rust:#CA5223;
  --rust-2:#D45427;
  --orange:#FE9708;
  --amber:#FFA615;
  --gold:#FFD700;
  --ramp:linear-gradient(96deg,#CA5223 0%,#FE9708 46%,#FFD700 100%);
  --ok:#35C48F;

  --display:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"Fira Code",ui-monospace,Menlo,Consolas,monospace;

  --shell:1240px;
  --gut:clamp(20px,4vw,40px);
  --measure:64ch;
  --r:16px;
  --ease:cubic-bezier(.22,.8,.28,1);

  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:104px;
}

*,*::before,*::after{box-sizing:border-box}

/* The hidden attribute must win.
   Any element given a display value in this stylesheet, .modal, .result, .summary and .ladder
   among them, would otherwise override the browser's own [hidden]{display:none} rule and stay
   on screen with hidden set. That is what left the upgrade popup visible and unclosable. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--display);
  font-size:17px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}

img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-underline-offset:3px}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

.shell{width:min(var(--shell),100% - (var(--gut) * 2));margin-inline:auto}
.narrow{max-width:var(--measure)}

.skip{position:absolute;left:-9999px;top:0;background:var(--rust);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:0}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--ramp)}

/* ------------------------------------------------------------------ the compound heading */

/* One heading, wrapping naturally, with a real space in the markup so it reads correctly
   with no stylesheet at all.

   The accent half is a SOLID colour, deliberately. It used to be a clipped gradient, and the
   moment the words inside it were given a transform for the reveal they painted in their own
   context, missed the parent's clipped background, and rendered as invisible text. Clipped
   gradients and animated descendants do not mix. Gradients are still used on the big static
   numbers below, where nothing is transformed. */
.stack{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.04;
  text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3.2rem);
  text-wrap:balance;max-width:22ch}
.stack-a{color:var(--white)}
.stack-b{color:var(--orange)}
.wd{display:inline-block;will-change:transform,opacity}
h1.stack{font-size:clamp(2.2rem,5.2vw,3.9rem);max-width:16ch;line-height:1.02}

/* The header band spans the full shell instead of a 24ch column stranded on the left.
   Title on the left, lede on the right, sharing a baseline. That was the source of the
   large empty area on the right of every section. */
.sec-head{margin-bottom:var(--s8);display:grid;gap:var(--s5);align-items:end}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s8)}
  .sec-head .lede{margin:0;padding-bottom:.35em}
}
.lede{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--t2);margin:var(--s4) 0 0;max-width:46ch}

/* Text led sections put the heading in a sticky left column beside the prose, rather than
   stacking a narrow column against dead space. */
.sec-split{display:grid;gap:var(--s6)}
@media (min-width:960px){
  .sec-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s9);align-items:start}
  .sec-split .sec-head{margin-bottom:0;display:block;position:sticky;top:104px}
  .sec-split .sec-head .lede{padding-bottom:0;margin-top:var(--s4)}
}

/* ------------------------------------------------------------------ nav */

.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);
  background:rgba(13,13,13,.72);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.stuck{border-bottom-color:var(--line);background:rgba(13,13,13,.94)}
.nav-in{display:flex;align-items:center;gap:var(--s5);padding:14px 0}
.brand img{width:172px}
.nav-links{display:none;gap:28px;margin-left:auto}
.nav-links a{font-size:14px;font-weight:500;color:var(--t2);text-decoration:none;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ramp);transition:right .34s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}

.pill-cta{margin-left:auto;font-weight:700;font-size:14px;text-decoration:none;color:var(--white);
  border:1px solid var(--line-2);border-radius:999px;padding:10px 20px;position:relative;
  overflow:hidden;flex:none}
.pill-cta span{position:relative;z-index:1}
.pill-cta::after{content:"";position:absolute;inset:0;background:var(--ramp);
  transform:translateY(101%);transition:transform .38s var(--ease)}
.pill-cta:hover{color:#151515;border-color:transparent}
.pill-cta:hover::after{transform:translateY(0)}
@media (min-width:960px){.nav-links{display:flex}.pill-cta{margin-left:0}}
@media (max-width:600px){.pill-cta{display:none}}

.rerun{position:fixed;left:0;right:0;top:0;z-index:45;background:rgba(13,13,13,.97);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform .35s var(--ease)}
.rerun.on{transform:none}
.rerun-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:11px 0}
.rerun-txt{margin:0;font-size:14px;color:var(--t2);display:flex;align-items:baseline;gap:10px;min-width:0}
.rerun-txt b{font-family:var(--mono);font-size:19px;color:var(--amber);flex:none}
.rerun-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------------ hero */

.hero{position:relative;isolation:isolate;overflow:hidden}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
  opacity:0;transition:opacity 1.4s var(--ease)}
#hero-canvas.ready{opacity:1}
.hero-glow{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(58% 52% at 78% 14%,rgba(254,151,8,.20) 0%,transparent 62%),
  radial-gradient(52% 46% at 12% 78%,rgba(202,82,35,.16) 0%,transparent 60%),
  linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,.1) 26%,var(--bg) 96%)}

.hero-in{display:grid;gap:var(--s7);padding:var(--s8) 0 var(--s9);align-items:start}
@media (min-width:1040px){
  .hero-in{grid-template-columns:minmax(320px,.86fr) minmax(0,1.14fr);gap:var(--s9);
    padding:var(--s9) 0}
}
.hero-copy{display:flex;flex-direction:column;min-width:0}

.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--s5);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(254,151,8,.6);animation:pulse 2.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(254,151,8,.5)}
  70%{box-shadow:0 0 0 14px rgba(254,151,8,0)}
  100%{box-shadow:0 0 0 0 rgba(254,151,8,0)}
}
.deck{font-size:clamp(1rem,1.6vw,1.14rem);color:var(--t2);margin:var(--s5) 0 0;max-width:44ch}

.facts{margin:auto 0 0;padding:var(--s7) 0 0;display:grid;gap:0;grid-template-columns:repeat(2,1fr)}
.facts div{padding:var(--s4) var(--s4) var(--s4) 0;border-top:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);margin:0 0 6px}
.facts dd{margin:0;font-weight:800;font-size:1.8rem;line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ tool */

.tool{background:linear-gradient(135deg,#151515,#0A0A0A);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(20px,2.8vw,32px);position:relative;overflow:hidden;
  box-shadow:0 40px 100px -44px rgba(0,0,0,.95);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.tool::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--ramp)}
.tool:focus-within{border-color:rgba(254,151,8,.36);
  box-shadow:0 40px 100px -44px rgba(0,0,0,.95),0 0 0 1px rgba(254,151,8,.2)}

.tool-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-bottom:var(--s5)}
.tool-title{margin:0;font-size:1.2rem;font-weight:700}
.meter{margin:0;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:12px;color:var(--t2)}
.meter-dot{width:7px;height:7px;border-radius:50%;background:var(--t3);flex:none;transition:background .3s}
.meter[data-state="ok"] .meter-dot{background:var(--ok)}
.meter[data-state="low"] .meter-dot{background:var(--amber)}
.meter[data-state="out"] .meter-dot{background:var(--rust)}

.form{display:grid;gap:var(--s3);grid-template-columns:1fr}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0;position:relative}
.fld label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
.fld input,.fld select{font-family:var(--display);font-size:16px;color:var(--t1);
  background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;min-height:50px;width:100%;appearance:none;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.fld select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A9A29B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:40px}
.fld input::placeholder{color:var(--t3)}
.fld input:hover,.fld select:hover{border-color:var(--line-2)}
.fld input:focus,.fld select:focus{border-color:var(--orange);background:rgba(254,151,8,.06)}
.fld input[aria-invalid="true"]{border-color:var(--rust)}
.sr-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fld.no-combo .sr-select{position:static;width:100%;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
.fld.no-combo input[list]{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (min-width:620px){
  .form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fld-lg,.fld-go{grid-column:span 3}
}

.btn{font-family:var(--display);font-weight:700;font-size:16px;border:0;border-radius:11px;
  padding:15px 28px;min-height:52px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn-go{background:var(--ramp);color:#141414;width:100%;position:relative;
  transition:transform .12s var(--ease),box-shadow .3s var(--ease),filter .2s}
.btn-go:hover{box-shadow:0 14px 40px -14px rgba(254,151,8,.85);filter:brightness(1.06)}
.btn-go:active{transform:translateY(1px)}
.btn-go[disabled]{background:var(--panel);color:var(--t3);cursor:not-allowed;box-shadow:none;filter:none}
.btn-spin{display:none;width:16px;height:16px;border:2px solid rgba(0,0,0,.3);
  border-top-color:#141414;border-radius:50%;animation:spin .7s linear infinite}
.btn-go.busy .btn-spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-sm{font-size:13.5px;padding:9px 16px;min-height:38px;background:var(--ramp);color:#141414}
.btn-primary{background:var(--ramp);color:#141414;transition:box-shadow .3s var(--ease),filter .2s}
.btn-primary svg{transition:transform .22s var(--ease)}
.btn-primary:hover{color:#141414;filter:brightness(1.06);box-shadow:0 16px 44px -16px rgba(254,151,8,.85)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-quiet{background:transparent;color:var(--t2);border:1px solid var(--line-2)}
.btn-quiet:hover{color:#fff;background:rgba(255,255,255,.05)}

.presets{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s4);font-size:13px}
.presets span{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:10px;color:var(--t3)}
.presets button{font-family:var(--display);font-size:13px;color:var(--t2);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.presets button:hover{border-color:var(--orange);color:#fff;background:rgba(254,151,8,.1)}
.form-note{margin:var(--s3) 0 0;font-size:13px;color:var(--t3)}

.scanline{position:absolute;left:0;right:0;height:2px;top:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tool.busy .scanline{opacity:1;animation:scan 1.5s var(--ease) infinite}
@keyframes scan{0%{top:0}100%{top:100%}}

.notice{border-radius:11px;padding:13px 16px;font-size:14.5px;margin:0 0 var(--s4);
  border-left:3px solid var(--orange);background:rgba(254,151,8,.1);color:#FFE0BE}
.notice.is-info{border-color:var(--line-2);background:rgba(255,255,255,.05);color:var(--t2)}
.notice.is-warn{border-color:var(--gold);background:rgba(255,215,0,.08);color:#F6E4B0}

/* ------------------------------------------------------------------ result */

.result{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);
  display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:560px){.result{grid-template-columns:minmax(124px,auto) 1fr;align-items:center;gap:var(--s6)}}
.rd-fig{display:flex;align-items:baseline;gap:6px}
.rd-hash{font-family:var(--mono);font-size:1.4rem;color:var(--t3)}
.rd-num{font-weight:800;font-size:clamp(3.2rem,11vw,5rem);line-height:.84;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;background:var(--ramp);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rd-num.miss{font-size:clamp(1.2rem,4.4vw,1.6rem);line-height:1.3;background:none;color:var(--t3);
  -webkit-text-fill-color:var(--t3)}
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:11px}
.chip.good{background:rgba(53,196,143,.15);color:var(--ok)}
.chip.mid{background:rgba(255,215,0,.14);color:var(--gold)}
.chip.warn{background:rgba(254,151,8,.15);color:var(--amber)}
.rd-meta{margin:0 0 10px;font-size:14.5px;color:var(--t2)}
.rd-meta strong{color:#fff;font-weight:700}
.rd-advice{margin:0;font-size:14.5px;color:var(--t2);max-width:52ch}

.summary{display:grid;gap:1px;margin-top:var(--s5);background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media (min-width:640px){.summary{grid-template-columns:repeat(3,1fr)}}
.sm{background:var(--panel-2);padding:14px 16px;min-width:0}
.sm span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.sm b{font-size:15px;font-weight:600;color:var(--t1);word-break:break-word;display:block;line-height:1.4}
.sm a{color:var(--t1);text-decoration:none;border-bottom:1px solid var(--line-2)}
.sm a:hover{color:var(--amber)}

.ladder{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:2px}
.ladder-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t3);margin:0 0 8px;list-style:none}
.copy-btn{font-family:var(--display);font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--t2);background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:5px 12px;cursor:pointer;transition:border-color .2s,color .2s}
.copy-btn:hover{border-color:var(--orange);color:#fff}
.rung{display:grid;grid-template-columns:44px 1fr;gap:13px;padding:13px 12px 13px 0;border-top:1px solid var(--line)}
.rung-n{font-family:var(--mono);font-size:14px;color:var(--t3);text-align:right;padding-top:3px}
.rung-t{font-size:14.5px;font-weight:600;color:var(--t1);margin:0 0 4px;word-break:break-word}
.rung-u{font-family:var(--mono);font-size:12px;color:var(--t3);margin:0;word-break:break-all}
.rung-s{font-size:13.5px;color:var(--t2);margin:6px 0 0}
.rung.hit{background:linear-gradient(90deg,rgba(254,151,8,.16),transparent);
  box-shadow:inset 3px 0 0 var(--orange);padding-left:13px;border-radius:0 12px 12px 0}
.rung.hit .rung-n{color:var(--amber)}
.rung.hit .rung-t{color:#fff}
.ladder-more{font-size:13px;color:var(--t3);padding:14px 0 0;border-top:1px solid var(--line);margin:0}

.recent{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.recent h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t3);margin:0 0 10px;font-weight:400}
.recent ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.recent button{font-family:var(--display);font-size:13px;color:var(--t2);background:transparent;
  border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .2s,color .2s}
.recent button:hover{border-color:var(--line-2);color:#fff}
.recent button i{font-style:normal;font-family:var(--mono);color:var(--amber)}
.recent button i.miss{color:var(--t3)}

/* ------------------------------------------------------------------ sections */

.sec{padding:var(--s9) 0;border-top:1px solid var(--line)}
.sec-alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.copy p{color:var(--t2);max-width:var(--measure);margin:0 0 var(--s4)}
.rt-list{margin:0 0 var(--s4);padding:0;list-style:none;max-width:var(--measure)}
.rt-list li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--t2)}
.rt-list li::before{content:"";position:absolute;left:2px;top:.78em;width:11px;height:2px;background:var(--ramp)}
.callout{border-left:3px solid var(--orange);background:rgba(254,151,8,.07);padding:16px 20px;
  border-radius:0 12px 12px 0;font-size:15.5px;max-width:var(--measure);color:#FFE0BE;margin:var(--s5) 0 0}
.byline{font-size:13px;color:var(--t3);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s7)}

/* what it does */
.does-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:860px){.does-grid{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.does{border:1px solid var(--line);border-radius:var(--r);padding:var(--s6) var(--s5);
  background:linear-gradient(135deg,#151515,#0B0B0B);position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.does::after{content:"";position:absolute;inset:auto auto 0 0;height:2px;width:0;
  background:var(--ramp);transition:width .55s var(--ease)}
.does:hover{border-color:var(--line-2);transform:translateY(-5px)}
.does:hover::after{width:100%}
.does-v{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber);
  display:block;margin-bottom:var(--s4)}
.does h3{margin:0 0 10px;font-size:1.22rem;font-weight:700}
.does p{margin:0;color:var(--t2);font-size:15px}

/* pinned step stack, the signature moment */
.pin{position:relative}
.pin-inner{min-height:100svh;display:flex;align-items:center;padding:var(--s8) 0}
.pin-grid{display:grid;gap:var(--s7);align-items:center;width:min(var(--shell),100% - (var(--gut) * 2))}
@media (min-width:1000px){.pin-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s9)}}
.pin-nav{list-style:none;margin:var(--s6) 0 0;padding:0;display:none}
.pin-nav li{display:flex;gap:14px;align-items:baseline;padding:11px 0;color:var(--t3);
  border-top:1px solid var(--line);font-size:15px;transition:color .3s var(--ease)}
.pin-nav li span{font-family:var(--mono);font-size:12px;color:var(--t3);transition:color .3s var(--ease)}
.pin-nav li.on{color:var(--white)}
.pin-nav li.on span{color:var(--amber)}
@media (min-width:1000px){.pin-nav{display:block}}

.pin-stack{position:relative;min-height:340px}
.pcard{border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s6) var(--s5);
  background:linear-gradient(135deg,#1B1B1B,#0E0E0E);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
@media (min-width:1000px){
  .pcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    padding:var(--s8) var(--s7)}
}
@media (max-width:999px){.pcard + .pcard{margin-top:var(--s4)}}
.pcard-n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--amber);
  display:block;margin-bottom:var(--s4)}
.pcard h3{margin:0 0 var(--s3);font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.02em}
.pcard p{margin:0;color:var(--t2);font-size:16px;max-width:44ch}

/* what you get */
.gets{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.gets{grid-template-columns:repeat(2,1fr)}}
.gets li{background:var(--panel-2);padding:var(--s6) var(--s5)}
.gets-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber);
  display:block;margin-bottom:var(--s3)}
.gets b{display:block;font-size:1.1rem;font-weight:700;margin-bottom:8px}
.gets p{margin:0;color:var(--t2);font-size:15px}

.upsell{margin:var(--s6) 0 0;font-size:15px;color:var(--t2)}
.link-btn{font-family:var(--display);font-size:15px;font-weight:700;background:none;border:0;
  padding:0;cursor:pointer;background-image:var(--ramp);-webkit-background-clip:text;
  background-clip:text;color:transparent;border-bottom:1px solid var(--rust)}
.link-btn:hover{border-bottom-color:var(--gold)}

/* built for */
.for-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:700px){.for-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.for-grid{grid-template-columns:repeat(4,1fr)}}
.forc{border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);
  background:rgba(255,255,255,.02);transition:border-color .3s var(--ease),background .3s var(--ease)}
.forc:hover{border-color:var(--line-2);background:rgba(254,151,8,.05)}
.forc h3{margin:0 0 10px;font-size:1.02rem;font-weight:700}
.forc p{margin:0;color:var(--t2);font-size:14.5px}

/* ai */
.sec-ai{background:radial-gradient(60% 50% at 10% 0%,rgba(254,151,8,.1),transparent 62%)}
/* The prose under the statistics sits in two columns on wide screens so the section does
   not narrow to a third of the page after a full width stat row. */
.ai-body{display:grid;gap:var(--s6)}
@media (min-width:1000px){
  .ai-body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8);align-items:start}
  .ai-body .copy p{max-width:none}
}
.stat-row{display:grid;gap:var(--s6);grid-template-columns:1fr;margin:0 0 var(--s8)}
@media (min-width:800px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat{border-top:2px solid var(--rust);padding:var(--s4) 0 0}
.stat b{display:block;font-weight:800;font-size:clamp(2.6rem,6vw,4rem);line-height:.94;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-bottom:12px;
  background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{font-size:15px;margin:0 0 9px;color:var(--t2)}
.stat cite{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--t3)}

.sources{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s3);max-width:var(--measure)}
.sources summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:13px;color:var(--t2);padding:6px 0}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:"[ + ] ";color:var(--amber)}
.sources[open] summary::before{content:"[ - ] "}
.sources ul{margin:8px 0 0;padding:0 0 0 18px}
.sources li{font-size:13.5px;margin-bottom:8px;color:var(--t3)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-size:1.02rem;font-weight:600;color:var(--t1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .28s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-a p{margin:0 0 18px;color:var(--t2)}

/* ------------------------------------------------------------------ close */

.close{border-top:1px solid var(--line);
  background:radial-gradient(66% 100% at 20% 0%,rgba(202,82,35,.18),transparent 62%)}
.close-in{display:grid;gap:var(--s7);padding:var(--s9) 0}
@media (min-width:940px){.close-in{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:var(--s9);align-items:center}}
.close-copy p{color:var(--t2);max-width:50ch;margin:var(--s5) 0 var(--s6);font-size:1.04rem}
.close-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.close-card{background:#FBFAF3;color:#111111;border-radius:var(--r);padding:var(--s6) var(--s5)}
.close-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7A7169;margin:0 0 var(--s4)}
.close-card img{width:190px;margin-bottom:var(--s4)}
.close-card p{font-size:14.5px;color:#494139;margin:0 0 var(--s4);line-height:1.62}
.close-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
  color:#111;text-decoration:none;border-bottom:2px solid var(--rust);padding-bottom:3px}
.close-link svg{transition:transform .22s var(--ease)}
.close-link:hover{color:var(--rust)}
.close-link:hover svg{transform:translateX(4px)}

/* ------------------------------------------------------------------ footer */

.foot{background:var(--bg);border-top:1px solid var(--line);padding:var(--s7) 0 var(--s6);color:var(--t2)}
.foot-in{display:grid;gap:var(--s6)}
.foot-mark{width:160px;margin-bottom:var(--s4)}
.foot-note{font-size:12.5px;max-width:46ch;margin:0 0 var(--s3);color:var(--t3)}
.foot-copy{font-size:12.5px;margin:0;color:var(--t3)}
.foot-links,.social{list-style:none;margin:0;padding:0}
.foot-links li{margin-bottom:10px}
.foot-links a,.social a{color:var(--t2);text-decoration:none;font-size:14.5px}
.foot-links a:hover,.social a:hover{color:var(--amber)}
.social{display:flex;gap:9px;margin-top:var(--s5)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:11px;transition:border-color .2s,transform .2s var(--ease)}
.social a:hover{border-color:var(--orange);transform:translateY(-2px)}
@media (min-width:640px){.foot-in{grid-template-columns:1.5fr 1fr}}

/* ------------------------------------------------------------------ modal */

.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--gut)}
.modal-back{position:absolute;inset:0;background:rgba(6,6,6,.82);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:min(520px,100%);background:linear-gradient(135deg,#1A1A1A,#0C0C0C);
  border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s7) var(--s6) var(--s6);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95)}
.modal-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--ramp);
  border-radius:var(--r) var(--r) 0 0}
.modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;
  background:transparent;border:1px solid var(--line);color:var(--t2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.modal-x:hover{border-color:var(--line-2);color:#fff}
.modal-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 var(--s3);background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent}
.modal-card h2{margin:0 0 var(--s3);font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.modal-body{margin:0 0 var(--s5);color:var(--t2);font-size:15px}
.modal-note{margin:var(--s4) 0 0;font-size:12.5px;color:var(--t3)}

/* ------------------------------------------------------------------ motion safety */

/* Nothing here hides content. The motion layer sets its own start state at run time, so a
   failed script load leaves the page fully readable. */
.gsap-ready [data-reveal],.gsap-ready [data-card],.gsap-ready [data-row]{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .progress{display:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

@media print{
  .nav,.rerun,#hero-canvas,.hero-glow,.progress,.presets,.form,.close,.modal{display:none}
  body{background:#fff;color:#000}
}