/* =========================================================================
   The Sector — download site
   Luna Labs design system v2 (brand_tokens 2.0.0). This stylesheet is the
   CSS twin of that token document; where the two disagree, the token file
   wins. Ported from the lunalab.studio production styles so the two sites
   read as one practice.
   ========================================================================= */

/* ── Metric-tuned fallbacks ───────────────────────────────────────────────
   The brand tier is served from the Adobe Fonts kit (gxm8dqn), which only
   renders on authorised domains. Until thesector.lunalab.studio is added to
   the kit these fallbacks carry the page — metric-matched so the layout does
   not shift when the kit arrives, and so an unauthorised domain degrades to
   something considered rather than to Times New Roman.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Ballinger Fallback';
  src: local('Segoe UI Light'), local('SegoeUI-Light'), local('Helvetica Neue Thin'),
       local('HelveticaNeue-Thin'), local('Inter Light'), local('Arial');
  font-weight: 200 300;
  size-adjust: 101%;
  ascent-override: 89%;
  descent-override: 21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Degular Mono Fallback';
  src: local('Cascadia Mono'), local('Consolas'), local('SF Mono'), local('SFMono-Regular'),
       local('Menlo'), local('DejaVu Sans Mono');
  size-adjust: 94%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Acumin Fallback';
  src: local('Segoe UI'), local('SegoeUI'), local('Helvetica Neue'), local('HelveticaNeue'),
       local('Arial'), local('Liberation Sans');
  size-adjust: 99%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* =========================================================================
   Tokens
   ========================================================================= */

:root {
  /* ── Void — dominant surface, ~65% of the page ─────────────────────────── */
  --void-900: #070604;
  --void-800: #0b0a07;
  --void-700: #14120c;

  /* ── Gold — primary accent, ~22%. v3 ramp: chroma held as it darkens, so
     even the lowest step still reads as metal rather than as brown. ────── */
  --gold-100: #fff8dc;
  --gold-200: #ffeaa0;
  --gold-300: #fbda5e;
  --gold-400: #f5c518;
  --gold-500: #dcae10;
  --gold-600: #bb920c;
  --gold-700: #8d6d08;
  --gold: var(--gold-400);

  /* ── Moon silver — secondary accent, ~8%. Frames; never encodes data. ─── */
  --silver-100: #e8ebf0;
  --silver-200: #d8dde5;
  --silver-300: #c7ccd6;
  --silver-400: #aeb6c2;
  --silver-500: #9aa3b2;
  --silver-600: #7e8798;
  --silver-700: #6e7789;
  --silver: var(--silver-300);

  /* ── Ink — warm white, ~5% ─────────────────────────────────────────────── */
  --ink-hi: #f4f0e6;
  --ink-body: #cfc9bb;
  --ink-muted: #8d8468;
  --ink-faint: #6e6753;

  /* ── Status — reserved, never re-coloured ──────────────────────────────── */
  --ok: #9fce9f;
  --warn: #e0c88a;
  --stop: #e08a8a;

  /* ── Gradients ─────────────────────────────────────────────────────────── */
  --grad-gold: linear-gradient(100deg, #fffaea 3%, #ffe793 30%, #f5c518 60%, #dcae10 92%);
  --grad-silver: linear-gradient(100deg, #e8ebf0 5%, #c7ccd6 50%, #9aa3b2 95%);
  --grad-gold-steep: linear-gradient(110deg, #fffbee 6%, #f5c518 50%, #c99c0c 96%);

  /* ── Glass — two layers each: the highlight sheen over a dark base. A
     sheen alone leaves panels effectively clear, and a bright object behind
     them destroys the contrast of anything on top. ─────────────────────── */
  --glass-bg: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.016) 55%,
      rgba(245, 197, 24, 0.075)
    ),
    linear-gradient(135deg, rgba(16, 14, 10, 0.76), rgba(9, 8, 6, 0.7) 55%, rgba(42, 33, 8, 0.74));
  --glass-bg-sheet: linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.012) 48%,
      rgba(245, 197, 24, 0.065)
    ),
    linear-gradient(150deg, rgba(14, 12, 9, 0.72), rgba(8, 7, 5, 0.66) 48%, rgba(38, 30, 7, 0.7));
  --glass-bg-deep: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.025) 52%,
      rgba(245, 197, 24, 0.11)
    ),
    linear-gradient(135deg, rgba(22, 19, 12, 0.84), rgba(11, 10, 7, 0.8) 52%, rgba(54, 42, 9, 0.82));
  --glass-border: rgba(245, 197, 24, 0.42);
  --glass-border-soft: rgba(245, 197, 24, 0.24);
  --glass-border-silver: rgba(199, 204, 214, 0.35);
  --glass-blur: 18px;
  --glass-blur-sheet: 26px;
  --glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  --glass-shadow-lg: 0 40px 110px rgba(0, 0, 0, 0.62);

  /* ── Hairlines ─────────────────────────────────────────────────────────── */
  --rule-gold: rgba(245, 197, 24, 0.26);
  --rule-gold-strong: rgba(245, 197, 24, 0.5);
  --rule-silver: rgba(199, 204, 214, 0.12);
  --rule-faint: rgba(244, 240, 230, 0.07);

  /* ── Geometry ──────────────────────────────────────────────────────────── */
  --radius-card: 22px;
  --radius-sm: 12px;
  --radius-chip: 999px;
  --grid-unit: 96px;

  /* ── Type families ─────────────────────────────────────────────────────── */
  --font-display: 'ballinger', 'Ballinger Fallback', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-num: 'ballinger', 'Ballinger Fallback', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'degular-mono', 'Degular Mono Fallback', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-body: 'acumin-pro', 'Acumin Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Large display type takes 200; anything under ~1.4rem takes 300, or the
     hairline disappears at small sizes. */
  --fw-display: 200;
  --fw-display-sm: 300;

  /* ── Fluid type scale ──────────────────────────────────────────────────────
     The hero ceiling is lower than lunalab.studio's 9.5rem: this title runs to
     two long lines rather than two short ones, and at 9.5rem the call to action
     fell below the fold on a 900px-tall viewport.
     ------------------------------------------------------------------------ */
  --t-hero: clamp(3rem, 1rem + 7.4vw, 7.5rem);
  --t-page: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
  --t-section: clamp(2rem, 1.15rem + 3.3vw, 4rem);
  --t-statement: clamp(1.45rem, 0.95rem + 1.9vw, 2.6rem);
  --t-card: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem);
  --t-lede: clamp(1.05rem, 0.95rem + 0.45vw, 1.32rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-small: 0.875rem;
  --t-mono: 0.75rem;
  --t-mono-sm: 0.6875rem;

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --shell-max: 1440px;
  --shell-wide: 1760px;
  --shell-pad: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --header-h: 76px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.22s;
  --dur: 0.42s;
  --dur-slow: 0.9s;

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --z-ambient: 0;
  --z-scene: 1;
  --z-content: 2;
  --z-header: 60;
  --z-mobile-nav: 70;

  color-scheme: dark;
}

