/* ============================================
   TERMinator Website — v2 "Refined CRT"
   Same identity, rebuilt type / rhythm / effect budget.
   Uses the same JS hooks as css/styles.css so js/main.js
   runs unchanged.
   ============================================ */

/* --- Reset & Base ------------------------------------------------ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Ground — deeper and more layered than v1 */
  --ink-950: #04090f;
  --ink-900: #070f1b;
  --ink-850: #0a1929;
  --ink-800: #0b1c2e;
  --ink-750: #0d2137;
  --ink-700: #12293f;

  /* Terminal black (feature cards) */
  --term-bg: #06090d;
  --term-chrome: #10151c;

  /* Lines */
  --line: #1a3a5c;
  --line-soft: rgba(122, 176, 224, 0.13);
  --line-hair: rgba(122, 176, 224, 0.07);

  /* Text — raised contrast from v1's #AAAAAA */
  --txt: #b4c5d6;
  --txt-bright: #e9f2fb;
  --txt-dim: #7b8fa4;
  --txt-faint: #56687b;

  /* Brand accents (unchanged) */
  --cyan: #00AAFF;
  --cyan-dark: #0088DD;
  --green: #00FFAA;
  --green-dim: #00cc88;
  --red: #FF5555;
  --yellow: #FFFF55;
  --magenta: #FF55FF;
  --purple: #AA55FF;

  /* Glow — reserved, not sprayed */
  --glow-cyan: 0 0 24px rgba(0, 170, 255, 0.28);
  --glow-green: 0 0 24px rgba(0, 255, 170, 0.24);

  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Press Start 2P', 'IBM Plex Mono', monospace;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 1240px;
  --radius: 10px;
  --radius-sm: 6px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  background: var(--ink-900);
}

body {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  line-height: 1.72;
  font-weight: 400;
  background: transparent;
  color: var(--txt);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pixel-font elements opt back out of smoothing */
.px,
.btn,
.tab-btn {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover { color: var(--green); }

img { max-width: 100%; height: auto; }

::selection {
  background: rgba(0, 255, 170, 0.25);
  color: var(--txt-bright);
}

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

/* --- Brand fragments (JS/markup shared with v1) ------------------- */
.term    { color: var(--purple); }
.inator  { color: var(--cyan); }

.highlight {
  color: var(--cyan);
  font-weight: 500;
}
.highlight-tap {
  color: var(--purple);
  font-weight: 600;
}

/* --- Atmosphere: scanlines + vignette ---------------------------- */
/* Dialled well back from v1 so it reads as texture, not overlay. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.022) 2px,
    rgba(0, 0, 0, 0.022) 3px
  );
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    130% 100% at 50% 40%,
    transparent 55%,
    rgba(2, 6, 12, 0.26) 100%
  );
}

/* --- Matrix rain (JS-driven) ------------------------------------- */
.matrix-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
}

.matrix-column {
  position: absolute;
  /* the chunky pixel face is what makes the rain read at low opacity */
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--green);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* --- Pixel canvas glyphs (rendered by js/main.js) ---------------- */
#pixel-logo,
.pixel-logo,
.pixel-title {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#pixel-logo {
  height: 28px;   /* 4x the 7px bitmap */
  width: auto;
  display: block;
}

.pixel-logo {
  vertical-align: middle;
  display: inline-block;
}

.pixel-logo--inline {
  height: 14px;   /* 2x */
  width: auto;
  vertical-align: baseline;
  position: relative;
  top: 1px;
}

.pixel-logo--footer {
  height: 21px;   /* 3x */
  width: auto;
}

.pixel-title {
  height: 21px;   /* 3x */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin: 0;
}

@media (min-width: 900px)  { .pixel-title { height: 28px; } }  /* 4x */
@media (max-width: 560px)  { .pixel-title { height: 14px; } }  /* 2x */

/* --- Navigation -------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(7, 15, 27, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-hair);
}

.nav-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  padding: 6px 0;
}

/* Same sliding underline as the nav links, in green */
.nav-logo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: width 0.28s ease;
}
.nav-logo:hover::after { width: 100%; }

.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  margin-left: auto;
  align-items: center;
}

.nav-links a {
  display: block;
  position: relative;
  padding: 6px 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txt-dim);
  transition: color 0.18s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--cyan);
  transition: width 0.28s ease;
}

.nav-links a:hover { color: var(--txt-bright); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-950);
  background: var(--green);
  border-radius: 999px;
  padding: 8px 19px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover {
  color: var(--ink-950);
  box-shadow: var(--glow-green);
  transform: translateY(-1px);
}

