/* Ink to text: a deep-ink hero where a handwritten page turns into typed text,
   then light sections that prove it with real before/after pages. */
:root {
  --night: #0b1124;
  --night-glow: rgb(58 92 255 / 34%);
  --on-night: #ffffff;
  --on-night-muted: rgb(255 255 255 / 74%);
  --on-night-line: rgb(255 255 255 / 16%);
  --bg: #f5f6fb;
  --card: #ffffff;
  --ink: #11172b;
  --muted: #59627a;
  --line: #e2e5ef;
  --pen: #3a5cff;
  --pen-ink: #ffffff;
  --pen-soft: #e9edff;
  --marker: #ffd94a;
  --typed-bg: #fffdf9;
  --typed-ink: #1b2033;
  --danger: #b3261e;
  --ok: #1f7a45;
  --radius: 16px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1222;
    --card: #161b2e;
    --ink: #eef0f7;
    --muted: #a3abc2;
    --line: #262d45;
    --pen: #7d95ff;
    --pen-ink: #0b1124;
    --pen-soft: #1c2547;
    --typed-bg: #fbf8f1;
    --typed-ink: #1b2033;
    --danger: #ff8a80;
    --ok: #7fd49c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
img { max-width: 100%; }
a { color: var(--pen); }

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); font-weight: 800; margin: 0 0 18px; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 800; margin: 0 0 14px; }
h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.hl { background: linear-gradient(transparent 68%, rgb(255 217 74 / 55%) 68%, rgb(255 217 74 / 55%) 94%, transparent 94%); }
.eyebrow { margin: 0 0 14px; font: 600 0.78rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pen); }

.site-header, .hero, main, .site-footer { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---- the night band: header and hero --------------------------------------- */
.night {
  color: var(--on-night);
  background:
    radial-gradient(900px 520px at 85% -8%, var(--night-glow), transparent 62%),
    radial-gradient(700px 420px at -8% 105%, rgb(255 217 74 / 10%), transparent 60%),
    var(--night);
  overflow: hidden;
}
.night a, .night .link { color: var(--on-night); }
.night .eyebrow { color: var(--marker); }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.night .brand { color: var(--on-night); }
.brand img { border-radius: 7px; }
.site-header nav { display: flex; gap: 22px; align-items: center; font-size: 0.95rem; }
.site-header nav a, .site-header nav .link { text-decoration: none; opacity: 0.88; }
.site-header nav a:hover, .site-header nav .link:hover { opacity: 1; text-decoration: underline; }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; padding-top: 28px; padding-bottom: 88px; }
.hero h1 { color: var(--on-night); }
.sub { font-size: 1.2rem; color: var(--on-night-muted); max-width: 36rem; margin: 0 0 28px; }

.tool {
  background: var(--card);
  color: var(--ink);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 2px 0 rgb(255 255 255 / 10%) inset, 0 24px 60px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 8%);
}
.tool a, .tool .link { color: var(--pen); }
.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 188px;
  padding: 24px;
  border: 2px dashed color-mix(in srgb, var(--pen) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--pen-soft) 55%, transparent);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.drop:hover, .drop.dragging { border-color: var(--pen); background: var(--pen-soft); }
.drop.dragging { transform: scale(1.01); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop:focus-within { outline: 3px solid var(--pen); outline-offset: 3px; }
.drop-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.drop-hint { color: var(--muted); font-size: 0.95rem; }
.drop .button { margin-top: 6px; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; padding: 0; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--on-night-line); border-radius: 999px; color: var(--on-night-muted); font-size: 0.9rem; }
.chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marker); }

