/* ============================================================
   permbits — explained. Same rust-on-oatmeal family as permbits.
   The 3×3 bit grid is the identity; here it moves.
   Scroll-driven animated narrative. Light + dark. WCAG-AA both.
   Pure CSS + inline SVG — no libraries, no network.
   ============================================================ */

:root {
  --bg:        #F4EEE2;
  --card:      #FBF7EE;
  --card2:     #EFE7D6;
  --ink:       #2B2420;
  --ink-soft:  #5C5148;
  --line:      #D9CDB9;
  --rust:      #A83E1C;
  --rust-deep: #8A3115;
  --clay:      #C97B5A;
  --cell-off:  #E8DFCC;
  --cell-off-ink: #6B5C4E;
  --on-rust:   #FFF6EE;
  --term-bg:   #2B2420;
  --term-ink:  #EFE6D6;
  --term-warn: #F2B27A;
  --term-bad:  #FF9C77;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 14px 34px -22px rgba(43, 36, 32, 0.5);
  --cellshadow: inset 0 -4px 0 rgba(0,0,0,0.12), 0 8px 18px -10px rgba(43,36,32,0.35);
  --wrap: 980px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #221B15;
    --card:      #2C231B;
    --card2:     #322820;
    --ink:       #EFE6D6;
    --ink-soft:  #C4B5A0;
    --line:      #4A3B2D;
    --rust:      #E2653A;
    --rust-deep: #EE7B52;
    --clay:      #C97B5A;
    --cell-off:  #382D22;
    --cell-off-ink: #B3A28C;
    --on-rust:   #221B15;
    --term-bg:   #191410;
    --term-ink:  #EFE6D6;
    --term-warn: #F2B27A;
    --term-bad:  #FF9C77;
    --shadow: 0 16px 40px -22px rgba(0,0,0,0.7);
    --cellshadow: inset 0 -4px 0 rgba(0,0,0,0.28), 0 8px 18px -10px rgba(0,0,0,0.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 84% -10%, rgba(168,62,28,0.09), transparent 62%),
    radial-gradient(820px 460px at 4% 4%, rgba(201,123,90,0.07), transparent 55%);
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }
em { font-style: italic; }
strong { font-weight: 800; }
.nowrap { white-space: nowrap; }
code {
  font-family: var(--mono); font-size: 0.9em; font-weight: 700;
  background: var(--card2); padding: 1px 6px; border-radius: 5px; color: var(--rust-deep);
}
@media (prefers-color-scheme: dark) { code { color: var(--rust-deep); } }

a { color: var(--rust); text-underline-offset: 2px; }
a:hover { color: var(--rust-deep); }

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--rust); color: var(--on-rust);
  padding: 10px 16px; border-radius: 10px; font-weight: 700;
  z-index: 50; transition: top 0.18s var(--ease); text-decoration: none;
}
.skip-link:focus { top: 12px; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
  border-radius: 6px;
}

.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;
}

/* tabular numerals wherever digits do work */
.orow__digit, .orow__math, .octrows__mode, .urow__calc, .mode-rot,
.fixdemo__cap, .finalcard__url { font-variant-numeric: tabular-nums; }

/* ============ PROGRESS RAIL ============ */
.rail { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 40; }
.rail__fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--rust-deep), var(--rust));
  transition: width 0.1s linear;
}

/* ============ THE BIT GRID (the motif) ============ */
.bitgrid {
  display: grid;
  grid-template-columns: repeat(3, var(--cellsz, 64px));
  grid-template-rows: repeat(3, var(--cellsz, 64px));
  gap: var(--cellgap, 10px);
  width: max-content;
}
.cell {
  display: grid; place-items: center;
  border-radius: 14px;
  font-family: var(--mono); font-weight: 700;
  font-size: calc(var(--cellsz, 64px) * 0.34);
  background: var(--rust); color: var(--on-rust);
  border: 3px solid var(--rust-deep);
  box-shadow: var(--cellshadow);
}
.cell.off {
  background: var(--cell-off); color: var(--cell-off-ink);
  border: 3px dashed var(--line); box-shadow: none;
}
.cell.sm { border-radius: 10px; }

/* --- hero grid: cells cycle 755 → 644 → 600 → 700 (16s loop) --- */
.hero__demo {
  margin-top: 30px; display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 28px; box-shadow: var(--shadow); width: max-content; max-width: 100%;
}
.bitgrid--hero { --cellsz: 58px; --cellgap: 9px; }