.nav--scrolled {
  background: rgba(4, 9, 15, 0.93);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.nav-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--green));
}

.nav-links a.is-active { color: var(--green); }
.nav-links a.is-active::after {
  width: 100%;
  background: var(--green);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--cyan);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* --- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.58rem;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease,
              transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--cyan);
  color: var(--ink-950);
  border-color: var(--cyan);
}
.btn-primary:hover {
  color: var(--ink-950);
  box-shadow: var(--glow-cyan);
}

.btn-outline {
  background: transparent;
  color: var(--green);
  border-color: rgba(0, 255, 170, 0.45);
}
.btn-outline:hover {
  background: var(--green);
  color: var(--ink-950);
  border-color: var(--green);
  box-shadow: var(--glow-green);
}

.btn-ghost {
  background: transparent;
  color: var(--txt);
  border-color: var(--line);
}
.btn-ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 170, 255, 0.06);
}

/* --- Hero -------------------------------------------------------- */
.hero {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(104px, 14vh, 152px) var(--gutter) clamp(32px, 5vh, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eyebrow {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--green);
  opacity: 0.6;
}

.hero-logo {
  margin-bottom: 20px;
  width: 100%;
}

.hero-header-img {
  max-width: 420px;
  width: 100%;
  display: block;
  filter: drop-shadow(0 0 28px rgba(0, 170, 255, 0.22));
}

.hero-hook {
  font-size: clamp(1.05rem, 0.95rem + 0.65vw, 1.45rem);
  line-height: 1.4;
  color: var(--yellow);
  font-weight: 500;
  margin-bottom: 16px;
  max-width: 20ch;
}

.hero-tagline {
  font-size: 1rem;
  color: var(--txt);
  max-width: 46ch;
  margin-bottom: 30px;
}
.hero-tagline .highlight {
  color: var(--yellow);
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

/* Spec strip — turns loose facts into a designed element */
.hero-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  border-top: 1px solid var(--line-hair);
  padding-top: 20px;
}

.hero-spec {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 0.8rem;
  line-height: 1.6;
}

.hero-spec dt {
  flex-shrink: 0;
  width: 92px;
  color: var(--txt-faint);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.78rem;
}

.hero-spec dd {
  color: var(--txt-dim);
  letter-spacing: 0.5px;
}
.hero-spec dd b {
  color: var(--cyan);
  font-weight: 500;
}

/* Splash art */
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-splash {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
  max-width: 404px;
  width: 100%;
}

.hero-splash::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 170, 0.16);
  pointer-events: none;
  z-index: 8;
}

.hero-splash-img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow:
    0 0 70px rgba(0, 255, 170, 0.09),
    0 24px 60px rgba(0, 0, 0, 0.6);
}

/* --- Scanline sweep (carried from v1, JS re-clips it) ------------ */
.hero-splash .scanline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  pointer-events: none;
  z-index: 4;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 255, 170, 0.2) 0px,
      rgba(0, 255, 170, 0.05) 3px,
      rgba(0, 255, 170, 0.25) 5px,
      transparent 7px,
      rgba(0, 255, 170, 0.18) 10px,
      rgba(0, 255, 170, 0.03) 12px,
      rgba(0, 255, 170, 0.22) 15px,
      transparent 17px,
      rgba(0, 255, 170, 0.15) 20px
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 255, 170, 0.08) 20%,
      rgba(0, 255, 170, 0.2) 50%,
      rgba(0, 255, 170, 0.08) 80%,
      transparent 100%
    );
  box-shadow: 0 0 14px 4px rgba(0, 255, 170, 0.1);
  animation: scanline-roll 8s linear infinite;
  clip-path: polygon(
    0% 20%, 3% 0%, 7% 40%, 10% 10%, 14% 50%, 18% 5%, 22% 45%,
    26% 0%, 30% 35%, 34% 10%, 38% 50%, 42% 5%, 46% 40%,
    50% 15%, 54% 50%, 58% 0%, 62% 45%, 66% 10%, 70% 50%,
    74% 5%, 78% 40%, 82% 0%, 86% 35%, 90% 15%, 94% 50%,
    97% 5%, 100% 30%, 100% 80%, 97% 100%, 94% 60%, 90% 95%,
    86% 55%, 82% 100%, 78% 65%, 74% 95%, 70% 55%, 66% 100%,
    62% 60%, 58% 100%, 54% 55%, 50% 90%, 46% 60%, 42% 100%,
    38% 55%, 34% 95%, 30% 65%, 26% 100%, 22% 60%, 18% 95%,
    14% 55%, 10% 100%, 7% 65%, 3% 95%, 0% 70%
  );
}

