/* ===========================================================================
   AUTHSY — INDUSTRIAL BRUTALISM / TACTICAL TELEMETRY

   The structure is the Tactical Telemetry archetype: compartments divided by
   one-pixel rules, ninety-degree corners everywhere, oversized display type
   against a fixed small monospace register, registration marks, ASCII framing
   and a CRT substrate over the whole page.

   The colour is Authsy's own and unchanged — the same scheme the console and
   this page have always carried. Near-black surfaces, white as the signal
   (what the system wants to mark as live or acted on is simply the brightest
   thing on the page), grey for everything mechanical, spring green for a
   reading that holds and leak orange for one that should not have come back.
   The archetype supplies the geometry; the palette stays ours.

   The rules this sheet does not break:

     · no border-radius anywhere — every corner is 90 degrees
     · no gradients, except the two the archetype prescribes (scanlines and
       halftone dithering), and no soft shadows
     · no translucency on a surface; a panel is an opaque fill and a 1px line
     · compartments, not cards: zones are divided by visible rules, and the
       grid is the layout rather than a thing laid out inside one

   Type is two registers and they never blur into each other. Macro is Chivo
   at 900, uppercase, oversized, tracked in. Micro is Geist Mono at a fixed
   10-13px, uppercase, tracked out. Body sits between them in Geist and is the
   only thing on the page set in sentence case at a comfortable measure.
   =========================================================================== */

/* ============================== 01 · TOKENS ============================== */

:root {
  /* --- substrate --- */
  --sub:        #050505;   /* the page */
  --panel:      #0c0c0c;   /* a compartment */
  --panel-2:    #141414;   /* a compartment inside a compartment */
  --panel-hot:  #1a1a1a;   /* hover */
  --recessed:   #000000;   /* the seam under everything */

  /* --- ink --- */
  --fg:         #ffffff;   /* headings, actions, the signal */
  --fg-dim:     #a1a1a1;   /* body copy, secondary description */
  --fg-faint:   #6b6b6b;   /* tertiary, legends, inactive */

  /* --- rules --- */
  --line:       #1f1f1f;   /* the 1px that divides everything */
  --line-hot:   #2e2e2e;   /* a division that wants noticing */

  /* --- state. One colour, in one role: the orange that means something
         failed or came back that should not have. What holds, passes or is
         live is simply the brightest thing on the page — the same way the
         console reads, and the reason there is no green anywhere. --- */
  --leak:       #ff6a3d;

  /* --- type --- */
  --font-macro: 'Chivo', 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:  'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --fs-macro:   clamp(3.1rem, 10vw, 13rem);
  --fs-mega:    clamp(2.4rem, 6.4vw, 7rem);
  --fs-h2:      clamp(2rem, 4.6vw, 4.4rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.9rem);
  --fs-h4:      clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  --fs-body:    clamp(0.95rem, 0.92rem + 0.18vw, 1.08rem);
  --fs-small:   0.8125rem;
  --fs-micro:   0.6875rem;   /* 11px */
  --fs-nano:    0.625rem;    /* 10px */

  --ls-macro:   -0.055em;
  --ls-mega:    -0.045em;
  --ls-h2:      -0.038em;
  --ls-h3:      -0.026em;
  --ls-mono:    0.09em;
  --ls-mono-wide: 0.18em;

  --lh-macro:   0.84;
  --lh-h2:      0.9;
  --lh-body:    1.55;

  /* --- structure --- */
  --bw:         1px;
  --bw-heavy:   2px;
  --pad:        clamp(1rem, 0.6rem + 1.4vw, 2.25rem);
  --pad-lg:     clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem);
  --bar-h:      50px;
  --max:        1680px;

  /* --- motion: hard cuts, mechanical easing, nothing springs --- */
  --ease-cut:   cubic-bezier(0.2, 0, 0, 1);
  --t-fast:     90ms;
  --t-mid:      160ms;
}