/* waveforms across the four phases (1 = rust/on, 0 = oat/off) */
@keyframes w1001 { /* on, off, off, on */
  0%, 24.99%  { background: var(--rust); color: var(--on-rust); border-color: var(--rust-deep); border-style: solid; box-shadow: var(--cellshadow); }
  25%, 74.99% { background: var(--cell-off); color: var(--cell-off-ink); border-color: var(--line); border-style: dashed; box-shadow: none; }
  75%, 100%   { background: var(--rust); color: var(--on-rust); border-color: var(--rust-deep); border-style: solid; box-shadow: var(--cellshadow); }
}
@keyframes w1100 { /* on, on, off, off */
  0%, 49.99%  { background: var(--rust); color: var(--on-rust); border-color: var(--rust-deep); border-style: solid; box-shadow: var(--cellshadow); }
  50%, 100%   { background: var(--cell-off); color: var(--cell-off-ink); border-color: var(--line); border-style: dashed; box-shadow: none; }
}
@keyframes w1000 { /* on, off, off, off */
  0%, 24.99%  { background: var(--rust); color: var(--on-rust); border-color: var(--rust-deep); border-style: solid; box-shadow: var(--cellshadow); }
  25%, 100%   { background: var(--cell-off); color: var(--cell-off-ink); border-color: var(--line); border-style: dashed; box-shadow: none; }
}
.cell.w1001 { animation: w1001 16s step-end infinite; }
.cell.w1100 { animation: w1100 16s step-end infinite; }
.cell.w1000 { animation: w1000 16s step-end infinite; }
/* static fallback state (reduced motion / print): 755 */
.cell.w1001, .cell.w1100, .cell.w1000 {
  background: var(--rust); color: var(--on-rust);
  border: 3px solid var(--rust-deep); box-shadow: var(--cellshadow);
}

/* rotating mode readout, synced to the same 16s loop */
.mode-rot { position: relative; min-width: 13ch; min-height: 120px; }
.mr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
}
.mr b { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; color: var(--rust); line-height: 1.05; }
.mr i { font-family: var(--mono); font-style: normal; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--ink); }
.mr u {
  text-decoration: none; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-top: 6px;
}
@keyframes slot1 { 0%, 24.99% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes slot2 { 0%, 24.99% { opacity: 0; } 25%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes slot3 { 0%, 49.99% { opacity: 0; } 50%, 74.99% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes slot4 { 0%, 74.99% { opacity: 0; } 75%, 100% { opacity: 1; } }
.mr--1 { animation: slot1 16s step-end infinite; opacity: 1; }
.mr--2 { animation: slot2 16s step-end infinite; }
.mr--3 { animation: slot3 16s step-end infinite; }
.mr--4 { animation: slot4 16s step-end infinite; }

/* ============ HERO ============ */
.hero {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg) 100%);
}
.hero__inner { max-width: var(--wrap); margin: 0 auto; padding: 56px 22px 48px; }
.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.brand__mark { width: 46px; height: 46px; filter: drop-shadow(0 6px 14px rgba(43,36,32,0.3)); }
.brand__word { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.brand__tag {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--on-rust); background: var(--rust); padding: 3px 9px; border-radius: 999px;
}
.eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 14px;
}
.hero__title { font-size: clamp(1.8rem, 5vw, 3rem); max-width: 21ch; }
.hero__lede { margin-top: 18px; max-width: 62ch; font-size: 1.08rem; color: var(--ink-soft); }
.hero__lede strong { color: var(--ink); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.scrollcue {
  margin-top: 40px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
}
.scrollcue svg { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  border-radius: var(--radius-sm); padding: 12px 20px;
  border: 1px solid var(--line); background: var(--card2); color: var(--ink);
  transition: transform 0.08s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--rust); color: var(--on-rust); border-color: var(--rust-deep);
  box-shadow: 0 10px 26px -14px rgba(168,62,28,0.9);
}
.btn--primary:hover { color: var(--on-rust); box-shadow: 0 14px 30px -12px rgba(168,62,28,0.95); }
.btn--ghost:hover { border-color: var(--rust); color: var(--ink); }
.btn--lg { padding: 15px 28px; font-size: 1.05rem; }

