/* ===========================================================
   Race Results — 1320cc · Online User Guide
   =========================================================== */

:root{
  /* Brand */
  --brand-900:#1A0428;
  --brand-800:#230A33;
  --brand-700:#3A0760;
  --brand-600:#470271;
  --brand-500:#5F0397;
  --brand-400:#7F34AC;
  --brand-300:#9F68C1;
  --brand-200:#D9C3EA;
  --brand-100:#F2EAF8;

  --accent-700:#05668B;
  --accent-500:#1A92C0;
  --accent-300:#5EBADF;

  --win:#10b981;
  --warn:#f59e0b;

  /* Neutrals (cool-purple-tinted) */
  --ink-900:#15101D;
  --ink-700:#3A3147;
  --ink-500:#6B6478;
  --ink-400:#8F8A9A;
  --ink-300:#BFBAC7;
  --ink-200:#E6E2EC;
  --ink-100:#F4F1F8;
  --ink-50: #FAF8FC;
  --paper: #ffffff;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:18px;
  --radius-xl:28px;

  --shadow-sm: 0 1px 2px rgba(35, 10, 51, .06);
  --shadow:    0 8px 24px -10px rgba(35, 10, 51, .18), 0 2px 6px rgba(35,10,51,.05);
  --shadow-lg: 0 30px 60px -20px rgba(35, 10, 51, .35), 0 8px 20px -8px rgba(35,10,51,.18);

  --maxw: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
body{
  margin:0;
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--ink-900);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
}

h1,h2,h3,h4{
  font-family:'Sora', system-ui, sans-serif;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink-900);
  margin:0 0 .4em;
  line-height:1.15;
}
h1{font-size:clamp(2.4rem, 4.5vw, 3.6rem); letter-spacing:-.03em; font-weight:700;}
h2{font-size:clamp(1.7rem, 2.8vw, 2.25rem); letter-spacing:-.022em; font-weight:600;}
h3{font-size:1.25rem; letter-spacing:-.01em;}
h4{font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); font-weight:600; font-family:'Manrope', sans-serif;}

p{margin:0 0 1em;}
a{color:var(--brand-500); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s;}
a:hover{border-bottom-color:var(--brand-500);}

code, .mono{
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.875em;
  background:var(--ink-100);
  padding:.1em .35em;
  border-radius:4px;
  color:var(--brand-600);
}

/* ===== Top bar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ink-200);
}
.topbar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 28px;
  display:flex; align-items:center; gap:32px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:'Sora', sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--ink-900);
  border-bottom:0;
}
.brand:hover{border-bottom:0;}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:url('icons/apple-touch-icon.png') center/cover no-repeat;
  box-shadow:0 4px 12px -4px rgba(95,3,151,.5);
  flex:0 0 auto;
}
.brand-meta{display:flex; flex-direction:column; line-height:1.1;}
.brand-meta small{font-size:.68rem; color:var(--ink-500); font-weight:500; letter-spacing:.08em; text-transform:uppercase;}

.topnav{display:flex; gap:24px; margin-left:auto;}
.topnav a{
  color:var(--ink-700);
  font-weight:500;
  font-size:.95rem;
  border-bottom:0;
}
.topnav a:hover{color:var(--brand-500); border-bottom:0;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  font-family:inherit;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-primary{
  background:var(--brand-500); color:#fff;
  box-shadow:0 8px 18px -8px rgba(95,3,151,.5);
}
.btn-primary:hover{background:var(--brand-600); transform:translateY(-1px); border-bottom:0;}
.btn-ghost{
  color:var(--ink-700);
  border:1px solid var(--ink-200);
  background:#fff;
}
.btn-ghost:hover{border-color:var(--brand-400); color:var(--brand-500); border-bottom:1px solid var(--brand-400);}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 80% 0%, rgba(26,146,192,.22), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(127,52,172,.28), transparent 60%),
    linear-gradient(180deg, var(--brand-800), var(--brand-900));
  color:#fff;
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:88px 28px 120px;
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.hero h1{color:#fff;}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg, #fff 0%, #1A92C0 50%, #9F68C1 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-200);
  margin-bottom:24px;
}
.hero-eyebrow .dot{
  width:8px; height:8px; border-radius:50%;
  background:#1ddc5e;
  box-shadow:0 0 0 4px rgba(29,220,94,.18);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(29,220,94,0);}}

.hero-sub{
  font-size:1.15rem;
  color:rgba(255,255,255,.78);
  max-width:520px;
  margin-bottom:36px;
}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero-cta .btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18);}
.hero-cta .btn-ghost:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; border-bottom:1px solid rgba(255,255,255,.3);}

.hero-stats{
  display:flex; gap:36px; margin-top:48px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.1);
}
.hero-stats > div{display:flex; flex-direction:column; gap:2px;}
.hero-stats .num{font-family:'JetBrains Mono', monospace; font-size:1.5rem; font-weight:600; letter-spacing:-.02em; color:#fff;}
.hero-stats .lbl{font-size:.78rem; color:rgba(255,255,255,.55); letter-spacing:.06em; text-transform:uppercase;}

/* Hero phone (uses .device under the hood with a tilt) */
.hero-phone-wrap{
  position:relative;
  display:flex; justify-content:center;
  perspective:1800px;
}
.hero-phone-wrap .device{
  max-width:320px;
  transform:rotate(-2deg);
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-phone-wrap .device-screen img{
  width:100%;
}

.hero-orbit{
  position:absolute;
  width:600px; height:600px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.08);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.hero-orbit::before{
  content:""; position:absolute;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent-500);
  top:10%; left:50%;
  box-shadow:0 0 24px var(--accent-500);
}

