/* vaxenfly: one stylesheet for every page. Part one is the measured roundupdust
   grammar (tokens and one class per component, from skills/roundupdust/tokens.css,
   fonts re-pointed at /fonts/ and the brand metrics set for "vaxenfly"). Part two,
   after the "site" marker, is everything this site adds: hero media, the opening
   animation, reveals, the install strip, page heads, figures, terminals, tables.
   Fonts are self-hosted; nothing here loads from another host, and no page carries
   an inline style or script (CSP style-src and script-src are both self). */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist Pixel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-pixel-latin-400-normal.woff2) format('woff2');
}

:root {
  /* grounds */
  --rd-bg-page: #1f1811;          /* html, body, glyph layer, secondary button fill */
  --rd-bg-band: #121212;          /* every section band, rings */
  --rd-bg-card: #000000;          /* step cards, nav bar */
  --rd-hero-composite: #151412;   /* #1f1811 at .25 over #121212, measured majority pixel */
  --rd-glyph-dark: #0e0e0e;       /* dark glyph cells, measured */
  --rd-surface: #ffffff;          /* feature cards, chips, panel, footer, primary button */
  --rd-pixel-light: #ededed;      /* stair blocks, checker band, measured */

  /* ink */
  --rd-ink: #121212;
  --rd-ink-strong: #000000;       /* footer link anchors */
  --rd-ink-75: rgba(0, 0, 0, 0.75); /* CTA sub, labels, fine print; renders #404040 */
  --rd-on-dark: #ffffff;
  --rd-on-dark-soft: #fafafa;     /* secondary button label */
  --rd-accent: #ff5e1f;           /* nav hover label only; never at rest. The orange of the fly's eyes in the brand image */

  /* lines, rims, glows, shadows */
  --rd-hair: rgba(255, 255, 255, 0.30);   /* nav dividers, renders #4d4d4d on #000 */
  --rd-dash: rgba(255, 255, 255, 0.50);   /* step connector, renders #898989 on #121212 */
  --rd-rim: 1px solid #ffffff;            /* dark card and ring rim, at the layer opacity */
  --rd-glow: inset 0 0 50px rgba(255, 255, 255, 0.25);
  --rd-shadow-btn:
    rgba(0, 0, 0, 0.24) 0 0.78px 1.41px -0.43px,
    rgba(0, 0, 0, 0.24) 0 1.92px 3.46px -0.86px,
    rgba(0, 0, 0, 0.23) 0 3.64px 6.55px -1.29px,
    rgba(0, 0, 0, 0.23) 0 6.35px 11.43px -1.71px,
    rgba(0, 0, 0, 0.22) 0 11.05px 19.89px -2.14px,
    rgba(0, 0, 0, 0.20) 0 20.24px 36.44px -2.57px,
    rgba(0, 0, 0, 0.16) 0 40px 72px -3px;
  --rd-shadow-btn-off:
    rgba(0, 0, 0, 0) 0 0.78px 1.41px -0.43px,
    rgba(0, 0, 0, 0) 0 1.92px 3.46px -0.86px,
    rgba(0, 0, 0, 0) 0 3.64px 6.55px -1.29px,
    rgba(0, 0, 0, 0) 0 6.35px 11.43px -1.71px,
    rgba(0, 0, 0, 0) 0 11.05px 19.89px -2.14px,
    rgba(0, 0, 0, 0) 0 20.24px 36.44px -2.57px,
    rgba(0, 0, 0, 0) 0 40px 72px -3px;
  --rd-wordmark-ghost: 0.27;      /* renders #bababa on white */
  --rd-wordmark-crop: 0.754em;    /* the giant mark shows 86 percent of its tallest glyph, the rest is cut by the page end */
  --rd-glyph-layer: 0.25;
  --rd-ring-a1: 0.26;
  --rd-ring-a2: 0.54;
  --rd-ring-a3: 0.75;

  /* type */
  --rd-font-display: 'Geist Pixel', 'Courier New', monospace;
  --rd-font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rd-fs-display: 64px;  --rd-lh-display: 76.8px;
  --rd-fs-h2: 50px;       --rd-lh-h2: 60px;
  --rd-fs-h3: 24px;       --rd-lh-h3: 28.8px;
  --rd-fs-step: 20px;     --rd-lh-step: 24px;
  --rd-fs-title: 18px;    --rd-lh-title: 21.6px;
  --rd-fs-link: 18px;     --rd-lh-link: 21.6px;
  --rd-fs-body: 16px;     --rd-lh-body: 19.2px;
  --rd-fs-nav: 15px;      --rd-lh-nav: 22.5px;
  --rd-fs-small: 14px;    --rd-lh-small: 16.8px;

  /* brand word metrics (Geist Pixel advance widths, unitsPerEm 1000). Set per site:
     "Placeholder" 5.662 / 214px, "vaxenfly" 3.876 / 314px, "brandname" 5.168 / 235px.
     giant-max = 1216 / giant-em so the giant mark is exactly the measured 1216 wide at 1440. */
  --rd-giant-em: 3.876;            /* "vaxenfly" advance width in em, Geist Pixel */
  --rd-giant-max: 314px;           /* 1216 / 3.876 */

  /* layout */
  --rd-max: 1300px;               /* CTA panel 1303, largest content div */
  --rd-measure-wide: 1200px;      /* h1, h2 and sub blocks are 1201 wide at x 120 */
  --rd-measure-body: 660px;       /* hero lead 661 */
  --rd-measure-panel: 549px;      /* CTA sub and fine print */
  --rd-gutter: 70px;              /* (1440 - 1300) / 2; 40 at 810, 16 at 390 */
  --rd-nav-h: 60px;
  --rd-nav-max: 900px;
  --rd-nav-cell: 156px;
  --rd-hero-h: 900px;
  --rd-section-top: 54px;
  --rd-section-bottom: 54px;      /* ours: generic tail; the measured sections override it */
  --rd-gap-h: 15px;               /* h2 to sub */
  --rd-gap-stack: 25px;           /* h1 to lead, lead to buttons, tokenomics stack */
  --rd-gap-group: 45px;           /* CTA groups */
  --rd-gap-steps: 122px;          /* sub to step cards */
  --rd-gap-cards: 100px;          /* step cards */
  --rd-gap-cols: 94px;            /* two columns */
  --rd-gap-lead-grid: 50px;       /* two-column lead to feature grid */
  --rd-gap-grid: 27px;            /* feature grid */
  --rd-gap-btn: 24px;             /* measured 23, ours 24 */
  --rd-gap-rings: 60px;           /* head block to inner ring */
  --rd-panel-pad: 54px;
  --rd-panel-pad-b: 31px;
  --rd-panel-step: 145px;         /* CTA step box; the third grows to 163 for a longer label */
  --rd-footer-top: 83px;
  --rd-footer-col: 144px;
  --rd-footer-gap: 100px;
  --rd-footer-legal: 120px;       /* columns to copyright */
  --rd-footer-giant: 31px;        /* copyright to giant ink */
  --rd-link-pitch: 8px;           /* 21.6 line + 8 = 29.5 pitch */

  /* components */
  --rd-btn-h: 56px;
  --rd-btn-px: 32px;
  --rd-cell-x: 15.6px;            /* dissolve grid pitch, approx */
  --rd-cell-y: 14px;
  --rd-step: 239px;
  --rd-step-icon: 100px;
  --rd-step-icon-top: 52px;
  --rd-step-label-top: 177px;
  --rd-feature-w: 279px;
  --rd-feature-h: 105px;
  --rd-feature-icon: 45px;
  --rd-chip-h: 45px;
  --rd-chip-px: 20px;
  --rd-chip-min: 109px;
  --rd-ring-1: 1443px;            /* outer */
  --rd-ring-2: 973px;             /* middle */
  --rd-ring-3: 455px;             /* inner; the stage the other two hang on */
  --rd-medallion: 200px;
  --rd-cell-lg: 53px;             /* bottom stair cells, measured 52 to 53.5 */
  --rd-cell-md: 41px;             /* top left stair cells */
  --rd-cell-sm: 13.33px;          /* checker motif cells, 40px / 3 */
  --rd-checker-h: 106px;
  --rd-checker-motif: 40px;
  --rd-video: 592px;
  --rd-cta-icon: 63px;
  --rd-glyph-cell-x: 9.6px;       /* approx, from the crop */
  --rd-glyph-cell-y: 12.5px;

  /* radius */
  --rd-r-0: 0;
  --rd-r-card: 25px;
  --rd-r-ring: 50%;

  /* motion (measured durations, ours easing) */
  --rd-t-dissolve: 600ms;
  --rd-t-fill: 200ms;
  --rd-ease: ease-out;
}

