/* PathBit site. The page is the app's faceplate: one finish paints it (Aluminium,
   PathBit's own, unless the visitor picks another finish on the page), the display is
   a black glass window cut into it, legends are engraved lower-case Martian Mono, text is
   SF. The finish's lit colour marks the selected thing and nothing else. */

@font-face {
  font-family: "Martian Mono";
  src: url("fonts/MartianMono-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

/* Finishes, from PathBitPalette in the app. */
:root,
[data-finish="aluminium"] {
  --face: #dcdfdc;
  --rule: #c2c6c2;
  --trace: #086a5a;
  --trace-off: #9aa19d;
  --glass: #0b1110;
  --glass-lit: #5fe3c8;
  --glass-dim: #3f9382;
  --glass-off: #1f433c;
  --bezel: #5e645f;
  --bezel-lip: #ffffff;
  --text: rgba(0, 0, 0, 0.86);
  --text-2: rgba(0, 0, 0, 0.66);
  --text-3: rgba(0, 0, 0, 0.58);
  --warning: #b86e00;
  color-scheme: light;
}

[data-finish="phosphor"] {
  --face: #101716;
  --rule: #223230;
  --trace: #5fe3c8;
  --trace-off: #35625a;
  --glass: #070b0a;
  --glass-lit: #5fe3c8;
  --glass-dim: #3f9382;
  --glass-off: #1f433c;
  --bezel: #030504;
  --bezel-lip: #3d4d49;
  --text: rgba(255, 255, 255, 0.9);
  --text-2: rgba(255, 255, 255, 0.68);
  --text-3: rgba(255, 255, 255, 0.55);
  --warning: #f5a524;
  color-scheme: dark;
}

[data-finish="champagne"] {
  --face: #e0cbb0;
  --rule: #c9b194;
  --trace: #7a5424;
  --trace-off: #a8937b;
  --glass: #0c0b08;
  --glass-lit: #ffd166;
  --glass-dim: #b39a55;
  --glass-off: #3b3420;
  --bezel: #6b5947;
  --bezel-lip: #fff7ee;
  --text: rgba(0, 0, 0, 0.86);
  --text-2: rgba(0, 0, 0, 0.66);
  --text-3: rgba(0, 0, 0, 0.58);
  --warning: #b86e00;
  color-scheme: light;
}

[data-finish="amber"] {
  --face: #101010;
  --rule: #2a2a2a;
  --trace: #ffd166;
  --trace-off: #6e5f33;
  --glass: #070707;
  --glass-lit: #ffd166;
  --glass-dim: #b39a55;
  --glass-off: #3b3420;
  --bezel: #030303;
  --bezel-lip: #454545;
  --text: rgba(255, 255, 255, 0.9);
  --text-2: rgba(255, 255, 255, 0.68);
  --text-3: rgba(255, 255, 255, 0.55);
  --warning: #f5a524;
  color-scheme: dark;
}

:root {
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Sections land below the sticky header. */
section[id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--face);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

a { color: var(--trace); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--trace); outline-offset: 3px; border-radius: 3px; }

img { display: block; max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.mono { font-family: var(--mono); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* An engraved legend: lower-case mono, quiet. */
.legend {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--text-3);
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.wordmark {
  display: block;
  width: 108px;
  height: 24px;
  background: var(--trace);
  -webkit-mask: url("img/pathbit-wordmark-ink.svg") no-repeat left center / contain;
  mask: url("img/pathbit-wordmark-ink.svg") no-repeat left center / contain;
  transition: background-color 0.35s var(--ease);
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }

.nav a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}

.nav a:hover { color: var(--text); text-decoration: none; }
.nav a[aria-current="true"] { color: var(--trace); }

/* ---------- Hero: the instrument ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "text panel" "text inputs";
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 18px;
  align-items: start;
  padding-top: clamp(28px, 4.2vw, 60px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

/* Wide: the words sit as one block, centred against the panel and its inputs. Narrow:
   the wrapper steps aside so the panel can come between the headline and the rest. */
.hero-text { grid-area: text; align-self: center; }
.hero-copy { grid-area: copy; display: flex; flex-direction: column; }
.hero-info { grid-area: info; }

.hero-panel { grid-area: panel; min-width: 0; container-type: inline-size; }

h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 650;
  margin: 14px 0 22px;
  text-wrap: balance;
}

.lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--text-2); margin: 0 0 28px; max-width: 34em; text-wrap: pretty; }

.availability { margin: 0; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 14px; }
.app-icon { flex: none; width: 64px; height: 64px; }

.availability small { display: block; font-size: 14px; color: var(--text-3); margin-top: 4px; }

/* The input selector, as on an amplifier: a legend, then each input with its LED. */
.inputs { grid-area: inputs; }

.inputs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; margin-top: 10px; }

.input {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 2px 13px;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  font: 14px var(--mono);
  text-align: left;
  cursor: pointer;
}

.input:hover { color: var(--text); }
.input[aria-pressed="true"] { color: var(--text); }

.input .led { flex: none; }
.input[aria-pressed="true"] .led { background: var(--trace); }

.input { flex-wrap: wrap; row-gap: 3px; }
.input .input-name { flex: 1 1 0; min-width: 0; }
.input .what { flex-basis: 100%; padding-left: 17px; font: 13px var(--sans); color: var(--text-3); }