/* ============================== 02 · RESET =============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--sub);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--fg); color: var(--sub); }

:focus-visible {
  outline: var(--bw-heavy) solid var(--fg);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--sub);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  transform: translateY(-110%);
}
.skip-link:focus { transform: translateY(0); }

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

/* ============================ 03 · OVERLAYS ============================== */

/* CRT scanlines and sensor noise. The two gradients the archetype allows,
   both of them texture rather than colour. Pinned above the page, inert to
   the pointer, and switched off entirely for anyone who asked for less. */

.crt {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
}

.crt__lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.028) 0px,
    rgba(255, 255, 255, 0.028) 1px,
    transparent 1px,
    transparent 3px
  );
}

.crt__noise {
  position: absolute;
  inset: -100%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise-drift 700ms steps(4) infinite;
}

@keyframes noise-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

/* A single sweep travelling down the page, the way a slow CRT refresh does. */
.crt__sweep {
  position: absolute;
  left: 0; right: 0;
  height: 128px;
  top: -128px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.022) 0px,
    rgba(255, 255, 255, 0.022) 2px,
    transparent 2px,
    transparent 5px
  );
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .crt__noise, .crt__sweep { display: none; }
}

/* Halftone dithering — the one textural transform applied to imagery. */
.halftone {
  filter: grayscale(1) contrast(1.45) brightness(0.82);
  mix-blend-mode: luminosity;
}

/* ============================= 04 · LAYOUT =============================== */

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

/* A compartment grid.

   Every cell carries its own four sides and is then pulled a pixel into its
   neighbour, so two adjacent rules land on the same pixel and read as one.
   Drawing two sides per cell and letting the container close the frame is a
   pixel cheaper, but it leaves a ragged last row open on two sides — and a
   half-drawn frame is the one thing a system built out of frames cannot
   have. */
.grid {
  display: grid;
}
.grid > * {
  border: var(--bw) solid var(--line);
  margin: 0 calc(var(--bw) * -1) calc(var(--bw) * -1) 0;
  min-width: 0;
}

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

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.cell { padding: var(--pad); background: var(--panel); }
.cell--sub { background: var(--sub); }
.cell--tall { padding-block: var(--pad-lg); }

/* Section framing. Every section announces itself with a designation strip:
   a section number, a title, and the count of whatever it contains. */

.section {
  position: relative;
  border-top: var(--bw) solid var(--line);
}

.section__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px var(--pad);
  border-bottom: var(--bw) solid var(--line);
  background: var(--sub);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.section__bar b {
  font-weight: 500;
  color: var(--fg);
}
.section__bar span:last-child { margin-left: auto; }

.section__head {
  padding: var(--pad-lg) var(--pad);
  border-bottom: var(--bw) solid var(--line);
}
.section__head p {
  max-width: 62ch;
  margin-top: 20px;
  color: var(--fg-dim);
}

/* ============================== 05 · TYPE ================================ */

.macro,
.mega,
.h2 {
  font-family: var(--font-macro);
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
}

.macro {
  font-size: var(--fs-macro);
  line-height: var(--lh-macro);
  letter-spacing: var(--ls-macro);
}

.mega {
  font-size: var(--fs-mega);
  line-height: 0.88;
  letter-spacing: var(--ls-mega);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.h3 {
  font-family: var(--font-macro);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}

.h4 {
  font-family: var(--font-macro);
  font-weight: 900;
  font-size: var(--fs-h4);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.3rem);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 58ch;
}