/* ===== base ===== */
html { background: var(--rd-bg-page); }
body {
  margin: 0;
  background: var(--rd-bg-page);
  color: var(--rd-on-dark);
  font: 400 var(--rd-fs-body) / var(--rd-lh-body) var(--rd-font-body);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--rd-on-dark); outline-offset: 3px; }
.on-light :focus-visible, .rd-panel :focus-visible, .rd-footer :focus-visible, .rd-feature :focus-visible, .rd-section--light :focus-visible { outline-color: var(--rd-ink); }

/* ===== type roles (every measured style) ===== */
.rd-display { font: 400 var(--rd-fs-display) / var(--rd-lh-display) var(--rd-font-display); color: var(--rd-on-dark); margin: 0; letter-spacing: normal; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; max-width: 100%; }
.rd-h2 { font: 400 var(--rd-fs-h2) / var(--rd-lh-h2) var(--rd-font-display); color: var(--rd-on-dark); margin: 0; letter-spacing: normal; overflow-wrap: anywhere; max-width: 100%; }
.rd-h2.on-light { color: var(--rd-ink); }
.rd-h3 { font: 400 var(--rd-fs-h3) / var(--rd-lh-h3) var(--rd-font-display); color: var(--rd-ink); margin: 0; }
.rd-step-label { font: 400 var(--rd-fs-step) / var(--rd-lh-step) var(--rd-font-display); color: var(--rd-on-dark); margin: 0; }
.rd-title { font: 400 var(--rd-fs-title) / var(--rd-lh-title) var(--rd-font-display); color: var(--rd-ink); margin: 0; }
.rd-link { font: 400 var(--rd-fs-link) / var(--rd-lh-link) var(--rd-font-body); color: var(--rd-ink-strong); margin: 0; }
.rd-body { font: 400 var(--rd-fs-body) / var(--rd-lh-body) var(--rd-font-body); color: var(--rd-on-dark); margin: 0; max-width: var(--rd-measure-body); }
.rd-body-strong { font: 500 var(--rd-fs-body) / var(--rd-lh-body) var(--rd-font-body); color: var(--rd-ink-75); margin: 0; }
.rd-small { font: 400 var(--rd-fs-small) / var(--rd-lh-small) var(--rd-font-body); color: var(--rd-ink); margin: 0; }
.rd-small.on-light-75 { color: var(--rd-ink-75); }
.on-light { color: var(--rd-ink); }
.rd-nav-text { font: 400 var(--rd-fs-nav) / var(--rd-lh-nav) var(--rd-font-body); color: var(--rd-on-dark); margin: 0; }

/* ===== layout ===== */
.rd-wrap { max-width: calc(var(--rd-max) + 2 * var(--rd-gutter)); margin: 0 auto; padding: 0 var(--rd-gutter); }   /* content box is exactly --rd-max at 1440 */
.rd-measure { max-width: var(--rd-measure-wide); margin: 0 auto; }
.rd-section { position: relative; display: flow-root; background: var(--rd-bg-band); color: var(--rd-on-dark); padding: var(--rd-section-top) 0 var(--rd-section-bottom); overflow: clip; }   /* flow-root: child margins never escape the band */
.rd-section--light { background: var(--rd-surface); color: var(--rd-ink); }
.rd-section--steps { --rd-section-bottom: 270px; }              /* measured tail under the cards */
.rd-section--twocol { --rd-section-top: 77px; --rd-section-bottom: 0; }   /* the checker strip is the tail */
.rd-section--rings { --rd-section-bottom: 176px; }              /* the outer rings fill the tail and get cut */
.rd-section--cta { --rd-section-top: 73px; --rd-section-bottom: 71px; }   /* measured band above and below the panel */
.rd-heading { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--rd-gap-h); text-align: center; max-width: var(--rd-measure-wide); margin: 0 auto; }
.rd-heading--stack { gap: var(--rd-gap-stack); }
.rd-heading--start { align-items: flex-start; text-align: left; margin: 0; }
.rd-stack { display: flex; flex-direction: column; gap: var(--rd-gap-stack); }   /* ours: generic vertical rhythm for swatches */

/* ===== 2.1 nav ===== */
.rd-nav { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--rd-nav-h); background: var(--rd-bg-card); }
.rd-nav--inline { position: relative; inset: auto; }   /* ours: a non-fixed instance for docs and galleries */
.rd-nav__inner { max-width: var(--rd-nav-max); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.rd-nav__brand { display: inline-flex; align-items: center; gap: 10px; height: 44px; font: 400 22px / 1 var(--rd-font-display); color: var(--rd-on-dark); white-space: nowrap; }
.rd-nav__logo { display: block; width: 44px; height: 44px; border-radius: 8px; box-shadow: 0 0 0 1px var(--rd-hair); }
.rd-nav__word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the fly is the logo; the name stays for screen readers */
.rd-nav__row { display: flex; height: 100%; }
.rd-nav__item {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: var(--rd-nav-cell); height: var(--rd-nav-h); padding: 12px 24px;
  border-right: 1px solid var(--rd-hair);
  font: 400 var(--rd-fs-nav) / var(--rd-lh-nav) var(--rd-font-body); color: var(--rd-on-dark); white-space: nowrap;
  background: var(--rd-bg-card);
  transition: background var(--rd-t-fill) var(--rd-ease), color var(--rd-t-fill) var(--rd-ease);
}
.rd-nav__arrow { margin-left: auto; width: 16px; height: 16px; border: 1px solid currentColor; border-width: 1px 1px 0 0; transform: scale(0.6) rotate(45deg); opacity: 0; transition: opacity 150ms var(--rd-ease); }   /* hidden at rest, measured */
.rd-nav__item:hover .rd-nav__arrow, .rd-nav__item:focus-visible .rd-nav__arrow { opacity: 1; }
.rd-nav__item:hover, .rd-nav__item:focus-visible { background: var(--rd-bg-page); color: var(--rd-accent); outline: 0; }
.rd-nav__item:active { transition: none; background: var(--rd-bg-page); color: var(--rd-accent); }
.rd-nav__item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rd-on-dark); }
.rd-nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--rd-hair); border-radius: 0; background: var(--rd-bg-card); color: var(--rd-on-dark); font: 400 var(--rd-fs-nav) / 1 var(--rd-font-body); cursor: pointer; }
.rd-nav__toggle:hover { background: var(--rd-bg-page); color: var(--rd-accent); }
.rd-nav-spacer { height: var(--rd-nav-h); }