/* Coarse pointers get cheaper effects — an 18px backdrop blur across several
   stacked panels is the single most expensive thing on a phone GPU. */
@media (hover: none) {
  :root {
    --glass-blur: 10px;
  }
}

/* =========================================================================
   Base
   ========================================================================= */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored docs headings must clear the fixed header. */
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  min-height: 100vh;
  background: var(--void-900);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: rgba(245, 197, 24, 0.28);
  color: var(--ink-hi);
}

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

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--void-900);
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(245, 197, 24, 0.22);
    border-radius: 999px;
    border: 3px solid var(--void-900);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 197, 24, 0.4);
  }
}

.skip-link {
  position: fixed;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--gold-400);
  color: var(--void-900);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 8px;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* =========================================================================
   Ambient field — void + radial golds + one silver glow + 96px grid
   ========================================================================= */

.ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  background: var(--void-800);
}

.ambient__grid {
  position: absolute;
  inset: -10%;
  background-image: linear-gradient(rgba(245, 197, 24, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 197, 24, 0.045) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 34%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 34%, #000 0%, transparent 78%);
  opacity: 0.9;
}

.ambient__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.ambient__glow--gold-a {
  width: 62vw;
  height: 62vw;
  right: -18%;
  top: -8%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.13), transparent 68%);
}
.ambient__glow--gold-b {
  width: 55vw;
  height: 55vw;
  left: -6%;
  bottom: -12%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.1), transparent 68%);
}
.ambient__glow--silver {
  width: 34vw;
  height: 34vw;
  right: -6%;
  bottom: -6%;
  background: radial-gradient(circle, rgba(199, 204, 214, 0.07), transparent 70%);
}