/* ===== Layout: main with sidebar TOC ===== */
.layout{
  max-width:var(--maxw);
  margin:0 auto;
  padding:64px 28px 96px;
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:64px;
  align-items:start;
}

.toc{
  position:sticky;
  top:96px;
  font-size:.92rem;
  align-self:start;
}
.toc h4{margin-bottom:14px;}
.toc ol{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:2px;
  counter-reset:toc;
}
.toc li{counter-increment:toc;}
.toc a{
  display:flex; align-items:baseline; gap:10px;
  padding:7px 12px;
  border-radius:8px;
  color:var(--ink-500);
  font-weight:500;
  border-bottom:0;
  transition:background .15s, color .15s;
}
.toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  color:var(--ink-300);
  font-weight:500;
}
.toc a:hover{background:var(--ink-100); color:var(--ink-900);}
.toc a.active{
  background:var(--brand-100);
  color:var(--brand-600);
}
.toc a.active::before{color:var(--brand-400);}

/* ===== Content ===== */
.content{min-width:0;}
section{
  scroll-margin-top:96px;
  padding-bottom:80px;
  border-bottom:1px solid var(--ink-200);
  margin-bottom:80px;
}
section:last-child{border-bottom:0; margin-bottom:0;}

.section-num{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem; font-weight:500;
  color:var(--brand-500);
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--brand-100);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:18px;
}

.lead{
  font-size:1.12rem;
  color:var(--ink-700);
  max-width:68ch;
  margin-bottom:32px;
}

.sub{
  font-family:'Sora', sans-serif;
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.01em;
  margin:48px 0 16px;
  color:var(--ink-900);
  display:flex; align-items:center; gap:12px;
}
.sub::before{
  content:""; width:14px; height:2px; background:var(--brand-500);
  border-radius:2px;
}

/* ===== Cards / tables ===== */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--ink-200);
  border-radius:var(--radius);
  background:#fff;
  margin:20px 0 28px;
  box-shadow:var(--shadow-sm);
}
table{width:100%; border-collapse:collapse; font-size:.94rem;}
th, td{padding:14px 18px; text-align:left; vertical-align:top;}
thead th{
  background:var(--ink-50);
  font-weight:600;
  color:var(--ink-700);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid var(--ink-200);
}
tbody tr + tr td{border-top:1px solid var(--ink-200);}
td:first-child{font-weight:600; color:var(--ink-900); white-space:nowrap;}
td strong{color:var(--ink-900);}

/* ===== Screenshot presentation ===== */
.shot{
  margin:32px 0 40px;
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:48px;
  align-items:start;
}
.shot.center{
  grid-template-columns:1fr;
  justify-items:center;
}
.shot.center .shot-caption{max-width:60ch;}
.shot.banner{
  grid-template-columns:1fr;
  justify-items:center;
}