/* ===== 2.2 buttons: square, 56 tall, 7 layer shadow, pixel dissolve on hover ===== */
.rd-btn {
  --_rd-fill: var(--rd-surface); --_rd-text: var(--rd-ink);
  --_rd-inv: var(--rd-bg-page); --_rd-inv-text: var(--rd-on-dark-soft);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--rd-btn-h); padding: 0 var(--rd-btn-px);
  border: 0; border-radius: var(--rd-r-0); cursor: pointer;
  background: var(--_rd-fill); color: var(--_rd-text);
  font: 500 var(--rd-fs-body) / var(--rd-lh-body) var(--rd-font-body); text-decoration: none; white-space: nowrap;
  box-shadow: var(--rd-shadow-btn);
  transition: box-shadow var(--rd-t-dissolve) linear, color 0s linear calc(var(--rd-t-dissolve) / 2);
}
.rd-btn--primary { --_rd-fill: var(--rd-surface); --_rd-text: var(--rd-ink); --_rd-inv: var(--rd-bg-page); --_rd-inv-text: var(--rd-on-dark-soft); }
.rd-btn--secondary { --_rd-fill: var(--rd-bg-page); --_rd-text: var(--rd-on-dark-soft); --_rd-inv: var(--rd-surface); --_rd-inv-text: #050505; }
.rd-btn--dark { --_rd-fill: var(--rd-bg-band); --_rd-text: var(--rd-on-dark); --_rd-inv: var(--rd-surface); --_rd-inv-text: var(--rd-ink); }
.rd-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--_rd-inv); opacity: 0;
  -webkit-mask-image: repeating-conic-gradient(#000 0 25%, transparent 0 50%);
  mask-image: repeating-conic-gradient(#000 0 25%, transparent 0 50%);
  -webkit-mask-size: calc(var(--rd-cell-x) * 2) calc(var(--rd-cell-y) * 2);
  mask-size: calc(var(--rd-cell-x) * 2) calc(var(--rd-cell-y) * 2);
}
.rd-btn:hover, .rd-btn:focus-visible { box-shadow: var(--rd-shadow-btn-off); color: var(--_rd-inv-text); }
.rd-btn:hover::after, .rd-btn:focus-visible::after { animation: rd-dissolve var(--rd-t-dissolve) steps(1, end) forwards; }
.rd-btn:active::after { animation: none; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.rd-btn:active { color: var(--_rd-inv-text); transition: none; }
.rd-btn[aria-disabled="true"], .rd-btn:disabled { opacity: 0.5; box-shadow: none; pointer-events: none; }
.rd-btn__label { position: relative; z-index: 1; }
.rd-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rd-gap-btn); }
@keyframes rd-dissolve {
  0%   { opacity: 1; }
  50%  { opacity: 1; -webkit-mask-image: none; mask-image: none; }
  100% { opacity: 1; -webkit-mask-image: none; mask-image: none; }
}
/* app.js may add a real 9 x 8 cell grid (.rd-btn__cell, random order, 600 ms); this CSS is the fallback */
.rd-btn__cell { position: absolute; width: 9px; height: 8px; background: var(--_rd-inv); box-shadow: 0 0 0 1px var(--_rd-inv); opacity: 0; z-index: -1; }
.rd-btn__cell.is-on { opacity: 1; }

/* ===== 2.3 step card and 2.4 connector ===== */
.rd-steps { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rd-gap-cards); list-style: none; margin: 0; padding: 0; }
.rd-heading + .rd-steps { margin-top: var(--rd-gap-steps); }
.rd-step {
  position: relative; width: var(--rd-step); height: var(--rd-step); flex: 0 0 auto;
  background: var(--rd-bg-card); border-radius: var(--rd-r-card); border: var(--rd-rim);
  box-shadow: var(--rd-glow); text-align: center;
}
/* connector: each card bridges the gap to the next one, under the cards (z -1 inside the isolated row), 5 on 5 off */
.rd-step::before { content: ""; position: absolute; top: 50%; left: 100%; width: var(--rd-gap-cards); height: 1px; z-index: -1; background: repeating-linear-gradient(90deg, var(--rd-dash) 0 5px, transparent 5px 10px); }
.rd-step:nth-child(4n)::before, .rd-step:last-child::before { display: none; }
.rd-step__icon { position: absolute; left: 50%; top: var(--rd-step-icon-top); width: var(--rd-step-icon); height: var(--rd-step-icon); transform: translateX(-50%); image-rendering: pixelated; }
.rd-step .rd-step-label { position: absolute; left: 0; right: 0; top: var(--rd-step-label-top); }
.rd-step:focus-within { border-width: 2px; }

/* ===== 2.5 feature card ===== */
.rd-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rd-gap-grid); max-width: calc(2 * var(--rd-feature-w) + var(--rd-gap-grid)); list-style: none; margin: 0; padding: 0; }
.rd-twocol .rd-feature-grid { margin-top: var(--rd-gap-lead-grid); }
.rd-feature {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--rd-feature-h); max-width: 100%;
  padding: 11px 24px 11px 20px; background: var(--rd-surface); color: var(--rd-ink); border-radius: var(--rd-r-0);
}
.rd-feature--fixed { width: var(--rd-feature-w); }   /* a single card outside the grid keeps the measured 279 */
.rd-feature__icon { flex: 0 0 var(--rd-feature-icon); width: var(--rd-feature-icon); height: var(--rd-feature-icon); image-rendering: pixelated; color: var(--rd-ink); }
.rd-feature__text { min-width: 0; }
.rd-feature .rd-title { margin-bottom: 5px; }

/* ===== 2.6 chip ===== */
.rd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--rd-chip-h); min-width: var(--rd-chip-min); padding: 0 var(--rd-chip-px);
  background: var(--rd-surface); color: var(--rd-ink); border-radius: var(--rd-r-0);
  font: 400 var(--rd-fs-title) / var(--rd-lh-title) var(--rd-font-display); white-space: nowrap;
}
.rd-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }

