/* ============================================================
   LABBOX — v1 prototype stylesheet
   Implements the "Signal" design system (design/Design direction
   decisions 2): tokens, pills, cards, dark/light rhythm.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap");

:root {
  /* Base */
  --ink: #101114;
  --panel: #1c1d22;
  --panel-2: #22242a;
  --paper: #f2f2f0;
  --white: #ffffff;
  --stripe-a: #d9d9d5;
  --stripe-b: #e3e3df;

  /* Block colours */
  --red: #ff4b2e;
  --yellow: #ffd400;
  --green: #2bd66b;
  --blue: #3a86ff;

  /* Semantic */
  --text-2: rgba(16, 17, 20, 0.7);
  --text-3: rgba(16, 17, 20, 0.5);
  --inv-text: var(--paper);
  --inv-text-2: rgba(242, 242, 240, 0.7);
  --border-subtle: rgba(16, 17, 20, 0.12);
  --border-input: rgba(16, 17, 20, 0.2);
  --border-inv: rgba(242, 242, 240, 0.3);

  --shadow-card: 0 8px 32px rgba(16, 17, 20, 0.08);
  --shadow-drawer: -24px 0 60px rgba(16, 17, 20, 0.3);
  --glow-cta: 0 0 60px rgba(255, 212, 0, 0.6);

  /* circuit-board nav */
  --trace: rgba(242, 242, 240, 0.16);
  --trace-lit: rgba(255, 212, 0, 0.3);
  --board-dot: rgba(242, 242, 240, 0.07);

  --stripe-light: repeating-linear-gradient(135deg, var(--stripe-a) 0 10px, var(--stripe-b) 10px 20px);
  --stripe-dark: repeating-linear-gradient(135deg, var(--panel) 0 10px, var(--panel-2) 10px 20px);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* fluid gutter: 16px on a small phone up to 40px on desktop */
  --gutter: clamp(16px, 3.2vw, 40px);
  --nav-h: 96px;
  --tap: 44px;                 /* minimum comfortable touch target */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gap: 12px;

  --r-media: 8px;
  --r-input: 10px;
  --r-option: 12px;
  --r-card: 14px;
  --r-card-lg: 16px;
  --r-pill: 999px;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
::selection { background: var(--yellow); color: var(--ink); }
[hidden] { display: none !important; }

/* ---------- type ---------- */
.display-xl { font-weight: 900; font-size: clamp(56px, 8.5vw, 112px); line-height: 0.88; letter-spacing: -0.05em; }
.display-lg { font-weight: 900; font-size: clamp(48px, 8vw, 104px); line-height: 0.9; letter-spacing: -0.045em; font-stretch: 105%; }
.display-md { font-weight: 900; font-size: clamp(40px, 5vw, 64px); line-height: 0.95; letter-spacing: -0.045em; }
.display-sm { font-weight: 900; font-size: clamp(32px, 4vw, 48px); line-height: 0.95; letter-spacing: -0.04em; }
.h2 { font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; letter-spacing: -0.035em; }
.h3 { font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -0.035em; }
.h4 { font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -0.03em; }
.card-title { font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: 19px; line-height: 1.45; }
.body-sm { font-size: 14px; line-height: 1.45; }
.caption { font-weight: 600; font-size: 13px; line-height: 1.4; }
.label { font-weight: 800; font-size: 12px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.label-sm { font-weight: 800; font-size: 11px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.price { font-weight: 800; font-size: 24px; line-height: 1; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { opacity: 0.6; }
.muted-2 { opacity: 0.75; }
.tbc { opacity: 0.5; }

/* ---------- layout ---------- */
.container { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1440px; margin: 0 auto; }
.section { padding-top: 72px; padding-bottom: 72px; }
.section-sm { padding-top: 48px; padding-bottom: 48px; }
.grid { display: grid; gap: var(--gap); }
.grid-2 { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack-2 { display: flex; flex-direction: column; gap: 8px; }
.stack-3 { display: flex; flex-direction: column; gap: 12px; }
.stack-4 { display: flex; flex-direction: column; gap: 16px; }
.stack-5 { display: flex; flex-direction: column; gap: 20px; }
.stack-6 { display: flex; flex-direction: column; gap: 24px; }
.row { display: flex; gap: 12px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.row-baseline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wrap { flex-wrap: wrap; }

.dark { background: var(--ink); color: var(--inv-text); }
.on-white { background: var(--white); }

/* ---------- pills & badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.pill-red { background: var(--red); color: var(--ink); }
.pill-yellow { background: var(--yellow); color: var(--ink); }
.pill-green { background: var(--green); color: var(--ink); }
.pill-blue { background: var(--blue); color: var(--paper); }
.pill-paper { background: var(--paper); color: var(--ink); }
.pill-white { background: var(--white); color: var(--ink); }
.pill-ink { background: var(--ink); color: var(--paper); }
.pill-outline { border: 1.5px solid var(--ink); }
.pill-outline-inv { border: 1px solid var(--border-inv); }
.pill-dashed { border: 1.5px dashed var(--ink); opacity: 0.6; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; text-decoration: none; cursor: pointer; transition: opacity 0.2s var(--ease-out), transform 0.12s var(--ease-out); white-space: nowrap; }
.btn:hover { opacity: 0.8; }
.btn:active { transform: scale(0.98); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-blue { background: var(--blue); color: var(--paper); }
.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-outline-inv { border: 1.5px solid var(--paper); color: var(--paper); }
.btn-ghost-inv { background: rgba(242, 242, 240, 0.1); color: var(--paper); border: 1px solid rgba(242, 242, 240, 0.25); }
.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn-sm { padding: 12px 20px; font-size: 14px; }
.btn-xs { padding: 8px 14px; font-size: 13px; }
.btn-full { width: 100%; }
.btn-split { display: flex; justify-content: space-between; width: 100%; padding-left: 28px; padding-right: 28px; }
.link { font-weight: 800; text-decoration: underline; cursor: pointer; }
.link:hover { opacity: 0.8; }

/* ---------- cards & placeholders ---------- */
.card { background: var(--white); border-radius: var(--r-card); padding: 24px; }
.card-lg { background: var(--white); border-radius: var(--r-card-lg); padding: 28px; }
.card-dark { background: var(--ink); color: var(--inv-text); border-radius: var(--r-card); padding: 24px; }
.card-panel { background: var(--panel); border-radius: var(--r-option); }
.card-float { box-shadow: var(--shadow-card); }

.ph { position: relative; background: var(--stripe-light); border-radius: var(--r-media); overflow: hidden; }
.ph-dark { position: relative; background: var(--stripe-dark); border-radius: var(--r-media); overflow: hidden; }
.ph-lg { border-radius: var(--r-card-lg); }
.ph-chip { position: absolute; top: 14px; left: 14px; font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 5px 10px; border-radius: var(--r-pill); z-index: 2; max-width: calc(100% - 28px); }
.ph-chip-dark { background: rgba(16, 17, 20, 0.7); color: var(--paper); }
.ph-chip-tr { left: auto; right: 14px; }
.ph-glow-yellow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 58%, rgba(255, 212, 0, 0.55), rgba(255, 212, 0, 0) 34%); }
.ph-glow-red { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 55%, rgba(255, 75, 46, 0.45), rgba(255, 75, 46, 0) 40%); }
.ratio-1-1 { aspect-ratio: 1; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-16-10 { aspect-ratio: 16 / 10; }

/* ---------- real photography ----------
   The stripe stays as the loading background, so a slow or missing image
   degrades to the design's own placeholder rather than a white hole. */
.ph > img, .ph-dark > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph > img.contain, .ph-dark > img.contain { object-fit: contain; padding: 5%; }
.ph.has-img { background: var(--white); }
.ph-dark.has-img { background: var(--panel); }
/* photos are shot on white — a scrim keeps the chip and play disc readable */
.ph.has-img .ph-chip, .ph-dark.has-img .ph-chip { box-shadow: 0 2px 10px rgba(16, 17, 20, 0.25); }
.ph.has-img .play-disc, .ph-dark.has-img .play-disc { box-shadow: 0 8px 30px rgba(16, 17, 20, 0.35); }
.ph.has-img .play-disc-glow, .ph-dark.has-img .play-disc-glow { box-shadow: var(--glow-cta); }
/* tiles that lay dark copy straight over a photo need a wash to stay legible */
.ex-tile > * { position: relative; z-index: 1; }
.ex-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.88)); pointer-events: none; }
.ex-tile > img { z-index: 0; object-fit: contain; }