/* The bit: the decimal point of the "P.", slanted like the display's segments. */
.led {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--trace-off);
  transform: skewX(-8deg);
}

/* Device row above the display. */
.device { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; min-height: 52px; }
.device > span:last-child { min-width: 0; }

.device-glyph {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--glass);
  color: var(--glass-lit);
  display: grid;
  place-items: center;
}

.device-glyph svg { width: 22px; height: 22px; }

.device-name { font-size: 20px; font-weight: 600; line-height: 1.2; }

.device-source { font-size: 14px; color: var(--text-2); }

/* A window cut into the face and lit from above, built as the app builds it
   (DisplayWindowBackground): the cut's upper wall is a short shadow fading into the face,
   its sides a hairline, and its lower edge catches the light. No shadow cast, no glow. */
.cut { position: relative; isolation: isolate; border-radius: 12px; }

.cut::before,
.cut::after { content: ""; position: absolute; left: -1px; right: -1px; border-radius: 13px; transition: background 0.35s var(--ease); }

/* The lit lower edge. */
.cut::after { top: 0; bottom: -2.4px; background: var(--bezel-lip); z-index: 0; }

/* The upper wall and the side hairlines. */
.cut::before {
  top: -4.2px;
  bottom: -0.6px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bezel) 15%, transparent) 0, var(--bezel) 4.2px);
  z-index: 1;
}

.cut > * { position: relative; z-index: 2; }

/* The device tile: a smaller window of the same glass, cut less deep (depth 1.5 in the app). */
.cut-small { flex: none; border-radius: 11px; }
.cut-small::before, .cut-small::after { border-radius: 12px; }
.cut-small::before { top: -2.1px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bezel) 15%, transparent) 0, var(--bezel) 2.1px); }
.cut-small::after { bottom: -1.2px; }

/* The display window. */
.display {
  position: relative;
  background: var(--glass);
  border-radius: 12px;
  /* 16:10.4 at least, taller when a narrow column can't hold the readout. */
  min-height: 65cqi;
  padding: clamp(16px, 2.4vw, 28px) clamp(18px, 2.8vw, 32px);
  color: var(--glass-lit);
  display: flex;
  flex-direction: column;
  overflow: clip;
  transition: background-color 0.35s var(--ease);
}

.display-face { display: flex; flex-direction: column; flex: 1; }

.display-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font: 13px var(--mono); color: var(--glass-dim); }

.annunciator { display: flex; align-items: center; gap: 8px; color: var(--glass-lit); }

.annunciator .bit { width: 6px; height: 6px; background: var(--glass-lit); transform: skewX(-8deg); }
.annunciator .bit.off { background: var(--glass-off); }

.readout {
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  margin-top: auto;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.readout .digits span { transition: none; }
.readout .digits .unlit { color: var(--glass-off); }
.readout .unit { font-size: 0.22em; font-weight: 400; color: var(--glass-dim); letter-spacing: 0; }

.format { font: clamp(12px, 1.2vw, 15px) var(--mono); color: var(--glass-dim); margin-top: clamp(10px, 1.4vw, 18px); }

.ladder { display: flex; gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(10px, 1.2vw, 14px); font: clamp(11px, 1.05vw, 13px) var(--mono); color: var(--glass-dim); }

.ladder span { padding-bottom: 6px; border-bottom: 2px solid var(--glass-off); }
.ladder span.lit { color: var(--glass-lit); border-color: var(--glass-lit); }
.ladder span.range { border: 0; padding-bottom: 0; }
/* A device with no published rates keeps the row, so the window keeps its height. */
.ladder:empty::before { content: "\00a0"; padding-bottom: 6px; border-bottom: 2px solid transparent; }

/* The signal path on the display's bottom edge. */
.path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: auto; padding-top: clamp(18px, 2.6vw, 34px); }

.path .hops { position: absolute; left: 12.5%; right: 12.5%; top: calc(clamp(18px, 2.6vw, 34px) + 15px); height: 2px; display: grid; grid-template-columns: repeat(3, 1fr); }

.hop { position: relative; height: 2px; }
.hop::before { content: ""; position: absolute; inset: 0.5px 0; border-top: 1px dashed var(--glass-off); }
.hop i { position: absolute; inset: 0; background: var(--glass-lit); transform-origin: left center; transform: scaleX(0); }
.hop.lit i { transform: scaleX(1); }

.stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; z-index: 1; }

.node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass);
  border: 1.5px solid var(--glass-lit);
  color: var(--glass-lit);
}

.node svg { width: 16px; height: 16px; }
.node.unseen { border-style: dashed; border-color: var(--glass-off); color: var(--glass-dim); }
/* Not mixing: a plain ring, as in the app, when a player holds the device. */
.node.plain { border-color: var(--glass-dim); color: var(--glass-dim); }

.stage b { font: 500 11px var(--mono); color: var(--glass-lit); white-space: nowrap; }
.stage.unseen b { color: var(--glass-dim); font-weight: 400; }
.stage em { font: normal clamp(12px, 1.1vw, 14px) var(--sans); color: var(--glass-dim); }