/* ===== 2.7 rings: .rd-rings holds a square stage (the inner ring, in flow) and the chip list; the two outer rings hang on the stage and are cut by the section ===== */
.rd-rings { position: relative; width: min(var(--rd-ring-3), calc(100vw - 2 * var(--rd-gutter))); margin: 0 auto; }   /* no z-index: a stacking context here would isolate the screen blend of the centre mark */
.rd-heading + .rd-rings { margin-top: var(--rd-gap-rings); }
.rd-rings__stage { position: relative; width: 100%; aspect-ratio: 1; }
.rd-ring {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; aspect-ratio: 1;
  border-radius: var(--rd-r-ring); background: var(--rd-bg-band); border: var(--rd-rim); box-shadow: var(--rd-glow); pointer-events: none;
}
.rd-ring--1 { width: 317.14%; opacity: var(--rd-ring-a1); }   /* 1443 / 455 */
.rd-ring--2 { width: 213.85%; opacity: var(--rd-ring-a2); }   /*  973 / 455 */
.rd-ring--3 { width: 100%; opacity: var(--rd-ring-a3); }
.rd-rings__center { position: absolute; left: 50%; top: 50%; width: 43.96%; height: auto; aspect-ratio: 1; translate: -50% -50%; object-fit: cover; filter: grayscale(1); mix-blend-mode: screen; }   /* 200 / 455; black in the media vanishes into the band */
.rd-rings__chips { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 1; }
/* polar placement as a fraction of the stage (percent of the containing block), so the chips scale with the ring, never with the viewport */
.rd-chip--pos { position: absolute; left: calc(50% + var(--_rd-r) * cos(var(--_rd-a)) * 100%); top: calc(50% + var(--_rd-r) * sin(var(--_rd-a)) * 100%); transform: translate(-50%, -50%); }
.rd-chip--pos1 { --_rd-a: -153.2deg; --_rd-r: 0.774; }   /* measured NW */
.rd-chip--pos2 { --_rd-a: -19.1deg;  --_rd-r: 0.670; }   /* measured ENE */
.rd-chip--pos3 { --_rd-a: 144.3deg;  --_rd-r: 0.644; }   /* measured SSW */
.rd-chip--pos4 { --_rd-a: 31.1deg;   --_rd-r: 0.629; }   /* measured ESE */
/* sixteen slots (ours): the top 90 degree wedge stays empty for the head block; 16.875 degree steps, alternating orbits .78 / .58 (no two 109 px chips touch at 1440) */
.rd-slot-1  { --_rd-a: -36.5625deg; --_rd-r: 0.78; }  .rd-slot-2  { --_rd-a: -19.6875deg; --_rd-r: 0.58; }
.rd-slot-3  { --_rd-a: -2.8125deg;  --_rd-r: 0.78; }  .rd-slot-4  { --_rd-a: 14.0625deg;  --_rd-r: 0.58; }
.rd-slot-5  { --_rd-a: 30.9375deg;  --_rd-r: 0.78; }  .rd-slot-6  { --_rd-a: 47.8125deg;  --_rd-r: 0.58; }
.rd-slot-7  { --_rd-a: 64.6875deg;  --_rd-r: 0.78; }  .rd-slot-8  { --_rd-a: 81.5625deg;  --_rd-r: 0.58; }
.rd-slot-9  { --_rd-a: 98.4375deg;  --_rd-r: 0.78; }  .rd-slot-10 { --_rd-a: 115.3125deg; --_rd-r: 0.58; }
.rd-slot-11 { --_rd-a: 132.1875deg; --_rd-r: 0.78; }  .rd-slot-12 { --_rd-a: 149.0625deg; --_rd-r: 0.58; }
.rd-slot-13 { --_rd-a: 165.9375deg; --_rd-r: 0.78; }  .rd-slot-14 { --_rd-a: 182.8125deg; --_rd-r: 0.58; }
.rd-slot-15 { --_rd-a: 199.6875deg; --_rd-r: 0.78; }  .rd-slot-16 { --_rd-a: 216.5625deg; --_rd-r: 0.58; }

/* ===== 2.8 pixel stair block (ours: a 3 step L drawn by clip-path, never a bitmap) ===== */
.rd-stair {
  --_rd-cell: var(--rd-cell-lg);
  position: absolute; width: calc(var(--_rd-cell) * 3); height: calc(var(--_rd-cell) * 3);
  background: var(--rd-pixel-light); pointer-events: none;
  clip-path: polygon(0 0, 33.34% 0, 33.34% 33.34%, 66.67% 33.34%, 66.67% 66.67%, 100% 66.67%, 100% 100%, 0 100%);
}
.rd-stair--md { --_rd-cell: var(--rd-cell-md); }
.rd-stair--tl { left: 0; top: 0; transform: scaleY(-1); }
.rd-stair--tr { right: 0; top: 0; transform: scale(-1, -1); }
.rd-stair--bl { left: 0; bottom: 0; }
.rd-stair--br { right: 0; bottom: 0; transform: scaleX(-1); }

/* ===== 2.9 checkerboard divider ===== */
.rd-checker { position: relative; height: var(--rd-checker-h); background: var(--rd-pixel-light); }
.rd-checker::before {
  content: ""; display: block; height: var(--rd-checker-motif);
  background: repeating-conic-gradient(var(--rd-pixel-light) 0 25%, var(--rd-bg-band) 0 50%) 50% 0 / calc(var(--rd-cell-sm) * 2) calc(var(--rd-cell-sm) * 2);
}
.rd-section--twocol .rd-checker { margin-top: 5px; }   /* measured gap between the row and the strip */

/* ===== 2.10 CTA panel ===== */
.rd-panel {
  display: flex; flex-direction: column; align-items: center; gap: var(--rd-gap-group);
  width: min(var(--rd-max), calc(100% - 2 * var(--rd-gutter))); margin: 0 auto;
  padding: var(--rd-panel-pad) 24px var(--rd-panel-pad-b);
  background: var(--rd-surface); color: var(--rd-ink); border-radius: var(--rd-r-card); text-align: center;
}
.rd-panel p { max-width: var(--rd-measure-panel); }
.rd-panel__lead { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rd-panel__icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 100px; list-style: none; margin: 0; padding: 0; }
.rd-panel__step { display: flex; flex-direction: column; align-items: center; width: var(--rd-panel-step); }
.rd-panel__step--wide { width: 163px; }
.rd-panel__icon { width: var(--rd-cta-icon); height: var(--rd-cta-icon); margin: 0 auto 25px; image-rendering: pixelated; color: var(--rd-ink-strong); }
.rd-panel__action { display: flex; flex-direction: column; align-items: center; gap: var(--rd-gap-stack); }

/* ===== 2.11 footer, 2.12 giant wordmark ===== */
.rd-footer { position: relative; display: flow-root; overflow: clip; background: var(--rd-surface); color: var(--rd-ink); padding-top: var(--rd-footer-top); }
.rd-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--rd-footer-gap); }   /* pair with .rd-wrap */
.rd-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 31px; }
.rd-footer__mark { font: 400 min(60px, calc((100vw - 2 * var(--rd-gutter)) / var(--rd-giant-em))) / 1.2 var(--rd-font-display); color: var(--rd-ink); white-space: nowrap; }   /* 60 px makes a 226 x 72 box for a 3.6 em word, like the reference logo */
.rd-footer__cols { display: flex; flex-wrap: wrap; gap: var(--rd-footer-gap); }
.rd-footer__cols > div { width: var(--rd-footer-col); }
.rd-footer__cols .rd-h3 { margin-bottom: 13px; }
.rd-footer__cols .rd-link { display: block; margin-bottom: var(--rd-link-pitch); }
.rd-footer__legal { margin-top: var(--rd-footer-legal); }
.rd-wordmark-giant {
  --_rd-size: min(calc((100vw - 2 * var(--rd-gutter)) / var(--rd-giant-em)), var(--rd-giant-max));   /* exactly the content width, capped at 1216 */
  font: 400 var(--_rd-size) / 1 var(--rd-font-display); color: var(--rd-ink-strong);
  opacity: var(--rd-wordmark-ghost); white-space: nowrap; text-align: center;
  height: var(--rd-wordmark-crop); margin-top: calc(var(--rd-footer-giant) - 0.133em);   /* ink starts 0.133em below the line box top */
  overflow: hidden; pointer-events: none; user-select: none;
}

