/* Hemva site. One stylesheet for every page. System type to match the native app; colour from the app icon. */
:root {
  color-scheme: light dark;
  --ground: #f6f2f1;
  --surface: #fffdfc;
  --ink: #241d27;
  --muted: #5d5561;
  --line: #e2d9df;
  --plum: #4e334e;
  --plum-ink: #f7f2ec;
  --plum-muted: #ddd0dc;
  --lilac: #bba7cb;
  --accent: #4e334e;
  --accent-ink: #f7f2ec;
  --focus: #4e334e;
  --field: #fffdfc;
  --field-line: #8b7f8e;
  --error: #9b1c31;
  --ok: #2f5d3a;
  --shadow: 0 1px 2px rgb(36 29 39 / 0.06), 0 18px 40px -18px rgb(78 51 78 / 0.35);

  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --step-3: clamp(2.5rem, 1.4rem + 5.2vw, 5.25rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
  --measure: 34rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pop: #d7f25a;
  --t-lilac: #dccdf0;
  --t-peach: #ffd3bd;
  --t-lime: #e2f392;
  --t-sky: #c4e3f5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #151116;
    --surface: #201a22;
    --ink: #f2ecf1;
    --muted: #b8adba;
    --line: #382f3b;
    --plum: #3b273d;
    --plum-ink: #f7f2ec;
    --plum-muted: #d6c8d6;
    --lilac: #a993bb;
    --accent: #cdb6da;
    --accent-ink: #241d27;
    --focus: #cdb6da;
    --field: #19141b;
    --field-line: #8f8293;
    --error: #ff9aa8;
    --ok: #9fd8ab;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 24px 48px -20px rgb(0 0 0 / 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-0)/1.55 var(--sans);
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--pop); color: #1d1220; }
input { caret-color: var(--accent); accent-color: var(--accent); }
html { scrollbar-color: var(--field-line) var(--ground); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--surface); padding: 0.6rem 1rem; border-radius: 8px; z-index: 10; }
.skip:focus { top: 0.75rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; min-height: 44px; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.site-nav { display: flex; gap: var(--space-2); font-size: var(--step--1); }
.site-nav a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

/* Display face for the landing page: Bricolage Grotesque (SIL Open Font License 1.1), self-hosted, latin subset. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* Landing page. Loud on purpose: a dark plum stage, one lime pop colour, colour-blocked tiles and real cutouts in motion. */
.stage {
  --ground: #1d1220; --surface: #2a1b2e; --ink: #fbf6ef; --muted: #cdbfd2; --line: #45324a;
  --field: rgb(255 255 255 / 0.08); --field-line: #a999ae;
  --accent: var(--pop); --accent-ink: #1d1220; --focus: var(--pop);
  --error: #ffa3b0; --ok: #cdf08e;
  color: var(--ink);
}
.site-nav { align-items: center; }
.nav-cta { background: var(--accent); color: var(--accent-ink) !important; padding: 0 1rem; border-radius: 999px; font-weight: 700; min-height: 40px !important; }
.nav-cta:hover { text-decoration: none !important; filter: brightness(1.08); }
@media (max-width: 520px) { .site-nav a:not(.nav-cta) { display: none; } }
.landing .top { position: absolute; inset: 0 0 auto; z-index: 5; }
.landing h1, .landing h2, .landing .brand, .tape-track, .mix-count, .steps li::before, .steps h3, .faq summary, .slot-label { font-family: var(--display); }
.serif, .landing h1 em, .landing h2 em { font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: -0.03em; }

/* Hero */
.hero {
  position: relative;
  overflow: clip;
  padding-top: clamp(6rem, 4.5rem + 5vw, 9rem);
  background:
    radial-gradient(52rem 36rem at 88% 28%, rgb(190 118 226 / 0.5), transparent 62%),
    radial-gradient(38rem 28rem at 4% 96%, rgb(255 122 92 / 0.3), transparent 62%),
    radial-gradient(30rem 22rem at 58% 108%, rgb(215 242 90 / 0.2), transparent 62%),
    var(--ground);
}
.hero-grid { display: grid; gap: var(--space-4); }
.hero h1 {
  font-size: clamp(2.9rem, 1.2rem + 6.4vw, 5.9rem);
  line-height: 0.93;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 0 var(--space-3);
  max-width: 11ch;
  text-wrap: balance;
}
.hero h1 em { color: var(--pop); white-space: nowrap; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--muted); margin: 0 0 var(--space-4); max-width: 30rem; text-wrap: pretty; }

