/* ============================================================
   MeMachine — the landing page.

   THE WORLD. Every surface is a machine artifact: tractor-fed
   printouts with punched feed holes, terminal readouts, diagnostic
   reports on greenbar stock, itemised receipts with torn edges,
   barcodes, registration marks, timestamps. The machine made all of
   it, and every single thing it printed is about a person.

   THE TYPE SYSTEM IS THE CONCEPT — exactly two voices and a hand:
     MACHINE  IBM Plex Mono. Uppercase, tracked, graphite. It labels,
              counts, stamps and files. It never says anything that
              matters.
     HUMAN    Source Sans 3. Open apertures, warm terminals, calm at
              70px. Every sentence with feeling in it is set in this.
     THE HAND Caveat — the red pen. Margin notes, arrows, the
              underline beneath the sentence nobody else can say.

   COLOUR
     --paper  #F7F4ED  the desk            --ink   #17140F  warm black
     --stock  #FFFDF7  fresh printer stock --pen   #C1301B  felt-tip red
     --amber  #B0802A  machine status      --live  #2F6B3C  a running ad

   WHAT LIVES WHERE
     landing.css      the page: chrome, hero, the settings plate, the
                      station chain, the voice device, the receipt,
                      the legal pages.
     demos/demos.css  the six demo modules, behind the --yfd-* token
                      contract. It re-declares those tokens against
                      the variables below, so this file stays the
                      single source of colour and type for the site.
   ============================================================ */

/* -------------------- self-hosted faces (no CDN) -------------------- */

@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/landing/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/landing/fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/landing/fonts/plexmono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/landing/fonts/sourcesans3-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/landing/fonts/caveat-var.woff2') format('woff2');
}


/* ---------------------------- tokens ---------------------------- */

:root {
  --paper:      #f7f4ed;
  --paper-deep: #efe9db;
  --stock:      #fffdf7;
  --stock-2:    #faf6ea;

  --ink:        #17140f;
  --ink-2:      #3a332a;
  --graphite:   #6e6659;
  --graphite-2: #8c8477;

  --rule:      rgba(23, 20, 15, 0.16);
  --rule-soft: rgba(23, 20, 15, 0.075);

  --pen:      #c1301b;
  --pen-deep: #8f2011;
  --pen-wash: rgba(193, 48, 27, 0.07);

  --amber:      #b0802a;
  --amber-wash: rgba(176, 128, 42, 0.10);

  /* live = green. The pen stays red, and red stays human. */
  --live:      #2f6b3c;
  --live-wash: rgba(47, 107, 60, 0.12);

  --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  --wrap: 1180px;
  --r: 3px;              /* machines do not have rounded corners */
  --shadow-sheet: 0 1px 0 rgba(23,20,15,.05), 0 26px 44px -34px rgba(23,20,15,.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* any class with its own `display` defeats the hidden attribute — this is
   the bug that once made an invisible overlay eat every tap on a record
   button. It stays guarded here. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  background-color: var(--paper);
  /* faint dot-matrix field: the paper remembers being printed on */
  background-image: radial-gradient(rgba(23,20,15,.045) 1px, transparent 1.1px);
  background-size: 6px 6px;
  color: var(--ink-2);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.wrap, .container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.container-narrow { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: 24px; }

::selection { background: var(--pen); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--stock); padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 0; }


/* ------------------------- the two voices ------------------------- */

/* MACHINE */
.eyebrow, .seclabel, .docstrip, .sheet-head, .sheet-foot, .node-n, .node-tag,
.terminal-bar, .tl, .device-top, .device-timer, .device-readout, .device-foot,
.tr-who, .stamp-box, .receipt, .spec, .labor, .chip,
.foot-links, .foot-copy, .specimen, .card-cap, .split-cap,
.topnav, .btn, .receipt-thanks, .ticks, .setting-label, .setting-loc,
.dial, .conn-plate, .anec-m, .dr-row, .dial-note,
.talk-state, .talk-timer, .talk-timer-label, .talk-hint, .talk-caught,
.yours-note-k, .legal-toc, .updated, .contact-card .who {
  font-family: var(--mono);
}

/* HUMAN */
.hero-h1, .hero-sub, .anec-h, .mani-close, .mani-body, .sech2, .sech-sub,
.node-title, .node-sub, .hum-lead, .hum-body,
.closing-h, .closing-sub, .foot-line, .transcript-body,
.lb-v, .tether-text, .talk-caption, .terminal-statement,
.yours-note p, .legal-body p, .legal-body li, .legal-body h2, .legal-body h3 {
  font-family: var(--sans);
}

/* THE HAND */
.hand {
  font-family: var(--hand);
  color: var(--pen);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.05;
}


/* --------------------------- primitives --------------------------- */

.eyebrow, .seclabel, .node-tag, .sheet-head, .sheet-foot, .docstrip {
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 500;
}

/* the printed sheet */
.sheet, .card, .receipt, .terminal, .device {
  position: relative;
  background: var(--stock);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-sheet);
}