/* The boot screen: the "P." with its segments, centred on the glass. */
.boot { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.boot[hidden] { display: none; }
.boot svg { width: clamp(60px, 8vw, 96px); height: auto; }
/* Only lit segments are drawn: unlit ones would read as an 8. */
.boot polygon { fill: transparent; }
.boot polygon.lit { fill: var(--glass-lit); }

/* Reminder of the first warning, below the display, height reserved. */
.reminder { min-height: 48px; margin-top: 14px; }

.reminder-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 15px;
}

.reminder-bar svg { flex: none; width: 17px; height: 17px; color: var(--warning); }
.reminder-bar svg.info { color: var(--text-2); }
.reminder-bar span:last-child { margin-left: auto; color: var(--text-3); font-size: 14px; }
.reminder-bar.quiet { color: var(--text-3); }
.reminder-bar.quiet span:last-child { margin-left: 0; font-size: 15px; }

/* ---------- Sections ---------- */

.section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--rule);
}

h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 650;
  margin: 0 0 18px;
  text-wrap: balance;
}

.section p { color: var(--text-2); margin: 0 0 16px; max-width: 34em; text-wrap: pretty; }

/* A wide band: heading and text above, one figure across the width. */
.band, .showroom {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--rule);
}

.band-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.band-head p { color: var(--text-2); margin: 0 0 6px; max-width: 40em; text-wrap: pretty; }
.band-head h2 { margin-bottom: 0; }

/* Reads and never does: one heading, two lists side by side. */
.section-stack { grid-template-columns: minmax(0, 1fr); }
.stack-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); }
.stack-head p { margin-top: 6px; }
.two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.two-lists .legend { display: block; margin-bottom: 12px; }

/* Rows: label and mono value over hairlines, as in the app's Details. */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }

.rows dt, .rows .label { color: var(--text-2); }

.rows .value { font: 14px/1.6 var(--mono); padding-top: 2px; }

/* Checks: a title and a line. */
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.checks li { padding: 16px 0 17px; border-bottom: 1px solid var(--rule); }

.checks strong { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.checks strong svg { margin-top: 0.22em; }
.checks strong span { display: inline; margin: 0; padding: 0; color: inherit; font-size: inherit; }

.checks strong svg { width: 16px; height: 16px; color: var(--warning); flex: none; }
/* Info-level checks wear the app's neutral info mark, not the warning triangle. */
.checks strong svg.info { color: var(--text-2); }

.checks span { display: block; color: var(--text-2); margin-top: 3px; padding-left: 26px; }

/* Screenshots of the app are windows: they get macOS's window shadow, soft and close,
   the same everywhere. The live display in the hero is drawn into the page and has none. */
:root { --window-shadow: 0 0 0 1px var(--rule), 0 1px 3px rgba(0, 0, 0, 0.06), 0 22px 44px -20px rgba(0, 0, 0, 0.32); }
.shot { border-radius: 12px; box-shadow: var(--window-shadow); }

/* Screenshots follow the page's finish: the light panel on Aluminium, the dark one otherwise. */
.shot-dark { display: none; }
[data-finish="phosphor"] .shot-light, [data-finish="amber"] .shot-light { display: none; }
[data-finish="phosphor"] .shot-dark, [data-finish="amber"] .shot-dark { display: block; }
.shot-caption { font-size: 14px; color: var(--text-3); margin: 12px 0 0; }

/* The rate macOS picks: the file's rate, the conversion, the rate that reaches the DAC. */
/* The file, the mixer and the DAC on one line: the wire runs from the file's value to the
   DAC's window, the mixer's node sits on it, its words hang below without moving it. */
.gap-figure {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) minmax(0, 440px);
  align-items: center;
  gap: 0;
}
.gap-file { padding-right: 20px; transition: opacity 0.2s var(--ease); }

.gap-cell { display: flex; flex-direction: column; gap: 10px; }

.gap-cell .legend { color: var(--text-3); }

