/* ============================================================================
   ATLAS — zabcoreio.com

   ⛔ THE PALETTE IS NOT A DESIGN CHOICE. Every colour below is a verbatim copy of
   the shipped app's tokens (android/.../ui/theme/Color.kt, read 2026-09-09), so the
   page and the product are the same object. If Color.kt moves, this moves with it.

   ⚠️ THE TYPE IS a design choice, and the old comment here lied about that. It said
   the type was "lifted from the shipped app." It was not: Type.kt sets WEIGHTS only
   and ships no custom font at all, so the app renders in Compose's default (Roboto).
   The web face was always free. Barlow is the pick because its lineage is American
   gothic signage — highway and instrument lettering, the room this product lives in —
   and it has real condensed widths, so ONE family covers display, data and body
   instead of the three unrelated families that were here (Archivo + IBM Plex ×2).

   Committed single theme on purpose: the app is a night dashboard and there is no
   light variant of it. Every colour is painted explicitly so the page holds on any
   host ground.

   ⭐ NO INLINE style="" ATTRIBUTES ANYWHERE ON THIS SITE. That is what lets the CSP
   say `style-src 'self'` with no 'unsafe-inline'. Anything that looks like it wants
   an inline style gets a class here instead. Do not reintroduce one.
   ========================================================================= */

:root {
  /* --- Color.kt, verbatim ------------------------------------------------ */
  --ground:     #0A0C0F;   /* AtlasBg        */
  --panel:      #13161B;   /* AtlasSurface   */
  --raised:     #1B1F26;   /* AtlasSurfaceHi */
  --amber:      #FF8A3D;   /* AtlasAmber     */
  --amber-dim:  #B35A20;   /* AtlasAmberDim  */
  --take:       #3DDC84;   /* AtlasTake      */
  --pass:       #FF5A5A;   /* AtlasPass      */
  --text:       #EDEFF2;   /* AtlasText      */
  --dim:        #8A9099;   /* AtlasTextDim   */

  /* --- page-only, derived ------------------------------------------------ */
  --dimmer:     #5C636D;
  --rule:       #242A33;
  --rule-soft:  #1A1E25;

  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --data:    "Barlow Semi Condensed", "Roboto Condensed", sans-serif;
  --body:    "Barlow", Roboto, "Segoe UI", system-ui, sans-serif;

  --gut: clamp(20px, 5vw, 64px);
  --max: 1160px;

  /* the take-home meter's axis, so the floor tick and the JS fill agree on a scale */
  --hourly-scale: 50;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The amber wash off the top edge: a dash lit from below at night. One gradient,
   fixed, behind everything — the page's only piece of pure atmosphere. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 560px;
  background: radial-gradient(760px 320px at 74% -14%, rgba(255,138,61,.15), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.005em;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #FFA05E; }

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

.numeric { font-variant-numeric: tabular-nums; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 20px;
  padding: 26px 0 10px;
}
.mark {
  font-family: var(--display); font-weight: 700; font-size: 23px;
  letter-spacing: .1em; color: var(--amber); line-height: 1;
}
/* the app's own SegToggle: pill track, amber fill on the active item, black label */
.seg { display: flex; gap: 2px; padding: 3px; background: var(--panel); border-radius: 999px; margin-left: auto; }
.seg a {
  font-family: var(--data); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  color: var(--dim); text-decoration: none; padding: 6px 15px; border-radius: 999px;
}
.seg a.on { background: var(--amber); color: #000; }
.seg a:hover { color: var(--text); }
.seg a.on:hover { color: #000; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap: clamp(30px, 4.5vw, 68px);
  align-items: start;
  padding: clamp(30px, 5vw, 58px) 0 clamp(40px, 5vw, 64px);
}
.hero h1 {
  font-size: clamp(46px, 6.1vw, 76px);
  line-height: .94;
  max-width: 13ch;
}
.hero .lead {
  color: var(--dim); font-size: 19px; line-height: 1.55;
  max-width: 44ch; margin: 24px 0 0;
}
.hero .lead b { color: var(--text); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  font-family: var(--data); font-weight: 600; font-size: 17px;
  padding: 12px 24px; border-radius: 4px; text-decoration: none;
  border: 1px solid transparent; display: inline-block; line-height: 1.3;
}
.btn-primary { background: var(--amber); color: #000; }
.btn-primary:hover { background: #FFA05E; color: #000; }
.btn-ghost { border-color: var(--rule); color: var(--text); }
.btn-ghost:hover { border-color: var(--amber-dim); color: var(--amber); }

.beta-note {
  font-family: var(--data); font-size: 15px; color: var(--dimmer);
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--rule-soft);
  max-width: 44ch;
}
.beta-note b { color: var(--dim); font-weight: 600; }

/* ── the scorer: the ONE bezel on this page ──────────────────────────────── */
/* Caps labels live in here and nowhere else on the site. Inside an instrument
   they are silkscreen; outside one they are decoration. */
.scorer {
  background: linear-gradient(180deg, var(--panel) 0%, #0E1116 100%);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 28px 64px -28px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.03);
}
.scorer-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--rule);
  background: rgba(255,138,61,.055);
}
.scorer-head .t {
  font-family: var(--data); font-weight: 600; font-size: 13px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--text);
}
.scorer-head .s {
  font-family: var(--data); font-size: 14px; color: var(--dimmer);
  margin-left: auto; font-variant-numeric: tabular-nums;
}

.inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
/* flex column with the slider pushed to the bottom, so a label that wraps on a narrow
   desktop cannot drag one slider out of line with the other two. It did exactly that
   with "Their time estimate" before the label was shortened -- belt and braces. */
.field { background: var(--panel); padding: 14px 16px 18px; display: flex; flex-direction: column; }
.field label {
  display: block; font-family: var(--data); font-size: 12px; font-weight: 600;
  letter-spacing: .13em; color: var(--dim); text-transform: uppercase; margin-bottom: 6px;
}
.field .val {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.field .val .pre { font-size: 21px; color: var(--dim); }
.field .val .post { font-family: var(--data); font-size: 14px; font-weight: 500; color: var(--dim); margin-left: 3px; }
/* fixed width so a dragging thumb can never shove the layout around */
.field .val output { min-width: 4.2ch; display: inline-block; }
.field .val output.narrow { min-width: 3.2ch; }

/* A page whose whole ask is "try it" needs a thumb you can see and hit. */
.field input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin: 14px 0 0; background: transparent; cursor: grab;
  margin-top: auto; padding-top: 14px;
}
.field input[type=range]:active { cursor: grabbing; }
.field input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--raised);
}
.field input[type=range]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--raised);
}
.field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--amber); border: 3px solid var(--ground);
  box-shadow: 0 0 0 1px var(--amber-dim);
}
.field input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber); border: 3px solid var(--ground);
  box-shadow: 0 0 0 1px var(--amber-dim);
}