/* tractor-feed punched edges */
.sheet-feed::before, .sheet-feed::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 20px;
  background-image: radial-gradient(circle at 10px 11px, var(--paper) 3.1px, rgba(23,20,15,.16) 3.2px, transparent 3.9px);
  background-size: 20px 22px;
  pointer-events: none;
}
.sheet-feed::before { left: 0; border-right: 1px dashed var(--rule-soft); }
.sheet-feed::after  { right: 0; border-left: 1px dashed var(--rule-soft); }
.sheet-feed { padding-inline: 30px; }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.sheet-foot {
  margin-top: 16px; padding-top: 9px; border-top: 1px dashed var(--rule);
  text-transform: none; letter-spacing: .04em; color: var(--graphite-2);
}
.sheet-foot-split { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* the red pen underline */
.penline { position: relative; display: inline-block; }
.pen-stroke {
  position: absolute; left: -1.5%; width: 103%;
  bottom: -.16em; height: .30em; overflow: visible;
}
.pen-stroke path {
  fill: none; stroke: var(--pen); stroke-width: 3.4;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .85s cubic-bezier(.2,.7,.3,1) .25s;
}
.penline-thick .pen-stroke path { stroke-width: 4.2; }
.is-in .pen-stroke path, [data-reveal].is-in .pen-stroke path { stroke-dashoffset: 0; }

/* handwritten margin note + drawn arrow */
.note { display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
.note .arrow { width: 64px; height: 44px; flex: none; overflow: visible; }
.note .arrow path {
  fill: none; stroke: var(--pen); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s ease .35s;
}
.is-in .note .arrow path { stroke-dashoffset: 0; }

/* stamps + marks. `.specimen` is the honesty label: anything on this page
   that could be mistaken for a real customer wears one. */
.specimen {
  position: absolute; top: -8px; right: 4px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--pen); opacity: .55;
  border: 2px solid var(--pen); border-radius: 2px;
  padding: 5px 9px; transform: rotate(-7deg); background: var(--stock);
}
[data-barcode] { display: inline-flex; align-items: flex-end; }
[data-barcode] svg { display: block; fill: var(--ink); }


/* ---------------------------- buttons ---------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 2px; border: 1px solid var(--ink);
  text-decoration: none; cursor: pointer; background: none; color: var(--ink);
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
.btn-ink { background: var(--ink); color: var(--stock); }
.btn-ink:hover { background: var(--pen); border-color: var(--pen); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-line:hover { border-color: var(--ink); background: rgba(23,20,15,.04); }
.btn-lg { padding: 16px 26px; }
.btn-sm { padding: 10px 15px; font-size: 11.5px; }
.btn-xs { padding: 7px 11px; font-size: 10px; letter-spacing: .13em; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-center { justify-content: center; }


/* ---------------------------- topbar ---------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--rule);
  background: rgba(247,244,237,.93); backdrop-filter: blur(6px);
}
.topbar-in { display: flex; align-items: center; gap: 20px; padding-block: 14px; }

/* the split wordmark: the human half is humanist, the machine half is mono. */
.wordmark { text-decoration: none; color: var(--ink); font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.wm-me { font-family: var(--sans); font-weight: 700; }
.wm-machine { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; }
.wm-inline { white-space: nowrap; font-size: .98em; }
.wm-inline .wm-me { font-weight: 700; }

.topnav { display: flex; gap: 22px; margin-left: auto; }
.topnav a {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--graphite); text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--pen); }


/* ------------------------- document strip ------------------------- */

.docstrip {
  display: flex; align-items: center;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-top: 26px;
}
.docstrip-cell {
  padding: 8px 14px; border-right: 1px solid var(--rule);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docstrip-cell:first-child { padding-left: 0; color: var(--ink); font-weight: 600; }
.docstrip-cell:last-child { border-right: 0; margin-left: auto; padding-right: 0; }
.docstrip-bar { display: flex; align-items: center; flex: none; }
.docstrip-stamp { color: var(--pen); }


/* ------------------------------ hero ------------------------------ */

.hero { padding-bottom: 56px; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
  gap: 48px; align-items: start; margin-top: 50px;
}

.hero-h1 {
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: .95;
  letter-spacing: -.032em;
  font-weight: 600;
  color: var(--ink);
  margin-top: 20px;
}
.hero-sub {
  font-size: clamp(17.5px, 1.6vw, 21px); line-height: 1.52;
  color: var(--ink-2); max-width: 34em; margin-top: 26px;
}

/* the spec-callout row */
.ticks {
  list-style: none; margin-top: 44px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule); background: var(--stock);
}
.ticks li {
  padding: 16px 18px; border-right: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.ticks li:last-child { border-right: 0; }
.ticks b {
  font-size: 22px; font-weight: 600; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ticks span { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--graphite-2); }
.ticks li:last-child b { color: var(--pen); }


/* the terminal — the one dark object up top */
.terminal {
  background: var(--ink); border-color: var(--ink); color: #efe8da;
  overflow: hidden; box-shadow: 0 30px 50px -34px rgba(23,20,15,.8);
}
.terminal-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid rgba(239,232,218,.16);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: rgba(239,232,218,.55);
}
.terminal-led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 8px rgba(176,128,42,.9); margin-right: auto;
  animation: blink 2.4s steps(1) infinite;
}
@keyframes blink { 0%,70% { opacity: 1 } 71%,100% { opacity: .28 } }