/* ============ SCENE SCAFFOLD ============ */
.scene { border-bottom: 1px solid var(--line); }
.scene__inner { max-width: var(--wrap); margin: 0 auto; padding: 68px 22px; }
.scene__kicker {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--rust); font-weight: 800; margin-bottom: 10px;
}
.scene__title { font-size: clamp(1.4rem, 3.4vw, 2.1rem); max-width: 26ch; }
.scene__body { margin-top: 16px; max-width: 66ch; font-size: 1.05rem; color: var(--ink-soft); }
.scene__body strong { color: var(--ink); }
.scene__body--after { margin-top: 22px; }
.scene__note {
  margin-top: 22px; font-size: 0.92rem; color: var(--ink-soft);
  padding: 12px 16px; background: var(--card2); border-radius: var(--radius-sm);
  border-left: 3px solid var(--clay); max-width: 66ch;
}
.scene__note strong, .scene__note em { color: var(--ink); }

/* scroll-reveal: default (motion) hidden state */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ============ 1. TERMINAL ============ */
.term {
  margin-top: 32px; max-width: 640px;
  background: var(--term-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.term__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: rgba(255,255,255,0.05);
}
.term__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--clay); opacity: 0.55; }
.term__title {
  margin-left: 8px; font-family: var(--mono); font-size: 0.72rem;
  color: var(--term-ink); opacity: 0.6; letter-spacing: 0.08em;
}
.term__pre {
  margin: 0; padding: 18px 20px 22px; overflow-x: auto;
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.5; color: var(--term-ink);
}
.t-prompt { color: var(--clay); }
.t-warnband { color: var(--term-warn); font-weight: 700; }
.t-bad { color: var(--term-bad); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.t-em { font-weight: 700; }
.in .term { animation: termIn 0.7s var(--ease) both 0.15s; }
@keyframes termIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ============ 2. OCTAL ROWS ============ */
.octrows { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; max-width: 640px; }
.orow {
  display: grid; grid-template-columns: 5.4em max-content 1fr auto; align-items: center; gap: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px; box-shadow: var(--shadow);
}
.orow__who { font-weight: 800; font-size: 0.95rem; }
.orow__bits { display: flex; gap: 7px; }
.orow .cell.sm { width: 42px; height: 42px; font-size: 1rem; }
.orow__math { font-family: var(--mono); font-size: 1rem; color: var(--ink-soft); text-align: right; }
.orow__digit {
  font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: var(--on-rust);
  background: var(--rust); border-radius: 10px; width: 52px; height: 52px;
  display: grid; place-items: center; box-shadow: var(--cellshadow);
}
#octRows.in .orow { animation: rowIn 0.55s var(--ease) both; animation-delay: calc(var(--i) * 220ms); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
#octRows.in .orow__digit { animation: digitPop 0.5s var(--ease) both; animation-delay: calc(var(--i) * 220ms + 350ms); }
@keyframes digitPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

.octrows__sum {
  margin-top: 20px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono);
}
.octrows__eq { font-size: 1.6rem; color: var(--ink-soft); }
.octrows__mode { font-size: 2.4rem; font-weight: 700; color: var(--rust); }
.octrows__sym { font-size: 1.4rem; letter-spacing: 0.08em; color: var(--ink); }

/* ============ 3. LS -L ANATOMY ============ */
.anatomy {
  margin-top: 34px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.anatomy__str {
  display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap;
  transition: gap 0.9s var(--ease);
}
.in .anatomy__str { gap: 22px; }
.aseg { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aseg__chars {
  font-family: var(--mono); font-size: clamp(1.5rem, 4.4vw, 2.3rem); font-weight: 700;
  letter-spacing: 0.06em; padding: 8px 12px; border-radius: 10px;
  background: var(--card2); border-bottom: 4px solid var(--line);
}
.aseg--type .aseg__chars { border-bottom-color: var(--ink-soft); }
.aseg--u .aseg__chars    { border-bottom-color: var(--rust); color: var(--rust); }
.aseg--g .aseg__chars    { border-bottom-color: var(--clay); color: var(--ink); }
.aseg--o .aseg__chars    { border-bottom-color: var(--rust-deep); }
.aseg--acl .aseg__chars  { border-bottom-color: var(--line); border-bottom-style: dashed; color: var(--ink-soft); }
.aseg__label {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); text-align: center; line-height: 1.35;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i) * 140ms + 500ms);
}
.aseg__label b { color: var(--rust); }
.in .aseg__label { opacity: 1; transform: none; }
.anatomy__verdict { margin-top: 24px; font-size: 0.98rem; color: var(--ink-soft); max-width: 64ch; }
.anatomy__verdict strong { color: var(--ink); }