.gap-value { font: 300 clamp(56px, 8vw, 120px)/1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.gap-value small { font-size: 0.26em; font-weight: 400; letter-spacing: 0; }

.gap-file .gap-value { color: var(--text-3); }
.gap-note { font-size: 14px; color: var(--text-3); }


.gap-dac {
  background: var(--glass);
  border-radius: 12px;
  padding: clamp(18px, 2.4vw, 30px) clamp(20px, 2.8vw, 34px);
  color: var(--glass-lit);
}

.gap-dac .legend { color: var(--glass-dim); }
.gap-dac .gap-value small { color: var(--glass-dim); }
/* The file's rate and the DAC's rate at the same size, so they compare at a glance. */
.gap-file .gap-value, .gap-dac .gap-value { font-size: clamp(48px, 6vw, 92px); }
/* The file's value keeps the width of "44.1 kHz" whatever it shows, so the mixer and the
   wire never move when the rate changes. */
.gap-file .gap-value { display: inline-block; min-width: 5.4ch; }

/* The macOS mixer between the file and the DAC, drawn as a stage of the signal path:
   dashed from the file PathBit cannot see, solid to the device it reports. */
.gap-mixer { position: relative; display: flex; justify-content: center; }
.gap-wire { display: flex; align-items: center; width: 100%; }
.wire { flex: 1; height: 0; }
.wire.unseen { border-top: 1.5px dashed var(--trace-off); }
.wire.lit { border-top: 2px solid var(--trace); }
.gap-node {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--trace);
  color: var(--trace);
  background: var(--face);
}
.gap-node svg { width: 17px; height: 17px; }
.gap-node { transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
/* While macOS converts the rate, the mixer's node is lit. */
.gap-node.converting { background: var(--trace); color: var(--face); }
/* Bypassed by a player in exclusive mode: a plain, quieter ring. */
.gap-node.bypassed { border-color: var(--text-3); color: var(--text-3); }
.gap-mixer b, .gap-mixer em { position: absolute; left: 0; right: 0; text-align: center; }
.gap-mixer b { top: calc(50% + 28px); font: 500 13px var(--mono); color: var(--text); }
.gap-mixer em { top: calc(50% + 50px); font: normal 14px var(--sans); color: var(--text-2); transition: opacity 0.2s var(--ease); }

/* Finishes: the real panel in each finish, cross-faded as in the app, and a selector. */
.finish-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.finish-shots { justify-self: center; width: min(100%, 400px); }

.finish-shots { display: grid; border-radius: 12px; box-shadow: var(--window-shadow); transition: box-shadow 0.35s var(--ease); }
/* A black faceplate needs the deeper shadow macOS gives dark windows to read off the page. */
.finish-shots[data-shown="phosphor"], .finish-shots[data-shown="amber"] {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.16), 0 26px 48px -18px rgba(0, 0, 0, 0.55);
}
.finish-shots img { grid-area: 1 / 1; width: 100%; border-radius: 12px; opacity: 0; transition: opacity 0.35s var(--ease); }
.finish-shots img.under { opacity: 1; z-index: 1; transition: none; }
.finish-shots img.active { opacity: 1; z-index: 2; }

.finishes { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }

.finish {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 15px 2px 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.finish:hover { color: var(--text); }
.finish-name { font: 14px var(--mono); }
.finish-what { grid-column: 2; font-size: 14px; color: var(--text-3); }
.finish[aria-pressed="true"] { color: var(--text); }
.finish[aria-pressed="true"] .led { background: var(--trace); }

/* Free and Pro. */
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }

.compare th, .compare td { padding: 13px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; vertical-align: middle; }

.compare thead th { font: 13px var(--mono); color: var(--text-3); border-bottom-color: var(--rule); padding-top: 0; vertical-align: bottom; }
.col-price { display: block; margin-top: 4px; font: 500 15px var(--mono); color: var(--text); white-space: nowrap; }

.compare tbody tr:first-child th, .compare tbody tr:first-child td { border-top: 1px solid var(--rule); }

.compare td { width: 22%; font: 14px var(--mono); color: var(--text-2); }

.compare .yes { display: inline-block; width: 8px; height: 8px; background: var(--trace); transform: skewX(-8deg); }

.compare .no { color: var(--text-3); }

.price-line { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.price { font: 300 clamp(40px, 4.4vw, 56px)/1 var(--mono); letter-spacing: -0.02em; color: var(--text); }
.price-line > span:last-child { font: 14px var(--mono); color: var(--text-3); }
.price .dot { margin: 0 -0.22em; }

/* FAQ. */
.faq { border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 32px 17px 0;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 15px;
  font: 300 20px var(--mono);
  color: var(--text-3);
}

.faq details[open] summary::after { content: "–"; }

.faq details p { margin: -4px 0 18px; color: var(--text-2); max-width: 40em; }
.faq-body { overflow: hidden; }
.faq .faq-more { margin: 28px 0 0; font-size: 14px; color: var(--text-3); }

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-top: 28px;
  padding-bottom: 44px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--text-3);
}

.glyph {
  width: 14px;
  height: 21px;
  background: var(--trace);
  -webkit-mask: url("img/pathbit-glyph-ink.svg") no-repeat center / contain;
  mask: url("img/pathbit-glyph-ink.svg") no-repeat center / contain;
}