@keyframes scanline-roll {
  0%   { top: -8px; }
  100% { top: 100%; }
}

/* --- Glitch (carried from v1) ------------------------------------ */
.glitch { overflow: hidden; }

.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  border: none !important;
  box-shadow: none !important;
}

.glitch-r { animation: glitch-red 5s infinite; }
.glitch-b { animation: glitch-cyan 5s infinite; animation-delay: 0.3s; }

@keyframes glitch-red {
  0%, 55% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
  56%     { opacity: 0.8; clip-path: inset(20% 0 60% 0); transform: translate(4px, 0); filter: hue-rotate(-50deg) saturate(3) brightness(1.5); }
  58%     { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
  60%     { opacity: 0.9; clip-path: inset(55% 0 15% 0); transform: translate(-6px, 0); filter: hue-rotate(-50deg) saturate(3) brightness(1.5); }
  62%     { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
  64%     { opacity: 0.7; clip-path: inset(5% 0 85% 0); transform: translate(3px, 0); filter: hue-rotate(-50deg) saturate(3) brightness(1.5); }
  66%     { opacity: 0.8; clip-path: inset(70% 0 10% 0); transform: translate(-5px, 0); filter: hue-rotate(-50deg) saturate(3) brightness(1.5); }
  68%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
}

@keyframes glitch-cyan {
  0%, 62% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
  63%     { opacity: 0.8; clip-path: inset(45% 0 30% 0); transform: translate(-5px, 0); filter: hue-rotate(100deg) saturate(3) brightness(1.5); }
  65%     { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
  67%     { opacity: 0.9; clip-path: inset(10% 0 70% 0); transform: translate(6px, 0); filter: hue-rotate(100deg) saturate(3) brightness(1.5); }
  69%     { opacity: 0.7; clip-path: inset(75% 0 5% 0); transform: translate(-3px, 0); filter: hue-rotate(100deg) saturate(3) brightness(1.5); }
  71%     { opacity: 0.8; clip-path: inset(35% 0 45% 0); transform: translate(4px, 0); filter: hue-rotate(100deg) saturate(3) brightness(1.5); }
  73%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); }
}

.glitch-slice {
  overflow: hidden;
  mix-blend-mode: screen;
}

/* --- Section shell ----------------------------------------------- */
/* used where a section is split around a full-bleed element */
.section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gutter);
}

/* Trim a section's padding toward whatever it neighbours. Both must stay
   after .section: its shorthand `padding` would otherwise win on source
   order and quietly drop them. */
.section--pt-tight { --pt-tight: clamp(44px, 5.5vw, 68px); padding-top: var(--pt-tight); }
.section--pb-tight { --pb-tight: clamp(30px, 4vw, 46px); padding-bottom: var(--pb-tight); }

/* Anchors the art rails to the section's padding box. */
.section--flanked { position: relative; }

/* --- Art rails ---------------------------------------------------- */
/* Scene art drifting up the empty margins beside the primer, spanning
   exactly from the 01 label down to the last line of the definition.
   Purely decorative, so it is aria-hidden, ignores the pointer, and only
   appears once the margins are wide enough to hold it without crowding
   the text. Below that breakpoint the section is unchanged. */
.art-rail { display: none; }

@media (min-width: 1400px) {
  /* Once the rails appear, pull the primer in to the width the definition
     already caps itself at (96ch). The header and the body then share both
     edges and the whole block sits centred between the two rails, instead
     of the body hugging the left one. */
  .section--flanked {
    --flank-col: 920px;
    --flank-pad: calc((var(--measure) - var(--flank-col)) / 2);
    padding-inline: var(--flank-pad);
  }

  .art-rail {
    /* the freed space either side, less the gap and the edge margin */
    --art-w: clamp(140px, calc((100vw - var(--flank-col)) / 2 - 60px), 300px);
    --art-edge: 28px;
    display: block;
    position: absolute;
    top: var(--pt-tight);
    bottom: var(--pb-tight);
    width: var(--art-w);
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  }
  /* Anchored to the viewport edges rather than to the text, so the art sits
     out at the sides and the space between it and the primer opens up as the
     window grows. 100% is the section box, so (100% - 100vw) / 2 is the
     distance out to the viewport edge; body already clips overflow-x, so the
     scrollbar's share of 100vw cannot introduce a scroll. */
  .art-rail--left  { left:  calc((100% - 100vw) / 2 + var(--art-edge)); }
  .art-rail--right { right: calc((100% - 100vw) / 2 + var(--art-edge)); }
}