/* ============ 4. THE FIX ============ */
.fixdemo { margin-top: 34px; display: flex; gap: 38px; align-items: flex-start; flex-wrap: wrap; }
.fixdemo__grid { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.bitgrid--fix { --cellsz: 58px; --cellgap: 9px; }

/* goes-off: starts ON, flips off once revealed */
.cell.goes-off {
  background: var(--rust); color: var(--on-rust);
  border: 3px solid var(--rust-deep); box-shadow: var(--cellshadow);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  transition-delay: calc(var(--d) * 450ms + 900ms);
  position: relative;
}
.in .cell.goes-off, .cell.goes-off.is-off {
  background: var(--cell-off); color: var(--cell-off-ink);
  border-color: var(--line); border-style: dashed; box-shadow: none;
}
.cell.goes-off::after {
  content: "\2715"; position: absolute; right: 4px; top: 2px;
  font-size: 0.62rem; font-weight: 700; color: var(--rust);
  opacity: 0; transition: opacity 0.4s var(--ease);
  transition-delay: calc(var(--d) * 450ms + 1250ms);
}
.in .cell.goes-off::after, .cell.goes-off.is-off::after { opacity: 1; }

.fixdemo__cap { font-family: var(--mono); font-size: 0.95rem; color: var(--ink-soft); }
.fixdemo__cap b { color: var(--ink); font-weight: 700; }
.fixdemo__to b { color: var(--rust); }
.fixdemo__arrow { color: var(--rust); font-weight: 700; }

.fixdemo__cmd { flex: 1 1 340px; max-width: 520px; }
.fixdemo__cmdlabel {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--rust); font-weight: 800; margin-bottom: 10px;
}
.cmd {
  margin: 0 0 14px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--term-bg); color: var(--term-ink);
  font-family: var(--mono); font-size: 0.95rem; overflow-x: auto;
  border-left: 4px solid var(--rust);
}
.fixdemo__why { font-size: 0.95rem; color: var(--ink-soft); }
.fixdemo__why strong { color: var(--ink); }

/* ============ 5. UMASK ============ */
.umaskmath { margin-top: 32px; display: grid; gap: 12px; max-width: 640px; }
.urow {
  display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.urow__kind { font-weight: 800; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em; }
.urow__calc { font-family: var(--mono); font-size: 1.15rem; }
.urow__calc code { font-size: 1em; background: transparent; padding: 0; color: var(--ink); }
.urow__op { color: var(--ink-soft); padding: 0 2px; }
.urow__calc .urow__mask { color: var(--clay); font-weight: 700; }
.urow__calc .urow__res  { color: var(--rust); font-weight: 700; font-size: 1.25em; }
.urow__sym { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.in .urow { animation: rowIn 0.55s var(--ease) both; animation-delay: calc(var(--i) * 260ms); }

/* ============ 6. PRIVACY ============ */
.privacy { margin-top: 30px; display: grid; gap: 26px; }
.privacy__diagram {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 20px; box-shadow: var(--shadow); text-align: center;
}
.node { padding: 18px 12px; border-radius: var(--radius-sm); font-weight: 800; font-size: 0.98rem; }
.node small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; }
.node--app { background: var(--card2); border: 1px solid var(--line); }
.node--net { background: transparent; border: 1px dashed var(--line); color: var(--ink-soft); }
.wall {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 6px; min-width: 96px;
}
.wall__arrow { position: relative; width: 66px; height: 3px; background: var(--rust); border-radius: 2px; }
.wall__arrow::after {
  content: ""; position: absolute; right: -2px; top: -4px;
  border: 6px solid transparent; border-left-color: var(--rust);
}
.in .wall__arrow { animation: pulseBlock 2.4s var(--ease) infinite; }
@keyframes pulseBlock {
  0%, 60%, 100% { opacity: 0.35; transform: scaleX(0.7); transform-origin: left; }
  30% { opacity: 1; transform: scaleX(1); }
}
.wall__x {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  font-size: 1.6rem; font-weight: 900; color: var(--rust-deep);
}
.wall__caption { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); margin-top: 10px; }