.dim   { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.leak  { color: var(--leak); }

/* The micro register. Everything mechanical is set in it: labels, keys,
   designations, units, readouts, legends. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.4;
}
.mono--wide { letter-spacing: var(--ls-mono-wide); font-size: var(--fs-nano); }
.mono--sig  { color: var(--fg); }

/* A key: the label above a value. */
.key {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Numbers and measured values. Tabular so columns of them line up. */
.val {
  font-family: var(--font-macro);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

samp, code, kbd, data {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-style: normal;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: var(--bw) solid var(--line-hot);
  background: var(--panel-2);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ASCII framing. A bracket pair that is markup rather than a border. */
.brk::before { content: '[ '; color: var(--fg); }
.brk::after  { content: ' ]'; color: var(--fg); }
.ang::before { content: '< '; color: var(--fg-faint); }
.ang::after  { content: ' >'; color: var(--fg-faint); }

/* Registration marks — corner crosshairs on a compartment. */
.reg { position: relative; }
.reg::before,
.reg::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border: var(--bw) solid var(--fg);
  pointer-events: none;
}
.reg::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.reg::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }

/* A crosshair glyph, drawn rather than typed. */
.cross {
  position: relative;
  display: inline-block;
  width: 11px; height: 11px;
  flex: none;
}
.cross::before,
.cross::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.cross::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.cross::after  { top: 50%; left: 0; right: 0; height: 1px; margin-top: -0.5px; }

/* ============================= 06 · STATUS =============================== */

/* The only green on the page. One indicator, one meaning: live. */
.led {
  display: inline-block;
  width: 7px; height: 7px;
  flex: none;
  background: var(--fg);
  animation: led-pulse 2.4s steps(1) infinite;
}
@keyframes led-pulse {
  0%, 62%  { opacity: 1; }
  63%, 70% { opacity: 0.25; }
  71%      { opacity: 1; }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border: var(--bw) solid var(--line-hot);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.tag--pass { border-color: var(--fg); color: var(--fg); }
.tag--deny { border-color: var(--leak); color: var(--leak); }

/* ============================= 07 · ACTIONS ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: var(--bw-heavy) solid var(--fg);
  background: var(--fg);
  color: var(--sub);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-cut),
              color var(--t-fast) var(--ease-cut),
              border-color var(--t-fast) var(--ease-cut);
}
.btn:hover {
  background: transparent;
  border-color: var(--fg);
  color: var(--fg);
}
.btn:active { transform: translate(1px, 1px); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-hot);
  color: var(--fg);
}
.btn--ghost:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--sub);
}

/* The one action on the page that is filled and stays filled. */
.btn--mark {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--sub);
}
.btn--mark:hover { background: var(--panel-2); color: var(--fg); }

.btn--sm { padding: 8px 14px; font-size: var(--fs-nano); }
.btn--block { width: 100%; justify-content: space-between; }

/* An inline action that reads as a terminal command. */
.cmd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
  border-bottom: var(--bw) solid var(--line-hot);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease-cut),
              border-color var(--t-fast) var(--ease-cut);
}
.cmd:hover { color: var(--fg); border-color: var(--fg); }

/* ============================== 08 · BAR ================================= */

.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--pad);
  padding-inline: var(--pad);
  background: var(--sub);
  border-bottom: var(--bw) solid var(--line);
}

.bar__mark {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.bar__mark svg { height: 15px; width: auto; }

.bar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
}
.bar__nav a {
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
  transition: color var(--t-fast) var(--ease-cut),
              background var(--t-fast) var(--ease-cut);
}
.bar__nav a:hover { color: var(--fg); background: var(--panel-2); }