.art-col {
  /* flex, so the last image's margin-bottom cannot collapse out of the
     column — the track has to be an exact multiple of one list */
  display: flex;
  flex-direction: column;
  animation: art-drift 90s linear infinite;
}
.art-rail--right .art-col { animation-duration: 70s; }

/* Each image carries its own trailing gap, so the column's two copies are
   exactly equal halves and -50% lands on a seam. A flex `gap` would leave
   one gap unaccounted for and the loop would jump. */
.art-col img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
  border: 1px solid var(--line-hair);
  border-radius: var(--radius);
}

/* upward drift */
@keyframes art-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.band {
  position: relative;
  background: var(--ink-850);
}

/* --- ANSI block divider ---------------------------------------- */
/* Two offset rows of CP437-style half blocks, built from gradients
   rather than glyphs so it needs no font and scales to any width. */
.ansi-rule {
  position: relative;
  height: 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.ansi-rule::before,
.ansi-rule::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
}

/* upper row — ▀ */
.ansi-rule::before {
  top: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 255, 170, 0.58) 0 7px,
    transparent 7px 14px,
    rgba(0, 170, 255, 0.48) 14px 21px,
    transparent 21px 35px,
    rgba(170, 85, 255, 0.40) 35px 42px,
    transparent 42px 56px
  );
}

/* lower row — ▄, offset so the two interlock */
.ansi-rule::after {
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 7px,
    rgba(0, 170, 255, 0.34) 7px 14px,
    transparent 14px 28px,
    rgba(0, 255, 170, 0.28) 28px 35px,
    transparent 35px 49px,
    rgba(255, 169, 43, 0.26) 49px 56px
  );
}

.band--deep {
  background:
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
}

/* Section header — left-aligned, rule runs to the edge.
   Replaces v1's centred label/title/divider stamp. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  align-items: center;
  column-gap: 20px;
  row-gap: 10px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.sec-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-index {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
  background: var(--green);
  border-radius: 3px;
  padding: 3px 7px;
  line-height: 1.45;
}

.sec-label {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--txt-faint);
}

.sec-title {
  font-weight: 400;
  min-width: 0;
  display: flex;
  align-items: center;
}

.sec-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}

.sec-lede {
  grid-column: 1 / -1;
  max-width: 62ch;
  color: var(--txt-dim);
  font-size: 0.94rem;
  margin-top: 4px;
}

/* --- What is a BBS? --------------------------------------------- */
/* Dictionary-style definition, then a full-bleed marquee of boards,
   then the step row — deliberately unlike any other section's rhythm. */
.bbs-def {
  max-width: 96ch;
}

.bbs-def-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-hair);
}

.bbs-term {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 600;
  color: var(--txt-bright);
  letter-spacing: 0.3px;
}

.bbs-abbr {
  font-size: 0.90rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--green);
  border: 1px solid rgba(0, 255, 170, 0.35);
  background: rgba(0, 255, 170, 0.08);
  border-radius: 999px;
  padding: 2px 10px;
}

.bbs-body p {
  margin-bottom: 14px;
  color: var(--txt);
}
.bbs-body p:last-child { margin-bottom: 0; }

.bbs-body .lede {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--txt-bright);
}

/* --- Board marquee (full bleed) --- */
/* Lives outside .section in the markup, so it spans the viewport with no
   100vw breakout — that would overflow by the scrollbar's width. */
.bbs-strip {
  display: flex;
  /* clearance before the ANSI rule that closes the section */
  margin-bottom: clamp(26px, 3.5vw, 44px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bbs-track {
  display: flex;
  flex: 0 0 auto;
  gap: 18px;
  padding-right: 18px;
  animation: bbs-marquee 64s linear infinite;
}

/* right to left */
@keyframes bbs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}


.bbs-strip:hover .bbs-track { animation-play-state: paused; }

/* Drag to scroll. Where motion is allowed, script takes the marquee over:
   both tracks go in a rail that gets a transform every frame instead of the
   keyframes above, so a mouse or a finger can shove it either way and the
   loop still closes seamlessly. Reduced motion keeps the CSS path below. */
.bbs-rail {
  display: flex;
  flex: 0 0 auto;
  will-change: transform;
}

.bbs-strip--drag {
  cursor: grab;
  /* vertical page scroll still passes through; horizontal is ours */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.bbs-strip--drag.is-dragging { cursor: grabbing; }
.bbs-strip--drag .bbs-track { animation: none; }
.bbs-strip--drag .bbs-tile img { -webkit-user-drag: none; }

.bbs-tile {
  flex: 0 0 auto;
  width: clamp(300px, 34vw, 500px);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-800);
  transition: border-color 0.25s ease;
}
.bbs-tile:hover { border-color: rgba(0, 255, 170, 0.4); }

.bbs-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: center;
}