.terminal-body { padding: 22px 18px 26px; }
.tl { font-size: 12.5px; line-height: 1.85; color: rgba(239,232,218,.82); white-space: pre-wrap; }
.tl-dim { color: rgba(239,232,218,.42); }
.tp { color: var(--amber); }

.terminal-statement {
  font-weight: 600;
  font-size: clamp(20px, 2vw, 25px); line-height: 1.2; letter-spacing: -.02em;
  color: #fffdf7; margin-top: 18px; min-height: 3.6em;
}
.caret {
  display: inline-block; width: .5ch; height: 1em; vertical-align: -.12em;
  background: var(--pen); margin-left: 3px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }


/* ====================== MACHINE SETTINGS PLATE ====================== */
/* The industry picker is not a filter. It is a dial on the machine, and
   every station downstream of it changes when you turn it. */

.setting { background: var(--paper-deep); position: relative; }
.tear {
  height: 7px;
  background-image: radial-gradient(circle at 4.5px 3.5px, var(--paper) 2.4px, transparent 2.5px);
  background-size: 9px 7px;
  border-top: 1px dashed var(--rule-soft); border-bottom: 1px dashed var(--rule-soft);
}
.setting-in { padding-block: 30px 34px; }

.setting-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.setting-label { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--graphite); }
.setting-label::before { content: '\2014\00a0\00a0'; color: var(--pen); }
.setting-loc { font-size: 11px; letter-spacing: .08em; color: var(--graphite-2); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.loc-stamp {
  border: 1.5px solid var(--pen); color: var(--pen); border-radius: 2px;
  padding: 3px 7px; font-size: 9.5px; letter-spacing: .16em; transform: rotate(-1deg);
}
.setting-loc [data-city-full] { color: var(--ink); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.loc-fine { color: var(--graphite-2); text-transform: none; letter-spacing: .02em; }

.dial { border: 1px solid var(--rule); background: var(--stock); padding: 0 16px 14px; border-radius: var(--r); }
.dial-legend {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--graphite-2);
  padding: 0 8px; margin-left: -4px;
}
.dial-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }

.slot {
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  border: 1px solid var(--rule); background: var(--stock-2); border-radius: 2px;
  padding: 11px 12px; cursor: pointer; color: var(--ink-2);
  font-family: var(--mono); transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.slot:hover { border-color: var(--ink); background: var(--stock); }
.slot-n { font-size: 9.5px; letter-spacing: .12em; color: var(--graphite-2); flex: none; }
.slot-l { font-size: 12.5px; letter-spacing: .04em; }
.slot[aria-pressed='true'] {
  background: var(--ink); border-color: var(--ink); color: var(--stock);
  box-shadow: inset 0 0 0 2px var(--stock), inset 0 0 0 3px var(--ink);
}
.slot[aria-pressed='true'] .slot-n { color: var(--amber); }

/* the ninth position. It is not an industry — it is the point. */
.slot-yours { border-style: dashed; border-color: var(--pen); color: var(--pen); background: var(--pen-wash); }
.slot-yours .slot-n { color: var(--pen); }
.slot-yours .slot-l { font-weight: 600; letter-spacing: .1em; }
.slot-yours:hover { background: rgba(193,48,27,.12); border-color: var(--pen); }
.slot-yours[aria-pressed='true'], .slot-yours[aria-expanded='true'] {
  background: var(--pen); border-color: var(--pen); color: var(--stock);
  box-shadow: inset 0 0 0 2px var(--stock), inset 0 0 0 3px var(--pen);
}
.slot-yours[aria-pressed='true'] .slot-n, .slot-yours[aria-expanded='true'] .slot-n { color: var(--stock); }

.dial-read {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule);
  font-size: 11px; letter-spacing: .1em; color: var(--graphite); font-family: var(--mono);
}
.dial-k { color: var(--graphite-2); }
.dial-dots { flex: 1; min-width: 30px; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.dial-v { color: var(--ink); font-weight: 600; text-transform: uppercase; }
.dial-sep { color: var(--rule); }

/* the stamped subline: these eight are examples, not a menu */
.dial-note {
  margin-top: 12px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dial-note em {
  font-style: normal; color: var(--pen); border: 1.5px solid var(--pen); border-radius: 2px;
  padding: 3px 7px; font-size: 9.5px; letter-spacing: .16em; transform: rotate(-.8deg);
}

/* what "+ YOURS" opens */
.yours-note {
  margin-top: 14px; border: 1px dashed var(--pen); background: var(--pen-wash);
  border-radius: var(--r); padding: 18px 20px;
  display: grid; gap: 12px;
}
.yours-note-k { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--pen); }
.yours-note p { font-size: clamp(18px, 2vw, 22px); line-height: 1.36; color: var(--ink); letter-spacing: -.015em; max-width: 46ch; }
.yours-note .cta-row { margin-top: 2px; }


/* ============================ ANECDOTES ============================ */
/* One section, two columns. Left: what the machine cannot do, stacked.
   Right: the division of labour, said plainly. */

.manifesto { background: var(--paper-deep); border-bottom: 1px solid var(--rule-soft); }
.manifesto-in { padding-block: 52px 56px; }

.mani-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 46px; align-items: start;
}