.play-disc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s var(--ease-out); z-index: 2; }
.play-disc::after { content: ""; width: 0; height: 0; border-left: 20px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.play-disc:hover { transform: translate(-50%, -50%) scale(1.06); }
.play-disc-glow { box-shadow: var(--glow-cta); }
.play-disc-dark { background: var(--ink); }
.play-disc-dark::after { border-left-color: var(--paper); }
.play-disc-sm { width: 40px; height: 40px; }
.play-disc-sm::after { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }

.led { display: inline-block; width: 22px; height: 22px; border-radius: 50%; }
.led-red { background: var(--red); box-shadow: 0 0 22px var(--red); }
.led-yellow { background: var(--yellow); box-shadow: 0 0 22px var(--yellow); }
.led-green { background: var(--green); box-shadow: 0 0 22px var(--green); }
.led-blue { background: var(--blue); box-shadow: 0 0 22px var(--blue); }
.chip-sq { display: inline-block; width: 22px; height: 22px; border-radius: 4px; }

/* ============================================================
   BOARD SURFACES, PARALLAX & CIRCUIT MOTIF
   The perfboard texture from the nav carries onto every dark surface, and
   drifts against the scroll. Driven by the "BOARD MOTION" block in site.js;
   every effect degrades to a static layout without JS or under
   prefers-reduced-motion.
   ============================================================ */

/* perfboard — big surfaces get an oversized layer that drifts on scroll */
.dark, .site-footer, .search-panel { position: relative; isolation: isolate; overflow: hidden; }
.dark::before, .site-footer::before, .search-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22%; height: 144%;
  z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, var(--board-dot) 1px, transparent 1.5px);
  background-size: 22px 22px;
  transform: translate3d(0, var(--perf-y, 0px), 0);
}
/* cards are small — texture, no drift */
.card-dark, .ph-dark { position: relative; isolation: isolate; }
.card-dark::before, .ph-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: radial-gradient(circle, rgba(242, 242, 240, 0.055) 1px, transparent 1.5px);
  background-size: 18px 18px;
}
/* light surfaces get the wooden-board read instead */
.board-light { position: relative; isolation: isolate; }
.board-light::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22%; height: 144%;
  z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(16, 17, 20, 0.055) 1.15px, transparent 1.6px);
  background-size: 26px 26px;
  transform: translate3d(0, var(--perf-y, 0px), 0);
}