.readout {
  padding: 24px 22px 22px;
  display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 26px; align-items: center;
}
.gauge-wrap { position: relative; width: 100%; }
.gauge-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Same no-script rule as .fill: the arc is a 96px-radius semicircle, so its length is
   pi*96 = 301.59, and the page's default offer scores 91.83% -> offset 24.6. atlas.js
   MEASURES the real length with getTotalLength() and replaces both on load, which is
   what keeps this honest if the path is ever redrawn. */
#arc { stroke-dasharray: 301.59; stroke-dashoffset: 24.6; }
/* The needle is gone on purpose: the arc already fills to the value, and the needle
   was the thing crossing the number. One accessory removed. */
/* The reading sits in the arc's mouth; the caption is a plain block UNDER the svg.
   It used to be absolutely positioned inside the same box and it landed on the arc's
   left cap. Nothing that cannot collide is worth positioning by hand. */
.gauge { display: flex; flex-direction: column; align-items: center; }
.gauge-num {
  position: absolute; left: 0; right: 0; bottom: 2px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 52px; line-height: .9;
  font-variant-numeric: tabular-nums;
}
.gauge-num output { min-width: 2.6ch; display: inline-block; }
.gauge-num .pct { font-size: 24px; color: var(--dim); }
.gauge-cap {
  margin: 10px 0 0; text-align: center;
  font-family: var(--data); font-size: 12px; font-weight: 600; letter-spacing: .13em;
  color: var(--dim); text-transform: uppercase;
}