/* The hero demo: a real page and the text HandToText returned for it. */
.hero-demo { position: relative; min-height: 690px; }
.demo-photo { position: absolute; left: 0; top: 0; width: min(390px, 80%); margin: 0; border-radius: 10px; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 30px 70px rgb(0 0 0 / 55%); }
.demo-photo img { display: block; width: 100%; height: auto; }
.scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgb(58 92 255 / 0%), rgb(58 92 255 / 22%) 70%, rgb(170 190 255 / 85%) 97%, rgb(255 255 255 / 0%));
  border-bottom: 2px solid rgb(200 212 255 / 95%);
  mix-blend-mode: screen;
  transform: translateY(-110%);
  animation: scan 5.5s cubic-bezier(0.45, 0, 0.3, 1) 0.4s infinite;
}
@keyframes scan {
  0% { transform: translateY(-110%); opacity: 1; }
  55% { transform: translateY(460%); opacity: 1; }
  62%, 100% { transform: translateY(460%); opacity: 0; }
}
.demo-typed {
  position: absolute;
  right: 0;
  bottom: 84px;
  width: min(360px, 78%);
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: var(--typed-bg);
  color: var(--typed-ink);
  transform: rotate(2.5deg);
  box-shadow: 0 30px 70px rgb(0 0 0 / 50%), 0 0 0 1px rgb(0 0 0 / 6%);
}
.demo-typed-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 0.72rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #3a5cff; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #1fb866; box-shadow: 0 0 0 0 rgb(31 184 102 / 60%); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 9px rgb(31 184 102 / 0%); } }
.demo-lines p { margin: 0 0 10px; font: 1.02rem/1.5 var(--serif); opacity: 0; transform: translateY(6px); animation: line-in 0.5s ease-out forwards; animation-delay: calc(1.3s + var(--i) * 0.6s); }
.demo-lines p:last-child { margin-bottom: 0; }
@keyframes line-in { to { opacity: 1; transform: none; } }
.demo-caption { position: absolute; left: 0; bottom: 0; margin: 0; font: 0.8rem/1.45 var(--mono); color: var(--on-night-muted); max-width: 52%; }

/* ---- the visitor's own pages -------------------------------------------------- */
main { padding-bottom: 24px; }
section { padding: 72px 0; }
.workspace { padding: 0; }
.workspace .queue { margin-top: 36px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(17 23 43 / 6%); scroll-margin-top: 16px; }
.workspace .paywall { margin-top: 24px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: 700 1rem var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--pen); border-color: var(--pen); color: var(--pen-ink); box-shadow: 0 8px 22px color-mix(in srgb, var(--pen) 35%, transparent); }
.button.large { min-height: 54px; padding: 0 26px; font-size: 1.08rem; }
.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.button:focus-visible, .link:focus-visible, summary:focus-visible, [role="tab"]:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.night .button:focus-visible, .night .link:focus-visible, .night a:focus-visible { outline-color: var(--marker); }

.link { background: none; border: 0; padding: 0; color: var(--pen); font: inherit; text-decoration: underline; cursor: pointer; }