/* parallax media — oversized so the travel never exposes an edge */
.px-cover { position: absolute; left: 0; right: 0; top: -14%; width: 100%; height: 128%;
            object-fit: cover; display: block; will-change: transform; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* page rail — a wire down the left gutter from the header logo to the footer
   logo. Track and live segment are painted as gradients that flip copper/brass
   on each section boundary, so the line reads on light and dark alike. */
.page-rail { position: absolute; left: 13px; width: 16px; z-index: 40; pointer-events: none; }
.page-rail .rail-track, .page-rail .rail-live {
  position: absolute; left: 7px; top: 0; width: 1.5px; background-repeat: no-repeat;
}
.page-rail .rail-track { bottom: 0; }
.page-rail .rail-live { height: 0; }
/* the wire terminates on the footer logo; its origin node is drawn in the
   header by the nav board, so it can't scroll across the sticky bar */
.page-rail .rail-term {
  position: absolute; left: 2.75px; bottom: -5.5px; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid rgba(242, 242, 240, 0.3); background: var(--ink);
}
.page-rail .rail-term::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%;
  background: var(--yellow); opacity: 0.45; transition: opacity 0.4s var(--ease-out);
}
/* the head is a single point, so it can simply invert per surface */
.page-rail .rail-head {
  position: absolute; left: 5.25px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 7px 1.5px rgba(255, 212, 0, 0.7);
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.page-rail.charged .rail-head { opacity: 1; }
.page-rail.on-dark .rail-head { background: #fffbe6; box-shadow: 0 0 8px 2px rgba(255, 212, 0, 0.45); }

/* Header cap: the source node plus the stretch of wire the sticky bar hides.
   Fixed and above the bar, so the node never reads as orphaned and the current
   visibly builds under the board before it emerges onto the page. */
.rail-cap { position: fixed; left: 13px; width: 16px; z-index: 55; pointer-events: none; }
.rail-cap .cap-track, .rail-cap .cap-live { position: absolute; left: 7px; top: 0; width: 1.5px; }
.rail-cap .cap-track { bottom: 0; background: rgba(242, 242, 240, 0.18); }
.rail-cap .cap-live { height: 0; background: rgba(255, 212, 0, 0.8); }
.rail-cap .cap-node {
  position: absolute; left: 2.75px; top: -5.5px; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid rgba(242, 242, 240, 0.3); background: var(--ink);
}
.rail-cap .cap-node::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--yellow);
}

/* section divider: a copper trace with solder pads; current runs it on reveal */
.trace-rule { position: relative; width: 100%; height: 22px; }
.trace-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--border-subtle); }
.trace-rule .tr-live { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--yellow);
                       transform: scaleX(0); transform-origin: left; opacity: 0; }
.trace-rule .tr-head { position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
                       background: #fffbe6; box-shadow: 0 0 12px 3px rgba(255, 212, 0, 0.55); opacity: 0;
                       transition: left 1.2s var(--ease-out); }
.trace-rule .tr-node { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
                       border: 1.5px solid var(--border-input); background: var(--paper); }
.trace-rule.in .tr-live { animation: traceRun 1.9s var(--ease-out) forwards; }
@keyframes traceRun {
  0% { transform: scaleX(0); opacity: 1; }
  58% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.22; }
}
.trace-rule.in .tr-head { left: 100%; animation: headRun 1.2s var(--ease-out); }
@keyframes headRun { 0% { opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.trace-rule.in .tr-node { border-color: rgba(255, 212, 0, 0.45); transition: border-color 0.9s var(--ease-out) 0.5s; }
.dark .trace-rule::before { background: rgba(242, 242, 240, 0.18); }
.dark .trace-rule .tr-node { background: var(--ink); border-color: rgba(242, 242, 240, 0.28); }
.on-white .trace-rule .tr-node { background: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .px-cover { position: absolute; inset: 0; width: 100%; height: 100%; transform: none !important; }
  .dark::before, .site-footer::before, .search-panel::before, .board-light::before { transform: none !important; }
  .page-rail, .rail-cap { display: none; }
  /* dividers render already-powered rather than running */
  .trace-rule .tr-live { animation: none !important; transform: scaleX(1); opacity: 0.22; }
  .trace-rule .tr-head { display: none; }
  .trace-rule .tr-node { border-color: rgba(255, 212, 0, 0.45); }
  .nav-board .electron { display: none; }
}
@media (max-width: 900px) {
  .page-rail, .rail-cap { display: none; }
}

/* ---------- header ---------- */
.site-header { background: var(--ink); color: var(--inv-text); position: sticky; top: 0; z-index: 50; }
.site-header .bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--nav-h); padding: 0 var(--gutter); }
/* perfboard holes, echoing the wooden circuit board the blocks snap onto */
.site-header .bar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--board-dot) 1px, transparent 1.5px);
  background-size: 22px 22px; background-position: 11px 12px;
}
.site-header .bar > .brand, .site-header .bar > .nav-links, .site-header .bar > .header-tools { position: relative; z-index: 2; }

/* ---------- circuit-board nav ----------
   site.js measures the real component positions and draws the wire; the nav
   items are opaque, so they mask it and it only shows in the gaps. See the
   "NAV BOARD" block in site.js. */