.anecdotes { display: grid; gap: 26px; }

.anec { display: grid; gap: 10px; }
.anec-m {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite);
  background: var(--stock); border: 1px solid var(--rule); border-radius: 2px;
  padding: 6px 11px 6px 6px;
}
.anec-tag {
  background: var(--ink); color: var(--stock); border-radius: 1px;
  padding: 3px 7px; font-size: 9px; letter-spacing: .18em;
}
.anec-h {
  position: relative; padding-left: 66px;
  font-size: clamp(21px, 2.3vw, 29px); line-height: 1.24; letter-spacing: -.022em;
  color: var(--ink); font-weight: 400; max-width: 28ch;
}
.anec-but {
  position: absolute; left: 0; top: -.2em;
  font-family: var(--hand); color: var(--pen); font-weight: 700;
  font-size: 1.55em; line-height: 1; transform: rotate(-6deg);
}

.mani-close-wrap { border-left: 3px solid var(--pen); padding-left: 26px; }
.mani-close {
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.12;
  letter-spacing: -.028em; font-weight: 600; color: var(--ink);
  max-width: 18ch;
}
.mani-body {
  margin-top: 20px; font-size: clamp(17px, 1.7vw, 19.5px); line-height: 1.56;
  color: var(--ink-2); max-width: 44ch;
}
.mani-body + .mani-body { margin-top: 14px; }


/* ---------------------------- sections ---------------------------- */

.section { padding-block: 78px; }
.section-deep { background: var(--paper-deep); border-block: 1px solid var(--rule-soft); }

.sechead { max-width: 46ch; margin-bottom: 40px; }
.sechead-center { max-width: 700px; margin-inline: auto; text-align: center; }
.seclabel { margin-bottom: 14px; }
.seclabel::before { content: '\2014\00a0\00a0'; color: var(--pen); }
.sech2 {
  font-size: clamp(28px, 3.8vw, 48px); line-height: 1.1;
  letter-spacing: -.028em; font-weight: 600; color: var(--ink);
  text-wrap: balance;
}
.sech-sub { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 46ch; }
.sechead-center .sech-sub { margin-inline: auto; }


/* ========================== THE STATION CHAIN ========================== */

.chain { display: block; }
.node { margin-bottom: 0; }

