/* ==========================================================================
   Audio Recorder Voice — design tokens

   Direction: a clean professional instrument. White panels floating on a
   pale cool ground, hairline rules, generous air, and a single deep blue
   carrying every interactive state. Record red appears in exactly one
   place — the recording state — because that is the one colour convention
   every person already knows from hardware.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces */
  --page: #f7f8fa;
  --panel: #ffffff;
  --fill: #f3f5f8;
  --fill-deep: #eaeef4;

  /* Text */
  --ink: #10151c;
  --slate: #576070;
  --mute: #646e7c;   /* 4.86:1 on --page, 4.73:1 on --fill */

  /* Rules */
  --line: #e5e9ef;
  --line-strong: #d4dae3;

  /* Signal */
  --accent: #2450c8;
  --accent-deep: #1c3f9f;
  --accent-wash: #eff3fd;
  --rec: #d8323f;
  --rec-wash: #fdeff0;
  --warn: #8a6508;   /* 5.32:1 on --panel */

  /* Instrument display — light, matching the rest of the surface */
  --scope: #f4f6fa;
  --scope-grid: #dde3ec;
  --scope-wave: #7b8698;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 70rem;
  --radius: 8px;
  --radius-sm: 5px;

  --shadow-sm: 0 1px 2px rgba(16, 21, 28, 0.04);
  --shadow: 0 1px 3px rgba(16, 21, 28, 0.05), 0 8px 24px -12px rgba(16, 21, 28, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0313rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.8rem 1.1rem;
  z-index: 99;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus {
  left: 0;
}

/* --------------------------------------------------------------- headings */

h1,
h2,
h3,
h4 {
  font-family: var(--sans);
  line-height: 1.18;
  letter-spacing: -0.019em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  color: var(--ink);
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 600;
  margin-top: 3rem;
}
h3 {
  font-size: 1.09rem;
  font-weight: 600;
  margin-top: 2rem;
  letter-spacing: -0.012em;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
.card__t,
.path__v {
  overflow-wrap: break-word;
}

.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.22rem);
  color: var(--slate);
  line-height: 1.62;
  max-width: 60ch;
  font-weight: 400;
}

/* The eyebrow states the page's slot in the site structure. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.85rem;
  display: block;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rec);
  flex: none;
}
.nav {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.nav a {
  font-size: 0.875rem;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover {
  color: var(--ink);
}
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 550;
}
/* ---------------------------------------------------------- mobile menu */

.mnav {
  display: none;
}
.mnav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
}
.mnav > summary::-webkit-details-marker {
  display: none;
}
.mnav__bars,
.mnav__bars::before,
.mnav__bars::after {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}
.mnav__bars {
  position: relative;
}
.mnav__bars::before,
.mnav__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.mnav__bars::before {
  top: -5px;
}
.mnav__bars::after {
  top: 5px;
}
.mnav[open] > summary {
  background: var(--fill);
  border-color: var(--mute);
}

.mnav__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  z-index: 40;
  width: min(19rem, 100%);
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 8px rgba(16, 21, 28, 0.06), 0 18px 44px -18px rgba(16, 21, 28, 0.28);
  padding: 0.5rem 0;
}
.mnav__head {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0.65rem 0 0.15rem;
  padding: 0 1.05rem;
  max-width: none;
}
.mnav__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.05rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.94rem;
}
.mnav__panel a:hover,
.mnav__panel a:focus-visible {
  background: var(--fill);
}
.mnav__panel a[aria-current="page"] {
  color: var(--accent);
  font-weight: 550;
  box-shadow: inset 2px 0 0 var(--accent);
}

@media (max-width: 60rem) {
  .nav {
    display: none;
  }
  .mnav {
    display: block;
  }
}

/* --------------------------------------------------------- breadcrumb trail */