.nav-board { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.nav-board .trace { stroke: var(--trace); stroke-width: 1.5; stroke-linecap: round; }
/* the live wire is drawn behind the electron as it travels */
.nav-board .spark { stroke: var(--yellow); stroke-linecap: round; opacity: 0; transition: opacity 0.45s var(--ease-out); }
.nav-board .spark-core { stroke-width: 1.75; }
.nav-board .spark-glow { stroke-width: 7; }
.nav-board.live .spark-core { opacity: 1; transition-duration: 0.05s; }
.nav-board.live .spark-glow { opacity: 0.2; transition-duration: 0.05s; }
/* source node — where the current leaves for the wire */
.nav-board .power-body { fill: var(--ink); stroke: rgba(242, 242, 240, 0.32); stroke-width: 1.5; transition: stroke 0.3s var(--ease-out); }
.nav-board .power-dot { fill: var(--yellow); opacity: 0.5; transition: opacity 0.3s var(--ease-out); }
.nav-board.live .power-body { stroke: var(--yellow); }
.nav-board.live .power-dot { opacity: 1; }
/* the electron itself */
.nav-board .electron { opacity: 0; }
.nav-board .electron-halo { fill: var(--yellow); opacity: 0.25; }
.nav-board .electron-core { fill: #fffbe6; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 22px; letter-spacing: -0.03em; }
.brand img { height: 62px; width: auto; }
.brand .brand-sub { font-weight: 600; font-size: 14px; opacity: 0.6; }
.nav-links { display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 600; }
.nav-links a {
  text-decoration: none; padding: 9px 15px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(242, 242, 240, 0.18); background: var(--ink); white-space: nowrap;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
/* current passing through on its way somewhere else */
.nav-links a.passing { border-color: rgba(255, 212, 0, 0.5); transition-duration: 0.06s; }
/* the electron landed here */
.nav-links a.powered {
  color: var(--yellow); border-color: var(--yellow);
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.4), inset 0 0 14px rgba(255, 212, 0, 0.1);
  transition-duration: 0.1s;
}
/* the current page — a closed switch, permanently powered */
.nav-links a.active { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.nav-links a.active.powered { box-shadow: 0 0 26px rgba(255, 212, 0, 0.55); }
/* boards are a progressive enhancement — without JS, hover still responds */
.no-board .nav-links a:hover, .no-board .nav-links a:focus-visible { color: var(--yellow); border-color: var(--yellow); }
.no-board .nav-links a.active:hover { color: var(--ink); }
.header-tools { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; }
.header-tools .tool { cursor: pointer; background: none; }
.cart-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--yellow); color: var(--ink); padding: 6px 12px; border-radius: var(--r-pill); font-weight: 700; cursor: pointer; transition: transform 0.12s var(--ease-out); }
.cart-pill:active { transform: scale(0.98); }
/* burger: three bars that fold into a cross */
.burger { display: none; width: var(--tap); height: var(--tap); align-items: center; justify-content: center; cursor: pointer; }
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--paper);
  transition: transform 0.25s var(--ease-out), opacity 0.15s var(--ease-out);
}
.burger span { position: relative; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile menu: a sheet under the bar, with a real hierarchy */
.mobile-menu {
  position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 80;
  background: var(--ink); color: var(--inv-text);
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
.mm-inner { display: flex; flex-direction: column; gap: 6px; padding: 18px var(--gutter) calc(32px + var(--safe-b)); }
.mm-label { font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.45; margin: 14px 0 6px; }
.mm-label:first-child { margin-top: 2px; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-tile {
  display: flex; align-items: center; min-height: 60px; padding: 14px 16px;
  border-radius: var(--r-card); background: var(--panel); border: 1.5px solid rgba(242, 242, 240, 0.1);
  text-decoration: none; font-weight: 800; font-size: 16px; letter-spacing: -0.02em;
}
.mm-row {
  display: flex; align-items: center; justify-content: space-between; min-height: var(--tap);
  padding: 12px 2px; text-decoration: none; font-weight: 700; font-size: 16px;
  border-bottom: 1px solid rgba(242, 242, 240, 0.1);
}
.mm-row::after { content: "→"; opacity: 0.35; font-size: 14px; }
.mm-row.mm-strong { color: var(--yellow); }
/* the circuit motif carries into the menu: the current lands as you open it */
.mobile-menu.open [data-mm-item] { animation: mmIn 0.32s var(--ease-out) backwards; }
@keyframes mmIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- ticker ---------- */
.ticker { border-top: 1px solid rgba(242, 242, 240, 0.15); padding: 16px var(--gutter); display: flex; justify-content: space-between; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--inv-text); margin-top: 72px; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding: 48px var(--gutter); }
.site-footer .col-title { font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.5; margin-bottom: 12px; }
.site-footer a { display: block; text-decoration: none; font-size: 14px; font-weight: 600; padding: 5px 0; opacity: 0.85; }
.site-footer a:hover { opacity: 1; }
.site-footer .legal { border-top: 1px solid rgba(242, 242, 240, 0.15); padding: 24px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; font-size: 12px; font-weight: 600; flex-wrap: wrap; }
.site-footer .legal > span { opacity: 0.7; }
.site-footer .credit { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 0; font-size: 12px; font-weight: 600; opacity: 0.6; text-decoration: none; transition: opacity 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.site-footer .credit strong { font-weight: 800; }
.site-footer .credit:hover { opacity: 1; color: var(--yellow); }
.site-footer .fcol .col-title { background: none; border: 0; font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer .fcol .col-title::after { content: none; }

/* ---------- product card ---------- */
.pcard { background: var(--white); border-radius: var(--r-card); padding: 14px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform 0.2s var(--ease-out); }
.pcard:hover { transform: translateY(-2px); }
.pcard .media { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--stripe-light); }
.pcard .media.has-img { background: var(--white); overflow: hidden; }
.pcard .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; display: block; }
.pcard .media > .ph-chip { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; white-space: normal; line-height: 1.3; background: rgba(255, 255, 255, 0.9); }
.pcard .media .b-tl { position: absolute; top: 10px; left: 10px; }
.pcard .media .b-tr { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; background: var(--paper); padding: 4px 8px; border-radius: var(--r-pill); }
.quick-add { position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; cursor: pointer; transition: transform 0.12s var(--ease-out); z-index: 2; }
.quick-add:hover { transform: scale(1.08); }
.quick-add:active { transform: scale(0.96); }
.pcard .meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pcard .meta .sub { font-size: 13px; opacity: 0.6; }

/* ---------- forms ---------- */
.input { width: 100%; border: 1.5px solid var(--border-input); border-radius: var(--r-input); padding: 14px; font-size: 14px; background: var(--white); }
.input::placeholder { color: var(--text-3); }
.input-pill { border-radius: var(--r-pill); padding: 14px 20px; }
textarea.input { min-height: 72px; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field-err { border-color: var(--red); }
.err-note { color: var(--red); font-size: 12px; font-weight: 700; }

.check { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 14px; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { flex: none; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 12px; font-weight: 800; transition: background 0.12s; }
.check input:checked + .box { background: var(--ink); color: var(--paper); }
.check input:focus-visible + .box { outline: 3px solid var(--blue); outline-offset: 2px; }

.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg .seg-btn { border: 1.5px solid var(--ink); padding: 8px 14px; border-radius: var(--r-pill); font-weight: 800; font-size: 12px; letter-spacing: 0.02em; cursor: pointer; transition: opacity 0.15s; background: transparent; }
.seg .seg-btn:hover { opacity: 0.7; }
.seg .seg-btn.on { background: var(--ink); color: var(--paper); }
.seg-sm .seg-btn { padding: 6px 10px; font-size: 12px; border-color: var(--border-input); }
.seg-sm .seg-btn.on { border-color: var(--ink); }

/* option rows (buy box editions, bundle default) */
.opt { width: 100%; text-align: left; border: 2px solid rgba(16, 17, 20, 0.15); border-radius: var(--r-option); padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; background: transparent; transition: border-color 0.15s; }
.opt:hover { border-color: rgba(16, 17, 20, 0.4); }
.opt.on { border-color: var(--ink); background: var(--white); }
.opt .t { font-weight: 800; font-size: 15px; }
.opt .d { font-size: 13px; opacity: 0.65; }
.opt .p { font-weight: 800; font-size: 18px; white-space: nowrap; }
.opt .p s { font-size: 12px; opacity: 0.5; font-weight: 500; display: block; text-align: right; }

.extra { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-input); background: var(--white); cursor: pointer; border: 2px solid transparent; }
.extra:hover { border-color: rgba(16, 17, 20, 0.15); }
.extra .p { font-weight: 800; font-size: 14px; white-space: nowrap; }

/* accordion */
.acc { border-bottom: 1px solid var(--border-subtle); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-weight: 700; font-size: 15px; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 18px; font-weight: 600; }
.acc[open] summary::after { content: "−"; }
.acc .acc-body { padding: 0 0 16px; opacity: 0.75; line-height: 1.45; font-size: 15px; }

/* ---------- cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(16, 17, 20, 0.45); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease-out); }
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--paper); color: var(--ink); z-index: 100; display: flex; flex-direction: column; box-shadow: var(--shadow-drawer); transform: translateX(105%); transition: transform 0.25s var(--ease-out); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); }
.drawer-head .t { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.drawer-close { font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
.meter-wrap { padding: 16px 24px; background: var(--white); border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.meter { position: relative; height: 8px; background: rgba(16, 17, 20, 0.1); border-radius: 4px; overflow: hidden; }
.meter .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 4px; transition: width 0.3s var(--ease-out); }
.drawer-body { flex: 1; overflow-y: auto; }
.cart-line { display: flex; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--border-subtle); }
.cart-line .thumb { width: 84px; height: 84px; border-radius: 10px; background: var(--stripe-light); flex: none; overflow: hidden; }
.cart-line .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6%; display: block; background: var(--white); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-input); border-radius: var(--r-pill); font-size: 14px; font-weight: 700; }
.qty button { padding: 4px 12px; cursor: pointer; }
.qty .n { padding: 4px 6px; min-width: 20px; text-align: center; }
.bundle-hint { margin: 14px 24px 0; padding: 14px 16px; background: var(--yellow); border-radius: var(--r-option); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.cross-sells { padding: 20px 24px 0; display: flex; flex-direction: column; gap: 10px; }
.cross-sells .items { display: flex; gap: 8px; }
.xsell { flex: 1; background: var(--white); border-radius: var(--r-option); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.xsell .media { aspect-ratio: 1; border-radius: 8px; background: var(--stripe-light); display: flex; align-items: center; justify-content: center; }
.xsell .media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; display: block; background: var(--white); border-radius: 8px; }
.xsell .media:has(img) { background: var(--white); overflow: hidden; }
.xsell .t { font-size: 12px; font-weight: 800; line-height: 1.2; }
.xsell .add { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }
.drawer-foot { padding: 16px 24px 20px; border-top: 1px solid var(--border-subtle); background: var(--white); display: flex; flex-direction: column; gap: 12px; }
.cart-empty { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* ---------- search overlay ---------- */
.search-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 20px var(--gutter) 28px; transform: translateY(-105%); transition: transform 0.25s var(--ease-out); box-shadow: 0 24px 60px rgba(16, 17, 20, 0.3); }
.search-panel.open { transform: translateY(0); }
.search-panel .search-input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid rgba(242, 242, 240, 0.3); color: var(--paper); font-size: clamp(24px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; padding: 10px 0; }
.search-panel .search-input::placeholder { color: rgba(242, 242, 240, 0.4); }
.search-panel .search-input:focus { outline: none; border-bottom-color: var(--yellow); }
.search-results { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.search-results .group-title { font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.5; margin-bottom: 8px; }
.search-results a { display: flex; justify-content: space-between; gap: 12px; text-decoration: none; padding: 10px 12px; border-radius: 8px; font-weight: 700; font-size: 15px; }
.search-results a:hover { background: var(--panel); }
.search-results .sub { font-weight: 500; font-size: 13px; opacity: 0.6; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 80px); background: var(--ink); color: var(--paper); padding: 14px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; z-index: 120; opacity: 0; transition: all 0.25s var(--ease-out); pointer-events: none; max-width: min(90vw, 480px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- shop filters ---------- */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
.filters { display: flex; flex-direction: column; gap: 28px; font-size: 14px; }
.filters .f-group { display: flex; flex-direction: column; gap: 10px; }
.range-wrap { padding: 10px 8px 0; }
.range-wrap input[type="range"] { width: 100%; accent-color: var(--ink); }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: 13px; font-weight: 600; opacity: 0.6; padding: 20px 0 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- PDP ---------- */
.pdp-grid { display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: start; padding-top: 20px; padding-bottom: 64px; }
.buybox { display: flex; flex-direction: column; gap: 18px; }
.buybox-float { background: var(--white); border-radius: var(--r-card-lg); padding: 28px; box-shadow: var(--shadow-card); }
.sticky { position: sticky; top: calc(var(--nav-h) + 16px); }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.thumbs .th { aspect-ratio: 1; border-radius: var(--r-media); background: var(--stripe-light); cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; opacity: 0.75; text-align: center; padding: 4px; }
.thumbs .th.on { border-color: var(--ink); opacity: 1; }
.thumbs .th { overflow: hidden; position: relative; }
.thumbs .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; background: var(--white); display: block; }
.thumbs .th .cap { position: relative; z-index: 1; align-self: flex-end; margin: auto auto 3px; background: rgba(255, 255, 255, 0.88); border-radius: var(--r-pill); padding: 2px 6px; font-size: 9px; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; font-weight: 600; opacity: 0.75; }
.lang-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }

/* spec strip under hero */
.spec-row { display: flex; gap: 20px; font-size: 14px; font-weight: 700; flex-wrap: wrap; }
.spec-row .dot { opacity: 0.4; }

/* difficulty meter */
.diff { display: flex; gap: 4px; }
.diff span { flex: 1; height: 8px; border-radius: 4px; background: rgba(16, 17, 20, 0.12); }
.diff .on-1 { background: var(--green); }
.diff .on-2 { background: var(--yellow); }
.diff .on-3 { background: var(--red); }

/* timer chip */
.timer-chip { background: var(--ink); color: var(--yellow); font-size: clamp(36px, 5vw, 64px); font-weight: 900; letter-spacing: -0.02em; padding: 14px 24px; border-radius: 12px; font-variant-numeric: tabular-nums; box-shadow: 0 0 50px rgba(255, 212, 0, 0.35); cursor: pointer; user-select: none; }

/* age tiles */
.age-tile { border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; color: var(--ink); text-decoration: none; transition: transform 0.2s var(--ease-out); }
.age-tile:hover { transform: translateY(-3px); }
.age-tile .big { font-size: 44px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
/* shop category tiles: a compact variant of .age-tile, no media slot */
.cat-tile { min-height: 110px; gap: 8px; justify-content: center; }
.cat-tile > span:first-child { font-size: 20px; }
@media (max-width: 900px) {
  .cat-tile { min-height: 96px; padding: 16px; }
  .cat-tile > span:first-child { font-size: 16px !important; line-height: 1.15; }
  .cat-tile .caption { font-size: 12px; }
}
.age-tile .media { margin-top: auto; aspect-ratio: 16 / 9; border-radius: var(--r-media); background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0 8px, rgba(0, 0, 0, 0.06) 8px 16px); display: flex; align-items: flex-end; padding: 10px; font-size: 11px; font-weight: 700; opacity: 0.7; }

/* block library tiles */
.age-tile .media { overflow: hidden; position: relative; }
.age-tile .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.age-tile .media .cap { position: relative; z-index: 1; }
.block-tile { aspect-ratio: 1; border-radius: var(--r-media); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* learn cards */
.block-tile img { width: 100%; max-width: 44px; height: 44px; object-fit: contain; display: block; }
/* "blocks you need" row on exercise pages */
.block-chip { width: 48px; height: 48px; border-radius: 8px; background: var(--white); display: flex; align-items: center; justify-content: center; flex: none; }
.block-chip img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.ex-card { background: var(--white); border-radius: var(--r-card); padding: 12px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform 0.2s var(--ease-out); }
.ex-card:hover { transform: translateY(-2px); }
.ex-card .media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-media); background: var(--stripe-light); }
.ex-card .media { overflow: hidden; }
.ex-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--white); }
.ex-card .media.has-img { background: var(--white); }
.ex-card .dur { position: absolute; bottom: 8px; right: 8px; font-size: 11px; font-weight: 800; background: var(--paper); padding: 3px 7px; border-radius: var(--r-pill); }
.ex-card .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ex-card .tags span { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 7px; border-radius: var(--r-pill); text-transform: uppercase; }
.ex-card .t { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; }
.tag-base { background: var(--red); color: var(--ink); }
.tag-boost { background: var(--yellow); color: var(--ink); }
.tag-pro { background: var(--green); color: var(--ink); }
.tag-game { background: var(--blue); color: var(--paper); }
.tag-level { border: 1px solid var(--ink); }