.verdict { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.chip {
  font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: .07em;
  padding: 4px 20px 6px; border-radius: 4px; color: #000; line-height: 1.1;
}
.chip.take { background: var(--take); }
.chip.pass { background: var(--pass); }
.why { font-family: var(--data); font-size: 16px; color: var(--dim); line-height: 1.45; }
.why b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.meter { width: 100%; max-width: 300px; }
.meter .lbl {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--data); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 22px;
}
.meter .lbl b {
  font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: 0;
  color: var(--text); text-transform: none; font-variant-numeric: tabular-nums;
}
.track { position: relative; height: 8px; border-radius: 4px; background: var(--raised); }
/* The width/background here are the NO-SCRIPT truth for the page's default offer
   ($19.83 / 8.9 mi / 39 min against 23.3 MPG at $4.24 = $28.02/hr, 56.0% of a $50
   axis, clearing the $20 floor so it is the TAKE colour). atlas.js overwrites both
   on load. If the defaults in the markup change, change these with them -- a
   fallback that disagrees with the numbers printed beside it is worse than none. */
.fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px;
  width: 56.0%; background: var(--take);
  transition: width .22s ease, background .18s ease;
}
/* floor 20 on a 50 axis = 40%. Static, so it stays out of the markup and out of the JS. */
.floormark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text); opacity: .8; left: 40%; }
.floormark::after {
  content: attr(data-l); position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--dim); white-space: nowrap;
}

.breakdown {
  border-top: 1px solid var(--rule); padding: 12px 22px 14px;
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  font-family: var(--data); font-size: 15px; color: var(--dimmer);
}
.breakdown b { font-weight: 500; }
.breakdown i { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.breakdown .note { margin-left: auto; color: var(--dimmer); }

/* ── section frame ───────────────────────────────────────────────────────── */
section { padding: clamp(52px, 7.5vw, 96px) 0; }
section + section { border-top: 1px solid var(--rule-soft); }
.sec-head { max-width: 60ch; margin-bottom: 38px; }
.sec-head h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.0; max-width: 24ch; }
.sec-head p { color: var(--dim); font-size: 18px; margin: 18px 0 0; max-width: 58ch; }
.sec-head p b { color: var(--text); font-weight: 600; }

/* ── proof: the claim and the evidence side by side ──────────────────────── */
.proof-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: end; margin-bottom: 42px; }
.proof-top .sec-head { margin-bottom: 0; }

/* ── what he said ────────────────────────────────────────────────────────── */
.heard {
  border-left: 2px solid var(--amber); padding: 2px 0 2px 20px;
  max-width: 60ch;
}
.heard .k {
  display: block; font-family: var(--data); font-size: 14px; color: var(--dimmer);
  margin-bottom: 4px;
}
.heard q {
  font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums;
}

/* ── the ledger: the proof, in the form the product actually emits ───────── */
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger caption { caption-side: bottom; text-align: left; padding-top: 14px; font-family: var(--data); font-size: 14px; color: var(--dimmer); }
.ledger th, .ledger td { text-align: right; padding: 15px 10px; }
.ledger th:first-child, .ledger td:first-child { text-align: left; padding-left: 0; }
.ledger td:last-child, .ledger th:last-child { padding-right: 0; }
.ledger thead th {
  font-family: var(--data); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  color: var(--dim); padding-bottom: 9px; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.ledger tbody td { border-bottom: 1px solid var(--rule-soft); font-family: var(--display); font-weight: 600; font-size: 25px; color: var(--text); }
.ledger tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.ledger td.what { font-family: var(--body); font-weight: 400; font-size: 16px; color: var(--dim); line-height: 1.35; }
.ledger td.rate { color: var(--amber); }
.ledger td.call { font-family: var(--display); font-weight: 700; letter-spacing: .06em; font-size: 25px; }
.ledger tr.take td.call { color: var(--take); }
.ledger tr.pass td.call { color: var(--pass); }

.punch { margin-top: 30px; font-size: 19px; line-height: 1.55; color: var(--dim); max-width: 60ch; }
.punch b { color: var(--text); font-weight: 600; }

/* ── the clock: minutes off the estimate, one measured shift ─────────────── */
.clock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 62px); align-items: center; }
.clock-grid p { color: var(--dim); font-size: 18px; margin: 18px 0 0; max-width: 50ch; }
.clock-grid p b { color: var(--text); font-weight: 600; }

