:root{
  --navy:#0b1b34; --deep:#071426; --panel:#0f2444; --panel2:#122a4f;
  --blue:#2d7aff; --cyan:#5cc8ff; --green:#28c76f; --amber:#ffb020; --red:#ff5c5c;
  --ink:#eaf1fb; --muted:#9fb2ce; --line:rgba(120,160,220,.16);
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--deep); color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(45,122,255,.22), transparent 60%),
    radial-gradient(900px 560px at 8% 4%, rgba(92,200,255,.12), transparent 55%),
    linear-gradient(180deg,#0a1a31 0%, #071426 60%, #050f1e 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(120,160,220,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,220,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
h1,h2,h3{line-height:1.12;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(38px,6.4vw,68px)}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:20px;font-weight:700}
p{color:var(--muted)}
.grad{background:linear-gradient(100deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:12px;padding:13px 22px;cursor:pointer;border:1px solid transparent;transition:.2s transform,.2s box-shadow,.2s background}
.btn-primary{background:linear-gradient(100deg,var(--blue),#1e63e6);color:#fff;box-shadow:0 10px 30px rgba(45,122,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(45,122,255,.5)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(7,20,38,.72);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em}
.brand img{height:30px;width:30px}
.brand b{font-size:17px}
.brand span{color:var(--cyan)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14px;color:var(--muted);font-weight:600}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
@media(max-width:860px){.nav-links{display:none}}

/* hero */
.hero{padding:72px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:30px}}
.hero h1{margin:16px 0 18px}
.hero .lead{font-size:clamp(17px,2vw,20px);max-width:560px;color:#c4d2ea}
.capture{margin-top:26px;max-width:520px}
.capture form{display:flex;gap:10px}
.capture input[type=email]{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);font-size:15px;font-family:inherit}
.capture input[type=email]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,122,255,.22)}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none;overflow:hidden}
.capture .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.stickybar[hidden],.exit-modal[hidden]{display:none!important}
.micro{margin-top:10px;font-size:13px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.micro b{color:var(--cyan);font-weight:700}
.formmsg{margin-top:12px;font-size:14px;font-weight:600;min-height:20px}
@media(max-width:520px){.capture form{flex-direction:column}}

/* gauge card */
.gauge-card{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative;overflow:hidden}
.gauge-card .tag{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.gauge-title{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.gauge-wrap{display:flex;flex-direction:column;align-items:center}
.needle{transform-origin:150px 150px;transform:rotate(-90deg);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.gauge-read{margin-top:-30px;text-align:center}
.gauge-read .num{font-size:52px;font-weight:800;letter-spacing:-.02em}
.gauge-read .lab{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.gauge-claim{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:#c4d2ea}
.gauge-claim b{color:#fff}

/* generic section */
section.blk{padding:64px 0;position:relative}
.center{text-align:center;max-width:720px;margin:0 auto}
.center p{margin-top:14px;font-size:17px}
.kicker{color:var(--muted);font-size:15px}

/* problem */
.prob{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media(max-width:820px){.prob{grid-template-columns:1fr}}
.prob .c{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:22px}
.prob .c .n{font-size:13px;font-weight:800;color:var(--blue);letter-spacing:.1em}
.prob .c h3{margin:8px 0 6px;font-size:18px}
.prob .c p{font-size:14.5px}

/* anatomy */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{display:flex;gap:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:16px;padding:20px;transition:.2s transform,.2s border-color}
.step:hover{transform:translateY(-3px);border-color:rgba(92,200,255,.4)}
.step .ix{flex:0 0 42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;background:rgba(45,122,255,.16);color:var(--cyan);border:1px solid rgba(92,200,255,.3)}
.step h3{font-size:17px;margin-bottom:3px}
.step p{font-size:14px}

/* sample */
.sample{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin-top:34px}
@media(max-width:860px){.sample{grid-template-columns:1fr}}
.sample img{width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.verdict{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:18px;padding:26px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.chip.hype{background:rgba(255,92,92,.14);color:#ff8a8a;border:1px solid rgba(255,92,92,.35)}
.chip.real{background:rgba(40,199,111,.14);color:#5fe0a0;border:1px solid rgba(40,199,111,.35)}
.verdict h3{margin:14px 0 8px;font-size:22px}
.verdict p{font-size:15px}
.verdict .src{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.stat .big{font-size:40px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(100deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lab{font-size:13.5px;color:var(--muted);margin-top:6px}
.stat .src{font-size:11px;color:#6f83a3;margin-top:8px}

/* audience */
.aud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.aud span{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;color:#cdd9ee}

/* podcast */
.pod{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:linear-gradient(120deg,rgba(45,122,255,.12),rgba(92,200,255,.05));border:1px solid var(--line);border-radius:22px;padding:34px;margin-top:20px}
@media(max-width:820px){.pod{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:center;margin-top:20px}
@media(max-width:820px){.about{grid-template-columns:1fr}}
.about .card{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center}
.about .card img{width:96px;height:96px;border-radius:16px;margin:0 auto 12px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.creds span{font-size:12.5px;color:#cdd9ee;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:5px 10px}

/* faq */
.faq{max-width:820px;margin:34px auto 0}
.qa{border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px;background:rgba(255,255,255,.025)}
.qa summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';color:var(--cyan);font-size:22px;font-weight:700}
.qa[open] summary::after{content:'\2013'}
.qa p{font-size:15px;padding:0 0 18px}

/* final cta */
.final{text-align:center;background:linear-gradient(160deg,rgba(45,122,255,.16),rgba(7,20,38,.2));border:1px solid var(--line);border-radius:26px;padding:56px 26px;margin:40px 0}
.final h2{margin-bottom:10px}
.final .capture{margin:24px auto 0}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 40px;margin-top:20px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .brand b{font-size:16px}
.foot p{font-size:13px;margin-top:12px;max-width:340px}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot-col a{display:block;font-size:14px;color:#cdd9ee;margin-bottom:9px}
.foot-col a:hover{color:#fff}
.legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:#6f83a3;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.needle{transition:none}}

/* article body (about/privacy) */
.doc{max-width:760px;margin:0 auto}
.doc h2{font-size:26px;margin:30px 0 12px}
.doc h3{margin:22px 0 8px}
.doc p{margin-bottom:14px;font-size:16px;color:#c4d2ea}
.doc ul{margin:0 0 16px 20px;color:#c4d2ea}
.doc li{margin-bottom:8px}

/* newsletter badge + trust bar */
.nl-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);background:rgba(45,122,255,.12);border:1px solid rgba(92,200,255,.3);border-radius:999px;padding:6px 13px;margin-bottom:16px}
.nl-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(40,199,111,.2)}
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.trust-in{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center;align-items:center;padding:22px 0}
.trust .t{display:flex;flex-direction:column;align-items:center;min-width:120px}
.trust .t b{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em}
.trust .t span{font-size:12.5px;color:var(--muted);margin-top:2px}
.trust .sep{width:1px;height:34px;background:var(--line)}
@media(max-width:700px){.trust .sep{display:none}}

/* archive */
.arc-head{text-align:center;max-width:760px;margin:0 auto 8px}
.arc-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 10px}
.arc-filter button{font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s}
.arc-filter button.on,.arc-filter button:hover{color:#fff;border-color:rgba(92,200,255,.5);background:rgba(45,122,255,.14)}
.arc-list{max-width:820px;margin:20px auto 0;border-top:1px solid var(--line)}
.arc-item{display:flex;gap:18px;align-items:baseline;padding:16px 6px;border-bottom:1px solid var(--line);transition:.15s background}
.arc-item:hover{background:rgba(255,255,255,.025)}
.arc-item time{flex:0 0 92px;font-size:12.5px;color:#6f83a3;font-variant-numeric:tabular-nums;padding-top:2px}
.arc-item .m{flex:1;min-width:0}
.arc-item a.t{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.arc-item a.t:hover{color:var(--cyan)}
.arc-item .s{font-size:13.5px;color:var(--muted);margin-top:3px}
.arc-item .tag{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;align-self:center;white-space:nowrap}
.tag-cyb{color:#9fd0ff;background:rgba(45,122,255,.12);border:1px solid rgba(45,122,255,.28)}
.tag-air{color:#f5c877;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.28)}
.arc-yr{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding:26px 6px 6px}
.arc-more{display:block;margin:26px auto 0;text-align:center}

/* full sample article */
.art{max-width:720px;margin:0 auto}
.art .kick{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8ea6c8}
.art .meta{font-size:13px;color:#6f83a3;margin:10px 0 0}
.art h1{font-size:clamp(30px,4.6vw,46px);margin:8px 0 10px;color:#fff}
.art .sub{font-size:19px;color:#c4d2ea;margin-bottom:8px}
.art figure{margin:26px 0}
.art figure img{width:100%;border-radius:14px;border:1px solid var(--line)}
.art .ekick{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8ea6c8;margin:34px 0 2px}
.art h2{font-size:26px;color:#eaf1fb;margin:8px 0 10px}
.art p{font-size:16.5px;color:#cdd9ee;margin-bottom:14px;line-height:1.7}
.art hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.art strong{color:#fff}
.art .src{font-size:13px;color:#6f83a3}
.art .vcard{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:16px;padding:22px;margin:8px 0}
.bio{display:flex;gap:24px;align-items:flex-start;margin:14px 0 4px;flex-wrap:wrap}
.bio-photo{border-radius:16px;object-fit:cover;object-position:center top;border:1px solid var(--line);flex:0 0 auto;width:200px;height:200px}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0 4px}
.books figure{margin:0;text-align:center}
.books img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s}
.books img:hover{transform:translateY(-4px)}
.books figcaption{margin-top:10px;font-size:13px;color:#a7b6d0;font-weight:600}
@media(max-width:640px){.books{grid-template-columns:1fr 1fr}.bio-photo{width:140px;height:140px}}
.crumbs{font-size:13px;color:#8296b5;margin-bottom:14px}.crumbs a{color:#9fc0ff}.crumbs span{margin:0 6px;opacity:.5}
.lp-cta{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:24px 0}
.lp-related{margin-top:34px;border-top:1px solid var(--line);padding-top:20px}
.lp-related h3{font-size:16px;margin-bottom:10px}.lp-related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.lp-related a{color:#9fc0ff;font-size:14px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:860px){.hub-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.hub-grid{grid-template-columns:1fr}}
.hub-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;transition:transform .18s,border-color .18s}
.hub-card:hover{transform:translateY(-3px);border-color:rgba(92,200,255,.4)}
.hub-card h3{font-size:17px;color:#fff;margin:10px 0 6px}.hub-card p{font-size:13px;color:#a7b6d0;line-height:1.5}
.btn-ghost{background:transparent;border:1px solid var(--line);color:#cdd9ee}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(9,20,38,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 20px;display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
.stickybar .sb-copy{font-weight:600;color:#eaf1fb;font-size:15px}
.stickybar .cap-form{margin:0}
.stickybar .formmsg{flex-basis:100%;text-align:center}
.sb-x{background:none;border:none;color:#8296b5;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.sb-x:hover{color:#fff}
.exit-modal{position:fixed;inset:0;z-index:80;background:rgba(4,9,18,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.em-card{position:relative;max-width:460px;width:100%;background:linear-gradient(180deg,var(--panel),#0b1c38);border:1px solid var(--line);border-radius:18px;padding:30px}
.em-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#c4d2ea;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.em-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.em-dismiss{display:block;width:100%;margin-top:16px;background:none;border:none;color:#8296b5;font-size:14px;cursor:pointer;padding:6px}
.em-dismiss:hover{color:#cdd9ee;text-decoration:underline}
.em-already{margin-top:8px;font-size:12px;color:#6b7c99;text-align:center}
.em-already button{background:none;border:none;color:#9fc0ff;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
@media(max-width:560px){.stickybar .sb-copy{font-size:13px;flex-basis:100%;text-align:center}}
/* ============================================================
   THE HYPE INDEX additions. Everything above is the Hype Check
   Now design system, kept intact so the two properties look
   like one brand. Below is only what the scored record needs.
   ============================================================ */
.rec{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:30px}
.rec th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  font-weight:800;padding:0 14px 12px 0;border-bottom:1px solid var(--line)}
.rec td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.rec tr:hover td{background:rgba(255,255,255,.02)}
.rec a{text-decoration:none;color:#fff;font-weight:600}
.rec a:hover{color:var(--cyan)}
.rec .when{color:var(--muted);font-size:12.5px;margin-top:4px}
.rec .sc{font-weight:800;font-variant-numeric:tabular-nums;font-size:16px}
.rec .mono{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cbars{display:grid;gap:18px;margin:22px 0 10px}
.cb{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.cbhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cbhead b{font-size:15px}
.cbhead span{font-variant-numeric:tabular-nums;font-weight:800;font-size:17px;color:var(--cyan)}
.cbhead i{font-style:normal;color:var(--muted);font-size:12px;font-weight:700}
.cbtrack{height:7px;background:rgba(255,255,255,.06);border-radius:4px;margin:10px 0 8px;overflow:hidden}
.cbtrack>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.cbnote{color:var(--muted);font-size:13.5px;line-height:1.55}
.priorbar{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:14px;padding:13px 18px;margin:18px 0 0;font-size:14px;color:var(--muted)}
.priorbar .k{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.cold{font-size:19px;line-height:1.6;color:#c4d2ea;border-left:3px solid var(--blue);padding-left:20px;margin:26px 0 0}
.wim{font-weight:700;color:#fff;font-size:17px;margin:0 0 12px}
.bignum{border-left:3px solid var(--cyan);padding:6px 0 6px 22px;margin:30px 0}
.bignum .n{font-size:58px;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(100deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.bignum .l{color:var(--muted);font-size:15px;margin-top:10px;max-width:560px}
.callout{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:16px;padding:22px 24px;margin:30px 0}
.claimq{font-size:23px;line-height:1.45;font-weight:700;letter-spacing:-.01em;color:#fff}
.acts{margin:14px 0 0 20px}
.acts li{margin-bottom:14px;color:#c4d2ea}
.meta{color:var(--muted);font-size:13.5px}
.gauge-read .lab.v{letter-spacing:.14em}
@media(max-width:860px){.rec th:nth-child(5),.rec td:nth-child(5){display:none}}

/* ---- mobile navigation. Portfolio standard: every property gets a
   hamburger, never a hidden menu with no way back to it. ---- */
.burger{display:none;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;
  transition:transform .2s,background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .2s,top .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mobnav{display:none;border-top:1px solid var(--line);background:rgba(7,20,38,.98);backdrop-filter:blur(14px)}
.mobnav.open{display:block}
.mobnav a{display:block;padding:15px 22px;font-size:16px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.mobnav a:last-child{border-bottom:0}
.mobnav a:active{background:rgba(255,255,255,.05)}
@media(max-width:860px){
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .nav-in{gap:12px}
  .hero-grid{grid-template-columns:1fr!important;gap:28px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .prob{grid-template-columns:1fr}
  .capture form{flex-direction:column}
  .capture button{width:100%;justify-content:center}
  .stickybar .wrap{flex-direction:column;gap:10px}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .rec th:nth-child(1),.rec td:nth-child(1){display:none}
  .bignum .n{font-size:44px}
}

/* ============================================================
   F1 / TELEMETRY LAYER
   Motion carries the idea: the reader arrives fast, the score
   settles slow. Everything here respects prefers-reduced-motion.
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-top:64px}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url('/assets/track-surface.jpg');background-size:cover;background-position:center 38%;
  opacity:.16;filter:grayscale(.35) contrast(1.15);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 45%,transparent 92%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 45%,transparent 92%)}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,20,38,.92) 0%,rgba(7,20,38,.55) 48%,rgba(7,20,38,.9) 100%)}

/* speed streaks. Thin light trails crossing the hero, staggered. */
.streaks{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.streaks i{position:absolute;height:1px;left:-30%;width:30%;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(92,200,255,.75),transparent);
  animation:streak 5.5s linear infinite;opacity:0}
.streaks i:nth-child(1){top:16%;animation-delay:.2s;animation-duration:4.4s}
.streaks i:nth-child(2){top:34%;animation-delay:1.5s;animation-duration:6.2s;
  background:linear-gradient(90deg,transparent,rgba(255,176,32,.55),transparent)}
.streaks i:nth-child(3){top:58%;animation-delay:.9s;animation-duration:5.1s}
.streaks i:nth-child(4){top:76%;animation-delay:2.6s;animation-duration:7s;
  background:linear-gradient(90deg,transparent,rgba(255,92,92,.4),transparent)}
.streaks i:nth-child(5){top:47%;animation-delay:3.4s;animation-duration:4.8s}
@keyframes streak{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(440%);opacity:0}
}

/* the slogan. Sits above the headline like a pit board. */
.pitboard{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
  border:1px solid rgba(255,92,92,.4);background:rgba(255,92,92,.08);
  border-radius:8px;padding:9px 16px 9px 12px}
.pitboard .lights{display:flex;gap:5px}
.pitboard .lights b{width:9px;height:9px;border-radius:50%;background:rgba(255,92,92,.25);
  box-shadow:inset 0 0 0 1px rgba(255,92,92,.45);animation:lightup 4.2s infinite}
.pitboard .lights b:nth-child(1){animation-delay:0s}
.pitboard .lights b:nth-child(2){animation-delay:.16s}
.pitboard .lights b:nth-child(3){animation-delay:.32s}
.pitboard .lights b:nth-child(4){animation-delay:.48s}
.pitboard .lights b:nth-child(5){animation-delay:.64s}
@keyframes lightup{
  0%,10%{background:rgba(255,92,92,.25);box-shadow:inset 0 0 0 1px rgba(255,92,92,.45)}
  14%,52%{background:#ff5c5c;box-shadow:0 0 12px rgba(255,92,92,.8)}
  58%,100%{background:rgba(255,92,92,.25);box-shadow:inset 0 0 0 1px rgba(255,92,92,.45)}
}
.pitboard span{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ff8a8a}

/* headline entrance, slight forward drift like a car settling */
.hero h1,.hero .lead,.hero .capture,.hero .micro{animation:driftin .7s cubic-bezier(.16,1,.3,1) both}
.hero h1{animation-delay:.05s}
.hero .lead{animation-delay:.16s}
.hero .capture{animation-delay:.26s}
.hero .micro{animation-delay:.34s}
@keyframes driftin{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* gauge card arrives from the right, like it came past you */
.gauge-card{animation:swoop .8s cubic-bezier(.16,1,.3,1) both;animation-delay:.12s}
@keyframes swoop{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}

/* needle sweeps from zero on load, tachometer style */
.needle{transform-origin:150px 150px;animation:sweep 1.5s cubic-bezier(.22,1.2,.32,1) .55s both}

/* sector bars, F1 timing-screen fill */
.cbtrack>i{transform-origin:left center;animation:sector .85s cubic-bezier(.16,1,.3,1) both}
.cb:nth-child(1) .cbtrack>i{animation-delay:.05s}
.cb:nth-child(2) .cbtrack>i{animation-delay:.14s}
.cb:nth-child(3) .cbtrack>i{animation-delay:.23s}
.cb:nth-child(4) .cbtrack>i{animation-delay:.32s}
.cb:nth-child(5) .cbtrack>i{animation-delay:.41s}
@keyframes sector{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the record table reads like a timing screen */
.rec tr{transition:background .14s}
.rec tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}

@media(prefers-reduced-motion:reduce){
  .streaks{display:none}
  .pitboard .lights b{animation:none;background:#ff5c5c}
  .hero h1,.hero .lead,.hero .capture,.hero .micro,.gauge-card,.needle,.cbtrack>i{animation:none!important}
}

/* ============================================================
   VERTICAL RHYTHM. Sections were colliding and the sticky bar
   was clipping the last card. Air is part of the design.
   ============================================================ */
section{padding:64px 0}
.hero{padding:64px 0 52px}
section.trust{padding:0}
section.final{padding:72px 0 84px}
h1,h2,h3{scroll-margin-top:96px}
body{padding-bottom:104px}          /* clears the sticky subscribe bar */
.center .eyebrow{display:block;margin-bottom:14px}
.stats{margin-top:52px}
.steps{margin-top:44px;gap:20px}
.prob{margin-top:44px}
.rec{margin-top:36px}
.hero .micro{margin-top:14px}
.hero-grid{gap:56px}
.gauge-card{padding:30px 28px}
.gauge-read{margin-top:-22px}       /* was -30, the number crowded the arc labels */
.gauge-read .num{font-size:56px;line-height:1.05}
.gauge-claim{margin-top:18px;padding-top:16px;line-height:1.6}
.verdict{padding:32px 34px}
.step{padding:22px 24px}
@media(max-width:860px){
  section{padding:48px 0}
  .hero{padding:40px 0 36px}
  section.final{padding:52px 0 64px}
  .hero-grid{gap:32px}
  body{padding-bottom:120px}
}

/* ============================================================
   THE CIRCUIT. A track rushing at the reader in perspective,
   with kerbs, a centre line, brake glow, and a live telemetry
   trace. Built in CSS/SVG rather than video: no 8MB download,
   no stock-footage look, and it can never fail to load.
   ============================================================ */
.hero{min-height:min(94vh,860px);display:flex;align-items:center;padding:96px 0 72px}
.circuit{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  perspective:300px;perspective-origin:50% 30%}
.circuit .road{position:absolute;left:-60%;right:-60%;top:30%;bottom:-42%;
  transform:rotateX(74deg);transform-origin:50% 0;
  background:
    /* centre dashes */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.62) 0 44px, transparent 44px 116px) 50% 0/12px 116px no-repeat,
    /* lane hints */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.14) 0 26px, transparent 26px 150px) 26% 0/4px 150px,
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.14) 0 26px, transparent 26px 150px) 74% 0/4px 150px,
    linear-gradient(180deg,#0d1a2c 0%,#0a1422 60%,#071426 100%);
  animation:rush 1.5s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 26%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 26%,#000 62%,transparent 100%)}
@keyframes rush{to{background-position-y:116px,150px,150px,0}}

/* red and white kerbs down both edges. The most F1 object there is. */
.circuit .kerb{position:absolute;top:30%;bottom:-42%;width:70px;
  transform:rotateX(74deg);transform-origin:50% 0;
  background:repeating-linear-gradient(180deg,#e33 0 34px,#f4f4f4 34px 68px);
  opacity:.5;animation:rush2 1.5s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 28%,#000 64%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 28%,#000 64%,transparent 100%)}
.circuit .kerb.l{left:6%}
.circuit .kerb.r{right:6%}
@keyframes rush2{to{background-position-y:68px}}

/* haze at the vanishing point so the road dissolves into the page */
.circuit .haze{position:absolute;left:0;right:0;top:0;height:62%;
  background:radial-gradient(120% 90% at 50% 100%, rgba(45,122,255,.22), transparent 62%),
             linear-gradient(180deg,#071426 30%,rgba(7,20,38,.2) 100%)}
.circuit .vignette{position:absolute;inset:0;
  background:radial-gradient(130% 88% at 50% 42%, transparent 30%, rgba(7,20,38,.72) 78%, #071426 100%)}

/* brake glow behind the headline. Pulses like a rotor under load. */
.brakeglow{position:absolute;left:-8%;top:34%;width:520px;height:320px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,60,60,.30), rgba(255,60,60,.09) 55%, transparent 72%);
  filter:blur(12px);animation:brake 5.6s ease-in-out infinite}
@keyframes brake{
  0%,58%{opacity:.28;transform:scale(.94)}
  70%{opacity:.85;transform:scale(1.06)}
  86%,100%{opacity:.28;transform:scale(.94)}
}

/* telemetry strip. A live trace under the hero, broadcast style. */
.telemetry{position:relative;margin-top:44px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.028);padding:14px 18px;overflow:hidden}
.telemetry .tlabel{display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.telemetry .tlabel em{font-style:normal;color:#ff8a8a}
.telemetry svg{display:block;width:100%;height:46px;margin-top:8px}
.telemetry .trace{stroke:var(--cyan);stroke-width:2;fill:none;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.4s ease-out .5s forwards}
.telemetry .trace2{stroke:#ff5c5c;stroke-width:2;fill:none;opacity:.85;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.4s ease-out .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* headline gets weight and a tighter track */
.hero h1{font-size:clamp(42px,7vw,78px);letter-spacing:-.028em;line-height:1.02}
.hero h1 .grad{background:linear-gradient(100deg,#ff8a8a,#ff5c5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(17px,1.6vw,20px);margin-top:20px}

@media(max-width:860px){
  .hero{min-height:auto;padding:44px 0 40px}
  .circuit{perspective:200px}
  .brakeglow{display:none}
  .telemetry{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){
  .circuit .road,.circuit .kerb{animation:none}
  .brakeglow{animation:none;opacity:.3}
  .telemetry .trace,.telemetry .trace2{animation:none;stroke-dashoffset:0}
}

/* ---- hero corrections after visual review ---- */
/* 1. The headline was breaking into four ragged lines. Two clean lines only. */
.hero h1{font-size:clamp(38px,5.2vw,62px);max-width:12ch;text-wrap:balance;line-height:1.04}

@media(min-width:1100px){.hero h1{max-width:13ch}}

/* 2. The asphalt photo was fighting the animated road. Photo recedes, road wins. */
.hero-bg{opacity:.07}
.circuit .road{display:none}
.circuit .kerb{display:none}
.circuit .vignette{background:radial-gradient(140% 92% at 50% 46%, transparent 26%, rgba(7,20,38,.62) 74%, #071426 100%)}
.circuit .haze{height:56%;
  background:radial-gradient(130% 96% at 50% 100%, rgba(45,122,255,.30), transparent 66%),
             linear-gradient(180deg,#071426 24%,rgba(7,20,38,.15) 100%)}

/* 3. Give the copy column room so it never collides with the gauge card */
.hero-grid{grid-template-columns:1.02fr .98fr;gap:64px}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero h1{max-width:none}}

/* ---- SVG circuit. Reliable, visible, and fully controllable. ---- */
.circuit svg.trackart{position:absolute;left:50%;top:0;width:min(1700px,150%);height:100%;
  transform:translateX(-50%);display:block}
.trackart .lane{stroke:rgba(255,255,255,.16);stroke-width:2;fill:none}
.trackart .edge{stroke:rgba(255,255,255,.30);stroke-width:3;fill:none}
.trackart .kerbL,.trackart .kerbR{stroke-width:9;fill:none;stroke-dasharray:26 26;
  animation:kerbrun 1.05s linear infinite}
.trackart .kerbL{stroke:#e33}
.trackart .kerbR{stroke:#e33}
.trackart .kerbLw,.trackart .kerbRw{stroke:#f4f4f4;stroke-width:9;fill:none;
  stroke-dasharray:26 26;stroke-dashoffset:26;animation:kerbrun 1.05s linear infinite}
@keyframes kerbrun{to{stroke-dashoffset:-52}}
.trackart .dash{stroke:#fff;stroke-width:7;fill:none;stroke-dasharray:34 46;opacity:.8;
  animation:dashrun .85s linear infinite}
@keyframes dashrun{to{stroke-dashoffset:-80}}
.trackart .surface{fill:url(#tarmac)}
@media(prefers-reduced-motion:reduce){
  .trackart .kerbL,.trackart .kerbR,.trackart .kerbLw,.trackart .kerbRw,.trackart .dash{animation:none}
}

/* ---- track: atmosphere, not clutter. Text must always sit on solid ground. ---- */
.circuit svg.trackart{display:none}
.trackart .kerbL,.trackart .kerbR,.trackart .kerbLw,.trackart .kerbRw{stroke-width:7}
.trackart .dash{opacity:.55}
.trackart .lane{stroke:rgba(255,255,255,.10)}
.trackart .edge{stroke:rgba(255,255,255,.18)}

/* scrim behind the copy column so nothing ever runs through the words */
.hero .wrap::before{content:'';position:absolute;left:0;top:0;bottom:0;width:62%;z-index:-1;
  background:linear-gradient(90deg,#071426 0%,rgba(7,20,38,.94) 46%,rgba(7,20,38,.72) 74%,transparent 100%);
  pointer-events:none}
.hero .wrap{position:relative}
@media(max-width:1000px){
  .hero .wrap::before{width:100%;
    background:linear-gradient(180deg,rgba(7,20,38,.9) 0%,rgba(7,20,38,.82) 70%,rgba(7,20,38,.6) 100%)}
  .circuit svg.trackart{opacity:.3}
}

/* ============================================================
   CINEMATIC HERO. One frame, treated like film.
   Photo: long exposure, Jesper Giortz-Behrens on Unsplash.
   Motion comes from a slow push, not from a video file:
   600KB instead of 6MB, and no iOS autoplay problem.
   ============================================================ */
.filmhero{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.filmhero .frame{position:absolute;inset:-4%;
  background:url('/assets/hero-speed.jpg') center 46%/cover no-repeat;
  /* colour grade: cool the shadows into the navy, lift contrast, ease saturation */
  filter:contrast(1.22) saturate(.72) brightness(.62) hue-rotate(-8deg);
  transform-origin:62% 52%;
  animation:pushin 38s ease-in-out infinite alternate}
@keyframes pushin{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.6%,-1.1%,0)}
}
/* the grade layer. Navy multiply so the photo joins the palette. */
.filmhero .grade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,20,38,.55) 0%,rgba(7,20,38,.30) 42%,rgba(7,20,38,.86) 100%),
             radial-gradient(120% 80% at 78% 30%, rgba(45,122,255,.20), transparent 62%)}
/* directional scrim. Dark where the words are, clear where the light trails are. */
.filmhero .scrim{position:absolute;inset:0;
  background:linear-gradient(94deg,#071426 0%,rgba(7,20,38,.95) 34%,rgba(7,20,38,.62) 58%,rgba(7,20,38,.18) 82%,rgba(7,20,38,.35) 100%)}
/* letterbox edges. Reads as a frame, not a background image. */
.filmhero .bars::before,.filmhero .bars::after{content:'';position:absolute;left:0;right:0;height:64px}
.filmhero .bars::before{top:0;background:linear-gradient(180deg,#071426,transparent)}
.filmhero .bars::after{bottom:0;background:linear-gradient(0deg,#071426,transparent)}
/* faint grain so the gradient never bands on a big monitor */
.filmhero .grain{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}

/* the photo carries the hero now, so the old texture layer stands down */
.hero-bg{display:none}
.hero .wrap::before{background:linear-gradient(90deg,rgba(7,20,38,.86) 0%,rgba(7,20,38,.66) 44%,rgba(7,20,38,.22) 72%,transparent 100%)}
.hero{min-height:min(92vh,880px)}

/* photo credit, small and out of the way. Unsplash licence asks for it. */
.shotby{position:absolute;right:18px;bottom:14px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(159,178,206,.55);z-index:1}
.shotby a{color:rgba(159,178,206,.8);text-decoration:none}
.shotby a:hover{color:var(--cyan)}

@media(max-width:860px){
  .filmhero .frame{animation-duration:46s;background-position:center 42%}
  .filmhero .scrim{background:linear-gradient(180deg,rgba(7,20,38,.82) 0%,rgba(7,20,38,.9) 62%,#071426 100%)}
  .shotby{display:none}
}
@media(prefers-reduced-motion:reduce){.filmhero .frame{animation:none;transform:scale(1.05)}}

/* ---- hero tuning: smaller verdict card, image a touch brighter ---- */
/* card gives width back to the photo */
.hero-grid{grid-template-columns:1.22fr .78fr;gap:56px}
.hero .gauge-card{padding:22px 22px 20px;max-width:420px;margin-left:auto;border-radius:18px}
.hero .gauge-card .gauge-wrap svg{max-width:238px;margin:0 auto}
.hero .gauge-read{margin-top:-16px}
.hero .gauge-read .num{font-size:42px}
.hero .gauge-read .lab.v{font-size:11.5px;letter-spacing:.12em}
.hero .gauge-title{font-size:11px}
.hero .gauge-card .tag{font-size:10px}
.hero .gauge-claim{font-size:13px;margin-top:14px;padding-top:13px}

/* photo: lift it slightly, ease the scrim off the right side */
.filmhero .frame{filter:contrast(1.16) saturate(.80) brightness(.80) hue-rotate(-6deg)}
.filmhero .grade{background:linear-gradient(180deg,rgba(7,20,38,.42) 0%,rgba(7,20,38,.18) 42%,rgba(7,20,38,.78) 100%),
                            radial-gradient(120% 80% at 78% 30%, rgba(45,122,255,.14), transparent 62%)}
.filmhero .scrim{background:linear-gradient(94deg,#071426 0%,rgba(7,20,38,.90) 30%,rgba(7,20,38,.50) 55%,rgba(7,20,38,.08) 80%,rgba(7,20,38,.22) 100%)}
.hero .wrap::before{background:linear-gradient(90deg,rgba(7,20,38,.82) 0%,rgba(7,20,38,.58) 42%,rgba(7,20,38,.14) 70%,transparent 100%)}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero .gauge-card{max-width:none;margin-left:0}
}

/* the smaller dial pulled the readout up into HOLDS UP / ALL HYPE. Clear it. */
.hero .gauge-read{margin-top:4px}
.hero .gauge-card .gauge-wrap svg{max-width:252px}
.hero .gauge-read .num{font-size:44px;line-height:1}

/* ---- gauge: labels are HTML now, so nothing can ever overlap the number ---- */
.gscale{display:flex;justify-content:space-between;align-items:center;margin:14px 4px 0;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.gscale .lo{color:#28c76f}
.gscale .hi{color:#ff5c5c}
.gauge-read{margin-top:6px}

/* ---- hero card: smaller again ---- */
.hero-grid{grid-template-columns:1.34fr .66fr;gap:48px}
.hero .gauge-card{max-width:352px;padding:18px 20px 18px}
.hero .gauge-card .gauge-wrap svg{max-width:210px}
.hero .gauge-read .num{font-size:38px}
.hero .gauge-read .lab.v{font-size:10.5px}
.hero .gauge-claim{font-size:12.5px;line-height:1.55;margin-top:12px;padding-top:11px}
.hero .gscale{font-size:9.5px}

/* ---- pan the frame so more of the circuit is in shot ---- */
.filmhero .frame{background-position:68% 52%}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero .gauge-card{max-width:none}
  .filmhero .frame{background-position:60% 46%}
}

/* .gauge-wrap centres its children, so the label row was shrinking to its own
   content and jamming the two labels together. Pin it to the dial width. */
.gauge-wrap{position:relative}
.gscale{align-self:stretch;width:100%;max-width:252px;margin-left:auto;margin-right:auto;
  padding:0 6px;box-sizing:border-box}
.hero .gscale{max-width:206px;padding:0 2px}

/* clearance under the arc. The dial's stroke is 26 units wide, so its visual
   bottom sits well below the path centre. Give the labels real air. */
.gauge-wrap svg{overflow:visible}
.gscale{margin-top:16px!important}
.hero .gscale{margin-top:12px!important}
.gauge-read{margin-top:10px}
.hero .gauge-read{margin-top:8px}

/* ============================================================
   RED, BELOW THE FOLD. Carried by objects that mean something,
   not sprinkled. Kerb stripes divide sections the way a kerb
   divides track from runoff.
   ============================================================ */
.kerbline{height:7px;width:100%;
  background:repeating-linear-gradient(115deg,#e0384a 0 22px,#f2f2f2 22px 44px);
  opacity:.72}
.kerbline.thin{height:5px;opacity:.5}

/* the closing argument card carries the brake colour */
.verdict{border-left:3px solid #ff5c5c}
.verdict .eyebrow{color:#ff8a8a}

/* "Call" is the accountable one, so it gets the red */
.trust .t:last-child b{color:#ff8a8a}

/* section eyebrows get a small red tick before the label */
.center .eyebrow::before{content:'';display:inline-block;width:16px;height:2px;
  background:#ff5c5c;vertical-align:middle;margin-right:9px;border-radius:2px}

/* record table: the verdict pill already carries colour. Give the row a red
   edge on hover so scanning the archive feels like a timing screen. */
.rec tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #ff5c5c}

/* numbered steps: odd ones red, even ones cyan. Reads as alternating sectors. */
.step:nth-child(odd) .ix{background:rgba(255,92,92,.14);color:#ff8a8a;
  border-color:rgba(255,92,92,.34)}
.step:nth-child(odd):hover{border-color:rgba(255,92,92,.42)}

/* the stat strip gets one red figure so the row is not uniformly blue */
.stat:last-child .big{background:linear-gradient(100deg,#ff8a8a,#ff5c5c);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- footer: was two long paragraphs. Now a tagline and a credit line. ---- */
footer{padding:28px 0 56px!important;margin-top:8px!important}
.foot{align-items:flex-start;gap:36px}
.foot p{font-size:13px;line-height:1.6;max-width:330px;margin-top:10px}
.foot-col h4{margin-bottom:10px}
.foot-col a{font-size:13.5px;margin-bottom:7px}

/* the photo credit was absolutely positioned to the hero and landed on the
   stat cards at wide widths. Put it in flow at the base of the hero instead. */
.shotby{position:static;text-align:right;margin-top:14px;padding-right:2px}

/* the closing line of the slipstream block lands like a verdict */
.verdict .closer{font-size:19px;font-weight:700;color:#fff;margin:18px 0 0;
  padding-left:16px;border-left:3px solid #ff5c5c}
.verdict h3{font-size:clamp(22px,3vw,30px);margin:14px 0 14px}
.verdict p{max-width:660px}

/* ---------------------------------------------------------------- archive
   The back catalogue from Hype Check Now and Hype Check Live. Dense list,
   client-side filter, no pagination. 226 rows read faster than 12 pages do. */
.afilter{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;margin:0 0 8px}
#aq{flex:1 1 300px;min-width:0;background:#0d1526;border:1px solid var(--line);
  border-radius:11px;color:var(--ink);font:500 15px/1.2 Poppins,system-ui,sans-serif;
  padding:12px 14px;outline:none}
#aq:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(92,200,255,.14)}
#aq::placeholder{color:#6f83a3}
.achips{display:flex;flex-wrap:wrap;gap:7px}
.achip{background:#0d1526;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font:600 13px/1 Poppins,system-ui,sans-serif;
  padding:9px 14px;cursor:pointer;transition:.15s}
.achip:hover{color:var(--ink);border-color:#2b3d5c}
.achip.on{background:rgba(92,200,255,.13);border-color:rgba(92,200,255,.5);color:var(--cyan)}
.ahit{min-height:18px;margin:10px 0 0}
.ayear{margin-top:30px}
.ayh{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px;padding-bottom:9px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ayh span{font-size:12px;letter-spacing:.04em;text-transform:none;color:#6f83a3;font-weight:500}
.alist{list-style:none;margin:0;padding:0}
.arow{border-bottom:1px solid rgba(255,255,255,.05)}
.arow a{display:grid;grid-template-columns:112px 1fr;gap:4px 18px;
  padding:14px 6px;text-decoration:none;border-radius:8px;transition:background .14s}
.arow a:hover{background:rgba(92,200,255,.05)}
.adate{color:#6f83a3;font-size:13px;font-weight:600;padding-top:2px;white-space:nowrap}
.atitle{color:var(--ink);font-weight:600;font-size:16.5px;line-height:1.34;text-wrap:balance}
.asub{grid-column:2;color:var(--muted);font-size:14px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.anone{color:var(--muted);padding:36px 0;text-align:center}
.anote{margin-top:40px;padding:18px 20px;border-left:3px solid var(--red);
  background:rgba(255,255,255,.02);border-radius:0 12px 12px 0}
.anote p{margin:0;color:var(--muted);font-size:14.5px}
.anote a{color:var(--cyan)}
@media(max-width:640px){
  .arow a{grid-template-columns:1fr;gap:3px;padding:13px 4px}
  .adate{font-size:12px}
  .asub{grid-column:1}
  .afilter{gap:10px}
  .achips{gap:6px}
  .achip{padding:8px 12px;font-size:12.5px}
}

/* ------------------------------------------------------- landing pages */
.lpbody p{font-size:17px;line-height:1.72;color:#c3d0e4;max-width:72ch;margin:0 0 20px}
.lpbody h2{margin-bottom:14px}
.lpbody h3+p{margin-top:8px}
.lpbody .meta{margin-top:14px}
.lpbody h3{color:var(--ink)}
.lpalso{margin-top:46px;padding-top:26px;border-top:1px solid var(--line)}
.lplinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:12px}
.lplinks a{display:block;padding:15px 16px;border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.02);text-decoration:none;transition:.15s}
.lplinks a:hover{border-color:rgba(92,200,255,.42);background:rgba(92,200,255,.05)}
.lplinks b{display:block;color:var(--cyan);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:6px}
.lplinks span{display:block;color:var(--ink);font-size:14.5px;line-height:1.4;font-weight:500}

/* ---------------------------------------------------------- inner page hero
   The homepage hero is a full-bleed cinematic block: near-viewport height,
   vertically centred, headline clamped to 12ch so it stacks over the photo.
   None of that belongs on a content page. .page resets it. */
.hero.page{min-height:0;display:block;align-items:initial;
  padding:56px 0 24px;overflow:visible}
.hero.page h1{max-width:22ch;font-size:clamp(30px,4.4vw,50px);line-height:1.06;
  letter-spacing:-.02em;margin:14px 0 14px}
.hero.page h1 .grad{color:inherit;background:none;-webkit-text-fill-color:currentColor}
.hero.page .lead{max-width:70ch}
@media(max-width:820px){.hero.page{padding:40px 0 18px}}

/* ------------------------------------------------- round 2: credibility + sharing
   Every element below exists because all four target roles independently marked the
   same three things down: nobody is named, the record looks one entry deep, and
   nothing is built to be forwarded. */

/* byline. A score is a judgment call with a number on it, so it gets signed. */
.byline{display:flex;align-items:center;gap:12px;margin:14px 0 18px;padding:12px 16px;
  border-left:3px solid var(--cyan);background:rgba(92,200,255,.05);border-radius:0 12px 12px 0}
.bl-who{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.bl-who b{color:var(--ink);font-size:15px;font-weight:700}
.bl-who span{color:var(--muted);font-size:13px}

/* record depth */
.recstats{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.rs{flex:1 1 150px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02)}
.rs b{display:block;font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  line-height:1.05}
.rs span{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}

/* expectation setting at every form */
.expect{margin-top:12px;font-size:13.5px;color:var(--muted);max-width:56ch;line-height:1.55}

/* share block */
.sharewrap{margin-top:44px;padding:24px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.pullq{margin:12px 0 18px;padding:0 0 0 18px;border-left:3px solid var(--red);
  font-size:clamp(17px,2.1vw,21px);line-height:1.45;color:var(--ink);font-weight:600;
  text-wrap:balance}
.sharebtns{display:flex;flex-wrap:wrap;gap:9px}
.sbtn{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  font:600 13.5px/1 Poppins,system-ui,sans-serif;text-decoration:none;cursor:pointer;
  transition:.15s}
.sbtn:hover{border-color:rgba(92,200,255,.5);background:rgba(92,200,255,.09);color:var(--cyan)}
.sharewrap .meta{margin-top:14px}

/* editor card */
.editorcard{margin-top:14px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.025)}
.ec-name{font-size:19px;font-weight:800;color:var(--ink);display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ec-name span{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan)}
.editorcard p{margin:0 0 12px}
.editorcard a{color:var(--cyan)}

@media(max-width:640px){
  .recstats{gap:9px}
  .rs{flex:1 1 100%;padding:13px 15px}
  .rs b{font-size:26px}
  .sharewrap{padding:18px}
  .sbtn{padding:9px 13px;font-size:13px}
}

/* ------------------------------------------------------------- the checker
   Round 3. The method existed and could not be used on the statistic actually
   in front of the reader. This is the method as a tool. */
.ck-wrap{border:1px solid var(--line);border-radius:20px;padding:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.ck-claim{display:block;margin-bottom:24px}
.ck-claim span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
#ckClaim{width:100%;box-sizing:border-box;background:#0d1526;border:1px solid var(--line);
  border-radius:12px;color:var(--ink);font:500 16px/1.4 Poppins,system-ui,sans-serif;
  padding:14px 16px;outline:none}
#ckClaim:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(92,200,255,.14)}
#ckClaim::placeholder{color:#6f83a3}
.ck-row{padding:18px 0;border-top:1px solid rgba(255,255,255,.06)}
.ck-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px}
.ck-head b{display:block;color:var(--ink);font-size:16px;font-weight:700}
.ck-head span{display:block;color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:3px;max-width:60ch}
.ck-val{white-space:nowrap;text-align:right}
.ck-val output{font-size:26px;font-weight:800;color:var(--cyan);letter-spacing:-.02em}
.ck-val i{font-style:normal;color:var(--muted);font-size:13px;margin-left:3px}
.ck-row input[type=range]{width:100%;accent-color:#5cc8ff;height:26px;cursor:pointer}
.ck-scale{display:flex;justify-content:space-between;font-size:11.5px;color:#6f83a3;margin-top:2px}
.ck-out{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:24px;padding:20px;
  border-radius:16px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.ck-score{text-align:center;min-width:112px}
.ck-score b{display:block;font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--cyan)}
.ck-score span{display:block;margin-top:4px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.ck-verdict{flex:1 1 260px}
.ck-verdict b{display:block;font-size:21px;font-weight:800;letter-spacing:-.01em}
.ck-verdict span{display:block;margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.55}
.ck-cite{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ck-line{margin:10px 0 16px;font-size:16px;line-height:1.6;color:var(--ink);max-width:76ch}

/* edition: 30-second skim strip and the citation a CISO can paste into slide four */
.glance{display:flex;flex-wrap:wrap;gap:0;margin:18px 0 6px;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025)}
.glance div{flex:1 1 150px;padding:13px 16px;border-right:1px solid rgba(255,255,255,.06)}
.glance div:last-child{border-right:0}
.glance b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:5px}
.glance span{display:block;color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.35}
.citebox{margin-top:34px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.025)}
.citeline{margin:10px 0 14px;font-size:15px;line-height:1.6;color:#c3d0e4;max-width:76ch}

@media print{
  .nav,.mobnav,.stickybar,.final,footer,.sharebtns,.lpbody h2,.lpbody h3,.lpbody p{display:none!important}
  body{background:#fff;color:#000}
  .ck-wrap{border:1px solid #999;background:#fff}
  .ck-head b,.ck-verdict b,.ck-score b,#ckClaim,.ck-line{color:#000!important}
  .ck-head span,.ck-scale,.ck-verdict span{color:#444!important}
}
@media(max-width:640px){
  .ck-wrap{padding:18px}
  .ck-head{flex-direction:column;gap:6px}
  .ck-val{text-align:left}
  .ck-score b{font-size:42px}
  .glance div{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .glance div:last-child{border-bottom:0}
}

/* An edition dated ahead of today is scheduled, not published. Say so plainly. */
.upcoming{margin:14px 0 4px;padding:11px 15px;border-left:3px solid var(--warn,#e0a23f);
  background:rgba(224,162,63,.09);border-radius:0 11px 11px 0;color:#e8c98a;
  font-size:13.5px;line-height:1.5}
.sched{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:999px;
  background:rgba(224,162,63,.14);border:1px solid rgba(224,162,63,.4);
  color:#e0a23f;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* what is coming, stated as coming */
.nextup{margin-top:20px;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:56ch}
.nextup b{display:inline-block;margin-right:8px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan)}
.nextup a{display:block;color:#c3d0e4;text-decoration:none;padding:3px 0;
  border-bottom:1px solid transparent}
.nextup a:hover{color:var(--ink);border-bottom-color:rgba(92,200,255,.4)}
.bl-who b a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(92,200,255,.45)}
.bl-who b a:hover{color:var(--cyan)}