/* =========================================================================
   Caulderon Interactive — shared site stylesheet (v2)
   One stylesheet for every page on the site: the studio home, every app's
   overview + legal pages, the devlog, and the 404 page.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* base surfaces */
  --bg:        #06070d;
  --bg-raise:  #0d1020;
  --bg-raise-2:#131730;
  --ink:       #f3f5fc;
  --ink-dim:   #cfd4ea;
  --muted:     #93a0c2;
  --muted-2:   #6b7494;
  --line:      rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.18);

  /* per-title brand colors — each is the title's own real in-game accent,
     not a decorative palette, so a color always means "that game" */
  --nr:    #5ee7ff;  /* Number Run: Pro Edition */
  --nr-rgb: 94,231,255;
  --tm:    #a78bfa;  /* Tilt Maze */
  --tm-rgb: 167,139,250;
  --tm2:   #fbbf24;
  --bc:    #ff6f91;  /* Block Chakra */
  --bc-rgb: 255,111,145;
  --bc2:   #ffc93c;
  --mn:    #4ade80;  /* MeritNiti: Exam Practice */
  --mn-rgb: 74,222,128;
  --mn2:   #38bdf8;
  --ac:    #e2793d;  /* Ashen Crown: Oath of Greyfen */
  --ac-rgb: 226,121,61;
  --ac2:   #9ca3af;

  --live:  #34d399;
  --soon:  #9aa4bf;
  --dev:   #7dd3fc;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --font-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Menlo", Consolas, monospace;

  --ease: cubic-bezier(.22,.7,.24,1);
  --dur: .22s;

  --measure: 68ch;
  --container: 1160px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 18% -10%, rgba(var(--nr-rgb),.10), transparent 60%),
    radial-gradient(700px 460px at 88% 8%, rgba(var(--bc-rgb),.08), transparent 55%),
    linear-gradient(180deg, var(--bg), #050609 70%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  position: relative;
}
/* extremely subtle grain, purely textural, never affects contrast */
body::after{
  content:"";
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.025; 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="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
button{ font:inherit; }

:focus-visible{
  outline: 2px solid var(--nr);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:absolute; left:12px; top:-48px;
  background:var(--ink); color:#06070d;
  padding:10px 16px; border-radius:10px; font-weight:700; font-size:14px;
  transition: top var(--dur) var(--ease);
  z-index:100;
}
.skip-link:focus{ top:12px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- 3. Layout helpers ---------- */
.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.section{ padding: 76px 0; border-top:1px solid var(--line); scroll-margin-top: 88px; }
.section:first-of-type{ border-top:none; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(1.9rem, 1.55rem + 1.6vw, 2.7rem); line-height:1.08; }
.section-head p{ margin-top:16px; color:var(--muted); font-size:1.05rem; line-height:1.7; }
.measure{ max-width: var(--measure); }
#top, #games, #craft, #about, #contact, #how-it-plays, #story{ scroll-margin-top: 88px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------- 4. Nav ---------- */
.nav{
  position:sticky; top:0; z-index:30;
  min-height:72px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:rgba(6,7,13,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-inner{
  position:relative;
  max-width: var(--container); margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand .mark{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  border:1px solid rgba(var(--nr-rgb),.55);
  background: linear-gradient(160deg, rgba(var(--nr-rgb),.16), transparent);
  color: var(--nr); font-family:var(--font-display); font-weight:700; font-size:16px;
  flex: 0 0 auto;
}
.brand-word{ font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:.01em; }
.brand-word b{ color:var(--nr); font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14.5px; color:var(--ink-dim); transition: color var(--dur) var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-back{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.nav-back:hover{ color:var(--ink); }

.nav-toggle{
  display:none;
  width:40px; height:40px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{ position:relative; display:block; width:16px; height:2px; background:currentColor; transition: background var(--dur) var(--ease); }
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- 5. Buttons & store badges ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:50px; padding:0 24px; border-radius:var(--radius-pill);
  font-weight:700; font-size:14.5px; border:1px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn-solid{ background:var(--ink); color:#0a0b12; }
.btn-solid:hover{ background:#fff; }
.btn-outline{ border-color: var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.btn-link{ font-weight:600; font-size:14.5px; color:var(--ink-dim); border-bottom:1px solid var(--line-strong); padding-bottom:2px; }
.btn-link:hover{ color:var(--ink); border-color: var(--ink-dim); }

.store-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.store-badge{
  display:flex; align-items:center; justify-content:center;
  min-height:64px; padding:6px 14px; border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.035);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.store-badge img{ width:192px; height:54px; object-fit:contain; }
.store-badge:not(.is-disabled):hover{
  transform: translateY(-2px); background:rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
}
.store-badge.is-disabled{ opacity:.5; cursor:default; pointer-events:none; }
.store-note{ font-size:12.5px; color:var(--muted-2); }

/* ---------- 6. Status chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 10px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:700; border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.chip.is-live{ color:#c9fbe8; border-color: rgba(52,211,153,.35); background:rgba(52,211,153,.08); }
.chip.is-live .dot{ background:var(--live); box-shadow:0 0 0 3px rgba(52,211,153,.18); }
.chip.is-soon{ color:#d7dcef; border-color: var(--line-strong); }
.chip.is-soon .dot{ background:var(--soon); }
.chip.is-dev{ color:#dff1ff; border-color: rgba(125,211,252,.3); background:rgba(125,211,252,.07); }
.chip.is-dev .dot{ background:var(--dev); box-shadow:0 0 0 3px rgba(125,211,252,.18); }

/* ---------- 7. Hero ---------- */
.hero{ padding: 68px 0 56px; position:relative; isolation:isolate; overflow:clip; }
.hero-inner{
  max-width: var(--container); margin:0 auto; padding:0 24px;
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--muted);
}
.hero-tag .mark{
  width:24px; height:24px; border-radius:7px;
  display:grid; place-items:center; font-family:var(--font-display); font-size:11px; font-weight:700;
  border:1px solid rgba(255,255,255,.25); color:var(--ink-dim);
}
.hero-emblem{ width:104px; height:104px; border-radius:26px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.hero h1{
  font-size: clamp(2.6rem, 1.9rem + 3.6vw, 5.1rem);
  line-height: .98; letter-spacing:-.02em;
}
.hero h1 .accent{ color: var(--accent, var(--nr)); }
.hero-tagline{ font-family:var(--font-display); font-weight:600; font-size: clamp(.95rem,.8rem + .5vw,1.15rem); letter-spacing:.04em; color: var(--accent, var(--nr)); text-transform:uppercase; }
.hero p.lede{ max-width: 640px; font-size: clamp(1.02rem,.95rem + .3vw,1.18rem); color:var(--ink-dim); line-height:1.75; }
.hero-actions{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.hero-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* studio hero stat strip */
.stat-row{ display:flex; flex-wrap:wrap; gap:0; margin-top:8px; border-top:1px solid var(--line); padding-top:22px; width:100%; max-width:720px; }
.stat{ padding:0 26px 0 0; margin-right:26px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.3rem,1.1rem+.6vw,1.7rem); font-weight:700; color:var(--ink); }
.stat span{ display:block; margin-top:4px; font-size:12.5px; color:var(--muted-2); }

/* ---------- 8. Game cards ---------- */
.games-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px; }
.game-card{
  --accent: var(--nr);
  display:flex; flex-direction:column; gap:18px;
  padding:26px; border-radius: var(--radius-lg);
  border:1px solid var(--line); background: var(--bg-raise);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.game-card:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb,94,231,255),.45);
  box-shadow: 0 22px 46px -18px rgba(var(--accent-rgb,94,231,255),.35);
}
.game-card.nr{ --accent: var(--nr); --accent-rgb: var(--nr-rgb); }
.game-card.tm{ --accent: var(--tm); --accent-rgb: var(--tm-rgb); }
.game-card.bc{ --accent: var(--bc); --accent-rgb: var(--bc-rgb); }
.game-card.mn{ --accent: var(--mn); --accent-rgb: var(--mn-rgb); }
.game-card.ac{ --accent: var(--ac); --accent-rgb: var(--ac-rgb); }
.game-card-top{ display:flex; align-items:flex-start; gap:16px; }
.game-card .icon{ width:64px; height:64px; border-radius:17px; flex:0 0 64px; box-shadow:0 10px 26px rgba(0,0,0,.35); }
.game-card-title{ font-size:1.22rem; font-weight:600; }
.game-card-genre{ margin-top:5px; font-size:12px; color: var(--accent); font-weight:700; }
.game-card p.pitch{ color:var(--muted); font-size:14.5px; line-height:1.65; }
.game-card-links{ display:flex; gap:16px; flex-wrap:wrap; margin-top:auto; padding-top:6px; border-top:1px solid var(--line); }
.game-card-links a{ font-size:12px; font-weight:700; color:var(--muted-2); letter-spacing:.02em; }
.game-card-links a:hover{ color: var(--accent); }
.game-card-cta{ font-size:13.5px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.game-card-cta:hover{ color: var(--accent); }

/* ---------- 9. Craft / statement section ---------- */
.craft{ display:grid; grid-template-columns: 1.1fr .9fr; gap:64px; align-items:start; }
.craft-statement h2{ font-size: clamp(1.9rem,1.5rem+1.8vw,2.9rem); line-height:1.14; }
.craft-statement p{ margin-top:18px; color:var(--muted); font-size:1.05rem; line-height:1.75; max-width:52ch; }
.craft-list{ display:flex; flex-direction:column; gap:0; }
.craft-item{ padding:20px 0; border-top:1px solid var(--line); display:flex; gap:16px; }
.craft-item:last-child{ border-bottom:1px solid var(--line); }
.craft-item .n{ font-family:var(--font-display); font-size:13px; color:var(--muted-2); padding-top:2px; }
.craft-item b{ display:block; font-size:15px; font-weight:600; margin-bottom:4px; }
.craft-item span{ color:var(--muted); font-size:14px; line-height:1.6; }

/* ---------- 10. Feature grid ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature{
  padding:24px; border-radius:var(--radius-md); border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.feature b{ font-size:15.5px; font-weight:600; }
.feature p{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.65; }

/* ---------- 11. About / split / story ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.split p{ color:var(--muted); font-size:1.05rem; line-height:1.75; }

.value-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.value-card{ padding:26px; border-radius:var(--radius-md); border:1px solid var(--line); background: var(--bg-raise); }
.value-card b{ display:block; font-size:16px; margin-bottom:8px; }
.value-card p{ color:var(--muted); font-size:14px; line-height:1.7; }

.timeline{ display:flex; flex-direction:column; }
.timeline-row{ display:grid; grid-template-columns:100px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line); }
.timeline-row:last-child{ border-bottom:1px solid var(--line); }
.timeline-row .when{ font-family:var(--font-display); font-size:13px; color:var(--muted-2); padding-top:2px; }
.timeline-row b{ display:block; font-size:15.5px; margin-bottom:4px; }
.timeline-row p{ color:var(--muted); font-size:14px; line-height:1.65; max-width:56ch; }

/* ---------- 12. Contact strip ---------- */
.contact-strip{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.contact-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.contact-actions a{ padding:13px 18px; border:1px solid var(--line); border-radius:12px; font-size:14px; font-weight:600; }
.contact-actions a:hover{ border-color: rgba(255,255,255,.3); background:rgba(255,255,255,.04); }

/* ---------- 13. Footer ---------- */
footer.site-footer{ border-top:1px solid var(--line); position:relative; z-index:1; }
.footer-grid{
  max-width: var(--container); margin:0 auto; padding:56px 24px 32px;
  display:grid; grid-template-columns: 1.3fr repeat(5, minmax(110px,1fr)); gap:24px;
}
.footer-about{ padding-right:20px; }
.footer-about p{ margin-top:12px; color:var(--muted); font-size:13.5px; line-height:1.7; max-width:34ch; }
.footer-col b{ font-size:12.5px; letter-spacing:.03em; color:var(--muted); font-weight:700; display:block; margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13.5px; color:var(--ink-dim); }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{
  max-width:var(--container); margin:0 auto; padding:22px 24px 36px;
  border-top:1px solid var(--line); display:flex; justify-content:space-between;
  gap:16px; color:var(--muted-2); font-size:12.5px; flex-wrap:wrap;
}
.footer-bottom a:hover{ color: var(--ink-dim); }

/* ---------- 14. Legal / document pages ---------- */
.doc-hero{ padding: 64px 0 40px; }
.doc-hero .chip{ margin-bottom:18px; }
.doc-hero h1{ font-size: clamp(2rem,1.6rem+2vw,3rem); }
.doc-hero .updated{ margin-top:14px; color:var(--muted-2); font-size:13.5px; }
.doc-layout{ display:grid; grid-template-columns: 260px minmax(0,1fr); gap:56px; align-items:start; }
.toc{ position:sticky; top:96px; }
.toc b{ display:block; font-size:12px; color:var(--muted-2); font-weight:700; letter-spacing:.03em; margin-bottom:14px; }
.toc ol{ list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.toc li{ counter-increment: toc; }
.toc a{
  display:flex; gap:10px; padding:8px 10px; border-radius:9px; font-size:13.5px; color:var(--muted);
}
.toc a::before{ content: counter(toc, decimal-leading-zero); color:var(--muted-2); font-family:var(--font-display); font-size:11px; padding-top:2px; }
.toc a:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.doc-body{ max-width: var(--measure); }
.doc-section{ padding: 30px 0; border-top:1px solid var(--line); scroll-margin-top:96px; }
.doc-section:first-child{ border-top:none; padding-top:0; }
.doc-section h2{ font-size:1.3rem; font-weight:600; }
.doc-section .doc-text{ margin-top:14px; color:var(--muted); font-size:15px; line-height:1.8; }
.doc-text p + p{ margin-top:14px; }
.doc-text ul{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.doc-text li{ padding-left:18px; position:relative; }
.doc-text li::before{ content:""; position:absolute; left:0; top:.7em; width:5px; height:5px; border-radius:50%; background:var(--muted-2); }
.doc-faq-q{ font-weight:600; color:var(--ink); }
.doc-footer-note{ margin-top:50px; padding-top:30px; border-top:1px solid var(--line); color:var(--muted-2); font-size:13px; }
.doc-callout{
  margin-top:16px; padding:16px 18px; border-radius:12px;
  border:1px dashed rgba(251,191,36,.4); background:rgba(251,191,36,.06);
  color:#ffe6a8; font-size:13.5px; line-height:1.7;
}

/* ---------- 15. Legal grid (per-app legal & support hub) ---------- */
.legal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.legal-card{
  display:block; padding:22px; border:1px solid var(--line); border-radius:18px;
  background: var(--bg-raise); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-card:hover{ border-color: rgba(var(--accent-rgb,94,231,255),.4); transform:translateY(-2px); }
.legal-card b{ font-size:15px; display:block; }
.legal-card p{ font-size:13px; margin:6px 0 0; color:var(--muted); line-height:1.6; }
.legal-card .arrow{ color:var(--muted-2); float:right; }

/* ---------- 16. Devlog (adapted legacy pages) ---------- */
.legal{ width:min(850px,calc(100% - 48px)); margin:0 auto; padding:85px 0; }
.legal .label{ font-size:.72rem; font-weight:800; letter-spacing:3px; color: var(--nr); }
.legal h1{ font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.03; margin:14px 0 10px; letter-spacing:-.03em; }
.legal p, .legal li{ color: var(--muted); }
.legal h2{ font-size:1.3rem; margin-top:38px; padding-top:22px; border-top:1px solid var(--line); }
.legal a{ color: var(--nr); }
.devlog-list{ display:flex; flex-direction:column; gap:4px; margin-top:28px; }
.devlog-entry{ display:block; padding:22px 0; border-top:1px solid var(--line); }
.devlog-entry:first-child{ border-top:none; }
.devlog-date{ font-size:.72rem; letter-spacing:2px; color:var(--nr); font-weight:800; }
.devlog-entry h3{ margin:8px 0 6px; font-size:1.3rem; color:var(--ink); }
.devlog-entry p{ margin:0; color:var(--muted); font-size:.94rem; }
.devlog-tag{ display:inline-block; margin-top:10px; padding:3px 10px; border:1px solid rgba(var(--nr-rgb),.3); border-radius:999px; font-size:.68rem; letter-spacing:1px; color:var(--nr); font-weight:700; }
.devlog-post h1{ margin-bottom:8px; }
.devlog-post .devlog-date{ display:block; margin-bottom:34px; }
.devlog-post pre{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:16px 18px; overflow-x:auto; font-size:.85rem; color:#c9d4f0; }
.devlog-post code{ font-family: var(--font-mono); }
.devlog-back{ display:inline-block; margin-top:50px; color:var(--nr); font-weight:800; font-size:.85rem; }

/* ---------- 17. 404 ---------- */
.error-page{ min-height:60vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.error-page .code{ font-family:var(--font-display); font-size:clamp(3rem,10vw,6rem); font-weight:700; color:var(--nr); line-height:1; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 980px){
  .games-grid{ grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
  .craft{ grid-template-columns:1fr; gap:36px; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .feature-grid{ grid-template-columns:1fr 1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .legal-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .doc-layout{ grid-template-columns:1fr; }
  .toc{ position:static; margin-bottom:36px; }
}
@media (max-width: 760px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:6px 24px 18px;
    background:rgba(6,7,13,.97); border-bottom:1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:14px 0; border-top:1px solid var(--line); }
  .nav-links a:first-child{ border-top:none; }
  .nav-toggle{ display:inline-flex; }
  .section{ padding:52px 0; }
  .feature-grid{ grid-template-columns:1fr; }
  .legal-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-about{ grid-column: 1 / -1; }
  .contact-strip{ flex-direction:column; align-items:flex-start; }
  .stat-row{ gap:14px 0; }
  .stat{ width:50%; margin-right:0; padding-right:14px; border-right:none; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .store-badge img{ width:170px; height:48px; }
  .stat{ width:100%; }
}