/* Once the canvas scene is live it renders its own grid and depth; the flat
   version stays only as the no-canvas fallback. */
.scene-live .ambient__grid {
  opacity: 0.3;
}

.site-header,
main,
.site-footer,
.mobile-nav {
  position: relative;
  z-index: var(--z-content);
}

/* The scene plane is fixed for the whole document rather than parented to the
   hero, so the mark keeps turning the entire way down the page. Opacity is
   written by the render loop from scroll progress. */
.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-scene);
  pointer-events: none;
  opacity: 0;
}

/* =========================================================================
   Layout primitives
   ========================================================================= */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.shell--wide {
  max-width: var(--shell-wide);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section + .section,
.page-head + .section {
  padding-top: 0;
}

/* =========================================================================
   Typography primitives
   ========================================================================= */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-400);
  line-height: 1;
}

.eyebrow__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.14);
  animation: pulse 3.2s var(--ease-in-out) infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.14);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 197, 24, 0.03);
  }
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.u-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.02em;
  color: var(--ink-hi);
}

.u-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.u-silver {
  background: var(--grad-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.u-muted {
  color: var(--ink-muted);
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-section);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-hi);
  text-wrap: balance;
}

.section-sub {
  max-width: 54ch;
  margin-top: var(--s-5);
  font-size: var(--t-lede);
  color: var(--ink-muted);
  line-height: 1.58;
}

.section-head {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}
.section-head .eyebrow {
  margin-bottom: var(--s-5);
}

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.statement {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-statement);
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--ink-hi);
  text-wrap: pretty;
}

.prose {
  max-width: 68ch;
  color: var(--ink-body);
  font-size: var(--t-body);
  line-height: 1.72;
}
.prose em {
  color: var(--gold-200);
  font-style: italic;
}
.prose strong {
  color: var(--ink-hi);
  font-weight: 600;
}
.prose p + p {
  margin-top: var(--s-4);
}

.inline-link {
  color: var(--gold-300);
  border-bottom: 1px solid var(--rule-gold-strong);
  transition: color var(--dur-fast) var(--ease-out);
}
.inline-link:hover {
  color: var(--gold-100);
}

/* =========================================================================
   Reveal — initial state only; the IntersectionObserver adds .is-revealed.
   Hidden behind .js so a no-JS reader sees everything.
   ========================================================================= */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Masked line rise, for the hero. The mask is markup rather than JS-wrapped,
   so it survives with scripting off.

   The padding is what stops the mask cropping the type. A hairline geometric
   face carries roughly 1.25em between the top of its ascenders and the bottom
   of its descenders, so at a line-height under 1 the glyphs overflow their own
   line box and an `overflow: hidden` mask slices them. The padding buys that
   overflow back; the negative margin returns the visual rhythm. */
.line-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.2em;
  margin-block: -0.14em;
}
.line-inner {
  display: block;
}
.js .line-inner {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--line-delay, 0s);
}
.js .is-revealed .line-inner {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal],
  .js .line-inner {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   Surfaces
   ========================================================================= */

.panel {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}

.panel--sheet {
  background: var(--glass-bg-sheet);
  border-color: var(--glass-border-soft);
  border-radius: clamp(22px, 1.6vw, 32px);
  box-shadow: var(--glass-shadow-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 4.5rem);
}

.panel--deep {
  background: var(--glass-bg-deep);
  box-shadow: var(--glass-shadow-lg);
}

.panel--silver {
  border-color: var(--glass-border-silver);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .panel {
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  .panel--sheet {
    -webkit-backdrop-filter: blur(var(--glass-blur-sheet));
    backdrop-filter: blur(var(--glass-blur-sheet));
  }
}

/* The 1px top highlight: transparent → warm gold → transparent, 8%–92%. */
.panel::before {
  content: '';
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, 0.75), transparent);
  pointer-events: none;
}
.panel--silver::before {
  background: linear-gradient(90deg, transparent, rgba(232, 235, 240, 0.55), transparent);
}

/* =========================================================================
   Header & navigation
   ========================================================================= */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 6, 4, 0.86), rgba(7, 6, 4, 0));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.site-header.is-stuck::after {
  opacity: 1;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(7, 6, 4, 0.72);
}