.bbs-tile figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px 13px;
  border-top: 1px solid var(--line-hair);
}
.bbs-tile figcaption b {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--txt-bright);
}
.bbs-tile figcaption span {
  font-size: 0.84rem;
  color: var(--txt-faint);
}

/* placeholder tiles until real board screens land */
.bbs-tile--empty {
  background: transparent;
  border-style: dashed;
  border-color: rgba(122, 176, 224, 0.18);
}
.bbs-empty {
  aspect-ratio: 5 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--txt-faint);
}
.bbs-empty span {
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(0, 255, 170, 0.35);
}
.bbs-empty p {
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- About ------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.split--reverse {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

/* Gives the artwork column more room than the prose */
.split--media {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.prose p {
  margin-bottom: 18px;
  max-width: 62ch;
}
.prose p:last-child { margin-bottom: 0; }

/* Lead paragraph gives each block an entry point */
.prose .lede {
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--txt-bright);
}

/* Framed artwork — reuses the terminal-window language */
.frame {
  width: 100%;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-750);
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--term-chrome);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.frame-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.frame-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}
.frame-dots i:nth-child(1) { background: #ff5f57; }
.frame-dots i:nth-child(2) { background: #febc2e; }
.frame-dots i:nth-child(3) { background: #28c840; }

.frame-title {
  font-size: 0.82rem;
  color: var(--txt-faint);
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame img { display: block; width: 100%; }

/* --- Features ---------------------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

/* Varied spans break the nine-identical-tiles look */
.features-grid > .term-card       { grid-column: span 4; }
.features-grid > .term-card.w-6   { grid-column: span 6; }
.features-grid > .term-card.w-3   { grid-column: span 3; }

.term-card {
  display: flex;
  flex-direction: column;
  background: var(--term-bg);
  border: 1px solid #22282f;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.25s ease;
}

.term-card:hover {
  border-color: #3a4a5a;
  transform: translateY(-2px);
}

.term-card.active {
  border-color: var(--green-dim);
  box-shadow: 0 0 0 1px rgba(0, 255, 170, 0.18),
              0 0 32px rgba(0, 255, 170, 0.1);
}

.term-titlebar {
  background: var(--term-chrome);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.term-path {
  color: var(--green-dim);
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-buttons {
  display: flex;
  gap: 9px;
  font-size: 0.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.btn-min, .btn-max, .btn-close {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s ease;
  user-select: none;
}
.btn-min:hover, .btn-max:hover, .btn-close:hover { opacity: 1; }

.btn-min   { color: var(--yellow); }
.btn-max   { color: var(--green); }
.btn-close { color: var(--red); }

.term-card.minimized .term-body { display: none; }

.term-card.maximized {
  grid-column: 1 / -1;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.term-card.maximized .term-body {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}
.features-grid.has-maximized .term-card:not(.maximized) { display: none; }
.term-card.closed { display: none; }

.term-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 14px 12px;
  font-size: 0.8rem;
  line-height: 1.85;
  overflow-wrap: break-word;
}

.term-line   { color: var(--txt-bright); }
.term-prompt { color: var(--green); margin-right: 7px; }
.term-output {
  color: var(--cyan);
  transition: opacity 0.2s ease;
}

.term-text {
  color: var(--txt-dim);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
  line-height: 1.65;
}

.term-cursor {
  align-self: flex-start;
  color: var(--green);
  animation: blink-cursor 1.05s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Surfaces the interactive-terminal easter egg, which was
   otherwise undiscoverable. */
.features-hint {
  margin-top: 22px;
  font-size: 0.90rem;
  color: var(--txt-faint);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.features-hint kbd {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--green);
  background: rgba(0, 255, 170, 0.08);
  border: 1px solid rgba(0, 255, 170, 0.22);
  border-radius: 4px;
  padding: 2px 7px;
}

/* --- TAP+ gallery ------------------------------------------------ */
.tap-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.tap-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: border-color 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease;
}
.tap-gallery img:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.tap-gallery img:nth-child(1) { grid-column: span 6; }
.tap-gallery img:nth-child(2) { grid-column: span 3; }
.tap-gallery img:nth-child(3) { grid-column: span 3; }
.tap-gallery img:nth-child(4) { grid-column: span 6; }

.tap-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--txt-bright);
  border: 1px solid rgba(170, 85, 255, 0.4);
  background: rgba(170, 85, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 0.84rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tap-guide-link::after {
  content: '\2192';
  color: var(--purple);
}
.tap-guide-link:hover {
  color: var(--txt-bright);
  background: rgba(170, 85, 255, 0.14);
  border-color: var(--purple);
}

/* --- Screenshots ------------------------------------------------- */
.screenshots-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--ink-800);
  border: 1px solid var(--line-hair);
  border-radius: 999px;
  margin-bottom: 32px;
}

.tab-btn {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--txt-dim);
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tab-btn:hover { color: var(--txt-bright); }

.tab-btn.active {
  background: rgba(0, 170, 255, 0.14);
  color: var(--cyan);
}
.tab-btn[data-platform="android"].active {
  background: rgba(0, 255, 170, 0.14);
  color: var(--green);
}

.screenshots-grid { display: grid; gap: 18px; }

.screenshots-grid[data-platform="android"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.screenshots-grid[data-platform="windows"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.screenshot-card {
  position: relative;
  border: 1px solid var(--line-hair);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--ink-800);
  transition: border-color 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease;
}

.screenshot-card:hover {
  border-color: rgba(0, 170, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
}

.screenshot-card img { display: block; width: 100%; }

/* Two landscape shots stacked beside a portrait one. The portrait shot
   sets the row height; the stacked images contribute no height of their
   own and share the space in proportion to their natural heights
   (Mandelbrot 879px, Settings 712px at 1100px wide), each trimming a
   little off top and bottom. */
.shot-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.shot-stack .screenshot-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shot-stack .screenshot-card:nth-child(1) { flex: 879 1 auto; }
.shot-stack .screenshot-card:nth-child(2) { flex: 712 1 auto; }
.shot-stack .screenshot-card img {
  flex: 1 1 0;
  min-height: 0;
  object-fit: cover;
}

.screenshot-card .caption {
  padding: 11px 14px;
  font-size: 0.76rem;
  color: var(--txt-dim);
  letter-spacing: 0.4px;
  border-top: 1px solid var(--line-hair);
  display: flex;
  align-items: center;
  gap: 8px;
}
.screenshot-card .caption::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.7;
  flex-shrink: 0;
}
.platform-group[data-platform="android"] .screenshot-card .caption::before {
  background: var(--green);
}

/* Driven by CSS rather than the observer: these live inside a
   display:none group until their tab is picked, and this also replays
   the reveal each time you switch tabs. `backwards` (not `both`) so the
   card returns to normal styling afterwards and :hover still lifts. */
@keyframes shot-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: none; }
}

.platform-group.active .screenshot-card {
  animation: shot-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.platform-group.active .screenshot-card:nth-child(4n + 2) { animation-delay:  70ms; }
.platform-group.active .screenshot-card:nth-child(4n + 3) { animation-delay: 140ms; }
.platform-group.active .screenshot-card:nth-child(4n + 4) { animation-delay: 210ms; }

/* --- Android device frame --- */
.platform-group[data-platform="android"] .screenshot-card {
  padding: 20px 8px 0;
  border-radius: 26px;
  background: #090d12;
  border: 1px solid #273039;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.platform-group[data-platform="android"] .screenshot-card::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: #273039;
}
.platform-group[data-platform="android"] .screenshot-card img {
  border-radius: 4px;
}
.platform-group[data-platform="android"] .screenshot-card .caption {
  border-top: none;
  justify-content: center;
  padding: 13px 10px 15px;
}
.platform-group[data-platform="android"] .screenshot-card:hover {
  border-color: rgba(0, 255, 170, 0.45);
}

.platform-group { display: none; }
.platform-group.active { display: block; }

/* --- Downloads --------------------------------------------------- */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.download-card {
  --accent: var(--cyan);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ink-750);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease, background 0.25s ease;
}

/* Hairline of platform colour along the top edge */
.download-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.75;
}

.download-card:hover {
  background: var(--ink-700);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45);
}

.dl--android { --accent: var(--green); }
.dl--ios     { --accent: var(--cyan); }
.dl--windows { --accent: #4aa8ff; }
.dl--macos   { --accent: #c2d3e3; }
.dl--linux   { --accent: #FFA92B; }   /* matches Tux's beak and feet */

.download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  line-height: 1;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
/* logos inherit the card's platform accent via currentColor */
.download-icon { color: var(--accent); }
.download-icon svg { width: 44px; height: 44px; display: block; }

.download-card h3 {
  font-family: var(--font-mono);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--txt-bright);
  margin-bottom: 6px;
}

.download-card .version {
  font-size: 0.88rem;
  font-weight: 500;
  /* tinted to the card's platform, so the meta line ties to its logo */
  color: var(--accent);
  opacity: 0.85;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}

/* status chip — replaces v1's inline style attributes */
.download-card .status {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.status-available {
  color: var(--green);
  background: rgba(0, 255, 170, 0.1);
  border: 1px solid rgba(0, 255, 170, 0.3);
}

.status-beta {
  color: var(--yellow);
  background: rgba(255, 255, 85, 0.09);
  border: 1px solid rgba(255, 255, 85, 0.28);
}

.status-sideload {
  color: var(--magenta);
  background: rgba(255, 85, 255, 0.09);
  border: 1px solid rgba(255, 85, 255, 0.28);
}

.status-version {
  color: var(--yellow);
  background: rgba(255, 255, 85, 0.08);
  border: 1px solid rgba(255, 255, 85, 0.22);
  font-variant-numeric: tabular-nums;
}

.download-card .btn {
  width: 100%;
  margin-top: auto;
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
}

.download-note {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--txt-faint);
  margin-top: 12px;
}

/* --- Lightbox ---------------------------------------------------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 7, 13, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 40px;
}
.lightbox.active { display: flex; }

.lightbox img {
  max-width: 92%;
  max-height: 88vh;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  color: var(--txt-dim);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-mono);
}
.lightbox-close:hover { color: var(--cyan); }

/* --- TAP+ modal -------------------------------------------------- */
.tap-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 7, 13, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.tap-modal.active { display: flex; }

.tap-modal-content {
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 820px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 44px);
  position: relative;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  color: var(--txt);
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.tap-modal-content h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--txt-bright);
  margin-bottom: 8px;
}

.tap-modal-content h3 {
  font-size: 0.86rem;
  font-weight: 600;
  margin: 34px 0 12px;
  padding: 7px 0 7px 13px;
  border-left: 2px solid var(--cyan);
  background: linear-gradient(90deg, rgba(0, 170, 255, 0.09) 0%, transparent 65%);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--cyan);
}
.tap-modal-content h3 small {
  text-transform: none;
  letter-spacing: 0;
  color: var(--txt-faint);
  font-weight: 400;
}

.tap-modal-intro {
  color: var(--txt-dim);
  margin-bottom: 22px;
  font-size: 0.9rem;
}

.tap-modal-content p {
  margin-bottom: 11px;
  color: var(--txt);
}

.tap-modal-content pre {
  background: var(--term-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid rgba(0, 255, 170, 0.3);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  margin-bottom: 14px;
}

.tap-modal-content code {
  font-size: 0.82rem;
  color: var(--txt-bright);
}
.tap-modal-content pre code {
  color: var(--green);
  line-height: 1.75;
}

.tap-modal-content ul {
  padding-left: 20px;
  margin-bottom: 14px;
}
.tap-modal-content li { margin-bottom: 5px; }
.tap-modal-content li::marker { color: var(--cyan); }
.tap-modal-content strong { color: var(--txt-bright); font-weight: 600; }
.tap-modal-content .highlight { color: var(--green); }

.tap-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  color: var(--txt-dim);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-mono);
}
.tap-modal-close:hover { color: var(--cyan); }