.crumbs {
  font-size: 0.8rem;
  color: var(--mute);
  padding: 1.35rem 0 0;
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.crumbs li::after {
  content: "/";
  margin-left: 0.45rem;
  color: var(--line-strong);
}
.crumbs li:last-child::after {
  content: "";
}
.crumbs a {
  color: var(--mute);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================ THE RECORDER
   Signature element. The hero is the working instrument rather than a
   headline above a button — a white deck with a light scope, mono readout
   and a level meter, sitting on the page like a piece of equipment.
   ========================================================================= */

.hero {
  padding-block: clamp(1.75rem, 4vw, 3rem) 0;
}

.deck {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 1.75rem 0 0;
}

.deck__scope {
  position: relative;
  width: 100%;
  background: var(--scope);
  border-bottom: 1px solid var(--line);
  height: clamp(96px, 13vw, 140px);
}
.deck__scope canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.readout {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--mono);
}
.readout__spacer {
  flex: 1 1 auto;
}
.readout__label {
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
}
.readout__time {
  font-size: 1.32rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 500;
  line-height: 1;
}
.readout__state {
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  white-space: nowrap;
}
.readout__state[data-state="recording"] {
  color: var(--rec);
}
.readout__state[data-state="paused"] {
  color: var(--warn);
}
.readout__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.readout__state[data-state="recording"]::before {
  animation: blip 1.1s steps(1, end) infinite;
}
@keyframes blip {
  50% {
    opacity: 0.2;
  }
}

.meter {
  width: clamp(70px, 16vw, 150px);
  height: 5px;
  background: var(--fill-deep);
  border-radius: 3px;
  overflow: hidden;
  flex: none;
}
.meter__fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) 62%,
    #d99b0c 84%,
    var(--rec) 100%
  );
  transition: width 60ms linear;
}

/* ------------------------------------------------------------- transport */

.transport {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 1rem 1.1rem;
  background: var(--panel);
}

.btn {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.btn:hover:not(:disabled) {
  background: var(--fill);
  border-color: var(--mute);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--rec {
  background: var(--rec);
  border-color: var(--rec);
  color: #fff;
}
.btn--rec:hover:not(:disabled) {
  background: #bf2734;
  border-color: #bf2734;
}
.btn--rec::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.btn--save {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--save:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.transport__spacer {
  flex: 1 1 auto;
}

.picker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.picker select {
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  max-width: 15rem;
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------- take list */

.takes {
  padding: 0 1.1rem;
}
.takes:empty {
  display: none;
}
.take {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.take__meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
  min-width: 9rem;
}
.take audio {
  flex: 1 1 14rem;
  height: 34px;
  min-width: 0;
}

.status {
  max-width: none;
  font-size: 0.83rem;
  line-height: 1.6;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--slate);
  background: var(--fill);
  margin: 0;
}
.status[data-tone="error"] {
  background: var(--rec-wash);
  color: #99202c;
}
.status[data-tone="ok"] {
  background: var(--accent-wash);
  color: var(--accent-deep);
}

/* =============================================== SIGNAL PATH (trust device)
   The privacy claim drawn as a signal chain terminating at the reader's own
   disk. The struck-through fourth node is the entire positioning.
   ========================================================================= */

.path {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  margin: 1.75rem 0;
  box-shadow: var(--shadow-sm);
}
.path__node {
  flex: 1 1 0;
  padding: 1.05rem 1.15rem;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.path__node:last-child {
  border-right: 0;
}
.path__node--dead {
  background: var(--fill);
  color: var(--mute);
}
.path__k {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
  display: block;
  margin-bottom: 0.35rem;
}
.path__v {
  font-weight: 550;
  font-size: 0.95rem;
  letter-spacing: -0.014em;
  display: block;
  line-height: 1.35;
}
.path__node--dead .path__v {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--rec);
  color: var(--mute);
}
@media (max-width: 42rem) {
  .path {
    flex-direction: column;
  }
  .path__node {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .path__node:last-child {
    border-bottom: 0;
  }
}

/* ----------------------------------------------------------------- prose */

.prose {
  padding-block: 0.5rem 4rem;
}
.prose ul,
.prose ol {
  max-width: 68ch;
  padding-left: 1.2rem;
  margin: 0 0 1.3em;
}
.prose li {
  margin-bottom: 0.5em;
}
.prose ul li::marker {
  color: var(--line-strong);
}
.prose ol {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}
.prose ol > li {
  counter-increment: step;
  padding-left: 2.5rem;
  position: relative;
  margin-bottom: 0.7em;
}
.prose ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.24em;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
}
.prose strong {
  font-weight: 600;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  overflow-wrap: anywhere;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.36em;
  color: var(--slate);
}

/* --------------------------------------------------------------- spec box */

.spec {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0.25rem 1.25rem;
  margin: 1.75rem 0;
  box-shadow: var(--shadow-sm);
}
.spec dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
}
.spec dt,
.spec dd {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.spec dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mute);
  padding-right: 1.25rem;
  line-height: 1.5;
}
.spec dd {
  font-size: 0.94rem;
  color: var(--slate);
}
.spec dl > dt:nth-last-of-type(1),
.spec dl > dd:nth-last-of-type(1) {
  border-bottom: 0;
}
@media (max-width: 36rem) {
  .spec dl {
    grid-template-columns: 1fr;
  }
  .spec dt {
    padding-bottom: 0.15rem;
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------------ table */

.tbl-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);

  /* Scroll shadows. The two solid covers are attached `local` so they travel
     with the content; the two shadows are `scroll` so they stay pinned. When
     there is nothing to scroll the covers sit exactly on the shadows and hide
     them, so the cue appears only on the edge that actually has more table. */
  background:
    linear-gradient(to right, var(--panel) 40%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--panel) 40%, rgba(255, 255, 255, 0)) right center,
    linear-gradient(to right, rgba(16, 21, 28, 0.13), rgba(16, 21, 28, 0)) left center,
    linear-gradient(to left, rgba(16, 21, 28, 0.13), rgba(16, 21, 28, 0)) right center;
  background-color: var(--panel);
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.91rem;
}
th,
td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  background: var(--fill);
}
td {
  color: var(--slate);
}
td:first-child {
  color: var(--ink);
  font-weight: 500;
}
tbody tr:last-child td {
  border-bottom: 0;
}