.site-header__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 0 var(--shell-pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.site-header__rule {
  max-width: var(--shell-max);
  margin-inline: auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-gold-strong) 20%, var(--rule-silver) 70%, transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.site-header.is-stuck .site-header__rule {
  opacity: 1;
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.brandmark__word {
  font-family: var(--font-display);
  font-weight: var(--fw-display-sm);
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--ink-hi);
  line-height: 1;
  white-space: nowrap;
}
.brandmark__word em {
  font-style: normal;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 0.28em;
}

.brandmark .mark {
  transition: transform 0.7s var(--ease-out);
}
.brandmark:hover .mark {
  transform: rotate(-24deg);
}

.mark {
  width: 34px;
  height: 34px;
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 1.8vw, 2.5rem);
}

.nav-link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-block: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--ink-hi);
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-link.is-active {
  color: var(--gold-200);
}

.nav-link__ext {
  display: inline-block;
  margin-left: 0.45em;
  opacity: 0.5;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-right: -10px;
}

.nav-toggle__bars {
  display: block;
  width: 22px;
}
.nav-toggle__bars i {
  display: block;
  height: 1.5px;
  background: var(--ink-hi);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav-toggle__bars i + i {
  margin-top: 6px;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  padding: calc(var(--header-h) + 3rem) var(--shell-pad) 3rem;
  background: rgba(7, 6, 4, 0.96);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.mobile-nav[hidden] {
  display: flex;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule-gold);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2rem, 1.2rem + 4.5vw, 3.2rem);
  letter-spacing: -0.025em;
  color: var(--ink-hi);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 0.06s + 0.1s);
}
.mobile-nav.is-open .mobile-nav__link {
  opacity: 1;
  transform: none;
}

.mobile-nav__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.2em;
  color: var(--gold-400);
}

.mobile-nav__foot {
  color: var(--ink-faint);
  letter-spacing: 0.3em;
}

/* =========================================================================
   Controls
   ========================================================================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
  overflow: hidden;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover svg {
  transform: translateY(2px);
}

.btn--gold {
  background: var(--grad-gold);
  color: #120e04;
  font-weight: 600;
  box-shadow: 0 10px 34px rgba(245, 197, 24, 0.2);
}
.btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45), transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease-out);
}
.btn--gold:hover::after {
  transform: translateX(120%);
}
.btn--gold:hover {
  box-shadow: 0 14px 44px rgba(245, 197, 24, 0.32);
}

.btn--ghost {
  border: 1px solid var(--rule-gold-strong);
  color: var(--ink-body);
}
.btn--ghost:hover {
  border-color: var(--gold-400);
  color: var(--ink-hi);
  background: rgba(245, 197, 24, 0.07);
}
.btn--ghost:hover svg {
  transform: translateX(4px);
}

/* Pending state. The build does not exist yet, so the control announces that
   rather than linking somewhere that 404s — a dead download link costs more
   trust than an honest "not yet". */
.btn--pending {
  border: 1px dashed var(--rule-gold-strong);
  color: var(--ink-muted);
  cursor: not-allowed;
  background: rgba(245, 197, 24, 0.04);
}
.btn--pending:hover svg {
  transform: none;
}
.btn--block {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule-gold-strong);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover {
  color: var(--gold-100);
  border-color: var(--gold-400);
}
.link-arrow:hover svg {
  transform: translateX(5px);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.chip--pending {
  border-style: dashed;
  color: var(--gold-300);
  border-color: var(--rule-gold-strong);
}

.chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-400);
  flex: none;
}

.code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  color: #d8cfae;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(245, 197, 24, 0.2);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}

/* =========================================================================
   Hero — download page
   ========================================================================= */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  /* Tuned so the primary control still clears a 900px-tall viewport: the
     title, the rule, the lede and the buttons together need the room. */
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);
}

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 26% 44%, rgba(7, 6, 4, 0.72), transparent 72%);
}

.hero__inner {
  position: relative;
}

.hero__eyebrow {
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-hero);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink-hi);
  max-width: 16ch;
}

.hero__line--gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The rule that separates the title from everything under it, as on
   lunalab.studio. It runs the full measure and fades out to the right. */
.hero__rule {
  height: 1px;
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  background: linear-gradient(90deg, var(--rule-gold-strong), var(--rule-gold) 55%, transparent);
}

.hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.hero__lede {
  font-size: var(--t-lede);
  color: var(--ink-body);
  line-height: 1.62;
  max-width: 54ch;
}
.hero__lede strong {
  color: var(--ink-hi);
  font-weight: 600;
}