/* ===== 2.13 video frame: square, desaturated, screen blended onto the band ===== */
.rd-video { width: var(--rd-video); height: auto; max-width: 100%; aspect-ratio: 1; flex: 0 1 auto; min-width: 0; filter: saturate(0); mix-blend-mode: screen; overflow: hidden; }   /* below 1440 the square shrinks before the text column does */
.rd-video video, .rd-video img { width: 100%; height: 100%; object-fit: cover; }
.rd-twocol { display: flex; align-items: center; justify-content: center; gap: var(--rd-gap-cols); }
.rd-twocol__text { flex: 0 0 584px; min-width: 0; padding-top: 44px; }   /* measured: the text block sits 44 below the video's centre line */

/* ===== 2.14 hero and glyph rain layer ===== */
.rd-hero { position: relative; min-height: clamp(640px, 100svh, var(--rd-hero-h)); background: var(--rd-bg-band); overflow: clip; }
.rd-glyph { position: absolute; inset: 4px 0 0; background: var(--rd-bg-page); opacity: var(--rd-glyph-layer); pointer-events: none; }
.rd-glyph canvas, .rd-glyph video { position: absolute; inset: 0; width: 100%; height: 100%; }
.rd-glyph video { opacity: 0; }   /* the video only feeds the canvas */
.rd-hero__content { position: relative; z-index: 1; min-height: clamp(640px, 100svh, var(--rd-hero-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rd-gap-stack); text-align: center; padding: var(--rd-nav-h) var(--rd-gutter) 0; }

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root { --rd-t-dissolve: 0ms; --rd-t-fill: 0ms; }
  .rd-btn:hover::after, .rd-btn:focus-visible::after { animation: none; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .rd-glyph canvas { visibility: hidden; }
}

/* ===== responsive: the reference keeps 1440 geometry and clips; this is the fix =====
   sweep: 1440, 1310, 1200, 1150, 1024, 810, 620, 600, 420, 390 */
@media (max-width: 1439px) {
  .rd-display { font-size: clamp(36px, 4.4vw + 15px, 64px); line-height: 1.2; }   /* 64 to 1114, 50.6 at 810, 36 at 390 */
  .rd-h2 { font-size: clamp(32px, 1.4rem + 2.2vw, 50px); line-height: 1.2; }       /* 50 to 1255, 40 at 810, 32 at 390 */
}
@media (max-width: 1310px) {
  :root { --rd-gap-cards: 36px; }   /* 4 up fits down to 1144 */
}
@media (max-width: 1150px) {
  :root { --rd-gap-cards: 60px; }
  .rd-steps { display: grid; grid-template-columns: repeat(2, var(--rd-step)); }   /* 2 x 2 */
  .rd-step::before { display: block; }
  .rd-step:nth-child(2n)::before, .rd-step:last-child::before { display: none; }
  .rd-stair { --_rd-cell: 32px; }
  .rd-stair--md { --_rd-cell: 32px; }
  .rd-section--steps { --rd-section-top: 120px; --rd-section-bottom: 160px; }   /* 96 stair + 24 clearance above the h2 */
}
@media (max-width: 1200px) {
  .rd-twocol { flex-direction: column; align-items: stretch; gap: 48px; }
  .rd-twocol__text { flex: 1 1 auto; padding-top: 0; }
  .rd-feature-grid { max-width: none; }
  .rd-video { margin: 0 auto; width: min(var(--rd-video), 100%); flex: 0 0 auto; }
}
@media (max-width: 1024px) {
  :root { --rd-gutter: 40px; --rd-footer-gap: 48px; }
  .rd-nav__inner { padding: 0 var(--rd-gutter); }
  .rd-nav__item { width: 140px; padding: 12px 20px; }
  .rd-rings.has-many .rd-rings__chips { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }   /* relative, not static: keeps z-index above the outer rings */
  .rd-rings.has-many .rd-chip--pos { position: static; left: auto; top: auto; transform: none; }
}
@media (max-width: 810px) {
  :root { --rd-panel-pad: 40px; --rd-panel-pad-b: 24px; }
  .rd-nav__row { display: none; }
  .rd-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .rd-nav.is-open .rd-nav__row, .rd-nav:has(.rd-nav__toggle[aria-expanded="true"]) .rd-nav__row {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: var(--rd-nav-h); height: auto; background: var(--rd-bg-card);
  }
  .rd-nav--inline.is-open .rd-nav__row, .rd-nav--inline:has(.rd-nav__toggle[aria-expanded="true"]) .rd-nav__row { position: static; width: 100%; order: 3; }   /* wraps under the bar instead of floating */
  .rd-nav.is-open .rd-nav__item, .rd-nav:has(.rd-nav__toggle[aria-expanded="true"]) .rd-nav__item { width: 100%; border-right: 0; border-bottom: 1px solid var(--rd-hair); }
  .rd-nav--inline { height: auto; }
  .rd-nav--inline .rd-nav__inner { height: auto; min-height: var(--rd-nav-h); flex-wrap: wrap; }
  .rd-rings__chips { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }   /* flows under the stage; relative keeps its z-index above the outer rings */
  .rd-chip--pos { position: static; left: auto; top: auto; transform: none; }
  .rd-section--rings { --rd-section-bottom: 96px; }
  .rd-footer__inner { flex-direction: column; gap: 48px; }
  .rd-footer__cols { gap: 32px; }
  .rd-footer__legal { margin-top: 64px; }
}
@media (max-width: 620px) {
  :root { --rd-gap-cards: 40px; }
  .rd-steps { grid-template-columns: var(--rd-step); }   /* 1 column, connector turns vertical */
  .rd-step::before { display: block; top: 100%; left: 50%; width: 1px; height: var(--rd-gap-cards); background: repeating-linear-gradient(180deg, var(--rd-dash) 0 5px, transparent 5px 10px); }
  .rd-step:last-child::before { display: none; }
  .rd-stair--tl, .rd-stair--tr { display: none; }
  .rd-stair--bl, .rd-stair--br { --_rd-cell: 24px; }
  .rd-section--steps { --rd-section-top: 54px; --rd-section-bottom: 120px; }
  .rd-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rd-feature--fixed { width: 100%; }
}
@media (max-width: 600px) {
  .rd-panel { --rd-panel-pad: 40px; --rd-panel-pad-b: 28px; padding-inline: 20px; }
  .rd-panel__icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }   /* three on one row at every width */
  .rd-panel__step, .rd-panel__step--wide { width: auto; }
  .rd-panel__icon { width: 44px; height: 44px; margin-bottom: 14px; }
  .rd-panel__step .rd-body-strong { font-size: var(--rd-fs-small); line-height: var(--rd-lh-small); }
  .rd-panel__action { width: 100%; }
  .rd-panel .rd-btn { width: 100%; max-width: 320px; }
}
@media (max-width: 420px) {
  :root { --rd-gutter: 16px; }
  .rd-btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .rd-btn-row .rd-btn { width: 100%; }
  .rd-footer__legal { margin-top: 48px; }
}