/* -------------------------------------------------------------------- FAQ */

.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  margin-top: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.faq details + details {
  border-top: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 550;
  font-size: 1rem;
  letter-spacing: -0.012em;
  list-style: none;
  position: relative;
  transition: background 120ms ease;
}
.faq summary:hover {
  background: var(--fill);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  top: 1.35rem;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--mute);
  border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  top: 1.55rem;
}
.faq details > div {
  padding: 0 1.25rem 1.2rem;
  color: var(--slate);
}
.faq details > div > p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------- link cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0.85rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
}
.cards li {
  margin: 0;
}
.card {
  display: block;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(36, 80, 200, 0.06), 0 10px 24px -14px rgba(36, 80, 200, 0.3);
  transform: translateY(-1px);
}
.card__t {
  font-weight: 600;
  letter-spacing: -0.016em;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.97rem;
}
.card__d {
  font-size: 0.855rem;
  color: var(--slate);
  line-height: 1.55;
  display: block;
}

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

.foot {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 3rem 0 2.25rem;
  margin-top: 1rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem 1.75rem;
}
.foot h2 {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.85rem;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot li {
  margin-bottom: 0.4rem;
}
.foot a {
  color: var(--slate);
  text-decoration: none;
  font-size: 0.875rem;
}
.foot a:hover {
  color: var(--accent);
}
.foot__base {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--mute);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.noscript {
  background: var(--rec-wash);
  border: 1px solid #f2c4c9;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin: 1rem;
  font-size: 0.9rem;
  color: #99202c;
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints are chosen where the layout actually breaks, not at device
   names: 60rem is where the desktop nav stops fitting, 48rem is where the
   four-node signal path gets too narrow to read, 34rem is phone territory.
   ========================================================================== */

/* ------------------------------------------------- tablet (up to 1024px) */

@media (max-width: 64rem) {
  :root {
    --wrap: 60rem;
  }
  h2 {
    margin-top: 2.5rem;
  }
}

@media (max-width: 48rem) {
  /* Four nodes side by side fall under ~170px each on a tablet, which is too
     narrow for the labels. Two-by-two keeps the chain readable. */
  .path {
    flex-wrap: wrap;
  }
  .path__node {
    flex: 1 1 50%;
    min-width: 12rem;
  }
  .path__node:nth-child(2n) {
    border-right: 0;
  }
  .path__node:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

/* -------------------------------------------------- phones (up to 34rem) */

@media (max-width: 34rem) {
  body {
    font-size: 1rem;
    line-height: 1.65;
  }

  h1 {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }
  h2 {
    font-size: 1.3rem;
    margin-top: 2.25rem;
  }
  h3 {
    font-size: 1.05rem;
  }
  .lede {
    font-size: 1.05rem;
  }

  .hero {
    padding-block: 1.5rem 0;
  }
  .prose {
    padding-block: 0.25rem 2.5rem;
  }

  /* Transport: three equal thumb-sized buttons on one row, controls below. */
  .transport {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.85rem;
  }
  .transport .btn {
    justify-content: center;
    padding-inline: 0.5rem;
    min-height: 46px;
  }
  .transport__spacer {
    display: none;
  }
  .picker {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    gap: 0.6rem;
  }
  .picker select {
    max-width: none;
    width: 100%;
    min-height: 44px;
  }

  .readout {
    padding: 0.7rem 0.85rem;
    gap: 0.6rem;
  }
  .readout__time {
    font-size: 1.15rem;
  }
  .readout__label {
    display: none;
  }
  .meter {
    width: 56px;
  }

  /* Take rows: metadata on its own line, then a full-width player, then two
     equal buttons. Wrapping flex produced ragged half-width controls. */
  .take {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.85rem 0;
  }
  .take__meta {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .take audio {
    grid-column: 1 / -1;
    width: 100%;
  }
  .take .btn {
    justify-content: center;
    min-height: 44px;
  }

  .status {
    padding: 0.75rem 0.85rem;
  }
  .takes {
    padding-inline: 0.85rem;
  }

  /* Signal path stacks fully; reset the 2x2 borders from the tablet rule. */
  .path {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .path__node,
  .path__node:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.85rem 1rem;
  }
  .path__node:last-child {
    border-bottom: 0;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  th,
  td {
    padding: 0.65rem 0.75rem;
  }
  table {
    font-size: 0.875rem;
  }

  .faq summary {
    padding: 0.95rem 2.75rem 0.95rem 1rem;
    font-size: 0.96rem;
    min-height: 44px;
  }
  .faq summary::after {
    right: 1.1rem;
  }
  .faq details > div {
    padding: 0 1rem 1.1rem;
  }

  .spec {
    padding-inline: 1rem;
  }

  .prose ol > li {
    padding-left: 2.2rem;
  }

  /* Footer: two columns, and links get a real tap target rather than the
     22px line boxes they had. */
  .foot {
    padding: 2.25rem 0 1.75rem;
  }
  .foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }
  .foot__base {
    margin-top: 1.75rem;
    font-size: 0.76rem;
  }

  .crumbs {
    padding-top: 1rem;
    font-size: 0.76rem;
  }
}

/* --------------------------------------------- very small phones (320px) */

@media (max-width: 22.5rem) {
  .wrap {
    padding-inline: 1rem;
  }
  .brand {
    font-size: 0.9rem;
  }
  .transport .btn {
    font-size: 0.8rem;
    gap: 0.35rem;
  }
  .foot__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ touch input
   Hover styles that stick after a tap look like a stuck selection on touch
   devices, and 16px is the threshold below which iOS Safari zooms on focus. */

@media (hover: none) {
  .card:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
  }
  .btn:hover:not(:disabled) {
    background: var(--panel);
    border-color: var(--line-strong);
  }
  .faq summary:hover {
    background: transparent;
  }
}

@media (min-width: 34.0625rem) and (max-width: 64rem) {
  .transport__spacer {
    display: none;
  }
  .transport .picker {
    flex: 1 1 15rem;
    justify-content: flex-end;
  }
  .transport .picker select {
    flex: 0 1 13rem;
  }
}

@media (max-width: 48rem) {
  .picker select,
  .btn {
    font-size: 16px;
  }
  .brand,
  .mnav > summary {
    min-height: 44px;
  }
}

/* -------------------------------------------------- touch target sizing
   Applied by viewport rather than pointer type: tablets report a mouse when
   docked, and the links still need to work under a thumb. Inline links inside
   sentences are deliberately left alone — WCAG exempts them, and padding them
   out would wreck the line rhythm of the body copy. */

@media (max-width: 64rem) {
  .foot a {
    display: flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.3;
  }
  .foot li {
    margin-bottom: 0;
  }

  /* Breadcrumbs were 15px tall, under even the 24px AA minimum. */
  .crumbs ol {
    gap: 0.15rem 0.45rem;
  }
  .crumbs a,
  .crumbs li > span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
  }
}

/* ------------------------------------------------- visually hidden
   Text that screen readers announce but sighted users do not see. Used for
   table captions and for header cells that are blank by design, both of
   which are WCAG failures if left genuinely empty. */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A scrollable region must be reachable by keyboard (WCAG 2.1.1). Giving it a
   tabindex makes it focusable, so the focus ring needs to be visible. */
.tbl-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ legal notice */
.notice {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 1.05rem 1.2rem 0.35rem;
  margin: 1.75rem 0;
  box-shadow: var(--shadow-sm);
}
.notice__t {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--warn);
  margin: 0 0 0.55rem;
  max-width: none;
}
.notice p:last-child { margin-bottom: 0.8rem; }
.notice ul { margin-bottom: 0.9rem; }

/* Trade mark attribution. Small, but it must be legible — small print that
   fails contrast is worse than no small print. --mute is 4.86:1 here. */
.foot__legal {
  margin: 1rem 0 0;
  max-width: 80ch;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--mute);
}

/* ------------------------------------------------------ sibling navigation */
.siblings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.15rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.25rem;
  max-width: none;
}
.siblings li {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.siblings a {
  text-decoration: none;
  font-weight: 500;
}
.siblings a:hover {
  text-decoration: underline;
}