.hero__rail {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: var(--ink-muted);
  padding-top: 0.4rem;
}
.hero__rail li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-gold);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__rail li span {
  color: var(--ink-faint);
}
.hero__rail li b {
  font-weight: 400;
  color: var(--gold-300);
  text-align: right;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

/* =========================================================================
   Download cards
   ========================================================================= */

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}

.dl-card {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

/* A 3px lift on the visitor's own platform — enough to read as "this one",
   small enough to stay inside the restrained-motion rule. */
.dl-card.is-detected {
  border-color: var(--rule-gold-strong);
  transform: translateY(-3px);
}

.dl-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.dl-card__os {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.dl-card__glyph {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--gold-300);
}

.dl-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-sm);
  font-size: var(--t-card);
  letter-spacing: -0.02em;
  color: var(--ink-hi);
  line-height: 1.1;
}

.dl-card__sub {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dl-card__spec {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
}

.dl-card__spec div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-top: 1px solid var(--rule-faint);
  font-size: var(--t-small);
}
.dl-card__spec dt {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dl-card__spec dd {
  color: var(--ink-body);
  text-align: right;
}

/* Written by JS when a pending control is activated, so the click is not
   silently swallowed. */
.dl-card__note {
  font-size: var(--t-small);
  color: var(--ink-faint);
  line-height: 1.5;
  min-height: 1.5em;
}
.dl-card__note.is-live {
  color: var(--gold-300);
}

.dl-badge {
  align-self: flex-start;
}

/* =========================================================================
   Steps — the eight-step process
   ========================================================================= */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-faint);
  border: 1px solid var(--rule-faint);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.step {
  position: relative;
  background: rgba(11, 10, 7, 0.62);
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 190px;
  transition: background-color var(--dur) var(--ease-out);
}
.step:hover {
  background: rgba(20, 18, 12, 0.8);
}

.step__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.26em;
  color: var(--gold-500);
}

.step--pending .step__n {
  color: var(--ink-faint);
}

.step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-sm);
  font-size: 1.22rem;
  letter-spacing: -0.015em;
  color: var(--ink-hi);
  line-height: 1.2;
}

.step--pending .step__title {
  color: var(--ink-muted);
}

.step__body {
  font-size: var(--t-small);
  color: var(--ink-muted);
  line-height: 1.55;
}

.step__flag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.step--pending .step__flag {
  color: var(--gold-700);
}

/* =========================================================================
   Facts — measured figures with provenance
   ========================================================================= */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}

.fact {
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
}

.fact__figure {
  font-family: var(--font-num);
  font-weight: var(--fw-display);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fact__label {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-body);
}

/* Provenance line. Every figure on this site carries one; a number without a
   source is not evidence. */
.fact__source {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-faint);
  font-size: var(--t-small);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* =========================================================================
   Closing panel
   ========================================================================= */

.closing {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}

.closing__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-section);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink-hi);
  max-width: 18ch;
}

.closing__body {
  max-width: 56ch;
  color: var(--ink-muted);
  font-size: var(--t-lede);
}

/* =========================================================================
   Docs
   ========================================================================= */

.page-head {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 7rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.page-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-page);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-hi);
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  max-width: 14ch;
}

.page-head__lede {
  margin-top: var(--s-6);
  max-width: 62ch;
  font-size: var(--t-lede);
  color: var(--ink-muted);
  line-height: 1.6;
}

.docs {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
  padding-bottom: var(--section-y);
}

.docs-toc {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  max-height: calc(100vh - var(--header-h) - 4rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.docs-toc__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-400);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule-gold);
}

.docs-toc ol {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  counter-reset: toc;
}

.docs-toc a {
  display: flex;
  gap: 0.7rem;
  padding: 0.45rem 0 0.45rem 0.7rem;
  border-left: 1px solid var(--rule-faint);
  font-size: var(--t-small);
  color: var(--ink-muted);
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.docs-toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  flex: none;
  padding-top: 0.15em;
}

.docs-toc a:hover {
  color: var(--ink-hi);
  border-color: var(--rule-gold);
}

.docs-toc a.is-current {
  color: var(--gold-200);
  border-color: var(--gold-400);
}
.docs-toc a.is-current::before {
  color: var(--gold-500);
}

.docs-body {
  min-width: 0;
  max-width: 78ch;
}

.doc-section + .doc-section {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
}