.bar__right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.bar__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Read position, as a bare 2px rule across the bottom of the bar. */
.bar__scroll {
  position: absolute;
  left: 0; bottom: -1px;
  height: var(--bw-heavy);
  width: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (max-width: 860px) {
  .bar__nav { display: none; }
  .bar__stat { display: none; }
}

/* ============================== 09 · HERO ================================ */

.hero {
  position: relative;
  padding-top: var(--bar-h);
  border-bottom: var(--bw) solid var(--line);
}

.hero__in {
  position: relative;
  padding: clamp(2.5rem, 1rem + 6vw, 6rem) var(--pad) 0;
}

.hero__desig {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 26px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hero__desig .rule-line {
  flex: 1;
  height: var(--bw);
  background: var(--line);
}

.hero__title {
  max-width: 17ch;
}
.hero__title .ln { display: block; }
/* The one word the whole page is about. */
.hero__title em {
  font-style: normal;
  background: var(--fg);
  color: var(--sub);
  padding: 0 0.1em 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: var(--pad-lg);
  /* Stretch, so the plate is as tall as the column beside it rather than a
     card floating at the bottom of one. */
  align-items: stretch;
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
}
@media (max-width: 980px) {
  .hero__body { grid-template-columns: minmax(0, 1fr); gap: var(--pad); }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* The hero readout: four measured facts, in the grid, under the headline. */
.readout .cell { padding: 18px var(--pad); background: var(--sub); }
.readout .val { display: block; margin: 12px 0 6px; font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.9rem); }
.readout p { font-size: var(--fs-micro); color: var(--fg-faint); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }

/* ============================= 10 · TICKER =============================== */

.ticker {
  overflow: hidden;
  border-bottom: var(--bw) solid var(--line);
  background: var(--panel);
  padding-block: 10px;
}
.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline: 26px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}
.ticker__track span::after {
  content: '';
  width: 3px; height: 3px;
  background: var(--fg-faint);
  flex: none;
}

/* ============================== 10b · PLATE ============================== */

/* A technical plate: a framed compartment holding one figure, with the
   designation across the top the way a printed plate carries its caption.

   The figure inside is the ASCII effect, which is a canvas. It gets its own
   frame rather than sitting behind the headline because type over it would
   have needed a soft radial scrim to stay legible, and this system has no
   soft anything. Framed, the contrast problem disappears and the figure
   becomes what it actually is — a reading, presented as one. */

.plate {
  display: flex;
  flex-direction: column;
  border: var(--bw) solid var(--line);
  background: var(--recessed);
  min-height: clamp(300px, 26vw, 400px);
}

.plate__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 9px 16px;
  border-bottom: var(--bw) solid var(--line);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.plate__bar span:last-child { margin-left: auto; }

.plate__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* The canvas the effect mounts. It fills the compartment and never spills:
   a plate whose figure runs past its own frame is not a plate. */
.ascii-effect__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  .plate { min-height: 280px; }
}

/* ============================== 11 · CODE ================================ */

.code {
  background: var(--panel-2);
  padding: 0;
  overflow: hidden;
}
.code__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: var(--bw) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.code__bar span:last-child { margin-left: auto; }
.code pre {
  padding: 20px 16px 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
}
.code .c { color: var(--fg-faint); }
.code .k { color: var(--fg); }
.code .s { color: var(--fg-dim); }
.code .f { color: var(--fg); }

/* ============================= 12 · RULES ================================ */

/* The four row rules, as a rack. */
.rules .cell { padding: 20px var(--pad) 22px; background: var(--panel); }
.rules .cell h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 4px;
}
.rules .cell p { font-size: var(--fs-small); color: var(--fg-dim); line-height: 1.5; }
.rules .cell .key { margin-bottom: 14px; }

/* ============================== 13 · BOARD =============================== */

/* The access review, as the instrument it is: identities down, operations
   across, and what the database actually answered in each intersection. */

.board { overflow-x: auto; }

.board table { min-width: 660px; }

.board th,
.board td {
  border-right: var(--bw) solid var(--line);
  border-bottom: var(--bw) solid var(--line);
  padding: 13px 16px;
  text-align: left;
  vertical-align: middle;
}
.board tr > *:last-child { border-right: 0; }
.board tbody tr:last-child > * { border-bottom: 0; }

.board thead th {
  background: var(--sub);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 400;
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.board tbody th {
  background: var(--panel);
  font-weight: 400;
}
.board tbody th .key { margin-bottom: 3px; }
.board tbody th b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--fg);
  text-transform: none;
}

.board tbody td { background: var(--panel-2); }

.board__cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.board__cell data {
  font-size: var(--fs-micro);
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}

.board__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 13px var(--pad);
  border-top: var(--bw) solid var(--line);
  background: var(--sub);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ============================ 14 · PLATFORM ============================== */