/* the headline lives OUTSIDE the card */
.node-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px; align-items: start; padding-bottom: 22px;
}
.node-n {
  font-size: clamp(38px, 5.4vw, 62px); line-height: .78; font-weight: 600;
  color: var(--pen); letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  padding-top: .06em;
}
.node-title {
  font-size: clamp(25px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.028em;
  font-weight: 600; color: var(--ink); text-wrap: balance;
}
.node-title em { font-style: normal; border-bottom: 3px solid var(--pen); padding-bottom: 1px; }
.node-sub { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.node-tag {
  border: 1px solid var(--rule); border-radius: 2px; background: var(--stock);
  padding: 3px 9px; color: var(--graphite-2); white-space: nowrap;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}

.card { padding: 26px; }
.card-cap { margin-top: 16px; font-size: 11.5px; letter-spacing: .05em; color: var(--graphite-2); }
.card-you { border-color: rgba(193,48,27,.4); }

/* registration marks, bottom corners of every card */
.card::before, .card::after {
  content: ''; position: absolute; width: 13px; height: 13px; pointer-events: none;
  background-image: linear-gradient(var(--pen), var(--pen)), linear-gradient(var(--pen), var(--pen));
  background-size: 13px 1px, 1px 13px; background-repeat: no-repeat;
  background-position: center center, center center; opacity: .45;
}
.card::before { left: -7px; bottom: -7px; }
.card::after  { right: -7px; bottom: -7px; }


/* ------------------------ the node connectors ------------------------ */
/* A paper trail runs out of one station and into the next, stamped with
   what it is carrying. This is what lets the headlines live outside the
   cards without the page falling apart. */

.conn {
  display: flex; align-items: center; gap: 16px;
  height: 104px; margin-left: 30px; position: relative;
}
.conn-rail {
  position: relative; width: 22px; flex: none; align-self: stretch;
  background-image: radial-gradient(circle at 11px 11px, var(--paper) 3.1px, rgba(23,20,15,.18) 3.2px, transparent 3.9px);
  background-size: 22px 22px;
  border-left: 1px dashed var(--rule); border-right: 1px dashed var(--rule);
}
.conn-rail::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 12px; width: 1px;
  translate: -50% 0; background: linear-gradient(var(--rule), var(--pen));
  opacity: .55;
}
.conn-rail::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 8px; height: 8px; translate: -50% 0; rotate: 45deg;
  border-right: 1.6px solid var(--pen); border-bottom: 1.6px solid var(--pen);
}
.conn-plate {
  display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--rule); background: var(--stock); border-radius: 2px;
  padding: 8px 13px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
}
.conn-plate b { color: var(--pen); font-weight: 600; }
.conn-plate i { font-style: normal; color: var(--graphite-2); letter-spacing: .07em; text-transform: none; }


/* ============ STATION 01 — the live producer + the transcript ============ */

.intake { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }

/* ---- the device: the REAL ElevenLabs voice module, in machine dress.
   Markup is driven by landing.js (data-talk-*). Nothing about the session
   logic changed — only the sheet metal around it. ---- */

.device { overflow: hidden; box-shadow: none; }
.device-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: var(--ink); color: rgba(239,232,218,.72);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
}
.device-rec { display: inline-flex; align-items: center; gap: 6px; color: rgba(239,232,218,.5); }
.device-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--graphite); }
[data-state="live"] .device-rec, [data-state="connecting"] .device-rec { color: #efe8da; }
[data-state="live"] .device-rec i { background: var(--pen); animation: blink 1.6s steps(1) infinite; }
[data-state="connecting"] .device-rec i { background: var(--amber); animation: blink .8s steps(1) infinite; }

.device-face { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-bottom: 1px solid var(--rule-soft); }
.device-mic { width: 24px; height: 24px; color: var(--ink); flex: none; }
[data-state="live"] .device-mic { color: var(--pen); }

/* the meter's bar heights are set inline (px) by landing.js */
.talk-meter { display: flex; align-items: flex-end; gap: 4px; height: 56px; flex: 1; overflow: hidden; }
.talk-meter i {
  flex: 1; min-width: 2px; height: 8px; background: var(--ink); opacity: .72;
  transition: height .12s linear;
}
.talk-meter i:nth-child(3n) { background: var(--pen); }
[data-state="idle"] .talk-meter i,
[data-state="unavailable"] .talk-meter i,
[data-state="ended"] .talk-meter i { opacity: .3; }

.talk-timer-wrap { text-align: right; flex: none; min-width: 7ch; }
.talk-timer { font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.talk-timer.warn { color: var(--pen); }
.talk-timer.wrap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.talk-timer-label { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite-2); margin-top: 3px; }

.talk-body { padding: 15px 16px 4px; }
.talk-state {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite);
}
.talk-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--graphite-2); flex: none; }
[data-state="live"] .talk-state { color: var(--pen); }
[data-state="live"] .talk-state .dot { background: var(--pen); animation: blink 1.4s steps(1) infinite; }
[data-state="connecting"] .talk-state .dot { background: var(--amber); animation: blink .7s steps(1) infinite; }
[data-state="unavailable"] .talk-state .dot { background: var(--rule); }

.talk-caption { margin-top: 11px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.talk-actions { display: grid; gap: 8px; margin-top: 15px; }
.talk-hint {
  margin: 12px 16px 0; padding-top: 12px; border-top: 1px dashed var(--rule);
  font-size: 10px; letter-spacing: .07em; color: var(--graphite-2); line-height: 1.7;
}

.talk-caught {
  margin-top: 14px; border: 1px dashed var(--pen); background: var(--pen-wash);
  padding: 12px 14px; border-radius: 2px; font-size: 11px; letter-spacing: .06em;
}
.talk-caught .caught-h { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--pen); margin-bottom: 8px; }
.talk-caught .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 4px; border-bottom: 1px dotted var(--rule-soft); }
.talk-caught .row .k { color: var(--graphite-2); text-transform: uppercase; font-size: 9.5px; letter-spacing: .14em; }
.talk-caught .row .v { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }
.talk-caught .caught-note { margin-top: 9px; font-size: 9.5px; letter-spacing: .07em; color: var(--graphite-2); }