/* steps */
.step-row { display: flex; gap: 14px; padding: 14px 16px; background: var(--paper); border-radius: var(--r-input); font-size: 15px; line-height: 1.45; }
.step-row strong.n { color: var(--red); }

/* path cards */
.path-card { border-radius: var(--r-card); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); transition: transform 0.2s var(--ease-out); }
.path-card:hover { transform: translateY(-2px); }

/* educators */
.edu-tier { background: var(--white); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.edu-tier .n { font-size: 44px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.edu-tier .n small { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.edu-tier.featured { border: 2px solid var(--blue); }

/* checkout */
.co-layout { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: start; }

/* review stars */
.stars { color: var(--yellow); letter-spacing: 2px; font-size: 16px; }

/* util */
.hide-desktop { display: none; }
.center { text-align: center; }
hr.rule { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }

/* ---------- mobile buy bar ----------
   The PDP runs ~10 screens on a phone and the real buy button sits six of
   them down. This docks price + action to the bottom of the viewport as soon
   as the real one scrolls away, so the primary action is always one tap. */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  gap: 12px; align-items: center;
  padding: 10px max(var(--gutter), var(--safe-l)) calc(10px + var(--safe-b)) max(var(--gutter), var(--safe-r));
  background: var(--white); border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -8px 30px rgba(16, 17, 20, 0.1);
  transform: translateY(105%); transition: transform 0.25s var(--ease-out);
}
.buybar.on { transform: none; }
.buybar .bb-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.buybar .bb-name { font-weight: 800; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .bb-price { font-weight: 800; font-size: 17px; line-height: 1; }
.buybar .btn { margin-left: auto; flex: none; }
@media (max-width: 900px) {
  .buybar { display: flex; }
  /* keep the docked bar from covering the end of the page */
  body.has-buybar { padding-bottom: 74px; }
}

/* ---------- filter sheet ----------
   Filters as a sidebar push products a screen and a half down on a phone.
   Below 900px they move into a bottom sheet behind a sticky control bar. */
.filter-bar { display: none; }
@media (max-width: 900px) {
  .filter-bar {
    display: flex; gap: 8px; align-items: center;
    position: sticky; top: var(--nav-h); z-index: 30;
    padding: 10px 0; background: var(--paper);
  }
  .filter-bar .btn { flex: 0 0 auto; min-height: 42px; }
  .filter-bar .f-sort { flex: 1; display: flex; }
  .filter-bar .f-sort select { width: 100%; min-height: 42px; padding: 8px 34px 8px 14px; border-radius: var(--r-pill); }
  /* compact category tiles so products surface sooner on a phone */
  .rail-sm > [class*="grid"], [class*="grid"].is-rail.rail-sm { --rail-card: 62%; }
  .filter-bar .f-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
    border-radius: var(--r-pill); background: var(--yellow); color: var(--ink);
    font-size: 11px; font-weight: 800;
  }
  .shop-layout > .filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border-radius: 20px 20px 0 0;
    padding: 8px var(--gutter) calc(20px + var(--safe-b));
    box-shadow: 0 -20px 60px rgba(16, 17, 20, 0.25);
    transform: translateY(102%); transition: transform 0.28s var(--ease-out);
  }
  .shop-layout > .filters.open { transform: none; }
  .shop-layout > .filters::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--border-input); margin: 8px auto 14px;
  }
  .filters .f-group { padding-bottom: 4px; }
  .filters .check { min-height: var(--tap); }
  .sheet-done { position: sticky; bottom: 0; padding-top: 10px; background: var(--paper); }
}

