/* ============================================================================
   site.css — Haul IQ marketing-site shell (Felix LIGHT HD).
   R107 (Daniil 2026-06-07): shared across /, /how-it-works, /platform, /pricing.
   Wave 73 (2026-08-07): canonical CLEAN LIGHT theme — soft near-white canvas,
   crisp white cards, hairline borders, Sora + the blue→green→gold Felix
   gradient kept as the brand signature. This :root is THE canonical token
   contract for every Haul IQ surface (marketing, auth, OS, portals).
   All text pairs verified WCAG AA (>=4.5:1 body) — see theme-cohesion notes.
   Loaded by every marketing page; nav/footer injected by site.js.
   ============================================================================ */
/* skins-prep (2026-09-13) — self-hosted Sora, same treatment design-d0 gave
   Inter: five weights (400/500/600/700/800, the exact set the old Google
   Fonts request named), Latin subset, font-display:swap, same unicode-range
   as the @fontsource/sora package's own "latin" cut. Files copied verbatim
   from @fontsource/sora@5.3.0 — see public/vendor/fonts/sora/README.txt for
   the tarball sha256 and the byte-for-byte provenance of each file. This
   replaces the <link rel="preconnect">/<link ...css2?family=Sora> trio every
   marketing page used to load from the two Google-Fonts WAN hosts (see
   no-runtime-cdn-ratchet-smoke.ts / skins-prep-ratchet-smoke.ts S1 — this
   file itself is scanned for those two host strings and must stay at 0). */
@font-face{font-family:'Sora';font-weight:400;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:500;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:600;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:700;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:800;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root {
  /* --- canvas & surfaces (light HD) --- */
  --bg-0:#f7f9fc;   /* app/page canvas — soft near-white, no pure-white glare */
  --bg-1:#ffffff;   /* cards / raised surfaces */
  --bg-2:#f1f5fa;   /* inset / subtle fill */
  --bg-3:#e7edf5;   /* hover / active fill */
  --border:#dde5ef; --border-hot:#c3d0e0; --border-bright:#c3d0e0;
  /* --- text (AA on bg-0/bg-1/bg-2) --- */
  --text-0:#0d1520; /* primary   — 17.4:1 on bg-0 */
  --text-1:#4a5a6f; /* secondary —  7.0:1 on bg-1 */
  --text-2:#5c6f88; /* muted     —  5.1:1 on bg-1, 4.7:1 on bg-2 */
  /* --- brand (front-page identity, kept) --- */
  --accent:#2da8ff;         /* brand blue — FILLS/gradients/marks ONLY (2.6:1 as text = fails AA) */
  --accent-dim:#2da8ff40; --accent-rgb:45,168,255;
  --accent-ink:#0a66c2;     /* brand blue for TEXT/links/icons on light — 5.7:1 on white */
  --on-accent:#04202f;      /* text ON accent/gradient fills — 6.5:1 on accent, 9.4:1 mid-grad */
  --green:#3ddc84;  --green-ink:#147a46; /* fill / text-on-light */
  --gold:#f5c518;   --gold-ink:#8a6a00;  /* fill / text-on-light */
  --grad:linear-gradient(135deg,#2da8ff 0%,#3ddc84 55%,#f5c518 100%);
  --grad-cta:linear-gradient(135deg,#2da8ff,#3ddc84);
  /* --- semantic states, retuned for light (all AA as text on bg-0/1/2) --- */
  --red:#c9271b;    --error:#c9271b;   /* danger / overdue    — 5.5:1 */
  --amber:#b45309;  --warn:#b45309;    /* warning / due-soon  — 5.0:1 */
  --blue:#1a68c4;                      /* info / dispatched   — 5.0:1+ */
  --indigo:#4f46e5;                    /* in-transit          — 6.3:1 */
  --gray:#5b6b7f;                      /* neutral / pending   — 5.5:1 */
  /* --- elevation & rows (light: soft ink shadows, never glows) --- */
  --shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
  --shadow-2:0 6px 16px rgba(16,24,40,.10),0 1px 3px rgba(16,24,40,.06);
  --shadow-3:0 16px 44px rgba(16,24,40,.16),0 4px 14px rgba(16,24,40,.10);
  --shadow-focus:0 0 0 3px rgba(45,168,255,.22);
  --row-zebra:rgba(13,21,32,.025); --row-hover:var(--bg-2);
  /* --- Wave 80: surfaces that used to be literal near-whites in this file.
     Routed through tokens so the fixed nav, the mobile menu and the ambient
     hairline shadow stop being white when the dark palette is active. The dark
     values live in the ONE shared contract, vendor/haul-palette-css.txt. --- */
  --nav-bg:rgba(var(--bg-0-rgb,247,249,252),0.82);       /* translucent fixed header */
  --nav-bg-solid:rgba(var(--bg-0-rgb,247,249,252),0.97); /* mobile slide-in menu     */
  --shadow-tint:rgba(16,24,40,.04);      /* hairline ambient shadow  */
  /* --- type: Sora everywhere (brand), mono for numeric/tabular --- */
  --font:"Sora",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  --font-ui:var(--font);
  --mono:"SF Mono","JetBrains Mono",Menlo,Monaco,ui-monospace,monospace;
  --font-mono:var(--mono);
  --nav-h:60px; --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg-0);color:var(--text-0);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-ink);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* fixed light backdrop wash — brand blue/green tints on the near-white canvas */
.bg-fx{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(1100px 560px at 82% -10%,rgba(45,168,255,0.08),transparent 60%),
  radial-gradient(820px 480px at 8% 8%,rgba(61,220,132,0.05),transparent 55%);}

/* ===================== NAV (desktop + mobile hamburger) ===================== */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;gap:18px;padding:0 22px;
  background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.logo .mark{height:26px;width:26px;flex:none;display:block}
.logo .wm{font-weight:800;font-size:19px;letter-spacing:-0.02em;color:var(--text-0);white-space:nowrap}
.logo .iq{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-spacer{flex:1}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--text-1);font-size:14px;font-weight:500;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--text-0)}
.nav-cta{background:var(--grad-cta);color:var(--on-accent);padding:9px 16px;border-radius:7px;font-size:13px;font-weight:700;transition:filter .15s}
.nav-cta:hover{filter:brightness(1.05);color:var(--on-accent)}
.hamburger{display:none;width:44px;height:44px;border:1px solid var(--border-hot);border-radius:8px;background:var(--bg-1);color:var(--text-0);font-size:20px;cursor:pointer;align-items:center;justify-content:center}