.device-readout { padding: 12px 16px 2px; border-top: 1px solid var(--rule-soft); }
.dr-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; letter-spacing: .07em; color: var(--graphite); padding-block: 5px; }
.dr-row span:last-child { color: var(--ink); font-weight: 600; }
.dr-dots { flex: 1; min-width: 14px; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }

/* ---- the transcript sheet: a SAMPLE, and it says so ---- */

.transcript-col { display: grid; gap: 0; }
.transcript {
  position: relative; padding-block: 0 22px; padding-inline: 30px;
  background: var(--stock); border: 1px solid var(--rule); border-radius: var(--r);
}
.transcript .sheet-head { padding-inline: 0; }
.transcript-body { padding-top: 18px; }
.tr-line {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px;
  font-size: 16.5px; line-height: 1.5; color: var(--ink-2);
  padding-block: 9px; border-bottom: 1px dotted var(--rule-soft);
}
.tr-who { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; color: var(--graphite-2); padding-top: .45em; }
.tr-key { color: var(--ink); font-size: 19px; font-weight: 500; border-bottom: 0; }

/* the arrow points UP-RIGHT, into the highlighted line above it */
.note-key { margin: 2px 0 0 102px; }
.note-key .hand { margin-top: 22px; transform: rotate(-2.5deg); }

/* the thesis, tethered to the artifact it is about */
.tether { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; margin-top: 0; padding-left: 30px; }
.tether-line { position: relative; }
.tether-line::before {
  content: ''; position: absolute; left: 50%; top: -2px; bottom: 50%;
  width: 1.5px; translate: -50% 0; background: var(--pen); opacity: .6;
}
.tether-line::after {
  content: ''; position: absolute; left: 50%; top: 50%; right: -12px;
  height: 1.5px; background: var(--pen); opacity: .6;
}
.tether-text {
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.35; color: var(--ink-2);
  padding-block: 16px 4px;
}
.tether-em { color: var(--ink); font-weight: 600; }


/* ============================== THE BELT ============================== */

.belt { overflow: hidden; background: var(--ink); border-block: 1px solid var(--ink); padding-block: 11px; }
.belt-track {
  display: flex; width: max-content; white-space: nowrap;
  font-family: var(--mono); text-transform: uppercase;
  font-size: 12px; letter-spacing: .13em; color: var(--stock);
  animation: slide 46s linear infinite;
}
.belt-track span { flex: 0 0 auto; padding-right: 52px; }
.belt-track span:nth-child(even) { color: var(--amber); }
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .belt-track { animation: none; } }


/* ---------------------- machine vs person split ---------------------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.split-machine {
  background: var(--stock); border: 1px solid var(--rule); border-right: 0;
  padding: 0 26px 24px; border-radius: var(--r) 0 0 var(--r);
}
.split-machine .sheet-head { padding-inline: 0; }
.spec { padding-top: 16px; }
.spec-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; letter-spacing: .08em; color: var(--graphite); padding-block: 9px; }
.spec-row span:last-child { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.spec-l { flex: 1; min-width: 14px; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.spec-null span:last-child { color: var(--pen); }
.split-cap { margin-top: 18px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--graphite-2); }

.split-human {
  border: 1px solid var(--rule); border-left: 1px dashed var(--rule);
  border-radius: 0 var(--r) var(--r) 0;
  background:
    radial-gradient(circle at 0 8px, var(--paper-deep) 3.4px, transparent 3.5px) left top / 8px 16px repeat-y,
    var(--stock);
  padding: 34px 34px 26px 40px; display: flex;
}
.hum-card { background: none; border: 0; box-shadow: none; padding: 0; }
.hum-lead { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.hum-body { font-size: clamp(19px, 2vw, 23px); line-height: 1.42; color: var(--ink-2); margin-top: 12px; }
.hum-hand { margin-top: 20px; font-size: 28px; transform: rotate(-2deg); }
.hum-flowers { margin-top: 18px; }
.hum-flowers svg { width: 200px; max-width: 100%; height: auto; fill: none; stroke: var(--pen); stroke-width: 1.4; stroke-linecap: round; opacity: .5; }

/* the division-of-labor table */
.labor { width: 100%; border-collapse: collapse; margin-top: 34px; background: var(--stock); border: 1px solid var(--rule); }
.labor-cap {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--graphite-2); padding: 10px 14px; border-bottom: 1px solid var(--rule);
}
.labor td { padding: 12px 14px; border-bottom: 1px dotted var(--rule-soft); vertical-align: baseline; }
.labor tr:last-child td { border-bottom: 0; }
.lb-k { width: 110px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pen); }
.lb-v { font-size: 17px; color: var(--ink); }
.lb-t { width: 130px; text-align: right; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite-2); }
.lb-mach td { background: var(--stock-2); }
.lb-mach .lb-k { color: var(--graphite); }
.lb-mach .lb-v { color: var(--ink-2); }