.site-footer a { color: var(--text-2); }
.site-footer .spacer { flex: 1; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "copy" "panel" "inputs" "info"; row-gap: 18px; }
  /* Narrow: the headline and what PathBit is come first, then the panel and its inputs,
     then where to get it. */
  .hero { grid-template-areas: "copy" "lede" "panel" "inputs" "avail"; }
  .hero-text, .hero-info { display: contents; }
  .hero .lede { grid-area: lede; margin: 0; }
  .hero .availability { grid-area: avail; margin-top: 22px; }
  h1 { margin-bottom: 4px; }
  .hero-panel { margin-top: 14px; }
  .band-head, .stack-head, .two-lists { grid-template-columns: minmax(0, 1fr); }
  .inputs { padding-top: 0; align-self: start; }
  .section { grid-template-columns: minmax(0, 1fr); }
  .finish-stage { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav a.optional { display: none; }
  .display { aspect-ratio: auto; min-height: 340px; }
  .path .stage em { font-size: 11px; }
  .input .what { display: none; }
  /* On a phone the four inputs sit two by two, names only. */
  .inputs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .input { padding: 11px 2px 12px; font-size: 13px; border-top: 0; }
  .inputs-list .input:nth-child(-n+2) { border-top: 1px solid var(--rule); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gap-figure { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the path runs down: the file, a dashed wire to the mixer, a solid one to
     the DAC, the mixer's words beside its node. */
  .gap-file { padding-right: 0; }
  .gap-mixer { justify-content: flex-start; padding: 0; }
  /* The wire runs straight down from under the file's words to the DAC's window, its
     node flush with the text column; the mixer's words line up beside the node. */
  .gap-wire { flex-direction: column; width: 36px; }
  .gap-wire .wire { flex: none; width: 0; height: 22px; }
  .gap-wire .wire.unseen { border-top: 0; border-left: 1.5px dashed var(--trace-off); }
  .gap-wire .wire.lit { border-top: 0; border-left: 2px solid var(--trace); }
  .gap-mixer b, .gap-mixer em { left: 52px; right: auto; text-align: left; }
  .gap-mixer b { top: 22px; }
  .gap-mixer em { top: 42px; }
  .compare td { width: 26%; }
}

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

/* ---------- Added: sticky header with the rate, menu bar scene, read-only diagram, trace ---------- */

/* The header stays at the top, with a hairline once the page scrolls. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--face);
  transition: background-color 0.35s var(--ease), box-shadow 0.2s var(--ease);
}

.site-header.stuck { box-shadow: 0 1px 0 var(--rule); }

/* The app icon slides in beside the wordmark; the wordmark moves aside by transform, so
   nothing reflows. */
.header-icon {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: url("img/icon-aluminium.png") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-10px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
}
.site-header .wordmark { transition: background-color 0.35s var(--ease), transform 0.45s var(--ease); }
.site-header.with-icon .header-icon { opacity: 1; transform: none; pointer-events: auto; }
.site-header.with-icon .wordmark { transform: translateX(40px); }
@media (prefers-reduced-motion: reduce) {
  .header-icon, .site-header .wordmark { transition: none; }
}

.status-glyph {
  width: 9px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("img/pathbit-glyph-ink.svg") no-repeat center / contain;
  mask: url("img/pathbit-glyph-ink.svg") no-repeat center / contain;
}

/* The whole panel, hanging from the menu bar of a Mac. */
.menubar {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-bottom: clamp(56px, 7vw, 104px);
}

.mb-scene {
  position: relative;
  border-radius: 16px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  padding-bottom: clamp(28px, 4vw, 48px);
  overflow: hidden;
}

.mb-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  font: 500 13px var(--sans);
}

.mb-item { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; }
.mb-item svg { height: 13px; width: auto; }
.mb-p { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; transition: background-color 0.12s; }
.mb-p .status-glyph { width: 8px; height: 13px; }
.mb-scene.open .mb-p { background: color-mix(in srgb, var(--text) 16%, transparent); }

.mb-popover {
  position: relative;
  width: min(92%, 740px);
  margin: 12px 7% 0 auto;
  border-radius: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent), 0 24px 48px -18px rgba(0, 0, 0, 0.35);
  transform-origin: 78% 0;
}

.mb-popover img { border-radius: 14px; width: 100%; }

.mb-arrow {
  position: absolute;
  top: -7px;
  right: var(--arrow-right, 160px);
  width: 14px;
  height: 14px;
  background: var(--face);
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 2px 0 0 0;
}