/* ============================================================
   RESPONSIVE
   Mobile-first intent, expressed as a small ladder of breakpoints:
     1200  desktop crowding
     1024  tablet landscape — sidebars fold
      900  phone/tablet portrait — nav becomes a sheet, rails become swipeable
      600  small phone — single column, tighter type
      380  very small phone
   Anything that must scroll sideways uses .rail (scroll-snap), never a
   grid that overflows.
   ============================================================ */

/* ---------- swipeable rails ----------
   On desktop these are ordinary grids. Below 900px they become horizontal
   scroll-snap carousels that bleed to the screen edge, so a card is always
   visibly cut off — the affordance that says "swipe me". */
.rail { position: relative; }
.rail-dots { display: none; }

@media (max-width: 900px) {
  .rail > .grid, .rail > .grid-2, .rail > .grid-3, .rail > .grid-4,
  .grid.is-rail, .grid-2.is-rail, .grid-3.is-rail, .grid-4.is-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--rail-card, 78%);
    grid-template-columns: none !important;
    /* Setting only overflow-x makes overflow-y compute to auto, not visible —
       so every rail quietly became a vertical scroll container too and ate
       downward swipes. Pin the y axis shut and hand vertical gestures to the
       page. */
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x pinch-zoom;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    gap: 12px;
    /* bleed past the container gutter so cards run to the screen edge */
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rail > [class*="grid"]::-webkit-scrollbar, [class*="grid"].is-rail::-webkit-scrollbar { display: none; }
  .rail > [class*="grid"] > *, [class*="grid"].is-rail > * { scroll-snap-align: start; }
  .rail-dots {
    display: flex; justify-content: center; gap: 6px; padding-top: 2px;
  }
  .rail-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-input); transition: all 0.25s var(--ease-out); }
  .rail-dots i.on { background: var(--ink); width: 18px; border-radius: 3px; }
  /* Cards in a rail fade in without the vertical slide: the offset overflowed
     the track before it played, which is what made the rail scrollable. */
  .is-rail > .reveal { transform: none; }
  .dark .rail-dots i { background: rgba(242, 242, 240, 0.3); }
  .dark .rail-dots i.on { background: var(--yellow); }
  /* narrower cards where the content is small */
  .rail-sm > [class*="grid"], [class*="grid"].is-rail.rail-sm { --rail-card: 46%; }
  .rail-lg > [class*="grid"], [class*="grid"].is-rail.rail-lg { --rail-card: 86%; }
}