/* mobile slide-in menu */
.mobile-menu{position:fixed;inset:0;z-index:200;background:var(--nav-bg-solid);backdrop-filter:blur(20px);
  display:none;flex-direction:column;padding:24px 22px;}
.mobile-menu.open{display:flex}
.mobile-menu .mm-top{display:flex;align-items:center;margin-bottom:28px}
.mobile-menu .mm-close{margin-left:auto;width:42px;height:42px;border:1px solid var(--border-hot);border-radius:9px;background:var(--bg-1);color:var(--text-0);font-size:24px;cursor:pointer}
.mobile-menu a{display:block;padding:18px 4px;font-size:22px;font-weight:600;color:var(--text-0);border-bottom:1px solid var(--border)}
.mobile-menu .nav-cta{display:block;text-align:center;margin-top:24px;padding:16px;font-size:16px;border-bottom:none}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;font-weight:700;font-size:15px;padding:14px 24px;cursor:pointer;border:1px solid transparent;transition:transform .15s,filter .15s,box-shadow .15s,border-color .15s;font-family:inherit}
.btn.primary{background:var(--grad-cta);color:var(--on-accent);box-shadow:0 6px 18px rgba(45,168,255,0.30)}
.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 10px 26px rgba(45,168,255,0.38)}
.btn.ghost{background:var(--bg-1);border-color:var(--border-hot);color:var(--text-0);box-shadow:var(--shadow-1)}
.btn.ghost:hover{border-color:var(--accent-dim);color:var(--accent-ink)}