/* =====================================================================
   site: everything vaxenfly adds to the grammar above
   ===================================================================== */

:root {
  --rd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --rd-ease-reveal: cubic-bezier(0.2, 0.6, 0.2, 1);
  --rd-t-reveal: 700ms;
  --rd-hero-bleed: 240px;         /* extra media above the hero so parallax never exposes the ground */
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
main { display: block; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--rd-surface); color: var(--rd-ink); padding: 12px 20px; font: 500 var(--rd-fs-body) / var(--rd-lh-body) var(--rd-font-body); }
.skip:focus { top: calc(var(--rd-nav-h) + 12px); outline-color: var(--rd-ink); }
.rd-nav__toggle[aria-expanded="true"] { background: var(--rd-bg-page); color: var(--rd-accent); }
.rd-nav__brand:focus-visible { outline-offset: 6px; }

/* stair blocks: one clip-path per corner so the transform stays free for parallax */
.rd-stair--tl { transform: none; clip-path: polygon(0 0, 100% 0, 100% 33.34%, 66.67% 33.34%, 66.67% 66.67%, 33.34% 66.67%, 33.34% 100%, 0 100%); }
.rd-stair--tr { transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 66.67% 100%, 66.67% 66.67%, 33.34% 66.67%, 33.34% 33.34%, 0 33.34%); }
.rd-stair--bl { transform: none; clip-path: polygon(0 0, 33.34% 0, 33.34% 33.34%, 66.67% 33.34%, 66.67% 66.67%, 100% 66.67%, 100% 100%, 0 100%); }
.rd-stair--br { transform: none; clip-path: polygon(100% 0, 66.67% 0, 66.67% 33.34%, 33.34% 33.34%, 33.34% 66.67%, 0 66.67%, 0 100%, 100% 100%); }
.rd-stair { will-change: transform; }

/* ----- hero media: the video feeds the glyph field and shows dimly under it ----- */
.rd-hero { isolation: isolate; }
.rd-hero__media { position: absolute; inset: var(--rd-nav-h) 0 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rd-hero__video, .rd-hero__still { position: absolute; left: 0; right: 0; top: calc(-1 * var(--rd-hero-bleed)); height: calc(100% + var(--rd-hero-bleed)); width: 100%; object-fit: cover; }
.rd-hero__video { opacity: 0.32; will-change: transform; }
.rd-hero__still { display: none; opacity: 0.32; }
.rd-glyph { inset: var(--rd-nav-h) 0 0; }
.rd-glyph canvas { top: calc(-1 * var(--rd-hero-bleed)); height: calc(100% + var(--rd-hero-bleed)); will-change: transform; }
.rd-hero__content { padding-bottom: 24px; }
.rd-display .rd-line { display: block; }
@media (max-width: 810px) { .rd-display .rd-line { display: inline; } }

/* ----- opening animation: one canvas over everything, removed when it has played.
   boot.js sets html.intro before paint; app.js swaps it for html.intro-done when the
   overlay has dissolved, which lets the hero copy rise into place. If the script never
   runs, the zero-length keyframe below shows the copy anyway after 3.4 s. ----- */
@keyframes rd-show { to { opacity: 1; transform: none; } }
.rd-intro { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; display: none; }
html.intro .rd-intro, html.intro-done .rd-intro { display: block; }
html.intro .rd-hero__content > *, html.intro .rd-page-head .rd-heading > * { opacity: 0; transform: translateY(16px); animation: rd-show 0s linear 3.4s forwards; }
html.intro-done .rd-hero__content > *, html.intro-done .rd-page-head .rd-heading > * { opacity: 1; transform: none; transition: opacity 600ms var(--rd-ease-reveal), transform 600ms var(--rd-ease-reveal); }
html.intro-done .rd-hero__content > :nth-child(2), html.intro-done .rd-page-head .rd-heading > :nth-child(2) { transition-delay: 90ms; }
html.intro-done .rd-hero__content > :nth-child(3), html.intro-done .rd-page-head .rd-heading > :nth-child(3) { transition-delay: 180ms; }

/* ----- scroll reveals: fade and a short rise, transform only, once ----- */
html.js .rd-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--rd-t-reveal) var(--rd-ease-reveal), transform var(--rd-t-reveal) var(--rd-ease-reveal); animation: rd-show 0s linear 5s forwards; }   /* the keyframe is the no-script failsafe: a reveal is decoration */
html.js .rd-reveal--lift { transform: translateY(48px) scale(0.98); }
html.js .rd-reveal.is-in { opacity: 1; transform: none; }
html.js .rd-steps > .rd-reveal:nth-child(2), html.js .rd-feature-grid > .rd-reveal:nth-child(2), html.js .rd-stats > .rd-reveal:nth-child(2) { transition-delay: 80ms; }
html.js .rd-steps > .rd-reveal:nth-child(3), html.js .rd-feature-grid > .rd-reveal:nth-child(3), html.js .rd-stats > .rd-reveal:nth-child(3) { transition-delay: 160ms; }
html.js .rd-steps > .rd-reveal:nth-child(4), html.js .rd-feature-grid > .rd-reveal:nth-child(4), html.js .rd-stats > .rd-reveal:nth-child(4) { transition-delay: 240ms; }
.rd-steps { isolation: isolate; }
[data-parallax], [data-rotate] { will-change: transform; }

/* ----- install strip: the command sits in the first two screens ----- */
.rd-strip { background: var(--rd-bg-page); padding: 28px 0; }
.rd-strip__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; }
.rd-strip__lead { max-width: 100%; }
.rd-cmd { display: flex; align-items: center; gap: 16px; min-width: 0; max-width: 100%; padding: 12px 12px 12px 28px; background: var(--rd-bg-card); border: var(--rd-rim); border-radius: var(--rd-r-card); box-shadow: var(--rd-glow); }
.rd-cmd code { font: 400 15px / 1.4 var(--rd-font-mono); color: var(--rd-on-dark); white-space: nowrap; overflow-x: auto; min-width: 0; padding-block: 4px; }
.rd-cmd .rd-btn { flex: 0 0 auto; height: 44px; padding: 0 20px; }
.rd-cmd--large { width: 100%; max-width: 920px; margin: 0 auto; padding-left: 32px; }
.rd-cmd--large + * { margin-top: 40px; }
.rd-cmd--large code { font-size: 17px; }
.rd-cmd--large .rd-btn { height: var(--rd-btn-h); padding: 0 var(--rd-btn-px); }
@media (max-width: 720px) { .rd-cmd { width: 100%; } }

/* ----- the square video: its source sits on the page ground (#1f1811), so instead of
   the screen blend (which would lift the square) the frame is desaturated and its
   ground mapped onto the band: luminance 25 to 18, white stays white ----- */