[data-finish="phosphor"] .mb-arrow { background: #101716; }
[data-finish="amber"] .mb-arrow { background: #101716; }
[data-finish="champagne"] .mb-arrow { background: #e0cbb0; }

/* Before the section is reached, the panel waits closed; the reveal only enhances. */
.mb-scene.armed .mb-popover { opacity: 0; transform: scale(0.96) translateY(-6px); }
.mb-scene.armed.open .mb-popover { opacity: 1; transform: none; transition: opacity 0.22s var(--ease), transform 0.26s var(--ease); }

.mb-caption p { color: var(--text-2); margin: 0; text-wrap: pretty; }

/* Checks: the other checks across the width, below the panel. */
.checks-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 clamp(18px, 2.4vw, 32px);
  border-top: 0;
  margin-top: clamp(8px, 2vw, 24px);
}

.checks-grid li { border-top: 1px solid var(--rule); border-bottom: 0; padding: 16px 0 6px; }
.checks-grid span { padding-left: 0; margin-top: 6px; font-size: 15px; }

/* Read-only: the audio below, PathBit above, only reads going up. */
.ro-figure {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.ro-diagram { width: 100%; height: auto; overflow: visible; }

.ro-read { fill: none; stroke: var(--trace-off); stroke-width: 1.5; stroke-dasharray: 3 5; transition: stroke 0.12s; }
.ro-read.lit { stroke: var(--trace); }

.ro-tile { fill: var(--glass); }
.ro-glyph polygon { fill: var(--glass-lit); }

.ro-audio { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ro-node { fill: var(--face); stroke: var(--text-3); stroke-width: 1.5; transition: stroke 0.12s; }
.ro-node.lit { stroke: var(--trace); }

.ro-label { font: 13px var(--mono); fill: var(--text-2); text-anchor: middle; }

.ro-cut { border-radius: 12px; }

.ro-glass {
  background: var(--glass);
  border-radius: 12px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
  color: var(--glass-lit);
}

.ro-legend { font: 12px var(--mono); color: var(--glass-dim); }

.ro-values { margin: 14px 0 0; }
.ro-values div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--glass-off); }
.ro-values dt { font: 12px var(--mono); color: var(--glass-dim); }
.ro-values dd { margin: 0; font: 14px var(--mono); color: var(--glass-lit); text-align: right; transition: color 0.12s; }
.ro-values dd.unlit { color: var(--glass-off); }

.never {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  font: 13px var(--mono);
  color: var(--text-2);
}

.never li { display: inline-flex; align-items: center; gap: 10px; }

/* The signal trace: a line in the margin, lit down to where the reader is, dashed beyond. */
.trace { display: none; }

@media (min-width: 1380px) {
  main { position: relative; }
  .trace {
    display: block;
    position: absolute;
    left: calc((100vw - var(--max)) / 2 - 64px);
    top: var(--trace-top, 0);
    height: var(--trace-height, 0);
    width: 2px;
  }
  .trace::before { content: ""; position: absolute; inset: 0 0 0 0.5px; border-left: 1px dashed var(--trace-off); }
  .trace-lit { position: absolute; left: 0; top: 0; width: 2px; height: var(--trace-lit, 0); background: var(--trace); }
  .trace-node {
    position: absolute;
    left: -6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--face);
    border: 1.5px dashed var(--trace-off);
    transition: border-color 0.12s;
  }
  .trace-node.lit { border: 1.5px solid var(--trace); }
}

@media (max-width: 980px) {
  .menubar, .ro-figure { grid-template-columns: minmax(0, 1fr); }
  .mb-caption { order: -1; }
}

@media (max-width: 600px) {
  .status { margin-left: 12px; }
  .mb-popover { width: 94%; margin-right: 3%; }
  .mb-bar .mb-item:not(.mb-p):not(.mb-time) { display: none; }
}

.mb-compact { display: none; }
@media (max-width: 600px) {
  .mb-full { display: none; }
  .mb-compact { display: block; }
  /* On a phone the scene runs edge to edge and the panel takes most of it. */
  .mb-scene { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .mb-popover { width: min(92%, 366px); margin-right: 4%; }
}

.pro-shot { margin: 32px 0 0; max-width: 300px; }
.pro-shot img { border-radius: 12px; box-shadow: var(--window-shadow); }

/* ---------- Reveal: the checks panel rises into place once, the way the menu bar
   panel opens. Only armed when the script runs and motion is allowed (html.reveals). */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

html.reveals [data-reveal="power"]:not(.in) { opacity: 0; }
html.reveals [data-reveal="power"].in { animation: rise-in 0.7s var(--ease) both; animation-delay: var(--delay, 0s); }



/* Each section names its subject in an engraved legend, as the app's sections do. */
.section-label { display: block; margin: 0 0 12px; font: 13px var(--mono); color: var(--trace); }

@media (max-width: 600px) {
  /* One line each for the name and its source, so the row keeps its height. */
  .device { min-height: 48px; }
  .device-name, .device-source { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .device-name { font-size: 18px; }
  .device-source { font-size: 13px; }
  .device br { display: none; }
}

@media (max-width: 600px) {
  /* The read-only diagram is drawn for a wide column; on a phone its marks grow so the
     labels and lines read at the scale the screen gives it. */
  .ro-label { font-size: 24px; }
  /* Nodes keep their size in the drawing, so the wires and the arrow's tip stay clear. */
  .ro-node { stroke-width: 2.5; }
  .ro-read { stroke-width: 2.5; stroke-dasharray: 5 7; }
  .ro-audio { stroke-width: 3; }
  .ro-diagram { margin: 0 -6px; width: calc(100% + 12px); }
}

@media (max-width: 600px) {
  /* Finishes on a phone: the panel, then the four names two by two right under it, so the
     choice and the result stay on one screen. */
  .finish-stage { gap: 18px; }
  .finish-shots { width: min(100%, 330px); }
  .finishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; border-top: 0; }
  .finish { padding: 11px 2px 12px; border-bottom: 1px solid var(--rule); }
  .finish:nth-child(-n+2) { border-top: 1px solid var(--rule); }
  .finish-what { display: none; }
}

@media (max-width: 600px) {
  /* Free and Pro on a phone: narrower value columns, a gap after each feature. */
  .compare { font-size: 15px; }
  .compare th[scope="row"] { padding-right: 14px; line-height: 1.35; }
  .compare td:nth-of-type(1) { width: 52px; }
  .compare td:nth-of-type(2) { width: 104px; }
  .compare thead th:nth-child(2) { width: 52px; }
  .compare thead th:nth-child(3) { width: 104px; }
  .col-price { font-size: 14px; }
}

.footer-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }

@media (max-width: 600px) {
  /* Footer on a phone: the glyph and the notice, then the links on their own line. */
  .site-footer .spacer { flex-basis: 100%; height: 0; }
  .footer-links { gap: 10px 22px; }
}

@media (max-width: 600px) {
  /* The rate figure on a phone keeps the tablet layout: one unbroken wire down the left,
     the mixer's words beside its node, the DAC's window at full width. */
  .gap-figure > .cut { width: 100%; }

  /* The read-only diagram: labels clear of the nodes. */
  .ro-label { transform: translateY(14px); }
}

/* ---------- Text pages: support, privacy ---------- */
.page { max-width: 760px; padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(64px, 8vw, 112px); }
.page h1 { font-size: clamp(36px, 4vw, 52px); margin: 0 0 16px; }
.page .lede { margin-bottom: 8px; }
.page .updated { font: 13px var(--mono); color: var(--text-3); margin: 0 0 40px; }
.page h2 { font-size: clamp(22px, 2.2vw, 26px); margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--rule); }
.page h3 { font-size: 17px; font-weight: 600; margin: 26px 0 6px; }
.page p, .page li { color: var(--text-2); }
.page p { margin: 0 0 14px; max-width: 40em; text-wrap: pretty; }
.page ul, .page ol { margin: 0 0 16px; padding-left: 22px; }
.page li { margin-bottom: 7px; }
.page strong { color: var(--text); font-weight: 600; }
.page code { font: 0.86em var(--mono); background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 4px; padding: 1px 5px; }
.page .faq { margin-top: 8px; }
.contact-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.contact-line .legend { margin: 0; }
.contact-line a { font: 500 16px var(--mono); }