/* ---------------------------- the receipt ---------------------------- */

.receipt-wrap { max-width: 470px; margin-inline: auto; }
.receipt {
  padding: 30px 30px 26px; border-radius: var(--r) var(--r) 0 0; border-bottom: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(23,20,15,.018) 25px 26px),
    var(--stock);
  font-size: 12px; letter-spacing: .05em; color: var(--graphite);
}
.receipt-zig {
  height: 11px; background: var(--stock);
  filter: drop-shadow(0 1px 0 rgba(23,20,15,.16));
  clip-path: polygon(
    0% 0%,
    2.5% 100%, 5% 0%, 7.5% 100%, 10% 0%, 12.5% 100%, 15% 0%, 17.5% 100%, 20% 0%,
    22.5% 100%, 25% 0%, 27.5% 100%, 30% 0%, 32.5% 100%, 35% 0%, 37.5% 100%, 40% 0%,
    42.5% 100%, 45% 0%, 47.5% 100%, 50% 0%, 52.5% 100%, 55% 0%, 57.5% 100%, 60% 0%,
    62.5% 100%, 65% 0%, 67.5% 100%, 70% 0%, 72.5% 100%, 75% 0%, 77.5% 100%, 80% 0%,
    82.5% 100%, 85% 0%, 87.5% 100%, 90% 0%, 92.5% 100%, 95% 0%, 97.5% 100%, 100% 0%
  );
}
.receipt-head { text-align: center; }
.rc-brand { font-size: 24px; color: var(--ink); }
.rc-sub { margin-top: 8px; font-size: 10.5px; letter-spacing: .18em; color: var(--graphite-2); }
.rc-meta { margin-top: 6px; font-size: 10px; letter-spacing: .12em; color: var(--graphite-2); }
.receipt-rule { border-top: 1px dashed var(--rule); margin-block: 18px; }
.ri { display: flex; align-items: baseline; gap: 7px; padding-block: 6px; }
.ri-q { color: var(--graphite-2); min-width: 3ch; }
.ri-d { color: var(--ink-2); }
.ri-l { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.ri-p { color: var(--graphite-2); }
.receipt-totals { display: grid; gap: 7px; }
.rt { display: flex; justify-content: space-between; letter-spacing: .1em; }
.rt-big { font-size: 17px; font-weight: 600; color: var(--ink); border-top: 2px solid var(--ink); margin-top: 7px; padding-top: 11px; }
.receipt-hand { text-align: center; margin-block: 20px 22px; }
.receipt-hand .hand { transform: rotate(-1.6deg); display: inline-block; font-size: 26px; }
.receipt-fine { margin-top: 14px; font-size: 10px; line-height: 1.7; letter-spacing: .04em; color: var(--graphite-2); text-align: center; }
.receipt-bar { display: flex; justify-content: center; margin-top: 20px; }
.receipt-thanks { text-align: center; margin-top: 12px; font-size: 10px; letter-spacing: .22em; color: var(--graphite-2); }


/* ------------------------------ closing ------------------------------ */

.closing { padding-block: 86px 94px; border-top: 1px solid var(--rule-soft); }
.closing-in { text-align: center; }
.closing-label { display: inline-block; }
.closing-h {
  font-weight: 600;
  font-size: clamp(34px, 6vw, 74px); line-height: 1.02; letter-spacing: -.032em;
  color: var(--ink); margin-top: 12px; text-wrap: balance;
}
.closing-sub { font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-2); margin-top: 22px; max-width: 46ch; margin-inline: auto; }


/* ------------------------------- footer ------------------------------- */

.foot { background: var(--paper-deep); border-top: 1px solid var(--rule); padding-bottom: 44px; }
.docstrip-foot { margin-top: 0; border-top: 0; }
.foot-grid { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding-block: 26px; }
.foot-line { font-size: 16px; color: var(--ink-2); max-width: 36ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.foot-links a { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); text-decoration: none; border-bottom: 1px solid transparent; }
.foot-links a:hover { color: var(--ink); border-bottom-color: var(--pen); }
.foot-copy { font-size: 10.5px; letter-spacing: .1em; color: var(--graphite-2); border-top: 1px dashed var(--rule); padding-top: 18px; }


/* ------------------------------- reveal ------------------------------- */

.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }


/* ============================ LEGAL PAGES ============================ */
/* Same world, quieter: a document the machine filed. */

.legal-header {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  padding-block: 52px 40px;
}
.legal-header h1 {
  font-family: var(--sans); font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04;
  letter-spacing: -.03em; font-weight: 600; color: var(--ink);
}
.legal-header .updated {
  margin-top: 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pen);
}
.legal-header .updated::before { content: '\2014\00a0\00a0'; }