.rd-video { mix-blend-mode: normal; filter: saturate(0) contrast(1.0625) brightness(0.97); }

/* ----- chips carry a name and a sign ----- */
.rd-chip { gap: 10px; }
.rd-chip__sign { min-width: 0.6em; text-align: center; }
.rd-chip.is-minus .rd-chip__sign, .rd-chip.is-zero .rd-chip__sign { color: var(--rd-ink-75); }
.rd-legend { text-align: center; margin: 24px auto 0; max-width: var(--rd-measure-body); position: relative; z-index: 1; }
.rd-rings.has-many + .rd-legend { margin-top: 190px; }   /* the lowest floating chip hangs about 150 px under the stage */
@media (max-width: 1024px) { .rd-rings.has-many + .rd-legend { margin-top: 24px; } }
.rd-legend [data-literal] { font-family: var(--rd-font-display); }
.rd-rings__center--svg { background: var(--rd-bg-card); image-rendering: pixelated; }
.rd-rings--tight .rd-rings__stage { max-width: 455px; margin: 0 auto; }

/* ----- sub-page head: the same dark band, the display face, one line ----- */
.rd-page-head { --rd-section-top: calc(var(--rd-nav-h) + 110px); --rd-section-bottom: 64px; }
.rd-page-head .rd-display { max-width: var(--rd-measure-wide); }
.rd-page-head .rd-heading { gap: var(--rd-gap-stack); }
.rd-section--flow { --rd-section-top: 54px; --rd-section-bottom: 96px; }
.rd-section--flow .rd-heading + * { margin-top: 54px; }
.rd-section--flow .rd-term-grid + .rd-cmds { margin-top: 54px; }
.rd-section--ground { background: var(--rd-bg-page); }
.rd-section--tail { --rd-section-bottom: 160px; }

.rd-h3.on-dark, .rd-small.on-dark { color: var(--rd-on-dark); }

/* ----- figures: one concept, one image, one line ----- */
.rd-fig { margin: 0; display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.rd-fig__frame { background: var(--rd-bg-card); border: var(--rd-rim); border-radius: var(--rd-r-card); box-shadow: var(--rd-glow); overflow: clip; display: grid; place-items: center; }
.rd-fig__frame img { width: 100%; height: auto; }   /* the figures are rendered on pure black, so the card and the image are one surface */
.rd-fig--square .rd-fig__frame { aspect-ratio: 1; }
.rd-stack--narrow { max-width: var(--rd-video); margin-inline: auto; }
.rd-section--flow .rd-table-scroll + .rd-table-scroll, .rd-section--flow .rd-stack--wide + .rd-table-scroll { margin-top: 54px; }
.rd-fig figcaption { max-width: var(--rd-measure-body); }
.rd-fig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 94px; }
.rd-fig-grid > li { min-width: 0; }
@media (max-width: 900px) { .rd-fig-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* stages on /how/: label and line on one side, the figure on the other, sides alternating */
.rd-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.rd-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 94px; align-items: center; }
.rd-stage__text { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.rd-stage__text .rd-body { max-width: 100%; }
.rd-stage:nth-child(even) .rd-stage__text { order: 2; }
.rd-stage--wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }   /* a strip-shaped figure runs the full width under its line */
.rd-stage--wide .rd-stage__text { order: 0; }
.rd-stage .rd-fig { min-width: 0; }
@media (max-width: 900px) { .rd-stage { grid-template-columns: minmax(0, 1fr); gap: 24px; } .rd-stage:nth-child(even) .rd-stage__text { order: 0; } }

/* ----- bars: a measured value against its neighbours, widths set by app.js from the <data> it holds ----- */
.rd-bars { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 16px; max-width: 760px; width: 100%; }
.rd-bar { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 96px; gap: 20px; align-items: center; }
.rd-bar__track { position: relative; height: 28px; border-bottom: 1px solid var(--rd-hair); }
.rd-bar__fill { position: absolute; left: 0; top: 0; bottom: 4px; width: 0; background: var(--rd-surface); transition: width 900ms var(--rd-ease-reveal); }
.rd-bar--dim .rd-bar__fill { background: var(--rd-dash); }
.rd-bar__value { font: 400 var(--rd-fs-title) / var(--rd-lh-title) var(--rd-font-display); text-align: right; white-space: nowrap; }
.rd-bar--neg .rd-bar__fill { left: auto; right: 0; }
@media (max-width: 600px) { .rd-bar { grid-template-columns: minmax(0, 1fr) 80px; } .rd-bar__label { grid-column: 1 / -1; } }

/* ----- stat tiles: the step card grammar holding one figure each ----- */
.rd-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rd-gap-grid); }
.rd-stat { width: var(--rd-step); height: var(--rd-step); background: var(--rd-bg-card); border: var(--rd-rim); border-radius: var(--rd-r-card); box-shadow: var(--rd-glow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0 16px; max-width: 100%; }
.rd-stat b { font: 400 40px / 48px var(--rd-font-display); white-space: nowrap; }
.rd-stat span { font: 400 var(--rd-fs-small) / var(--rd-lh-small) var(--rd-font-body); }

/* ----- terminals and code: black rimmed cards, the only monospace on the site ----- */
.rd-term, .rd-code { margin: 0; padding: 24px 28px; background: var(--rd-bg-card); color: var(--rd-on-dark); border: var(--rd-rim); border-radius: var(--rd-r-card); box-shadow: var(--rd-glow); font: 400 13px / 1.55 var(--rd-font-mono); overflow-x: auto; tab-size: 4; max-width: 100%; }
.rd-code { font-size: 14px; line-height: 1.6; }
.rd-term .prompt, .rd-code .c { color: var(--rd-dash); }
.rd-term--tall { max-height: 520px; overflow-y: auto; }
.rd-term-grid { display: grid; gap: var(--rd-gap-grid); }
.rd-term-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .rd-term-grid--two { grid-template-columns: minmax(0, 1fr); } }
.rd-stack--wide { max-width: 920px; margin-inline: auto; }   /* margin-inline, so a sibling rule may still set the top gap (the install command's 40px) */

/* ----- lists of commands and fields ----- */
.rd-cmds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.rd-cmds li { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rd-hair); }
.rd-cmds code { font: 400 14px / 1.4 var(--rd-font-mono); }
.rd-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; max-width: 760px; }
.rd-dl dt { font: 400 14px / 1.4 var(--rd-font-mono); }
.rd-dl dd { margin: 0; }
@media (max-width: 600px) {
  .rd-cmds li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rd-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .rd-dl dd { margin-bottom: 10px; }
}