/* ---------- Japanese ---------- */
/* Kana and kanji set at the em look larger than Latin beside them. "PathBit JA" is the
   system's Hiragino for Japanese characters only (unicode-range), drawn at 93 %, so a
   Japanese line sits at the height of the Latin words in it at every size. Latin text
   falls through to the system face; Martian Mono has no Japanese glyphs. */
@font-face {
  font-family: "PathBit JA";
  src: local("Hiragino Sans W3"), local("HiraginoSans-W3"), local("Hiragino Kaku Gothic ProN W3"), local("HiraKakuProN-W3");
  font-weight: 100 500;
  size-adjust: 93%;
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family: "PathBit JA";
  src: local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"), local("HiraKakuProN-W6");
  font-weight: 600 900;
  size-adjust: 93%;
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
:root:lang(ja) {
  --sans: "PathBit JA", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --mono: "Martian Mono", "PathBit JA", ui-monospace, "SF Mono", Menlo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", monospace;
}
html:lang(ja) body { line-height: 1.8; line-break: strict; }
/* Headlines break only at the <wbr> placed by hand. */
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3 {
  letter-spacing: 0;
  font-feature-settings: "palt";
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html:lang(ja) h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.3; }
html:lang(ja) h2 { font-size: clamp(23px, 2.5vw, 32px); line-height: 1.4; }
html:lang(ja) .page h1 { font-size: clamp(28px, 3.4vw, 42px); }
html:lang(ja) .page h2 { font-size: clamp(19px, 2vw, 23px); }
html:lang(ja) .lede, html:lang(ja) .section p, html:lang(ja) .page p { max-width: 36em; }
html:lang(ja) summary { line-height: 1.6; }
html:lang(ja) .compare th[scope="row"] { word-break: keep-all; overflow-wrap: anywhere; }

/* The panel's tabs, one after the other: the left column is the same in every shot, so
   only the inspector changes. Each new shot fades in above the last, so nothing shows
   through. The tabs on the image switch it, as in the app. */
.mb-tabs { position: relative; aspect-ratio: 740 / 536; }
.mb-tabs img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 0.32s var(--ease); }
.mb-tabs img.shown { opacity: 1; }
.mb-tabs img.over { z-index: 1; }
.mb-tab-hits { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mb-tab-hits button {
  position: absolute;
  left: var(--x);
  width: var(--w);
  top: 7.6%;
  height: 6%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.mb-tab-hits button:focus-visible { outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .mb-tabs img { transition: none; } }

/* Read-only figure in motion, once: the audio line draws from the app to the device and
   each node with its label arrives as the line reaches it; then each read draws up from
   its node to PathBit, the node lights, and its value fades up on the glass. */
.ro-figure { --swing: cubic-bezier(0.65, 0, 0.35, 1); }
.ro-read-lit { stroke: var(--trace); }
.ro-draw { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--swing); }
.ro-draw.on { stroke-dashoffset: 0; }
.ro-node { transform-box: fill-box; transform-origin: center; transition: stroke 0.6s var(--ease); }
.ro-figure.armed .ro-flow { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ro-figure.armed .ro-arrow { opacity: 0; }
.ro-figure.armed .ro-node { opacity: 0; transform: scale(0.55); }
.ro-figure.armed .ro-label { opacity: 0; }
.ro-figure.flowing .ro-flow { stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s var(--swing); }
.ro-figure.flowing .ro-arrow { opacity: 1; transition: opacity 0.5s var(--ease) 1.45s; }
.ro-figure.flowing .ro-node {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease) calc(var(--i, 0) * 0.47s), transform 0.8s var(--ease) calc(var(--i, 0) * 0.47s), stroke 0.6s var(--ease);
}
.ro-figure.flowing .ro-label { opacity: 1; transition: opacity 0.7s var(--ease) calc(var(--i, 0) * 0.47s + 0.15s); }
.ro-values dd { transition: color 0.8s var(--ease); }

/* Pro table: the marks wait unlit, hollow like an indicator that is off, then light row
   by row: they fill, flash brighter for an instant as an LED does at power-on, and settle.
   No glow or blur: the flash is the mark's own colour, lightened. */
@keyframes mark-on {
  0% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--trace-off); }
  35% { background: color-mix(in srgb, var(--trace) 55%, transparent); box-shadow: inset 0 0 0 1.5px var(--trace); }
  60% { background: color-mix(in srgb, var(--trace) 55%, #ffffff); box-shadow: inset 0 0 0 1.5px transparent; }
  100% { background: var(--trace); box-shadow: inset 0 0 0 1.5px transparent; }
}
.compare.armed .yes { background: transparent; box-shadow: inset 0 0 0 1.5px var(--trace-off); }
.compare.armed.lit .yes { background: var(--trace); box-shadow: none; animation: mark-on 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }

/* Hero inputs: two by two when the panel column is too narrow for four. */
@media (min-width: 981px) and (max-width: 1180px) {
  .inputs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Checks: the compact panel, its warning pressed, then the panel unrolls to Checks, as the
   app does. Sizes are fractions of the stage (cqi), so the frame grows from one shot's
   size to the other's: 366×448 and 740×678 in a 740-wide stage. */
.checks-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.checks-text p { color: var(--text-2); margin: 0; max-width: 34em; text-wrap: pretty; }
.checks-band .checks-grid { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px); }
/* The panel unrolls within its column, so the full panel stays on screen beside the text. */
.reset-stage { width: 100%; margin: 0; container-type: inline-size; }
@media (max-width: 980px) {
  .checks-band { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 5vw, 40px); }
  .reset-stage { width: min(100%, 740px); margin: 0 auto; }
}
.reset-frame {
  --cw: 49.46cqi; --ch: 60.54cqi; --fw: 100cqi; --fh: 91.62cqi;
  position: relative;
  width: var(--cw);
  height: var(--ch);
  /* The open panel's room is kept, so the page below never moves as it unrolls and folds;
     closed, the panel sits in the middle of that room and unrolls both ways. */
  margin: calc((var(--fh) - var(--ch)) / 2) auto;
  border-radius: 12px;
  box-shadow: var(--window-shadow);
  overflow: hidden;
  transition: width 0.6s var(--ease), height 0.6s var(--ease), margin 0.6s var(--ease);
}
.reset-frame img { position: absolute; top: 0; left: 50%; max-width: none; transform: translateX(-50%); transition: opacity 0.4s var(--ease); }
.reset-compact { width: var(--cw); }
.reset-full { width: var(--fw); opacity: 0; }
.reset-checks { display: none; }
.reset-press {
  position: absolute;
  left: 4.4%; top: 90.85%; width: 91.2%; height: 5.5%;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  opacity: 0;
  transition: opacity 0.12s;
}
.reset-stage.pressing .reset-press { opacity: 1; }
.reset-stage.open .reset-frame { width: var(--fw); height: var(--fh); margin: 0 auto; }
.reset-stage.open .reset-compact { opacity: 0; }
.reset-stage.open .reset-full { opacity: 1; }
.reset-stage.open .reset-press { display: none; }
.reset-stage .shot-caption { text-align: center; margin-top: 0; padding-top: 12px; }
/* A phone keeps the compact panel; the pressed warning opens a small sheet under it with
   the app's words for that warning alone. The sheet's room is kept, so nothing moves. */