.hero-art { position: relative; justify-self: center; width: min(100%, 22rem); }
.hero-screen { margin: 0 auto; width: 74%; max-height: 22rem; overflow: clip; }
.hero-screen .phone { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 40px 80px -20px rgb(0 0 0 / 0.8); }
.float { position: absolute; z-index: 2; height: auto; filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.5)); animation: bob 7s ease-in-out infinite; }
.f1 { width: 38%; left: -7%; top: 3%; rotate: -14deg; }
.f2 { width: 36%; left: -5%; bottom: 5%; rotate: 9deg; animation-delay: -2.3s; }
.f3 { width: 40%; right: -9%; top: 36%; rotate: 11deg; animation-delay: -4.6s; }
.badge { position: absolute; z-index: 3; right: -2%; top: -7%; width: 5.75rem; height: 5.75rem; rotate: 8deg; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.4)); }
.badge .ring { transform-origin: 70px 70px; animation: spin 26s linear infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1020px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); column-gap: var(--space-5); align-items: end; }
  .hero-copy { padding-bottom: calc(var(--space-5) + 1rem); }
  .hero h1 { max-width: none; text-wrap: wrap; font-size: clamp(4rem, 1rem + 5.4vw, 5.25rem); }
  .hero-art { width: 100%; }
  .hero-screen { width: 84%; max-height: 37rem; }
  .f1 { width: 44%; left: -31%; top: 1%; }
  .f2 { width: 44%; left: -22%; bottom: 12%; }
  .f3 { width: 48%; right: -24%; top: 34%; }
  .badge { width: 8.5rem; height: 8.5rem; right: -12%; top: -5%; }
}

/* The hem, turned into a stitched tape that runs across the page. */
.tape-wrap { overflow-x: clip; position: relative; z-index: 4; margin-top: -1.6rem; padding-block: 0.6rem 1.4rem; }
.tape { display: flex; width: 104%; margin-left: -2%; rotate: -1.6deg; background: var(--pop); color: #1d1220; padding-block: 0.85rem; outline: 2px dashed rgb(29 18 32 / 0.4); outline-offset: -7px; box-shadow: 0 14px 30px -14px rgb(29 18 32 / 0.6); }
.tape-track { display: flex; flex: none; align-items: center; gap: 2.25rem; margin: 0; padding: 0 2.25rem 0 0; list-style: none; font-weight: 800; font-size: clamp(1rem, 0.8rem + 0.8vw, 1.4rem); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; animation: tape 30s linear infinite; }
.tape-track li { display: flex; align-items: center; gap: 2.25rem; }
.tape-track li::after { content: ""; width: 0.8em; height: 0.8em; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@keyframes tape { to { transform: translateX(-100%); } }

/* Waitlist form */
.join { max-width: 35rem; scroll-margin-top: 6rem; }
.join-row { display: flex; flex-wrap: wrap; gap: 0.625rem; max-width: 31rem; }
.join label.field-label { display: block; font-size: var(--step--1); font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }
.join input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 56px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--field-line);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem; /* 17px: no zoom on iOS */
}
.join input[type="email"]::placeholder { color: var(--muted); }
.join input[type="email"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.join input[aria-invalid="true"] { border-color: var(--error); }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 1.6rem;
  border: 0; border-radius: 999px;
  font: 750 1.0625rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  transition: transform 220ms var(--ease-out), filter 220ms var(--ease-out);
}
.stage .button { box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.7); }
@media (hover: hover) { .button:hover { filter: brightness(1.08); transform: translateY(-2px); } }
.button:active { transform: scale(0.98); }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.button[disabled] { opacity: 0.7; cursor: progress; }
.consent { font-size: var(--step--1); color: var(--muted); margin: 0.75rem 0 0; }
.status { margin: 0.6rem 0 0; font-size: 0.975rem; min-height: 1.5em; }
.status[data-kind="ok"] { color: var(--ok); font-weight: 600; }
.status[data-kind="error"] { color: var(--error); }
.honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* App screens, in a plain phone body */
.screen { margin: 0; }
.phone { padding: 8px; border-radius: 44px; background: #17121a; box-shadow: var(--shadow); }
.phone img { width: 100%; border-radius: 36px; background: var(--surface); }
.hero-screen .phone img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.screen figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 0.85rem; text-align: center; }