/* ----- tables on the band ----- */
.rd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rd-table { width: 100%; border-collapse: collapse; font: 400 15px / 1.2 var(--rd-font-body); min-width: 640px; }
.rd-table th, .rd-table td { padding: 12px 14px; text-align: left; vertical-align: top; }
.rd-table thead th { font: 400 var(--rd-fs-title) / var(--rd-lh-title) var(--rd-font-display); border-bottom: 1px solid var(--rd-hair); white-space: nowrap; }
.rd-table tbody tr + tr { border-top: 1px solid var(--rd-hair); }
.rd-table th[scope="row"] { font: 400 var(--rd-fs-title) / var(--rd-lh-title) var(--rd-font-display); white-space: nowrap; }
.rd-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-table .sign { font: 400 var(--rd-fs-title) / var(--rd-lh-title) var(--rd-font-display); text-align: center; }
.rd-table .op { text-align: center; }
.rd-table .is-thin td { background: var(--rd-surface); color: var(--rd-ink); }
.rd-table .is-plus .sign-word, .rd-table .is-minus .sign-word, .rd-table .is-zero .sign-word { white-space: nowrap; }

/* ----- gates: one card per gate, arms on the right ----- */
.rd-gates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rd-gap-grid); }
.rd-gate { background: var(--rd-bg-card); border: var(--rd-rim); border-radius: var(--rd-r-card); box-shadow: var(--rd-glow); padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; }
.rd-gate__text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rd-gate__text .rd-h3 { color: var(--rd-on-dark); }
.rd-gate__file { font: 400 13px / 1.4 var(--rd-font-mono); color: var(--rd-dash); }
.rd-gate__text .rd-body { max-width: 100%; }
.arms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.arm { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--rd-hair); font: 400 var(--rd-fs-small) / var(--rd-lh-small) var(--rd-font-body); }
.arm code { font: 400 13px / 1.3 var(--rd-font-mono); overflow-wrap: anywhere; }
.arm-rule { white-space: nowrap; }
.arm.is-red { background: var(--rd-surface); color: var(--rd-ink); border-color: var(--rd-surface); }
@media (max-width: 900px) { .rd-gate { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 24px; } }

/* ----- the CTA panel's pictograms ----- */
.rd-panel__icon { display: block; }

/* ----- footer ----- */
.rd-footer__brand .rd-link { max-width: 420px; }
.rd-footer__cols .rd-link:hover { opacity: 0.6; }
.rd-footer__legal { max-width: var(--rd-measure-body); }

/* ----- reduced motion: nothing moves, everything is visible ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rd-hero__video, .rd-glyph canvas { display: none; }
  .rd-hero__still { display: block; }
  html.js .rd-reveal, html.js .rd-reveal--lift { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax], [data-rotate] { transform: none !important; }
  html.intro .rd-intro, html.intro-done .rd-intro { display: none; }
  html.intro .rd-hero__content > *, html.intro .rd-page-head .rd-heading > * { opacity: 1; transform: none; transition: none; animation: none; }
  .rd-bar__fill { transition: none; }
  .rd-footer__cols .rd-link { transition: none; }
}

/* ===== token: X handle in the nav, CA slot in the hero and footer (ours) =====
   The CA value is data-bound (token.json); "0xxx" is the pre-launch placeholder.
   Colours inherit from the band (white on the dark hero, ink on the light footer). */
.rd-nav__item--x { gap: 8px; width: auto; padding-right: 20px; }
.rd-x-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid currentColor; font: 400 11px / 1 var(--rd-font-display); letter-spacing: 0; }
.rd-ca { display: inline-flex; align-items: center; gap: 10px; font: 400 var(--rd-fs-small) / 1.2 var(--rd-font-body); color: inherit; }
.rd-ca__label { font: 400 11px / 1 var(--rd-font-display); letter-spacing: 0.08em; }
.rd-ca__value { font: 400 13px / 1 var(--rd-font-display); padding: 6px 10px; border: 1px solid currentColor; color: inherit; background: transparent; }
.rd-ca[data-ca-state="not launched"] .rd-ca__value { letter-spacing: 0.12em; }
.rd-ca--hero { position: relative; z-index: 1; justify-content: center; flex-wrap: wrap; margin-top: 22px; padding: 8px 12px; border: 1px solid var(--rd-hair); background: var(--rd-bg-card); color: var(--rd-on-dark); }
.rd-ca__x { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; padding: 6px 10px; border: 1px solid currentColor; }
.rd-ca__x:hover, .rd-ca__x:focus-visible { color: var(--rd-accent); outline: 0; }
.rd-ca--footer { display: inline-flex; margin-bottom: var(--rd-link-pitch); color: var(--rd-ink); }
.rd-ca--footer .rd-ca__value { padding: 4px 8px; }
@media (max-width: 1023px) and (min-width: 811px) {
  .rd-nav__item--x .rd-nav__xlabel { display: none; }   /* the mark alone: five cells plus the handle overflow an 834 viewport */
  .rd-nav__item--x { padding: 12px 16px; }
}
@media (max-width: 810px) {
  .rd-nav.is-open .rd-nav__item--x, .rd-nav:has(.rd-nav__toggle[aria-expanded="true"]) .rd-nav__item--x { width: 100%; }
}

/* ===== the fly, and the four-picture story under the hero (ours) =====
   First thing on the page is the animal; then fly -> brain -> mushroom body -> readout,
   one line each. The fly is the project's brand image (assets/brand); the brain and
   the mushroom body are renders of the real male-cns:v1.0 meshes (tools/render-brain.mjs). */
.rd-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rd-hero__fly { display: block; width: auto; height: clamp(220px, 40vh, 420px); max-width: 100%; aspect-ratio: 1; filter: drop-shadow(0 0 28px rgba(255, 94, 31, 0.18)); }   /* a transparent cut-out of the brand fly (assets/brand/fly-cutout.webp) */
.rd-footer__logo { display: block; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 12px; }
.rd-section--story { --rd-section-top: 56px; --rd-section-bottom: 64px; background: var(--rd-bg-page); }
.rd-story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rd-story__tile { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rd-story__fig { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--rd-bg-card); border: var(--rd-rim); border-radius: var(--rd-r-card); box-shadow: var(--rd-glow); overflow: clip; }
.rd-story__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }   /* absolute: the image never sizes the frame, so all four frames are the same height */
.rd-story__img--fly { object-fit: contain; }
.rd-story__img--chart { object-fit: contain; padding: 4%; box-sizing: border-box; }
.rd-story__n { position: absolute; top: 10px; left: 12px; z-index: 1; font: 400 12px / 1 var(--rd-font-display); letter-spacing: 0.1em; color: var(--rd-on-dark); opacity: 0.75; }
.rd-story__fig::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 255, 255, 0.10); pointer-events: none; }
.rd-story__cap { margin: 0; color: var(--rd-on-dark); }
@media (max-width: 1023px) { .rd-story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  /* one swipeable row on phones so the install command stays within two screens */
  .rd-story { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
  .rd-story::-webkit-scrollbar { display: none; }
  .rd-story__tile { flex: 0 0 78vw; scroll-snap-align: start; }
}

/* ===== page heads carry the animal or its brain (ours) ===== */
.rd-head-art { position: relative; z-index: 1; max-width: 820px; margin: 44px auto 0; aspect-ratio: 4 / 3; background: #000; border: var(--rd-rim); border-radius: var(--rd-r-card); box-shadow: var(--rd-glow); overflow: clip; }
.rd-head-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-head-fly { display: block; width: clamp(150px, 24vh, 240px); height: auto; aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 0 24px rgba(255, 94, 31, 0.18)); }
@media (max-width: 599px) { .rd-head-art { margin-top: 28px; border-radius: 16px; } }