.reset-sheet { display: none; }
@media (max-width: 600px) {
  .reset-stage { width: min(100%, 368px); }
  .reset-frame { --cw: 99.46cqi; --ch: 121.74cqi; --fw: 99.46cqi; --fh: 121.74cqi; }
  .reset-full { display: none; }
  .reset-stage.open .reset-compact { opacity: 1; }
  .reset-sheet {
    display: block;
    width: 99.46cqi;
    margin: 10px auto 0;
    padding: 14px 10px 10px;
    border-radius: 12px;
    background: var(--face);
    box-shadow: var(--window-shadow);
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
  }
  .reset-stage.open .reset-sheet { opacity: 1; transform: none; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
  .reset-sheet img { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .reset-frame, .reset-frame img { transition: none; }
}

/* The two shots never show at once: the one leaving fades out quickly, the one arriving
   fades in just after, so the panel never reads as a double exposure. */
.reset-frame .reset-compact { transition: opacity 0.4s var(--ease) 0.18s; }
.reset-frame .reset-full, .reset-frame .reset-checks { transition: opacity 0.18s var(--ease); }
.reset-stage.open .reset-compact { transition: opacity 0.18s var(--ease); }
.reset-stage.open .reset-full, .reset-stage.open .reset-checks { transition: opacity 0.4s var(--ease) 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .reset-frame .reset-compact, .reset-frame .reset-full, .reset-frame .reset-checks, .reset-sheet { transition: none !important; }
}

/* On a phone the first screen holds the headline and the whole panel, with room around
   them; the inputs follow the panel they switch, then what PathBit is and the store. */
@media (max-width: 600px) {
  .hero { grid-template-areas: "copy" "panel" "inputs" "lede" "avail"; }
  .hero .display { min-height: 0; }
  .hero .lede { margin-top: 18px; }
}

/* Phone widths: the path's labels stay on one line each, at a size that leaves room
   between them. */
@media (max-width: 420px) {
  .hero .stage b { font-size: 10px; }
  .hero .stage em { font-size: 11px; white-space: nowrap; }
}

/* Keeps a short closing phrase together so a line never ends on a lone character. */
.nobr { white-space: nowrap; }