/* ============ 7. TOUR ============ */
.tour {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.feat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.in .feat { animation: featIn 0.55s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes featIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.feat__mark {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--rust); color: var(--on-rust); font-size: 1.15rem; font-weight: 800;
  box-shadow: var(--cellshadow);
}
.feat__title { font-size: 1.05rem; margin: 12px 0 6px; }
.feat p { font-size: 0.92rem; color: var(--ink-soft); }
.feat code { font-size: 0.85em; }

/* ============ 8. FINAL CTA ============ */
.scene--cta { border-bottom: none; }
.finalcard {
  margin-top: 10px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 44px 28px 40px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.bitgrid--cta { --cellsz: 34px; --cellgap: 6px; }
.bitgrid--cta .cell { border-radius: 9px; border-width: 2px; }
.in .bitgrid--cta { animation: gridPop 0.6s var(--ease) both 0.15s; }
@keyframes gridPop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
.finalcard__title { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.finalcard__body { max-width: 52ch; color: var(--ink-soft); font-size: 1.05rem; }
.finalcard__url { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }

/* ============ FOOTER ============ */
.foot { border-top: 1px solid var(--line); background: var(--card); }
.foot__inner { max-width: var(--wrap); margin: 0 auto; padding: 28px 22px 44px; }
.foot__disclaimer { font-size: 0.88rem; color: var(--ink-soft); max-width: 84ch; }
.foot__disclaimer strong { color: var(--ink); }
.foot__meta { margin-top: 16px; font-size: 0.8rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.foot__dot { opacity: 0.6; }

/* ============ NO-JS FALLBACK ============ */
/* If scripts never run, nothing can add .in — show every final state. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
  .aseg__label { opacity: 1; transform: none; }
  .anatomy__str { gap: 22px; }
  .cell.goes-off {
    background: var(--cell-off); color: var(--cell-off-ink);
    border-color: var(--line); border-style: dashed; box-shadow: none;
  }
  .cell.goes-off::after { opacity: 1; }
}

/* ============ MOTION: reduced ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  /* everything shown in its final, legible state */
  .reveal { opacity: 1; transform: none; }
  .scrollcue { display: none; }
  /* hero grid + readout freeze on 755 (the cells' static state) */
  .mr { opacity: 0; }
  .mr--1 { opacity: 1; }
  /* fix grid: show the AFTER state (600) with the ✕ markers visible */
  .cell.goes-off {
    background: var(--cell-off); color: var(--cell-off-ink);
    border-color: var(--line); border-style: dashed; box-shadow: none;
  }
  .cell.goes-off::after { opacity: 1; }
  .anatomy__str { gap: 22px; }
  .aseg__label { opacity: 1; transform: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 620px) {
  .privacy__diagram { grid-template-columns: 1fr; gap: 18px; }
  .wall { flex-direction: row; min-width: 0; margin: 0 auto; }
  .wall__arrow { transform: rotate(90deg); }
  .hero__demo { flex-direction: column; align-items: flex-start; gap: 20px; }
  .mode-rot { min-height: 110px; width: 100%; }
  .orow { grid-template-columns: 1fr auto; row-gap: 10px; }
  .orow__who { grid-column: 1 / -1; }
  .orow__math { text-align: left; }
  .urow { grid-template-columns: 1fr; gap: 6px; }
}

/* ============ PRINT ============ */
@media print {
  :root {
    --bg: #fff; --card: #fff; --card2: #f2f2f2; --ink: #000; --ink-soft: #333;
    --line: #999; --rust: #8A3115; --rust-deep: #8A3115; --clay: #8A3115;
    --cell-off: #fff; --cell-off-ink: #333; --on-rust: #fff;
    --term-bg: #fff; --term-ink: #000; --term-warn: #000; --term-bad: #000;
  }
  body::before, .rail, .scrollcue, .hero__cta { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .mr { position: static; opacity: 0; display: none; }
  .mr--1 { opacity: 1; display: flex; }
  .cell.goes-off { background: #fff; color: #333; border-style: dashed; }
  .scene, .term, .anatomy, .feat, .finalcard, .orow, .urow, .privacy__diagram {
    box-shadow: none; break-inside: avoid;
  }
  .term, .cmd { border: 1px solid #999; }
  a { color: #000; text-decoration: underline; }
}