/* ---------- utilities ---------- */
.hide-sm { }
.only-sm { display: none !important; }
@media (max-width: 900px) {
  .hide-sm { display: none !important; }
  .only-sm { display: revert !important; }
}

@media (max-width: 1200px) {
  .pdp-grid { grid-template-columns: 1fr 380px; gap: 28px; }
  .co-layout { grid-template-columns: 1fr 360px; }
  .nav-links { gap: 8px; }
  .nav-links a { padding: 8px 10px; font-size: 13px; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-grid, .co-layout, .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .sys-grid { grid-template-columns: minmax(0, 1fr); }
  .sys-arrow { flex-direction: row; padding: 12px 0; }
  .sys-arrow .bar { width: 60px; height: 2px; }
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }

  /* nav becomes a sheet */
  .nav-links { display: none; }
  .nav-board, .site-header .bar::before { display: none; }
  .burger { display: flex; }
  .header-tools .tool.tool-lang { display: none; }
  .brand img { height: 50px; }
  /* three claim pills wrapped onto two lines above the headline — keep the
     strongest one so it sits on a single line */
  .hero-pills > .pill:not(:first-child) { display: none; }
  .site-header .bar { padding-left: max(var(--gutter), var(--safe-l)); padding-right: max(var(--gutter), var(--safe-r)); }

  /* layout collapses */
  .grid-2, .grid-3, .pdp-grid, .co-layout, .shop-layout, .search-results { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky { position: static; }
  .section { padding-top: 40px; padding-bottom: 40px; }
  .section-sm { padding-top: 28px; padding-bottom: 28px; }

  /* type steps down a notch so headlines don't eat the screen */
  .display-xl { font-size: clamp(40px, 12vw, 64px); }
  .display-lg { font-size: clamp(38px, 11.5vw, 60px); }
  .display-md { font-size: clamp(30px, 8.6vw, 44px); }
  .display-sm { font-size: clamp(26px, 7.4vw, 36px); }
  .h2 { font-size: clamp(22px, 6vw, 30px); }
  .h3 { font-size: clamp(20px, 5.2vw, 26px); }
  .h4 { font-size: 19px; }
  .lead { font-size: 16px; }

  /* comfortable touch targets everywhere */
  .btn { padding: 14px 20px; min-height: var(--tap); }
  .btn-sm, .btn-xs { min-height: 40px; }
  .seg-btn { min-height: 40px; padding: 9px 14px; }
  .header-tools .tool { min-height: var(--tap); display: flex; align-items: center; }
  .cart-pill { min-height: 36px; display: inline-flex; align-items: center; }
  .quick-add { width: 40px; height: 40px; }
  .check { min-height: 36px; }
  /* remaining small controls: quantity steppers, cross-sell add, remove,
     drawer close, footer credit. Inline links inside prose keep their line
     box (WCAG 2.5.8 exempts links in a sentence). */
  .qty { gap: 2px; }
  .qty button { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
  .xsell .add { width: 36px; height: 36px; }
  .cart-line .caption[data-line-remove] { min-height: 36px; display: inline-flex; align-items: center; }
  .drawer-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
  .site-footer .credit { min-height: 40px; }
  /* standalone "see all" / "load more" links act as buttons, so give them a
     real target. Links inside a sentence keep their line box. */
  .row-baseline > .link, .card > .link, .card-dark > .link, .stack-3 > .link { min-height: 40px; display: inline-flex; align-items: center; }

  .ticker { justify-content: flex-start; gap: 10px; font-size: 11px; padding: 12px var(--gutter); }

  /* ---- media chips ----
     These are absolutely positioned overlays with hard-coded `top` values,
     which assume one line. On a phone they wrap to two or three and collide
     with whatever sits below. Shrink them, and on the full-bleed bands stack
     the chip and the badges in normal flow so they can never overlap. */
  .ph-chip { font-size: 10px; letter-spacing: 0.04em; padding: 4px 8px; line-height: 1.35; }
  .ph > .ph-chip, .ph-dark > .ph-chip { top: 10px; left: 10px; max-width: calc(100% - 20px); }
  .ph-chip-tr { right: 10px; left: auto; }
  /* Production notes stacked over real photography are pure clutter on a
     phone — hide them. What stays is the placeholder label, which is the only
     content its box has, and a single status pill per band. */
  .ph.has-img > .ph-chip, .ph-dark.has-img > .ph-chip,
  .hero-media > .ph-chip, .rr-bleed > .ph-chip, .rr-hero > .ph-chip { display: none; }
  .rr-badges > .pill:not(:first-child) { display: none; }

  /* An empty placeholder box reads better with its label centred, and the
     label should fill the box rather than shrink-wrap — in a narrow rail card
     shrink-to-fit was stacking it five lines deep. */
  .ph:not(.has-img) > .ph-chip, .ph-dark:not(.has-img) > .ph-chip {
    top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
    text-align: center; width: calc(100% - 16px); max-width: none;
    font-size: 9px; padding: 5px 6px;
  }
  .rr-bleed, .rr-hero { display: flex; flex-direction: column; }
  .rr-bleed > .ph-chip, .rr-hero > .ph-chip {
    position: static; align-self: flex-start; transform: none;
    margin: 14px var(--gutter) 0; max-width: calc(100% - 2 * var(--gutter));
  }
  .rr-badges { position: static; margin: 10px var(--gutter) 0; }
  .rr-copy, .rr-hero .inner { margin-top: auto; }
  /* a section title and its aside can't share a line on a phone */
  .row-baseline { flex-direction: column; align-items: flex-start; gap: 6px; }
  .row-baseline > .link, .row-baseline > a { align-self: flex-start; }
  .ticker span:nth-child(n+7) { display: none; }
  .filters { flex-direction: column; gap: 20px; }
  .thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .drawer { width: 100%; }
  .cross-sells .items { gap: 8px; }
  .search-panel { padding-top: max(16px, env(safe-area-inset-top, 0px)); }

  /* footer folds into an accordion */
  .site-footer { margin-top: 48px; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 0; padding: 32px var(--gutter) 8px; }
  .site-footer .fcol { border-top: 1px solid rgba(242, 242, 240, 0.14); }
  .site-footer .fcol .col-title {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 16px 0; min-height: var(--tap); cursor: pointer; opacity: 0.75; text-align: left;
  }
  .site-footer .fcol .col-title::after { content: "+"; font-size: 18px; font-weight: 700; opacity: 0.7; }
  .site-footer .fcol .col-title[aria-expanded="true"]::after { content: "−"; }
  .site-footer .fcol-body { display: none; padding-bottom: 12px; }
  .site-footer .fcol.open .fcol-body { display: block; }
  .site-footer .fcol a { padding: 9px 0; }
  .site-footer .legal { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: calc(24px + var(--safe-b)); }
  .site-footer .legal-pay { order: 3; }
  .site-footer .credit { order: 2; margin-left: 0; }
}

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .age-tile { min-height: 0; }
  .pcard { padding: 10px; }
  .pcard .meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .card, .card-lg, .card-dark { padding: 18px; }
  .buybox-float { padding: 20px; }
  .cart-line { padding: 14px var(--gutter); gap: 10px; }
  .cart-line .thumb { width: 64px; height: 64px; }
  .thumbs { grid-template-columns: repeat(5, 1fr); }
  .crumbs { font-size: 12px; }
  /* wide content scrolls rather than squashing */
  .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .display-lg { font-size: 36px; }
  .btn { padding: 13px 16px; font-size: 14px; }
  .header-tools { gap: 8px; }
}

/* landscape phones: don't let a full-height hero swallow the screen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-media { min-height: 240px; }
  .rr-bleed, .rr-hero { min-height: 420px; }
  .mobile-menu { padding-bottom: 24px; }
}