/* Sections */
.section { padding-block: var(--space-5); }
.section h2 { font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 var(--space-3); font-weight: 720; max-width: 18ch; text-wrap: balance; }
.landing .section h2 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; max-width: 14ch; }
.landing h2 em { color: var(--accent); }
.section p { max-width: var(--measure); }
.muted { color: var(--muted); }
.note { font-size: var(--step--1); color: var(--muted); }

.split { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-5); }
  .split.reverse { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .split.reverse > .screen { order: -1; }
}
.split .screen { width: min(100%, 20rem); justify-self: center; }
.tilt-l .phone { rotate: -3deg; }
.tilt-r .phone { rotate: 3deg; }

/* Six pieces, eight outfits: colour-blocked tiles, one piece each. */
.mix { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .mix { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); } }
.landing .mix-section h2 { font-size: var(--step-3); line-height: 0.95; max-width: 9ch; }
.mix-count { display: inline-block; margin: var(--space-3) 0 var(--space-2); padding: 0.45rem 1rem; border-radius: 999px; background: var(--pop); color: #1d1220; font-weight: 800; font-size: var(--step-1); font-variant-numeric: tabular-nums; rotate: -2deg; }
.mix-copy .button { display: flex; width: fit-content; margin-bottom: var(--space-2); }
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.6rem, 1.5vw, 1rem); }
.slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: clamp(24px, 3vw, 36px);
  overflow: clip;
  color: #1d1220;
  transition: rotate 420ms var(--ease-out), scale 420ms var(--ease-out);
}
.slot[data-slot="top"] { background: var(--t-lilac); rotate: -1.6deg; }
.slot[data-slot="bottom"] { background: var(--t-peach); rotate: 1.4deg; }
.slot[data-slot="shoes"] { background: var(--t-lime); rotate: 1.2deg; }
.slot[data-slot="layer"] { background: var(--t-sky); rotate: -1.4deg; }
@media (hover: hover) { .slot:hover { rotate: 0deg; scale: 1.02; } }
.slot-label { position: absolute; left: 1rem; top: 0.8rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; z-index: 1; }
.slot img, .slot-empty {
  position: absolute; inset: 14% 12% 12%;
  width: 76%; height: 74%;
  object-fit: contain;
  transition: opacity 220ms var(--ease-out), transform 420ms var(--ease-out);
}
.slot img { filter: drop-shadow(0 14px 16px rgb(29 18 32 / 0.28)); }
.slot-empty { display: grid; place-items: center; font-weight: 700; border: 2px dashed rgb(29 18 32 / 0.45); border-radius: 18px; }
.slot[data-state="0"] [data-option="1"], .slot[data-state="1"] [data-option="0"] { opacity: 0; transform: translateY(10%) rotate(-8deg) scale(0.9); pointer-events: none; }
.swap {
  position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 1;
  min-height: 44px; padding: 0 1.1rem;
  border: 0; border-radius: 999px;
  background: #1d1220; color: #fbf6ef;
  font: 750 0.9375rem/1 var(--sans);
  cursor: pointer;
  transition: transform 120ms ease-out;
}
.swap:active { transform: scale(0.94); }
@media (hover: hover) { .swap:hover { background: #4e334e; } .faq summary:hover { color: var(--accent); } }
.swap:focus-visible { outline: 3px solid #1d1220; outline-offset: 2px; }

/* Steps as colour blocks */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0.75rem; max-width: 36rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 0 1.1rem; align-items: start; padding: 1.25rem 1.4rem 1.4rem; border-radius: 28px; color: #1d1220; }
.steps li:nth-child(1) { background: var(--t-lilac); }
.steps li:nth-child(2) { background: var(--t-peach); }
.steps li:nth-child(3) { background: var(--t-lime); }
.steps li::before { content: counter(step); grid-row: span 2; font-size: 3.6rem; line-height: 0.9; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.steps h3 { margin: 0.2rem 0 0.3rem; font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.2; font-weight: 750; }
.steps p { margin: 0; color: rgb(29 18 32 / 0.78); }

/* Shop check: one loud block */
.section.pop { --focus: #1d1220; --ink: #1d1220; --muted: rgb(29 18 32 / 0.74); --accent: #4e334e; background: var(--pop); color: var(--ink); }
.landing .section h2.big { font-size: var(--step-3); line-height: 0.95; max-width: 12ch; }
.big em { display: block; }

/* Privacy: a dark panel */
.panel { border-radius: clamp(28px, 4vw, 48px); padding: clamp(1.5rem, 1rem + 3vw, 4rem); background: radial-gradient(34rem 26rem at 96% 0%, rgb(190 118 226 / 0.45), transparent 62%), var(--ground); }
.facts { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); max-width: var(--measure); }
.facts li { padding-left: 1.75rem; position: relative; color: var(--muted); }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.95em; height: 0.95em; background: var(--accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.facts strong { font-weight: 700; color: var(--ink); }

.links { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-3); padding: 0; margin: var(--space-2) 0 0; list-style: none; }
.links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }

/* Questions */
.qa { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .qa { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-5); } }
.faq { max-width: 44rem; display: grid; gap: 0.6rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding-inline: 1.3rem; }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 700; font-size: var(--step-1); letter-spacing: -0.015em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.6rem; height: 0.6rem;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease-out;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 1.2rem; color: var(--muted); }

/* Closing */
.closing { position: relative; overflow: clip; padding-block: calc(var(--space-5) + 1rem); background: radial-gradient(46rem 30rem at 12% 0%, rgb(190 118 226 / 0.5), transparent 62%), radial-gradient(36rem 26rem at 96% 110%, rgb(255 122 92 / 0.32), transparent 62%), var(--ground); }
.closing-row { position: relative; z-index: 3; display: grid; gap: var(--space-3); }
.closing h2 { font-size: clamp(3rem, 1.4rem + 6.4vw, 6rem); line-height: 0.92; letter-spacing: -0.04em; font-weight: 800; margin: 0; max-width: 9ch; text-wrap: balance; }
.closing h2 em { display: block; color: var(--pop); }
.closing p { margin: 0 0 var(--space-2); color: var(--muted); }
.closing .float { display: none; }
@media (min-width: 900px) {
  .closing .float { display: block; }
  .c1 { width: 17rem; right: 20%; top: 8%; rotate: -10deg; }
  .c2 { width: 9rem; right: 6%; top: 14%; rotate: 8deg; animation-delay: -3s; }
}

/* The one entrance: the four tiles land as the board scrolls in, where the browser can do it without script. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .board .slot { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .board .slot:nth-child(even) { animation-range: entry 15% entry 90%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 3.5rem; rotate: 0deg; scale: 0.94; } }

/* Footer */
.site-footer { border-top: 2px dashed var(--line); padding-block: var(--space-4); font-size: var(--step--1); color: var(--muted); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-3); justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer p { margin: 0.25rem 0; }

/* Long-form pages: privacy, terms, support */
.doc { padding-block: var(--space-4) var(--space-5); }
.doc-head { max-width: 44rem; margin-bottom: var(--space-4); }
.doc h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.5rem); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 var(--space-2); font-weight: 760; }
.doc .meta { color: var(--muted); margin: 0; }
.prose { max-width: 42rem; }
.prose h2 { font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.025em; margin: var(--space-4) 0 var(--space-2); font-weight: 700; scroll-margin-top: 1rem; }
.prose h3 { font-size: var(--step-1); letter-spacing: -0.01em; margin: var(--space-3) 0 0.5rem; font-weight: 650; }
.prose p, .prose li { max-width: 40rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--muted); }
.summary-box { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: var(--space-3); margin: 0 0 var(--space-4); max-width: 42rem; }
.summary-box h2 { margin-top: 0; font-size: var(--step-1); letter-spacing: -0.01em; }
.summary-box ul { margin: 0; }
.toc { font-size: 0.975rem; }
.toc ol { padding-left: 1.25rem; columns: 2 14rem; column-gap: var(--space-4); }
.table-scroll { overflow-x: auto; margin: var(--space-2) 0; }
.prose table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 650; }
.prose code { font-size: 0.9em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}
@media print {
  .site-header nav, .join, .skip, .swap, .float, .badge, .tape-wrap { display: none; }
  body { background: #fff; color: #000; }
}