.slack { border-top: 1px solid var(--rule); }
.slack .row { display: grid; grid-template-columns: 122px minmax(0,1fr) 78px; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.slack .k { font-family: var(--data); font-size: 15px; color: var(--dim); line-height: 1.25; }
.slack .v { font-family: var(--display); font-weight: 700; font-size: 27px; text-align: right; font-variant-numeric: tabular-nums; }
.slack .v .u { font-family: var(--data); font-size: 14px; font-weight: 500; color: var(--dim); }
.slack .bar { position: relative; height: 12px; background: var(--raised); border-radius: 2px; }
/* axis runs −6 … +30 minutes, so zero sits at 6/36 of the width */
.slack .bar::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 16.67%; width: 1px; background: var(--dimmer); }
.slack .bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.row-store .bar i  { left: 16.67%; width: 75.28%; background: var(--pass); }   /* +27.1 */
.row-drops .bar i  { left: 13.34%; width: 3.33%;  background: var(--take); }   /* −1.2  */
.slack-axis { display: flex; justify-content: space-between; font-family: var(--data); font-size: 13px; color: var(--dimmer); padding-top: 10px; }
.slack-note { font-family: var(--data); font-size: 15px; color: var(--dimmer); line-height: 1.5; padding-top: 12px; max-width: 46ch; }

/* ── the phone ───────────────────────────────────────────────────────────── */
.voice-grid { display: grid; grid-template-columns: 296px minmax(0,1fr); gap: clamp(32px, 5vw, 70px); align-items: center; }
.phone { width: 296px; border-radius: 30px; border: 1px solid var(--rule); background: var(--ground); padding: 9px; box-shadow: 0 32px 66px -32px rgba(0,0,0,.95); }
.phone-in { border-radius: 22px; background: var(--ground); overflow: hidden; border: 1px solid #0F1216; }
.ph-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
.ph-mark { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--amber); letter-spacing: .08em; }
.ph-seg { display: flex; gap: 1px; background: var(--panel); border-radius: 999px; padding: 3px; flex: 1; }
.ph-seg span { flex: 1; text-align: center; font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--dim); padding: 4px 0; border-radius: 999px; }
.ph-seg span.on { background: var(--amber); color: #000; }
.ph-gear { width: 22px; height: 22px; display: grid; place-items: center; color: var(--dim); font-size: 13px; }
.ph-body { padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 9px; min-height: 244px; }
.bub { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.bub.me { align-self: flex-end; background: var(--raised); color: var(--text); border-bottom-right-radius: 4px; }
.bub.at { align-self: flex-start; background: rgba(255,138,61,.12); color: var(--text); border: 1px solid rgba(255,138,61,.22); border-bottom-left-radius: 4px; }
.bub .tiny { display: block; font-family: var(--data); font-size: 12px; color: var(--dim); margin-top: 4px; }
.ph-bar { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.ph-input { flex: 1; height: 32px; border-radius: 999px; background: var(--panel); border: 1px solid var(--rule); }
.ph-mic { width: 32px; height: 32px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; color: #000; font-size: 14px; }
.ph-ad { border-top: 1px solid var(--rule); padding: 7px 0; text-align: center; font-family: var(--data); font-size: 11px; letter-spacing: .14em; color: var(--dimmer); background: var(--panel); }

.said { display: flex; flex-direction: column; gap: 20px; }
.said h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.04; max-width: 16ch; }
.said p { color: var(--dim); margin: 0; max-width: 52ch; }
.said p b { color: var(--text); font-weight: 600; }

/* ── tiers: two columns split by a rule, not two boxes ───────────────────── */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); }
.tier { padding: 30px 0 8px; display: flex; flex-direction: column; }
.tier + .tier { border-left: 1px solid var(--rule); padding-left: clamp(26px, 3.4vw, 48px); }
.tier { padding-right: clamp(26px, 3.4vw, 48px); }
.tier h3 { font-size: 31px; line-height: 1; }
.tier .tag { font-family: var(--data); font-size: 15px; color: var(--dim); margin-top: 6px; }
.tier-pro .tag { color: var(--amber); }
.tier ul { list-style: none; padding: 0; margin: 24px 0 26px; display: flex; flex-direction: column; gap: 15px; }
.tier li { display: grid; grid-template-columns: 13px minmax(0,1fr); gap: 13px; font-size: 16.5px; color: var(--dim); line-height: 1.5; }
.tier li b { color: var(--text); font-weight: 600; }
.tier li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-dim); margin-top: 9px; }
.tier-pro li::before { background: var(--amber); }
.tier li.off { color: var(--dimmer); }
.tier li.off::before { background: none; border: 1px solid var(--dimmer); width: 7px; height: 7px; box-sizing: content-box; }
.tier .foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule-soft); font-family: var(--data); font-size: 15px; color: var(--dimmer); line-height: 1.5; }