.legal-body { padding-block: 44px 78px; }
.legal-body h2 {
  font-size: clamp(21px, 2.2vw, 27px); line-height: 1.18; letter-spacing: -.022em;
  font-weight: 600; color: var(--ink); margin-top: 42px; margin-bottom: 12px;
}
.legal-body h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 24px; margin-bottom: 8px; }
.legal-body p { font-size: 16.5px; line-height: 1.66; color: var(--ink-2); margin-bottom: 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px 20px; }
.legal-body li { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin-bottom: 8px; }
.legal-body a { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin-bottom: 18px; background: var(--stock); border: 1px solid var(--rule); }
.legal-body th, .legal-body td { padding: 10px 12px; border-bottom: 1px dotted var(--rule-soft); text-align: left; font-size: 14.5px; }
.legal-body th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite-2); }

.legal-toc {
  background: var(--stock); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 18px 22px 20px; margin-bottom: 34px;
}
.legal-toc h4 { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--pen); margin-bottom: 10px; font-weight: 500; }
.legal-toc ol { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 26px; }
.legal-toc li { font-size: 12px; letter-spacing: .04em; line-height: 1.9; margin: 0; color: var(--graphite); }
.legal-toc a { color: var(--graphite); text-decoration: none; }
.legal-toc a:hover { color: var(--pen); }

.contact-card {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border: 1px dashed var(--pen); background: var(--pen-wash);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 18px;
}
.contact-card .who { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pen); }
.contact-card .email { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--pen); }

.deletion-steps { display: grid; gap: 14px; margin-bottom: 26px; }
.deletion-step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--stock); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px;
}
.deletion-step .dn {
  font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--pen);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.deletion-step h3 { margin-top: 0; }
.deletion-step p:last-child { margin-bottom: 0; }


/* ------------------------------ responsive ------------------------------ */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-right { max-width: 640px; }
  .intake { grid-template-columns: minmax(0, 1fr); }
  .mani-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mani-close-wrap { padding-left: 20px; }
}

@media (max-width: 900px) {
  .topnav { display: none; }
  .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticks li:nth-child(2) { border-right: 0; }
  .ticks li:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-machine { border-right: 1px solid var(--rule); border-radius: var(--r) var(--r) 0 0; }
  .split-human {
    border-top: 1px dashed var(--rule); border-left: 1px solid var(--rule);
    border-radius: 0 0 var(--r) var(--r); padding: 30px 26px 24px;
    background:
      radial-gradient(circle at 8px 0, var(--paper-deep) 3.4px, transparent 3.5px) left top / 16px 8px repeat-x,
      var(--stock);
  }
  .node-head { grid-template-columns: auto minmax(0, 1fr); }
  .node-tag { grid-column: 2; justify-self: start; margin-top: 4px; }
  .legal-toc ol { columns: 1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding-block: 54px; }
  .manifesto-in { padding-block: 40px 46px; }
  .closing { padding-block: 60px 68px; }

  .dial-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dial { padding-inline: 12px; }

  .card { padding: 18px; }
  .node-n { font-size: 34px; }
  .node-tag { display: none; }
  .conn { height: 84px; margin-left: 14px; gap: 12px; }
  .conn-plate { font-size: 9.5px; padding: 7px 10px; gap: 6px; }

  .anec-h { padding-left: 0; padding-top: 28px; font-size: clamp(20px, 5.6vw, 26px); }
  .anec-but { top: 0; }

  .sheet-feed, .transcript { padding-inline: 24px; }
  .sheet-feed::before, .sheet-feed::after {
    width: 15px; background-size: 15px 20px;
    background-image: radial-gradient(circle at 7.5px 10px, var(--paper) 2.6px, rgba(23,20,15,.16) 2.7px, transparent 3.3px);
  }

  .tr-line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tr-who { padding-top: 0; }
  .note-key { margin-left: 0; }
  .tether { padding-left: 8px; }

  .docstrip-cell:nth-child(2) { display: none; }
  .specimen { font-size: 9px; padding: 4px 7px; opacity: .45; }

  .lb-k { width: 78px; }
  .lb-t { display: none; }

  .cta-row .btn { flex: 1 1 100%; }
  .receipt { padding: 24px 20px 22px; }
  .hand { font-size: 23px; }
  .foot-grid { flex-direction: column; gap: 18px; }
  .legal-header { padding-block: 38px 30px; }
  .legal-body { padding-block: 32px 58px; }
  .deletion-step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px; }
}

@media (max-width: 400px) {
  .wrap, .container, .container-narrow { padding-inline: 18px; }
  .docstrip-cell { padding-inline: 9px; font-size: 10px; }
  .ticks { grid-template-columns: minmax(0, 1fr); }
  .ticks li { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .ticks li:last-child { border-bottom: 0; }
  .device-face { flex-wrap: wrap; }
}