/* --- Footer ------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line-hair);
  background: var(--ink-950);
  padding: clamp(40px, 6vw, 64px) var(--gutter);
}

.footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
}

.footer-brand { margin-bottom: 12px; }

.footer-text {
  font-size: 0.90rem;
  color: var(--txt-faint);
  line-height: 1.7;
}

.footer-credits {
  text-align: right;
  font-size: 1rem;
  color: var(--txt-faint);
  line-height: 1.9;
}
.footer-credits b {
  color: var(--txt-dim);
  font-weight: 500;
}

/* The JSONBourne mark, same as on rainwire: Inter, cyan-to-violet, with the
   logo's wire cut through it just below mid-letter. */
.footer-credits .jsonbourne {
  display: inline-block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  background: linear-gradient(90deg, #5fd0ff, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2;
  --wire: repeating-linear-gradient(to bottom, #000 0 .724em, transparent .724em .765em, #000 .765em 1.2em);
  -webkit-mask-image: var(--wire);
  mask-image: var(--wire);
}
/* snap to whole pixels so the cut stays crisp */
@supports (width: round(1.5px, 1px)) {
  .footer-credits .jsonbourne {
    --lh: round(1.2em, 1px);
    /* centre the (rounded) gap on the logo cut's centre, .7445em down */
    --cut: round(calc(.7445em - var(--gap) / 2), 1px);
    --gap: max(1px, round(.041em, 1px));
    line-height: var(--lh);
    --wire: repeating-linear-gradient(to bottom, #000 0 var(--cut), transparent var(--cut) calc(var(--cut) + var(--gap)), #000 calc(var(--cut) + var(--gap)) var(--lh));
  }
}

/* --- Scroll reveal (uses the IntersectionObserver in main.js) ----- */
.js .fade-in {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.55s ease, translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .fade-in.visible {
  opacity: 1;
  translate: none;
}

/* Stagger by column position, so each row sweeps left-to-right and later
   rows don't inherit an ever-growing delay. */
.stagger > .fade-in { transition-delay: 0ms; }

.features-grid.stagger  > .fade-in:nth-child(3n + 2) { transition-delay:  80ms; }
.features-grid.stagger  > .fade-in:nth-child(3n + 3) { transition-delay: 160ms; }

.downloads-grid.stagger > .fade-in:nth-child(5n + 2) { transition-delay:  70ms; }
.downloads-grid.stagger > .fade-in:nth-child(5n + 3) { transition-delay: 140ms; }
.downloads-grid.stagger > .fade-in:nth-child(5n + 4) { transition-delay: 210ms; }
.downloads-grid.stagger > .fade-in:nth-child(5n + 5) { transition-delay: 280ms; }

.tap-gallery.stagger    > .fade-in:nth-child(2n + 2) { transition-delay:  90ms; }
/* --- Responsive -------------------------------------------------- */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
    padding-top: 108px;
  }
  .hero-art { order: -1; }
  .hero-splash { max-width: 400px; }

  .features-grid > .term-card,
  .features-grid > .term-card.w-6,
  .features-grid > .term-card.w-3 { grid-column: span 6; }

  .split,
  .split--reverse,
  .split--media { grid-template-columns: 1fr; }  .split--reverse .prose { order: -1; }

  .downloads-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: rgba(7, 15, 27, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    padding: 18px var(--gutter) 22px;
    gap: 18px;
    border-bottom: 1px solid var(--line-hair);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }

  .features-grid > .term-card,
  .features-grid > .term-card.w-6,
  .features-grid > .term-card.w-3 { grid-column: 1 / -1; }

  .term-card.maximized { max-height: calc(100vh - 80px); }

  .tap-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tap-gallery img:nth-child(n) { grid-column: span 1; }

  .screenshots-grid[data-platform="android"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screenshots-grid[data-platform="windows"] { grid-template-columns: 1fr; }
  .shot-stack .screenshot-card { display: block; }
  .shot-stack .screenshot-card img { object-fit: initial; }

  .downloads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head { grid-template-columns: 1fr; }
  .sec-rule { display: none; }

  .footer-inner { align-items: flex-start; }
  .footer-credits { text-align: left; }
}

@media (max-width: 480px) {
  .hero-buttons { width: 100%; }
  .hero-buttons .btn { flex: 1 1 100%; }
  .downloads-grid { grid-template-columns: 1fr; }
  .hero-spec { flex-direction: column; gap: 2px; }
  .hero-spec dt { width: auto; }
}

/* --- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade-in { opacity: 1; translate: none; transition: none; }
  .platform-group.active .screenshot-card { animation: none; }
  .hero-splash .scanline,
  .glitch-r,
  .glitch-b,
  .term-cursor { animation: none; }
  .glitch-r, .glitch-b { opacity: 0; }
  .matrix-bg { display: none; }
  .term-output { transition: none; }
  .bbs-track { animation: none; }
  .art-col { animation: none; }
  .bbs-strip { overflow-x: auto; }
  .btn:hover,
  .term-card:hover,
  .screenshot-card:hover,
  .download-card:hover,
  .tap-gallery img:hover { transform: none; }
}