/* ===================== SECTIONS / TYPE ===================== */
main{padding-top:var(--nav-h)}
section{padding:84px 0}
section.bordered{border-top:1px solid var(--border)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
/* Wave 75 — the hero eyebrow looked "a little dull" (founder, on the live site). It was a
   CSS COLLISION, not a taste problem: the generic .chip rule further down this file (used
   for the dim/lit feature chips) declares color:var(--text-2), opacity:.35 and font-size:
   11px. It sits AFTER .eyebrow at EQUAL specificity, so it won — the hero eyebrow rendered
   in muted grey at 35% opacity, about 1.5:1 contrast, i.e. the "unlit" treatment meant for
   a chip that is switched off. Measured live: color rgb(92,111,136), opacity 0.35.
   Declaring the three properties here (specificity 0,2,0) closes the leak for good, and
   the eyebrow gets its intended brand-blue at full strength — supporting the gradient
   headline rather than competing with it. */
.eyebrow.chip{display:inline-block;padding:7px 16px;border:1px solid var(--accent-dim);border-radius:999px;background:rgba(45,168,255,0.10);color:var(--accent-ink);opacity:1;font-size:12px;font-weight:600;box-shadow:0 1px 2px var(--shadow-tint)}
h1{font-size:clamp(38px,7.5vw,84px);font-weight:800;letter-spacing:-0.04em;line-height:0.98}
h2{font-size:clamp(28px,5vw,46px);font-weight:800;letter-spacing:-0.03em;line-height:1.04}
h3{font-size:19px;font-weight:700;letter-spacing:-0.01em}
.lead{font-size:clamp(16px,2.2vw,20px);color:var(--text-1);max-width:640px;line-height:1.5}
.section-head{margin-bottom:42px}
.section-head .lead{margin-top:14px}

/* hero */
.hero{min-height:calc(92vh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 0}
.hero h1{max-width:1000px;margin-bottom:22px}
.hero .lead{margin:0 auto 34px;text-align:center}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-stats{margin-top:58px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:640px;width:100%}
.stat{text-align:center}
.stat .v{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--accent-ink)}
.stat .l{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.08em;margin-top:6px}

/* card grids */
.grid{display:grid;gap:16px}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--bg-1);border:1px solid var(--border);border-radius:13px;padding:24px;box-shadow:var(--shadow-1);transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);border-color:var(--border-hot);box-shadow:var(--shadow-2)}
.card .code{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--accent-ink);display:block;margin-bottom:9px}
.card h3{margin-bottom:6px}
.card p{color:var(--text-1);font-size:14px;line-height:1.55}
.card.link{cursor:pointer}
.card.link .more{margin-top:14px;font-size:13px;font-weight:700;color:var(--accent-ink)}

/* step cards w/ gradient top bar */
.step{position:relative;background:var(--bg-1);border:1px solid var(--border);border-radius:13px;padding:26px;overflow:hidden;box-shadow:var(--shadow-1)}
.step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:0.15em;color:var(--accent-ink);margin-bottom:12px}
.step h3{margin-bottom:8px}
.step p{color:var(--text-1);font-size:14.5px;line-height:1.6}

/* ===================== PRICING ===================== */
.pilot-banner{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;
  background:linear-gradient(135deg,rgba(45,168,255,0.10),rgba(61,220,132,0.06));border:1px solid var(--accent-dim);border-radius:14px;padding:22px 26px;margin-bottom:24px}
.pilot-banner b{font-size:17px;color:var(--text-0)}
.pilot-banner span{display:block;color:var(--text-2);font-size:14px;margin-top:4px;font-weight:400}
.ptable-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--bg-1)}
.ptable{width:100%;border-collapse:collapse;min-width:560px}
.ptable th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-2);padding:15px 20px;border-bottom:1px solid var(--border)}
.ptable td{padding:16px 20px;border-bottom:1px solid var(--border);font-size:15px;color:var(--text-1);vertical-align:middle}
.ptable tr:last-child td{border-bottom:none}
.ptable tbody tr:hover td{background:rgba(45,168,255,0.04)}
.ptable tr.pop td{background:rgba(45,168,255,0.06)}
.ptable .tier{font-weight:700;color:var(--text-0);font-size:16px;white-space:nowrap}
.ptable .price{font-weight:800;color:var(--text-0);font-size:17px;font-family:var(--mono);white-space:nowrap}
.ptable .price .u{font-size:12px;color:var(--text-2);font-weight:400}
.badge{display:inline-block;margin-left:8px;background:var(--accent);color:var(--on-accent);font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:2px 7px;border-radius:4px;vertical-align:middle}
.tbl-cta{display:inline-block;padding:8px 15px;border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap}
.tbl-cta.primary{background:var(--grad-cta);color:var(--on-accent)}
.tbl-cta.ghost{border:1px solid var(--border-hot);color:var(--text-0)}
.tbl-cta.ghost:hover{color:var(--accent-ink);border-color:var(--accent-dim)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border:1px solid var(--border);border-radius:11px;background:var(--bg-1);margin-bottom:12px;overflow:hidden}
.faq summary{padding:18px 20px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;color:var(--accent-ink);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:'\2212'}
.faq details p{padding:0 20px 18px;color:var(--text-1);font-size:14.5px;line-height:1.6}