.standing { margin: 12px 0 2px; color: var(--muted); font-size: 0.95rem; text-align: center; }
.error { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
/* The human check and the tool's errors can start from the page list or the
   pricing section, far from the hero they sit in, so both float over whatever
   the visitor is looking at. The consent banner holds the bottom of the screen. */
.human-check, #tool-error { position: fixed; top: 16px; left: 50%; z-index: 40; transform: translateX(-50%); margin: 0; box-shadow: 0 12px 40px rgb(11 17 36 / 35%); }
.human-check { display: flex; justify-content: center; padding: 10px; border-radius: 12px; background: var(--card); }
.human-check[hidden] { display: none; }
#tool-error { width: max-content; max-width: min(560px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--danger); text-align: center; }

.pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.page { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.thumb { width: 84px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.page-name { color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.page-status { font-size: 0.9rem; color: var(--pen); font-weight: 600; }
.remove { margin-left: auto; font-size: 0.9rem; }
.page textarea { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--typed-bg); color: var(--typed-ink); font: 1rem/1.55 var(--serif); resize: vertical; }
.queue-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.results-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.export-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.copy-status { color: var(--ok); font-size: 0.9rem; }
.toggle { display: inline-flex; gap: 8px; align-items: center; font-size: 0.95rem; }

.paywall { padding: 24px; background: var(--card); border: 2px solid var(--pen); border-radius: var(--radius); }
.paywall h2 { font-size: 1.7rem; }
.paywall-reason { margin: 0 0 12px; font-weight: 700; }
.packs { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pack { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 30px rgb(17 23 43 / 5%); }
.pack-units { font-size: 1.15rem; font-weight: 700; color: var(--muted); }
.pack-price { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; min-height: 1.3em; }
.fine { color: var(--muted); font-size: 0.88rem; }

.section-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.section-head p { margin: 0; color: var(--muted); font-size: 1.1rem; }

/* ---- before and after ----------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 36px; }
.tabs [role="tab"] { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 0.95rem var(--sans); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tabs [role="tab"]:hover { border-color: var(--pen); }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.example { display: grid; gap: 28px; }
.example[hidden] { display: none; }
.example-text { text-align: center; max-width: 640px; margin: 0 auto; }
.example-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; }
.example-text p { color: var(--muted); font-size: 1.06rem; margin: 0; }

/* A sample page and the text HandToText returned for it, side by side. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 28px; align-items: center; width: 100%; max-width: 920px; margin: 0 auto; }
.pair-before, .pair-after { position: relative; margin: 0; aspect-ratio: var(--ratio); border-radius: 16px; overflow: hidden; }
.pair-before { box-shadow: 0 26px 60px rgb(17 23 43 / 22%); transform: rotate(-1.5deg); background: #222; }
.pair-before img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pair-before .scan { height: 18%; animation: none; opacity: 0; }
.pair.is-playing .pair-before .scan { animation: pair-scan 1.5s cubic-bezier(0.45, 0, 0.3, 1) forwards; }
@keyframes pair-scan {
  0% { transform: translateY(-110%); opacity: 1; }
  90% { transform: translateY(560%); opacity: 1; }
  100% { transform: translateY(560%); opacity: 0; }
}
.pair-after {
  display: flex;
  align-items: center;
  container-type: size;
  background: var(--typed-bg);
  color: var(--typed-ink);
  box-shadow: 0 26px 60px rgb(17 23 43 / 16%), 0 0 0 1px rgb(17 23 43 / 6%);
  transform: rotate(1deg);
}
/* Sized by the card (container units resolve against .pair-after), so a wide
   recipe card and a tall letter both fit their text. */
.typed {
  width: 100%;
  padding: 8% 9%;
  white-space: pre-line;
  font: clamp(10px, min(3.6cqi, 4.4cqb), 18px)/1.5 var(--sans);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.5em - 1px), rgb(58 92 255 / 9%) calc(1.5em - 1px) 1.5em);
  background-origin: content-box;
  background-clip: content-box;
}
.typed-serif { font-family: var(--serif); }
.typed .ln { display: block; min-height: 1.5em; }
.pair.is-playing .typed .ln { opacity: 0; transform: translateY(5px); animation: line-in 0.45s ease-out forwards; animation-delay: calc(1.1s + var(--i) * 0.09s); }
.pair-arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--pen); box-shadow: 0 10px 24px color-mix(in srgb, var(--pen) 40%, transparent); }
.pair-arrow::before { content: ""; width: 16px; height: 16px; border-top: 3px solid var(--pen-ink); border-right: 3px solid var(--pen-ink); transform: translateX(-3px) rotate(45deg); }
.pair-tag { position: absolute; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; font: 700 0.7rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.pair-tag.is-before { left: 12px; background: rgb(11 17 36 / 72%); color: #fff; }
.pair-tag.is-after { left: 12px; background: #3a5cff; color: #fff; }
.gallery-note { text-align: center; margin: 36px auto 0; max-width: 640px; }

/* ---- how it works -------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; }
.steps li { position: relative; padding: 14px 14px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); counter-increment: step; }
.steps li h3::before { content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--pen); color: var(--pen-ink); font-size: 0.95rem; vertical-align: 2px; }
.steps li p { margin: 0; color: var(--muted); padding: 0 6px; }
.steps li h3 { padding: 0 6px; margin-top: 18px; }
.step-art { margin: 0; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--pen-soft); }
.step-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.step-doc { display: grid; place-items: center; position: relative; background: linear-gradient(135deg, var(--pen-soft), color-mix(in srgb, var(--marker) 30%, var(--pen-soft))); }
.doc-sheet { display: grid; gap: 8px; width: 62%; aspect-ratio: 3 / 4; padding: 14% 10%; background: #fff; color: #1b2033; border-radius: 6px; box-shadow: 0 16px 34px rgb(17 23 43 / 20%); transform: rotate(-3deg); align-content: start; }
.doc-line { font: 0.72rem/1.45 var(--serif); }
.doc-badges { position: absolute; right: 9%; bottom: 12%; display: grid; gap: 6px; }
.doc-badges span { padding: 4px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 700 0.75rem/1.3 var(--mono); }
.doc-badges span:first-child { background: #3a5cff; color: #fff; }

/* ---- the stack band -------------------------------------------------------------- */
.stack-band { position: relative; margin-inline: calc(50% - 50vw); min-height: 560px; display: grid; align-items: center; overflow: hidden; color: #fff; padding: 72px 24px; }
.stack-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.stack-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(11 17 36 / 12%) 0%, rgb(11 17 36 / 40%) 30%, rgb(11 17 36 / 82%) 52%, rgb(11 17 36 / 94%) 100%); }
.stack-inner { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; display: grid; justify-items: start; padding-left: min(52%, 640px); }
.stack-inner h2 { color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / 40%); }
.stack-inner p { margin: 0 0 26px; font-size: 1.15rem; color: rgb(255 255 255 / 85%); max-width: 32rem; }

/* ---- the rest ---------------------------------------------------------------------- */
.pricing .packs { max-width: 760px; margin-left: auto; margin-right: auto; }
.pricing .fine { text-align: center; max-width: 760px; margin: 0 auto; }

.privacy { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; border-top: 1px solid var(--line); }
.privacy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.privacy p { margin: 0; color: var(--muted); }

.faq { max-width: 820px; margin: 0 auto; }
.faq h2 { text-align: center; margin-bottom: 24px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 4px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.06rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--pen); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 10px 0 0; color: var(--muted); }

