/* Direction C "On Air" fonts, self-hosted (Inter Tight, JetBrains Mono; OFL licenses in /assets/fonts). */
@font-face{font-family:'Inter Tight';src:url(/assets/fonts/inter-tight-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(/assets/fonts/inter-tight-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(/assets/fonts/inter-tight-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(/assets/fonts/inter-tight-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* Metric-matched fallbacks (measured in Chromium against Arial and Courier New, 2026-10-26): while the web fonts load,
   text takes the same width and line box, so the swap moves nothing (CLS 0). Arial and Courier New ship on Windows and
   macOS. */
@font-face{font-family:'Inter Tight Fallback';src:local('Arial'),local('ArialMT');font-weight:400;size-adjust:95.69%;ascent-override:101.37%;descent-override:25.08%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial'),local('ArialMT');font-weight:500;size-adjust:98.15%;ascent-override:98.83%;descent-override:24.45%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 700;size-adjust:94.08%;ascent-override:103.1%;descent-override:25.51%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono Fallback';src:local('Courier New'),local('CourierNewPSMT');font-weight:400 700;size-adjust:99.98%;ascent-override:102.02%;descent-override:30.01%;line-gap-override:0%}

/* The woven accent (design/landing-flair, founder 2026-10-27): one italic serif phrase per headline. Instrument Serif
   (OFL, LICENSE-InstrumentSerif.txt). Its fallback is Georgia Italic narrowed toward the serif's condensed width. */
@font-face{font-family:'Instrument Serif';src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Serif Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-weight:400;font-style:italic;size-adjust:86%;ascent-override:104%;descent-override:28%;line-gap-override:0%}

/* Copied from app/src/styles/tokens.css (the app and the public site share one design system). */
/* Navy and bone are the steady base. Signal orange is the on-air lamp only: one per screen, never a field. */
:root {
  --bone: #F2F0EB;      /* the field */
  --side: #EEECE6;      /* sidebar, readout columns */
  --panel: #FFFFFF;     /* faceplates, cards */
  --panel-2: #FCFBF9;   /* panel headers and footers */
  --panel-3: #FAF9F6;   /* group rows, quotes */
  --recess: #E9E6DF;    /* wells, meters at rest */
  --rule: #D7D2C7;      /* hairlines, key edges */
  --rule-2: #E7E3DB;    /* inner hairlines */
  --key: #C7C1B4;       /* secondary button edge */
  --meter-off: #DCD8CF;

  --ink: #0F1B33;       /* studio navy: brand, text, primary actions */
  --ink-2: #2C3B5A;     /* secondary text */
  --mute: #525A6B;      /* labels, 6.2:1 on bone */
  --mute-2: #6B7180;    /* placeholders */

  --signal: #FF5A1F;    /* the lamp */
  --screen: #0E1830;    /* readout screens */
  --screen-tx: #F4F2EC;
  --screen-mu: #9FA9BF;

  --sans: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Consolas, monospace;

  --r-panel: 14px;
  --r-btn: 10px;
  --shadow-panel: 0 1px 0 rgba(15, 27, 51, .03), 0 2px 6px -2px rgba(15, 27, 51, .08);
  --focus: 0 0 0 3px rgba(15, 27, 51, .16);
}

/* Copied from app/src/styles/base.css + components.css (direction C primitives), plus site-only helpers. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font: 400 15px/1.45 var(--sans); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100; padding: 12px 16px;
  background: var(--ink); color: #fff; border-radius: 8px; font-weight: 600;
}
.skip:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ---------- type primitives ---------- */
.lbl {
  font: 500 12px/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
.lbl.ink { color: var(--ink); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
}
.ptitle {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--rule-2);
}
.ptitle h2 { font: 600 19px/1.2 var(--sans); letter-spacing: -.02em; }
.pfoot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 22px;
  border-top: 1px solid var(--rule-2); background: var(--panel-2); border-radius: 0 0 var(--r-panel) var(--r-panel);
}

/* ---------- buttons ---------- */
.btn {
  height: 48px; padding: 0 20px; border-radius: var(--r-btn); display: inline-flex; align-items: center;
  justify-content: center; gap: 10px; white-space: nowrap; font: 600 15px var(--sans); letter-spacing: -.005em;
  text-decoration: none; transition: transform .06s ease, box-shadow .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary {
  background: var(--ink); color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(15, 27, 51, .3);
}
.btn-primary:hover:not(:disabled) { background: #18284A; }
.btn-secondary {
  background: #fff; color: var(--ink); border: 1px solid var(--key);
  box-shadow: inset 0 -2px 0 #ECE8E0, 0 1px 1px rgba(15, 27, 51, .05);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--ink-2); }
.btn-quiet {
  height: 44px; padding: 0 4px; display: inline-flex; align-items: center; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #9AA0AB;
}
.btn-quiet:hover { text-decoration-color: var(--ink); }
.btn-sm { height: 44px; padding: 0 16px; border-radius: 9px; }
.btn-block { width: 100%; }

/* ---------- LEDs and the lamp ---------- */
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; display: inline-block; }
.led.off { background: transparent; box-shadow: inset 0 0 0 1.5px #A9A498; }
.led.half { background: linear-gradient(90deg, var(--ink) 50%, #fff 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.led.white { background: #fff; }
.lamp {
  width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block;
  background: radial-gradient(circle at 35% 35%, #FFB08F 0, #FF6A2E 45%, #F04A0C 100%);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .16), 0 0 12px 1px rgba(255, 90, 31, .55);
  animation: lamp 3.2s ease-in-out infinite;
}
@keyframes lamp { 50% { box-shadow: 0 0 0 3px rgba(255, 90, 31, .1), 0 0 7px 0 rgba(255, 90, 31, .35); } }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .field .flabel { font: 600 14px var(--sans); color: var(--ink); }
.fl { display: flex; justify-content: space-between; align-items: center; min-height: 26px; gap: 10px; }
.input {
  width: 100%; height: 48px; border: 1px solid #BDB7AA; border-radius: 9px; background: #fff; padding: 0 14px;
  font: 400 16px var(--sans); color: var(--ink); box-shadow: inset 0 1px 2px rgba(15, 27, 51, .06);
}
.input::placeholder { color: var(--mute-2); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
textarea.input { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
select.input {
  appearance: none; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23525A6B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.hint { font-size: 14px; color: var(--mute); }
.err { font-size: 14px; color: #8A2A14; font-weight: 600; }
.tag {
  font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  background: var(--recess); border-radius: 5px; padding: 4px 7px; white-space: nowrap;
}

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px 0 10px; border-radius: 6px;
  font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--ink); color: var(--ink); background: #fff;
}
.pill.pub { background: var(--ink); color: #fff; }
.pill.draft { border: 1px dashed #8E887B; color: var(--mute); }
.pill .key { width: 10px; height: 10px; border-radius: 2px; background: var(--ink); flex: none; }
.pill.fic { background: repeating-linear-gradient(135deg, #fff 0 5px, #E4E8F0 5px 6.5px); }
.pill.fic .key, .hatch {
  background: repeating-linear-gradient(135deg, var(--ink) 0 1.6px, transparent 1.6px 3.4px);
  box-shadow: inset 0 0 0 1.2px var(--ink);
}
.pill.sm { height: 24px; padding: 0 8px; font-size: 11px; gap: 6px; }
.pill.sm .key { width: 8px; height: 8px; }

/* ---------- meters ---------- */
.hseg { display: flex; gap: 3px; }
.hseg i { flex: 1; height: 100%; border-radius: 1.5px; background: var(--ink); }
.hseg i.o { background: var(--meter-off); }
.hseg i.h { background: linear-gradient(90deg, var(--ink) 50%, var(--meter-off) 50%); }
.vmeter { display: flex; flex-direction: column-reverse; gap: 1px; width: 22px; height: 112px; }
.vmeter i { flex: 1; border-radius: 1px; background: #D9D4CA; }
.vmeter i.l { background: var(--ink); }

/* ---------- label-maker tape ---------- */
.tape {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 3px; max-width: 100%;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), #13213D;
  color: #F4F2EC; font: 600 15px var(--mono); letter-spacing: .02em; transform: rotate(-.8deg);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 255, 255, .18); overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 3px 6px -2px rgba(15, 27, 51, .45);
}

/* ---------- logo ---------- */
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.wordmark { font: 600 22px var(--sans); letter-spacing: -.03em; }

/* ---------- switch (segmented, tactile) ---------- */
.switch {
  display: inline-flex; padding: 4px; border-radius: 12px; background: var(--recess);
  box-shadow: inset 0 1px 3px rgba(15, 27, 51, .18), inset 0 0 0 1px #D3CEC3;
}
.switch button {
  height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-radius: 8px;
  font: 600 14px var(--sans); color: var(--mute);
}
.switch button[aria-pressed="true"], .switch button[aria-checked="true"] {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 0 #fff inset, 0 2px 0 #CFC9BC, 0 3px 6px -1px rgba(15, 27, 51, .25);
}

/* ---------- covers ---------- */
.cover { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 27, 51, .12); flex: none; background: var(--recess); }
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- checked plate (seal of record) ---------- */
.plate {
  background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; padding: 16px;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(15, 27, 51, .35), 0 2px 6px -2px rgba(15, 27, 51, .15);
}
.plate .top { display: flex; gap: 14px; align-items: center; }
.plate h4 { font: 700 15px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.plate .std { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.plate .read { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; border-top: 1px solid var(--rule); }
.plate .read > div { padding-top: 10px; }
.plate .read > div + div { border-left: 1px solid var(--rule); padding-left: 12px; }
.plate .read .v { font: 600 15px var(--mono); margin-top: 3px; }
.chkline { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px var(--mono); }

/* ---------- readout screen ---------- */
.screen {
  background: var(--screen); border-radius: 14px; padding: 6px 20px; color: var(--screen-tx);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6), 0 0 0 1px #0A1124, 0 1px 0 #fff;
}
.screen > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(233, 230, 221, .12);
}
.screen > div:last-child { border-bottom: 0; }
.screen dt { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--screen-mu); }
.screen dd { font: 600 14px var(--mono); letter-spacing: .03em; text-align: right; color: var(--screen-tx); text-transform: uppercase; overflow-wrap: anywhere; }
.screen dd.later { color: var(--screen-mu); }

/* ---------- radio + choice cards ---------- */
.radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #9C968A; background: #fff; flex: none; }
.radio.on { box-shadow: inset 0 0 0 1.5px var(--ink); background: radial-gradient(circle, var(--ink) 0 5.5px, #fff 6px); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice {
  text-align: left; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--key);
  box-shadow: inset 0 -3px 0 #EFEBE3; min-height: 150px; display: flex; flex-direction: column;
}
.choice:hover { border-color: var(--ink-2); }
.choice[aria-checked="true"] { border: 2px solid var(--ink); padding: 19px; box-shadow: inset 0 -3px 0 #EFEBE3, 0 3px 0 #C9C2B4; }
.choice .ct { display: flex; align-items: center; justify-content: space-between; }
.choice h3 { font: 600 24px var(--sans); letter-spacing: -.03em; margin: 16px 0 6px; }
.choice p { font-size: 15.5px; color: var(--ink-2); line-height: 1.4; }
.choice .out { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.choice .out .hseg { height: 12px; width: 96px; gap: 2px; }
.swatch { width: 38px; height: 38px; border-radius: 8px; background: var(--ink); }
.swatch.hatch { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 720px) { .choices { grid-template-columns: 1fr; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px;
  background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(15, 27, 51, .6);
}
/* ---------- fixes: tap targets and wrapping ---------- */
.nw { white-space: nowrap; }
.switch button { height: auto; min-height: 44px; }
.l-short { display: none; }
@media (max-width: 640px) {
  .l-long { display: none; }
  .l-short { display: inline; }
}
.tape { overflow-wrap: normal; flex-wrap: wrap; }
.tape .tape-slug { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tape.reserved { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), #4A5468; }
@media (max-width: 640px) { .tape { font-size: 13.5px; padding: 8px 12px; } }

/* The public site's header, fact-check bar and footer (direction C). Loaded on the new pages (onair.css) AND around the
   Verify and network pages (site.css with SITE_C), so every rule is namespaced "oa-" and uses literal colors, not the
   page's custom properties (the Registry stylesheet defines its own --ink, --rule ...). */
.oa-wrap { max-width: 1200px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-left)) 0 max(24px, env(safe-area-inset-right)); box-sizing: border-box; }
@media (max-width: 640px) { .oa-wrap { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } }

.oa-skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 12px 16px; background: #0F1B33; color: #fff; border-radius: 8px; font: 600 15px "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; }
.oa-skip:focus { left: 8px; }

/* ---------- top bar ---------- */
.oa-top { position: sticky; top: 0; z-index: 40; background: rgba(242, 240, 235, .94); border-bottom: 1px solid #D7D2C7;
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); font-family: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; }
.oa-top-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.oa-lockup { display: inline-flex; align-items: center; gap: 11px; color: #0F1B33; text-decoration: none; flex: none; min-height: 44px; }
.oa-mark { display: block; flex: none; }
.oa-word { font: 600 21px/1 "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; letter-spacing: -.03em; color: #0F1B33; }
.oa-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.oa-nav a, .oa-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px; color: #2C3B5A;
  font: 500 15px "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.oa-nav a:hover, .oa-signin:hover { color: #0F1B33; background: rgba(15, 27, 51, .05); }
.oa-nav a[aria-current="page"] { color: #0F1B33; font-weight: 600; box-shadow: inset 0 -2px 0 #0F1B33; border-radius: 0; }
.oa-nav a.oa-quiet { color: #525A6B; font-size: 14px; margin-left: auto; }
.oa-nav a.oa-quiet[aria-current="page"] { color: #0F1B33; }
.oa-cta { display: flex; align-items: center; gap: 6px; flex: none; }
.oa-top a:focus-visible, .oa-foot a:focus-visible, .oa-menu summary:focus-visible { outline: 2px solid #0F1B33; outline-offset: 2px; border-radius: 8px; }

.oa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 10px;
  font: 600 15px "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.oa-btn-primary { background: #0F1B33; color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(15, 27, 51, .3); }
.oa-btn-primary:hover { background: #18284A; }
.oa-btn-sm { height: 44px; padding: 0 16px; border-radius: 9px; }

/* ---------- menu (phones and small tablets) ---------- */
.oa-menu { display: none; position: relative; }
.oa-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 9px;
  cursor: pointer; color: #0F1B33; font: 600 15px "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; border: 1px solid #C7C1B4; background: #fff; box-sizing: border-box; }
.oa-menu summary::-webkit-details-marker { display: none; }
.oa-burger { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.oa-burger i { display: block; height: 2px; border-radius: 2px; background: #0F1B33; transition: transform .15s ease, opacity .15s ease; }
.oa-menu[open] .oa-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.oa-menu[open] .oa-burger i:nth-child(2) { opacity: 0; }
.oa-menu[open] .oa-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.oa-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 36px)); display: flex; flex-direction: column; gap: 2px;
  padding: 10px; background: #fff; border: 1px solid #D7D2C7; border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(15, 27, 51, .45), 0 2px 6px rgba(15, 27, 51, .08); z-index: 50; }
.oa-menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; color: #0F1B33; text-decoration: none; font: 600 16px "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; }
.oa-menu-panel a:hover { background: #F2F0EB; }
.oa-menu-panel a.oa-quiet { color: #525A6B; font-weight: 500; font-size: 15px; border-top: 1px solid #E7E3DB; border-radius: 0; margin-top: 4px; padding-top: 4px; }
.oa-menu-panel a[aria-current="page"] { background: #F2F0EB; }
.oa-menu-panel .oa-btn { margin-top: 8px; justify-content: center; }

@media (max-width: 1020px) {
  .oa-nav, .oa-signin { display: none; }
  .oa-menu { display: block; }
  .oa-cta { margin-left: auto; }
  .oa-top-in { gap: 10px; height: 64px; }
}
/* Phones: logo, "Start your podcast" and the menu button must fit one row (the label is longer than it used to be). */
@media (max-width: 480px) {
  .oa-top-in { gap: 8px; }
  .oa-lockup { gap: 8px; }
  .oa-lockup .oa-mark { width: 30px; height: 30px; }
  .oa-word { font-size: 19px; }
  .oa-menu-word { display: none; }
  .oa-cta .oa-btn-sm { padding: 0 12px; font-size: 14.5px; }
}
@media (max-width: 374px) { .oa-top .oa-lockup .oa-word { display: none; } }

/* ---------- footer ---------- */
.oa-foot { margin-top: 0; background: #0F1B33; color: #C9CFDC; font-family: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); }
.oa-foot .oa-lockup, .oa-foot .oa-word { color: #F4F2EC; }
.oa-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.oa-foot-brand p { margin: 14px 0 0; font-size: 15px; line-height: 1.5; max-width: 340px; color: #C9CFDC; }
.oa-foot-brand .oa-foot-mono { font: 500 12px/1.5 "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #9FA9BF; }
.oa-foot-col h2 { margin: 6px 0 10px; font: 500 12px/1.2 "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #9FA9BF; }
.oa-foot-col ul { list-style: none; margin: 0; padding: 0; }
.oa-foot-col a { display: inline-flex; align-items: center; min-height: 44px; color: #F4F2EC; text-decoration: none; font-size: 15px; }
.oa-foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.oa-foot-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(233, 230, 221, .16); font-size: 14px; color: #9FA9BF; }
.oa-foot-legal p { margin: 0; }
.oa-foot a:focus-visible { outline-color: #F4F2EC; }
@media (max-width: 900px) { .oa-foot-grid { grid-template-columns: 1fr 1fr; } .oa-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .oa-foot-grid { gap: 22px 16px; } .oa-foot-col a { min-height: 44px; } }
/* the woven label under the brand line (design/landing-flair) */
.oa-foot-woven { display: inline-flex; align-items: center; gap: 10px; position: relative; margin: 18px 0 0 !important; padding: 9px 14px; border-radius: 6px; background: #16223F;
  font: 500 12px/1 "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace !important; letter-spacing: .16em; text-transform: uppercase; color: #F4F2EC !important; }
.oa-foot-woven::before { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(244, 242, 236, .3); border-radius: 4px; pointer-events: none; }

/* Public site pages in direction C "On Air" (src/site/pages.js). Mobile first; the app's primitives live in
   components.css. One orange lamp per screen (the hero's ON AIR), never a field. */
body.oa { font-size: 16px; line-height: 1.5; }
main { display: block; }
.mute { color: var(--mute); }
.small { font-size: 13.5px; }
.lbl.inv { color: var(--screen-mu); }
.hint.inv { color: var(--screen-mu); margin-top: 14px; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }

/* ---------- buttons on the site ---------- */
.btn-light { background: #F4F2EC; color: var(--ink); box-shadow: inset 0 -2px 0 #D7D2C7, 0 1px 2px rgba(0, 0, 0, .3); }
.btn-light:hover { background: #fff; }
.play .i-pause { display: none; }
.play.playing .i-play { display: none; }
.play.playing .i-pause { display: inline; }
.bigplay .i-pause { display: none; }
.bigplay.playing .i-play { display: none; }
.bigplay.playing .i-pause { display: inline; }

/* ---------- hero ---------- */
.hero { padding: 40px 0 56px; }
.hero-in { display: grid; gap: 36px; }
.hero h1 { font: 600 40px/1.04 var(--sans); letter-spacing: -.035em; margin: 14px 0 16px; }
.hero-sub { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 600px; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-acts .btn { flex: 1 1 200px; }
.hero-note { margin-top: 16px; font-size: 15px; color: var(--ink-2); letter-spacing: .01em; }
@media (min-width: 720px) {
  .hero h1 { font-size: 52px; }
  .hero-acts .btn { flex: 0 0 auto; }
}
@media (min-width: 1080px) {
  .hero { padding: 64px 0 80px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) 540px; gap: 64px; align-items: center; }
  .hero h1 { font-size: 60px; line-height: 1.02; }
  .hero-sub { font-size: 19px; }
}

/* ---------- the device (preset bank) ---------- */
.device { padding: 18px; border-radius: 22px; background: linear-gradient(#FBFAF7, #F5F3EE); border: 1px solid #D2CCBF;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #fff, 0 18px 40px -18px rgba(15, 27, 51, .35), 0 2px 4px rgba(15, 27, 51, .08); }
.dev-head { display: grid; grid-template-columns: 1fr; gap: 14px; }
.display { background: var(--screen); border-radius: 10px; padding: 14px 16px; color: #E9E6DD; font-family: var(--mono); min-width: 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 0 0 1px #0A1124, 0 1px 0 #fff; }
.display .l1 { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; letter-spacing: .1em; color: var(--screen-mu); }
.display .l2 { font-size: 19px; font-weight: 600; letter-spacing: .02em; margin-top: 8px; color: #F4F2EC; text-transform: uppercase; overflow-wrap: anywhere; }
.display .l3 { font-size: 12.5px; letter-spacing: .06em; margin-top: 6px; color: #C9CFDC; }
.display .onair { display: inline-flex; align-items: center; gap: 8px; color: #FFD9C9; white-space: nowrap; }
.display .onair .lamp { width: 8px; height: 8px; }
.grille { display: none; border-radius: 10px; background: radial-gradient(circle, #B9B3A6 1.6px, transparent 2.1px) 0 0/9px 9px, #EEEBE4; box-shadow: inset 0 1px 3px rgba(15, 27, 51, .18); }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.pkey { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pkey .cap { display: block; padding: 5px; border-radius: 11px; background: #fff; border: 1px solid #CDC6B8; text-decoration: none;
  box-shadow: inset 0 -3px 0 #E7E2D8, 0 3px 0 #CBC4B6, 0 5px 8px -3px rgba(15, 27, 51, .25); transition: transform .06s ease, box-shadow .06s ease; }
.pkey .cap:hover { border-color: var(--ink-2); }
.pkey.down .cap { transform: translateY(3px); border-color: var(--ink); box-shadow: inset 0 -1px 0 #E7E2D8, 0 0 0 #CBC4B6, 0 1px 2px rgba(15, 27, 51, .2); }
.pkey .cover { display: block; aspect-ratio: 1 / 1; border-radius: 6px; }
.pkey .cap2 { display: flex; align-items: center; gap: 6px; padding: 0 2px; min-width: 0; }
.pkey .cap2 .lbl { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hatch.mini { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dev-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #DDD8CE; min-width: 0; }
.dev-foot .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-foot .btn { flex: none; }
@media (min-width: 560px) {
  .device { padding: 22px; }
  .dev-head { grid-template-columns: 1fr 112px; gap: 16px; }
  .grille { display: block; }
  .presets { gap: 14px; margin-top: 18px; }
  .pkey .cap { padding: 7px; border-radius: 12px; }
  .pkey .cap2 .lbl { font-size: 11.5px; }
  .display .l2 { font-size: 22px; }
}

/* ---------- sections ---------- */
.sec { padding: 56px 0; }
.sec.tight { padding-top: 8px; }
.sec + .sec { border-top: 1px solid var(--rule-2); }
.sec-head { max-width: 760px; margin-bottom: 28px; }
.sec-head h2, .two h2, .trust h2, .guarantee h2 { font: 600 30px/1.1 var(--sans); letter-spacing: -.03em; margin: 10px 0 12px; }
.sec-lead { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 640px; }
.sec-head.row { max-width: none; display: grid; gap: 8px; }
.sec-more { margin-top: 22px; }
.two { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .sec { padding: 80px 0; }
  .sec-head h2, .two h2, .trust h2, .guarantee h2 { font-size: 40px; }
  .sec-head.row { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
  .sec-head.row .sec-lead { justify-self: end; }
  .two { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
}
.page-head { padding: 48px 0 36px; }
.page-head h1 { font: 600 40px/1.04 var(--sans); letter-spacing: -.035em; margin: 12px 0 14px; max-width: 900px; }
@media (min-width: 900px) { .page-head { padding: 72px 0 44px; } .page-head h1 { font-size: 56px; } }

/* ---------- steps ---------- */
.steps { display: grid; gap: 14px; counter-reset: none; }
.step { padding: 18px 18px 22px; display: flex; flex-direction: column; }
.step-n { font: 600 13px var(--mono); color: var(--mute); letter-spacing: .08em; }
.step h3 { font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; margin: 16px 0 8px; }
.step p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.art { margin-top: 14px; min-height: 76px; border-radius: 10px; background: var(--panel-3); border: 1px solid var(--rule-2); padding: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fake-input { flex: 1 1 100%; height: 40px; border: 1px solid #BDB7AA; border-radius: 8px; background: #fff; display: flex; align-items: center; padding: 0 12px; font: 500 14px var(--mono); color: var(--ink); }
.art-note { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 9px; background: #fff; border: 1px solid var(--key); font: 600 15px var(--sans); }
.chip.on { border: 2px solid var(--ink); }
.chip .radio { width: 18px; height: 18px; }
.chip .radio.on { background: radial-gradient(circle, var(--ink) 0 4.5px, #fff 5px); }
.art-day { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.art-day span { height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; border: 1px solid var(--rule); font: 600 13px var(--mono); color: var(--mute); }
.art-day span.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.art-make { flex-direction: column; align-items: flex-start; gap: 10px; }
.art-meter .hseg { height: 14px; width: 100%; }
.art-meter { width: 100%; }
.art-make .mono { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- trust ---------- */
.sec-trust { background: var(--side); }
.trust { display: grid; gap: 32px; }
.ticks { display: grid; gap: 10px; margin-top: 20px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; color: var(--ink); }
.ticks svg { flex: none; margin-top: 1px; color: var(--ink); }
.ticks.big li { font-size: 17px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); margin: 0; }
.ticks.big { gap: 0; margin-top: 0; }
.trust-card { display: grid; gap: 16px; align-content: start; }
.plate .top h4 { margin: 0; }
.plate .std { margin-top: 4px; }
.plate-meter { margin-top: 14px; }
.plate-meter .hseg { height: 12px; gap: 2px; }
.plate-note { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.claims { display: grid; gap: 10px; }
.claims li { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
.claims p { font-size: 15.5px; line-height: 1.45; margin: 6px 0 8px; }
.claims .src { font-size: 12.5px; color: var(--mute); }
@media (min-width: 900px) { .trust { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

/* ---------- sample cards ---------- */
.samples { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pcard { padding: 12px; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start; scroll-margin-top: 90px; }
.pcard .cover { grid-row: 1 / span 4; display: block; aspect-ratio: 1 / 1; }
.pcard .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.pcard .meta .lbl { font-size: 11px; }
.pcard h3 { font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pcard .ep { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.35; }
.pcard .foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule-2); }
.pcard .foot .mono { color: var(--ink-2); }
@media (min-width: 640px) {
  .samples { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .samples { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .pcard { display: flex; flex-direction: column; }
  .pcard .cover { width: 100%; }
  .pcard .meta { margin: 14px 2px 8px; }
  .pcard h3, .pcard .ep { margin-left: 2px; margin-right: 2px; }
  .pcard .ep { min-height: 40px; }
  .pcard .foot { margin-top: auto; padding-top: 12px; width: 100%; }
  .pcard .ep { margin-bottom: 12px; }
}

/* ---------- prices ---------- */
.price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 4px; }
.price .amt { font: 600 52px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price .per { font-size: 16px; color: var(--mute); }
.price-alt { font: 500 15px var(--mono); color: var(--ink-2); }
.pm-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fine { font-size: 15px; color: var(--ink-2); margin-top: 12px; } /* price and guarantee lines: the 15px body minimum (BRIEF.md) */
.price-home { display: grid; gap: 14px; }
.price-main { padding: 24px; }
.price-main .ticks { margin: 18px 0 22px; }
.price-side { display: grid; gap: 12px; align-content: start; }
.ps { padding: 18px 20px; }
.ps p { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.ps .ps-amt { font-size: 16px; color: var(--ink); margin-top: 6px; }
.ps .ps-amt b { font: 600 24px var(--sans); letter-spacing: -.02em; }
.price-side .btn-quiet { justify-self: start; }
@media (min-width: 900px) { .price-home { grid-template-columns: 7fr 5fr; gap: 18px; } .price-main { padding: 32px; } .price .amt { font-size: 64px; } }

.iv { position: absolute; opacity: 0; pointer-events: none; }
.iv-switch { margin-bottom: 18px; }
.iv-switch label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 8px; font: 600 14.5px var(--sans); color: var(--mute); cursor: pointer; }
.iv-switch .save { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--recess); color: var(--ink-2); padding: 3px 6px; border-radius: 5px; }
#iv-month:checked ~ .iv-switch label[for="iv-month"], #iv-year:checked ~ .iv-switch label[for="iv-year"] {
  background: #fff; color: var(--ink); box-shadow: 0 1px 0 #fff inset, 0 2px 0 #CFC9BC, 0 3px 6px -1px rgba(15, 27, 51, .25); }
#iv-month:focus-visible ~ .iv-switch label[for="iv-month"], #iv-year:focus-visible ~ .iv-switch label[for="iv-year"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.price-grid .y { display: none; }
#iv-year:checked ~ .price-grid .y { display: flex; }
#iv-year:checked ~ .price-grid p.fine.y { display: block; } /* only the fine print: p.price.y stays a flex row (the gap is the space before "a year") */
#iv-year:checked ~ .price-grid .m { display: none; }
.price-grid p.fine.y { display: none; }
.price-grid { display: grid; gap: 14px; }
.pc { padding: 24px; display: flex; flex-direction: column; }
.pc .pc-d { font-size: 15.5px; color: var(--ink-2); margin: 10px 0 18px; }
.pc .btn { margin-top: auto; }
.pc-main { border: 2px solid var(--ink); box-shadow: 0 3px 0 #C9C2B4; }
.pc .lamp { width: 9px; height: 9px; }
@media (min-width: 900px) { .price-grid { grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; } }
.ledger { margin-top: 18px; padding: 6px 22px; }
.ledger-h { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--rule-2); font-size: 16px; }
.lrow:last-child { border-bottom: 0; }
.lrow .mono { font-size: 14.5px; color: var(--ink); }

.guarantee { padding: 24px; display: grid; gap: 18px; align-items: center; }
.guarantee h2 { margin-top: 0; }
.guarantee p { font-size: 17px; color: var(--ink-2); max-width: 720px; }
.guarantee a { font-weight: 600; }
.g-seal { width: 104px; height: 104px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px rgba(15, 27, 51, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.g-seal span { font: 600 34px var(--mono); }
.g-seal small { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; color: var(--mute); }
@media (min-width: 720px) { .guarantee { grid-template-columns: auto 1fr; padding: 32px; gap: 28px; } }

.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; font: 600 17px/1.3 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 0 18px; font-size: 16px; color: var(--ink-2); max-width: 680px; }

/* ---------- call to action band ---------- */
.cta-sec { border-top: 0 !important; padding-top: 24px; }
.cta-band { background: var(--screen); color: var(--screen-tx); border-radius: 18px; padding: 28px 24px; display: grid; gap: 22px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 0 0 1px #0A1124; }
.cta-band h2 { color: #F4F2EC; font: 600 30px/1.1 var(--sans); letter-spacing: -.03em; margin: 8px 0 10px; }
.cta-band p { color: #C9CFDC; font-size: 16.5px; max-width: 620px; }
.cta-acts .btn { width: 100%; }
@media (min-width: 820px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; padding: 40px 44px; } .cta-band h2 { font-size: 38px; } .cta-acts .btn { width: auto; } }

/* ---------- how it works: stage console ---------- */
.console { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0; overflow: hidden; }
.console .ch { padding: 18px 16px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 10px; }
.console .ch.cur { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--ink); }
.vm { display: flex; flex-direction: column-reverse; gap: 2px; width: 22px; height: 70px; }
.vm i { flex: 1; border-radius: 1px; background: #D9D4CA; }
.vm i.l { background: var(--ink); }
.ch-d { font-size: 15px; color: var(--ink-2); line-height: 1.4; }
@media (min-width: 900px) { .console { grid-template-columns: repeat(6, 1fr); } .console .ch { border-bottom: 0; } .console .ch:last-child { border-right: 0; } .vm { height: 96px; } }
.choices { margin-top: 4px; }
.gets { display: grid; gap: 14px; }
.get { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.get p { font-size: 15.5px; color: var(--ink-2); }
.get .quote { font: 500 16px/1.4 var(--sans); color: var(--ink); background: var(--panel-3); border-left: 3px solid var(--ink); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.get .tape { align-self: flex-start; font-size: 13.5px; }
@media (min-width: 900px) { .gets { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---------- /start player ---------- */
.player .display { padding: 18px 18px 16px; }
.player-row { display: none; align-items: center; gap: 14px; margin-top: 16px; }
.js .player-row { display: flex; }
.bigplay { flex: none; }
.prog { flex: 1; height: 14px; gap: 2px; min-width: 0; }
.native { display: block; width: 100%; margin-top: 14px; }
.js .native { display: none; }
.meterwrap { flex: 1; min-width: 0; }
.meterwrap .hseg { height: 12px; gap: 2px; }
.player .dev-foot .mono { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 480px) { .player .dev-foot { flex-wrap: wrap; } .player .dev-foot .meterwrap { order: 3; flex-basis: 100%; } }

/* ---------- the now-playing strip (sample players) ---------- */
.np { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--screen); color: #F4F2EC;
  box-shadow: 0 18px 40px -12px rgba(15, 27, 51, .6), 0 0 0 1px #0A1124; font-family: var(--mono); }
.np[hidden] { display: none; }
.np .np-t { flex: 1; min-width: 0; }
.np .np-t b { display: block; font: 600 13px var(--mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.np .np-t span { display: block; font-size: 11.5px; color: var(--screen-mu); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.np button { min-width: 44px; min-height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #F4F2EC; background: rgba(255, 255, 255, .08); }
.np button:hover { background: rgba(255, 255, 255, .16); }
.np .play .i-pause { display: none; }
.np .play.playing .i-play { display: none; }
.np .play.playing .i-pause { display: inline; }
.np .hseg { width: 90px; height: 10px; gap: 2px; }
.np .hseg i { background: #F4F2EC; }
.np .hseg i.o { background: #34405C; }
.np button:focus-visible { outline: 2px solid #F4F2EC; }
@media (max-width: 420px) { .np .hseg { display: none; } }

/* Single-column grids on phones: a column never grows past the screen because of one long word or a nowrap line. */
.hero-in, .two, .trust, .price-home, .price-grid, .gets, .steps, .samples { grid-template-columns: minmax(0, 1fr); }
.hero-in > *, .two > *, .trust > *, .price-home > * { min-width: 0; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .two { grid-template-columns: 5fr 7fr; } .trust { grid-template-columns: 1fr 1fr; } .price-home { grid-template-columns: 7fr 5fr; }
  .price-grid { grid-template-columns: 1.25fr 1fr 1fr; } .gets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .samples { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero-in { grid-template-columns: minmax(0, 1fr) 540px; } }

/* The card after the samples: your show could be next. */
.pcard.you { background: var(--side); border-style: dashed; border-color: #BDB6A8; box-shadow: none; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px; }
.pcard.you h3 { font-size: 20px; }
.pcard.you p { font-size: 15px; color: var(--ink-2); margin-top: 8px; }

.pk-w { display: none; }
@media (min-width: 560px) { .pk-w { display: inline; } }
.price-main .pc-d { margin: 14px 0 20px; font-size: 15.5px; color: var(--ink-2); }
.get p.tape { color: #F4F2EC; }

/* ---------- hero: the on-air card (one real cover, its live claim readout) ---------- */
.oac-in { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.oac-cover { display: block; border-radius: 12px; overflow: hidden; background: #fff; padding: 5px; border: 1px solid #CDC6B8; align-self: start;
  box-shadow: inset 0 -3px 0 #E7E2D8, 0 3px 0 #CBC4B6, 0 5px 8px -3px rgba(15, 27, 51, .25); }
.oac-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 7px; }
.oac-d { display: flex; flex-direction: column; }
.oac-d .l2 { font-size: 16px; }
.oac-d .l3 { text-transform: none; letter-spacing: .01em; font-size: 12.5px; }
.oac-read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 14px; }
.oac-n { font: 600 26px/1 var(--mono); color: #F4F2EC; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.oac-u { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--screen-mu); }
.oac-m { margin-top: 10px; }
.oac-m .hseg { height: 10px; gap: 2px; }
.oac-m .hseg i { background: #F4F2EC; }
.oac-m .hseg i.o { background: #34405C; }
.oac-foot { flex-wrap: wrap; gap: 6px 14px; }
.oac-foot .lbl { font-size: 11.5px; }
.oac-fs { margin-left: auto; }
@media (min-width: 560px) {
  .oac-in { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
  .oac-d .l2 { font-size: 20px; }
  .oac-d .l3 { font-size: 14px; }
  .oac-n { font-size: 38px; }
  .oac-m .hseg { height: 12px; }
}
@media (min-width: 1080px) { .oac-in { grid-template-columns: 220px minmax(0, 1fr); } }

/* ---------- steps: then, every week ---------- */
.weekly { margin-top: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; background: var(--panel-3); }
.weekly p { font-size: 16.5px; color: var(--ink-2); line-height: 1.45; }
.weekly b { color: var(--ink); font-weight: 600; }
.wk-lamp { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--screen); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55); }
.wk-lamp .lamp { width: 10px; height: 10px; background: #F4F2EC; box-shadow: 0 0 0 4px rgba(244, 242, 236, .14); }
.art-sponsor { flex-direction: column; align-items: flex-start; gap: 10px; }
.art-sponsor .spq { font: 500 14px/1.35 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--ink); border-radius: 0 8px 8px 0; padding: 8px 10px; }

/* ---------- what a show does for the business; the standard ---------- */
.gains { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.gain { padding: 20px 20px 22px; }
.gain h3 { font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; margin: 14px 0 8px; }
.gain p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
@media (min-width: 640px) { .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .gains { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.trust-line { margin-top: 22px; font: 600 18px/1.4 var(--sans); color: var(--ink); max-width: 640px; letter-spacing: -.01em; }
.trust-copy .sec-more { margin-top: 14px; }
.sec-more.links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.check-steps .step h3 { margin-top: 12px; }

/* ---------- Trust page: the small fact-check section ---------- */
.fc-box { padding: 22px; display: grid; gap: 18px; align-items: center; background: var(--panel-3); box-shadow: none; }
.fc-box h2 { font: 600 24px/1.15 var(--sans); letter-spacing: -.02em; margin: 8px 0 8px; }
.fc-box p { font-size: 16px; color: var(--ink-2); max-width: 640px; }
.fc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
@media (min-width: 900px) { .fc-box { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 32px; gap: 40px; } }
.fc-note { margin-top: 18px; }
.fc-note a { color: var(--ink); font-weight: 600; }
.sec-lead + .sec-lead { margin-top: 12px; }
.fc-box p.lbl, .cta-band p.lbl { font-size: 12px; max-width: none; }

/* The home page and /for/law-firms (src/site/home.js; design/landing/CALL-RESULT.md). Mobile first, 390 is first
   class. Body copy 15px and up; mono labels follow .lbl. Targets 44px. Numbers tabular. One orange lamp per screen
   (the console's ON AIR). Motion belongs to the woven thread (woven.css, founder 2026-10-27): it always shows the
   work, plays once, and reduced motion leaves everything still and finished. */

/* ---------- hero ---------- */
.hx .hero-copy h1 { max-width: 15ch; }
.hx .hero-acts .btn svg { flex: none; }
@media (min-width: 1080px) {
  .hx .hero-in { grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; align-items: start; }
  .hx .hero-in { align-items: center; }
  .hx h1 { font-size: 64px; line-height: 1.0; }
}

.hx-cap { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 520px; }
.hx-cap .lbl { display: block; margin-bottom: 6px; }

/* ---------- the On Air console ---------- */
.cx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px; scroll-margin-top: 96px; }
.cx > div + div { border-top: 1px solid #DDD8CE; margin-top: 16px; padding-top: 16px; }
.cx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; min-width: 0; }
.cx-h .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-now-in { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.cx-cover { display: block; align-self: start; padding: 4px; border-radius: 11px; background: #fff; border: 1px solid #CDC6B8;
  box-shadow: inset 0 -3px 0 #E7E2D8, 0 3px 0 #CBC4B6, 0 5px 8px -3px rgba(15, 27, 51, .25); }
.cx-cover img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 7px; }
.cx-d { display: flex; flex-direction: column; justify-content: space-between; }
.cx-d .l2 { font-size: 16px; line-height: 1.25; }
.cx-clock { font: 600 15px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #F4F2EC; margin-top: 10px; }
.cx-audio { display: block; width: 100%; margin-top: 14px; }
.js .cx-audio { display: none; }

/* The fact check is a seam along the episode (design/landing-flair): every claim is a stitch at the second it is said,
   a straight stitch when checked as written, a cross stitch when fixed before air. At rest the seam is sewn (a finished
   record). Playing, the needle rides the playhead: sewn behind it, pencil marks ahead. Every stitch is a 44px target
   and still opens its claim; between the stitches the seam is the seek bar (an invisible range on top). */
.cx-claims { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
.cx-seamrow { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px; }
.js .cx-seamrow { grid-template-columns: 52px minmax(0, 1fr); }
.cx-play { display: none; flex: none; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; background: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -6px rgba(15, 27, 51, .7); transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .2s; }
.js .cx-play { display: inline-flex; }
.cx-play:hover { background: #18284A; transform: scale(1.05); }
.cx-play:active { transform: scale(.96); }
.cx-play .i-pause { display: none; }
.cx-play.playing .i-play { display: none; }
.cx-play.playing .i-pause { display: inline; }
.cx-seam { position: relative; height: 48px; --p: 1; }
.cx.live .cx-seam { --p: inherit; }
.cx-seam::before, .cx-seam::after { content: ""; position: absolute; left: 0; top: 23px; height: 2px; }
.cx-seam::before { right: 0; background: repeating-linear-gradient(90deg, var(--key) 0 2px, transparent 2px 6px); }
.cx-seam::after { width: calc(var(--p) * 100%); background: repeating-linear-gradient(90deg, rgba(15, 27, 51, .55) 0 7px, transparent 7px 12px); transition: width .3s linear; }
.cx-seek { display: none; position: absolute; left: 0; top: 2px; width: 100%; height: 44px; margin: 0; opacity: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.js .cx-seek { display: block; }
.cx-seam:has(.cx-seek:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.cx-tiles { position: absolute; inset: 0; pointer-events: none; }
.cx-tiles li { position: absolute; top: 2px; width: 0; }
.tile { position: relative; display: block; width: 14px; height: 44px; margin-left: -7px; border-radius: 5px; pointer-events: auto; }
.tile::before, .tile.c::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.5px; height: 17px; margin: -8.5px 0 0 -1.25px; border-radius: 2px; background: var(--ink); transition: background .25s ease; }
.tile.c::before, .tile.c::after { height: 15px; margin-top: -7.5px; transform: rotate(45deg); }
.tile.c::after { transform: rotate(-45deg); }
.tile:hover { background: rgba(15, 27, 51, .07); }
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cx.live .tile::before, .cx.live .tile.c::after { background: var(--key); }
.cx.live .tile.on::before, .cx.live .tile.on.c::after { background: var(--ink); animation: wv-pull .5s cubic-bezier(.34, 1.7, .5, 1); }
@keyframes wv-pull { from { scale: 1.8; } to { scale: 1; } }
.tile.now, .tile[aria-current] { background: rgba(15, 27, 51, .09); box-shadow: inset 0 0 0 1px rgba(15, 27, 51, .14); }
.cx-needle { display: none; position: absolute; left: min(calc(var(--p) * 100%), calc(100% - 22px)); top: 4px; margin-left: -4px; line-height: 0; pointer-events: none; transition: left .3s linear; }
.js .cx-needle { display: block; }
.cx-track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 4px; color: var(--mute); font: 500 15px/1 var(--mono); letter-spacing: .04em; }
.js .cx-track { margin-left: 66px; }
.cx-track i { display: block; height: 1px; background: var(--rule-2); }
.cx-line { margin-top: 14px; font-size: 15.5px; color: var(--ink); }
.cx-line b { font-weight: 600; }
.cx-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.cx-key span { display: inline-flex; align-items: center; gap: 8px; }
.cx-key .cx-key-p { display: none; }
.cx.live .cx-key .cx-key-p { display: inline-flex; }
.tile-k { display: inline-block; width: 2.5px; height: 15px; border-radius: 2px; background: var(--ink); }
.tile-k.c { width: 12px; height: 12px; background: linear-gradient(45deg, transparent 44%, var(--ink) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--ink) 44% 56%, transparent 56%); }
.tile-k.p { width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--key) 0 2px, transparent 2px 6px); }
/* the ledger keeps its height from the first paint: following the voice never moves the page (CLS 0) */
.cx-ledger { margin-top: 14px; padding: 12px 14px; height: 192px; overflow: hidden; border-radius: 10px; background: var(--panel-3); border: 1px solid var(--rule-2); }
.cx-idle { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.cx-hint { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.js .cx-hint { display: block; }
.cx-hint { display: none; }
.cx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cx-meta .tag { font-size: 12px; background: #fff; border: 1px solid var(--rule); }
.cx-meta .tag-c { border-color: var(--ink); color: var(--ink); }
.cx-claim { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-src { margin-top: 4px; font-size: 15px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-acts { display: flex; flex-wrap: wrap; gap: 0 18px; }
.cx-acts .btn-quiet { font-size: 15px; }
.cx-schedule { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.cx-schedule-mark { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(15, 27, 51, .09); }
.cx-schedule b { display: block; font: 600 17px/1.2 var(--sans); color: var(--ink); }
.cx-schedule p { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
@media (min-width: 560px) {
  .cx { padding: 22px; }
  .cx-now-in { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
  .cx-d .l2 { font-size: 20px; }
  .cx-ledger { height: 172px; }
}

/* ---------- the record ---------- */
.sec-record { background: var(--side); }
.rec { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.rec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--rule-2); }
.rec-count, .rec-caught { padding: 20px; margin: 0; }
.rec-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-nums > div { padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.rec-nums > div:nth-child(odd) { padding-right: 14px; }
.rec-nums > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--rule-2); }
.rec-nums dt { font-size: 15px; color: var(--ink-2); line-height: 1.3; }
.rec-nums dd { margin: 6px 0 0; font: 600 40px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.rec-nums dd span { font-size: 18px; letter-spacing: 0; color: var(--mute); }
.rec-ep { margin-top: 14px; display: grid; gap: 2px; font-size: 15px; color: var(--ink-2); }
.rec-ep b { color: var(--ink); font-weight: 600; }
.rec-as { margin-top: 16px; }
.rec-claim { margin: 8px 0 0; padding: 0 0 0 16px; border-left: 3px solid var(--ink); font: 500 19px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.rec-caught figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.rec-caught figcaption p { margin-top: 6px; font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.rec-caught .rec-src { font-size: 15px; color: var(--mute); }
.rec-fu { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.rec-fu p { font-size: 16px; color: var(--ink-2); max-width: 760px; }
.rec-fu b { color: var(--ink); font-weight: 600; }
.ways { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ways .btn { flex: 1 1 260px; }
@media (min-width: 720px) { .ways .btn { flex: 0 0 auto; } }
@media (min-width: 900px) {
  .rec { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 18px; }
  .rec-count, .rec-caught { padding: 26px 28px; }
  .rec-nums dd { font-size: 52px; }
  .rec-claim { font-size: 21px; }
}

/* ---------- for firms, how it works ---------- */
.gain h3:first-child { margin-top: 0; }
.hw { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.hw li { position: relative; padding: 0 0 26px 30px; border-left: 2px solid var(--ink); margin-left: 6px; }
.hw li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hw-led { position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bone); box-shadow: inset 0 0 0 2px var(--ink); }
.hw li:nth-child(3) .hw-led { background: var(--ink); }
.hw h3 { font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; }
.hw p { margin-top: 6px; font-size: 16px; color: var(--ink-2); line-height: 1.5; max-width: 420px; }
@media (min-width: 900px) {
  .hw { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hw li { border-left: 0; border-top: 2px solid var(--ink); margin: 0; padding: 26px 24px 0 0; }
  .hw li:last-child { border-top-color: var(--ink); }
  .hw-led { left: 0; top: -8px; }
}

/* ---------- your week: the Hold key (HOLD_LIVE) ---------- */
.hold { padding: 22px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.hold-d { width: 100%; text-align: left; }
.hold-d .l2 { font-size: 18px; }
.holdkey { position: relative; width: 132px; height: 132px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(#FFFFFF, #F4F2EC); border: 1px solid #C2BBAD; color: var(--ink);
  box-shadow: inset 0 -5px 0 #E2DDD2, 0 6px 0 #BDB6A7, 0 10px 18px -6px rgba(15, 27, 51, .4); transition: transform .08s ease, box-shadow .08s ease; }
.holdkey .hk-cap { font: 600 15px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.holdkey .hk-led { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px #A9A498; }
.holdkey[aria-pressed="true"] { transform: translateY(5px); border-color: var(--ink); box-shadow: inset 0 -2px 0 #E2DDD2, 0 1px 0 #BDB6A7, 0 2px 4px rgba(15, 27, 51, .3); }
.holdkey[aria-pressed="true"] .hk-led { background: var(--ink); box-shadow: 0 0 0 3px rgba(15, 27, 51, .15); }
.holdkey:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.hold-cap { font-size: 15px; color: var(--ink-2); }

/* ---------- price ---------- */
.px { padding: 22px; }
.px .lrow .mono { font-variant-numeric: tabular-nums; }
.px-year { margin: 14px 0 18px; font: 500 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.px .btn-primary { margin-top: 6px; }
.px-refund { margin-top: 10px; text-align: center; }
.px > .btn-quiet { margin-top: 6px; }
@media (min-width: 900px) { .px { padding: 28px 30px; } }

/* ---------- the close: two ways in ---------- */
.close-sec { border-top: 0 !important; }
.close { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.close-start { background: var(--screen); color: var(--screen-tx); border-radius: 18px; padding: 28px 24px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 0 0 1px #0A1124;
  display: flex; flex-direction: column; align-items: flex-start; }
.close-start h2 { color: #F4F2EC; font: 600 34px/1.06 var(--sans); letter-spacing: -.03em; margin: 10px 0 12px; }
.close-start > p:not(.lbl) { color: #C9CFDC; font-size: 17px; }
.close-start .btn { margin-top: 24px; width: 100%; }
.close-fine { margin-top: 10px; font-size: 15px; color: #C9CFDC !important; }
.close-sample { padding: 22px; scroll-margin-top: 90px; }
.close-sample:focus { outline: none; }
.close-sample h3 { font: 600 24px/1.15 var(--sans); letter-spacing: -.02em; margin: 10px 0 8px; }
.sf-lead { font-size: 16px; color: var(--ink-2); }
.sf { display: grid; gap: 16px; margin-top: 18px; }
.sf .field > label { font-size: 15px; }
.sf-opt { font-weight: 400; color: var(--mute); }
.sf .input[aria-invalid="true"] { border-color: #8A2A14; box-shadow: 0 0 0 3px rgba(138, 42, 20, .14); }
.sf-consent { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: 15px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.sf-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }
.sf-consent a { color: var(--ink); font-weight: 600; }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-status { min-height: 22px; font-size: 15px; color: var(--ink); font-weight: 600; }
.sf-status:empty { min-height: 0; }
.sf-err { font-size: 15px; color: #8A2A14; font-weight: 600; }
.sf-done { margin-top: 18px; padding: 18px; border-radius: 12px; background: var(--panel-3); border: 1px solid var(--rule-2); }
.sf-done:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.sf-done h3 { font: 600 20px/1.2 var(--sans); margin: 8px 0 6px; }
.sf-done p { font-size: 16px; color: var(--ink-2); }
@media (min-width: 900px) {
  .close { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: stretch; }
  .close-start { padding: 44px 40px; justify-content: center; }
  .close-start h2 { font-size: 44px; }
  .close-start .btn { width: auto; }
  .close-sample { padding: 32px 34px; }
  .sf { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .sf > .field:nth-of-type(4), .sf > .sf-consent, .sf > .sf-err, .sf > .btn, .sf > .sf-status, .sf > .cf-turnstile { grid-column: 1 / -1; }
}

/* ---------- footer: agencies ---------- */
.oa-foot-agency { margin: 28px 0 0; font-size: 15px; }
.oa-foot-agency a { display: inline-flex; align-items: center; min-height: 44px; color: #F4F2EC; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244, 242, 236, .4); }

/* ---------- /for/law-firms ---------- */
.pv-banner { margin: 0; padding: 10px 18px; background: #FFF4D6; border-bottom: 1px solid #E4D3A2; color: #4A3A10; font: 500 15px var(--sans); text-align: center; }
.law-notes { padding: 22px; display: grid; gap: 12px; }
.law-tag { justify-self: start; margin-top: 4px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 4px; font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.law-line { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.law-blank { color: var(--ink); border-bottom: 1.5px dashed var(--mute); }
.law-appr { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule-2); font-size: 15px; color: var(--ink); }
.lawgrid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.law-own { margin-top: 18px; padding: 20px 22px; background: var(--panel-3); box-shadow: none; }
.law-own p { font-size: 16px; color: var(--ink-2); max-width: 820px; }
.law-own b { color: var(--ink); }
.law .hero-copy h1 { max-width: 17ch; }
@media (min-width: 640px) { .lawgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lawgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .law-notes { padding: 28px; } }
.sec-record .two > .cx { align-self: start; }

/* ---------- the website-to-show draft (DRAFT_LIVE) ---------- */
.dr { padding: 22px; }
.dr-form { display: grid; gap: 14px; }
.dr-out { display: grid; gap: 12px; }
.dr-out:not(:empty) { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-2); }
.dr-read p { font-size: 16px; color: var(--ink-2); margin-top: 6px; }
.dr-read .dr-name { font: 600 20px/1.2 var(--sans); color: var(--ink); }
.dr-read:focus { outline: none; }
.dr-titles { display: grid; gap: 10px; }
.dr-titles li { padding: 14px 16px; box-shadow: none; }
.dr-titles b { font: 600 18px/1.25 var(--sans); }
.dr-titles p { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.dr-about { font-size: 16px; color: var(--ink-2); }
.dr-eps { display: grid; gap: 6px; padding-left: 22px; list-style: decimal; font-size: 16px; }
.dr-out > .btn { justify-self: start; }
.dr-err { display: grid; gap: 12px; justify-items: start; font-size: 16px; color: var(--ink); }
@media (min-width: 900px) { .dr { padding: 28px 30px; } }

/* ---------- house minimums on the shared pieces (15px body, 44px targets) ---------- */
.oa .hint { font-size: 15px; }
.pcard .ep { font-size: 15px; }
.oa-skip { display: inline-flex; align-items: center; min-height: 44px; }

/* The woven thread (design/landing-flair/, founder 2026-10-27). One navy thread shows the work: stitched means done,
   pencil marks mean still to come. A section sews itself in once when it scrolls into view (the island adds "in" to
   [data-in]; it adds "wv-on" to <html> first, so the start states exist only when the island runs). Rules: the thread
   always means the work; one lit lamp per screen; no count ups; with reduced motion everything is still and finished.
   Entrances use fill "backwards" so hover states take over once they end. */

@property --wv-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
:root { interpolate-size: allow-keywords; --wv-out: cubic-bezier(.16, 1, .3, 1); --wv-dash: repeating-linear-gradient(90deg, #0F1B33 0 9px, transparent 9px 16px); }

/* ---------- type: one italic serif phrase per headline ---------- */
.wv-em { font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.012em; padding-right: .05em; }
.wv-eyebrow { display: flex; align-items: center; gap: 10px; }
.wv-tack { width: 26px; height: 2px; flex: none; background: repeating-linear-gradient(90deg, #0F1B33 0 5px, transparent 5px 9px); }
.lbl.inv .wv-tack, .close-start .wv-tack { background: repeating-linear-gradient(90deg, #9FA9BF 0 5px, transparent 5px 9px); }
.wv-ul { position: relative; display: inline-block; white-space: nowrap; }
.wv-ul svg { position: absolute; overflow: visible; pointer-events: none; }
.hx h1 .wv-ul svg { left: -2px; bottom: -.24em; width: calc(100% + .45em); height: .4em; }
.rec-nums dd .wv-ul { font-size: inherit; letter-spacing: inherit; color: inherit; }
.rec-nums .wv-ul svg { left: -4px; bottom: -11px; width: calc(100% + 14px); height: 12px; }
.wv-knot { transform-box: fill-box; transform-origin: center; }

/* ---------- the draw: a solid mask path (pathLength 1) reveals the dashed stitch ---------- */
.wv-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@keyframes wv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wv-pop { from { scale: 0; } 60% { scale: 1.25; } to { scale: 1; } }
@keyframes wv-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes wv-lift { from { translate: 0 18px; } to { translate: 0 0; } }
@keyframes wv-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wv-flick { 0% { opacity: .18; } 14% { opacity: 1; } 26% { opacity: .18; } 38% { opacity: 1; } 50% { opacity: .25; } 62%, 100% { opacity: 1; } }
@keyframes wv-row { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: no-preference) {
  .wv-now .wv-draw { animation: wv-draw var(--dur, 1s) cubic-bezier(.65, 0, .35, 1) var(--dl, 0s) both; }
  .wv-on [data-in] .wv-draw { stroke-dashoffset: 1; }
  .wv-on [data-in].in .wv-draw { animation: wv-draw var(--dur, 1s) cubic-bezier(.65, 0, .35, 1) var(--dl, 0s) both; }

  /* hero: the copy rises, the underline sews itself, the knot is tied, the console arrives, the lamp comes on */
  .hx .hero-copy > * { animation: wv-rise .9s var(--wv-out) both; }
  .hx .hero-copy > h1 { animation: none; }
  .hx .wv-w > span { animation: wv-word 1.05s var(--wv-out) both; animation-delay: calc(.05s + var(--w, 0) * 70ms); }
  .hx .wv-w.open > span { animation-name: wv-rise; }
  .hx .hero-copy > :nth-child(3) { animation-delay: .35s; }
  .hx .hero-copy > :nth-child(4) { animation-delay: .45s; }
  .hx .hero-copy > :nth-child(5) { animation-delay: .55s; }
  .hx .wv-ul .wv-knot { animation: wv-pop .5s cubic-bezier(.34, 1.8, .5, 1) 2s both; }
  .hx .cx { animation: wv-rise 1.2s var(--wv-out) .2s both; }
  .hx .cx .onair .lamp { animation: wv-flick .8s steps(1) 1.6s both, lamp 3.2s ease-in-out 2.4s infinite; }
  .hx .cx-tiles li { animation: wv-stitch .45s cubic-bezier(.34, 1.7, .5, 1) both; animation-delay: calc(.9s + var(--i, 0) * 30ms); }
  .wv-home .hx .cx::after { animation: wv-wipe 1.8s cubic-bezier(.65, 0, .35, 1) .7s both; }
  .hx .cx-seam::before { animation: wv-clip 1.1s cubic-bezier(.65, 0, .35, 1) .6s both; }
  .hx .cx-seam::after { animation: wv-clip 1.4s cubic-bezier(.65, 0, .35, 1) 1s both; }
  .hx .cx-needle { animation: wv-fade .6s ease 1.9s both; }
}
.cx-row { animation: wv-row .45s var(--wv-out); }
.wv-home .cx { position: relative; }
.wv-home .cx::after { content: ""; position: absolute; inset: 7px; border: 1.25px dashed rgba(15, 27, 51, .15); border-radius: 15px; pointer-events: none; }

/* ---------- seams between sections: the thread sewn to --at, the needle at the join ---------- */
.wv-home .sec + .sec { border-top: 0; }
.wv-home .sec > .oa-wrap:first-child:has(.wv-seam) { margin-top: -36px; margin-bottom: 44px; }
.wv-seam { position: relative; height: 16px; }
.wv-sewn { position: absolute; left: 0; top: 7px; width: calc(var(--at) * 100%); height: 2px; background: var(--wv-dash); }
.wv-pencil { position: absolute; right: 0; top: 7px; width: calc((1 - var(--at)) * 100% - 48px); height: 1.5px; background: repeating-linear-gradient(90deg, #C7C1B4 0 2px, transparent 2px 7px); }
.wv-nd { position: absolute; top: 5px; left: calc(var(--at) * 100%); margin-left: -5px; line-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wv-on .wv-seam:not(.in) .wv-sewn { clip-path: inset(0 100% 0 0); }
  .wv-on .wv-seam:not(.in) .wv-nd { left: 0; opacity: 0; }
  .wv-on .wv-seam:not(.in) .wv-pencil { opacity: 0; }
  .wv-seam .wv-sewn { transition: clip-path 1.4s var(--wv-out); }
  .wv-seam .wv-nd { transition: left 1.4s var(--wv-out), opacity .3s; }
  .wv-seam .wv-pencil { transition: opacity .8s ease .9s; }
}

/* ---------- the record: a woven selvedge, the "9" underlined, the release sewn on as a patch ---------- */
.rec-count { position: relative; overflow: hidden; padding-left: 38px !important; }
.wv-selvedge { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; transform-origin: top;
  background: repeating-linear-gradient(180deg, #0F1B33 0 3px, transparent 3px 7px) 3px 0 / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 3.5px, #2C3B5A 3.5px 6.5px, transparent 6.5px 7px) 9px 0 / 3px 100% no-repeat, #E9E6DF; }
.rec-claim.wv-patch { position: relative; margin-top: 10px; padding: 16px 18px; border-left: 0; border-radius: 10px; background: var(--panel-3); }
.wv-patch::before { content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(15, 27, 51, .5); border-radius: 7px; pointer-events: none; }
.rec-draft { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--mute-2); }
.rec-draft span { background: repeating-linear-gradient(90deg, #0F1B33 0 5px, transparent 5px 9px) 0 58% / 100% 1.6px no-repeat; }
.rec-mend { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .wv-on .rec:not(.in) .wv-selvedge { transform: scaleY(0); }
  .wv-selvedge { transition: transform 1.4s var(--wv-out) .2s; }
  .wv-on .rec:not(.in) .wv-patch::before { clip-path: inset(0 100% 100% 0); }
  .wv-patch::before { transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1) .7s; }
  .wv-on .rec:not(.in) .rec-draft span { background-size: 0 1.6px; }
  .rec-draft span { transition: background-size 1.6s cubic-bezier(.6, 0, .3, 1) .4s; }
  .wv-on .rec:not(.in) > .panel { opacity: 0; }
  .rec.in > .panel { animation: wv-rise .9s var(--wv-out) backwards; }
  .rec.in > .panel + .panel { animation-delay: .12s; }
}

/* ---------- what a show does: four swatches, a seam sews itself around the one you point at ---------- */
.wv-swatches .gain { position: relative; transition: translate .5s var(--wv-out), rotate .5s var(--wv-out), box-shadow .5s var(--wv-out); }
.wv-swatches .gain::after { content: ""; position: absolute; inset: 6px; border: 1.25px dashed rgba(15, 27, 51, .3); border-radius: 10px; pointer-events: none;
  clip-path: inset(0 100% 100% 0); transition: clip-path .6s cubic-bezier(.65, 0, .35, 1); }
.wv-swatches .gain:hover { translate: 0 -6px; rotate: -.5deg; box-shadow: 0 26px 44px -26px rgba(15, 27, 51, .45); }
.wv-swatches .gain:nth-child(even):hover { rotate: .5deg; }
.wv-swatches .gain:hover::after { clip-path: inset(0 0 0 0); }
.wv-ico { display: block; transition: rotate .6s var(--wv-out), translate .6s var(--wv-out); }
.wv-swatches .gain:hover .wv-ico { rotate: -6deg; translate: 0 -2px; }
.wv-swatches .gain h3 { margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .wv-on .wv-swatches:not(.in) .gain { opacity: 0; }
  .wv-swatches.in .gain { animation: wv-rise .9s var(--wv-out) backwards; }
  .wv-swatches.in .gain:nth-child(2) { animation-delay: .08s; }
  .wv-swatches.in .gain:nth-child(3) { animation-delay: .16s; }
  .wv-swatches.in .gain:nth-child(4) { animation-delay: .24s; }
}

/* ---------- the shows hang on a thread: pegs, a swag between them, a small tilt each ---------- */
.wv-line .you { background: repeating-linear-gradient(135deg, rgba(15, 27, 51, .03) 0 6px, transparent 6px 12px), var(--panel); border: 1.75px dashed var(--ink-2); box-shadow: none; }
.wv-peg { display: none; }
@media (min-width: 640px) {
  .wv-line { padding-top: 26px; row-gap: 64px; }
  .wv-line > li { --r: 0deg; --wv-a: var(--r); position: relative; transform-origin: 50% -14px; rotate: var(--wv-a);
    transition: --wv-a .7s cubic-bezier(.34, 1.5, .5, 1), translate .6s var(--wv-out), box-shadow .6s var(--wv-out); }
  .wv-line > li:hover { --wv-a: 0deg; translate: 0 -4px; box-shadow: 0 30px 44px -26px rgba(15, 27, 51, .5); }
  .wv-line > li:nth-child(8n + 1) { --r: -2deg; } .wv-line > li:nth-child(8n + 2) { --r: 1.4deg; }
  .wv-line > li:nth-child(8n + 3) { --r: -1deg; } .wv-line > li:nth-child(8n + 4) { --r: 2deg; }
  .wv-line > li:nth-child(8n + 5) { --r: 1.6deg; } .wv-line > li:nth-child(8n + 6) { --r: -1.8deg; }
  .wv-line > li:nth-child(8n + 7) { --r: 1deg; } .wv-line > li:nth-child(8n + 8) { --r: -.6deg; }
  .wv-peg { display: block; position: absolute; left: 50%; top: -26px; width: 12px; height: 26px; margin-left: -6px; border-radius: 3px; z-index: 2;
    background: linear-gradient(90deg, #DCCFB8, #C9B999); box-shadow: 0 0 0 1px rgba(15, 27, 51, .25), 0 2px 3px rgba(15, 27, 51, .2); }
  .wv-peg::after { content: ""; position: absolute; left: 5px; top: 3px; bottom: 3px; width: 1.5px; background: rgba(15, 27, 51, .3); }
  /* the swag to the next peg, held still while the card swings (it turns back by the card's own angle) */
  .wv-line > li::before { content: ""; position: absolute; left: 50%; top: -14px; width: calc(100% + 14px); height: 32px; z-index: -1; pointer-events: none;
    transform-origin: 0 0; rotate: calc(-1 * var(--wv-a));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 32' preserveAspectRatio='none'%3E%3Cpath d='M0 1Q50 30 100 1' fill='none' stroke='%230F1B33' stroke-width='2' stroke-dasharray='9 6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
  .wv-line > li:nth-child(2n)::before { display: none; }
}
@media (min-width: 1000px) {
  .wv-line > li::before { width: calc(100% + 16px); }
  .wv-line > li:nth-child(2n)::before { display: block; }
  .wv-line > li:nth-child(4n)::before { display: none; }
}
@keyframes wv-hang {
  0% { opacity: 0; translate: 0 -46px; --wv-a: calc(var(--r) + 14deg); }
  22% { opacity: 1; translate: 0 0; --wv-a: calc(var(--r) - 9deg); }
  44% { --wv-a: calc(var(--r) + 5deg); }
  64% { --wv-a: calc(var(--r) - 2deg); }
  82% { --wv-a: calc(var(--r) + .6deg); }
  100% { --wv-a: var(--r); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 640px) {
  .wv-on .wv-line:not(.in) > li { opacity: 0; }
  .wv-line.in > li { animation: wv-hang 1.6s cubic-bezier(.2, .7, .2, 1) backwards; }
  .wv-line.in > li:nth-child(2) { animation-delay: .11s; } .wv-line.in > li:nth-child(3) { animation-delay: .22s; }
  .wv-line.in > li:nth-child(4) { animation-delay: .33s; } .wv-line.in > li:nth-child(5) { animation-delay: .5s; }
  .wv-line.in > li:nth-child(6) { animation-delay: .61s; } .wv-line.in > li:nth-child(7) { animation-delay: .72s; }
  .wv-line.in > li:nth-child(8) { animation-delay: .83s; }
}

/* ---------- how it works: one thread over, under, over, under, and out through the needle ---------- */
.hw-no, .hw-air { display: none; }
@media (min-width: 900px) {
  .wv-loom { position: relative; gap: 22px; }
  .wv-loom li { position: relative; z-index: 1; margin: 0; padding: 76px 22px 28px; border: 1px solid var(--rule); border-top: 1px solid var(--rule); border-radius: 14px; background: var(--panel);
    box-shadow: 0 18px 36px -28px rgba(15, 27, 51, .4); }
  .wv-loom li:last-child { background: var(--screen); border-color: #0A1124; border-top-color: #0A1124; }
  .wv-loom li:last-child h3 { color: #F4F2EC; }
  .wv-loom li:last-child p, .wv-loom li:last-child .hw-no { color: #9FA9BF; }
  .wv-loom .hw-led { display: none; }
  .wv-loom .hw-no { display: block; position: absolute; top: 18px; left: 22px; }
  .wv-loom .hw-air { display: inline-flex; align-items: center; gap: 8px; position: absolute; top: 16px; right: 20px; color: #F4F2EC; }
  .wv-loom .hw-air .lamp { width: 8px; height: 8px; }
  .wv-loom::before { content: ""; position: absolute; left: -48px; right: -48px; top: 44px; height: 2.4px; background: var(--wv-dash); z-index: 0; }
  .wv-loom li:nth-child(odd)::after { content: ""; position: absolute; left: -4px; right: -4px; top: 43px; height: 2.4px; background: var(--wv-dash); }
  .wv-loom li:nth-child(even)::before, .wv-loom li:nth-child(even)::after { content: ""; position: absolute; top: 40px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--recess); box-shadow: inset 0 1px 2px rgba(15, 27, 51, .45); }
  .wv-loom li:nth-child(even)::before { left: -4px; }
  .wv-loom li:nth-child(even)::after { right: -4px; }
  .wv-loom li:last-child::before, .wv-loom li:last-child::after { background: #22304F; }
  .wv-loom::after { content: ""; position: absolute; left: calc(100% + 48px); top: 41px; width: 34px; height: 8px; margin-left: -5px; z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6'%3E%3Cpath d='M0 3L35 1Q40 3 35 5Z' fill='%230F1B33'/%3E%3Cellipse cx='5.5' cy='3' rx='2.8' ry='.9' fill='%23F2F0EB'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
}
@keyframes wv-needle-run { from { left: -48px; } to { left: calc(100% + 48px); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .wv-on .wv-loom:not(.in)::before, .wv-on .wv-loom:not(.in) li:nth-child(odd)::after { clip-path: inset(0 100% 0 0); }
  .wv-on .wv-loom:not(.in)::after, .wv-on .wv-loom:not(.in) li { opacity: 0; }
  .wv-loom.in::before { animation: wv-clip 2.4s linear .2s backwards; }
  .wv-loom.in::after { animation: wv-needle-run 2.4s linear .2s backwards; }
  .wv-loom.in li { animation: wv-rise .8s var(--wv-out) backwards; }
  .wv-loom.in li:nth-child(2) { animation-delay: .55s; } .wv-loom.in li:nth-child(3) { animation-delay: 1.1s; } .wv-loom.in li:nth-child(4) { animation-delay: 1.65s; }
  .wv-loom.in li:nth-child(1)::after { animation: wv-clip .52s linear .29s backwards; }
  .wv-loom.in li:nth-child(3)::after { animation: wv-clip .52s linear 1.42s backwards; }
  .wv-loom.in .hw-air .lamp { animation: wv-flick .8s steps(1) 2.45s both, lamp 3.2s ease-in-out 3.3s infinite; }
}

/* ---------- the price as a woven hang tag; its care label is the promise ---------- */
.px-line { color: var(--ink); font-weight: 600; }
.wv-tagstage { position: relative; height: 470px; margin-top: 72px; }
.wv-tagthread { position: absolute; left: 50%; top: -44px; width: 300px; height: 150px; margin-left: -150px; overflow: visible; }
.wv-tag { --wv-a: -3.5deg; position: absolute; left: 50%; top: 84px; width: 300px; margin-left: -150px; transform-origin: 50% 20px; rotate: var(--wv-a);
  transition: --wv-a .9s cubic-bezier(.34, 1.4, .5, 1); filter: drop-shadow(0 30px 30px rgba(15, 27, 51, .2)) drop-shadow(0 2px 2px rgba(15, 27, 51, .08)); }
.wv-tag:hover { --wv-a: 1deg; }
.wv-tagbody { position: relative; padding: 58px 26px 24px; text-align: center; background: var(--bone); border-radius: 0 0 12px 12px;
  clip-path: polygon(18% 0, 82% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); }
.wv-tagbody::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(15, 27, 51, .4); border-radius: 0 0 6px 6px; pointer-events: none;
  clip-path: polygon(18% 0, 82% 0, 100% 8.5%, 100% 100%, 0 100%, 0 8.5%); }
.wv-eyelet { position: absolute; left: 50%; top: 18px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--panel-3); box-shadow: 0 0 0 4px #CFC8BA, inset 0 1px 2px rgba(15, 27, 51, .4); }
.wv-tagbrand { display: flex; justify-content: center; align-items: center; gap: 8px; letter-spacing: .24em; color: var(--ink-2); }
.wv-amt { margin-top: 14px; font: italic 400 112px/.9 "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wv-amt sup { font-size: 40px; vertical-align: 54px; margin-right: 2px; }
.wv-per { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.wv-care { list-style: none; margin: 20px 0 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; border-top: 1px dashed rgba(15, 27, 51, .3); }
.wv-care li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wv-care .lbl { font-size: 9.5px; letter-spacing: .04em; line-height: 1.3; color: var(--ink-2); }
.wv-tagbody .wv-fine.lbl { margin-top: 16px; font-size: 10px; letter-spacing: .1em; }
@keyframes wv-tagdrop {
  0% { opacity: 0; translate: 0 -70px; --wv-a: 12deg; }
  18% { opacity: 1; translate: 0 0; --wv-a: -12deg; }
  36% { --wv-a: 6deg; } 54% { --wv-a: -6.5deg; } 70% { --wv-a: -1deg; } 85% { --wv-a: -4.2deg; }
  100% { --wv-a: -3.5deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .wv-on .wv-tagstage:not(.in) .wv-tag { opacity: 0; }
  .wv-tagstage.in .wv-tag { animation: wv-tagdrop 2.2s cubic-bezier(.2, .7, .2, 1) .7s backwards; }
}

/* ---------- questions: a stitched plus that loses its upright when it opens ---------- */
.wv-home .faq summary::after { width: 22px; height: 22px; border: 0; transform: none; transition: rotate .45s var(--wv-out);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%230F1B33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 13H22M13 4V22' stroke-dasharray='3.5 2.5'/%3E%3C/svg%3E") center / 22px no-repeat; }
.wv-home .faq details[open] summary::after { transform: none; rotate: 180deg;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%230F1B33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 13H22' stroke-dasharray='3.5 2.5'/%3E%3C/svg%3E"); }
.wv-home .faq details p { margin-bottom: 18px; padding: 0 0 0 16px; border-left: 2px dashed var(--ink); }
.wv-home .faq summary { transition: color .2s; }
.wv-home .faq summary:hover { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .wv-home .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--wv-out), content-visibility .45s allow-discrete; }
  .wv-home .faq details[open]::details-content { block-size: auto; }
}

/* ---------- the close: the mark, unravelled, signs off with its lit lamp ---------- */
.close-start { position: relative; overflow: hidden; }
.close-start > :not(.wv-mark) { position: relative; z-index: 1; }
.wv-mark { position: absolute; right: 12px; top: -28px; width: min(380px, 75%); height: auto; aspect-ratio: 1; opacity: .85; pointer-events: none; overflow: visible; }
.close-sample { outline: 1.5px dashed rgba(15, 27, 51, .22); outline-offset: -10px; }
@media (prefers-reduced-motion: no-preference) {
  .wv-on .close:not(.in) .wv-endlamp { scale: 0; }
  .close.in .wv-endlamp { animation: wv-pop .5s cubic-bezier(.34, 1.8, .5, 1) 2.6s backwards; }
}

/* ---------- the cloth: linen on the hero, "why" and "how"; a faint paper grain over the page ---------- */
.wv-home .hx, .wv-home #why, .wv-home #how { background-color: var(--bone);
  background-image: repeating-linear-gradient(0deg, rgba(15, 27, 51, .024) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(15, 27, 51, .02) 0 1px, transparent 1px 4px); }
body:has(.wv-home)::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes wv-spin { to { rotate: 360deg; } }
@keyframes wv-word { from { translate: 0 108%; } to { translate: 0 0; } }
@keyframes wv-stitch { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes wv-wipe { from { clip-path: inset(0 100% 100% 0 round 15px); } to { clip-path: inset(0 0 0 0 round 15px); } }

/* ---------- the headline: bigger, and it rises word by word out of its own line ---------- */
.wv-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.wv-w > span { display: inline-block; }
.wv-w.open { overflow: visible; }
.wv-home .hx .hero-copy h1 { max-width: none; font-size: clamp(46px, 12vw, 60px); line-height: .98; letter-spacing: -.045em; }
@media (min-width: 1080px) { .wv-home .hx .hero-copy h1 { font-size: clamp(64px, 5.9vw, 86px); } }

/* ---------- the hero's small things: the turning ring, where it is published ---------- */
.wv-ring { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -6px; }
.wv-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--ink); animation: wv-spin 14s linear infinite; }
.wv-ring svg { width: 12px; height: 12px; }
.hx [data-hear]:hover .wv-ring::before { animation-duration: 3.5s; }
/* "Available on" (founder 2026-10-28): the console's show where it is really listed. Each platform is a white patch
   with a stitched edge, sewn on one running thread (stitched = listed today), then the needle and pencil marks to
   "with your name on it" (the customer's show, still to come). The platforms' own marks sit inside unaltered: the
   woven styling goes around them, never into them (src/site/platforms.js). Hover or focus lifts a patch and shows
   where it goes. Phone: a 2 x 2 grid, the thread through both rows. */
.wv-where { --g: 18px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 40px 0 0; }
.wv-where > .lbl { margin: 0; transition: opacity .2s; }
.wv-plats { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.wv-plats::before { content: ""; position: absolute; z-index: -1; inset: 0 -18px; pointer-events: none;
  background: var(--wv-dash), var(--wv-dash); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 27px, 0 calc(100% - 27px); }
.wv-plats li { min-width: 0; }
.wv-plat { position: relative; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px; box-sizing: border-box; border-radius: 12px;
  background: #FFFFFF; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 rgba(15, 27, 51, .07), 0 10px 22px -16px rgba(15, 27, 51, .5); transition: translate .35s var(--wv-out), box-shadow .35s var(--wv-out); }
.wv-plat::before { content: ""; position: absolute; inset: 5px; border-radius: 7px; border: 1.25px dashed rgba(15, 27, 51, .24); pointer-events: none;
  transition: inset .35s var(--wv-out), border-color .35s var(--wv-out); }
.pf-mark { flex: none; display: block; }
.pf-name { font: 600 14px/1.2 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.pf-go { position: absolute; top: 8px; right: 10px; font: 500 11px/1 var(--sans); color: var(--mute); transition: translate .35s var(--wv-out), color .2s; }
a.wv-plat:hover, a.wv-plat:focus-visible { translate: 0 -3px; box-shadow: 0 1px 0 rgba(15, 27, 51, .07), 0 18px 30px -18px rgba(15, 27, 51, .6); }
a.wv-plat:hover::before, a.wv-plat:focus-visible::before { inset: 4px; border-color: rgba(15, 27, 51, .5); }
a.wv-plat:hover .pf-go, a.wv-plat:focus-visible .pf-go { translate: 2px -2px; color: var(--ink); }
a.wv-plat:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* where the patch goes: in place of the label (it has the row's full width), sewn under as it appears */
.pf-cap { position: absolute; top: 0; left: 0; max-width: 100%; padding-bottom: 4px; white-space: nowrap; font: 500 13px/1.2 var(--sans); color: var(--ink-2);
  opacity: 0; pointer-events: none; transition: opacity .25s, background-size .6s var(--wv-out);
  background: repeating-linear-gradient(90deg, #0F1B33 0 5px, transparent 5px 9px) 0 100% / 0 1.5px no-repeat; }
.wv-plat:hover + .pf-cap, .wv-plat:focus-visible + .pf-cap { opacity: 1; background-size: 100% 1.5px; }
.wv-where:has(a.wv-plat:is(:hover, :focus-visible)) > .lbl { opacity: 0; }
.wv-yours { display: flex; align-items: center; gap: 0; margin: 0 0 0 -18px; }
.wv-yours::after { content: ""; order: -1; width: 22px; height: 2px; flex: none; background: repeating-linear-gradient(90deg, #0F1B33 0 6px, transparent 6px 10px); }
.wv-where .wv-nd { position: static; margin: 0 0 0 -4px; flex: none; line-height: 0; }
.wv-yours::before { content: ""; order: 1; width: 34px; height: 2px; margin: 0 12px 0 6px; flex: none; background: repeating-linear-gradient(90deg, #C7C1B4 0 2px, transparent 2px 6px); }
.wv-yours .lbl { order: 2; }
@media (min-width: 760px) {
  .wv-plats { display: flex; justify-content: space-between; gap: var(--g); }
  .wv-plats::before { background: var(--wv-dash) 0 50% / 100% 2px no-repeat; }
  .wv-plat { padding: 0 30px 0 14px; }
  .pf-name { font-size: 15px; }
}
/* wide: one line, the thread from the label through the patches to the needle; the caption hangs under its patch */
@media (min-width: 1180px) {
  .wv-where { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--g); }
  .wv-plats::before { inset: 0 calc(6px - var(--g)) 0 calc(4px - var(--g)); }
  .wv-yours { margin-left: 0; }
  .wv-yours::after { content: none; }
  .wv-plats li { position: relative; }
  .pf-cap { top: calc(100% + 12px); left: 2px; max-width: none; }
  .wv-plats li:nth-child(n+3) .pf-cap { left: auto; right: 2px; }
  .wv-where:has(a.wv-plat:is(:hover, :focus-visible)) > .lbl { opacity: 1; }
  .wv-where .wv-nd { margin-left: calc(-1 * var(--g)); }
}
/* the thread sews the patches on, the needle arrives, then the pencil marks: once, as the row scrolls in. Each patch
   is opaque before the thread passes behind it, so the thread never shows through a mark. */
@media (prefers-reduced-motion: no-preference) {
  .wv-on .wv-where:not(.in) .wv-plats::before { clip-path: inset(0 100% 0 0); }
  .wv-on .wv-where:not(.in) .wv-plats li, .wv-on .wv-where:not(.in) .wv-yours > * { opacity: 0; }
  .wv-on .wv-where:not(.in) .wv-plat::before, .wv-on .wv-where:not(.in) .wv-yours::before { clip-path: inset(0 100% 0 0); }
  .wv-where.in .wv-plats::before { animation: wv-clip 1.4s linear .2s backwards; }
  .wv-where.in .wv-plats li { animation: wv-sewon .7s var(--wv-out) backwards; animation-delay: calc(.1s + var(--i) * .28s); }
  .wv-where.in .wv-plat::before { animation: wv-clip .6s linear backwards; animation-delay: calc(.3s + var(--i) * .28s); }
  .wv-on .wv-where:not(.in) .wv-yours::after { clip-path: inset(0 100% 0 0); }
  .wv-where.in .wv-yours::after { animation: wv-clip .3s linear 1.3s backwards; }
  .wv-where.in .wv-yours .wv-nd { animation: wv-ndin .6s var(--wv-out) 1.5s backwards; }
  .wv-where.in .wv-yours::before { animation: wv-clip .5s linear 1.85s backwards; }
  .wv-where.in .wv-yours .lbl { animation: wv-fade .6s ease 2.1s backwards; }
}
.wv-plats li:nth-child(1) { --i: 0; } .wv-plats li:nth-child(2) { --i: 1; } .wv-plats li:nth-child(3) { --i: 2; } .wv-plats li:nth-child(4) { --i: 3; }
@keyframes wv-sewon { from { opacity: 0; translate: 0 6px; scale: .97; } 28% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes wv-ndin { from { opacity: 0; translate: -26px 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .wv-plat, .wv-plat::before, .pf-go, .pf-cap, .wv-where > .lbl { transition: none; } }

/* ---------- buttons: a lift, a seam sewn inside on hover, the arrow leans in ---------- */
.wv-home .btn-primary, .wv-home .btn-light, .oa-top .oa-btn-primary { position: relative; transition: translate .35s var(--wv-out), box-shadow .35s var(--wv-out), background .2s; }
.wv-home .btn-primary::before, .wv-home .btn-light::before, .oa-top .oa-btn-primary::before { content: ""; position: absolute; inset: 6px; border-radius: 7px; pointer-events: none;
  border: 1.25px dashed rgba(244, 242, 236, 0); transition: border-color .35s var(--wv-out), inset .35s var(--wv-out); }
.wv-home .btn-light::before { border-color: rgba(15, 27, 51, 0); }
.wv-home .btn-primary:hover::before, .oa-top .oa-btn-primary:hover::before { inset: 4px; border-color: rgba(244, 242, 236, .42); }
.wv-home .btn-light:hover::before { inset: 4px; border-color: rgba(15, 27, 51, .35); }
.wv-home .btn-primary:hover, .wv-home .btn-light:hover, .oa-top .oa-btn-primary:hover { translate: 0 -2px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), 0 16px 28px -14px rgba(15, 27, 51, .75); }
.wv-home .btn-secondary { transition: translate .35s var(--wv-out), box-shadow .35s var(--wv-out); }
.wv-home .btn-secondary:hover { translate: 0 -2px; box-shadow: 0 12px 24px -16px rgba(15, 27, 51, .4); }
.wv-home [data-signup].btn-primary::after, .wv-home [data-signup].btn-light::after { content: "→" / ""; display: inline-block; transition: translate .35s var(--wv-out); }
.wv-home [data-signup]:hover::after { translate: 4px 0; }

/* ---------- the top bar: a stitched underline on hover, the reading thread with its needle ---------- */
.oa-nav a { position: relative; }
.oa-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; transform: scaleX(0); transform-origin: left;
  background: repeating-linear-gradient(90deg, #0F1B33 0 5px, transparent 5px 9px); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.oa-nav a:hover::after { transform: scaleX(1); }
.oa-nav a:hover { background: transparent; }
.oa-thread { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.oa-thread::before { content: ""; position: absolute; inset: 0; background: var(--wv-dash); clip-path: inset(0 100% 0 0); }
.oa-thread::after { content: ""; position: absolute; top: -3px; left: 0; width: 30px; height: 8px; margin-left: -4px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6'%3E%3Cpath d='M0 3L35 1Q40 3 35 5Z' fill='%230F1B33'/%3E%3Cellipse cx='5.5' cy='3' rx='2.8' ry='.9' fill='%23F2F0EB'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
@keyframes wv-read-nd { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 100% { left: calc(100% - 30px); opacity: 1; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .oa-thread::before { animation: wv-clip linear both; animation-timeline: scroll(root); }
    .oa-thread::after { animation: wv-read-nd linear both; animation-timeline: scroll(root); }
  }
}

/* ---------- the console: equalizer while it plays, the cover breathes, a label on every stitch, the buffering ring ---------- */
.cx-clock { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cx-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.cx-eq i { width: 2px; height: 3px; border-radius: 1px; background: #9FA9BF; }
@keyframes wv-eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
.cx:has(.cx-play.playing) .cx-eq i { animation: wv-eq .9s ease-in-out infinite; }
.cx:has(.cx-play.playing) .cx-eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.2s; }
.cx:has(.cx-play.playing) .cx-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.cx:has(.cx-play.playing) .cx-eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.3s; }
.cx:has(.cx-play.playing) .cx-eq i:nth-child(5) { animation-duration: 1s; animation-delay: -.65s; }
.wv-home .cx-cover { padding: 0; border: 4px solid #fff; overflow: hidden; box-shadow: 0 0 0 1px #CDC6B8, 0 3px 0 #CBC4B6, 0 5px 8px -3px rgba(15, 27, 51, .25); }
.wv-home .cx-cover img { border-radius: 7px; transition: scale 9s linear; }
.wv-home .cx:has(.cx-play.playing) .cx-cover img { scale: 1.07; }
.cx-tiles li::after { content: attr(data-tip); position: absolute; left: 0; bottom: 100%; translate: -50% 4px; padding: 6px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: #F4F2EC; font: 500 11.5px/1 var(--mono); letter-spacing: .03em; opacity: 0; transition: opacity .18s, translate .18s; z-index: 5; }
.cx-tiles li:hover::after { opacity: 1; translate: -50% 0; }
.cx-tiles li:hover { z-index: 6; }
.cx-play { position: relative; }
.cx-play.wait::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px dashed var(--ink); animation: wv-spin 1.6s linear infinite; }

/* ---------- the cards' icons sew themselves in; covers lean in on hover ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wv-on .wv-swatches:not(.in) .wv-ico { clip-path: inset(0 100% 0 0); }
  .wv-swatches.in .wv-ico { animation: wv-clip .9s cubic-bezier(.65, 0, .35, 1) .35s backwards; }
  .wv-swatches.in .gain:nth-child(2) .wv-ico { animation-delay: .45s; }
  .wv-swatches.in .gain:nth-child(3) .wv-ico { animation-delay: .55s; }
  .wv-swatches.in .gain:nth-child(4) .wv-ico { animation-delay: .65s; }
}
.wv-line .cover { overflow: hidden; }
.wv-line .cover img { transition: scale .8s var(--wv-out); }
.wv-line > li:hover .cover img { scale: 1.045; }

/* ---------- the price: stitched rows that light on hover; the tag swings when you touch it ---------- */
.wv-home .px .lrow { margin: 0 -12px; padding: 13px 12px; border-bottom: 1px dashed #C7C1B4; border-radius: 8px; transition: background .25s; }
.wv-home .px .lrow:hover { background: var(--panel-3); }
.wv-tagbody { transform-origin: 50% 20px; }
@keyframes wv-sway { 0% { rotate: 0deg; } 22% { rotate: 7deg; } 46% { rotate: -4deg; } 68% { rotate: 2deg; } 86% { rotate: -.7deg; } 100% { rotate: 0deg; } }
@media (prefers-reduced-motion: no-preference) { .wv-tag:hover .wv-tagbody { animation: wv-sway 1.5s cubic-bezier(.2, .7, .2, 1); } }

/* ---------- questions lean in; the sample form's fields focus with a soft ring ---------- */
.wv-home .faq summary { transition: padding-left .4s var(--wv-out), color .2s; }
.wv-home .faq summary:hover { padding-left: 6px; }
.wv-home .sf .input:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(15, 27, 51, .08); }

/* ---------- side-by-side fixes against the prototype (2026-10-27) ---------- */
.wv-home .hx h1 .wv-w.open { display: block; }
.wv-home .rec-nums dd { font: 600 44px/1 var(--sans); letter-spacing: -.04em; }
@media (min-width: 900px) { .wv-home .rec-nums dd { font-size: 58px; } }
.wv-home .rec-nums dd span:not(.wv-ul) { font: 500 20px var(--sans); letter-spacing: -.01em; }
.wv-home #faq h2 .wv-em, .wv-home .close-start h2 .wv-em { display: block; }
.wv-home #faq h2 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
@media (min-width: 900px) {
  .wv-home .close-start { min-height: 520px; justify-content: flex-end; padding: 52px 48px; }
  .wv-home .close-start h2 { font-size: 60px; line-height: 1; }
  .wv-price { grid-template-columns: 5fr 6fr; align-items: center; }
  .wv-price .wv-tagstage { height: 560px; margin-top: 0; }
  .wv-price .wv-tagthread { top: -6px; }
  .wv-price .wv-tag { top: 122px; width: 330px; margin-left: -165px; }
  .wv-price .wv-amt { font-size: 124px; }
  .wv-price .px { margin-top: 28px; }
}
.wv-home .hx .hero-copy h1 { margin-bottom: 36px; }
@media (min-width: 900px) {
  .wv-home .close { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .wv-home .close-start h2 { font-size: 58px; }
}
.wv-home { overflow-x: clip; }

/* ================= prototype parity (founder review, 2026-10-27): design/landing-flair/prototype.html is the spec ================= */

/* ---------- top bar: part of the page at the top, glass once you scroll, the reading thread under it ---------- */
body:has(.wv-home) .oa-top { border-bottom-color: transparent; background-color: var(--bone); -webkit-backdrop-filter: none; backdrop-filter: none;
  background-image: repeating-linear-gradient(0deg, rgba(15, 27, 51, .024) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(15, 27, 51, .02) 0 1px, transparent 1px 4px);
  transition: background-color .35s, border-color .35s, box-shadow .35s; }
body.scrolled:has(.wv-home) .oa-top { background-color: rgba(242, 240, 235, .84); background-image: none; border-bottom-color: rgba(15, 27, 51, .06);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.oa-thread { height: 8px; bottom: -4px; opacity: 0; transition: opacity .35s; }
body.scrolled .oa-thread { opacity: 1; }
.oa-thread::before, .oa-thread::after { animation: none !important; }
.oa-thread { background: linear-gradient(90deg, transparent, transparent) ; }
.oa-thread::before { inset: 3px 0 auto 0; height: 2px; clip-path: inset(0 calc((1 - var(--sp, 0)) * 100%) 0 0); }
.oa-thread::after { opacity: 1; top: 0; left: calc(var(--sp, 0) * (100% - 30px)); }
.oa-thread > i { display: none; }
body.scrolled .oa-thread { background: repeating-linear-gradient(90deg, #C7C1B4 0 2px, transparent 2px 6px) 0 3.25px / 100% 1.5px no-repeat; }

/* ---------- the console, as drawn: a panel with a stitched seam inside its edge ---------- */
.wv-home .cx { background: var(--panel-3); border: 0; border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 0 0 1px rgba(15, 27, 51, .07), 0 2px 4px rgba(15, 27, 51, .04), 0 50px 90px -46px rgba(15, 27, 51, .5); }
.wv-home .cx::after { inset: 7px; border-radius: 13px; border: 1.25px dashed rgba(15, 27, 51, .16); }
.wv-home .cx > div + div { border-top: 0; margin-top: 18px; padding-top: 0; }
.wv-home .cx-h .lbl { font-size: 11px; letter-spacing: .14em; }
.wv-home .cx-now-in { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
.wv-home .cx-cover { border: 0; border-radius: 10px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rule), 0 10px 20px -10px rgba(15, 27, 51, .5); }
.wv-home .cx-cover img { border-radius: 10px; }
.wv-home .cx-d { border-radius: 12px; padding: 16px 18px; }
.wv-home .cx-d .l2 { font-size: 20px; font-weight: 500; line-height: 1.25; margin: 10px 0; }
.wv-home .cx-claims { margin: 18px 0 0; padding: 0; }
.wv-home .cx-track, .wv-home .cx-hint { display: none !important; }
.wv-home .cx-seamrow { margin-top: 6px; }
.wv-home .cx-line { margin-top: 6px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.wv-home .cx-line b { color: var(--ink); }
.wv-home .cx-key { font-size: 13.5px; color: var(--mute); gap: 6px 18px; }
.wv-home .cx-key .cx-key-p { display: inline-flex; }
/* the stitches: no box behind them, just the stitch and its label */
.wv-home .tile:hover, .wv-home .tile.now, .wv-home .tile[aria-current] { background: none; box-shadow: none; }
.wv-home .tile::before, .wv-home .tile.c::after { transition: background .25s ease, scale .25s cubic-bezier(.34, 1.7, .5, 1); }
.wv-home .tile:hover::before, .wv-home .tile:hover.c::after, .wv-home .tile.now::before, .wv-home .tile.now.c::after { scale: 1.3; }
/* the claim card */
.wv-home .cx-ledger { height: auto; min-height: 156px; margin-top: 14px; padding: 14px 16px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E7E3DB; }
.wv-home .cx-meta { gap: 6px 10px; }
.wv-home .cx-meta .lbl { font-size: 11px; letter-spacing: .12em; }
.wv-home .cx-meta .tag { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: transparent; border: 1.25px solid var(--rule); color: var(--ink-2); }
.wv-home .cx-meta .tag-c { border: 1.25px dashed var(--ink); color: var(--ink); }
.wv-home .cx-claim { margin-top: 9px; font-size: 15px; line-height: 1.45; }
.wv-home .cx-acts { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.wv-home .cx-acts .cx-src { margin: 0; font-size: 12.5px; color: var(--mute); min-width: 0; }
.wv-home .cx-acts .btn-quiet { flex: none; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1.5px dashed var(--ink); padding-bottom: 1px; min-height: 0; }
/* next episode, with the week */
.wv-home .cx-next { display: flex; align-items: center; gap: 14px; margin-top: 14px !important; padding-top: 14px !important; border-top: 1px dashed var(--key) !important; }
.cx-next .lbl { font-size: 11px; letter-spacing: .14em; }
.cx-day { margin-top: 3px; font-size: 15px; color: var(--ink); }
.cx-day b { font-weight: 600; }
.cx-day span { font-size: 13.5px; color: var(--mute); }
.cx-week { margin-left: auto; display: grid; justify-items: end; gap: 5px; }
.cx-week ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cx-week li { width: 22px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--recess); font: 500 10px var(--mono); color: var(--mute); }
.cx-week li.on { background: var(--ink); color: #F4F2EC; translate: 0 -2px; }
@media (max-width: 479px) { .cx-week .lbl { display: none; } .cx-week li { width: 18px; height: 24px; } .cx-week ol { gap: 4px; } }

/* ---------- the record, as drawn: bone ground, borderless numbers, the badge, the mend with its arrow ---------- */
.wv-home .sec-record { background: transparent; }
.wv-home .rec-count, .wv-home .rec-caught { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 27, 51, .07), 0 24px 48px -32px rgba(15, 27, 51, .35); }
.wv-home .rec-h { padding-bottom: 0; border-bottom: 0; }
.wv-home .rec-h .lbl { font-size: 11px; letter-spacing: .14em; }
.wv-home .rec-nums { gap: 26px 24px; margin-top: 22px; }
.wv-home .rec-nums > div, .wv-home .rec-nums > div:nth-child(odd), .wv-home .rec-nums > div:nth-child(even) { padding: 0; border: 0; }
.wv-home .rec-nums dt { font-size: 13.5px; color: var(--mute); }
.wv-home .rec-ep { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--key); }
.wv-home .rec-as { margin-top: 20px; font-size: 10.5px; letter-spacing: .14em; }
.wv-home .rec-draft { margin-top: 6px; }
.wv-home .rec-mend { font-size: 11px; letter-spacing: .12em; margin: 14px 0 4px; }
.wv-home .rec-claim.wv-patch { margin-top: 8px; font: 500 17px/1.5 var(--sans); letter-spacing: -.005em; padding: 18px 20px; }
.wv-home .rec-caught figcaption { margin-top: 12px; padding-top: 0; border-top: 0; }
.wv-home .rec-caught figcaption > .lbl { display: none; }
.wv-home .rec-caught figcaption p { margin-top: 0; font-size: 14px; color: var(--mute); line-height: 1.5; }
.wv-home .rec-caught .rec-src { margin-top: 10px; font-size: 12.5px; }
.wv-home .rec-fu { align-items: center; gap: 10px 16px; }
.wv-home .rec-fu p { font-size: 14.5px; }
.wv-home .rec-fu .btn-quiet { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1.5px dashed var(--ink); }
.wv-badge { display: block; height: 22px; width: auto; flex: none; }

/* ---------- grounds: the shows and the price sit on the whiter panel, as drawn ---------- */
.wv-home #shows, .wv-home #pricing { background-color: var(--panel-3); }
.wv-home #pricing h2 .wv-em { display: block; }
.wv-home .px { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 27, 51, .07); }
.wv-home .px .ledger-h .lbl { font-size: 11px; letter-spacing: .14em; }
.wv-home .px .lrow .mono { font-size: 13.5px; color: var(--ink-2); }
.wv-home .px .lrow .mono b { margin-left: 10px; font: 600 17px var(--sans); color: var(--ink); }
.wv-home .px-year { font-size: 12.5px; }

/* ---------- last parity pass: the patch's seam, quiet links, the close as one joined card ---------- */
.wv-home .wv-patch::before { border: 2px dashed rgba(15, 27, 51, .5); }
.wv-home .rec-fu .btn-quiet, .wv-home .cx-acts .btn-quiet { display: inline; height: auto; min-height: 0; padding: 0 0 1px; line-height: 1.3; }
@media (min-width: 900px) {
  .wv-home .close { gap: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 50px 90px -44px rgba(15, 27, 51, .6); }
  .wv-home .close-start { border-radius: 0; box-shadow: none; }
  .wv-home .close-sample { border: 0; border-radius: 0; box-shadow: none; outline-offset: -12px; }
}
.wv-close-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.wv-close-acts .btn { margin-top: 0 !important; }
.wv-close-acts .close-fine { margin-top: 0; font-size: 15px; }