/* Phone device frame -------------------------------- */
.device-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.device{
  position:relative;
  width:100%;
  max-width:280px;
  aspect-ratio: 9 / 16;
  background:linear-gradient(160deg, #1a0a2e, #0a0214);
  border-radius:34px;
  padding:10px;
  box-shadow:
    0 30px 60px -25px rgba(35,10,51,.55),
    0 8px 20px -6px rgba(35,10,51,.25),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.device::after{
  /* speaker pill at top */
  content:"";
  position:absolute;
  top:18px; left:50%; transform:translateX(-50%);
  width:58px; height:6px;
  background:#000;
  border-radius:4px;
  z-index:3;
  opacity:.85;
}
.device-screen{
  width:100%; height:100%;
  border-radius:24px;
  overflow:hidden;
  background:var(--brand-600);
  position:relative;
  padding-top:32px; /* clears the speaker pill so app content isn't covered */
}
.device-screen img{
  display:block;
  width:100%;
  height:auto;
}
/* Scrollshot variant — very tall capture, fade + scroll badge */
.device.scroll .device-screen img{
  width:100%;
  height:auto;
}
.device.scroll .device-screen::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  background:linear-gradient(180deg, transparent, var(--brand-700) 95%);
  pointer-events:none;
  z-index:2;
}
.device.scroll .device-screen::before{
  content:"scroll for more ↓";
  position:absolute;
  bottom:16px; left:50%; transform:translateX(-50%);
  z-index:3;
  font-family:'JetBrains Mono', monospace;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.4);
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  white-space:nowrap;
  backdrop-filter:blur(4px);
}
/* Fit variant — image fills the bezel; crops bottom if needed */
.device.fit .device-screen{display:flex;}
.device.fit .device-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.device-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-400);
}