.doc-section__head {
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule-gold);
}

.doc-section h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink-hi);
}

.doc-section h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-sm);
  font-size: 1.28rem;
  letter-spacing: -0.015em;
  color: var(--ink-hi);
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
}

.doc-section h3:first-child {
  margin-top: 0;
}

.doc-section p {
  color: var(--ink-body);
  line-height: 1.72;
  max-width: 68ch;
}
.doc-section p + p {
  margin-top: var(--s-4);
}
.doc-section strong {
  color: var(--ink-hi);
  font-weight: 600;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: var(--s-5);
  max-width: 68ch;
}

.doc-list li {
  display: flex;
  gap: 0.9rem;
  color: var(--ink-body);
  line-height: 1.62;
}

.doc-list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
}

.doc-list--num {
  counter-reset: dl;
}
.doc-list--num li::before {
  counter-increment: dl;
  content: counter(dl, decimal-leading-zero);
  width: auto;
  height: auto;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.14em;
  color: var(--gold-500);
  padding-top: 0.3em;
  min-width: 1.9em;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-wrap {
  margin-top: var(--s-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule-faint);
  border-radius: var(--radius-sm);
}

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  min-width: 520px;
}

.dtable th,
.dtable td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--rule-faint);
  vertical-align: top;
}

.dtable thead th {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.dtable tbody tr:last-child td {
  border-bottom: 0;
}

.dtable tbody tr:hover td {
  background: rgba(245, 197, 24, 0.03);
}

.dtable td {
  color: var(--ink-body);
}

.dtable .num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gold-200);
  white-space: nowrap;
  text-align: right;
}

.dtable .u-muted {
  color: var(--ink-faint);
}

/* ── Callouts ────────────────────────────────────────────────────────────── */

.callout {
  margin-top: var(--s-6);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-gold);
  border-left-width: 2px;
  border-left-color: var(--gold-500);
  background: rgba(245, 197, 24, 0.045);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-body);
}

.callout__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.5rem;
}

/* Placeholder blocks are marked in the design, not only in the copy, so a
   reader skimming the page cannot mistake one for settled fact. */
.callout--placeholder {
  border-style: dashed;
  border-left-color: var(--silver-500);
  border-color: var(--glass-border-silver);
  background: rgba(199, 204, 214, 0.04);
}
.callout--placeholder .callout__label {
  color: var(--silver-300);
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  margin-top: var(--section-y);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2.5rem;
  border-top: 1px solid var(--rule-gold);
  background: linear-gradient(180deg, rgba(11, 10, 7, 0), rgba(7, 6, 4, 0.85));
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
}

.site-footer__brand .mark {
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-5);
}

.site-footer__tag {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink-hi);
}
.site-footer__tag span {
  display: block;
}

.site-footer__blurb {
  margin-top: var(--s-5);
  max-width: 42ch;
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.65;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.site-footer__col .eyebrow {
  font-size: var(--t-mono-sm);
  letter-spacing: 0.26em;
  margin-bottom: var(--s-4);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer__col a,
.site-footer__col span {
  font-size: var(--t-small);
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__col a:hover {
  color: var(--gold-200);
}

.site-footer__rule {
  height: 1px;
  margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 1.5rem;
  background: linear-gradient(90deg, var(--rule-gold-strong), var(--rule-silver) 55%, transparent);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1080px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .docs {
    grid-template-columns: 1fr;
  }
  .docs-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .docs-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.15rem 1rem;
  }
}

@media (max-width: 940px) {
  .hero__meta {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }
  .nav-toggle {
    display: grid;
  }
  .dl-grid {
    grid-template-columns: 1fr;
  }
  .site-footer__top {
    grid-template-columns: 1fr;
  }
  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-5);
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .site-footer__cols {
    grid-template-columns: 1fr;
  }
  .site-footer__base {
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* =========================================================================
   Print — the docs page is the one people will hand around on paper.
   ========================================================================= */

@media print {
  .ambient,
  .scene,
  .site-header,
  .mobile-nav,
  .docs-toc,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff;
    color: #171410;
  }
  .docs {
    grid-template-columns: 1fr;
  }
  .doc-section h2,
  .doc-section h3,
  .page-head__title {
    color: #171410;
  }
  .doc-section p,
  .doc-list li,
  .dtable td {
    color: #3d3a33;
  }
  a {
    color: #6b5a22;
  }
}