.site-footer { padding-top: 28px; padding-bottom: 44px; border-top: 1px solid var(--line); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }

.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; padding: 16px 18px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgb(0 0 0 / 22%); z-index: 20; }
.consent p { margin: 0 0 12px; font-size: 0.95rem; }
.consent div { display: flex; gap: 10px; justify-content: flex-end; }

.restore { max-width: 440px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); padding: 22px; }
.restore::backdrop { background: rgb(0 0 0 / 45%); }
.restore label { display: grid; gap: 6px; margin: 12px 0; font-weight: 600; }
.restore input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: 1rem var(--sans); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.restore-status { min-height: 1.4em; color: var(--muted); }

.legal { max-width: 760px; margin: 0 auto; padding: 20px; }
.legal h1 { font-size: 2rem; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 56px; }
  .hero-demo { min-height: 0; display: grid; justify-items: center; padding-bottom: 8px; }
  .demo-photo { position: relative; width: min(340px, 80%); justify-self: start; }
  .demo-typed { position: relative; right: auto; bottom: auto; width: min(330px, 86%); margin-top: -34%; justify-self: end; }
  .demo-caption { position: static; max-width: none; margin-top: 18px; justify-self: start; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 460px; }
  .pair-arrow { justify-self: center; transform: rotate(90deg); }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .stack-band::before { background: rgb(11 17 36 / 70%); }
  .stack-inner { padding-left: 0; justify-items: center; text-align: center; }
  .privacy { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .site-header, .hero, main, .site-footer { padding-left: 16px; padding-right: 16px; }
  .site-header { flex-wrap: wrap; row-gap: 6px; }
  .site-header nav { gap: 16px; }
  .site-header nav > * { white-space: nowrap; }
  section { padding: 52px 0; }
  .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .tabs [role="tab"] { flex: 0 0 auto; }
  .page { grid-template-columns: 64px 1fr; }
  .thumb { width: 64px; height: 84px; }
  .results-actions { flex-direction: column; align-items: stretch; }
  .stack-band { min-height: 460px; padding: 56px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scan { display: none; }
  .demo-lines p { opacity: 1; transform: none; animation: none; }
  .pulse { animation: none; }
  .button, .drop, .tabs [role="tab"] { transition: none; }
  .pair.is-playing .pair-before .scan { animation: none; }
  .pair.is-playing .typed .ln { opacity: 1; transform: none; animation: none; }
}