/* Banner frame — for the wide navbar strip */
.banner-frame{
  width:100%;
  max-width:680px;
  background:linear-gradient(180deg, #1a0a2e, #0a0214);
  border-radius:18px;
  padding:10px;
  box-shadow:
    0 18px 40px -20px rgba(35,10,51,.45),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.banner-frame img{
  width:100%;
  display:block;
  border-radius:10px;
}

.shot-caption{
  padding-top:8px;
  font-size:.97rem;
  color:var(--ink-700);
}
.shot-caption strong{color:var(--ink-900); display:block; margin-bottom:6px; font-size:1.05rem; font-family:'Sora',sans-serif; font-weight:600;}

/* ===== Callouts ===== */
.callout{
  display:flex; gap:16px;
  padding:18px 22px;
  border-radius:var(--radius);
  background:var(--brand-100);
  border-left:3px solid var(--brand-500);
  margin:24px 0;
  color:var(--ink-900);
  font-size:.95rem;
}
.callout.tip{background:#EEF6FB; border-left-color:var(--accent-500);}
.callout.warn{background:#FFF6E5; border-left-color:var(--warn);}
.callout-icon{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:50%;
  background:#fff;
  display:grid; place-items:center;
  font-family:'JetBrains Mono', monospace;
  font-size:.85rem;
  font-weight:700;
  color:var(--brand-500);
}
.callout.tip .callout-icon{color:var(--accent-500);}
.callout.warn .callout-icon{color:var(--warn);}
.callout-body{flex:1; min-width:0;}
.callout-body strong{display:block; margin-bottom:2px; font-family:'Sora',sans-serif;}
.callout-body p:last-child{margin-bottom:0;}

/* ===== Feature pill grid ===== */
.pill-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:32px 0;
}
.pill{
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:var(--radius);
  padding:18px;
  display:flex; flex-direction:column; gap:6px;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.pill:hover{
  transform:translateY(-2px);
  border-color:var(--brand-300);
  box-shadow:var(--shadow);
}
.pill .pill-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.08em;
  color:var(--brand-500);
  text-transform:uppercase;
}
.pill .pill-title{font-family:'Sora', sans-serif; font-weight:600; font-size:1rem;}
.pill .pill-desc{font-size:.88rem; color:var(--ink-500);}

/* ===== Steps ===== */
.steps{
  counter-reset:step;
  display:flex; flex-direction:column; gap:16px;
  margin:24px 0 32px;
}
.step{
  counter-increment:step;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:var(--radius);
}
.step::before{
  content:counter(step, decimal-leading-zero);
  font-family:'JetBrains Mono', monospace;
  font-size:.95rem;
  font-weight:600;
  color:var(--brand-500);
  background:var(--brand-100);
  width:34px; height:34px;
  border-radius:8px;
  display:grid; place-items:center;
}
.step-body strong{display:block; font-family:'Sora', sans-serif; font-weight:600; margin-bottom:2px; color:var(--ink-900);}
.step-body{font-size:.94rem; color:var(--ink-700);}

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  padding:3px 8px;
  border-radius:4px;
  background:var(--win); color:#fff;
}
.badge.live{background:#1ddc5e; color:#001b06;}

/* ===== Anatomy diagram (timeslip readout) ===== */
.readout{
  background:linear-gradient(180deg, var(--brand-700), var(--brand-800));
  border-radius:var(--radius-lg);
  padding:36px;
  color:#fff;
  margin:24px 0;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.readout::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.05), transparent 30%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, 100% 28px;
  pointer-events:none;
}
.readout-head{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:14px;
}
.readout-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.readout-grid > div{
  background:var(--brand-700);
  padding:14px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.readout-grid .lbl{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.readout-grid .val{font-family:'JetBrains Mono', monospace; font-size:1.1rem; font-weight:600; color:#fff;}
.readout-grid .val.accent{color:#5EBADF;}

/* ===== Tab-like install platform cards ===== */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:24px 0 32px;
}
.platform{
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-sm);
}
.platform-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.platform-icon{
  width:36px; height:36px;
  border-radius:9px;
  background:linear-gradient(135deg, var(--brand-100), var(--brand-200));
  display:grid; place-items:center;
  color:var(--brand-600);
  font-weight:700;
  font-family:'JetBrains Mono', monospace;
  font-size:.85rem;
}
.platform h4{
  margin:0;
  font-family:'Sora',sans-serif;
  font-size:1rem;
  text-transform:none;
  letter-spacing:-.01em;
  color:var(--ink-900);
  font-weight:600;
}
.platform ol{padding-left:1.1em; margin:0; font-size:.92rem; color:var(--ink-700);}
.platform ol li{margin-bottom:7px;}

/* ===== Footer ===== */
.footer{
  background:var(--brand-900);
  color:rgba(255,255,255,.7);
  padding:64px 28px 32px;
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:48px;
  align-items:start;
}
.footer h5{
  color:#fff;
  font-family:'Sora',sans-serif;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 14px;
  font-weight:600;
}
.footer a{color:rgba(255,255,255,.7);}
.footer a:hover{color:#fff; border-bottom-color:#fff;}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:.92rem;}
.footer-bottom{
  max-width:var(--maxw);
  margin:48px auto 0;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem;
  color:rgba(255,255,255,.45);
}
.partners{
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}
.partners a{
  display:inline-flex;
  align-items:center;
  border-bottom:0;
  opacity:.85;
  transition:opacity .15s;
}
.partners a:hover{opacity:1; border-bottom:0;}
.partners img{
  display:block;
  height:32px;
  width:auto;
  object-fit:contain;
}
.partners a[aria-label="Drag Insights"] img{height:26px;}

/* ===== Inline kbd / chip ===== */
.kbd{
  font-family:'JetBrains Mono', monospace;
  font-size:.78em;
  padding:2px 7px;
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:5px;
  box-shadow:inset 0 -1px 0 var(--ink-200);
  color:var(--ink-700);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--brand-100);
  color:var(--brand-600);
  font-size:.85em;
  font-weight:600;
}

/* Hamburger button — hidden on desktop */
.nav-toggle{
  display:none;
  width:40px; height:40px;
  background:transparent;
  border:1px solid var(--ink-200);
  border-radius:10px;
  cursor:pointer;
  padding:0;
  margin-left:8px;
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  background:var(--ink-900);
  border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.nav-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .layout{grid-template-columns:1fr; gap:32px; padding-top:40px;}
  .toc{
    position:relative; top:0;
    border:1px solid var(--ink-200); border-radius:var(--radius);
    padding:18px 22px; background:var(--ink-50);
  }
  .hero-inner{grid-template-columns:1fr; padding:64px 28px 80px; gap:40px;}
  .hero-phone-wrap{order:-1; max-width:280px; margin:0 auto;}
  .hero-stats{flex-wrap:wrap; gap:24px;}
}
@media (max-width:720px){
  .topnav{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    background:#fff;
    border-bottom:1px solid var(--ink-200);
    box-shadow:var(--shadow);
    padding:8px 0;
    margin-left:0;
    z-index:60;
  }
  .topnav.open{display:flex;}
  .topnav a{
    padding:14px 20px;
    border-bottom:1px solid var(--ink-100);
    font-size:1rem;
  }
  .topnav a:last-child{border-bottom:0;}
  .nav-toggle{display:flex;}
  .topbar{position:sticky;}
  .topbar-inner{padding:12px 20px; position:relative; gap:12px;}
  .topbar-inner .btn-primary{
    /* shrink primary CTA on small screens so the menu button fits */
    padding:8px 14px;
    font-size:.85rem;
  }
  .layout{padding:32px 20px 64px;}
  .hero-inner{padding:48px 20px 64px;}
  .pill-grid, .platform-grid, .readout-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .shot{grid-template-columns:1fr; gap:24px; justify-items:center;}
  th, td{padding:10px 12px;}
  .device, .device-wrap{max-width:240px;}
  section{padding-bottom:56px; margin-bottom:56px;}
}