.feat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--pad);
  background: var(--panel);
  transition: background var(--t-mid) var(--ease-cut);
}
.feat:hover { background: var(--panel-hot); }
.feat__top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
}
.feat h3 { margin-top: 2px; }
.feat p { font-size: var(--fs-small); color: var(--fg-dim); line-height: 1.55; }
.feat ul { margin-top: auto; padding-top: 14px; border-top: var(--bw) solid var(--line); }
.feat li {
  display: flex;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding-block: 3px;
}
.feat li::before { content: '—'; color: var(--fg-faint); }
.feat li a { transition: color var(--t-fast) var(--ease-cut); }
.feat li a:hover { color: var(--fg); }

/* A wide compartment that spans two columns of the same grid. */
.span-2 { grid-column: span 2; }
@media (max-width: 560px) { .span-2 { grid-column: span 1; } }

/* ============================= 15 · SPECS ================================ */

.specs tr > * {
  border-bottom: var(--bw) solid var(--line);
  padding: 14px var(--pad);
  text-align: left;
}
.specs tr:last-child > * { border-bottom: 0; }
.specs th {
  width: 34%;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--fg-faint);
  border-right: var(--bw) solid var(--line);
  vertical-align: top;
}
.specs td { background: var(--panel-2); font-size: var(--fs-small); color: var(--fg-dim); }
.specs td b { color: var(--fg); font-weight: 500; }

@media (max-width: 620px) {
  .specs th { width: 42%; }
}

/* ============================= 16 · PLANS ================================ */

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  background: var(--panel);
}
.plan--mark { background: var(--panel-2); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 16px 0 4px;
}
.plan__price .val { font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); }
.plan__price span {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.plan ul {
  margin: 20px 0 24px;
  padding-top: 16px;
  border-top: var(--bw) solid var(--line);
}
.plan li {
  display: flex;
  gap: 9px;
  padding-block: 5px;
  font-size: var(--fs-small);
  color: var(--fg-dim);
}
.plan li::before { content: '+'; color: var(--fg); font-family: var(--font-mono); }
.plan .btn { margin-top: auto; }

/* =============================== 17 · FAQ ================================ */

.faq { background: var(--panel); }
.faq__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 18px;
  padding: var(--pad);
  border-bottom: var(--bw) solid var(--line);
}
.faq__row:last-child { border-bottom: 0; }
.faq__row .key { padding-top: 5px; }
.faq__row h3 { margin-bottom: 10px; }
.faq__row p { font-size: var(--fs-small); color: var(--fg-dim); max-width: 74ch; }
.faq__row p + p { margin-top: 9px; }

/* ============================== 18 · CLOSE =============================== */

.close {
  padding: clamp(3.5rem, 2rem + 7vw, 8rem) var(--pad);
  text-align: center;
  background: var(--sub);
}
.close .macro { margin-inline: auto; max-width: 15ch; }
.close .lede { margin: 26px auto 0; text-align: center; }
.close .hero__actions { justify-content: center; }

/* ============================= 19 · FOOTER =============================== */

.foot { border-top: var(--bw) solid var(--line); background: var(--sub); }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  border-bottom: var(--bw) solid var(--line);
}
@media (max-width: 860px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}

.foot__col {
  padding: var(--pad);
  border-right: var(--bw) solid var(--line);
}
.foot__col:last-child { border-right: 0; }
@media (max-width: 860px) {
  .foot__col { border-bottom: var(--bw) solid var(--line); }
}
.foot__col .key { margin-bottom: 14px; }
.foot__col a {
  display: block;
  padding-block: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--t-fast) var(--ease-cut);
}
.foot__col a:hover { color: var(--fg); }
.foot__col svg { height: 18px; width: auto; margin-bottom: 16px; }
.foot__col p { font-size: var(--fs-small); color: var(--fg-faint); max-width: 34ch; }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 14px var(--pad);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.foot__legal span:last-child { margin-left: auto; }

/* ============================ 20 · REVEALS =============================== */

/* Starting state for anything the script animates in. Set here rather than
   inline so the page is not blank if the script fails to load — the class is
   added by the script itself at boot. */
.js [data-reveal] { opacity: 0; }