/* ============================================================
   GREASY SCRIPTS — Carbon & Gold
   Palette sampled from the live Tebex storefront + brand banner.
   ============================================================ */

:root{
  --bg:          #0A0A0C;
  --bg-2:        #0D0D11;
  --panel:       #101014;
  --panel-2:     #14141A;
  --line:        #23232B;
  --line-gold:   rgba(255,212,0,.28);

  --gold:        #FFD400;   /* Tebex accent */
  --gold-deep:   #C9971B;
  --gold-light:  #FFE87A;
  --chrome:      #E8E8EC;

  --ink:         #0F172A;   /* text on gold */
  --fg:          #FFFFFF;
  --muted:       #8E8E9B;

  --grad-gold:   linear-gradient(180deg,#FFE87A 0%,#FFD400 42%,#C9971B 100%);
  --font:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:        ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  --cut:         14px;      /* angular corner size */
  --wrap:        1200px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.narrow{ max-width:820px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:.7rem 1.1rem; font-weight:800;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ── Angular clip helper ─────────────────────────────────── */
.clip{
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}

/* ============================================================
   BACKGROUND FX
   ============================================================ */
.fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.fx-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,212,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,212,0,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

.fx-glow{
  position:absolute; left:50%; top:-30vh; transform:translateX(-50%);
  width:120vw; height:70vh;
  background:radial-gradient(ellipse at center, rgba(255,212,0,.10), transparent 62%);
}

.fx-streak{
  position:absolute; height:1px; width:38vw;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.5; filter:blur(.4px);
  animation:streak 9s linear infinite;
}
.fx-streak--1{ top:16%; left:-40vw; animation-delay:0s; }
.fx-streak--2{ top:48%; left:-40vw; width:26vw; animation-delay:3.2s; opacity:.32; }
.fx-streak--3{ top:74%; left:-40vw; width:44vw; animation-delay:6s; opacity:.22; }

@keyframes streak{
  0%{ transform:translateX(0) rotate(-14deg); }
  100%{ transform:translateX(190vw) rotate(-14deg); }
}
@media (prefers-reduced-motion:reduce){ .fx-streak{ animation:none; opacity:.18; } }

main, .nav, .foot{ position:relative; z-index:1; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:80;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(10,10,12,.72);
  border-bottom:1px solid var(--line);
  transition:border-color .3s, background .3s;
}
.nav.is-stuck{ border-bottom-color:var(--line-gold); background:rgba(10,10,12,.9); }

.nav-in{ display:flex; align-items:center; gap:1.5rem; height:72px; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand img{ border-radius:6px; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; letter-spacing:.14em; }
.brand-txt b{
  font-size:.95rem; font-weight:900; font-style:italic;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-txt i{ font-size:.62rem; font-style:normal; font-weight:700; color:var(--chrome); letter-spacing:.34em; }

.nav-links{ display:flex; gap:1.9rem; }
.nav-links a{
  position:relative; font-size:.82rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); transition:color .2s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-7px; height:2px; width:0;
  background:var(--grad-gold); transition:width .25s ease;
}
.nav-links a:hover{ color:var(--fg); }
.nav-links a:hover::after{ width:100%; }

.burger{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.burger span{ display:block; width:22px; height:2px; background:var(--fg); margin:4px 0; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --cut:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.9rem; font-size:.85rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; cursor:pointer;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease;
  border:0;
}
.btn-sm{ padding:.65rem 1.25rem; font-size:.76rem; }
.btn-lg{ padding:1.15rem 2.6rem; font-size:.95rem; }

.btn-gold{ background:var(--grad-gold); color:var(--ink); box-shadow:0 0 0 rgba(255,212,0,0); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 34px rgba(255,212,0,.3); filter:brightness(1.06); }

.btn-ghost{ background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-gold); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--gold), 0 10px 30px rgba(0,0,0,.5); }

/* ============================================================
   HERO
   ============================================================ */
/* Bottom padding used to come from the ticker's own margin-top while the strip
   lived at the end of the hero. The ticker now sits above the hero, so the
   section has to carry that gap itself or it collides with what follows. */
.hero{ padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(3rem,6vw,5rem); }
.hero-in{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
  font-size:.74rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.eyebrow .dot{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }

h1{
  margin:0 0 1.3rem; font-weight:900; line-height:.92;
  font-size:clamp(2.6rem,6.4vw,4.9rem); letter-spacing:-.02em; text-transform:uppercase;
}
h1 span{ display:block; }
h1 .ln1{ color:var(--chrome); font-style:italic; }
h1 .ln2{
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic;
}
h1 .ln3{ font-size:.38em; letter-spacing:.16em; color:var(--muted); font-weight:800; margin-top:.7rem; }

.lede{ margin:0 0 2rem; max-width:52ch; color:#B9B9C4; font-size:1.06rem; }
.lede b{ color:var(--gold); font-weight:700; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.4rem; }

.hero-marks{ display:flex; flex-wrap:wrap; gap:1.6rem; list-style:none; margin:0; padding:0; }
.hero-marks li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.hero-marks svg{ width:16px; height:16px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* emblem */
.hero-art{ display:grid; place-items:center; }
.emblem-wrap{ position:relative; width:min(100%,400px); aspect-ratio:1; display:grid; place-items:center; }

/* Static glow sits BEHIND the emblem rather than as a drop-shadow filter on
   it. A drop-shadow on a large alpha PNG re-rasterises on every animation
   frame and stalls paint; a plain gradient costs nothing. */
.emblem-wrap::before{
  content:''; position:absolute; inset:8%;
  background:radial-gradient(circle at 50% 50%, rgba(255,212,0,.30), rgba(255,212,0,.06) 55%, transparent 72%);
  filter:blur(18px);
}

.emblem{
  /* logo-emblem.png is the supplied square logo with its black field
     knocked out to real alpha, so it sits on the hero glow cleanly. */
  position:relative;
  width:88%;
  will-change:transform;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.ring{ position:absolute; border-radius:50%; border:1px solid var(--line-gold); }
.ring--a{ inset:0; animation:spin 26s linear infinite; border-style:dashed; }
.ring--b{ inset:9%; border-color:rgba(255,212,0,.14); animation:spin 34s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .emblem,.ring{ animation:none; }
}

/* ticker */
.ticker{
  margin-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; z-index:1;
  background:linear-gradient(90deg,rgba(255,212,0,.05),transparent 30%,transparent 70%,rgba(255,212,0,.05));
  overflow:hidden; padding:.9rem 0;
}
.ticker-row{ display:flex; gap:2rem; width:max-content; animation:marquee 38s linear infinite; }
.ticker-row span{ font-size:.74rem; font-weight:800; letter-spacing:.22em; color:var(--muted); white-space:nowrap; }
.ticker-row i{ color:var(--gold); font-style:normal; font-size:.6rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker-row{ animation:none; } }

/* Ticker sitting directly under the nav rather than below the hero. It needs
   no top gap there, and the hero's own top padding already clears the fixed
   header — so let the strip butt straight up against the nav. */
.ticker--top{ margin-top:0; border-top:0; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:clamp(4rem,8vw,7rem) 0; }
.section--alt{ background:linear-gradient(180deg,transparent,var(--bg-2) 18%,var(--bg-2) 82%,transparent); }

.sec-head{ margin-bottom:3rem; max-width:70ch; }
.sec-head h2, .split-copy h2, .cta h2{
  margin:0 0 .9rem; font-size:clamp(1.9rem,4vw,2.9rem); font-weight:900;
  line-height:1.05; letter-spacing:-.015em; text-transform:uppercase;
}
.sec-sub{ margin:0; color:var(--muted); font-size:1.02rem; }

/* ── Pillars ─────────────────────────────────────────────── */
.pillars{ padding:clamp(3rem,6vw,4.5rem) 0; }
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }

.pillar{
  --cut:16px;
  padding:2rem 1.5rem; background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:transform .25s ease, box-shadow .25s ease, background .25s;
}
.pillar:hover{ transform:translateY(-6px); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line-gold); }
.pillar h3{ margin:1.1rem 0 .5rem; font-size:.95rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pillar p{ margin:0; color:var(--muted); font-size:.9rem; }

.hex{
  width:52px; height:58px; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(255,212,0,.14),rgba(255,212,0,.03));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.hex svg{ width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Product cards ───────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }

.card{
  --cut:18px;
  position:relative; display:flex; flex-direction:column;
  background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.card:hover{ transform:translateY(-8px); box-shadow:inset 0 0 0 1px var(--line-gold), 0 26px 60px rgba(0,0,0,.6); }

.card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#08080A; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-media img{ transform:scale(1.06); }
.card-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,10,12,.92));
}

.tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  padding:.32rem .7rem; font-size:.64rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  background:var(--grad-gold); color:var(--ink);
}
.tag--soon{ background:#26262E; color:var(--muted); }

.card-body{ padding:1.5rem; display:flex; flex-direction:column; flex:1; gap:.8rem; }
.card-body h3{ margin:0; font-size:1.18rem; font-weight:800; letter-spacing:-.01em; }
.card-body p{ margin:0; color:var(--muted); font-size:.9rem; flex:1; }

.card-meta{ display:flex; flex-wrap:wrap; gap:.4rem; }
.card-meta span{
  padding:.26rem .6rem; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); box-shadow:inset 0 0 0 1px var(--line);
}

.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.4rem; }
.price{ font-size:1.5rem; font-weight:900; color:var(--gold); letter-spacing:-.02em; }
.price small{ font-size:.7rem; font-weight:700; color:var(--muted); letter-spacing:.1em; }

.card--soon{ opacity:.62; }
.card--soon .card-media{ display:grid; place-items:center; aspect-ratio:16/10; }
.card--soon .ghost{
  font-size:3.4rem; font-weight:900; font-style:italic; color:#1B1B22; letter-spacing:-.03em;
}

/* ── Split / code window ─────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.split-copy p{ color:var(--muted); }

.checks{ list-style:none; margin:1.6rem 0 2rem; padding:0; display:grid; gap:.85rem; }
.checks li{ position:relative; padding-left:1.9rem; color:#C3C3CE; font-size:.94rem; }
.checks li::before{
  content:''; position:absolute; left:0; top:.42rem; width:10px; height:10px;
  background:var(--grad-gold); transform:rotate(45deg);
}

.win{
  --cut:14px;
  background:#0B0B0F; box-shadow:inset 0 0 0 1px var(--line), 0 30px 70px rgba(0,0,0,.65);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  overflow:hidden;
}
.win-bar{
  display:flex; align-items:center; gap:.45rem; padding:.85rem 1.1rem;
  background:#0E0E13; border-bottom:1px solid var(--line);
}
.win-bar .d{ width:10px; height:10px; border-radius:50%; }
.d1{ background:#FF5F57; } .d2{ background:#FEBC2E; } .d3{ background:#28C840; }
.win-bar span{ margin-left:.6rem; font-family:var(--mono); font-size:.72rem; color:var(--muted); }

.code{ margin:0; padding:1.5rem; overflow-x:auto; font-family:var(--mono); font-size:.82rem; line-height:1.75; color:#C9C9D4; }
.code .c{ color:#5C6370; font-style:italic; }
.code .k{ color:var(--gold); font-weight:600; }
.code .fn{ color:#FFE87A; }
.code .s{ color:#98C379; }
.code .v{ color:#9AB8FF; }

/* ── Chips ───────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.6rem; }
.chip{
  padding:.6rem 1.15rem; font-size:.8rem; font-weight:700; letter-spacing:.05em;
  background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .2s, color .2s, transform .2s;
}
.chip:hover{ box-shadow:inset 0 0 0 1px var(--line-gold); color:var(--gold); transform:translateY(-2px); }
.note{ margin:0; color:var(--muted); font-size:.88rem; max-width:66ch; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{ display:grid; gap:.8rem; }
.faq details{
  background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .2s;
}
.faq details[open]{ box-shadow:inset 0 0 0 1px var(--line-gold); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 1.4rem;
  font-weight:700; font-size:.98rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; color:var(--gold); font-size:1.3rem; font-weight:400; line-height:1; transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0; padding:0 1.4rem 1.3rem; color:var(--muted); font-size:.92rem; }

/* ── CTA ─────────────────────────────────────────────────── */
.cta{ padding:clamp(4rem,8vw,7rem) 0; text-align:center; }
.cta-in{
  --cut:24px;
  padding:clamp(2.8rem,6vw,4.5rem) 2rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,212,0,.12), transparent 62%),
    var(--panel);
  box-shadow:inset 0 0 0 1px var(--line-gold);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.cta p{ margin:0 0 2rem; color:var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding:3.5rem 0 0; }
.foot-in{ display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:start; }
.foot-logo{ width:min(100%,420px); opacity:.92; }

.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.foot-cols h4{
  margin:0 0 1rem; font-size:.72rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.foot-cols a{ display:block; margin-bottom:.6rem; font-size:.9rem; color:var(--muted); transition:color .2s; }
.foot-cols a:hover{ color:var(--fg); }

.foot-legal{
  margin-top:3rem; padding:1.6rem 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.foot-legal p{ margin:0; font-size:.82rem; color:var(--muted); }
.foot-legal .small{ font-size:.75rem; opacity:.7; }

/* ============================================================
   SHOWCASE REEL
   ============================================================ */
.reel{
  --cut:18px;
  margin:0; position:relative; overflow:hidden; background:#08080A;
  box-shadow:inset 0 0 0 1px var(--line-gold), 0 26px 60px rgba(0,0,0,.6);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
/* The intrinsic ratio is set here rather than left to the file so the poster
   and the video occupy identical space — otherwise the block resizes when the
   metadata lands and shunts the page down. */
.reel-vid{
  display:block; width:100%; aspect-ratio:16/9;
  object-fit:cover; background:#08080A;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:2; }
  .hero-art{ order:1; }
  .emblem-wrap{ width:min(100%,280px); }
  .eyebrow,.hero-cta,.hero-marks{ justify-content:center; }
  .lede{ margin-inline:auto; }
  .pillar-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:2.5rem; }
  .foot-in{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  /* 44x44 is the minimum comfortable tap target; the icon itself stays 22px
     wide and the extra size comes from padding. */
  .burger{ display:block; padding:.65rem; min-width:44px; min-height:44px; }
  .btn-sm{ min-height:44px; }
  .nav-links{
    position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(10,10,12,.97); border-bottom:1px solid var(--line-gold);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  /* vh rather than a fixed px so adding nav items can't clip the menu */
  .nav-links.open{ max-height:70vh; overflow-y:auto; }
  .nav-links a{ padding:1.05rem 1.25rem; border-bottom:1px solid var(--line); }
  .nav-links a::after{ display:none; }
  .nav-in .btn-sm{ display:none; }
  .pillar-grid{ grid-template-columns:1fr; }

  /* The footer was 700px on an 812px screen — 86% of a phone viewport. The
     banner logo is a wide 1366x768 image, so at full column width it alone
     came to 188px tall, and its fine print is unreadable at any mobile size
     anyway. Cap it and tighten the surrounding rhythm. */
  .foot{ padding-top:2.25rem; }
  .foot-in{ gap:1.75rem; }
  .foot-logo{ width:min(100%,190px); }
  .foot-cols{ grid-template-columns:1fr 1fr; gap:1.1rem 1rem; }
  .foot-cols h4{ margin-bottom:.55rem; }
  .foot-cols a{ margin-bottom:.4rem; font-size:.85rem; }
  .foot-legal{ flex-direction:column; gap:.4rem; margin-top:1.5rem; padding:1rem 0; }
}

/* ============================================================
   DOCUMENTATION PAGE
   Two-column on desktop: a sticky index beside the content.
   Collapses to a single column on mobile, where the index becomes
   a plain list at the top rather than a sticky rail nobody can reach.
   ============================================================ */
.docs-layout{ display:grid; grid-template-columns:230px 1fr; gap:3rem; align-items:start; }

/* Grid children default to min-width:auto, so a wide table refuses to shrink
   below its own content and drags the whole page into horizontal scroll — the
   overflow-x:auto on .doc-table-wrap never gets a chance to kick in. min-width:0
   lets the column shrink so the table scrolls inside its own box instead. */
.docs-layout > *{ min-width:0; }

.docs-nav{ position:sticky; top:88px; }
.docs-nav h4{
  margin:0 0 .7rem; font-size:.72rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.docs-nav a{
  display:block; padding:.42rem 0; font-size:.9rem; color:var(--muted);
  text-decoration:none; border-left:2px solid transparent; padding-left:.8rem;
  transition:color .2s, border-color .2s;
}
.docs-nav a:hover{ color:var(--chrome); border-left-color:var(--gold); }
.docs-nav .docs-nav-sub{ margin-bottom:1.4rem; }

.doc-sec{ margin-bottom:3.2rem; scroll-margin-top:110px; }
.doc-sec > h2{ font-size:clamp(1.5rem,3vw,2rem); margin:0 0 .6rem; }
.doc-sec > h3{ font-size:1.06rem; margin:2rem 0 .6rem; color:var(--chrome); }
.doc-sec p{ color:var(--muted); line-height:1.75; }
.doc-sec ul,.doc-sec ol{ color:var(--muted); line-height:1.75; padding-left:1.2rem; }
.doc-sec li{ margin-bottom:.4rem; }
.doc-sec code{
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:4px;
  padding:.12rem .4rem; font-size:.86em; color:var(--chrome);
}

/* Tables carry the measured per-pack numbers, so they must stay readable on a
   phone. Wrapping them in their own scroller keeps the page body from ever
   scrolling sideways. */
.doc-table-wrap{ overflow-x:auto; margin:1rem 0 1.4rem; border:1px solid var(--line); border-radius:10px; }
.doc-table{ width:100%; border-collapse:collapse; min-width:560px; font-size:.88rem; }
.doc-table th,.doc-table td{ padding:.68rem .85rem; text-align:left; border-bottom:1px solid var(--line); }
.doc-table th{ color:var(--gold); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.doc-table td{ color:var(--muted); }
.doc-table tr:last-child td{ border-bottom:0; }
.doc-table td b{ color:var(--chrome); font-weight:700; }

.callout{
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:8px;
  background:rgba(255,212,0,.04); padding:1rem 1.1rem; margin:1.2rem 0;
}
.callout p{ margin:0; color:var(--chrome); font-size:.92rem; }
.callout strong{ color:var(--gold); }

.file-tree{
  border:1px solid var(--line); border-radius:8px; background:rgba(0,0,0,.28);
  padding:1rem 1.1rem; margin:1rem 0; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.84rem;
  line-height:1.7; color:var(--muted); white-space:pre;
}
.file-tree b{ color:var(--gold); font-weight:600; }

@media (max-width:900px){
  .docs-layout{ grid-template-columns:1fr; gap:1.6rem; }
  .docs-nav{ position:static; border-bottom:1px solid var(--line); padding-bottom:1rem; }
  .docs-nav .docs-nav-sub{ margin-bottom:.9rem; }
}

/* Narrow screens: stop making tables scroll sideways and stack each row into a
   labelled block instead. A horizontally-scrolling table hides exactly the
   column that matters — on the commands table the whole "what it does" column
   sat off-screen, which is the only reason anyone reads it. Headers are dropped
   and re-attached per cell from data-label. */
@media (max-width:620px){
  .doc-table--stack{ min-width:0; }
  .doc-table--stack thead{ display:none; }
  .doc-table--stack tr{ display:block; padding:.85rem 0; border-bottom:1px solid var(--line); }
  .doc-table--stack tr:last-child{ border-bottom:0; }
  .doc-table--stack td{ display:block; border:0; padding:.22rem .9rem; }
  .doc-table--stack td::before{
    content:attr(data-label); display:block; margin-bottom:.1rem;
    color:var(--gold); font-size:.64rem; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
  }
  /* The row's own name is the heading of its block, so it needs no label. */
  .doc-table--stack td:first-child::before{ display:none; }
  .doc-table--stack td:first-child{ font-size:1rem; padding-bottom:.35rem; }
}