/* ===================== INTERACTIVE DEMO ===================== */
.demo{background:var(--bg-1);border:1px solid var(--border);border-radius:16px;overflow:hidden;max-width:980px;margin:0 auto}
.demo-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.demo-bar .dots{display:flex;gap:6px}
.demo-bar .dots i{width:11px;height:11px;border-radius:50%;background:var(--bg-3);display:block}
.demo-bar .ttl{font-family:var(--mono);font-size:12px;color:var(--text-1)}
.demo-bar .replay{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent-ink);background:none;border:1px solid var(--accent-dim);border-radius:6px;padding:5px 11px;cursor:pointer;font-family:inherit}
.demo-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:0;min-height:330px}
.demo-left{padding:24px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:14px}
.demo-right{padding:24px;display:flex;flex-direction:column;gap:12px}
.demo-cap{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2)}
.doc{border:1px dashed var(--border-hot);border-radius:11px;background:var(--bg-2);padding:16px;opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .5s,transform .5s}
.doc.in{opacity:1;transform:none}
.doc .dh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-0)}
.doc .dh .pg{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text-2)}
.doc .row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-1);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:11px;font-weight:600;padding:5px 10px;border-radius:7px;border:1px solid var(--border);color:var(--text-2);background:var(--bg-2);opacity:.35;transition:.35s}
.chip.lit{opacity:1;color:var(--on-accent);background:var(--grad-cta);border-color:transparent}
.lc{border:1px solid var(--border);border-radius:11px;background:var(--bg-2);padding:14px;opacity:0;transform:translateY(10px);transition:.45s}
.lc.in{opacity:1;transform:none}
.lc .lh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.lc .lstat{margin-left:auto;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bg-3);color:var(--text-1);transition:.35s}
.lc .lstat.live{background:rgba(61,220,132,0.18);color:var(--green-ink)}
.lc .lrow{display:flex;justify-content:space-between;font-size:12px;color:var(--text-1);margin-top:9px}
.lc .lrow b{color:var(--text-0)}
.demo-steps{display:flex;gap:6px;padding:12px 18px;border-top:1px solid var(--border);background:var(--bg-2);flex-wrap:wrap}
.demo-steps .s{font-size:11px;color:var(--text-2);padding:4px 9px;border-radius:6px;transition:.3s}
.demo-steps .s.on{color:var(--on-accent);background:var(--grad-cta);font-weight:700}

/* ===================== FOOTER ===================== */
footer.site{border-top:1px solid var(--border);padding:54px 0 30px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.footer-brand{max-width:300px}
.footer-brand .logo .mark{height:30px;width:30px}
.footer-brand .logo .wm{font-size:20px;font-weight:800}
.swipe-hint{display:none}
.footer-brand .logo .iq{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-brand p{color:var(--text-2);font-size:13.5px;margin-top:11px;line-height:1.6}
.footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px}
.footer-col a{display:block;color:var(--text-1);font-size:14px;margin-bottom:9px}
.footer-col a:hover{color:var(--accent-ink)}
.footer-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:42px;padding-top:22px;border-top:1px solid var(--border);font-family:var(--mono);font-size:12px;color:var(--text-2)}

/* teaser cards (home → sub-pages) */
.teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav .nav-cta{display:none}
  .hamburger{display:inline-flex}
  section{padding:60px 0}
  .demo-stage{grid-template-columns:1fr}
  .demo-left{border-right:none;border-bottom:1px solid var(--border)}
  .hero-stats{grid-template-columns:1fr;gap:22px;margin-top:44px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column}
  .footer-col a{padding:12px 0;margin-bottom:2px}
  .ptable{min-width:500px}
  .ptable-wrap{-webkit-overflow-scrolling:touch}
  .swipe-hint{display:block;text-align:center;font-size:12px;color:var(--text-1);margin:0 0 10px;font-family:var(--mono);letter-spacing:.05em}
}

/* Site footer (2026-09-08): legal links every page must carry (Google OAuth verification requires a reachable privacy policy from the homepage). */
.site-foot{border-top:1px solid var(--border,rgba(255,255,255,.08));padding:28px 0 40px;font-size:13px;color:var(--muted,#8a94a6)}
.site-foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot-links{display:flex;gap:18px;flex-wrap:wrap}
.site-foot-links a{color:inherit;text-decoration:none}
.site-foot-links a:hover{color:var(--fg,#fff);text-decoration:underline}

/* ===================== ICONS (WS-F, 2026-09-09) =====================
   site.js hand-inlines Lucide paths (the marketing site loads no icon
   library) in place of the ☰ / ↺ / × glyphs and the 📄 🚛 🧾 demo-card
   emoji. These rules give the icon-only controls a real box and keep the
   labelled ones on the optical centre instead of the text baseline. */
.hamburger{padding:0}
.mobile-menu .mm-close{display:inline-flex;align-items:center;justify-content:center;padding:0}
.demo-bar .replay{display:inline-flex;align-items:center;gap:6px}
.doc .dh .ico,.lc .lh .ico{flex:none;color:var(--accent-ink)}
.nav .ico,.mobile-menu .ico,.demo-bar .ico{flex:none}