/* ── what we deliberately don't hold ─────────────────────────────────────── */
.locks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); border-top: 1px solid var(--rule); padding-top: 30px; }
.lock h3 { font-size: 22px; margin-bottom: 10px; line-height: 1.1; }
.lock p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.55; }
.lock code { font-family: var(--data); font-size: 15px; color: var(--amber); }

/* ── footer ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--rule); padding: 48px 0 64px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: space-between; }
.foot-grid h3 { font-size: 29px; line-height: 1.05; }
.foot-grid p { color: var(--dim); margin: 10px 0 0; max-width: 44ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--data); font-size: 16px; }
.foot-links a { color: var(--dim); text-decoration: none; }
.foot-links a:hover { color: var(--amber); }
.legal { margin-top: 36px; font-family: var(--data); font-size: 14px; color: var(--dimmer); line-height: 1.65; max-width: 96ch; }

/* ── privacy / terms / 404 ───────────────────────────────────────────────── */
.doc { max-width: 760px; padding-bottom: 90px; }
.doc .back { margin: 34px 0 0; font-family: var(--data); font-size: 16px; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); margin-top: 26px; line-height: 1.02; }
.doc h2 { font-size: 26px; margin: 44px 0 12px; }
.doc h3 { font-size: 20px; margin: 30px 0 8px; }
.doc p, .doc li { color: var(--dim); font-size: 17px; line-height: 1.68; }
.doc b { color: var(--text); font-weight: 600; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 9px; }
.doc .updated { font-family: var(--data); font-size: 15px; color: var(--dimmer); margin-top: 10px; }
.doc .quiet { color: var(--dimmer); font-size: 15.5px; }
.doc .spaced { margin-top: 34px; }
.doc code { font-family: var(--data); color: var(--amber); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .hero, .clock-grid, .voice-grid, .tiers, .proof-top { grid-template-columns: 1fr; }
  .proof-top { gap: 30px; align-items: start; }
  .hero { padding-bottom: 56px; }
  .hero h1 { max-width: 16ch; }
  .locks { grid-template-columns: 1fr; gap: 28px; }
  .readout { grid-template-columns: 1fr; gap: 22px; }
  .gauge-wrap { max-width: 236px; }
  .voice-grid .phone { margin: 0 auto; }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; margin-top: 8px; }
  .tier { padding-right: 0; }
  .meter { max-width: 340px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .inputs { grid-template-columns: 1fr; }
  .nav .seg { display: none; }
  .seg { margin-left: auto; }

  /* The ledger becomes label/value pairs rather than a sideways scroll — two rows
     do not deserve a scroll container, and a horizontal scrollbar on a phone is
     where a proof goes to be missed. */
  /* thead stays in the accessibility tree (clipped, not display:none) so the column
     names are still announced; the visible labels come from each cell's data-l. */
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* ⚠️ The table becomes a flex COLUMN, not a block. As a block the <caption> keeps its
     table-caption display and collapses into a one-word-wide strip -- watched it happen.
     Flex + order also puts the caption back after the rows, which caption-side cannot do
     once the table stops being a table. */
  .ledger { display: flex; flex-direction: column; }
  .ledger caption { display: block; order: 2; padding-top: 4px; }
  .ledger tbody { order: 1; }
  .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { border: 1px solid var(--rule); border-radius: 10px; padding: 6px 16px 12px; margin-bottom: 14px; }
  .ledger tbody td { border-bottom: 1px solid var(--rule-soft); padding: 10px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 22px; }
  .ledger tbody td::before {
    content: attr(data-l); font-family: var(--data); font-weight: 500; font-size: 15px;
    color: var(--dim); letter-spacing: 0;
  }
  .ledger td.what { display: block; font-size: 15px; padding-top: 12px; }
  .ledger td.what::before { content: none; }
  .ledger tbody tr:last-child td, .ledger tbody td:last-child { border-bottom: 0; }
  .ledger td.call { padding-top: 12px; }

  .slack .row { grid-template-columns: 96px minmax(0,1fr) 64px; gap: 11px; }
  .slack .v { font-size: 22px; }
  .phone, .voice-grid .phone { width: 100%; max-width: 296px; }
  .chip { font-size: 26px; }
  .gauge-center .big { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  :root { --dim: #B4BAC3; --dimmer: #98A0AA; --rule: #3A424E; }
}