/* ══════════ Self-hosted fonts (Willis 2026-09-03): Inter (SIL OFL 1.1) for everything, Space Mono (SIL OFL 1.1) for labels.
   Bundled WOFF2 in /fonts so the site renders identically on Mac, Windows and Linux with no Google Fonts request. ══════════ */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-100-900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-100-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/spacemono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/spacemono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/spacemono-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/spacemono-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* LookyBox — Apple Liquid Glass system + Looky identity
   Ground #f5f5f7 · unified white surfaces · hairlines · glass only on nav/overlays
   Looky signature: the dock header (NEVER changes) + gold/red used as accent only */

:root {
  /* neutrals — One Medical warmth (Willis palette 2026-08-23) */
  --bg: #F7F7F7;          /* page ground (Willis 2026-09-02) — product areas sit on white panels */
  --shell: #f4f5f7;
  --shell-2: #efefef;
  --surface: #ffffff;
  --hover: #f4f5f7;
  --text: #151515;
  --text-body: #444444;
  --text-2: #666666;
  --text-3: #666666;
  --faint: #d2d2d7;
  --hairline: rgba(34, 34, 34, 0.09);
  --track: #e8e8e8;

  /* accents — teal primary, Amazon-orange CTA, Looky gold stays on the brand */
  --accent: #ff6b00;
  --accent-deep: #b54a00;
  --looky-gold: #f7f402;
  --looky-gold-ink: #5c5600;
  --cta: #ff6b00;
  --cta-deep: #b54a00;
  --live: #00b96b;
  --heat: #ff2e91;
  --grad-cta: linear-gradient(135deg, #ff6a00 0%, #ff4000 100%);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-pill: 999px;
  --r-chip: 6px;
  --r-thumb: 12px;
  --r-card: 18px;
  --r-panel: 22px;
  --r-hero: 26px;

  --sh-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --sh-panel: 0 1px 3px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.05);
  --sh-lift: 0 12px 32px rgba(0, 0, 0, 0.1);
  --sh-cta: 0 20px 54px rgba(255, 107, 0, 0.3);

  --max-grid: 1080px;
  --pad-x: 22px;
  --sect: clamp(4rem, 3rem + 5vw, 8rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  letter-spacing: 1px;
  word-spacing: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3 { font-weight: 700; line-height: 1.12; }
h1 { letter-spacing: 1px; }
h2 { letter-spacing: 1px; }
h3 { letter-spacing: 0.5px; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }
.wrap { max-width: var(--max-grid); margin: 0 auto; padding-inline: var(--pad-x); }
/* page-width drag splitters (2026-09-12) — sit exactly at the content column's edge (not the viewport edge).
   nav.js measures a real .wrap-shaped probe element's on-screen position and writes it as an inline left/right
   px value (zoom-proof, see nav.js). Each side declares ONLY its own offset here — declaring both left AND
   right with an explicit width over-constrains the box, and the browser silently drops `right` (solves via
   left+width instead), which pinned .pw-handle.right to the far-left edge no matter what nav.js set. */
.pw-handle { position: fixed; top: 0; bottom: 0; width: 10px; z-index: 50; cursor: ew-resize; touch-action: none; }
.pw-handle.left { left: 0; }
.pw-handle.right { right: 0; }
/* Willis 2026-09-12: "we need a border so we know the drag splitter is there... make it easy for people to
   see" — was invisible until hover (opacity:0), so nobody could ever discover it. Now a faint grip pill sits
   on the edge at all times (a white outline + grey fill reads on both light and dark section backgrounds),
   brightening to the site's orange accent on hover/drag so it clearly reacts. Paired with a one-time floating
   "Drag the page edge to resize" hint on first visit (see nav.js showHint()). */
.pw-handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5px; height: 60px; border-radius: 3px; background: rgba(120,126,138,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.65), 0 1px 4px rgba(0,0,0,.2); opacity: .75; transition: opacity .15s ease, background .15s ease, height .15s ease, box-shadow .15s ease; }
.pw-handle:hover::before, .pw-handle.dragging::before { opacity: 1; height: 88px; background: #FF7801; box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 2px 10px rgba(255,120,1,.45); }
/* Willis 2026-09-12: "some kind of dotted line... to see the drag splitter even if a little transparent" —
   a full page-height dotted guide, on top of the grip pill above, so the column boundary reads at a glance
   while scrolling, not just where the grip happens to sit. mix-blend-mode:difference inverts against whatever
   is behind it, so one white dashed line stays visible on every section background on the site (dark cosmic
   music band, yellow sounds band, white pages, the grey homepage ground) without per-section color overrides. */
.pw-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background-image: repeating-linear-gradient(to bottom, #fff 0 6px, transparent 6px 16px); mix-blend-mode: difference; opacity: .5; pointer-events: none; transition: opacity .15s ease; }
.pw-handle:hover::after, .pw-handle.dragging::after { opacity: .85; }
@media (max-width: 900px) { .pw-handle { display: none; } }

/* pointer-events:none (Willis's verification found the hint sat right on top of .pw-handle.right's clickable
   strip, z-index 60 over 50 — a real mousedown there hit the hint and never reached the handle underneath,
   so the splitter was un-draggable for the whole ~6s the hint was showing). It's informational only, so
   letting clicks pass through to the handle is correct — it still auto-dismisses via timeout or on drag-start. */
.pw-hint { position: fixed; top: 50%; right: 26px; transform: translateY(-50%) translateX(10px); z-index: 60; background: #1b2129; color: #fff; font: 700 13px/1.3 Inter, system-ui, sans-serif; padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); max-width: 190px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.pw-hint.show { opacity: .96; transform: translateY(-50%) translateX(0); }
.pw-hint::after { content: ""; position: absolute; top: 50%; right: -6px; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #1b2129; }
@media (max-width: 900px) { .pw-hint { display: none; } }

/* Width-preset pill moved into the LOOKYRADIO dock (music.js, #lrd-width) 2026-09-12 — "put it on the right
   bar" — was overlapping page content as a standalone bottom-left pill. */

/* ══════════ HEADER + LOOKY DOCK — FIXED, identical on every page ══════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #232327;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  color: #ffffff;
}
.nav-in { display: flex; align-items: center; gap: 14px; padding-block: 8px; }
.logo {
  font-family: var(--font); font-weight: 600; font-size: 13px;
  letter-spacing: 0.34em; display: flex; align-items: center; gap: 11px;
  white-space: nowrap;
}
.logo .lb-mark { width: 28px; height: 28px; flex: none; overflow: visible; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.25; }
.logo-txt small {
  font-family: var(--mono); font-weight: 400; font-size: 7.5px;
  letter-spacing: 0.18em; color: #9aa1ab; white-space: nowrap;
}
footer .logo-txt small { color: var(--text-3); }
.logo .lb-mark .stroke {
  fill: none; stroke: currentColor; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
}
.logo .lb-mark .dot {
  fill: var(--looky-gold); stroke: currentColor; stroke-width: 4;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo:hover .lb-mark .dot { transform: translateY(-5px); }

/* Wordmark lockup: "LOOKY" + orange "BOX" pill, replaces the icon mark on
   LookyBox's own pages (product sub-brands like lookymark.html keep the
   icon mark above — do not delete .lb-mark/.stroke/.dot, still in use there). */
.logo-word { display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.logo-word-row { display: inline-flex; align-items: center; gap: 5px; }
.looky-text {
  color: currentColor; font-family: var(--font); font-weight: 900;
  font-size: 26px; letter-spacing: -1.6px;
}
.box-shape {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 9px 5px; border-radius: 8px; background: #FF6B00;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20);
  transition: transform 0.18s ease, background 0.18s ease;
}
.box-text { color: #fff; font-family: var(--font); font-weight: 900; font-size: 18px; letter-spacing: -0.9px; }
.logo:hover .box-shape { background: #F35F00; transform: translateY(-2px); }
.logo-word small {
  font-family: var(--mono); font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.14em; color: #d7dbe2; white-space: nowrap;
}
@media (max-width: 520px) {
  .looky-text { font-size: 20px; letter-spacing: -1.1px; }
  .box-shape { padding: 3px 7px 4px; border-radius: 6px; }
  .box-text { font-size: 14px; letter-spacing: -0.6px; }
}
.lkdock { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.lkdock .bar {
  display: flex; gap: 2px; align-items: flex-end;
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px; padding: 4px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.lkdock a {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  color: #c9c9cd; padding: 3px 8px 5px; border-radius: 11px;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.lkdock a .ic { font-size: 16px; line-height: 1.2; }
.lkdock a:hover { background: rgba(255, 255, 255, 0.10); color: #fff; transform: translateY(-2px); }
.lkdock a.here { background: var(--looky-gold); color: var(--text); }
.nav-cta {
  margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em; color: var(--text); background: var(--cta);
  border-radius: var(--r-pill); padding: 8px 16px;
  white-space: nowrap; transition: transform 0.18s, box-shadow 0.18s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 106, 0, 0.45); }
/* ══════════ end fixed header ══════════ */

/* ---------- hero ---------- */
.hero { padding-block: 22px calc(var(--sect) * 0.7); }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  background: var(--shell);
  /* faint iso-diamond lattice (2:1 tiles, Age-of-Empires style) */
  background-image:
    repeating-linear-gradient(26.57deg, rgba(27, 33, 41, 0.04) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-26.57deg, rgba(27, 33, 41, 0.04) 0 1px, transparent 1px 46px);
  border-radius: var(--r-hero);
  padding: clamp(28px, 5vw, 64px);
  position: relative; overflow: hidden;
}
.hero-in { position: relative; z-index: 1; }
.kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--surface);
  border-radius: var(--r-pill); padding: 7px 15px; margin-bottom: 22px;
}
.promo-hero .kicker { background: linear-gradient(90deg, #F97316, #E8317F); color: #fff; }
.promo-hero .kicker::before { content: "✓"; width: auto; height: auto; border-radius: 0; background: none; font-weight: 800; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.hero h1 { font-size: clamp(30px, 5.4vw, 56px); }
.hero h1 mark { background: none; color: var(--accent); }
.hero-sub {
  margin: 22px 0 8px;
  font-size: clamp(17px, 1rem + 0.4vw, 20px);
  color: var(--text-body); max-width: 34em;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-priv { font-family: var(--mono); font-weight: 700; font-size: 14.5px; color: var(--text); margin-bottom: 30px; }
.hero-priv b { color: var(--live); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; font-weight: 600; font-size: 15px;
  padding: 12px 26px; border-radius: var(--r-pill);
  cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  border: none;
}
.btn-red { background: var(--cta); color: var(--text); box-shadow: var(--sh-cta); }
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 24px 60px rgba(255, 106, 0, 0.4); }
.btn-quiet { background: var(--surface); color: var(--text); box-shadow: var(--sh-card); }
.btn-quiet:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.hero-note { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--text-2); margin-top: 14px; }

/* hero visual — the software box on an isometric floor */
.hero-visual { position: relative; display: grid; place-items: center; perspective: 1000px; }
.hero-visual::before {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  left: 50%; top: 58%;
  margin-left: -360px; margin-top: -360px;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 106, 0, 0.28) 0 1.5px, transparent 1.5px 48px),
    repeating-linear-gradient(90deg, rgba(255, 106, 0, 0.28) 0 1.5px, transparent 1.5px 48px);
  transform: rotateX(58deg) rotateZ(45deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  pointer-events: none;
}
.hero-visual .swbox, .hero-visual .hero-badge { position: relative; z-index: 1; }
.hero-badge {
  position: absolute; top: -4px; right: 8px; z-index: 2;
  background: var(--surface); color: var(--live);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  padding: 5px 11px; border-radius: var(--r-pill);
  box-shadow: var(--sh-card);
}
.swbox {
  width: min(320px, 70vw); position: relative;
  transform: rotateY(-13deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-visual:hover .swbox { transform: rotateY(-4deg) rotateX(1deg); }
.swbox-img {
  display: block; width: 100%; height: auto;
  border-radius: 10px;
  box-shadow: var(--sh-panel), 20px 26px 50px rgba(27, 33, 41, 0.22);
}
.swbox-spine {
  position: absolute; top: 0; bottom: 0; left: -22px; width: 22px;
  background: var(--text); border-radius: 6px 0 0 6px;
  transform: rotateY(46deg); transform-origin: right;
}
.swbox-face {
  position: absolute; inset: 0; background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-panel), 18px 22px 44px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; padding: 20px;
}
.swbox-brand {
  font-family: var(--font); font-weight: 600; font-size: 10px;
  letter-spacing: 0.3em; color: var(--text-2);
  display: flex; align-items: center; gap: 7px;
}
.swbox-brand .lb-mark-sm { width: 18px; height: 18px; overflow: visible; }
.swbox-eye {
  margin: auto; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: var(--looky-gold);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.swbox-eye::after {
  content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: var(--text); box-shadow: inset -5px -5px 0 var(--accent);
}
.swbox-title { font-size: 21px; font-weight: 700; letter-spacing: 1px; }
.swbox-tag { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 4px; }
.swbox-sticker {
  position: absolute; top: -14px; left: -16px;
  background: var(--heat); color: #fff;
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  text-align: center; padding: 10px 12px; border-radius: var(--r-pill);
  transform: rotate(-8deg);
  box-shadow: 0 10px 26px rgba(255, 46, 145, 0.4);
}

/* ---------- feature strip — ONE panel, hairline-divided ---------- */
.feat-strip { padding-bottom: var(--sect); }
.feat-panel {
  background: var(--shell); border-radius: var(--r-panel);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.feat {
  padding: 28px 26px;
  border-left: 1px solid var(--hairline);
}
.feat:first-child { border-left: none; }
.feat .ic { font-size: 22px; }
.feat .t { font-size: 15px; font-weight: 600; margin: 8px 0 4px; letter-spacing: 1px; }
.feat p { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ---------- promo elements (One Medical pattern, used in founding band) ---------- */
.promo-pill {
  display: inline-block;
  background: #3b5bdb; color: #fff;
  font-size: 12.5px; font-weight: 600;
  border-radius: var(--r-pill); padding: 5px 14px; margin-bottom: 10px;
}
.promo-line {
  font-size: clamp(20px, 2.8vw, 30px); font-weight: 700; letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.promo-line s { opacity: 0.55; font-weight: 500; margin-inline: 4px; }

/* One Medical yellow pill CTA */
.btn-sun { background: #f8d24a; color: var(--text); box-shadow: 0 10px 26px rgba(248, 210, 74, 0.4); }
.btn-sun:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(248, 210, 74, 0.5); }

/* ---------- trust strip ---------- */
.trust-strip { padding-bottom: var(--sect); }
.trust-in {
  display: flex; gap: 10px 14px; flex-wrap: wrap; justify-content: center;
}
.trust-in span {
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
  color: var(--text); background: var(--shell);
  border-radius: var(--r-pill); padding: 11px 18px;
}

/* ---------- quote jab + section CTAs ---------- */
.quote-jab {
  margin: 34px auto 0; max-width: 560px; text-align: center;
  font-size: 16px; color: var(--text-body);
}
.quote-jab em { color: var(--text-3); }
.quote-jab b { color: var(--text); font-variant-numeric: tabular-nums; }
.section-cta { text-align: center; margin-top: 26px; }

/* ---------- benefits grid — one panel, hairline cells ---------- */
.ben-panel {
  margin-top: 40px;
  background: var(--surface); border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-panel); overflow: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.ben {
  padding: 24px 24px 26px;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
.ben:nth-child(3n + 1) { border-left: none; }
.ben:nth-child(-n + 3) { border-top: none; }
.ben .ic { font-size: 20px; display: block; }
.ben b { display: block; font-size: 14.5px; margin: 8px 0 3px; letter-spacing: 0.5px; }
.ben p { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ---------- founding band — One Medical teal gradient offer ---------- */
.found-band {
  background: linear-gradient(110deg, #ffb27d 0%, #ff8a3d 55%, #ff6a00 100%);
  border-radius: var(--r-hero);
  display: grid; grid-template-columns: 1fr auto;
  gap: 30px; align-items: center;
  padding: clamp(28px, 4vw, 44px);
  color: var(--text);
}
.found-band .lead { max-width: 46em; color: rgba(27, 33, 41, 0.78); }
.found-band .promo-line { margin-top: 10px; }

/* ---------- FAQ — One Medical two-column: heading left, accordion right ---------- */
.faq-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 5vw, 60px); align-items: start;
}
.faq-more {
  display: inline-block; margin-top: 16px;
  color: var(--accent-deep); font-weight: 600; font-size: 14.5px;
  text-decoration: underline;
}
.faq-panel {
  background: var(--surface); border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-panel); overflow: hidden;
}
.faq-panel details { border-top: 1px solid var(--hairline); }
.faq-panel details:first-child { border-top: none; }
.faq-panel summary {
  cursor: pointer; list-style: none;
  padding: 18px 24px; font-weight: 600; font-size: 15.5px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.15s;
}
.faq-panel summary::-webkit-details-marker { display: none; }
.faq-panel summary::after {
  content: "+"; font-size: 20px; color: var(--text-3); font-weight: 400;
  transition: transform 0.2s;
}
.faq-panel details[open] summary::after { transform: rotate(45deg); }
.faq-panel summary:hover { background: var(--hover); }
.faq-panel details p {
  padding: 0 24px 20px; color: var(--text-body); font-size: 14.5px; max-width: 60em;
}

/* ---------- sections ---------- */
section { padding-block: 0 var(--sect); }
.sect-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 14px;
}
section h2 { font-size: clamp(24px, 3.4vw, 40px); max-width: 24em; }
.lead { margin-top: 14px; color: var(--text-body); max-width: 640px; font-size: 17px; }

/* ---------- the math — two soft panels ---------- */
.math-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; margin-top: 40px; align-items: stretch;
}
/* One Medical two-pane comparison */
.math-card {
  border-radius: var(--r-hero);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
  display: flex; flex-direction: column;
}
.math-card.bad { background: #eceae4; }
.math-card.good { background: #fff1e6; }
.pane-title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; }
.pane-sub { margin-top: 8px; color: var(--text-body); font-size: 16px; }
.pane-list { list-style: none; margin: 26px 0 6px; padding: 0; }
.pane-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; font-size: 15px; color: var(--text-body);
}
.pane-list .li-ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border-radius: 50%;
  box-shadow: var(--sh-card); font-size: 17px;
}
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.chip {
  background: rgba(27, 33, 41, 0.06);
  border-radius: 10px; padding: 10px 16px;
  font-size: 14.5px; color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.chip b { color: var(--text); }
.chip-good { background: rgba(255, 106, 0, 0.14); }
.math-card .fine { margin-top: 16px; font-size: 12px; color: var(--text-3); }
.math-card .btn { align-self: flex-start; margin-top: 20px; }

/* ---------- shelf — unified panel with hairline rows ---------- */
/* One Medical product spotlight: pill → question → prices → tag → CTA + photo */
.spotlight {
  margin-top: 40px;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 48px); align-items: center;
}
.spot-pill {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  color: var(--accent-deep); border: 1.5px solid var(--accent);
  border-radius: var(--r-chip); padding: 4px 12px; margin-bottom: 14px;
  background: var(--surface);
}
.spot-text h3 { font-size: clamp(24px, 3vw, 34px); }
.spot-sub { margin-top: 10px; color: var(--text-body); font-size: 15.5px; max-width: 34em; }
.spot-price {
  margin-top: 18px; font-size: 17px; color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.spot-price.alt { margin-top: 4px; }
.spot-price b { font-size: 24px; color: var(--text); }
.spot-price sup { font-size: 12px; font-weight: 700; color: var(--text); }
.no-sub-tag {
  display: inline-block; margin-top: 16px;
  background: rgba(255, 106, 0, 0.14); color: var(--accent-deep);
  font-size: 13.5px; font-weight: 600;
  border-radius: 8px; padding: 9px 14px;
}
.spot-text .fine { margin-top: 12px; font-size: 12px; color: var(--text-3); }
.spot-ctas { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.spot-img img {
  display: block; width: min(340px, 100%); height: auto; margin-inline: auto;
  border-radius: var(--r-card);
  box-shadow: var(--sh-panel), 14px 20px 44px rgba(27, 33, 41, 0.18);
  transform: rotate(1.5deg);
}
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--accent-deep); background: rgba(255, 106, 0, 0.13);
  border-radius: var(--r-pill); padding: 4px 11px;
}
.live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }

.shelf-panel {
  margin-top: 18px;
  background: var(--surface); border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-panel);
  overflow: hidden;
}
.shelf-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 20px; align-items: center;
  padding: 20px 26px;
  border-top: 1px solid var(--hairline);
  transition: background 0.15s;
}
.shelf-row:first-child { border-top: none; }
.shelf-row:hover { background: var(--hover); }
.shelf-row .ic {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 22px; background: var(--shell); border-radius: var(--r-thumb);
}
.shelf-row h3 { font-size: 16px; }
.shelf-row p { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.soon-pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-3); background: var(--track);
  border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap;
}
.shelf-verticals { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.shelf-verticals span {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
  background: var(--shell); border-radius: var(--r-pill);
  padding: 9px 16px;
}

/* ---------- how — One Medical tinted card trio ---------- */
.steps {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.step {
  background: #e4eef2; border-radius: var(--r-card);
  padding: 28px 26px;
}
.step:nth-child(2) { background: #fff1e6; }
.step:nth-child(3) { background: #efece2; }
.step-ic {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--surface); border-radius: var(--r-thumb);
  box-shadow: var(--sh-card); font-size: 22px; margin-bottom: 14px;
}
.step h3 { font-size: 17px; }
.step p { margin-top: 8px; color: var(--text-body); font-size: 14px; }

/* ---------- doctor ---------- */
.doc-panel {
  margin-top: 40px;
  background: var(--surface); border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-panel);
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
}
.doc-story { padding: 36px 34px; }
.doc-story p { color: var(--text-body); margin-bottom: 14px; font-size: 15px; }
.doc-story p b { color: var(--text); font-weight: 600; }
.cites { padding: 36px 34px; border-left: 1px solid var(--hairline); background: var(--hover); border-radius: 0 var(--r-panel) var(--r-panel) 0; }
.cites .t {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--text-3); margin-bottom: 12px; text-transform: uppercase;
}
.cites ul { list-style: none; }
.cites li {
  font-size: 13.5px; color: var(--text-2);
  padding: 10px 0; border-top: 1px solid var(--hairline);
}
.cites li:first-of-type { border-top: none; }
.cites li b { color: var(--text); font-weight: 600; }

/* ---------- final ---------- */
.final { text-align: center; }
.final-panel {
  background: var(--grad-cta);
  border-radius: var(--r-hero);
  box-shadow: 0 24px 70px rgba(255, 106, 0, 0.24);
  padding: clamp(44px, 7vw, 80px) 30px;
  color: #fff;
}
.final-panel h2 { color: #fff; margin-inline: auto; }
.final-panel .lead { color: rgba(255, 255, 255, 0.85); margin-inline: auto; }
.final-panel .btn { margin-top: 28px; background: #fff; color: var(--text); font-size: 16px; padding: 14px 32px; }
.final-panel .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); }
.final-panel .hero-note { color: rgba(255, 255, 255, 0.75); margin-top: 16px; }
.final-panel .hero-note a { text-decoration: underline; color: #fff; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--hairline); background: var(--surface); padding: 26px 0 40px; }
.foot-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-in .fine { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); letter-spacing: 0.04em; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) { .lkdock { display: none; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; padding-top: 0.5rem; }
  .feat-panel { grid-template-columns: 1fr 1fr; }
  .feat { border-top: 1px solid var(--hairline); }
  .feat:nth-child(-n+2) { border-top: none; }
  .feat:nth-child(odd) { border-left: none; }
  .steps { grid-template-columns: 1fr; }
  .step { border-left: none; border-top: 1px solid var(--hairline); }
  .step:first-child { border-top: none; }
  .math-grid { grid-template-columns: 1fr; }
  .doc-panel { grid-template-columns: 1fr; }
  .spotlight { grid-template-columns: 1fr; }
  .spot-img { order: -1; }
  .faq-grid { grid-template-columns: 1fr; }
  .ben-panel { grid-template-columns: 1fr 1fr; }
  .ben:nth-child(3n + 1) { border-left: 1px solid var(--hairline); }
  .ben:nth-child(odd) { border-left: none; }
  .ben:nth-child(-n + 2) { border-top: none; }
  .found-band { grid-template-columns: 1fr; }
  .cites { border-left: none; border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r-panel) var(--r-panel); }
  .shelf-hero { grid-template-columns: auto 1fr; }
  .shelf-hero .buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .swbox, .btn, .lkdock a, .nav-cta, .shelf-row { transition: none; }
}

/* ---------- iso lattice on the other boxes ---------- */
.feat-panel, .math-card.bad, .math-card.good, .step {
  background-image:
    repeating-linear-gradient(26.57deg, rgba(27, 33, 41, 0.036) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-26.57deg, rgba(27, 33, 41, 0.036) 0 1px, transparent 1px 46px);
}
.found-band, .final-panel {
  background-image:
    repeating-linear-gradient(26.57deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-26.57deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 46px),
    linear-gradient(110deg, #ffb27d 0%, #ff8a3d 55%, #ff6a00 100%);
}
.final-panel {
  background-image:
    repeating-linear-gradient(26.57deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-26.57deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 46px),
    linear-gradient(135deg, #ff6a00 0%, #cc4a00 100%);
}

/* iso floor under the spotlight box, like the hero */
.spot-img { position: relative; perspective: 1000px; }
.spot-img::before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  left: 50%; top: 58%;
  margin-left: -280px; margin-top: -280px;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 106, 0, 0.24) 0 1.5px, transparent 1.5px 44px),
    repeating-linear-gradient(90deg, rgba(255, 106, 0, 0.24) 0 1.5px, transparent 1.5px 44px);
  transform: rotateX(58deg) rotateZ(45deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  pointer-events: none;
}
.spot-img img { position: relative; z-index: 1; }

/* ---------- buy section — product card in the teal panel ---------- */
.buy-panel {
  text-align: left;
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 4vw, 52px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
}
.buy-img img {
  display: block; width: min(320px, 100%); height: auto; margin-inline: auto;
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(10, 40, 35, 0.4);
  transform: rotate(-1.5deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.buy-img img:hover { transform: rotate(0deg) scale(1.02); }
.buy-panel h2 { text-align: left; }
.buy-name { margin-top: 10px; font-size: 17px; font-weight: 700; color: #fff; }
.buy-name span { font-weight: 400; color: rgba(255, 255, 255, 0.8); }
.buy-list { list-style: none; margin: 18px 0 0; padding: 0; }
.buy-list li {
  padding: 5px 0; font-size: 15px; color: rgba(255, 255, 255, 0.92);
}
.buy-price-row { margin-top: 20px; }
.buy-price {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.buy-price sup { font-size: 0.45em; }
.buy-price small {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.06em; color: var(--looky-gold);
}
.buy-ctas { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.buy-ctas .btn { margin-top: 0; }
.buy-ctas .btn:not(.btn-red) { background: #fff; color: var(--text); }
.buy-fine { margin-top: 16px; font-size: 11.5px; color: rgba(255, 255, 255, 0.75); }

@media (max-width: 900px) {
  .buy-panel { grid-template-columns: 1fr; text-align: center; }
  .buy-panel h2, .buy-name, .buy-list li { text-align: left; }
  .buy-ctas { justify-content: flex-start; }
}


@media (max-width: 700px) {
  .hero-visual::before { width: 130vw; height: 130vw; margin-left: -65vw; margin-top: -65vw; }
  .spot-img::before { width: 120vw; height: 120vw; margin-left: -60vw; margin-top: -60vw; }
}

/* mobile header: tagline hides, CTA tightens (desktop lockup unchanged) */
@media (max-width: 640px) {
  .logo-txt small { display: none; }
  .logo { letter-spacing: 0.2em; }
  .nav-cta { font-size: 10px; padding: 7px 12px; }
  .nav-in { gap: 10px; }
}

/* ---------- full-demo request form ---------- */
.fd-panel {
  background: var(--surface); border-radius: var(--r-hero);
  border: 1px solid var(--hairline); box-shadow: var(--sh-panel);
  padding: clamp(28px, 4.5vw, 52px);
}
.fd-form { margin-top: 24px; max-width: 640px; }
.fd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fd-form input {
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--shell); border: none; border-radius: 10px;
  padding: 13px 15px; width: 100%;
  transition: box-shadow 0.15s, background 0.15s;
}
.fd-form input::placeholder { color: var(--text-3); }
.fd-form input:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2.5px var(--accent); }
.fd-form .btn { margin-top: 6px; }
.fd-msg { margin-left: 14px; font-weight: 600; color: var(--accent-deep); }
@media (max-width: 640px) { .fd-row { grid-template-columns: 1fr; } }

/* google sign-in row */
.g-wrap { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-or { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* header google sign-in slot */
.g-head { display: flex; align-items: center; margin-left: auto; }
.g-head + .nav-cta { margin-left: 12px; }
.g-user-dd { position: relative; }
.g-user {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12px; font-weight: 600; color: #f5f5f7;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; padding: 5px 12px 5px 6px; white-space: nowrap; cursor: pointer;
}
.g-user:hover, .g-user-dd.open .g-user { background: rgba(255, 255, 255, 0.18); }
.g-user img { width: 22px; height: 22px; border-radius: 50%; }
.g-user .caret { font-size: 9px; opacity: .8; }
.g-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 190px;
  background: #fff; border: 1px solid #5F5627; border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 36px rgba(0,0,95,.22);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.g-user-dd.open .g-user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.g-user-email { padding: 8px 10px 6px; font-size: 11.5px; color: #666; border-bottom: 1px solid #eee; margin-bottom: 4px; word-break: break-all; }
.g-user-out { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font: 600 13px var(--font); color: #00005F; cursor: pointer; }
.g-user-out:hover { background: #F6F7FA; }
@media (max-width: 760px) { .g-head { display: none; } }

/* ---------- ionicons sizing (inherit currentColor) ---------- */
.icn { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
.lkdock .ic .icn { width: 16px; height: 16px; display: block; margin-inline: auto; }
.feat .ic .icn, .shelf-row .ic .icn { width: 24px; height: 24px; }
.step-ic .icn { width: 24px; height: 24px; }
.ben .ic .icn { width: 22px; height: 22px; }
.li-ic .icn { width: 18px; height: 18px; }
.trust-in .icn { width: 15px; height: 15px; margin-right: 4px; color: var(--accent-deep); }
.feat .ic .icn, .ben .ic .icn, .shelf-row .ic .icn, .step-ic .icn { color: var(--accent); }

/* dock: bright icons/labels on dark bar (Willis: icons must be visible/white) */
.lkdock a { color: #f2f2f5; }
.lkdock a:hover { color: #ffffff; }
.lkdock a.here { color: var(--text); }

/* ══════════ marketplace (Alibaba layout, looky-glass skin) ══════════ */
.mkt-search-bar { background: var(--shell); border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.mkt-search-in { display: flex; align-items: center; gap: 14px; }
#mkt-q {
  flex: 1; font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-pill);
  padding: 11px 20px;
}
#mkt-q:focus { outline: none; border-color: var(--accent); }
.mkt-count { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.mkt-sort-lbl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.mkt-sort-lbl select {
  font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-chip); padding: 5px 8px; cursor: pointer;
}
.mkt-wrap { padding-block: 22px 60px; }
.mkt-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip-f {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 7px 16px;
}
.chip-f.active { background: var(--text); color: #fff; border-color: var(--text); }

/* ── Chrome-Web-Store-style home shelf ─────────────────────────── */
.cws-h { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.cws-sub { color: var(--text-2); font-size: 14.5px; margin: 0 0 20px; }
/* the trust-point strip gets the same frame as the sections around it, and the dead space under it goes (Willis 2026-09-08 "we have no lines here") */
.feed-wide > .trust-strip { border: 1px solid #5F5627; border-radius: 22px; background: #fff; padding: 16px 20px; margin: 22px 0; }
.feed-wide > .trust-strip .trust-in { gap: 10px 14px; }
.feed-wide > .trust-strip .trust-in span { border: 1px solid #E3E5EC; }
@media (max-width: 700px) { .feed-wide > .trust-strip { border-radius: 16px; padding: 12px 14px; } }
/* a rule line between the blocks inside a shelf section — Top categories | You might like | Top charts (Willis 2026-09-08) */
section .cws-h:not(:first-of-type) { border-top: 1px solid #DDDDDD; padding-top: 30px; }
@media (max-width: 700px) { section .cws-h:not(:first-of-type) { padding-top: 22px; } }
.cws-chips { gap: 12px; }
.cws-chips { display: none !important; }   /* the chip row still drives the filter; the dropdown is what people see (Willis 2026-09-08) */
.cws-sel-wrap { display: block; margin-top: 14px; max-width: 420px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cws-sel { width: 100%; font: 800 16px Inter, system-ui, sans-serif; color: #00005F; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300005F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; border: 2px solid #00005F; border-radius: 14px; padding: 14px 44px 14px 16px; appearance: none; -webkit-appearance: none; box-shadow: 0 3px 0 #00005F; cursor: pointer; }
.cws-sel:hover { background-color: #FFF8E6; }
.cws-sel:focus { outline: none; border-color: #FF7801; box-shadow: 0 3px 0 #FF7801; }
@media (max-width: 700px) { .cws-sel-wrap { max-width: none; } }
}
.cws-chips .chip-f {
  font-size: 15px; font-weight: 800; color: #000; border: none;
  border-radius: 14px; padding: 15px 22px; min-width: 150px; text-align: left;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cws-chips .chip-f:hover { filter: brightness(0.96); transform: translateY(-1px); }
.cws-chips .chip-f:nth-child(1) { background: #f1f3f4; }
.cws-chips .chip-f:nth-child(2) { background: #e8f0fe; }
.cws-chips .chip-f:nth-child(3) { background: #fef7e0; }
.cws-chips .chip-f:nth-child(4) { background: #e6f4ea; }
.cws-chips .chip-f:nth-child(5) { background: #fce8e6; }
.cws-chips .chip-f:nth-child(6) { background: #f3e8fd; }
.cws-chips .chip-f:nth-child(7) { background: #e0f7fa; }
.cws-chips .chip-f:nth-child(8) { background: #fff8e1; }
.cws-chips .chip-f.active { background: var(--text); color: #fff; }
.cws-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.cws-col { background: #f8f9fa; border-radius: 16px; padding: 18px 14px; }
.cws-col h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px 8px; }
.cws-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: 12px; text-decoration: none; color: var(--text);
}
.cws-row:hover { background: #fff; }
.cws-ic { flex: none; width: 40px; height: 40px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #fff; }
.cws-ic img { width: 100%; height: 100%; object-fit: cover; }
.cws-ic .icn { width: 22px; height: 22px; color: var(--text-2); }
.cws-m { display: flex; flex-direction: column; min-width: 0; }
.cws-m b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cws-m small { font-size: 12px; color: var(--text-2); }
@media (max-width: 760px) {
  .cws-charts { grid-template-columns: 1fr; }
  .cws-chips .chip-f { min-width: 0; padding: 11px 16px; }
}
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mkt-section { grid-column: 1 / -1; font-size: 17px; font-weight: 800; margin: 28px 0 12px; padding-top: 18px; border-top: 1px solid var(--hairline); display: flex; align-items: baseline; gap: 8px; }
#mkt-grid > .mkt-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mkt-section-count { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--text-3); }
#mkt-grid > .mkt-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 4px; }
/* product IMAGE-area pastel cycle (Willis palette 2026-08-30) */
.mkt-grid .mkt-card .mkt-img { background: #fff; }
.mkt-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s;
}
.mkt-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.mkt-card.soon { opacity: 0.85; }
.mkt-img { display: grid; place-items: center; background: #fff; aspect-ratio: 1; overflow: hidden; position: relative; }
.mkt-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.mkt-new-flag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--live); color: #fff; font-weight: 800; font-size: 10px;
  letter-spacing: 0.04em; padding: 4px 8px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.mkt-ph { width: 64px; height: 64px; color: var(--text-3); }
.mkt-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.mkt-body h3 { font-size: 15px; line-height: 1.3; }
.mkt-body h3 a { color: inherit; }
.mkt-tag { font-size: 12.5px; color: var(--text-2); line-height: 1.45; flex: 1; }
.mkt-price { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mkt-price small { display: block; font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--text-3); letter-spacing: 0.04em; }
.mkt-rating { margin-top: 4px; }
.mkt-ratechip { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #3d3d3d 0%, #303030 100%); border-radius: 10px; padding: 6px 9px; font-size: 11.5px; color: #eee; line-height: 1.3; box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.25); }
.mkt-ratechip .pd-rc-stars { gap: 2px; }
.mkt-ratechip .pd-star { width: 15px; height: 15px; }
.mkt-ratechip .pd-star-base, .mkt-ratechip .pd-star-fill { font-size: 14px; }
.mkt-ratechip .pd-star-fill span { width: 15px; min-width: 15px; }
.mkt-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.mkt-badges span {
  font-size: 10.5px; font-weight: 600; color: var(--accent-deep);
  background: rgba(255, 106, 0, 0.12); border-radius: 5px; padding: 3px 8px;
}
.mkt-seller { font-size: 11px; color: var(--text-3); border-top: 1px solid var(--hairline); padding-top: 8px; }
.mkt-seller .icn { width: 12px; height: 12px; }
.mkt-seller b { color: var(--live); }
.mkt-ctas { display: flex; gap: 7px; }
.mkt-btn {
  flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; font-size: 13px; font-weight: 700; color: #0F1111;
  border-radius: 999px; padding: 0 14px; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.mkt-btn.buy { background: #FFD814; border-color: #FCD200; box-shadow: 0 2px 5px rgba(15,17,17,.15); }
.mkt-btn.buy:hover { background: #F7CA00; border-color: #F2C200; }
.mkt-btn.buy:active { background: #F0B800; transform: translateY(1px); }
.mkt-btn.demo { background: #FFA41C; border-color: #FF8F00; box-shadow: 0 2px 5px rgba(15,17,17,.15); }
.mkt-btn.demo:hover { background: #FA8900; border-color: #E47911; }
.mkt-btn.demo:active { background: #E97800; transform: translateY(1px); }
.mkt-btn.quiet { background: #fff; border-color: #D5D9D9; box-shadow: 0 2px 5px rgba(15,17,17,.08); }
.mkt-btn.quiet:hover { background: #F7FAFA; }
.mkt-btn:focus-visible { outline: 3px solid rgba(0,113,133,.35); outline-offset: 2px; }
.mkt-note { margin-top: 30px; text-align: center; font-size: 11px; color: var(--text-3); }
.mkt-note a { color: var(--accent-deep); text-decoration: underline; }
.mkt-empty { grid-column: 1/-1; text-align: center; color: var(--text-2); padding: 40px; }

/* ══════════ product detail (Alibaba 3-column) ══════════ */
.pd-wrap { padding-block: 16px 60px; }
.pd-crumbs { font-size: 10.5px; color: var(--text-3); letter-spacing: 0.08em; margin-bottom: 14px; }
.pd-crumbs a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(173,78,0,.45); }
.pd-grid { display: grid; grid-template-columns: minmax(380px, 1.1fr) minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.pd-gallery { position: sticky; top: 70px; }
/* Amazon-style gallery: thumbnail rail on the left, one standard square stage on the right */
.pd-gallery:has(.pd-thumbs) { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
.pd-gallery:has(.pd-thumbs) .pd-thumbs { order: -1; flex-direction: column; margin-top: 0; }
.pd-gallery:has(.pd-thumbs) #pdp-main { grid-column: 2; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.pd-thumb { width: 52px; height: 52px; padding: 0; border-radius: 10px; border: 1px solid var(--hairline); background: #fff; overflow: hidden; cursor: pointer; opacity: .65; transition: opacity .15s ease, border-color .15s ease; position: relative; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { opacity: .9; }
.pd-thumb.on { opacity: 1; border-color: #00005F; }
.pd-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; background: rgba(0,0,0,.28); pointer-events: none; }
.pd-stage video#pdp-main { border-radius: calc(var(--r-card) - 6px); }
video#pdp-main { width: 100%; border-radius: var(--r-card); background: #000; display: block; }
.pd-info h1 { font-size: 21px; line-height: 1.35; }
.pd-sub { margin-top: 8px; font-size: 11px; color: var(--accent-deep); letter-spacing: 0.06em; }
.pd-pricebar {
  display: flex; gap: 12px; margin: 16px 0 22px;
  background: var(--shell); border-radius: var(--r-thumb); padding: 14px 18px;
}
.pd-tier b { font-size: 24px; font-variant-numeric: tabular-nums; display: block; }
.pd-tier span { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.pd-tier.alt b { color: var(--accent-deep); }
.pd-h { font-size: 15px; margin: 20px 0 10px; }
.pd-attrs { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-attrs td { border: 1px solid #ddd; padding: 14px 16px; line-height: 1.45; text-align: center; vertical-align: middle; }
.pd-attrs td:nth-child(odd) { background: #f7f7f7; color: #555; width: 15%; white-space: nowrap; }
.pd-list { margin: 0; padding-left: 20px; font-size: 14px; color: var(--text-body); }
.pd-list li { margin-bottom: 8px; }
.pd-supplier { margin-top: 22px; background: var(--shell); border-radius: var(--r-thumb); padding: 16px 18px; font-size: 13.5px; color: var(--text-body); }
.pd-sup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pd-supplier a { color: var(--accent-deep); font-weight: 600; }
.pd-buybox {
  position: sticky; top: 70px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--sh-panel); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.pd-bb-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.pd-bb-row b { color: var(--text); }
.pd-bb-row.total { border-top: 1px solid var(--hairline); padding-top: 10px; font-size: 15px; }
.pd-bb-row.total b { font-size: 21px; font-variant-numeric: tabular-nums; }
.pd-buybox .btn { text-align: center; }
.pd-protect { border-top: 1px solid var(--hairline); padding-top: 12px; font-size: 12px; color: var(--text-2); }
.pd-protect b { color: var(--text); font-size: 12.5px; }

@media (max-width: 980px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-gallery, .pd-buybox { position: static; }
  .pd-gallery:has(.pd-thumbs) { display: block; }
  .pd-gallery:has(.pd-thumbs) .pd-thumbs { flex-direction: row; margin-top: 10px; }
}

/* ══════════ Alibaba-style portal homepage ══════════ */
.ali-search { background: var(--shell); border-bottom: 1px solid var(--hairline); padding: 16px 0; }
.ali-search-in { display: flex; align-items: center; gap: 16px; }
.ali-form { flex: 1; display: flex; background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-pill); overflow: hidden; }
.ali-form input { flex: 1; font: inherit; font-size: 15px; border: none; padding: 12px 22px; background: none; color: var(--text); }
.ali-form input:focus { outline: none; }
.ali-form button { font: inherit; font-size: 14px; font-weight: 700; border: none; cursor: pointer; background: var(--cta); color: var(--text); padding: 0 28px; }
.ali-note { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.portal { display: grid; grid-template-columns: 200px 1fr 230px; gap: 16px; padding-block: 18px 34px; align-items: stretch; }
.cat-menu { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 10px 0; display: flex; flex-direction: column; }
.cat-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  background: #FF6B03; color: #fff;
  margin: -10px 0 6px; padding: 11px 16px;
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}
.cat-title { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.cat-ico {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; font-size: 13px;
  border: 1.6px solid rgba(255,255,255,.9); border-radius: 6px;
  background: rgba(255,255,255,.16);
}
.cat-menu a { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-body); }
.cat-menu a:hover { background: var(--hover); color: var(--text); }
.cat-menu a span { color: var(--faint); }
.cat-menu .cat-all { margin-top: auto; color: var(--accent-deep); font-size: 12.5px; border-top: 1px solid var(--hairline); }
.promo-hero {
  position: relative; overflow: hidden;
  background: #24106B url("img/hero-waves.webp") center / cover no-repeat;
  background-image:
    repeating-linear-gradient(26.57deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-26.57deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px);
  border-radius: var(--r-hero);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; align-items: center;
  padding: clamp(20px, 3vw, 38px);
}
.promo-copy h1 { font-size: clamp(24px, 2.6vw, 38px); }
.promo-copy .hero-sub { margin: 12px 0 18px; font-size: 15px; }
.promo-art { position: relative; display: grid; place-items: center; }
.promo-art img { width: min(230px, 100%); height: auto; border-radius: 12px; transform: rotate(2deg); box-shadow: var(--sh-panel), 12px 16px 34px rgba(27, 33, 41, 0.18); }
.promo-art .swbox-sticker { top: -8px; left: 4px; }
.side-cards { display: flex; flex-direction: column; gap: 12px; }
.side-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.side-card b { font-size: 13.5px; }
.side-card p { font-size: 12px; color: var(--text-2); flex: 1; line-height: 1.45; }
.side-card.sell { background: rgba(255, 106, 0, 0.08); border-color: rgba(255, 106, 0, 0.3); }
.btn.sm { font-size: 12.5px; padding: 8px 14px; text-align: center; }
@media (max-width: 1000px) {
  .portal { grid-template-columns: 1fr; }
  .cat-menu { flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .cat-menu a { padding: 8px 12px; }
  .cat-menu .cat-all { border-top: none; margin: 0; }
  .cat-title { display: none; }
  .promo-hero { grid-template-columns: 1fr; }
}

/* deliberate gold-marker highlight in the portal banner */

/* purple promo hero — white copy */
.promo-hero .promo-copy h1 { color: #fff; }
.promo-hero .promo-copy h1 mark { background: none; color: #FFD54A; }
.promo-hero .hero-sub { color: rgba(255, 255, 255, 0.88); }
.promo-hero .hero-note { color: rgba(255, 255, 255, 0.78); }
.promo-hero .hero-note a { color: #fff; text-decoration: underline; }
.promo-hero .kicker { background: #FF6B00; color: #fff; }
.promo-hero .kicker::before { background: #fff; }
.promo-copy mark { background: var(--looky-gold); color: var(--text); padding: 0 8px; border-radius: 7px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- the model explainer (Alibaba comparison) ---------- */
.model-table-wrap { margin-top: 34px; overflow-x: auto; }
.model-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--sh-panel); border: 1px solid var(--hairline); font-size: 14px; }
.model-table th { text-align: left; padding: 14px 18px; background: var(--text); color: #fff; font-size: 14.5px; }
.model-table th:first-child { width: 14%; }
.model-table td { padding: 12px 18px; border-top: 1px solid var(--hairline); color: var(--text-body); }
.model-table td:first-child { font-family: var(--mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.model-table td b { color: var(--accent-deep); }
.model-table tr:nth-child(even) td { background: var(--hover); }
.model-vs td { background: rgba(255, 106, 0, 0.1) !important; color: var(--text); font-weight: 600; }
.model-line { margin-top: 26px; font-size: 16.5px; color: var(--text-body); max-width: 640px; }
.model-line b { color: var(--text); }

/* coming-soon progress (public roadmap + Willis's worklist) */
.mkt-prog { display: flex; align-items: center; gap: 8px; }
.mkt-prog-bar { flex: 1; height: 7px; background: var(--track); border-radius: 99px; overflow: hidden; }
.mkt-prog-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffb27d); border-radius: 99px; }
.mkt-prog em { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--text-3); white-space: nowrap; }

/* 3-step marketplace onboarding strip */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.s3 { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 14px 18px; }
.s3 b { font-size: 14.5px; color: var(--accent-deep); }
.s3 p { margin-top: 4px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } }

/* profession selector */
.prof-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.prof-lbl { font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-3); }
#prof-sel {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-pill);
  padding: 9px 16px; max-width: 340px;
}
.prof-head { font-weight: 700; font-size: 14px; color: var(--accent-deep); }

/* ── LookyRadio footer player ── */
/* Apple-dock-style vertical rail, floating on the right edge (Willis 2026-09-12, reference:
   apple_style_right_sidebar_dock.html — glass tiles, left-pointing tooltips, macOS proximity magnification via
   music.js, active accent bar, collapse toggle). Desktop only; @media(max-width:700px) further down rebuilds this
   as a horizontal mini-player for phones and wins there via !important, unaffected by anything here. */
.lradio {
  --dock-button: #354155; --dock-button-hover: #435269; --dock-active: #ffae72; --dock-active-line: #ff9f63;
  position: fixed; right: 18px; top: 50%; bottom: auto; left: auto; transform: translateY(-50%); z-index: 60;
  width: 78px; max-height: calc(100vh - 30px);
  padding: 14px 10px; border-radius: 26px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(20,30,46,.98), rgba(13,22,35,.98));
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: #eef4ff; overflow: visible; transition: width .28s ease;
}
.lradio.collapsed { width: 58px; }
.lradio.collapsed .dock-item { width: 42px; height: 42px; }
.dock-scroll { max-height: calc(100vh - 58px); overflow-y: auto; overflow-x: visible; scrollbar-width: none; padding: 3px 0; }
.dock-scroll::-webkit-scrollbar { display: none; }
.dock-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dock-divider { flex: none; width: 40px; height: 1px; margin: 8px auto; background: linear-gradient(90deg, transparent, #58667a 15% 85%, transparent); opacity: .55; }
.dock-item {
  position: relative; flex: none; width: 50px; height: 50px; border: none; padding: 0; border-radius: 16px;
  background: transparent; color: #eef4ff; font-size: 16px;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .09s linear, filter .16s ease, background .18s ease;
  outline: none; z-index: 1; isolation: isolate; text-decoration: none;
}
.dock-item.rounded { background: var(--dock-button); }
.dock-item:hover, .dock-item:focus-visible { background: var(--dock-button-hover); z-index: 20; }
.dock-item.active { background: var(--dock-active); color: #102030; }
.dock-item.active::after {
  content: ""; position: absolute; right: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 999px;
  background: var(--dock-active-line); box-shadow: 0 0 16px rgba(255,159,99,.55);
}
.dock-icon { width: 24px; height: 24px; display: block; pointer-events: none; }
/* tooltip to the LEFT (the dock is on the right) — only for tiles that opt in with data-label; the volume
   tile's own popover slider (below) is its "tooltip" so it deliberately has no data-label */
.dock-item[data-label]::before {
  content: attr(data-label); position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(6px); white-space: nowrap; pointer-events: none; opacity: 0;
  color: #f7fbff; background: #0b111b; border: 1px solid #344055; padding: 6px 10px; border-radius: 9px;
  box-shadow: 0 10px 25px rgba(0,0,0,.32); font: 650 12.5px Inter, system-ui, sans-serif; transition: .15s ease;
}
.dock-item[data-label]:hover::before, .dock-item[data-label]:focus-visible::before { opacity: 1; transform: translateY(-50%) translateX(0); }
.lr-brand { background: linear-gradient(135deg, #FF7801, #E6007A 60%, #5B3E96); }
.lr-title { display: none; }
.lrd-vol-wrap { position: relative; }
.lrd-vol-pop { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); display: none; align-items: center; background: #0d1623; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.lrd-vol-wrap:hover .lrd-vol-pop, .lrd-vol-wrap:focus-within .lrd-vol-pop { display: flex; }
.lrd-top[hidden] { display: none !important; }
body { padding-bottom: 0; } /* the dock floats over content on desktop; the phone block below sets its own value */
/* the phone mini-player grid (below) only has 6 named areas — these dock-only additions have no slot there, so they're desktop-only */
@media (max-width: 1000px) { .lr-note, .dock-divider, #lrd-collapse, #lrd-chat, #lrd-help, .lrd-top { display: none !important; } }

/* homepage business finder in the markets menu */
.cat-find { padding: 12px 16px; border-top: 1px solid var(--hairline); }
.cat-find .prof-lbl { display: block; margin-bottom: 6px; }
#home-prof {
  width: 100%; font: inherit; font-size: 13px; color: var(--text);
  background: var(--shell); border: 1.5px solid var(--text); border-radius: 9px;
  padding: 8px 12px;
}
#home-prof:focus { outline: none; border-color: var(--accent); }

/* ── Alibaba-style utility strip ── */
.topstrip { background: #FF6B00; color: rgba(255,255,255,0.92); font-size: 12px; }
.topstrip-in { display: flex; align-items: center; gap: 18px; padding-block: 6px; }
.topstrip a { color: #fff; font-weight: 700; }
.topstrip a:hover { color: #fff; }
.ts-note { color: #7f8792; font-size: 11px; }
.ts-right { margin-left: auto; display: flex; gap: 16px; }
.ts-sell { color: #111 !important; font-weight: 700; }
@media (max-width: 760px) { .ts-note { display: none; } }

/* tabs above homepage search */
.ali-tabs { display: flex; gap: 26px; justify-content: center; padding-top: 10px; }
.ali-tabs .at { font-weight: 700; font-size: 15px; color: var(--text-2); padding-bottom: 4px; }
.ali-tabs .at.active { color: var(--cta-deep); border-bottom: 3px solid var(--cta); }
.ali-tabs .at:hover { color: var(--text); }

/* LookyRadio volume */
#lr-vol {
  width: 90px; accent-color: var(--cta); -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); outline: none; cursor: pointer;
}
#lr-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
#lr-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--cta); margin-top: -4.5px; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
#lr-vol::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
#lr-vol::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--cta); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
@media (max-width: 700px) { #lr-vol { width: 60px; } }

/* ── AI Mode (local LLM chat) ── */
.ali-tabs .aim {
  background: #cfe0ff; color: #1b2f66; border-radius: 8px;
  padding: 3px 12px 5px; border-bottom: none !important; position: relative;
}
.ali-tabs .aim:hover { background: #bcd3ff; color: #10214d; }
.aim-spark { font-size: 11px; color: var(--cta); position: relative; top: -6px; }
.aim-panel {
  position: fixed; right: 18px; bottom: 66px; z-index: 70;
  width: min(400px, calc(100vw - 30px)); max-height: 60vh;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.aim-head {
  background: #1b2129; color: #fff; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px;
}
.aim-sub { font-size: 8.5px; color: var(--looky-gold); letter-spacing: 0.08em; }
.aim-x { margin-left: auto; background: none; border: none; color: #fff; font-size: 14px; cursor: pointer; }
.aim-msgs { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.aim-m { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.aim-m.bot { background: var(--shell); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.aim-m.user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.aim-m.wait { color: var(--text-3); font-style: italic; }
.aim-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--hairline); }
#aim-q { flex: 1; font: inherit; font-size: 13.5px; border: 1.5px solid var(--hairline); border-radius: var(--r-pill); padding: 9px 14px; background: var(--hover); }
#aim-q:focus { outline: none; border-color: var(--accent); }
.aim-send { font: inherit; font-weight: 700; font-size: 13px; border: none; cursor: pointer; background: var(--cta); color: var(--text); border-radius: var(--r-pill); padding: 0 18px; }

/* ── Alibaba-style additions ── */
.ribbon {
  background: linear-gradient(100deg, var(--cta) 0%, #ffb84d 70%, #ffd28a 100%);
  color: var(--text); display: flex; align-items: center; gap: 14px;
  padding: 7px 18px; font-size: 13px; font-weight: 600;
}
.ribbon-tag { background: #fff; border-radius: var(--r-pill); padding: 2px 12px; font-size: 11.5px; font-weight: 800; }
.ribbon-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ribbon-cta { font-weight: 800; text-decoration: underline; white-space: nowrap; }
.ribbon-x { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text); }

.welcome-strip { border-bottom: 1px solid var(--hairline); background: var(--surface); }
.welcome-in { display: flex; align-items: center; padding-block: 12px; }
.welcome-in b { font-size: 17px; letter-spacing: 0.3px; }
.w-links { margin-left: auto; display: flex; gap: 22px; font-size: 13.5px; font-weight: 600; }
.w-links a:hover { color: var(--cta-deep); }

.twins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.twin { border-radius: var(--r-card); padding: 20px 24px; color: #fff; }
.twin h3 { font-size: 18px; }
.twin p { margin: 8px 0 14px; font-size: 13px; opacity: 0.95; }
.twin-a { background: linear-gradient(115deg, #1b2129, #32405c); }
.twin-b { background: linear-gradient(115deg, #cc4a00, #ff6a00); }
@media (max-width: 800px) { .twins { grid-template-columns: 1fr; } }

.aim-panel[hidden] { display: none; }

/* generic product page extras */
.pdp { padding-block: 16px 60px; }
#pdp-root { min-height: 120vh; }   /* reserve the product area before the catalog script fills it — stops the footer jumping */
.pdp-ph { display: grid; place-items: center; aspect-ratio: 3/4; background: #fff; border-radius: calc(var(--r-card) - 6px); }
.pdp-ph .mkt-ph { width: 90px; height: 90px; }
/* Standard gallery frame (Amazon-style): every product gets the same square stage; tall or wide box art is scaled to fit inside it. */
/* outer grey stage frame, white inner panel (Amazon gallery study, 2026-09-04) */
.pd-stage { background: #D5D9D9; border-radius: var(--r-card); padding: 6px; }
#pdp-main { width: 100%; aspect-ratio: 3 / 4; height: auto; max-height: 640px; object-fit: contain; border-radius: var(--r-card); background: #fff; border: 0; padding: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06); box-sizing: border-box; }
.pd-desc { margin-top: 14px; font-size: 15px; color: var(--text-body); }
.pd-bb-rating { font-size: 12.5px; color: var(--text-2); padding: 8px 0 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 10px; line-height: 1.45; }
.pd-bb-rating .stars { color: #FFA41C; font-size: 19px; letter-spacing: 2px; margin-right: 5px; -webkit-text-stroke: 0.6px #7A4A00; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
/* Free-demo embed = a FIXED 1400×700 screen (Willis 2026-09-08, VistaCreate-style): the app lays out at exactly 1400×700 inside the
   iframe and the whole thing is scaled to fit the visitor's window, so the picture never moves or scrolls — only the app's own
   menus slide inside it. Scale is set by product-page.js (--s = stage width / 1400). Phones fall back to a plain responsive frame. */
/* Was full-bleed (width:100vw, break out of the column) — Willis 2026-09-12: "iframe demo are not obeying the
   margin master drag splitter perimeters." Now just a normal block inside .pdp.wrap (already on --max-grid),
   so the demo's dark theater band narrows/widens with everything else instead of always spanning the viewport. */
.pdp-demo-frame { background: #0B0B12; padding: 10px 0 14px; }
.pdp-stage { position: relative; width: min(100%, calc((100vh - 150px) * 2)); aspect-ratio: 2 / 1; margin: 0 auto; overflow: hidden; background: #000; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.pdp-stage iframe { position: absolute; left: 0; top: 0; width: 1400px; height: 700px; border: 0; display: block; transform: scale(var(--s, 1)); transform-origin: 0 0; }
@media (max-width: 700px) { .pdp-stage { width: 100vw; aspect-ratio: auto; height: 70vh; } .pdp-stage iframe { width: 100%; height: 100%; transform: none; } }
.pdp-demo-note { font-size: 12.5px; color: var(--text-2); margin: 8px 0 14px; }
.pdp-learn { background: #F6F7FA; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 22px 26px; }
.pdp-learn h2 { margin-top: 0 !important; }
.pdp-learn p { max-width: 68ch; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.pdp-learn p b { color: var(--text); }
.pdp-samples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 16px; }
.pdp-sample { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.pdp-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-samples-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); max-width: 62ch; }



/* product description — real screenshots (Alibaba long-form) */
.pd-shots { max-width: 900px; margin: 50px auto 0; padding: 0 var(--pad-x); }
.pd-shots figure { margin: 26px 0; }
.pd-shots img { width: 100%; border-radius: var(--r-card); border: 1px solid var(--hairline); box-shadow: var(--sh-panel); }
.pd-shots figcaption { margin-top: 10px; font-size: 14px; color: var(--text-body); }
.pd-shots figcaption b { color: var(--text); }

/* ── mega footer (Alibaba anatomy) ── */
footer.mega { border-top: 1px solid var(--hairline); background: var(--surface); padding: 40px 0 24px; }
.mf-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.mf-col { display: flex; flex-direction: column; gap: 9px; }
.mf-col b { font-size: 14.5px; margin-bottom: 4px; }
.mf-col a { font-size: 13px; color: var(--text-2); }
.mf-col a:hover { color: var(--accent-deep); }
.mf-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.pay-badge { height: 26px; width: auto; border-radius: 6px; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mf-stripe { margin-left: auto; font-size: 10px; color: var(--text-3); letter-spacing: 0.06em; }
.mf-legal { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; font-size: 12px; color: var(--text-3); }
.mf-legal .mf-links { margin-left: auto; }
.mf-legal a { text-decoration: underline; }
@media (max-width: 900px) { .mf-cols { grid-template-columns: repeat(2, 1fr); } .mf-stripe { margin-left: 0; } }

/* topstrip: tight single line, Alibaba-style (fix two-line wrap mess) */
.topstrip { letter-spacing: 0.2px; word-spacing: normal; }
.topstrip-in { flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; }
.topstrip-in::-webkit-scrollbar { display: none; }
.topstrip a, .topstrip span { white-space: nowrap; flex: none; }
.topstrip a { font-size: 12.5px; }

/* ---- price anchor on cards (AppSumo-style "vs subscription" strike) ---- */
.mkt-vs { font-size: 11.5px; color: #7a828d; margin: 2px 0 4px; letter-spacing: 0.4px; }
.mkt-vs s { color: #9aa2ad; text-decoration-color: #d0544f; text-decoration-thickness: 1.5px; }

/* ---- founding scarcity counter ---- */
.found-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.found-count { font-size: 13px; color: #5b6470; }
.found-count b { color: #1b2129; }

/* ---- launch-alerts band ---- */
#alerts .alerts-band {
  background: #1b2129; color: #fff; border-radius: 18px;
  padding: 34px 38px; display: flex; align-items: center;
  justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
/* Willis 2026-09-12 "why didnt codex fix this organized nicely": .alerts-band used to have THREE flex
   children (photo, heading+paragraph, form) with justify-content:space-between — at the card's default
   width that trio didn't fit on one line, so it wrapped with the photo+heading on row 1 and the form
   stranded alone on row 2, left-aligned under the photo instead of paired with anything. Grouping the
   photo with its heading as one .al-info unit gives the row exactly two children (message vs. action),
   which wraps cleanly as two balanced halves instead of an awkward three-way split. */
.al-info { display: flex; align-items: center; gap: 20px; }
#alerts h2 { color: #fff; margin: 0 0 8px; font-size: 26px; }
#alerts p { color: #b8bfc9; margin: 0; max-width: 480px; font-size: 14.5px; }
#alerts form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#alerts input[type="email"] {
  min-width: 260px; padding: 13px 16px; border-radius: 999px;
  border: 1px solid #3a424d; background: #fff; color: #1b2129; font-size: 14px;
}
#alerts #sub-msg { font-style: normal; font-size: 13px; color: #f7f402; min-width: 120px; }
@media (max-width: 700px) {
  #alerts .alerts-band { padding: 26px 20px; }
  #alerts input[type="email"] { min-width: 0; width: 100%; }
  #alerts form { width: 100%; }
}

/* ---- EMR competitor comparison table (Alibaba spec-table style) ---- */
.pd-compare { max-width: 1120px; margin: 40px auto 60px; padding: 0 20px; }
.cmp-wrap { overflow-x: auto; border: 1px solid #e3e1da; border-radius: 14px; background: #fff; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 13.5px; }
.cmp-table th, .cmp-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid #eeece6; vertical-align: top; }
.cmp-table thead th { background: #1b2129; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; position: sticky; top: 0; }
.cmp-table tbody tr:nth-child(even):not(.cmp-us) { background: #faf9f6; }
.cmp-table td:first-child, .cmp-table th:first-child { position: sticky; left: 0; background: inherit; }
.cmp-table thead th:first-child { background: #1b2129; }
.cmp-table tbody td:first-child { background: #fff; font-weight: 600; white-space: nowrap; }
.cmp-table tbody tr:nth-child(even):not(.cmp-us) td:first-child { background: #faf9f6; }
.cmp-us { background: #fffbe6; box-shadow: inset 3px 0 0 #f7f402; }
.cmp-us td { border-bottom: 2px solid #f7f402; }
.cmp-us td:first-child { background: #fffbe6 !important; }
.cmp-table .y { color: #1e7a6a; font-weight: 600; }
.cmp-table .n { color: #a44944; }
.cmp-table .p { color: #8a7a2e; }
.cmp-note { font-size: 12px; color: #7a828d; margin-top: 12px; letter-spacing: 0.4px; }
@media (max-width: 700px) { .pd-compare { padding: 0 12px; } .cmp-table { font-size: 12.5px; } }

/* ---- worldwide adoption grid (EMR product page) ---- */
.pd-world { max-width: 1120px; margin: 10px auto 60px; padding: 0 20px; }
.world-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.world-card { background: #fff; border: 1px solid #e3e1da; border-radius: 14px; padding: 20px; }
.world-card .wc-ico { font-size: 26px; display: block; margin-bottom: 8px; }
.world-card b { display: block; margin-bottom: 6px; font-size: 15px; color: #1b2129; }
.world-card p { font-size: 13.5px; color: #5b6470; margin: 0; line-height: 1.55; }

/* ---- product promo video ---- */
.pd-video { max-width: 900px; margin: 40px auto 10px; padding: 0 20px; }
.pd-video-frame { border-radius: 16px; overflow: hidden; border: 1px solid #e3e1da;
  background: #1b2129; box-shadow: 0 18px 40px rgba(27,33,41,.18); }
.pd-video-frame video { display: block; width: 100%; height: auto; }

/* promo video: compact, centered — don't dominate the page */
.pd-video { max-width: 720px; }
#watch { padding: 26px 0 10px; }
#watch .pd-video-frame { box-shadow: 0 14px 34px rgba(27,33,41,.16); }
@media (max-width: 780px) { .pd-video { max-width: 100%; } }

/* EMR screenshots: compact 3-across gallery instead of giant stacked figures */
.pd-shots { max-width: 1120px; margin: 30px auto 40px; padding: 0 20px; }
.pd-shots figure { margin: 0; }
.pd-shots .shots-grid, .pd-shots { }
.pd-shots figure img { width: 100%; height: auto; border: 1px solid #e3e1da;
  border-radius: 12px; display: block; transition: transform .2s ease, box-shadow .2s ease; }
.pd-shots figure a:hover img { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(27,33,41,.18); }
.pd-shots figcaption { font-size: 12.5px; color: #5b6470; margin-top: 8px; line-height: 1.5; }
@supports (display: grid) {
  .pd-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px; align-items: start; }
  .pd-shots > h2, .pd-shots > p { grid-column: 1 / -1; margin: 0; }
}

/* lock the promo player to 16:9 — no portrait poster jump */
.pd-video-frame { aspect-ratio: 16 / 9; }
.pd-video-frame video { width: 100%; height: 100%; object-fit: cover; }

/* doctor story: phoropter question hook */
.doc-hook { font-size: 26px; font-weight: 700; color: #1b2129; margin-bottom: 14px; }
.doc-close { font-size: 20px; font-weight: 700; color: #1b2129; }
.doc-close b { color: #ff6a00; }

/* ---- research evidence band ---- */
#evidence { background: #1b2129; padding: 56px 0; margin: 40px 0; }
#evidence .sect-k { color: #f7f402; }
#evidence h2 { color: #fff; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 26px; }
.ev-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 22px; }
.ev-card b { font-size: 40px; color: #f7f402; display: block; margin-bottom: 8px; }
.ev-card b i { font-size: 18px; font-style: normal; color: #9aa2ae; }
.ev-card p { color: #c7cdd6; font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.ev-card small { color: #7a828d; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.ev-take { color: #c7cdd6; font-size: 15px; line-height: 1.7; margin-top: 26px; max-width: 860px; }
.ev-take b { color: #fff; }
.ev-motto { margin-top: 22px; font-size: 22px; color: #fff; font-weight: 700; }
.ev-motto b { color: #f7f402; }
.ev-phil { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; }
.ev-phil h3 { color: #fff; font-size: 19px; margin-bottom: 16px; }
.ev-phil-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ev-phil-cols b { color: #f7f402; display: block; margin-bottom: 6px; font-size: 15px; }
.ev-phil-cols p { color: #c7cdd6; font-size: 13.5px; line-height: 1.6; margin: 0; }
.ev-phil-cols em { color: #fff; font-style: normal; font-weight: 700; }
@media (max-width: 700px) { .ev-phil-cols { grid-template-columns: 1fr; } }
.final-tag { color: #5b6470; font-size: 14.5px; max-width: 640px; margin: 10px auto 0; line-height: 1.6; }

/* portrait promo player (TikTok-style embed) */
.pd-video-frame.vertical { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }

/* ---- benefits bento (Apple-style zero-gap grid, looky-glass skin) ---- */
.bento { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "hero hero c1 c2"
    "hero hero c3 c4"
    "s1 s2 s3 s4"
    "dark dark gold gold";
  margin-top: 26px; }
.bcard { background: #fff; border: 1px solid #e3e1da; border-radius: 16px;
  padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.bcard > b { font-size: 15px; margin: 8px 0 4px; letter-spacing: 0.5px; }
.bcard p { font-size: 13px; color: var(--text-2, #5b6470); line-height: 1.5; margin: 0; }
.bcard .ic .icn { width: 22px; height: 22px; color: #ff6a00; }
.bcard:nth-child(2) { grid-area: c1; } .bcard:nth-child(3) { grid-area: c2; }
.bcard:nth-child(4) { grid-area: c3; } .bcard:nth-child(5) { grid-area: c4; }
.b-hero { grid-area: hero; flex-direction: row; align-items: center; gap: 22px;
  background: linear-gradient(145deg, #fdfdfb, #f0eee9); border-top: 3px solid #f7f402; }
.b-art { width: 130px; height: auto; filter: drop-shadow(0 10px 20px rgba(27,33,41,.18)); flex: none; }
.b-title { font-size: 21px; display: block; margin-bottom: 8px; }
.b-sub { font-size: 13.5px !important; }
.b-cta { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 13.5px;
  color: #1e7a6a; text-decoration: none; letter-spacing: 1px; }
.b-cta:hover { text-decoration: underline; }
.b-stat { text-align: center; padding: 16px 12px; }
.b-stat b { font-size: 26px; margin: 0 0 4px; color: #1b2129; }
.b-stat:nth-child(6) b { color: #ff6a00; }
.b-stat p { font-size: 12px; }
.b-stat:first-of-type { grid-area: s1; }
.bcard:nth-child(6) { grid-area: s1; } .bcard:nth-child(7) { grid-area: s2; }
.bcard:nth-child(8) { grid-area: s3; } .bcard:nth-child(9) { grid-area: s4; }
.b-dark { grid-area: dark; flex-direction: row; align-items: center; gap: 18px;
  background: #1b2129; border-color: #1b2129; }
.b-dark b { color: #fff; margin: 0 0 4px; }
.b-dark p { color: #b8bfc9; }
.b-dark .ic .icn { color: #f7f402; width: 26px; height: 26px; }
.b-gold { grid-area: gold; flex-direction: row; align-items: center; gap: 18px;
  background: linear-gradient(135deg, #f7f402, #e8e502); border-color: #d8d500; }
.b-gold b { color: #1b2129; margin: 0 0 4px; }
.b-gold p { color: #3a3a12; }
.b-inf { font-size: 40px; font-weight: 700; color: #1b2129; line-height: 1; flex: none; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr;
    grid-template-areas: "hero hero" "c1 c2" "c3 c4" "s1 s2" "s3 s4" "dark dark" "gold gold"; }
  .b-hero { flex-direction: column; text-align: center; }
}

/* evidence grid: 3 columns so 6 cards fill perfectly (no empty cell) */
@media (min-width: 861px) { .ev-grid { grid-template-columns: repeat(3, 1fr); } }

/* ══════════ phone pass (≤700px) — desktop layout untouched ══════════ */
@media (max-width: 700px) {
  /* iOS Safari zooms the page when a focused field is under 16px — keep
     every text input at 16px on phones */
  .ali-form input, #mkt-q, .fd-form input, #home-prof, #prof-sel, #aim-q,
  input[type="search"], input[type="text"], input[type="email"], input[type="tel"] {
    font-size: 16px;
  }

  /* top utility strip: one swipeable row instead of overflowing the screen */
  .topstrip-in { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; }
  .topstrip-in::-webkit-scrollbar { display: none; }
  .topstrip-in a, .topstrip-in .ts-note { white-space: nowrap; flex: 0 0 auto; }
  .ts-right { margin-left: 0; gap: 14px; flex: 0 0 auto; }

  /* tabs: left-aligned swipeable strip — AI Mode tab stays fully on-screen */
  .ali-tabs {
    justify-content: flex-start; gap: 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ali-tabs::-webkit-scrollbar { display: none; }
  .ali-tabs .at { white-space: nowrap; flex: 0 0 auto; font-size: 14px; }

  /* search row: form gets the full width, the tagline tucks underneath */
  .ali-search-in { flex-wrap: wrap; gap: 8px; }
  .ali-form { flex: 1 1 100%; }
  .ali-form button { padding: 0 18px; }
  .ali-note { flex-basis: 100%; text-align: center; white-space: normal; }
  .mkt-search-in { flex-wrap: wrap; }
  .mkt-count { flex-basis: 100%; text-align: center; }

  /* welcome strip: links wrap onto their own row instead of crushing */
  .welcome-in { flex-wrap: wrap; row-gap: 6px; }
  .w-links { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; gap: 10px 16px; font-size: 12.5px; }
  .w-links a { white-space: nowrap; }

  /* comparison table: keep its shape and swipe sideways, don't crush columns */
  .model-table { min-width: 620px; }
}

/* ── mobile menu (burger only appears where the dock is hidden) ── */
.lb-burger {
  display: none; font-size: 19px; line-height: 1; cursor: pointer;
  background: none; border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: #f5f5f7; border-radius: 8px; padding: 7px 11px;
}
.lb-mnav { display: none; }
@media (max-width: 1000px) {
  .lb-burger { display: inline-flex; align-items: center; margin-left: auto; }
  .lb-mnav.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 65;
    background: #10151c; border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35);
  }
  .lb-mnav a {
    color: #f2f2f5; font-weight: 600; font-size: 15px;
    padding: 14px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .lb-mnav a:active { background: rgba(255, 255, 255, 0.08); }
  .lb-mnav .lb-mnav-sell { color: var(--looky-gold); }
}

/* ══════════ phone pass v2 — product page, chrome height, safe areas ══════════ */

/* iPhone home-indicator safe area (env() is 0 everywhere else) */
.lradio { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
.aim-panel { bottom: calc(66px + env(safe-area-inset-bottom)); }

/* grid children may not shrink below content min-width by default — the
   nowrap specs table was forcing the collapsed product column to 451px */
@media (max-width: 980px) {
  .pd-grid > * { min-width: 0; }
}

@media (max-width: 700px) {
  /* product page: let spec labels wrap, let the two price tiers stack */
  .pd-attrs td:nth-child(odd) { white-space: normal; width: 30%; }
  .pd-pricebar { flex-wrap: wrap; }
  .pd-info h1 { font-size: 19px; }

  /* offer ribbon: one tight line, and a close button you can actually tap */
  .ribbon { padding: 6px 12px; font-size: 12px; gap: 10px; }
  .ribbon-tag { font-size: 10px; padding: 2px 9px; white-space: nowrap; }
  .ribbon-cta { padding-block: 6px; }
  .ribbon-x { font-size: 16px; padding: 8px 10px; margin: -6px -6px -6px 0; }

  /* tighter header chrome — more of the actual page above the fold */
  .nav-in { padding-block: 6px; }
  .ali-search { padding: 10px 0; }
  .ali-tabs { padding-top: 4px; }
  .topstrip-in { gap: 16px; }
  .topstrip-in a { padding-block: 7px; }
}

/* phone: the specs table must obey its container width (tables auto-expand
   to fit cell content otherwise) */
@media (max-width: 700px) {
  .pd-attrs { table-layout: fixed; }
  .pd-attrs td { overflow-wrap: anywhere; }
}

/* ══════════ Lookymart-style 3-column shell (index + products) ══════════ */
/* Below 1100px the shell is normal block flow: left rail renders like the
   old stacked portal, the ads rail hides (its CTAs already exist in the feed). */
.fb-shell { display: block; }
.rail-r { display: none; }

.ad-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.ad-card img { width: 100%; height: auto; border-radius: 10px; background: var(--shell); }
.ad-tag { font-size: 9px; letter-spacing: 0.14em; color: var(--text-3); }
.ad-card b { font-size: 14px; }
.ad-card p { font-size: 12px; color: var(--text-2); line-height: 1.45; flex: 1; }
.ad-note { font-size: 9.5px; color: var(--text-3); letter-spacing: 0.1em; text-align: center; padding: 6px 0 2px; }


/* NEWS & INSIGHTS header (mock style: icon chip + dark caps on white) */
.rail-news > b.ni-head {
  background: #FF6B03; color: #fff;
  margin: -14px -16px 6px; padding: 12px 16px;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; letter-spacing: 0.06em; font-weight: 800;
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}
.rail-news .ni-ico {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; font-size: 13px;
  border: 1.6px solid rgba(255,255,255,.9); border-radius: 6px;
  background: rgba(255,255,255,.16);
}
/* rail news feed — "Subscription watch" */
.rail-news > b {
  display: block; background: #FF6B03; color: #fff;
  margin: -14px -16px 6px; padding: 11px 16px;
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
  font-size: 14px; letter-spacing: 0.01em;
}
/* classic search-result look: blue underlined headline, green source line */
.rail-news .nw { display: block; padding: 14px 0; border-top: 1px solid var(--hairline); text-decoration: none; }
.rail-news .nw span { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: #4F46E5; text-decoration: none; margin-bottom: 4px; }
.rail-news .nw small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: #006621; }
.rail-news .nw:hover span { color: #F97316; }
.rail-news .nw i { display: block; font-style: normal; font-size: 13px; line-height: 1.55; color: var(--text-2); margin-top: 6px; }
.rail-news .btn { margin-top: 8px; }

@media (min-width: 1100px) {
  .fb-shell {
    max-width: 1280px;
    display: grid; grid-template-columns: 284px minmax(0, 650px) 284px;   /* symmetric rails (Willis 2026-09-08) */
    gap: 22px; justify-content: center; align-items: start;
    padding-block: 18px 40px;
  }
  .rail { position: sticky; top: 70px; max-height: calc(100vh - 70px - 62px); overflow-y: auto; scrollbar-width: thin; }
  .rail-r { display: flex; flex-direction: column; gap: 12px; }
  .rail-l .cat-menu { display: flex; flex-direction: column; }

  /* feed sections: full-bleed inner wraps, compact grid forms (the same
     shapes the site already uses at narrow viewports) */
  .feed { min-width: 0; }
  .feed .wrap { max-width: none; padding-inline: 0; }
  .feed section { scroll-margin-top: 76px; }
  .feed .promo-hero { grid-template-columns: 1fr; }
  .feed .hero-grid { grid-template-columns: 1fr; }
  .feed .feat-panel { grid-template-columns: 1fr 1fr; }
  .feed .feat { border-top: 1px solid var(--hairline); }
  .feed .feat:nth-child(-n+2) { border-top: none; }
  .feed .feat:nth-child(odd) { border-left: none; }
  .feed .steps { grid-template-columns: 1fr; }
  .feed .step { border-left: none; border-top: 1px solid var(--hairline); }
  .feed .step:first-child { border-top: none; }
  .feed .steps3 { grid-template-columns: repeat(3, 1fr); }
  .feed .math-grid, .feed .doc-panel, .feed .spotlight,
  .feed .faq-grid, .feed .found-band, .feed .buy-panel { grid-template-columns: 1fr; }
  .feed .spot-img { order: -1; }
  .feed .ben-panel { grid-template-columns: 1fr 1fr; }
  .feed .ben:nth-child(3n + 1) { border-left: 1px solid var(--hairline); }
  .feed .ben:nth-child(odd) { border-left: none; }
  .feed .ben:nth-child(-n + 2) { border-top: none; }
  .feed .cites { border-left: none; border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r-panel) var(--r-panel); }
  .feed .ev-grid { grid-template-columns: 1fr 1fr; }
  .feed .shelf-hero { grid-template-columns: auto 1fr; }
  .feed .shelf-hero .buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .feed .buy-panel h2, .feed .buy-name, .feed .buy-list li { text-align: left; }
  .feed .buy-ctas { justify-content: flex-start; }
  .feed .mkt-grid { grid-template-columns: 1fr 1fr; }
  .feed .pd-video { max-width: 100%; }
}

/* product-page comparison block */
.pd-vs td b { color: var(--red, #c0392b); }
.pd-vs-punch { background: rgba(46,158,140,.08); border: 1px solid rgba(46,158,140,.35); border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-weight: 500; }

/* evidence screenshots in compare block */
.pd-proof { display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
.pd-proof figure { margin:0; border:1px solid var(--hairline); border-radius:10px; overflow:hidden; background:#fff; }
.pd-proof img { width:100%; height:auto; display:block; }
.pd-proof figcaption { font-family:var(--mono); font-size:9.5px; color:var(--text-3); padding:7px 10px; letter-spacing:.05em; }
@media (max-width:700px) { .pd-proof { grid-template-columns:1fr; } }

/* click-to-zoom lightbox */
.zoomable { cursor: zoom-in; }
.lb-zoom { position: fixed; inset: 0; z-index: 999; background: rgba(8,10,14,.93);
  display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.lb-zoom.on { display: flex; }
.lb-zoom img { max-width: 94vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.6); background:#fff; }
.lb-zoom-x { position: absolute; top: 18px; right: 22px; color: #fff; font: 600 13px -apple-system,sans-serif;
  background: rgba(255,255,255,.14); border-radius: 99px; padding: 8px 16px; }

/* ── Find software for your business + demand research (2026-09-02) ── */
#find { padding: 34px 0 6px; }
.find-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.find-legend { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; border-radius: 99px; padding: 3px 9px; white-space: nowrap; line-height: 1.4; }
.st-avail { color: #0b7a47; background: #e6f7ee; }
.st-dev { color: var(--accent-deep); background: #fff1e6; }
.st-req { color: var(--text-2); background: transparent; border: 1px dashed var(--faint); }
.mkt-card .st { align-self: flex-start; margin-bottom: 6px; }
.find-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0 4px; }
#find-q { font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-pill); padding: 8px 16px; min-width: 260px; flex: 1; max-width: 360px; }
#find-root { container-type: inline-size; }
.find-res { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@container (min-width: 760px) { .find-res { grid-template-columns: 1fr 1fr; } }
.find-col { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 16px 18px; min-width: 0; }
.find-col h3 { margin: 0 0 8px; font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em; color: var(--text-2); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.find-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.find-row:first-of-type { border-top: 0; }
.find-row:hover b { color: var(--accent-deep); }
.find-row img, .find-row svg { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex: none; background: #fff; border: 1px solid var(--hairline); }
.find-row .fr-m { flex: 1; min-width: 0; }
.find-row b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-row small { display: block; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-row .fr-p { font-weight: 700; color: var(--accent-deep); white-space: nowrap; font-size: 13px; }
.find-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent-deep); }
.find-none { color: var(--text-2); font-size: 14px; margin: 6px 0; }
#find-demand, .demand-box { grid-column: 1 / -1; }
.demand-box:empty { display: none; }
.demand-box { margin-top: 22px; }
.demand { background: var(--surface); border: 2px dashed var(--faint); border-radius: var(--r-card); padding: 22px 24px; }
.demand.done { border-style: solid; border-color: #0b7a47; }
.demand-k { font-size: 10.5px; letter-spacing: 0.12em; color: var(--text-3); }
.demand h3 { margin: 6px 0 4px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; text-transform: uppercase; }
.demand-lead { margin: 0 0 14px; font-size: 16px; color: var(--text-body); }
.demand-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 4px 12px; margin-bottom: 12px; }
.demand-chk { display: flex; align-items: center; gap: 9px; font-size: 14.5px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.demand-chk:hover { background: var(--hover); }
.demand-chk input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.demand-other { display: none; font: inherit; font-size: 14px; border: 1px solid var(--faint); border-radius: 8px; padding: 9px 12px; width: 100%; margin-bottom: 12px; }
.demand-other.show { display: block; }
.demand-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.demand-foot .mkt-btn { font-weight: 800; letter-spacing: 0.04em; }
.demand-foot input[type="email"] { font: inherit; font-size: 14px; border: 1px solid var(--faint); border-radius: var(--r-pill); padding: 10px 14px; min-width: 260px; }
.demand-count { font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.demand-count b { color: var(--text); font-size: 18px; }
.demand-count .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: lb-pulse 1.6s ease-in-out infinite; }
@keyframes lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.demand-msg { display: block; margin-top: 10px; font-style: normal; font-weight: 600; color: #0b7a47; }
.demand-msg.err { color: #b42318; }
@media (max-width: 850px) { #find-q { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .demand-count .dot { animation: none; } }

/* ── homepage shelf under the 3-step strip + product-page security table (2026-09-02) ── */
.mkt-more { grid-column: 1 / -1; text-align: center; font-weight: 700; color: var(--accent-deep); padding: 6px 0 2px; }
@media (min-width: 1100px) {
  .feed #home-grid { grid-template-columns: repeat(3, 1fr); }
  .feed #home-grid .mkt-ctas { flex-wrap: wrap; }
  .feed #home-grid .mkt-btn { flex: 1 1 100%; }
}
.pd-security { max-width: 1120px; margin: 40px auto 0; padding: 0 20px; }
.pd-sec-lead { font-size: 15px; color: var(--text-body); max-width: 760px; margin: 0 0 10px; }
.pd-sec td:nth-child(3) { background: transparent; color: var(--text-body); width: auto; white-space: normal; line-height: 1.5; }
.pd-sec td.sec-st { background: transparent; width: 1%; white-space: nowrap; vertical-align: top; }
.pd-sec td.sec-st .st { display: flex; margin-bottom: 4px; width: max-content; }
.pd-sec td:first-child { font-weight: 700; color: var(--text); vertical-align: top; }
.pd-sec-note { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 10px; }
@media (max-width: 700px) { .pd-sec td.sec-st { white-space: normal; } .pd-sec td.sec-st .st { display: inline-flex; margin-right: 4px; } }

/* ── Amazon-style shelf: left rail spans the page, shelf + rest use center+right width (2026-09-02) ── */
@media (min-width: 1100px) {
  .fb-shell { grid-template-rows: auto auto; }
  .rail-l { grid-column: 1; grid-row: 1; }
  .feed:not(.feed-wide) { grid-column: 2; grid-row: 1; }
  .rail-r { grid-column: 3; grid-row: 1; }
  .feed-wide { grid-column: 1 / -1; grid-row: 2; min-width: 0; }  /* full width under the hero row (Willis 2026-09-02) */
  .feed-wide #home-grid { grid-template-columns: repeat(5, 1fr); }
  .feed-wide .feat-panel { grid-template-columns: repeat(4, 1fr); }
  .feed-wide .feat { border-top: none; border-left: 1px solid var(--hairline); }
  .feed-wide .feat:first-child { border-left: none; }
}

/* ── compact Amazon-style shelf card (homepage) ── */
#home-grid.mkt-grid { gap: 26px 24px; }
.cc { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cc-img { position: relative; display: block; border: 1px solid #E6E8EC; border-radius: 10px;
  /* same faint isometric grid as the Own It / how-it-works panels, on white (Willis 2026-09-02) */
  background-color: #fff;
  background-image:
    repeating-linear-gradient(26.57deg, rgba(27, 33, 41, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-26.57deg, rgba(27, 33, 41, 0.05) 0 1px, transparent 1px 30px); aspect-ratio: 1; overflow: hidden; }
.cc-img img { position: absolute; left: 50%; bottom: 18px; width: auto; height: auto; max-width: calc(100% - 28px); max-height: calc(100% - 30px); padding: 0; display: block; border-radius: 8px; z-index: 1; transform: translateX(-50%); transform-origin: 50% 100%; transition: transform 0.2s; }
/* ground shadow — same idea as the Vision Wars tree shadow: a flat dark ellipse at the base (rgba 0,0,0,.2) */
.cc-img::before { content: ""; position: absolute; left: 50%; bottom: 9px; width: 64%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.2); filter: blur(1.5px); z-index: 0; transition: transform 0.2s, opacity 0.2s; }
.cc-img:hover::before { transform: translateX(-50%) scaleX(1.06); opacity: 0.85; }
.cc-img:hover img { transform: translateX(-50%) scale(1.03); }
.cc-img .mkt-ph { width: 46%; height: 46%; margin: 27%; color: var(--text-3); }
.cc-plus { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: #FFD814; border: 1px solid #FCD200; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #111; box-shadow: 0 2px 5px rgba(15,17,17,0.18); }
.cc-plus:hover { background: #F7CA00; }
.cc-deal { display: flex; align-items: center; gap: 7px; margin-top: 8px; min-width: 0; }
.cc-pill { background: #DA100F; color: #fff; font-weight: 800; font-size: 10px; letter-spacing: 0.02em; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.cc-dealtxt { color: #DA100F; font-weight: 700; font-size: 12px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin-top: 2px; color: var(--text); }
.cc-price sup { font-size: 13px; font-weight: 700; vertical-align: top; position: relative; top: 3px; }
.cc-price .cc-pricetxt { font-size: 18px; }
.cc-price small { font-size: 12px; font-weight: 400; color: var(--text-2); letter-spacing: 0; margin-left: 2px; }
.cc-title { color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.cc-title:hover { color: var(--accent-deep); }
.cc-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); min-height: 20px; white-space: nowrap; overflow: hidden; }
.cc-meta .st { flex: none; }
.cc-sold { color: #0b7a47; font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-link { color: #3F6DF6; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.cc-link:hover { text-decoration: underline; }
.cc.soon .cc-img img { opacity: 0.92; }

/* compact cards: tighter columns so 3 fit in the center feed, 4 in the wide feed */
.mkt-grid.cc-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 26px 20px; }

/* ── product areas on white, page ground #F7F7F7 (Willis 2026-09-02) ── */
#shelf, .mkt-wrap, #pdp-recs { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; }
#shelf { padding: 22px 22px 26px; }
.mkt-wrap { padding: 22px 22px 40px; }
#pdp-recs { padding: 18px; }
@media (max-width: 1099px) { #shelf, .mkt-wrap { border-radius: 0; border-left: 0; border-right: 0; padding-inline: 16px; } }

/* shelf page: no sponsored rail (Willis 2026-09-02) — the grid takes center + right width */
@media (min-width: 1100px) { .feed.mkt-wrap { grid-column: 1 / -1; } .mkt-wrap .cc-grid { grid-template-columns: repeat(5, 1fr); } }  /* shelf page: no rails at all (Willis 2026-09-02) */

/* ── hero in the shell: 645 × 500, art beside the copy instead of below it (Willis 2026-09-02) ── */
@media (min-width: 1100px) {
  .feed .promo-hero { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 22px; height: 500px; box-sizing: border-box; overflow: hidden; padding: 28px 32px; }
  .feed .promo-copy h1 { font-size: 30px; line-height: 1.12; }
  .feed .promo-copy .hero-sub { font-size: 14px; line-height: 1.5; margin: 10px 0 14px; }
  .feed .promo-hero .hero-cta { gap: 10px; }
  .feed .promo-hero .hero-cta .btn { padding: 11px 16px; font-size: 14px; }
  .feed .promo-hero .hero-note { font-size: 10.5px; line-height: 1.5; margin-top: 12px; }
  .feed .promo-art img { width: 200px; }
  .feed .promo-art .swbox-sticker { top: 6px; left: -14px; }
}

/* bento spacing: breathing room between the hero and the 1-2-3 strip (Willis 2026-09-02) */
.feed .steps3 { margin-top: 22px; }

/* ── feature strip: tri-color bento panels per the v2 color roles (Willis 2026-09-02, "some color") ── */
.feat-panel { background: none !important; border: 0 !important; box-shadow: none; padding: 0; gap: 12px; overflow: visible; }
.feat-panel .feat { border: 0 !important; border-radius: 14px; padding: 22px 22px 24px; color: #fff; min-width: 0; }
.feat-panel .feat:nth-child(1) { background: #FF6B00; }                                        /* orange = buy / one payment */
.feat-panel .feat:nth-child(2) { background: #3F6DF6; }                                        /* blue = runs in your office */
.feat-panel .feat:nth-child(3) { background: linear-gradient(135deg, #6C32FF, #844DFF); }      /* purple = your data */
.feat-panel .feat:nth-child(4) { background: #FF2E91; }                                        /* pink = built by Vision Looky */
.feat-panel .feat .ic { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
.feat-panel .feat .ic .icn { color: #fff; }
.feat-panel .feat .t { color: #fff; font-weight: 800; margin-top: 12px; }
.feat-panel .feat p { color: rgba(255, 255, 255, 0.92); }

/* bento rule: every block in the wide feed keeps 22px of air from the one above it (Willis 2026-09-02) */
.feed-wide > * + * { margin-top: 22px; }
.feed-wide > #shelf { margin-bottom: 0; }
.feed-wide > .twins { margin-bottom: 0; }

/* ── shelf page: Amazon-style facet column (Willis 2026-09-02) ── */
.mkt-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; }
.mkt-main { min-width: 0; }
.mkt-facets { font-size: 14px; color: var(--text); }
.fc-group { padding: 14px 0; border-top: 1px solid var(--hairline); }
.fc-group:first-child { border-top: 0; padding-top: 0; }
.fc-group h4 { margin: 0 0 8px; font-size: 14.5px; font-weight: 800; letter-spacing: 0; }
.fc-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.fc-list .chip-f { background: none; border: 0; border-radius: 6px; padding: 5px 6px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 9px; }
.fc-list .chip-f::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #8a8f98; background: #fff; flex: none; }
.fc-list .chip-f.active { background: none; color: var(--text); font-weight: 700; }
.fc-list .chip-f.active::before { border: 4px solid #2f6fd8; }
.fc-list .chip-f:hover { background: var(--hover); }
.fc-chk { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.fc-chk:hover { background: var(--hover); }
.fc-chk input { width: 16px; height: 16px; margin: 0; accent-color: #2f6fd8; }
.fc-link { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: 14px; color: var(--text); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.fc-link:hover { background: var(--hover); }
.fc-link.active { font-weight: 800; color: #2f6fd8; }
.fc-clear { margin-top: 12px; background: none; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text-2); }
.fc-clear:hover { background: var(--hover); }
@media (min-width: 1100px) { .mkt-wrap .cc-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .mkt-body { grid-template-columns: 1fr; gap: 14px; }
  .mkt-facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 18px; }
  .fc-group { border-top: 0; padding: 8px 0; }
}

/* ── feature panels as full-bleed images, 2×2 (Willis 2026-09-02, "replace this section with images") ── */
@media (min-width: 1100px) { .feed-wide .feat-panel { grid-template-columns: repeat(2, 1fr); } }
.feat-panel .feat.has-img { padding: 0; overflow: hidden; background: #fff; position: relative; }
.feat-panel .feat.has-img .feat-img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.35s ease; }
.feat-panel .feat.has-img:hover .feat-img { transform: scale(1.02); }
.feat-panel .feat.has-img .ic, .feat-panel .feat.has-img .t, .feat-panel .feat.has-img p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feat-panel .feat:not(.has-img) { display: flex; flex-direction: column; justify-content: center; }
/* wide "Built by" art: keep the text panel in frame by cropping from the right, not both sides */
.feat-panel .feat.has-img .feat-img[src*="feat-built-by"] { object-position: 0% 50%; }

/* ── hero slider: purple hero + the four feature images as slides (Willis 2026-09-02) ── */
.hero-slider { position: relative; overflow: hidden; border-radius: var(--r-hero); background: #24106B; }
.hs-track { display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.hs-slide { flex: 0 0 100%; min-width: 0; display: block; position: relative; }
.hs-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-slide .promo-hero { border-radius: 0; }
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.85); color: #111; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; padding: 0 0 3px; opacity: 0; transition: opacity 0.2s, background 0.2s; z-index: 2; }
.hero-slider:hover .hs-arrow, .hs-arrow:focus-visible { opacity: 1; }
.hs-arrow:hover { background: #fff; }
.hs-prev { left: 12px; } .hs-next { right: 12px; }
.hs-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.hs-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: transform 0.2s, background 0.2s; }
.hs-dots button.active { background: #fff; transform: scale(1.35); }
.hs-dots button:hover { background: #fff; }
@media (min-width: 1100px) { .feed .hero-slider { height: 500px; } .feed .hs-slide .promo-hero { height: 100%; } }
@media (max-width: 1099px) { .hs-slide > img { height: auto; aspect-ratio: 4 / 3; } .hs-track { align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .hs-track { transition: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Business Boxes (packs): finder card + product-page "What's in the box" (2026-09-02) ── */
.find-pack { grid-column: 1 / -1; display: grid; gap: 6px; padding: 18px 22px; border-radius: var(--r-card); background: linear-gradient(115deg, #24106B, #3b1fa6); color: #fff; text-decoration: none; position: relative; overflow: hidden; }
.find-pack::after { content: "📦"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: 64px; opacity: 0.25; }
.find-pack .fp-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: #FFD54A; }
.find-pack b { font-size: 20px; letter-spacing: -0.01em; }
.find-pack .fp-list { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.find-pack .fp-cta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.find-pack .fp-go { font-weight: 700; font-size: 14px; }
.find-pack:hover .fp-go { text-decoration: underline; }
.pd-box-list { list-style: none; counter-reset: box; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.pd-box-list li { counter-increment: box; display: grid; grid-template-columns: 28px 150px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); font-size: 14px; }
.pd-box-list li::before { content: counter(box); width: 26px; height: 26px; border-radius: 50%; background: #24106B; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.pd-box-list li b { font-size: 14.5px; }
.pd-box-list li span { color: var(--text-2); }
.pd-box-list li a { color: var(--accent-deep); font-weight: 700; white-space: nowrap; font-size: 13px; }
.pd-box-list li em { color: var(--text-3); font-style: normal; font-size: 12px; white-space: nowrap; }
@media (max-width: 700px) { .pd-box-list li { grid-template-columns: 26px 1fr; } .pd-box-list li span, .pd-box-list li a, .pd-box-list li em { grid-column: 2; } }
.cc-line { color: #3b1fa6; }
.twin-a h3 { font-size: 17px; line-height: 1.3; }

/* ── "The shipping problem" savings section (brief: marketing/LOOKYBOX_SAVINGS_COMPARISON.md) ── */
#shipping { padding-top: 10px; }
.ship-table-wrap { margin-top: 22px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 6px 16px 14px; overflow-x: auto; }
.ship-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.ship-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-3); padding: 12px 10px 8px; border-bottom: 1px solid var(--hairline); }
.ship-table td { padding: 11px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.ship-table tr:last-child td { border-bottom: 0; }
.ship-table .ship-how { color: var(--text-2); font-size: 13px; }
.ship-table a { font-weight: 700; color: var(--accent-deep); }
.ship-table .ship-save { font-weight: 800; color: #0b7a47; white-space: nowrap; }
.ship-more { margin-top: 10px; }
.ship-note { font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-3); margin: 12px 0 0; }
.ship-callout { margin-top: 22px; background: linear-gradient(115deg, #24106B, #3b1fa6); color: #fff; border-radius: var(--r-card); padding: 24px 26px; display: grid; gap: 6px; }
.ship-callout .sc-k { font-size: 10.5px; letter-spacing: 0.12em; color: #FFD54A; }
.ship-callout > b { font-size: 22px; letter-spacing: -0.01em; }
.ship-callout p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.ship-callout p b { color: #fff; }
.ship-callout .btn { justify-self: start; margin-top: 8px; }
.ship-cols { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ship-col { border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; }
.ship-col span { font-size: 26px; }
.ship-col b { font-size: 15px; }
.ship-col p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.ship-col.no { background: #fdecec; } .ship-col.slow { background: #fff4e0; } .ship-col.yes { background: #e6f7ee; }
@media (max-width: 760px) { .ship-cols { grid-template-columns: 1fr; } .ship-callout > b { font-size: 19px; } }

.pd-footline { text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text-2); margin: 36px 0 10px; }

.lradio a.lr-note { color: inherit; text-decoration: none; }
.lradio a.lr-note:hover { color: var(--looky-gold); }

.pd-press, .doc-press { font-size: 13px; color: var(--text-2); margin-top: 8px; }
.pd-press a, .doc-press a { font-weight: 700; color: var(--accent-deep); }

.mf-tm { display: block; font-size: 10px; letter-spacing: 0.08em; color: var(--text-3); margin-top: 6px; }

.pd-trust { font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 6px 0 10px; padding-left: 12px; border-left: 3px solid var(--accent); }
.pd-trust em { font-style: normal; }

/* ── product-page demo frame: full window width, tall (Willis 2026-09-02 "demo frame should be wider") ── */
.pdp-demo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pdp-demo-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pdp-demo-full { font-weight: 700; color: var(--accent-deep); font-size: 13.5px; white-space: nowrap; }
.pdp-zoom { display: flex; align-items: center; gap: 2px; background: var(--shell); border-radius: var(--r-pill); padding: 3px; }
.pdp-zoom-btn, .pdp-zoom-reset {
  width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text);
  font: 800 15px/1 var(--font); cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.pdp-zoom-btn:hover, .pdp-zoom-reset:hover { background: var(--hover); }
.pdp-zoom-reset { font-size: 12px; margin-left: 4px; }
.pdp-zoom-pct { font-family: var(--mono); font-size: 11px; color: var(--text-2); min-width: 34px; text-align: center; }

/* ── product page: never let a column's content push the grid past the viewport ──
   2026-09-03: at ~1000px CSS width the 340/1fr/300 grid left a ~230px centre column and the
   no-wrap "What's in the box" rows shoved the buy box off-screen. Columns may always shrink,
   links may wrap, and between 981–1200px the side columns slim down while box rows stack. */
.pd-grid > * { min-width: 0; }
.pd-box-list li a { white-space: normal; }
@media (max-width: 1200px) {
  .pd-grid { grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr) 250px; gap: 18px; }
  .pd-box-list li { grid-template-columns: 26px 1fr; }
  .pd-box-list li span, .pd-box-list li a, .pd-box-list li em { grid-column: 2; }
}
@media (max-width: 980px) { .pd-grid { grid-template-columns: 1fr; } }   /* phones/tablets: keep the single column (must follow the 1200px rule) */

/* ── product specs tables must fit their column at every width (2026-09-03, Receiptr at ~1000px) ── */
.pd-attrs { table-layout: fixed; }
.pd-attrs td { overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  .pd-attrs td:nth-child(odd) { white-space: normal; width: auto; }
  /* 4-cell attribute rows become two label/value lines so nothing needs a 100px cell */
  .pd-attrs:not(.pd-vs), .pd-attrs:not(.pd-vs) tbody { display: block; width: 100%; }
  .pd-attrs:not(.pd-vs) tr { display: grid; grid-template-columns: 32% 1fr; }
  .pd-attrs:not(.pd-vs) td { border-top: 0; }
  .pd-attrs:not(.pd-vs) tr:first-child td:nth-child(-n+2) { border-top: 1px solid var(--hairline); }
}

/* 2026-09-03 follow-up: the desktop grid's centre column is only ~350px inside the 1240px container, so even at
   1440 the 4-cell rows overlapped. Attribute rows are ALWAYS two label/value lines now (Amazon-style spec table);
   labels may wrap. Comparison tables (.pd-vs) already are two columns and stay as they were. */
.pd-attrs td:nth-child(odd) { white-space: normal; width: auto; }
.pd-attrs:not(.pd-vs), .pd-attrs:not(.pd-vs) tbody { display: block; width: 100%; }
.pd-attrs:not(.pd-vs) tr { display: grid; grid-template-columns: minmax(96px, 32%) 1fr; }
.pd-attrs:not(.pd-vs) td { border-top: 0; min-width: 0; }
.pd-attrs:not(.pd-vs) tr:first-child td:nth-child(-n+2) { border-top: 1px solid var(--hairline); }
/* labels get a 124px floor so words like "Subscription" never break mid-word */
.pd-attrs:not(.pd-vs) tr { grid-template-columns: minmax(124px, 34%) 1fr; }
.pd-attrs:not(.pd-vs) td:nth-child(odd) { overflow-wrap: normal; }


/* ══════════ 2026-09-03 dock rework (Willis: "ok try to fix it") — 5 destinations, dropdowns for Tools/About;
   homepage sections moved out of the dock into a page-local sticky strip (.pg-strip) ══════════ */
.lkdock .dd { position: relative; display: flex; }
.lkdock .dd > a::after { content: "▾"; font-size: 8px; line-height: 1; margin-top: 1px; opacity: .7; }
.lkdock .dd-menu { position: absolute; top: calc(100% + 6px); left: 50%; min-width: 230px;
  transform: translateX(-50%) translateY(-4px); background: #232327; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden;
  transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.lkdock .dd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }   /* hover bridge */
.lkdock .dd:hover .dd-menu, .lkdock .dd:focus-within .dd-menu, .lkdock .dd.open .dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.lkdock .dd-menu a { flex-direction: row; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .02em; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.lkdock .dd-menu a:hover { transform: none; }
.lkdock .dd-menu a .ic .icn { width: 15px; height: 15px; }
.lb-mnav a.sub { padding-left: 28px; opacity: .85; }
/* homepage "on this page" strip */
.pg-strip { position: sticky; top: 64px; z-index: 40; background: rgba(247,247,247,.94); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hairline); transform: translateY(-110%); opacity: 0; transition: transform .2s, opacity .2s; pointer-events: none; }
.pg-strip.on { transform: none; opacity: 1; pointer-events: auto; }
.pg-strip .wrap { display: flex; gap: 4px; align-items: center; overflow-x: auto; padding-block: 6px; scrollbar-width: none; }
.pg-strip .wrap::-webkit-scrollbar { display: none; }
.pg-strip a { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; color: var(--text-2); white-space: nowrap; }
.pg-strip a.cur, .pg-strip a:hover { background: #fff; color: var(--text); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.pg-strip a.buy { margin-left: auto; background: var(--cta); color: #fff; font-weight: 700; }
.pg-strip a.buy:hover { background: var(--cta); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pg-strip, .lkdock .dd-menu { transition: none; } }


/* 2026-09-03: body { overflow-x:hidden } turned <body> into the scroll container, so the "sticky" header never
   actually stuck (it scrolled away on every page) and the new homepage strip could not stick either.
   overflow-x:clip still stops sideways scrolling but keeps sticky positioning alive. */
body { overflow-x: clip; }

/* rails sit under the (now really sticky) header, and under the homepage strip when it is showing */
@media (min-width: 1100px) {
  .rail { top: var(--rail-top, 78px); max-height: calc(100vh - var(--rail-top, 78px) - 40px); }
}

/* 2026-09-03: rails stretch to fill row 1 and only their INNER box sticks — so they stop at the bottom of the hero row
   instead of riding over the full-width sections below (which is what happened once sticky really worked). */
@media (min-width: 1100px) {
  .rail { position: static; align-self: stretch; max-height: none; overflow: visible; }
  .rail-r { display: block; }
  .rail-in { position: sticky; top: var(--rail-top, 78px); max-height: calc(100vh - var(--rail-top, 78px) - 40px); overflow-y: auto; scrollbar-width: thin; }
  .rail-r .rail-in { display: flex; flex-direction: column; gap: 12px; }
}

/* 2026-09-03: the evidence band sits inside the 1280px shell, so as a square-edged full-dark band it read as "cut off"
   and its inner wrap had lost its side padding. It is now a rounded panel with its own padding (22px bento air). */
#evidence { border-radius: 22px; padding: 52px clamp(22px, 4vw, 56px) 56px; margin: 22px 0; }
#evidence .wrap { padding-inline: 0; }
@media (max-width: 700px) { #evidence { border-radius: 16px; padding: 36px 18px 40px; } }

/* ══════════ 2026-09-03 homepage section tints (Willis: "each section a different color, helps the eyes") ══════════
   Every homepage section is a rounded panel with its own light tint and a matching kicker colour, 22px air between.
   Colours follow the v2 roles: blue = find/navigate, orange = buy, purple = promo/video, green = money,
   pink = kids/featured, sky = how it works, sand = the doctor's story, dark = evidence, white = FAQ. */
.feed-wide > section:not(#shelf):not(#evidence):not(#alerts) { border-radius: 22px; padding: 44px clamp(22px, 4vw, 56px) 48px; margin: 22px 0; }
.feed-wide > section:not(#shelf) > .wrap { padding-inline: 0; }
/* tints derived from the real tokens (v2 --blue #3F6DF6, --orange/--cta #ff6b00, --purple #6C32FF, --pink/--heat #ff2e91,
   --live #00b96b, --looky-gold #f7f402); each is the token's hue at ~95% lightness, kickers are the token's deep shade */
#find     { background: #EBF0FE; }  #find .sect-k     { color: #2549C9; }   /* v2 blue 224°  — navigate */
#model    { background: #FFF1E6; }  #model .sect-k    { color: var(--accent-deep); }  /* orange 25° — buy (same tint as the ◐ chips) */
#watch    { background: #F0EBFF; }  #watch .sect-k    { color: #4E1FD0; }   /* v2 purple 258° — promo */
#math     { background: #E6F7EE; }  #math .sect-k     { color: #0b7a47; }   /* live green 155° — money (same tint as ● available) */
#shipping { background: #FFEBF3; }  #shipping .sect-k { color: #C81A6E; }   /* heat pink 332° — kids / featured */
#how      { background: #FFFBD9; }  #how .sect-k      { color: var(--looky-gold-ink); }  /* looky gold 59° — the dock highlight colour */
#doctor   { background: #F8F1E8; }  #doctor .sect-k   { color: var(--accent-deep); }   /* orange at low saturation — warm story */
#faq      { background: #FFFFFF; border: 1px solid var(--hairline); }  #faq .sect-k { color: var(--accent-deep); }
#find { padding-top: 40px; padding-bottom: 36px; }
#watch { padding-bottom: 36px; }
@media (max-width: 700px) { .feed-wide > section:not(#shelf):not(#evidence):not(#alerts) { border-radius: 16px; padding: 30px 18px 34px; } }

/* ══════════ 2026-09-03 footer, Amazon-style (Willis: "#131A22 bg, font white — learn from Amazon") ══════════
   "Back to top" band (#37475A) → dark columns (#131A22) with bold white headings and light links → hairline → payment + legal. */
.mf-top { display: block; width: 100%; background: #37475A; color: #fff; text-align: center; font: 600 13px/1 var(--mono); letter-spacing: .04em; padding: 16px 0; border: 0; cursor: pointer; }
.mf-top:hover { background: #485769; }
footer.mega { background: #131A22; color: #fff; border-top: 0; padding: 0 0 26px; }
footer.mega .mf-cols { padding-top: 44px; padding-bottom: 34px; gap: 28px; }
.mf-col { gap: 11px; }
.mf-col b { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.mf-col a { color: #DDDDDD; font-size: 14px; line-height: 1.35; text-decoration: none; }
.mf-col a:hover { color: #fff; text-decoration: underline; }
.mf-pay { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; margin-top: 0; }
.pay-badge { box-shadow: none; }
.mf-stripe { color: #bbb; }
.mf-legal { color: #999; }
.mf-legal a { color: #ddd; }
.mf-legal a:hover { color: #fff; }

/* 2026-09-03: homepage section strip on Amazon slate (#242F3E), white text; current section = white pill with dark text */
.pg-strip { background: #242F3E; border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pg-strip a { color: #fff; }
.pg-strip a:hover { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.pg-strip a.cur { background: #fff; color: #131A22; }
.pg-strip a.buy { background: var(--cta); color: #fff; }

/* 2026-09-03: search band on the dark warehouse photo (Willis's render), white tabs and note; input stays white */
.ali-search { background: #131A22 url("img/bg-search-warehouse.webp") center 40% / cover no-repeat; border-bottom: 0; padding: 18px 0 22px; }
@media (max-width: 960px) { .ali-search { background-image: url("img/bg-search-warehouse-960.webp"); } }
.ali-tabs .at { color: #E6E9EE; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ali-tabs .at:hover { color: #fff; }
.ali-tabs .at.active { color: #fff; border-bottom-color: var(--cta); }
.ali-tabs .aim { text-shadow: none; }
.ali-form { border-color: rgba(255,255,255,.35); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.ali-note { color: #D5DAE1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ali-tabs .aim { color: #10214d; }                                   /* AI Mode chip keeps dark text on its light blue */
.pg-strip { position: fixed; left: 0; right: 0; }                    /* the hidden strip no longer reserves a 44px band under the header */

/* 2026-09-03: search band rhythm — equal air top/bottom, tabs on one centre line, chip and plain tabs same height */
.ali-search { padding: 26px 0 30px; }
.ali-tabs { align-items: center; gap: 28px; padding: 0; margin-bottom: 16px; }
.ali-tabs .at { display: inline-flex; align-items: center; height: 36px; padding: 0 6px; line-height: 1; border-bottom: 0; }
.ali-tabs .at.active { box-shadow: inset 0 -3px 0 var(--cta); }
.ali-tabs .aim { height: 36px; padding: 0 14px; border-radius: 10px; }
.ali-search-in { gap: 18px; }

/* 2026-09-03: compact search band — tabs share the bar's left edge, less height, a soft top shade so header and band read as two layers */
.ali-search { padding: 16px 0 20px; position: relative; }
.ali-search::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34px; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)); pointer-events: none; }
.ali-search > .wrap { position: relative; }
.ali-tabs { justify-content: flex-start; gap: 22px; margin-bottom: 10px; }
.ali-tabs .at { height: 32px; font-size: 14px; }
.ali-tabs .aim { height: 32px; padding: 0 12px; }
.ali-form input { padding: 11px 20px; }
.ali-tabs { padding-block: 0; padding-inline: 22px; }            /* keep the wrap's side padding so tabs align with the bar */
.ali-tabs .at:first-child { margin-left: -6px; }                  /* text starts exactly at the bar's left edge */

/* ══════════ ALDI PALETTE — adopted 2026-09-03 ("aldi colors won") ══════════
   FFC800 yellow = you-are-here / highlight · FF7801 orange = buy & CTA only · D70000 red = price & deal flags ·
   00005F navy = every dark ground (header, search band, section strip, evidence, footer, rail headers) ·
   5AC5F0 sky = find / navigate accents · FFFFFF = product panels. Section tints = Aldi hues at ~94% lightness. */
:root { --accent: #FF7801; --cta: #FF7801; --accent-deep: #AD4E00; --cta-deep: #AD4E00; --looky-gold: #FFC800; --looky-gold-ink: #3a2e00; --heat: #D70000; }
/* header + dock */
.nav { background: #00005F; border-bottom: 1px solid rgba(255,255,255,.12); }
.lkdock .bar { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.18); }
.lkdock a.here { background: #FFC800; color: #00005F; }
.lkdock .dd-menu { background: #00005F; border-color: rgba(255,255,255,.18); }
.box-shape { background: #FF7801; }
.nav-cta { background: #FF7801; color: #fff; box-shadow: 0 6px 18px rgba(255,120,1,.45); }
/* search band */
.ali-search { background: #00005F; } .ali-search::before { display: none; }
.ali-tabs .aim { background: #5AC5F0; color: #00005F; }
.ali-tabs .at.active { box-shadow: inset 0 -3px 0 #FFC800; }
.ali-form { border-color: #5AC5F0; box-shadow: none; }
.ali-form button { background: #FF7801; color: #fff; }
.ali-note { color: #9ED9F6; text-shadow: none; }
/* homepage section strip */
.pg-strip { background: #00005F; border-bottom-color: rgba(255,255,255,.14); }
.pg-strip a.cur { background: #FFC800; color: #00005F; }
.pg-strip a.buy { background: #FF7801; }
/* rails: white menus with navy headers */
.cat-title, .rail-news > b.ni-head { background: #00005F !important; color: #fff !important; }
.rail-l .cat-menu { background: #FFFFFF !important; border: 1px solid var(--hairline) !important; }
.rail-l .cat-menu summary, .rail-l .cat-menu a, .rail-l .cat-menu label, .rail-l .cat-menu span, .rail-l .cat-menu b, .rail-l .cat-menu details > * { color: #1b2129 !important; text-shadow: none; }
.rail-l .cat-menu a:hover, .rail-l .cat-menu summary:hover { background: #EAF6FD !important; color: #00005F !important; }
.rail-l .cat-menu .cat-all { color: #AD4E00 !important; }
.rail-l .cat-menu input { background: #fff; color: #1b2129; border: 1px solid var(--hairline); }
.rail-news .nw span { color: #00005F; } .rail-news .nw:hover span { color: #FF7801; }
/* product cards: red flags, navy links, orange/yellow buttons */
.cc-pill, .own-pill { background: #D70000 !important; color: #fff !important; } .cc-deal { background: transparent !important; } .cc-dealtxt { color: #D70000; }
.cc-title a, .cc-link, .cc a.cc-more { color: #00005F; }
.btn-red { background: #FF7801; color: #fff; }
.btn-sun { background: #FFC800; color: #00005F; }
/* homepage section tints from the Aldi hues */
#find { background: #E9F6FD; }  #find .sect-k { color: #0A7BB5; }
#model { background: #FFF1E3; }  #model .sect-k { color: #AD4E00; }
#watch { background: #E8E8F4; }  #watch .sect-k { color: #00005F; }
#math { background: #FFF9E0; }  #math .sect-k { color: #6b5400; }
#shipping { background: #FCECEC; }  #shipping .sect-k { color: #A80000; }
#how { background: #E9F6FD; }  #how .sect-k { color: #0A7BB5; }
#doctor { background: #FFF1E3; }  #doctor .sect-k { color: #AD4E00; }
#faq .sect-k { color: #00005F; }
#evidence { background: #00005F; }  #evidence .sect-k, .ev-card b { color: #FFC800; }
.ev-card { background: #000047; border-color: #1a1a7a; }
.math-card.good { background: #FFF9E0; }
.chip-good { background: #FFC800; color: #00005F; }
/* footer */
.mf-top { background: #000047; }
footer.mega { background: #00005F; }
.mf-col a:hover { color: #FFC800; }


/* 2026-09-03: tabs row removed from the search band — even air around the bar */
.ali-search { padding: 24px 0 26px; }

/* 2026-09-03 (Willis): header stays Aldi navy, the search band under it is Aldi red #D70200; yellow Search button for contrast on red */
.ali-search { background: #D70200; border-top: 1px solid rgba(255,255,255,.18); }
.ali-form { border-color: #fff; }
.ali-form button { background: #FFC800; color: #00005F; }
.ali-form button:hover { background: #ffd54a; }
.ali-note { color: #FFE3E0; }


/* ══════════ 2026-09-03 section title bars (Willis: "subheader under every part, blue with white font, like SOFTWARE STORE") ══════════
   Each homepage panel starts with a navy bar carrying its label (from data-bar); the old small kicker is hidden. */
.feed-wide > section[data-bar] { position: relative; }
.feed-wide > section[data-bar]::before {
  content: attr(data-bar); display: block;
  margin: -44px calc(-1 * clamp(22px, 4vw, 56px)) 26px; padding: 13px clamp(22px, 4vw, 56px);
  background: #00005F; color: #fff; border-radius: 22px 22px 0 0;
  font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}
.feed-wide > section[data-bar] .sect-k { display: none; }
#shelf[data-bar]::before { margin: -22px -22px 18px; padding: 13px 22px; border-radius: 14px 14px 0 0; }
#evidence[data-bar]::before { background: #000047; color: #FFC800; }
#faq[data-bar] { padding-top: 44px; }
@media (max-width: 700px) {
  .feed-wide > section[data-bar]::before { margin: -30px -18px 20px; padding: 11px 18px; border-radius: 16px 16px 0 0; font-size: 11.5px; }
  #shelf[data-bar]::before { margin: -22px -22px 16px; }
}

/* ══════════ 2026-09-03 HEADER v3 (Willis's mockup): search in the header row, text-link nav row with yellow underline,
   hero row on navy with a translucent trust strip ══════════ */
.nav-in { gap: 18px; padding-block: 12px; }
.hdr-search { flex: 1 1 auto; display: flex; align-items: center; background: #fff; border-radius: 999px; overflow: hidden; min-width: 0; max-width: 720px; margin-inline: 12px; }
.hdr-search .hs-ico { width: 18px; height: 18px; margin-left: 16px; color: #66668E; flex: none; }
.hdr-search input { flex: 1; min-width: 0; font: inherit; font-size: 14.5px; border: 0; padding: 11px 12px; background: none; color: var(--text); }
.hdr-search input:focus { outline: none; }
.hdr-search button { font: inherit; font-size: 14px; font-weight: 700; border: 0; cursor: pointer; background: #FFC800; color: #00005F; padding: 0 22px; align-self: stretch; }
.hdr-search button:hover { background: #ffd54a; }
.nav-cta { white-space: nowrap; }
.nav-row2 { background: #242F3E; border-top: 1px solid rgba(255,255,255,.12); }
.nav-row2-in { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.nav-row2 .lkdock { flex: 1 1 auto; justify-content: flex-start; }
.nav-row2 .lkdock .bar { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 6px; border-radius: 0; }
.nav-row2 .lkdock a { flex-direction: row; gap: 9px; font-family: var(--font); font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: #E6E9F7; padding: 14px 16px; border-radius: 0; border-bottom: 3px solid transparent; }
.nav-row2 .lkdock a .ic .icn { width: 18px; height: 18px; }
.nav-row2 .lkdock a:hover { background: none; color: #fff; transform: none; border-bottom-color: rgba(255,200,0,.5); }
.nav-row2 .lkdock a.here { background: none; color: #FFC800; border-bottom-color: #FFC800; }
.nav-row2 .lkdock .dd > a::after { margin-top: 0; margin-left: 2px; font-size: 10px; }
.nav-row2 .lkdock .dd-menu { top: calc(100% + 2px); left: 0; transform: translateY(-4px); }
.nav-row2 .lkdock .dd:hover .dd-menu, .nav-row2 .lkdock .dd:focus-within .dd-menu, .nav-row2 .lkdock .dd.open .dd-menu { transform: translateY(0); }
.nav-row2 .lkdock .dd-menu a { border-bottom: 0; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; }
.nav-note { margin-left: auto; color: #C9CCE6; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 1000px) { .nav-row2 { display: none; } .hdr-search { margin-inline: 6px; } .hdr-search button { padding: 0 14px; } .nav-cta { display: none; } }
@media (max-width: 700px) { .hdr-search input { font-size: 13px; padding: 9px 8px; } }
@media (min-width: 1100px) {
  .fb-shell { position: relative; padding-top: 22px; }
  .fb-shell::before { content: ""; grid-column: 1 / -1; grid-row: 1; margin: -22px -100vw -22px; background: #00005F; }
  .fb-shell > .rail, .fb-shell > .feed:not(.feed-wide) { position: relative; }
  .feed-wide { margin-top: 22px; }
}
.trust3 { gap: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; overflow: hidden; }
.trust3 .s3 { display: flex; align-items: center; gap: 14px; background: none; border: 0; border-right: 1px solid rgba(255,255,255,.14); border-radius: 0; padding: 16px 22px; }
.trust3 .s3:last-child { border-right: 0; }
.trust3 .s3-ic { font-size: 26px; line-height: 1; }
.trust3 .s3 b { color: #fff; font-size: 15px; display: block; }
.trust3 .s3 p { margin: 2px 0 0; color: #C9CCE6; font-size: 12.5px; }
@media (max-width: 1099px) { .trust3 { background: var(--surface); border-color: var(--hairline); } .trust3 .s3 b { color: var(--text); } .trust3 .s3 p { color: var(--text-2); } .trust3 .s3 { border-right-color: var(--hairline); } }
/* phones: the three promises sit side by side as compact stacked tiles — icon over label over line (Willis 2026-09-08) */
@media (max-width: 760px) {
  .steps3.trust3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0; }
  .trust3 .s3 { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 8px 12px; border-right: 1px solid #E3E5EC; border-bottom: 0; min-width: 0; }
  .trust3 .s3:last-child { border-right: 0; }
  .trust3 .s3-ic img { width: 38px; height: 38px; }
  .trust3 .s3 > div { padding-top: 0; }
  .trust3 .s3 b { font-size: 12.5px; line-height: 1.2; letter-spacing: -0.01em; }
  .trust3 .s3 p { font-size: 10.5px; line-height: 1.3; margin-top: 3px; }
}
@media (max-width: 360px) { .trust3 .s3 b { font-size: 11.5px; } .trust3 .s3 p { font-size: 10px; } }
/* v3 fixes: the navy pseudo-item must stretch to the row; rails/feed must not carry a relative top offset; tablet hides the left rail (Top categories covers it) */
@media (min-width: 1100px) {
  .fb-shell::before { align-self: stretch; }
  .fb-shell > .rail, .fb-shell > .feed:not(.feed-wide) { position: static; top: auto; }
}
@media (max-width: 1099px) { .rail-l { display: none; } }

/* 2026-09-03 (Willis: "is it necessary to have 3 headers?") — only the top row stays pinned; the nav row scrolls away;
   the homepage section strip tucks under the top row. Max two bars on the homepage, one everywhere else. */
.nav { position: static; }
.nav-in { position: sticky; top: 0; z-index: 50; }
.nav-in::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: #00005F; z-index: -1; box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.nav-in > * { position: relative; }
.lb-mnav { z-index: 49; }
/* → final answer to "3 headers": the whole header scrolls away (Amazon does the same); the homepage strip is the only pinned bar */
.nav-in { position: static; }
.nav-in::before { display: none; }

/* 2026-09-03 (Willis): thin #5F5627 border on every bento panel */
.feed-wide > section, #shelf, .rail-l .cat-menu, .rail-r .side-card, .trust3, #hero-slider, .hs-frame { border: 1px solid #5F5627 !important; }
.feed-wide > section[data-bar]::before { margin-top: -45px; }          /* title bar sits inside the 1px border */
#shelf[data-bar]::before { margin-top: -23px; }
.feed-wide > section[data-bar]::before, #shelf[data-bar]::before { margin-left: calc(-1 * clamp(22px, 4vw, 56px) - 1px); margin-right: calc(-1 * clamp(22px, 4vw, 56px) - 1px); border: 1px solid #5F5627; border-bottom: 0; }
#shelf[data-bar]::before { margin-left: -23px; margin-right: -23px; }
.cat-title, .rail-news > b.ni-head { border-bottom: 1px solid #5F5627; }

/* 2026-09-03 (Willis): buttons carry the same #5F5627 border as the bento panels */
.btn, .nav-cta, .hdr-search button, .hdr-search, .ali-form button, .pg-strip a.buy, .pg-strip a.cur, .mf-top,
.lkdock .bar a.here, .chip-f, .prof-bar button, .fc-link, .cc-more, .js-buy, .aim-panel button, .swbox .btn, .find-pack .btn,
button.btn, a.btn, .btn-red, .btn-sun, .btn-quiet, .lk-btn, .side-card .btn, .rail-news .btn { border: 1px solid #5F5627 !important; }
.hdr-search { overflow: hidden; }               /* the pill keeps its rounded clip with the border on */
.hdr-search button { border-left-width: 1px; border-top: 0 !important; border-bottom: 0 !important; border-right: 0 !important; }
.nav-row2 .lkdock a.here { border: 0 !important; border-bottom: 3px solid #FFC800 !important; }   /* nav underline is not a button */

/* 2026-09-03 (Willis): the inner cards carry the #5F5627 border too — charts columns, FAQ panel + rows, doctor panel,
   how-it-works cards, math cards, shipping cards + table, evidence cards, feature cards, product cards */
.cws-col, .faq-panel, .doc-panel, .step, .math-card, .ship-col, .ship-table-wrap, .ev-card, .feat-panel, .feat, .cc, .swbox, .find-pack, .pd-video-frame, .alerts-band { border: 1px solid #5F5627 !important; }
.faq-panel details + details, .faq-panel details { border-top-color: #5F5627 !important; }
.ship-table td, .ship-table th { border-bottom-color: rgba(95,86,39,.35); }
.doc-panel > * + * { border-color: #5F5627 !important; }
.feed .step { border-top-color: #5F5627 !important; border-left: 1px solid #5F5627 !important; }
/* 2026-09-03 (Willis): chips and the round list icons get the #5F5627 border too */
.chip, .chip-good, .li-ic, .step-ic, .s3-ic, .ni-ico, .cat-ico, .cws-col img, .cws-col .cr-ico, .ev-card b, .st, .find-legend .st { border: 1px solid #5F5627 !important; }
.ev-card b { border: 0 !important; }                      /* the big stat numbers are text, not boxes */
/* 2026-09-03 (Willis): product cards stay borderless — the boxes are the art */
.cc { border: none !important; }

/* 2026-09-03 (Willis): chart column titles become navy title bars like SOFTWARE SHELF */
.cws-col { padding-top: 0 !important; overflow: hidden; }
.cws-col h3 { margin: 0 calc(-1 * 14px) 12px; padding: 12px 14px; background: #00005F; color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid #5F5627; }
.cws-col h3::before { content: "▮ "; color: #FFC800; }

/* 2026-09-03 (Willis): hero row ground is #F6F7FA, not navy; trust strip becomes a white bordered bar with dark text */
@media (min-width: 1100px) { .fb-shell::before { background: #F6F7FA; } }
.trust3 { background: #fff; border-color: #5F5627; }
.trust3 .s3 { border-right-color: #5F5627; }
.trust3 .s3 b { color: var(--text); }
.trust3 .s3 p { color: var(--text-2); }
@media (max-width: 760px) { .trust3 .s3 { border-bottom-color: #5F5627; } }


/* 2026-09-03: Willis's 3D icon set (img/icons3d, 96px WebP with alpha) replaces emoji in title bars, rail headers and the trust strip */
.feed-wide > section[data-bar]::before { background-repeat: no-repeat; background-size: 20px 20px; background-position: clamp(22px, 4vw, 56px) center; padding-left: calc(clamp(22px, 4vw, 56px) + 30px); }
#shelf[data-bar]::before { background-position: 22px center; padding-left: 52px; }
#shelf[data-bar]::before { background-image: url("img/icons3d/folder.webp"); }
#find[data-bar]::before { background-image: url("img/icons3d/globe.webp"); }
#model[data-bar]::before { background-image: url("img/icons3d/bolt.webp"); }
#watch[data-bar]::before { background-image: url("img/icons3d/camera.webp"); }
#math[data-bar]::before { background-image: url("img/icons3d/ball-gold.webp"); }
#shipping[data-bar]::before { background-image: url("img/icons3d/rocket.webp"); }
#evidence[data-bar]::before { background-image: url("img/icons3d/microscope.webp"); }
#how[data-bar]::before { background-image: url("img/icons3d/gear.webp"); }
#doctor[data-bar]::before { background-image: url("img/icons3d/eye.webp"); }
#faq[data-bar]::before { background-image: url("img/icons3d/chat.webp"); }
.cat-ico img, .ni-ico img { width: 20px; height: 20px; display: block; }
.cat-ico, .ni-ico { background: transparent !important; border: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; }
.s3-ic img { width: 34px; height: 34px; display: block; }
.s3-ic { border: 0 !important; }

/* 2026-09-03 (Willis): category emoji replaced with our sprite icons */
.icn.ci { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; fill: none; stroke: currentColor; }
.chip-f .icn.ci { width: 16px; height: 16px; }
.cat-menu summary .icn.ci, .cat-menu a .icn.ci { width: 15px; height: 15px; }
/* shelf facet column: the Department rows are radio-style rows, not pills — no box border there */
.mkt-facets .chip-f, .mkt-facets .fc-list .chip-f { border: 0 !important; }

/* 2026-09-03 (Willis): shelf facet headers (Department, Age Range, Price…) are navy sub-header bars like the rest of the site */
.mkt-facets .fc-group h4 { margin: 0 0 8px; padding: 10px 12px; background: #00005F; color: #fff; border-radius: 8px; border: 1px solid #5F5627; font-family: var(--mono); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mkt-facets .fc-group h4::before { content: "▮ "; color: #FFC800; }
.mkt-facets .fc-group + .fc-group { border-top: 0; margin-top: 14px; padding-top: 0; }

/* 2026-09-03 (Willis): every navy sub-header — letter-spacing 2px, bold */
.feed-wide > section[data-bar]::before, #shelf[data-bar]::before, .cws-col h3, .mkt-facets .fc-group h4, .cat-title, .rail-news > b.ni-head, #evidence[data-bar]::before { letter-spacing: 2px !important; font-weight: 800 !important; }

/* 2026-09-03 bug: on the shelf the header input carries id #mkt-q (so the grid filters live) and inherited the old
   standalone search-bar pill styling — a pill inside the pill. Neutralise it inside the header. */
.hdr-search #mkt-q, .hdr-search input#mkt-q { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 11px 12px !important; font-size: 14.5px !important; height: auto !important; min-width: 0 !important; width: auto !important; }

/* ══════════ 2026-09-03 language bar + detection banner (i18n.js) ══════════ */
.lang-bar { display: flex; gap: 2px; align-items: center; margin-left: auto; margin-right: 14px; }
.lang-bar button { background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; color: #C9CCE6; font: 600 12px/1 var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.lang-bar button:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.lang-bar button.on { background: #FFC800; color: #00005F; border-color: #5F5627; }
.lang-bar .lf { font-size: 14px; }
@media (max-width: 1300px) { .lang-bar .ln { display: none; } .lang-bar button { padding: 4px 6px; } }
.nav-row2 .nav-note { margin-left: 0; }
.lb-mnav .lang-bar { margin: 8px 0 0; flex-wrap: wrap; }
.lb-mnav .lang-bar .ln { display: inline; }
.lang-banner { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 70; background: #00005F; color: #fff; border: 1px solid #5F5627; border-radius: 14px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 14px 34px rgba(0,0,0,.35); font: 600 14px/1.3 var(--font); max-width: calc(100vw - 32px); flex-wrap: wrap; }
.lang-banner .lf { font-size: 22px; }
.lang-banner button { font: inherit; font-weight: 800; border: 1px solid #5F5627; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.lang-banner .yes { background: #FFC800; color: #00005F; }
.lang-banner .keep { background: transparent; color: #C9CCE6; }
/* nav row: dock takes only its own width so the language bar and note sit cleanly to the right */
.nav-row2 .lkdock { flex: 0 0 auto; }
.nav-row2-in { gap: 14px; }
.lang-bar { margin-left: auto; margin-right: 0; }
.nav-row2 .nav-note { margin-left: 14px; }
@media (max-width: 1240px) { .nav-row2 .nav-note { display: none; } }
.lang-bar button { white-space: nowrap; }     /* 日本語 was wrapping under its flag */

/* 2026-09-03 — looky-themes audit: white on Aldi orange #FF7801 is 2.65:1 (fails AA for small text). Navy text on orange = 6.8:1,
   and it matches the navy-on-yellow buttons. Applies to every orange button/pill. */
.nav-cta, .btn-red, .ali-form button, .pg-strip a.buy, .hs-cta, .btn.btn-red, .ship-more, .find-pack .btn { color: #00005F !important; }
.cc-pill, .own-pill { color: #fff !important; }   /* red pills keep white: 5.4:1 */

/* 2026-09-03 — Willis: "make this drop down". Language picker = one yellow pill (current language ▾) + menu of five. */
.lang-dd { position: relative; margin-left: auto; margin-right: 0; }
.lang-dd .lang-cur { background: #FFC800; color: #00005F; border: 1px solid #5F5627; border-radius: 999px; padding: 5px 10px 5px 8px; font: 700 12px/1 var(--font); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.lang-dd .lang-cur:hover, .lang-dd.open .lang-cur { background: #ffd54a; }
.lang-dd .lang-cur .caret { font-size: 10px; opacity: .8; transition: transform .18s var(--ease-out-expo, ease); }
.lang-dd.open .lang-cur .caret { transform: rotate(180deg); }
.lang-dd .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 168px; background: #fff; border: 1px solid #5F5627; border-radius: 12px; padding: 6px; box-shadow: 0 16px 36px rgba(0,0,95,.22); display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.lang-dd.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dd .lang-menu button { width: 100%; justify-content: flex-start; color: #00005F; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.lang-dd .lang-menu button:hover { background: #F6F7FA; color: #00005F; border-color: transparent; }
.lang-dd .lang-menu button.on { background: #FFC800; border-color: #5F5627; }
.lang-dd .lang-menu button.on::after { content: "✓"; margin-left: auto; font-weight: 800; }
@media (max-width: 1300px) { .lang-dd .ln { display: inline; } .lang-dd .lang-menu .ln { display: inline; } }
.lb-mnav .lang-flat { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }

/* 14 languages: menu in two columns */
.lang-dd .lang-menu { grid-template-columns: 1fr 1fr; min-width: 300px; }
.lang-dd .lang-menu button.on::after { margin-left: 6px; }
[dir="rtl"] .lang-dd .lang-menu { right: auto; left: 0; }

/* languages whose dictionary is still being made */
.lang-bar button.soon { opacity: .55; }
.lang-bar button.soon .ln::after { content: "soon"; font: 700 9px/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase; margin-left: 6px; color: #FF7801; }
.lang-toast { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%) translateY(8px); z-index: 71; background: #00005F; color: #fff; border: 1px solid #5F5627; border-radius: 999px; padding: 10px 16px; font: 600 13px/1.2 var(--font); box-shadow: 0 12px 30px rgba(0,0,0,.3); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; pointer-events: none; }
.lang-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* header "Sign in" pill + panel (Google or email) */
.g-signin-dd { position: relative; }
.g-signin-pill {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font); color: #f5f5f7; white-space: nowrap;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.g-signin-pill:hover { background: rgba(255,255,255,.18); }
.g-signin-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; width: 260px;
  background: #fff; border: 1px solid #5F5627; border-radius: 14px; padding: 16px;
  box-shadow: 0 16px 36px rgba(0,0,95,.22); text-align: center;
}
.g-panel-title { font: 800 13.5px var(--font); color: #00005F; margin-bottom: 12px; }
.g-google-slot { display: flex; justify-content: center; min-height: 36px; }
.g-panel-or { margin: 12px 0 10px; font: 700 10px var(--font-mono, monospace); letter-spacing: .1em; color: #aaa; }
.g-signin-panel input { width: 100%; font: 500 13px var(--font); padding: 9px 11px; border: 1px solid var(--hairline, #ddd); border-radius: 9px; margin-bottom: 8px; }
.g-panel-btn { width: 100%; font: 700 12.5px var(--font); padding: 9px; border-radius: 999px; border: 1px solid #5F5627; background: #fff; color: #00005F; cursor: pointer; }
.g-panel-btn:hover { background: #F6F7FA; }
.g-panel-btn.go { background: #FFC800; }
#g-panel-code-row { margin-top: 4px; }
#g-panel-code { text-align: center; font: 700 15px ui-monospace, monospace; letter-spacing: .25em; }
.g-panel-msg { margin-top: 8px; font-size: 11.5px; font-weight: 600; min-height: 14px; }
@media (max-width: 400px) { .g-signin-panel { position: fixed; right: 8px; left: 8px; width: auto; } }

.g-x-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
  background: #000; color: #fff; font: 700 13px var(--font); padding: 9px; border-radius: 999px; text-decoration: none; margin-top: 8px; }
.g-x-btn:hover { background: #1a1a1a; }
.g-x-glyph { font-weight: 800; }

/* ── Amazon-anatomy product page (2026-09-03): sticky rail gallery, Delivery & Support trio, About bullets, See more, full-width description + info accordions ── */
.pd-gallery { top: 150px; }
.pd-fullview { display: block; text-align: center; font-size: 13px; color: #0973AA; margin-top: 10px; text-decoration: none; }
.pd-fullview:hover { text-decoration: underline; }
.pd-gallery:has(.pd-thumbs) .pd-fullview { grid-column: 2; }
.pd-thumb-cap { font-size: 9px; letter-spacing: .08em; color: var(--text-2); text-align: center; display: block; margin-top: -4px; }
.pd-brandline { font-size: 13px; color: var(--text-2); margin-top: 6px; } .pd-brandline a { color: #0973AA; text-decoration: underline; text-underline-offset: 2px; }
.pd-rating { margin: 6px 0 12px; }
/* Dark star-rating card — ported as-is from Willis's dark-star-rating.html reference (2026-09-11): gradient card, glossy amber stars with a clipped fill layer for smooth proportional/average fill, hover-lift on the interactive row. */
.pd-ratecard { display: inline-flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #3d3d3d 0%, #303030 100%); border-radius: 14px; padding: 13px 18px; box-shadow: 0 5px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.25); max-width: 100%; }
.pd-rc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #eee; }
.pd-rc-label { color: #c9ccd1; font-weight: 600; white-space: nowrap; }
.pd-rc-stars { display: inline-flex; gap: 5px; }
.pd-star { position: relative; width: 26px; height: 26px; display: inline-block; }
.pd-star-base, .pd-star-fill { position: absolute; inset: 0; display: flex; align-items: center; font-size: 24px; line-height: 1; pointer-events: none; }
.pd-star-base { justify-content: center; color: #494b4e; text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 -1px 0 rgba(0,0,0,.3); }
.pd-star-fill { width: 0%; overflow: hidden; justify-content: flex-start; color: #ffb000; text-shadow: 0 1px 0 #ffd85a, 0 2px 3px rgba(180,90,0,.35); transition: width .08s linear; }
.pd-star-fill span { width: 26px; min-width: 26px; display: flex; justify-content: center; align-items: center; }
.pd-rc-stars.pd-rc-live .pd-star { cursor: pointer; user-select: none; transition: transform .15s ease, filter .15s ease; }
.pd-rc-stars.pd-rc-live .pd-star:hover { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
/* Amazon-style individual rating list at the bottom of the page (2026-09-12) — replaces the "· N ratings" count with the actual list, each row named or "Anonymous". */
.pd-reviews-list { margin-top: 14px; }
.pd-reviews-empty { color: var(--text-2); font-size: 14px; }
.pd-review-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.pd-review-row:first-child { border-top: 1px solid var(--hairline); }
.pd-review-stars .pd-star { width: 16px; height: 16px; }
.pd-review-stars .pd-star-base, .pd-review-stars .pd-star-fill { font-size: 15px; color: #E48F1B; }
.pd-review-stars .pd-star-base { color: #E0C9A0; text-shadow: none; }
.pd-review-stars .pd-star-fill { text-shadow: none; }
.pd-review-stars .pd-star-fill span { width: 16px; min-width: 16px; }
.pd-review-who { font-weight: 650; font-size: 14px; }
.pd-review-when { color: var(--text-3); font-size: 12.5px; margin-left: auto; }
/* Full Amazon-style review system (2026-09-12, template: customer-rating-review-system.html) — demo products only. */
.pd-rv-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
@media (max-width: 780px) { .pd-rv-grid { grid-template-columns: 1fr; } }
.pd-rv-summary { position: sticky; top: 90px; }
.pd-rv-avgrow { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.pd-rv-avgnum { font-size: 20px; }
.pd-rv-count { color: var(--text-2); font-size: 14px; margin-bottom: 16px; }
.pd-rv-dist { margin-bottom: 20px; }
.pd-rv-distrow { display: grid; grid-template-columns: 46px 1fr 38px; gap: 8px; align-items: center; font-size: 13px; margin: 8px 0; }
.pd-rv-distlabel { color: var(--text-2); }
.pd-rv-bar { height: 16px; border: 1px solid var(--hairline); border-radius: 4px; background: #fff; overflow: hidden; }
.pd-rv-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #ff9f00, #ff7a00); }
.pd-rv-distpct { color: var(--text-2); text-align: right; }
.pd-rv-writebtn { width: 100%; border: 1px solid #8d9096; background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
.pd-rv-writebtn:hover { background: var(--surface); }
.pd-rv-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0; margin-bottom: 6px; }
.pd-rv-search { flex: 1 1 200px; min-height: 38px; border: 1px solid #8d9096; border-radius: 8px; padding: 0 12px; font-size: 13.5px; }
.pd-rv-select { border: 1px solid #8d9096; border-radius: 8px; background: #fff; padding: 8px 10px; font-size: 13px; }
.pd-rv-visible { font-size: 13.5px; color: var(--text-2); margin: 6px 0 4px; }
.pd-review-card { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--hairline); }
.pd-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pd-review-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-2); font-weight: 800; font-size: 12px; flex-shrink: 0; }
.pd-review-ratingrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pd-review-title { font-weight: 700; font-size: 14.5px; }
.pd-review-body { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; max-width: 720px; margin-top: 4px; }
.pd-review-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pd-review-helpfultext { font-size: 12.5px; color: var(--text-2); }
.pd-review-helpfulbtn { border: 1px solid #8d9096; background: #fff; border-radius: 999px; padding: 6px 16px; font-size: 12.5px; cursor: pointer; }
.pd-review-helpfulbtn:disabled { opacity: .6; cursor: default; }
.pd-review-reportbtn { border: 0; background: none; color: var(--text-2); padding: 6px 0; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.pd-rv-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.48); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 9600; }
.pd-rv-modal-backdrop.pd-rv-open { display: flex; }
.pd-rv-modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.pd-rv-modal-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pd-rv-modal-top h2 { font-size: 19px; margin: 0; }
.pd-rv-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); font-size: 20px; cursor: pointer; }
.pd-rv-flabel { display: block; font-weight: 700; font-size: 13.5px; margin: 16px 0 7px; }
.pd-rv-pickstars .pd-star { width: 34px; height: 34px; cursor: pointer; }
.pd-rv-pickstars .pd-star-base, .pd-rv-pickstars .pd-star-fill { font-size: 32px; }
.pd-rv-pickstars .pd-star-fill span { width: 34px; min-width: 34px; }
.pd-rv-postingas { font-size: 13px; color: var(--text-2); margin: 8px 0 0; }
.pd-rv-finput { width: 100%; border: 1px solid #8d9096; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; }
textarea.pd-rv-finput { min-height: 120px; resize: vertical; }
.pd-rv-submit { border: 0; background: #ffd814; border-radius: 999px; padding: 11px 22px; font-weight: 800; font-size: 14px; cursor: pointer; margin-top: 16px; }
.pd-rv-note { font-size: 12.5px; color: #c0392b; margin-top: 10px; min-height: 1em; }
.pd-rule { border: 0; border-top: 1px solid #D5D9D9; margin: 16px 0; }
.pd-ds h3 { font-size: 15px; margin: 0 0 2px; } .pd-ds-sub { font-size: 12.5px; color: var(--text-2); margin: 0 0 12px; }
.pd-ds-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.pd-ds-row > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: #0973AA; line-height: 1.35; }
.pd-ds-row img { width: 44px; height: 44px; }
.pd-about { margin: 8px 0 0; padding-left: 18px; } .pd-about li { font-size: 14.5px; line-height: 1.55; margin-bottom: 6px; color: var(--text-body); }
.pd-seemore { background: none; border: 0; color: #0973AA; font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 0; }
.pd-instock { font-weight: 700; margin: 8px 0 10px; font-size: 15px; } .pd-instock .ok { color: #0b7a47; } .pd-instock .soon { color: var(--accent-deep); }
.pd-bb-mini { margin-top: 12px; font-size: 12.5px; border-top: 1px solid var(--hairline); padding-top: 10px; display: grid; gap: 6px; }
.pd-bb-mini > div { display: flex; justify-content: space-between; gap: 10px; } .pd-bb-mini span { color: var(--text-2); } .pd-bb-mini a { color: #0973AA; }
.pd-fullw { margin-top: 26px; padding: 0; } .pd-fullw .pd-h { margin-top: 0; } .pd-fullw + .pd-fullw { margin-top: 30px; } .pd-fullw + .pd-h { margin-top: 34px !important; } .pd-fullw p { font-size: 16px; line-height: 1.65; color: var(--text-body); max-width: 90ch; }
.pd-infogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 14px; align-items: start; }
.pd-infogrid details { border-top: 1px solid var(--hairline); } .pd-infogrid details:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline); }
.pd-infogrid summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 14px 4px; list-style: none; display: flex; justify-content: space-between; }
.pd-infogrid summary::-webkit-details-marker { display: none; }
.pd-infogrid summary::after { content: "⌄"; color: var(--text-2); } .pd-infogrid details[open] summary::after { content: "⌃"; }
.pd-infogrid table { margin-bottom: 12px; }
@media (max-width: 700px) { .pd-infogrid { grid-template-columns: 1fr; } .pd-infogrid details:nth-last-child(-n+2) { border-bottom: 0; } .pd-infogrid details:last-child { border-bottom: 1px solid var(--hairline); } .pd-ds-row { gap: 6px; } }
/* software-listing extras (from the Amazon software page study, 2026-09-04) */
.pd-platform { font-size: 13.5px; color: var(--text-body); margin-top: 6px; } .pd-platform b { color: var(--text); font-weight: 700; } .pd-dot { color: var(--text-3); margin: 0 2px; }
.pd-pair-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.pd-pair { width: 220px; }
.pd-pair a { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; text-decoration: none; color: var(--text); font-size: 13.5px; line-height: 1.35; }
.pd-pair img { width: 190px; height: 190px; object-fit: contain; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.pd-pair-name { display: block; min-height: 2.7em; } .pd-pair-price { display: block; font-weight: 700; margin-top: 4px; } .pd-pair-price em { font-weight: 400; font-style: normal; color: var(--text-2); font-size: 11.5px; }
.pd-plus { font-size: 26px; color: var(--text-2); }
.pd-pair-total { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-2); } .pd-pair-total b { display: block; font-size: 24px; color: var(--text); } .pd-pair-total small { display: block; font-size: 11.5px; }
.pd-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; margin-top: 12px; align-items: start; }
.pd-details > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline); } .pd-details dt { color: var(--text-2); } .pd-details dd { margin: 0; color: var(--text); }
@media (max-width: 700px) { .pd-pair-total { margin-left: 0; text-align: left; width: 100%; } .pd-details > div { grid-template-columns: 130px 1fr; } }
.pd-more[hidden] { display: none !important; }   /* the responsive .pd-attrs tbody{display:block} rule was overriding [hidden] */

/* Amazon-style spec table: grey label column, thin full grid, centered roomy cells */
.pd-spec { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; }
.pd-spec td, .pd-spec th { border: 1px solid #ddd; padding: 16px 18px; text-align: center; vertical-align: middle; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.pd-spec td:first-child, .pd-spec th:first-child { background: #f7f7f7; color: #555; width: 24%; font-weight: 400; }
.pd-spec small { color: var(--text-2); font-size: 12px; }
.pd-cmp-h { font-size: 15px; margin: 22px 0 10px; }
.pd-cmp-wrap { overflow-x: auto; }
.pd-cmp { min-width: 640px; } .pd-cmp th { background: #fff; font-weight: 700; font-size: 14px; } .pd-cmp th a { color: var(--text); text-decoration: none; display: block; }
.pd-cmp th img { width: 96px; height: 96px; object-fit: contain; display: block; margin: 0 auto 8px; } .pd-cmp th small { display: block; font-weight: 400; color: var(--text-2); font-size: 11.5px; margin-bottom: 2px; }
/* Zebra striping — comparison table only, not the single-item spec tables (research: Enders 2007/08,
   Tensmeyer et al. WWW 2023, Ji/Perin/Nacenta TVCG 2025 — stripes help wide cross-row comparison tasks,
   not simple single-value lookups; keep the two tones close, not high-contrast, per WCAG). #fafafa vs
   #fff against --text #151515 barely moves the contrast ratio, so this can't create a new a11y failure. */
.pd-cmp tbody tr:nth-child(even) td:not(:first-child) { background: #FDF3E7; }
.pd-infogrid table { margin-bottom: 14px; }
@media (max-width: 700px) { .pd-spec td, .pd-spec th { padding: 12px 10px; font-size: 14px; } .pd-spec td:first-child, .pd-spec th:first-child { width: 34%; } }
.pd-spec td:first-child { overflow-wrap: normal; }
.pd-infogrid .pd-spec td:first-child, .pd-details .pd-spec td:first-child { width: 36%; }
/* Amazon-style section rules: a thin grey line above every full-width block on the product page */
.pd-fullw, .pd-divider { border-top: 1px solid #D5D9D9; padding-top: 22px; margin-top: 26px; }
.pd-fullw + .pd-fullw { margin-top: 26px; }
.pd-divider .pd-h, .pd-fullw .pd-h { margin-top: 0; }
h2.pd-divider { margin-top: 26px !important; }
.pdp-learn { margin-top: 0; }
/* No Shipping Needed — Download Instantly callout (Amazon "delivery info" box study, 2026-09-04) */
.pd-ship { display: flex; gap: 14px; align-items: flex-start; background: #F6F7FA; border: 1px solid #D5D9D9; border-radius: var(--r-card); padding: 16px 18px; margin: 16px 0; }
.pd-ship-ico { font-size: 26px; line-height: 1; }
.pd-ship h3 { margin: 0 0 6px; font-size: 15px; }
.pd-ship p { margin: 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.pd-ship p b { color: var(--text); }
/* product.html sits on a white page ground, like Amazon's PDP, unlike the grey shelf ground elsewhere (Willis 2026-09-04) */
body.pdp-page { background: #fff; }
.pd-bb-pay { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pd-bb-pay img { height: 20px; width: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }

/* Product pages and the header used to be deliberately WIDER than the body content (Amazon-style, Willis
   2026-09-04), via calc(var(--max-grid) + Npx) offsets so the splitter would still scale them. Willis
   2026-09-12: "i dont see it where the drag splitter why the header still not align with the bottom parts" —
   confirmed via follow-up he now wants the header and product-page shell to match the body's edges exactly,
   not just resize proportionally with a permanent gap. Both now use plain --max-grid, identical to .wrap, so
   every row on every page shares the exact same left/right edge at any splitter position. */
.pdp.wrap, .pd-wrap.wrap { max-width: var(--max-grid); }
.nav-in.wrap, .nav-row2-in.wrap { max-width: var(--max-grid); }

/* product page: research section (research.js) */
.pdp-research{background:#F6F7FA;border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px 26px}.pdp-research h2{margin-top:0!important}.pdp-research-note{font-size:13px;color:var(--text-2);max-width:78ch;line-height:1.5}.pdp-research-topic{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline)}.pdp-research-topic h3{margin:0 0 10px;font-size:17px}.pdp-research-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pdp-research-cols b{display:block;margin-bottom:4px;font-size:13px}.pdp-research-cols p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}.pdp-research-refs{margin-top:10px;font-size:13px}.pdp-research-refs summary{cursor:pointer;font-weight:700;color:var(--text-2)}.pdp-research-refs ul{margin:8px 0 0;padding-left:18px;line-height:1.5;color:var(--text-2)}@media(max-width:720px){.pdp-research-cols{grid-template-columns:1fr}}


/* ---------- Store menu v3 = Dock with names (2026-09-08): glossy tile + name and count to the right, always visible ---------- */
.cat-menu.v3 { padding: 0 0 6px; }
.cat-menu.v3 .cat-title { margin-bottom: 4px; }
.cat-menu.v3 .dk-group { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; }
.cat-menu.v3 .dk-sep { height: 1px; background: var(--hairline); margin: 4px 14px; }
.cat-menu.v3 a.dk { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; padding: 5px 8px; margin: 0; border-radius: 12px; background: none; }
.cat-menu.v3 a.dk:hover, .cat-menu.v3 a.dk:focus-visible { background: #EEF1FF; }
.cat-menu.v3 .dk-t { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; box-shadow: 0 3px 8px rgba(0,0,95,.25), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.16); transition: transform .18s cubic-bezier(.2,.9,.3,1.4); }
.cat-menu.v3 .dk-t .icn { width: 22px; height: 22px; stroke: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.cat-menu.v3 a.dk:hover .dk-t { transform: scale(1.1); }
.cat-menu.v3 .dk-l { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; text-align: left; }
.cat-menu.v3 .dk-l b { font-weight: 700; font-size: 13.5px; color: var(--text); white-space: normal; }
.cat-menu.v3 .dk-l small { font-family: "Space Mono", Menlo, monospace; font-size: 10.5px; color: var(--text-3); letter-spacing: 0; }
.cat-menu.v3 a.dk[data-free] .dk-l small { color: #1F9D55; font-weight: 700; }
.cat-menu.v3 .t-navy { background: linear-gradient(160deg,#4B5BFF,#00005F); } .cat-menu.v3 .t-orange { background: linear-gradient(160deg,#FFB05C,#FF7801 60%,#D65A00); }
.cat-menu.v3 .t-sky { background: linear-gradient(160deg,#9EE6FF,#5AC5F0 55%,#1E90C8); } .cat-menu.v3 .t-yellow { background: linear-gradient(160deg,#FFE680,#FFC800 55%,#E0A800); color: #00005F; }
.cat-menu.v3 .t-red { background: linear-gradient(160deg,#FF6B6B,#D70000); } .cat-menu.v3 .t-green { background: linear-gradient(160deg,#A8F06B,#5CB82A); }
.cat-menu.v3 .t-purple { background: linear-gradient(160deg,#B48CFF,#6A2FD6); } .cat-menu.v3 .t-teal { background: linear-gradient(160deg,#7BF0D8,#1FA88C); } .cat-menu.v3 .t-ink { background: linear-gradient(160deg,#5A6172,#1E2230); }
.cat-menu.v3 .cat-find { margin-top: 4px; }
.cat-menu.v3 .cat-all { margin: 0; border-radius: 0; }
@media (max-width: 1000px) { .cat-menu.v3 { flex-direction: column; } .cat-menu.v3 .dk-group { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; } }
.cat-menu.v3 a.dk .dk-t, .cat-menu.v3 a.dk .dk-t .icn, .cat-menu.v3 a.dk:hover .dk-t .icn { color: #fff !important; }
.cat-menu.v3 a.dk .t-yellow, .cat-menu.v3 a.dk .t-yellow .icn, .cat-menu.v3 a.dk:hover .t-yellow .icn { color: #00005F !important; }
.cat-menu.v3 { overflow: hidden; }
.cat-menu.v3 .cat-title { border-radius: var(--r-card) var(--r-card) 0 0; }
/* colour-coded table rows (Willis 2026-09-08): every area has its own band, so the eye finds it by colour */
.cat-menu.v3 .dk-group { gap: 3px; padding: 4px 8px 8px; }
.cat-menu.v3 .dk-h { font-size: 10.5px; letter-spacing: 0.14em; color: #fff; background: #0F1222; padding: 6px 14px; margin: 4px 8px 0; border-radius: 8px 8px 0 0; }
.cat-menu.v3 a.dk { border-radius: 10px; border-left: 5px solid transparent; padding: 6px 10px 6px 8px; }
.cat-menu.v3 a.dk.t-navy { background: #ECEEFF; border-left-color: #2B37C8; }   .cat-menu.v3 a.dk.t-navy:hover { background: #DDE1FF; }
.cat-menu.v3 a.dk.t-sky { background: #E6F6FD; border-left-color: #2AA6DD; }    .cat-menu.v3 a.dk.t-sky:hover { background: #D2EEFB; }
.cat-menu.v3 a.dk.t-orange { background: #FFF0E3; border-left-color: #FF7801; } .cat-menu.v3 a.dk.t-orange:hover { background: #FFE3CB; }
.cat-menu.v3 a.dk.t-purple { background: #F1EBFF; border-left-color: #7B45E6; } .cat-menu.v3 a.dk.t-purple:hover { background: #E6DBFF; }
.cat-menu.v3 a.dk.t-red { background: #FFEAEA; border-left-color: #D70000; }    .cat-menu.v3 a.dk.t-red:hover { background: #FFD9D9; }
.cat-menu.v3 a.dk.t-yellow { background: #FFF7D6; border-left-color: #E5B400; } .cat-menu.v3 a.dk.t-yellow:hover { background: #FFF0B8; }
.cat-menu.v3 a.dk.t-teal { background: #E4F8F2; border-left-color: #1FA88C; }   .cat-menu.v3 a.dk.t-teal:hover { background: #CFF2E8; }
.cat-menu.v3 a.dk.t-green { background: #EAF7E1; border-left-color: #5CB82A; }  .cat-menu.v3 a.dk.t-green:hover { background: #DCF2CD; }
.cat-menu.v3 a.dk.t-ink { background: #EEEFF3; border-left-color: #3A4152; }    .cat-menu.v3 a.dk.t-ink:hover { background: #E1E3EA; }
.cat-menu.v3 .dk-sep { display: none; }
/* sticky rails end above the LookyRadio player and keep curved bottom corners (Willis 2026-09-08) */
.rail-in { max-height: calc(100vh - var(--rail-top, 78px) - 76px) !important; border-radius: var(--r-card); }
.rail-r .rail-in > :last-child { margin-bottom: 0; }
/* shelf filters: one row per line with divider lines, left-aligned, subtext on its own line (Willis 2026-09-08) */
.fc-list .chip-f { justify-content: flex-start; flex-wrap: wrap; text-align: left; padding: 9px 6px; border-radius: 0; }
.fc-list .chip-f + .chip-f, .fc-chk + .fc-chk, .fc-link + .fc-link { border-top: 1px solid var(--hairline); }
.fc-list .chip-f small { flex-basis: 100%; margin-left: 41px; font-size: 11.5px; color: var(--text-3); opacity: 1 !important; }
.fc-chk { padding: 9px 6px; border-radius: 0; }
.fc-list .chip-f:hover, .fc-chk:hover { background: #F4F6FB; }
/* shelf filter rows, take two: grid rows so the label never drops under the icon; hard divider lines */
.fc-list .chip-f { display: grid !important; grid-template-columns: 14px auto 1fr; align-items: center; column-gap: 9px; flex-wrap: nowrap; padding: 9px 6px !important; border: 0 !important; border-top: 1px solid var(--hairline) !important; border-radius: 0 !important; text-align: left !important; justify-items: start; }
.fc-list .chip-f:first-child { border-top: 0 !important; }
.fc-list .chip-f small { grid-column: 2 / -1; margin-left: 0; font-size: 11.5px; color: var(--text-3); }
.fc-list .chip-f .icn { justify-self: center; }
.fc-chk { border-radius: 0 !important; padding: 9px 6px !important; }
.fc-chk + .fc-chk { border-top: 1px solid var(--hairline) !important; }
/* department radios: outrank the .mkt-facets border reset on line ~2272 */
.mkt-facets .fc-list .chip-f + .chip-f, .mkt-facets .mkt-filters .chip-f + .chip-f { border: 0 !important; border-top: 1px solid var(--hairline) !important; }
/* price filter: same row style as the other facets — dot, divider lines, no boxed buttons (Willis 2026-09-08) */
.mkt-facets .fc-link { display: flex !important; align-items: center; gap: 9px; border: 0 !important; border-radius: 0 !important; padding: 9px 6px !important; background: none !important; box-shadow: none !important; }
.mkt-facets .fc-link + .fc-link { border-top: 1px solid var(--hairline) !important; }
.mkt-facets .fc-link::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #8a8f98; background: #fff; flex: none; }
.mkt-facets .fc-link.active { color: var(--text) !important; font-weight: 700; }
.mkt-facets .fc-link.active::before { border: 4px solid #2f6fd8; }
.mkt-facets .fc-link:hover { background: #F4F6FB !important; }
/* symmetry pass (Willis 2026-09-08): both side headers the same height/size; stat boxes align their titles at the top */
.cat-title, .rail-news > b.ni-head { font-size: 13px !important; padding: 12px 16px !important; min-height: 46px; box-sizing: border-box; gap: 9px; }
.cat-ico img, .ni-ico img { width: 22px; height: 22px; }
.rail-news .ni-ico { width: 22px; height: 22px; font-size: 12px; }
.trust3 .s3 { align-items: flex-start; }
.trust3 .s3 > div { padding-top: 4px; }
.trust3 .s3 b { font-size: 14.5px; line-height: 1.25; }
/* news rail sub-header bands, same as the store menu's (Willis 2026-09-08 "with subheaders") */
.rail-news .rail-h { font-size: 10.5px; letter-spacing: 0.14em; color: #fff; background: #0F1222; padding: 6px 14px; margin: 8px 0 2px; border-radius: 8px 8px 0 0; }
.rail-news .rail-h + .nw { border-top: 0; }
/* phones: Amazon-app product grid (Willis 2026-09-08, from his screenshot) — two boxed cards per row aligned to the screen's
   outer edges with a 16 px margin, 12 px gutter, thin grey border, rounded corners, grey picture well, price large, full-width pill buttons */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .mkt-grid, .mkt-grid.cc-grid, .cc-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; padding: 4px 16px 8px !important; box-sizing: border-box; }
  .mkt-grid > *, .cc-grid > * { min-width: 0; zoom: 0.84; border: 1px solid #DDDDDD !important; border-radius: 10px !important; box-shadow: none !important; padding: 8px 8px 10px; background: #fff; }
  .mkt-grid > *:hover, .cc-grid > *:hover { transform: none !important; box-shadow: none !important; }
  .mkt-grid .mkt-img, .cc-grid .cc-img { aspect-ratio: 1; background: #F4F4F4 !important; border-radius: 8px; }
  .mkt-grid .mkt-img img, .cc-grid .cc-img img { max-width: 100%; padding: 8px; mix-blend-mode: multiply; }
  .mkt-grid .mkt-body { padding: 10px 2px 0; gap: 5px; }
  .mkt-grid .mkt-body h3 { font-size: 15px; }
  .mkt-grid .mkt-price { font-size: 22px; }
  .mkt-grid .mkt-tag, .cc-grid .cc-tag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mkt-grid .mkt-ctas { flex-wrap: wrap; gap: 6px; }
  .mkt-grid .mkt-btn { flex: 1 1 100%; text-align: center; border-radius: 999px; padding: 10px 12px; font-weight: 600; }
}
@media (max-width: 380px) { .mkt-grid > *, .cc-grid > * { zoom: 0.76; } }
/* phone menu v2 (Willis 2026-09-08): search inside the menu, tappable departments with colour bands; header search hidden on phones */
@media (max-width: 1000px) {
  .lb-mnav.open { max-height: calc(100vh - 70px); overflow-y: auto; padding-bottom: 12px; }
  .lb-mnav-search { display: flex; gap: 0; margin: 12px 14px 6px; background: #fff; border-radius: 999px; overflow: hidden; border: 2px solid #FFC800; }
  .lb-mnav-search input { flex: 1; min-width: 0; font: inherit; font-size: 15px; border: 0; padding: 11px 16px; background: none; color: var(--text); }
  .lb-mnav-search input:focus { outline: none; }
  .lb-mnav-search button { font: inherit; font-weight: 800; font-size: 14px; border: 0; background: #FFC800; color: #00005F; padding: 0 18px; cursor: pointer; }
  .lb-mnav-h { font-size: 10.5px; letter-spacing: 0.14em; color: #9aa0d8; padding: 12px 22px 4px; }
  .lb-mnav a.lb-mnav-dept { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin: 3px 10px; border-radius: 10px; border-bottom: 0; border-left: 5px solid transparent; font-size: 15px; }
  .lb-mnav a.lb-mnav-dept b { font-weight: 700; } .lb-mnav a.lb-mnav-dept small { display: block; font-size: 11px; font-weight: 600; color: #9aa0d8; }
  .lb-mnav a.lb-mnav-dept .dk-t { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18); }
  .lb-mnav a.lb-mnav-dept .dk-t .icn { width: 20px; height: 20px; stroke: currentColor; color: #fff; }
  .lb-mnav a.lb-mnav-dept.t-navy { background: rgba(75,91,255,.16); border-left-color: #4B5BFF; } .lb-mnav a.lb-mnav-dept.t-sky { background: rgba(90,197,240,.16); border-left-color: #5AC5F0; }
  .lb-mnav a.lb-mnav-dept.t-orange { background: rgba(255,120,1,.16); border-left-color: #FF7801; } .lb-mnav a.lb-mnav-dept.t-purple { background: rgba(123,69,230,.18); border-left-color: #B48CFF; }
  .lb-mnav a.lb-mnav-dept.t-red { background: rgba(215,0,0,.18); border-left-color: #FF6B6B; } .lb-mnav a.lb-mnav-dept.t-yellow { background: rgba(255,200,0,.16); border-left-color: #FFC800; } .lb-mnav a.lb-mnav-dept.t-green { background: rgba(92,184,42,.18); border-left-color: #A8F06B; }
  .lb-mnav a.lb-mnav-dept .t-navy { background: linear-gradient(160deg,#4B5BFF,#00005F); } .lb-mnav a.lb-mnav-dept .t-sky { background: linear-gradient(160deg,#9EE6FF,#5AC5F0 55%,#1E90C8); } .lb-mnav a.lb-mnav-dept .t-orange { background: linear-gradient(160deg,#FFB05C,#FF7801 60%,#D65A00); }
  .lb-mnav a.lb-mnav-dept .t-purple { background: linear-gradient(160deg,#B48CFF,#6A2FD6); } .lb-mnav a.lb-mnav-dept .t-red { background: linear-gradient(160deg,#FF6B6B,#D70000); } .lb-mnav a.lb-mnav-dept .t-yellow { background: linear-gradient(160deg,#FFE680,#FFC800 55%,#E0A800); } .lb-mnav a.lb-mnav-dept .t-yellow .icn { color: #00005F; } .lb-mnav a.lb-mnav-dept .t-green { background: linear-gradient(160deg,#A8F06B,#5CB82A); }
}
@media (max-width: 700px) { .hdr-search { display: none !important; } }
/* phone menu: fixed under the header (the header itself is position:static since the 2026-09-03 theme) */
@media (max-width: 1000px) { .lb-mnav.open { position: fixed !important; left: 0; right: 0; z-index: 9400; max-height: calc(100vh - 60px); } }

/* ══════════ PHONE HOME — app-style front page on phones only (Willis's mockup 2026-09-08) ══════════ */
#m-home, .mh-tabs { display: none; }
@media (max-width: 700px) {
  #m-home[hidden], .mh-tabs[hidden] { display: block; }
  #m-home { display: block; padding: 10px 16px 6px; background: #fff; }
  .mh-search { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; border: 1.5px solid #C9CCE6; border-radius: 16px; background: #fff; margin-bottom: 14px; }
  .mh-search .icn { width: 22px; height: 22px; color: #00005F; flex: none; }
  .mh-search input { flex: 1; min-width: 0; border: 0; background: none; font: 500 16px Inter, system-ui, sans-serif; color: #0F1222; outline: none; }
  .mh-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 8px; background: #E6E6FF; border-radius: 22px; padding: 22px 6px 22px 22px; overflow: hidden; }
  .mh-eyebrow { margin: 0 0 6px; font: 700 11px/1 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #00005F; }
  .mh-hero h2 { margin: 0 0 16px; font: 800 clamp(22px, 6.6vw, 28px)/1.12 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #00005F; }
  .mh-cta { display: inline-flex; align-items: center; gap: 8px; background: #FF7801; color: #fff; font: 800 15px Inter, system-ui, sans-serif; padding: 14px 18px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(255,120,1,.35); }
  .mh-hero-art { width: 100%; height: auto; max-width: 190px; justify-self: center; filter: drop-shadow(0 14px 22px rgba(0,0,95,.28)); }
  .mh-trust { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-radius: 16px; margin-top: 12px; padding: 14px 6px; box-shadow: 0 2px 10px rgba(0,0,95,.06); }
  .mh-trust span { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 12.5px Inter, system-ui, sans-serif; color: #0F1222; text-align: center; }
  .mh-trust svg { width: 30px; height: 30px; fill: none; stroke: #1E5BFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mh-trust span:first-child svg { stroke: #FF7801; }
  .mh-h { margin: 22px 0 12px; font: 800 24px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #00005F; }
  .mh-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mh-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 4px 12px; border-radius: 14px; text-decoration: none; font: 700 12.5px Inter, system-ui, sans-serif; color: #0F1222; min-width: 0; }
  .mh-cat b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mh-cat .icn { width: 30px; height: 30px; stroke: currentColor; }
  .mh-cat.c-blue { background: #E4ECFF; color: #1E5BFF; } .mh-cat.c-green { background: #E3F6EA; color: #1F7A46; } .mh-cat.c-orange { background: #FFEAD6; color: #FF7801; } .mh-cat.c-purple { background: #ECE6FF; color: #5B2FD6; }
  .mh-cat.c-blue b, .mh-cat.c-green b, .mh-cat.c-orange b, .mh-cat.c-purple b { color: #0F1222; }
  .mh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .mh-all { font: 700 15px Inter, system-ui, sans-serif; color: #1E5BFF; text-decoration: none; white-space: nowrap; }
  .mh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mh-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 16px; padding: 12px 12px 14px; text-decoration: none; color: #0F1222; box-shadow: 0 2px 10px rgba(0,0,95,.06); min-width: 0; }
  .mh-img { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; }
  .mh-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,95,.2)); }
  .mh-card b { font: 800 16px/1.2 Inter, system-ui, sans-serif; color: #00005F; }
  .mh-card small { font: 500 12.5px/1.3 Inter, system-ui, sans-serif; color: #5E6670; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mh-view { margin-top: 10px; display: block; text-align: center; border: 2px solid #00005F; border-radius: 12px; padding: 10px; font: 800 14px Inter, system-ui, sans-serif; color: #00005F; }
  .mh-demo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 16px 0 6px; background: #00005F; color: #fff; border-radius: 18px; padding: 14px 14px 14px 12px; text-decoration: none; }
  .mh-play { width: 46px; height: 46px; border-radius: 50%; background: #FF7801; display: grid; place-items: center; }
  .mh-play svg { width: 22px; height: 22px; fill: #fff; }
  .mh-demo-t { min-width: 0; }
  .mh-demo-t b { display: block; font: 800 16px Inter, system-ui, sans-serif; }
  .mh-demo-t small { display: block; font: 500 12px Inter, system-ui, sans-serif; color: #C9CCE6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mh-demo-b { background: #FF7801; border-radius: 12px; padding: 12px 14px; font: 800 14px Inter, system-ui, sans-serif; white-space: nowrap; }
  /* the desktop hero, promise strip and shelf are replaced by the phone home; the story sections below stay */
  body:has(#m-home) .fb-shell > main.feed, body:has(#m-home) .feed-wide > #shelf, body:has(#m-home) .feed-wide > .twins, body:has(#m-home) .feed-wide > .trust-strip { display: none !important; }
  body:has(#m-home) .fb-shell { padding-top: 0 !important; }
  /* bottom tab bar; LookyRadio rides just above it */
  .mh-tabs { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid #E3E5EC; padding: 8px 0 calc(6px + env(safe-area-inset-bottom)); }
  .mh-tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 11.5px Inter, system-ui, sans-serif; color: #5E6670; text-decoration: none; }
  .mh-tabs a.on { color: #00005F; font-weight: 800; }
  .mh-tabs .icn { width: 24px; height: 24px; stroke: currentColor; }
  body:has(.mh-tabs) { padding-bottom: 64px; }
  body:has(.mh-tabs) .lradio { bottom: 58px !important; }
}

/* ══════════ DESKTOP HOME — store front page from the owner's mockup (2026-09-08). Phones use #m-home instead. ══════════ */
#d-home { display: none; }
@media (min-width: 701px) {
  #d-home { display: block; background: #fff; padding-bottom: 8px; }
  body:has(#d-home) { background: #fff; }
  .dh-tabs { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: #fff; border-bottom: 1px solid #E3E5EC; position: relative; z-index: 45; }   /* no overflow clipping — the language menu drops below this row */
  .dh-tabs a { font: 600 14.5px Inter, system-ui, sans-serif; color: #151515; text-decoration: none; padding: 14px 12px 12px; border-bottom: 3px solid transparent; white-space: nowrap; }
  .dh-tabs a:hover { color: #00005F; }
  .dh-tabs a.on { color: #00005F; font-weight: 800; border-bottom-color: #FF7801; }
  .dh-wrap { padding-top: 18px; }
  .dh-hero { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 24px; background: linear-gradient(135deg, #E6E6FF 0%, #ECEBFF 55%, #E3EEFF 100%); border-radius: 26px; padding: 40px 44px; min-height: 340px; overflow: hidden; position: relative; }
  .dh-eyebrow { margin: 0 0 10px; font: 700 11.5px/1 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #00005F; }
  .dh-hero h2 { margin: 0 0 10px; font: 800 clamp(34px, 4vw, 54px)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #00005F; }
  .dh-sub { margin: 0 0 22px; font: 500 18px Inter, system-ui, sans-serif; color: #444; }
  .dh-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .dh-cta { display: inline-flex; align-items: center; gap: 10px; background: #FF7801; color: #fff; font: 800 15.5px Inter, system-ui, sans-serif; padding: 15px 22px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(255,120,1,.35); transition: transform .15s, box-shadow .15s; }
  .dh-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255,120,1,.4); }
  .dh-ghost { display: inline-flex; align-items: center; gap: 10px; color: #00005F; font: 700 15px Inter, system-ui, sans-serif; text-decoration: none; }
  .dh-art { position: relative; height: 300px; }
  .dh-pedestal { position: absolute; left: 8%; right: 8%; bottom: 6px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 18px 40px rgba(0,0,95,.18), inset 0 -8px 16px rgba(0,0,95,.06); }
  .dh-box { position: absolute; bottom: 30px; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,95,.3)); transition: transform .3s; }
  .dh-box.b1 { left: 4%; width: 36%; transform: rotate(-6deg); z-index: 1; }
  .dh-box.b2 { left: 32%; width: 36%; bottom: 22px; z-index: 2; }
  .dh-box.b3 { right: 2%; width: 40%; transform: rotate(5deg); z-index: 3; }
  .dh-hero:hover .dh-box.b2 { transform: translateY(-6px); }
  .dh-trust { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 26px; padding: 10px 0; border-bottom: 1px solid #E3E5EC; }
  .dh-trust span { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 8px 24px; border-right: 1px solid #E3E5EC; }
  .dh-trust span:last-child { border-right: 0; }
  .dh-trust svg { grid-row: 1 / 3; width: 40px; height: 40px; fill: none; stroke: #00005F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .dh-trust b { font: 800 15px Inter, system-ui, sans-serif; color: #151515; }
  .dh-trust small { font: 500 13px Inter, system-ui, sans-serif; color: #666; }
  .dh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .dh-h { margin: 6px 0 16px; font: 800 30px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #00005F; }
  .dh-all { font: 700 15px Inter, system-ui, sans-serif; color: #1E5BFF; text-decoration: none; white-space: nowrap; }
  .dh-all:hover { text-decoration: underline; }
  .dh-avail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
  .dh-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #E3E5EC; border-radius: 18px; padding: 14px 14px 16px; text-decoration: none; color: #151515; box-shadow: 0 2px 10px rgba(0,0,95,.05); transition: transform .15s, box-shadow .15s; min-width: 0; }
  .dh-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,95,.12); }
  .dh-live { display: inline-flex; align-items: center; gap: 6px; font: 600 13px Inter, system-ui, sans-serif; color: #151515; }
  .dh-live i { width: 10px; height: 10px; border-radius: 50%; background: #00B96B; }
  .dh-img { display: grid; place-items: center; aspect-ratio: 1; margin: 6px 0 10px; }
  .dh-img img { max-width: 92%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,95,.22)); }
  .dh-card b { font: 800 17px/1.2 Inter, system-ui, sans-serif; color: #00005F; }
  .dh-card small { font: 500 14px/1.35 Inter, system-ui, sans-serif; color: #666; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dh-price, .mh-price { display: block; margin-top: 8px; font: 800 20px Inter, system-ui, sans-serif; color: #151515; font-variant-numeric: tabular-nums; }
  .dh-price em, .mh-price em { font: 500 13px Inter, system-ui, sans-serif; color: #666; font-style: normal; margin-left: 4px; }
  .dh-view { margin-top: 12px; display: block; text-align: center; border: 2px solid #00005F; border-radius: 10px; padding: 11px; font: 800 14.5px Inter, system-ui, sans-serif; color: #00005F; transition: background .15s, color .15s; }
  .dh-card:hover .dh-view { background: #00005F; color: #fff; }
  .dh-do { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
  .dh-tile { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 22px 54px 22px 24px; border-radius: 20px; text-decoration: none; color: #151515; min-height: 128px; transition: transform .15s; overflow: hidden; }
  .dh-tile:hover { transform: translateY(-2px); }
  .dh-tile.t-sky { background: #E4EEFF; } .dh-tile.t-orange { background: #FFEAD6; } .dh-tile.t-lav { background: #E8F6EA; }
  .dh-tile b { display: block; font: 800 21px/1.15 Inter, system-ui, sans-serif; color: #00005F; }
  .dh-tile small { display: block; margin-top: 6px; font: 500 14px Inter, system-ui, sans-serif; color: #444; }
  .dh-tile img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,95,.2)); }
  .dh-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 20px Inter, sans-serif; color: #00005F; box-shadow: 0 2px 8px rgba(0,0,95,.12); }
  .dh-next { background: #E6E6FF; border-radius: 22px; padding: 24px 28px 26px; margin-bottom: 26px; }
  .dh-next .dh-h { margin-top: 0; }
  .dh-next .dh-all { color: #00005F; font-weight: 600; }
  .dh-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .dh-nx { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; text-decoration: none; color: #151515; padding: 6px 24px 6px 0; border-right: 1px solid rgba(0,0,95,.15); }
  .dh-nx + .dh-nx { padding-left: 24px; border-right: 0; }
  .dh-nx img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,95,.25)); }
  .dh-nx b { display: block; font: 800 17px Inter, system-ui, sans-serif; color: #00005F; }
  .dh-nx small { display: block; margin: 4px 0 8px; font: 500 13.5px Inter, system-ui, sans-serif; color: #444; }
  .dh-nx u { font: 700 14px Inter, system-ui, sans-serif; color: #1E5BFF; }
  /* the old three-column shell steps aside on the homepage: rails, hero slider, promise strip and shelf are replaced by #d-home; the story sections stay */
  body:has(#d-home) .fb-shell { display: block !important; padding-top: 0 !important; }
  body:has(#d-home) .fb-shell::before { display: none !important; }
  body:has(#d-home) .fb-shell > .rail-l, body:has(#d-home) .fb-shell > .rail-r, body:has(#d-home) .fb-shell > main.feed, body:has(#d-home) .feed-wide > #shelf, body:has(#d-home) .feed-wide > .twins, body:has(#d-home) .feed-wide > .trust-strip { display: none !important; }
  body:has(#d-home) .feed-wide { margin-top: 0; }
}
/* at #shelf's own breakpoint (1100px+), the homepage sits in the same bordered white card the shelf page uses
   instead of running edge-to-edge, so "the home page" looks like the rest of the site (Willis 2026-09-12,
   comparing to products.html's #shelf card). Below 1100px it kept the original 2026-09-08 edge-to-edge design
   until Willis said (2026-09-12) "every single section include top to bottom should respect the master drag
   splitter system" — the width part of that (max-width:none, previously only removed here at ≥1100px) is now
   handled unconditionally by the .dh-tabs/.dh-wrap 701px+ rules below; this block just keeps the white-card
   cosmetic (background/border/radius) for ≥1100px only, matching the #shelf card's own breakpoint. */
@media (min-width: 1100px) {
  #d-home, body:has(#d-home) { background: var(--bg); }
  #d-home .dh-wrap { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 22px 22px 26px; margin: 14px auto 0; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .dh-hero { grid-template-columns: 1fr; padding: 28px; }
  .dh-art { height: 240px; }
  .dh-avail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-do { grid-template-columns: 1fr; }
  .dh-next-grid { grid-template-columns: 1fr; }
  .dh-nx { border-right: 0; padding: 10px 0; }
  .dh-nx + .dh-nx { padding-left: 0; border-top: 1px solid rgba(0,0,95,.15); }
  .dh-trust span { padding: 8px 12px; }
}
/* ---- phone home fixes from the design critique (2026-09-08) ---- */
@media (max-width: 700px) {
  .mh-tabs[hidden] { display: grid; }                       /* was display:block → the three tabs stacked */
  .mh-search:focus-within { border-color: #00005F; box-shadow: 0 0 0 3px rgba(0,0,95,.15); }
  .mh-cat b { white-space: normal; text-align: center; line-height: 1.15; font-size: 12px; }
  .mh-cat.c-blue { background: #E6F5FC; color: #1E90C8; } .mh-cat.c-green { background: #FFF6CC; color: #8A6A00; } .mh-cat.c-purple { background: #ECE6FF; color: #5B2FD6; }
  .mh-trust svg { stroke: #00005F; } .mh-trust span:first-child svg { stroke: #FF7801; }
  .mh-all { color: #00005F; }
  .mh-card { border: 1px solid #E3E5EC; }
  .mh-img { background: #F4F4F4; border-radius: 12px; }
  .mh-img img { max-width: 88%; max-height: 88%; filter: drop-shadow(0 6px 10px rgba(0,0,95,.18)); }
  .mh-card small { font-size: 13.5px; }
  .mh-price { font-size: 18px; }
  .mh-demo { grid-template-columns: auto 1fr; row-gap: 12px; }
  .mh-demo-t small { white-space: normal; }
  .mh-demo-b { grid-column: 1 / -1; text-align: center; }
  .mh-hero { grid-template-columns: 1fr; padding: 22px; }
  .mh-hero-art { max-width: 210px; margin-top: 6px; }
}

/* homepage: one sub-header, not two — the store's category tabs replace the Home/Shelf/Demos row; the language picker lives in the tab row */
@media (min-width: 701px) {
  body:has(#d-home) .nav-row2 { display: none; }
  .dh-tabs .lang-bar { margin-left: auto; margin-right: 6px; }
  .dh-tabs .lang-bar button { color: #444; }
  .dh-tabs .lang-bar button:hover { color: #00005F; border-color: #E3E5EC; }
  .dh-tabs .lang-bar button.on { background: #FFC800; color: #00005F; border-color: #E3B800; }
  .dh-tabs .lang-menu { color: #151515; }
}

/* homepage shelf toolbar — results-page feel borrowed from the GPT redesign (design/refs/gpt-redesign-2026-09-08.html), Amazon-style cards kept */
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; padding: 12px 18px; background: #fff; color: #00005F; font: 800 14px Inter, system-ui, sans-serif; border: 2px solid #00005F; border-radius: 10px; transition: top .15s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #1E5BFF; outline-offset: 3px; }
@media (min-width: 701px) {
  .dh-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 16px; }
  .dh-pills { display: flex; gap: 6px; }
  .dh-pills button { font: 700 13.5px Inter, system-ui, sans-serif; color: #151515; background: #fff; border: 1px solid #C9CCE6; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
  .dh-pills button:hover { border-color: #00005F; }
  .dh-pills button.on { background: #00005F; color: #fff; border-color: #00005F; }
  .dh-n { font: 500 13.5px Inter, system-ui, sans-serif; color: #666; }
  .dh-sort { margin-left: auto; font: 600 13.5px Inter, system-ui, sans-serif; color: #444; display: inline-flex; align-items: center; gap: 8px; }
  .dh-sort select { font: 600 13.5px Inter, system-ui, sans-serif; color: #151515; background: #fff; border: 1px solid #C9CCE6; border-radius: 10px; padding: 8px 10px; }
  .dh-soon { display: inline-block; font: 800 11px Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #D70000; border-radius: 6px; padding: 4px 8px; align-self: flex-start; }
  .dh-more-row { text-align: center; margin: -14px 0 30px; }
  .dh-more { font: 800 14px Inter, system-ui, sans-serif; color: #00005F; background: #FFC800; border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; box-shadow: 0 3px 0 #C99B00; }
  .dh-more:hover { background: #FFD23A; }
}

@media (min-width: 701px) { .dh-tabs .lang-dd .lang-menu { z-index: 90; } .dh-hero { z-index: 0; } }

/* ══════════ homepage split (2026-09-08): the argument sections moved to why.html / evidence.html / team.html / products.html; the homepage keeps teaser cards ══════════ */
.deep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.deep { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #E3E5EC; border-radius: 18px; padding: 20px 18px 18px; text-decoration: none; color: #151515; box-shadow: 0 2px 10px rgba(0,0,95,.05); transition: transform .15s, box-shadow .15s; min-width: 0; }
.deep:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,95,.12); }
.deep img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 6px; }
.deep b { font: 800 18px Inter, system-ui, sans-serif; color: #00005F; }
.deep small { font: 500 14px/1.4 Inter, system-ui, sans-serif; color: #444; }
.deep u { margin-top: auto; padding-top: 8px; font: 700 14px Inter, system-ui, sans-serif; color: #1E5BFF; text-decoration: none; }
@media (max-width: 900px) { .deep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .deep-grid { grid-template-columns: 1fr; } }
.why-more > section { padding: 44px 0 40px; border-top: 1px solid #E3E5EC; }
.why-more .sect-k, .ev-page .sect-k, #doctor .sect-k { font: 700 11.5px/1 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #FF7801; margin-bottom: 8px; }
.why-more h2, #doctor h2 { font: 800 clamp(26px, 3.2vw, 38px)/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #00005F; margin: 0 0 12px; }
.ev-page { padding: 40px 0 20px; }
.ev-page h2 { font: 800 clamp(28px, 3.6vw, 44px)/1.08 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #00005F; margin: 0 0 22px; }
#doctor { padding: 36px 0 44px; border-top: 1px solid #E3E5EC; }
.find-wrap { margin: 0 0 16px; width: 100%; }
.find-wrap > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #E3E5EC; border-radius: 14px; padding: 14px 18px; }
.find-wrap > summary::-webkit-details-marker { display: none; }
.find-wrap > summary::before { content: "›"; font: 800 22px Inter, sans-serif; color: #FF7801; transition: transform .15s; }
.find-wrap[open] > summary::before { transform: rotate(90deg); }
.find-wrap > summary b { font: 800 15px Inter, system-ui, sans-serif; color: #00005F; }
.find-wrap > summary span { font: 500 13.5px Inter, system-ui, sans-serif; color: #666; }
.find-wrap > .wrap { padding-top: 18px; }
/* Was edge-to-edge at every width (Willis 2026-09-08 "Amazon-style use of the screen") — Willis 2026-09-12,
   pointing at this exact row: "you missed [this section]... when you move the split dragger they are not
   positioning obeying" — this category-tabs row needs to follow the page-width splitter like everything
   else now, so it's back on --max-grid instead of max-width:none. */
@media (min-width: 701px) {
  #d-home .dh-tabs { max-width: var(--max-grid); padding-inline: 20px; }
  #d-home .dh-tabs { padding: 0 12px; }
  .dh-avail { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .dh-hero { min-height: 360px; }
}
/* was max-width:none here (701-1099px only stayed edge-to-edge) — removed per "every single section... top to
   bottom should respect the master drag splitter system" (Willis 2026-09-12); .dh-wrap now just inherits
   max-width:var(--max-grid) from the base .wrap class at every width, same as everywhere else on the site. */
@media (min-width: 1500px) { .dh-avail { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .dh-do { gap: 20px; } }

/* ══════════ colour tile row on the desktop store front (from the big store's front page; palette Willis pasted 2026-09-08) ══════════ */
@media (min-width: 0) {  /* tile rules apply at every width: the phone home clones the tile row (2026-09-09) */
  .dh-tiles-wrap { position: relative; margin-bottom: 8px; }
  .dh-tiles { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .dh-tiles::-webkit-scrollbar { display: none; }
  .dtile { flex: 0 0 370px; height: 560px; border-radius: 14px; padding: 24px 22px 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: #fff; scroll-snap-align: start; transition: transform .2s; }
  .dtile:hover { transform: translateY(-2px); }
  .dtile.t-blue { background: #0972D3; } .dtile.t-violet { background: #8B5FBF; } .dtile.t-indigo { background: #5B3E96; } .dtile.t-navy { background: #00005F; }
  .dtile.t-lime { background: #D4E94A; color: #151515; } .dtile.t-stone { background: #E8E6E1; color: #151515; }
  .dt-eye { font: 500 19px/1.2 Inter, system-ui, sans-serif; margin-bottom: 6px; }
  .dt-h { font: 800 clamp(30px, 2.4vw, 38px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -.02em; }
  .dt-sub { font: 500 18px/1.3 Inter, system-ui, sans-serif; margin-top: 10px; opacity: .92; }
  .dt-pill { align-self: flex-start; margin-top: 14px; background: #FFC800; color: #00005F; font: 800 14px Inter, system-ui, sans-serif; padding: 9px 16px; border-radius: 999px; }
  .dt-mark { margin-top: 12px; font: 800 24px/1 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #00005F; }
  .dt-art { position: absolute; left: 20px; right: 20px; bottom: 54px; height: 300px; display: flex; align-items: flex-end; justify-content: center; gap: 0; }
  .dt-art img { max-height: 100%; width: auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.28)); }
  .dt-art.art-2 img:first-child { width: 58%; transform: rotate(-6deg) translateX(8%); z-index: 1; } .dt-art.art-2 img:last-child { width: 58%; transform: rotate(5deg) translateX(-8%) translateY(-12px); }
  .dt-art.art-2.low { bottom: 40px; }
  .dt-art.art-1 img { width: 78%; } .dt-art.art-1.tilt img { transform: rotate(-4deg); }
  .dt-art.art-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 330px; bottom: 22px; }
  .dt-art.art-grid i { background: #fff; border-radius: 12px; display: grid; place-items: center; overflow: hidden; padding: 8px; }
  .dt-art.art-grid img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
  .dt-foot { position: absolute; left: 22px; bottom: 20px; font: 600 13px Inter, system-ui, sans-serif; opacity: .9; }
  .dt-play { position: absolute; left: 18px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.72); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
  .dt-play svg { width: 18px; height: 18px; fill: #fff; }
  .dtile .dt-play ~ .dt-foot, .dtile .dt-foot ~ .dt-play + .dt-foot { left: 70px; }
  .dh-tn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 100px; border: 0; background: #fff; color: #151515; font: 500 34px/1 Inter, sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 2; }
  .dh-tn.prev { left: 0; border-radius: 0 12px 12px 0; } .dh-tn.next { right: 0; border-radius: 12px 0 0 12px; }
  .dh-tn:hover { background: #F6F7FA; }
}
@media (min-width: 701px) and (max-width: 1000px) { .dtile { flex-basis: 300px; height: 480px; } .dt-art { height: 230px; } .dt-art.art-grid { height: 250px; } }

/* "Available now" cards, results-page style: uniform grey picture well, red deal-style badge, big price with superscript cents, yellow pill (Willis 2026-09-08) */
@media (min-width: 701px) {
  .dh-avail { gap: 18px 14px; }
  .dh-card { gap: 3px; border: 0; border-radius: 10px; padding: 10px 10px 12px; box-shadow: none; background: #fff; }
  .dh-card:hover { transform: none; box-shadow: 0 6px 20px rgba(0,0,95,.10); }
  .dh-live { display: none; }
  .dh-img { aspect-ratio: 1; margin: 0 0 10px; background: #F7F7F7; border-radius: 8px; }
  .dh-img img { max-width: 84%; max-height: 84%; filter: drop-shadow(0 8px 14px rgba(0,0,95,.18)); mix-blend-mode: multiply; }
  .dh-badges { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
  .dh-badge { font: 800 12px Inter, system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #fff; background: #CC0C39; border-radius: 3px; padding: 4px 6px; }
  .dh-badge.soon { background: #D70000; }
  .dh-badge-t { font: 700 13px Inter, system-ui, sans-serif; color: #CC0C39; }
  .dh-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; font: 800 26px/1 Inter, system-ui, sans-serif; color: #151515; }
  .dh-amt sup { font-size: 13px; font-weight: 700; vertical-align: top; position: relative; top: 2px; margin: 0 1px; }
  .dh-amt-t { font: 700 16px Inter, system-ui, sans-serif; }
  .dh-price em { font: 500 13px Inter, system-ui, sans-serif; color: #565959; font-style: normal; }
  .dh-card b { font: 700 15px/1.3 Inter, system-ui, sans-serif; color: #0F1111; }
  .dh-card small { font: 400 14px/1.35 Inter, system-ui, sans-serif; color: #565959; min-height: 0; }
  .dh-view { margin-top: 10px; border: 0; border-radius: 999px; padding: 9px 12px; background: #FFD814; color: #0F1111; font: 700 13.5px Inter, system-ui, sans-serif; box-shadow: 0 2px 5px rgba(15,17,17,.15); }
  .dh-card:hover .dh-view { background: #F7CA00; color: #0F1111; }
  .dh-soon { display: none; }
}

/* picture fills the well, same size on every card, with the yellow corner button (Willis 2026-09-08 "like this big, all the same size") */
@media (min-width: 701px) {
  .dh-img { position: relative; display: block; aspect-ratio: 1; width: 100%; margin: 0 0 12px; background: #F7F7F7; border-radius: 8px; overflow: hidden; }
  .dh-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; padding: 4%; box-sizing: border-box; filter: none; mix-blend-mode: multiply; }
  .dh-plus { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: #FFD814; color: #0F1111; display: grid; place-items: center; font: 500 28px/1 Inter, system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
  .dh-card:hover .dh-plus { background: #F7CA00; }
}

/* tile row at 70% (Willis 2026-09-08 "reduce the size of this 30%") */
@media (min-width: 0) {  /* tile rules apply at every width: the phone home clones the tile row (2026-09-09) */
  .dtile { flex-basis: 260px; height: 392px; padding: 17px 16px 16px; border-radius: 12px; }
  .dt-eye { font-size: 14px; margin-bottom: 4px; }
  .dt-h { font-size: clamp(21px, 1.7vw, 26px); overflow-wrap: anywhere; }
  .dt-sub { font-size: 13.5px; margin-top: 7px; }
  .dt-pill { margin-top: 10px; font-size: 12px; padding: 7px 12px; }
  .dt-mark { margin-top: 8px; font-size: 17px; }
  .dt-art { left: 14px; right: 14px; bottom: 38px; height: 210px; }
  .dt-art.art-2 img:last-child { transform: rotate(5deg) translateX(-8%) translateY(-8px); }
  .dt-art.art-2.low { bottom: 28px; }
  .dt-art.art-grid { height: 230px; gap: 7px; bottom: 16px; }
  .dt-art.art-grid i { border-radius: 9px; padding: 6px; }
  .dt-foot { left: 16px; bottom: 14px; font-size: 11px; }
  .dt-play { left: 14px; bottom: 12px; width: 32px; height: 32px; }
  .dt-play svg { width: 14px; height: 14px; }
  .dtile .dt-play ~ .dt-foot { left: 54px; }
  .dh-tn { width: 38px; height: 72px; font-size: 28px; }
}
@media (min-width: 701px) and (max-width: 1000px) { .dtile { flex-basis: 230px; height: 350px; } .dt-art { height: 170px; } .dt-art.art-grid { height: 190px; } }

/* box art keeps its proportions inside the tiles (was stretched: fixed width + capped height) */
@media (min-width: 0) {  /* tile rules apply at every width: the phone home clones the tile row (2026-09-09) */
  .dt-art img { width: auto !important; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
  .dt-art.art-1 img { max-width: 78%; }
  .dt-art.art-2 img:first-child, .dt-art.art-2 img:last-child { max-width: 58%; }
  .dtile:has(.dt-play) .dt-foot { left: 54px; }
}

/* ══════════ MUSIC band — dark, rows of tiles with arrows (the music-service front-page pattern) ══════════ */
.lmusic { background: #0B0D1A; color: #fff; padding: 26px clamp(22px, 4vw, 56px) 30px; margin: 6px 0 18px; }
/* was max-width:none (Willis 2026-09-12: "this section also does not follow margin container") — the dark
   background is fine full-bleed (like the header), but the actual content — headings, track cards, album
   circles — now caps at the same --max-grid column as the rest of the site, matching how every other full-bleed
   section (.feed-wide > section:not(#shelf)) already puts fluid padding on the section and centers its .wrap. */
.lm-in { max-width: var(--max-grid); margin: 0 auto; }
/* Willis 2026-09-12: "but this should have bentobox container" — the section itself also needs to sit as a
   contained, rounded card (like every .feed-wide section gets for free from its ancestor .wrap) instead of a
   full-bleed strip, since .lmusic has no such ancestor. Desktop/tablet only — mobile keeps the edge-to-edge
   band set in the @media(max-width:700px) block below, matching the #d-home card breakpoint precedent. */
@media (min-width: 701px) { .lmusic { max-width: var(--max-grid); margin: 22px auto; border-radius: 22px; } }
.lm-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.lm-brand { font: 800 15px 'Space Mono', monospace; letter-spacing: .12em; color: #FFC800; }
.lm-sub { font: 500 14px Inter, system-ui, sans-serif; color: #C9CCE6; }
.lm-apple { margin-left: auto; font: 700 13px Inter, system-ui, sans-serif; color: #0B0D1A; background: #fff; border-radius: 999px; padding: 9px 14px; text-decoration: none; }
.lm-apple:hover { background: #FFC800; }
.lm-row { margin-bottom: 22px; }
.lm-rh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lm-rh h2, .lm-rh h3 { margin: 0; font: 800 22px/1.1 Inter, system-ui, sans-serif; color: #fff; }
.lm-rh h3 { font-size: 20px; }
.lm-nav { margin-left: auto; display: flex; gap: 6px; }
.lm-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: 500 20px/1 Inter, sans-serif; cursor: pointer; }
.lm-nav button:hover { background: rgba(255,255,255,.16); }
.lm-all { font: 800 12px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 9px 16px; text-decoration: none; }
.lm-all:hover { background: #fff; color: #0B0D1A; }
.lm-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.lm-scroll::-webkit-scrollbar { display: none; }
.lm-tile { flex: 0 0 200px; height: 200px; border: 0; border-radius: 10px; position: relative; padding: 16px; text-align: left; color: #fff; cursor: pointer; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .15s; overflow: hidden; }
.lm-tile:hover { transform: translateY(-3px); }
.lm-tile .lm-tt { font: 900 clamp(18px, 1.4vw, 22px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -.02em; text-shadow: 0 2px 8px rgba(0,0,0,.35); margin-bottom: 6px; }
.lm-tile .lm-meta { font: 600 11.5px 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.lm-tile .lm-play { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; font-size: 15px; }
.lm-tile.now { outline: 3px solid #FFC800; outline-offset: 2px; }
.lm-tile.now .lm-play { background: #FFC800; color: #0B0D1A; }
.lm-circle { flex: 0 0 170px; text-decoration: none; color: #fff; text-align: center; scroll-snap-align: start; }
.lm-disc { display: grid; place-items: center; width: 170px; height: 170px; border-radius: 50%; margin: 0 auto 10px; box-shadow: 0 10px 26px rgba(0,0,0,.45); transition: transform .15s; }
.lm-circle:hover .lm-disc { transform: scale(1.04); }
.lm-disc i { font: 900 44px Inter, system-ui, sans-serif; font-style: normal; letter-spacing: -.04em; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.lm-circle b { display: block; font: 700 15px Inter, system-ui, sans-serif; }
.lm-circle small { display: block; font: 500 12px Inter, system-ui, sans-serif; color: #C9CCE6; }
.lm-tool { flex: 0 0 200px; text-decoration: none; color: #fff; scroll-snap-align: start; }
.lm-art { display: grid; place-items: center; width: 200px; height: 200px; border-radius: 10px; background: #1B1F33; margin-bottom: 10px; overflow: hidden; }
.lm-art img { max-width: 86%; max-height: 86%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); transition: transform .15s; }
.lm-tool:hover .lm-art img { transform: scale(1.04); }
.lm-tool b { display: block; font: 700 15px Inter, system-ui, sans-serif; }
.lm-tool small { display: block; font: 500 12.5px Inter, system-ui, sans-serif; color: #C9CCE6; }
@media (max-width: 700px) {
  .lmusic { padding: 20px 16px 22px; margin: 0 0 12px; }
  .lm-apple { margin-left: 0; }
  .lm-nav { display: none; }
  .lm-tile, .lm-tool, .lm-art { flex-basis: 150px; width: 150px; height: 150px; }
  .lm-tool { height: auto; } .lm-circle { flex-basis: 130px; } .lm-disc { width: 130px; height: 130px; } .lm-disc i { font-size: 34px; }
  .lm-tile .lm-tt { font-size: 16px; }
}

/* mild comic motion on the tile row (Willis 2026-09-08 "mild rotating comic design or effects… repeating") — compositor-only, off under reduced motion */
@media (min-width: 0) {  /* tile rules apply at every width: the phone home clones the tile row (2026-09-09) */
  @keyframes dt-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-7px) rotate(calc(var(--r, 0deg) + 1.5deg)); } }
  @keyframes dt-float2 { 0%, 100% { transform: translateY(-4px) rotate(var(--r, 0deg)); } 50% { transform: translateY(4px) rotate(calc(var(--r, 0deg) - 1.5deg)); } }
  @keyframes dt-wiggle { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
  @keyframes dt-spin { to { transform: rotate(360deg); } }
  @keyframes dt-twinkle { 0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); } 50% { opacity: .95; transform: scale(1.15) rotate(25deg); } }
  @keyframes dt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
  @keyframes dt-shine { 0% { transform: translateX(-140%) skewX(-18deg); } 60%, 100% { transform: translateX(240%) skewX(-18deg); } }
  @keyframes dt-drift { to { background-position: 40px 40px; } }
  /* boxes bob, alternating */
  .dt-art.art-2 img:first-child { --r: -6deg; animation: dt-float 5.5s ease-in-out infinite; }
  .dt-art.art-2 img:last-child { --r: 5deg; animation: dt-float2 6.5s ease-in-out infinite; }
  .dt-art.art-1 img { --r: 0deg; animation: dt-float 6s ease-in-out infinite; }
  .dt-art.art-1.tilt img { --r: -4deg; }
  /* kids grid cards wiggle in turn */
  .dt-art.art-grid i { animation: dt-wiggle 4s ease-in-out infinite; }
  .dt-art.art-grid i:nth-child(2) { animation-delay: 1s; } .dt-art.art-grid i:nth-child(3) { animation-delay: 2s; } .dt-art.art-grid i:nth-child(4) { animation-delay: 3s; }
  /* comic sunburst behind the lime tile, halftone dots drifting on the indigo tile */
  .dtile.t-lime::before { content: ""; position: absolute; left: 50%; top: 62%; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: repeating-conic-gradient(rgba(255,255,255,.35) 0 6deg, transparent 6deg 14deg); border-radius: 50%; animation: dt-spin 60s linear infinite; pointer-events: none; }
  .dtile.t-indigo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 2px) 0 0 / 20px 20px; animation: dt-drift 6s linear infinite; pointer-events: none; }
  .dtile.t-stone::before { content: ""; position: absolute; left: 50%; top: 66%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,95,.10), transparent 70%); pointer-events: none; }
  .dtile > .dt-eye, .dtile > .dt-h, .dtile > .dt-sub, .dtile > .dt-pill, .dtile > .dt-mark, .dtile > .dt-art, .dtile > .dt-foot, .dtile > .dt-play { position: relative; z-index: 1; }
  .dtile > .dt-art { position: absolute; }
  /* shine sweep across the EMR box, play button pulses */
  .dtile.t-stone .dt-art::after { content: ""; position: absolute; left: 20%; top: 0; width: 18%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: dt-shine 5s ease-in-out infinite; pointer-events: none; }
  .dt-play { animation: dt-pulse 2.4s ease-out infinite; }
  /* sparkles */
  .dt-spark { position: absolute; color: #FFC800; font-style: normal; line-height: 1; opacity: 0; animation: dt-twinkle 3s ease-in-out infinite; pointer-events: none; z-index: 0; text-shadow: 0 0 8px rgba(255,200,0,.6); }
  .dtile.t-blue .dt-spark { color: #fff; }
  @media (prefers-reduced-motion: reduce) { .dtile *, .dtile::before, .dtile .dt-art::after { animation: none !important; } }
}

/* tile art in normal flow on a translucent panel — nothing overlaps the copy, the boxes read better (Willis 2026-09-08) */
@media (min-width: 0) {  /* tile rules apply at every width: the phone home clones the tile row (2026-09-09) */
  .dtile { display: flex; flex-direction: column; }
  .dtile > .dt-art { position: relative; left: auto; right: auto; bottom: auto; height: auto; flex: 1 1 auto; min-height: 0; margin: 12px -4px 0; padding: 10px; background: rgba(255,255,255,.16); border-radius: 12px; align-items: center; justify-content: center; overflow: hidden; }
  .dtile.t-lime > .dt-art, .dtile.t-stone > .dt-art { background: rgba(255,255,255,.45); }
  .dt-art img { max-height: 100%; }
  .dt-art.art-2 img:first-child { max-width: 56%; transform: rotate(-6deg) translateX(10%); }
  .dt-art.art-2 img:last-child { max-width: 56%; transform: rotate(5deg) translateX(-10%); }
  .dt-art.art-grid { height: auto; bottom: auto; gap: 8px; padding: 10px; }
  .dt-art.art-grid i { min-height: 0; }
  .dt-foot { position: static; margin-top: 10px; }
  .dtile:has(.dt-play) .dt-foot { left: auto; padding-left: 40px; }
  .dt-play { left: 16px; bottom: 15px; }
  .dt-spark { opacity: 0; z-index: 2; }
}

/* ── tile anatomy, final: copy on top (own layer), art panel fills the middle, footnote at the bottom. Nothing absolute inside the tile except decorations. ── */
@media (min-width: 0) {  /* tile rules apply at every width: the phone home clones the tile row (2026-09-09) */
  .dtile { display: flex; flex-direction: column; gap: 0; }
  .dtile > .dt-copy { position: relative; z-index: 3; display: flex; flex-direction: column; flex: none; }
  .dtile > .dt-copy > .dt-pill { align-self: flex-start; }
  .dtile > .dt-art { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; margin: 12px -4px 0; padding: 0; display: block; overflow: hidden; background: rgba(255,255,255,.16); border-radius: 12px; left: auto; right: auto; bottom: auto; height: auto; }
  .dtile.t-lime > .dt-art, .dtile.t-stone > .dt-art { background: rgba(255,255,255,.45); }
  .dtile > .dt-art img { position: absolute; width: auto !important; height: 82%; max-width: 60%; max-height: none; object-fit: contain; bottom: 6%; }
  .dtile > .dt-art.art-1 img { left: 50%; margin-left: -30%; max-width: 60%; height: 88%; bottom: 6%; }
  .dtile > .dt-art.art-1.tilt img { --r: -4deg; }
  .dtile > .dt-art.art-2 img:first-child { left: 6%; --r: -6deg; }
  .dtile > .dt-art.art-2 img:last-child { right: 6%; --r: 5deg; height: 78%; bottom: 10%; }
  .dtile > .dt-art.art-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 10px; }
  .dtile > .dt-art.art-grid i { position: relative; min-height: 0; background: #fff; border-radius: 9px; overflow: hidden; }
  .dtile > .dt-art.art-grid img { position: absolute; inset: 6%; width: 88% !important; height: 88%; max-width: none; margin: 0; left: 6%; bottom: auto; object-fit: contain; }
  .dtile > .dt-foot { position: relative; z-index: 3; flex: none; margin-top: 10px; display: flex; align-items: center; gap: 10px; padding-left: 0; left: auto; bottom: auto; font: 600 11.5px Inter, system-ui, sans-serif; opacity: .95; }
  .dtile > .dt-foot .dt-play { position: static; width: 30px; height: 30px; flex: none; }
  .dtile:has(.dt-play) .dt-foot { padding-left: 0; }
  .dtile .dt-spark { z-index: 2; }
  .dtile.t-stone .dt-art::after { z-index: 2; }
}

/* kids tile: the four picture cards size themselves as squares (the grid rows had no height to split) */
@media (min-width: 0) {  /* tile rules apply at every width: the phone home clones the tile row (2026-09-09) */
  .dtile > .dt-art.art-grid { align-content: center; grid-template-rows: none; grid-auto-rows: auto; }
  .dtile > .dt-art.art-grid i { aspect-ratio: 1; min-height: 0; }
}

/* comic backgrounds on the "What do you want to do?" tiles and the "Coming next" panel (Willis 2026-09-08): sunburst, halftone dots, diagonal stripes, floating icons */
@media (min-width: 701px) {
  .dh-tile { position: relative; overflow: hidden; }
  .dh-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .dh-tile.t-sky::before { background: radial-gradient(rgba(30,91,255,.18) 1.5px, transparent 2px) 0 0 / 16px 16px; animation: dt-drift 7s linear infinite; }
  .dh-tile.t-orange::before { left: 55%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; inset: auto; background: repeating-conic-gradient(rgba(255,120,1,.16) 0 7deg, transparent 7deg 16deg); border-radius: 50%; animation: dt-spin 70s linear infinite; }
  .dh-tile.t-lav::before { background: repeating-linear-gradient(-45deg, rgba(31,122,70,.10) 0 10px, transparent 10px 24px); background-size: 34px 34px; animation: dt-drift 5s linear infinite; }
  .dh-tile > * { position: relative; z-index: 1; }
  .dh-tile img { --r: 0deg; animation: dt-float 6s ease-in-out infinite; }
  .dh-tile.t-orange img { animation: dt-spin 24s linear infinite; }
  .dh-tile.t-lav img { --r: 8deg; animation-duration: 7s; }
  .dh-next { position: relative; overflow: hidden; }
  .dh-next::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(0,0,95,.10) 1.6px, transparent 2.2px) 0 0 / 22px 22px; animation: dt-drift 8s linear infinite; }
  .dh-next::after { content: "✦"; position: absolute; right: 40px; top: 18px; font: 900 44px Inter, sans-serif; color: #FFC800; text-shadow: 0 0 14px rgba(255,200,0,.6); animation: dt-twinkle 3s ease-in-out infinite; pointer-events: none; }
  .dh-next > * { position: relative; z-index: 1; }
  .dh-nx img { animation: dt-float 6.5s ease-in-out infinite; }
  .dh-nx + .dh-nx img { animation-delay: 1.5s; }
  @media (prefers-reduced-motion: reduce) { .dh-tile::before, .dh-tile img, .dh-next::before, .dh-next::after, .dh-nx img { animation: none !important; } }
}

/* ══════════ MUSIC PAGE — "Don't rent music. Buy music." Deal-night palette: black ground, orange CTA, crimson band, pink / teal / gold tiles ══════════ */
.mpage { background: #0F0F0F; color: #fff; }
.mp-in { padding: 0 20px; }
.mp-hero { padding: 34px 0 10px; background: radial-gradient(ellipse at 20% 0%, rgba(255,153,0,.22), transparent 55%), radial-gradient(ellipse at 90% 20%, rgba(230,0,122,.18), transparent 50%), #000; }
.mp-eye { margin: 0 0 8px; font: 700 12px/1 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #FF9900; }
.mp-hero h1 { margin: 0 0 14px; font: 900 clamp(38px, 5.6vw, 76px)/.98 Inter, system-ui, sans-serif; letter-spacing: -.035em; color: #fff; }
.mp-hero h1 span { color: #FF9900; }
.mp-sub { max-width: 640px; margin: 0 0 20px; font: 500 17px/1.45 Inter, system-ui, sans-serif; color: #D6D6D6; }
.mp-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.mp-cta { display: inline-flex; align-items: center; gap: 10px; background: #FF9900; color: #0F0F0F; font: 800 15.5px Inter, system-ui, sans-serif; padding: 15px 22px; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 22px rgba(255,153,0,.35); }
.mp-cta:hover { background: #FFAD33; }
.mp-ghost { background: none; border: 2px solid rgba(255,255,255,.4); color: #fff; font: 700 15px Inter, system-ui, sans-serif; padding: 13px 18px; border-radius: 12px; cursor: pointer; }
.mp-ghost:hover { border-color: #fff; }
.mp-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0 20px 26px; }
.mp-tile { position: relative; min-height: 250px; border-radius: 14px; padding: 16px; text-decoration: none; color: #fff; display: flex; flex-direction: column; overflow: hidden; transition: transform .15s; }
.mp-tile:hover { transform: translateY(-3px); }
.mp-tile .mp-tag { font: 800 11px 'Space Mono', monospace; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.mp-tile b { font: 900 20px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; margin-bottom: 6px; }
.mp-tile small { font: 500 12.5px/1.35 Inter, system-ui, sans-serif; opacity: .9; }
.mp-tile img { margin-top: auto; align-self: center; max-height: 46%; max-width: 78%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); animation: dt-float 6s ease-in-out infinite; }
.mp-tile .mp-big { margin-top: auto; align-self: center; font: 900 96px/1 Inter, sans-serif; color: rgba(0,0,0,.35); }
.mp-tile.k-orange { background: linear-gradient(160deg, #FF9900, #E36A00); color: #0F0F0F; }
.mp-tile.k-pink { background: linear-gradient(160deg, #E6007A, #8A0048); }
.mp-tile.k-teal { background: linear-gradient(160deg, #145C5E, #0F3D3E); }
.mp-tile.k-gold { background: linear-gradient(160deg, #FFC72C, #E5A900); color: #0F0F0F; }
.mp-tile.k-black { background: linear-gradient(160deg, #262626, #0F0F0F); border: 1px solid rgba(255,255,255,.12); }
.mp-tile.k-red { background: linear-gradient(160deg, #E31C23, #8E0F14); }
.mp-band { background: #E31C23; color: #fff; text-align: center; font: 600 15px Inter, system-ui, sans-serif; padding: 13px 20px; }
.mp-band b { font-weight: 900; margin-right: 8px; }
.mp-radio { margin: 0; }
.mp-shop { padding: 30px 0 46px; }
.mp-h2 { margin: 0 0 16px; font: 900 30px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #fff; }
.mp-all { color: #FF9900; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 14px; margin-top: 16px; }
.mpage .dh-card { display: flex; flex-direction: column; gap: 3px; background: #1A1A1A; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 10px 12px; text-decoration: none; color: #fff; }
.mpage .dh-card:hover { box-shadow: 0 10px 28px rgba(255,153,0,.18); }
.mpage .dh-img { position: relative; display: block; aspect-ratio: 1; width: 100%; margin: 0 0 12px; background: #fff; border-radius: 8px; overflow: hidden; }
.mpage .dh-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; box-sizing: border-box; }
.mpage .dh-plus { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: #FF9900; color: #0F0F0F; display: grid; place-items: center; font: 500 28px/1 Inter, sans-serif; }
.mpage .dh-badges { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.mpage .dh-badge { font: 800 12px Inter, system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #fff; background: #E31C23; border-radius: 3px; padding: 4px 6px; }
.mpage .dh-badge-t { font: 700 13px Inter, system-ui, sans-serif; color: #FF6B6B; }
.mpage .dh-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; font: 800 26px/1 Inter, system-ui, sans-serif; color: #fff; }
.mpage .dh-amt sup { font-size: 13px; font-weight: 700; vertical-align: top; position: relative; top: 2px; margin: 0 1px; }
.mpage .dh-amt-t { font: 700 16px Inter, system-ui, sans-serif; }
.mpage .dh-price em { font: 500 13px Inter, system-ui, sans-serif; color: #BDBDBD; font-style: normal; }
.mpage .dh-card b { font: 700 15px/1.3 Inter, system-ui, sans-serif; color: #fff; }
.mpage .dh-card small { font: 400 14px/1.35 Inter, system-ui, sans-serif; color: #BDBDBD; }
.mpage .dh-view { margin-top: 10px; display: block; text-align: center; border-radius: 999px; padding: 10px 12px; background: #FF9900; color: #0F0F0F; font: 800 13.5px Inter, system-ui, sans-serif; }
@media (max-width: 1100px) { .mp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 20px; } .mp-tile { min-height: 210px; padding: 14px; } .mp-in { padding: 0 16px; } .mp-hero { padding-top: 24px; } .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* "What do you want to do?" + "Coming next" in the pasted palette: blue #0972D3, lime #D4E94A, violet #8B5FBF; indigo #5B3E96 panel (Willis 2026-09-08) */
@media (min-width: 701px) {
  .dh-tile.t-sky { background: #0972D3; color: #fff; }
  .dh-tile.t-orange { background: #D4E94A; color: #151515; }
  .dh-tile.t-lav { background: #8B5FBF; color: #fff; }
  .dh-tile.t-sky b, .dh-tile.t-lav b { color: #fff; } .dh-tile.t-sky small, .dh-tile.t-lav small { color: rgba(255,255,255,.88); }
  .dh-tile.t-orange b { color: #0F0F0F; } .dh-tile.t-orange small { color: #333; }
  .dh-tile.t-sky::before { background: radial-gradient(rgba(255,255,255,.22) 1.5px, transparent 2px) 0 0 / 16px 16px; }
  .dh-tile.t-orange::before { background: repeating-conic-gradient(rgba(255,255,255,.35) 0 7deg, transparent 7deg 16deg); }
  .dh-tile.t-lav::before { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 10px, transparent 10px 24px); background-size: 34px 34px; }
  .dh-tile .dh-chev { background: #FFC72C; color: #0F0F0F; }
  .dh-next { background: #5B3E96; color: #fff; }
  .dh-next .dh-h { color: #fff; }
  .dh-next .dh-all { color: #FFC72C; }
  .dh-next::before { background: radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 2.2px) 0 0 / 22px 22px; }
  .dh-next::after { color: #FFC72C; }
  .dh-nx { border-right-color: rgba(255,255,255,.22); }
  .dh-nx + .dh-nx { border-top-color: rgba(255,255,255,.22); }
  .dh-nx b { color: #fff; } .dh-nx small { color: rgba(255,255,255,.8); } .dh-nx u { color: #FFC72C; }
}
/* product picture effects on the shelf cards: lift + tilt + shine on hover; a slow float on every third card while idle */
@media (min-width: 701px) {
  @keyframes dh-shine { 0% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
  .dh-img { perspective: 700px; }
  .dh-img img { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; will-change: transform; }
  .dh-card:hover .dh-img img { transform: translateY(-6px) rotateY(-10deg) rotateX(4deg) scale(1.05); filter: drop-shadow(0 18px 24px rgba(0,0,95,.28)); }
  .dh-img::after { content: ""; position: absolute; top: 0; left: 0; width: 28%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-160%) skewX(-20deg); pointer-events: none; }
  .dh-card:hover .dh-img::after { animation: dh-shine .9s ease-out; }
  .dh-avail .dh-card:nth-child(3n+2) .dh-img img { animation: dt-float 7s ease-in-out infinite; }
  .dh-avail .dh-card:nth-child(3n+2):hover .dh-img img { animation: none; }
  @media (prefers-reduced-motion: reduce) { .dh-img img, .dh-img::after { animation: none !important; transition: none; } }
}

/* music hero: comic motion in the background — turning sunburst, drifting halftone, rising notes, a bouncing equalizer (Willis 2026-09-08) */
.mp-hero { position: relative; overflow: hidden; }
.mp-hero > .mp-in, .mp-hero > .mp-tiles { position: relative; z-index: 2; }
.mp-fx { position: absolute; pointer-events: none; z-index: 0; }
.mp-burst { left: 30%; top: 40%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,153,0,.13) 0 5deg, transparent 5deg 13deg); animation: dt-spin 90s linear infinite; }
.mp-dots { inset: 0; background: radial-gradient(rgba(230,0,122,.28) 1.6px, transparent 2.2px) 0 0 / 22px 22px; animation: dt-drift 7s linear infinite; mask-image: linear-gradient(90deg, transparent 35%, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 70%); }
@keyframes mp-rise { 0% { transform: translateY(40px) rotate(-8deg); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translateY(-560px) rotate(10deg); opacity: 0; } }
.mp-notes { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.mp-notes i { position: absolute; bottom: -40px; font-style: normal; font-weight: 900; line-height: 1; text-shadow: 0 0 12px rgba(255,153,0,.45); animation: mp-rise 12s linear infinite; }
@keyframes mp-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.mp-eq { position: absolute; right: 40px; bottom: 30px; height: 150px; display: flex; align-items: flex-end; gap: 6px; z-index: 1; pointer-events: none; opacity: .9; }
.mp-eq i { width: 12px; height: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #FFC72C, #FF9900 55%, #E31C23); transform-origin: bottom; animation: mp-eq 1.1s ease-in-out infinite; }
.mp-eq i:nth-child(2n) { animation-duration: .9s; animation-delay: -.3s; } .mp-eq i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -.6s; } .mp-eq i:nth-child(5n) { animation-duration: .7s; animation-delay: -.2s; } .mp-eq i:nth-child(7n) { animation-duration: 1.7s; }
@media (max-width: 900px) { .mp-eq { display: none; } .mp-burst { left: 50%; } }
@media (prefers-reduced-motion: reduce) { .mp-fx, .mp-notes i, .mp-eq i { animation: none !important; } }

.mp-group { margin: 26px 0 8px; }
.mp-gh { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.mp-gh h3 { margin: 0; font: 900 24px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #FF9900; }
.mp-gh p { margin: 0; font: 500 14px Inter, system-ui, sans-serif; color: #BDBDBD; }

/* products page: "Find software for your trade" as a comic banner in the pasted palette — violet ground, gold chevron, halftone drift, sunburst when open (Willis 2026-09-08) */
details#find.find-wrap { background: #8B5FBF; padding: 0; margin: 0 0 18px; border-radius: 16px; position: relative; overflow: hidden; color: #fff; }
details#find.find-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.18) 1.6px, transparent 2.2px) 0 0 / 20px 20px; animation: dt-drift 7s linear infinite; pointer-events: none; }
details#find.find-wrap::after { content: ""; position: absolute; right: -180px; top: -260px; width: 620px; height: 620px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.16) 0 6deg, transparent 6deg 15deg); animation: dt-spin 80s linear infinite; pointer-events: none; }
details#find.find-wrap > summary { position: relative; z-index: 1; background: none; border: 0; border-radius: 0; padding: 18px 22px; gap: 16px; }
details#find.find-wrap > summary::before { content: "›"; width: 34px; height: 34px; border-radius: 50%; background: #FFC72C; color: #0F0F0F; display: grid; place-items: center; font: 900 22px/1 Inter, sans-serif; flex: none; transition: transform .15s; }
details#find.find-wrap[open] > summary::before { transform: rotate(90deg); }
details#find.find-wrap > summary b { color: #fff; font-size: 17px; }
details#find.find-wrap > summary span { color: rgba(255,255,255,.85); }
details#find.find-wrap > summary::after { content: "REQUEST IT"; margin-left: auto; font: 800 11px 'Space Mono', monospace; letter-spacing: .12em; color: #0F0F0F; background: #FFC72C; border-radius: 999px; padding: 7px 12px; flex: none; }
details#find.find-wrap > .wrap { position: relative; z-index: 1; background: #fff; color: var(--text); margin: 0 12px 12px; border-radius: 12px; padding: 22px 22px 8px; }
details#find.find-wrap .sect-k { color: #8B5FBF; }
@media (max-width: 700px) { details#find.find-wrap > summary { padding: 14px 16px; flex-wrap: wrap; } details#find.find-wrap > summary::after { display: none; } }
@media (prefers-reduced-motion: reduce) { details#find.find-wrap::before, details#find.find-wrap::after { animation: none !important; } }

/* team.html#doctor in the pasted palette: black section, teal story panel, crimson "why doctors switch" list, orange and gold accents, comic sunburst + dots (Willis 2026-09-08) */
#doctor { background: #0F0F0F; color: #fff; padding: 44px 0 52px; border-top: 0; position: relative; overflow: hidden; }
#doctor::before { content: ""; position: absolute; left: -200px; top: -300px; width: 900px; height: 900px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,153,0,.12) 0 5deg, transparent 5deg 13deg); animation: dt-spin 90s linear infinite; pointer-events: none; }
#doctor::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(230,0,122,.22) 1.6px, transparent 2.2px) 0 0 / 22px 22px; animation: dt-drift 7s linear infinite; mask-image: linear-gradient(90deg, transparent 40%, #000 80%); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 80%); pointer-events: none; }
#doctor > .wrap { position: relative; z-index: 1; }
#doctor .sect-k { color: #FF9900; }
#doctor h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); }
#doctor .doc-panel { margin-top: 26px; background: #0F3D3E; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.5); border-radius: 22px; overflow: hidden; }
#doctor .doc-story { padding: 36px 34px; }
#doctor .doc-story p { color: rgba(255,255,255,.86); font-size: 15.5px; }
#doctor .doc-story p b { color: #fff; }
#doctor .doc-hook { color: #FFC72C; font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
#doctor .doc-close { color: #fff; }
#doctor .doc-close b { color: #FF9900; }
#doctor .doc-press { color: rgba(255,255,255,.7); }
#doctor .doc-press a { color: #FFC72C; }
#doctor .cites { background: #E31C23; border-left: 0; border-radius: 0; padding: 36px 34px; }
#doctor .cites .t { color: #fff; font-weight: 800; letter-spacing: .18em; }
#doctor .cites li { color: rgba(255,255,255,.88); border-top-color: rgba(255,255,255,.22); font-size: 14px; }
#doctor .cites li b { color: #fff; }
#doctor .cites li:last-child { background: #0F0F0F; margin: 8px -34px -36px; padding: 16px 34px 24px; border-top: 0; }
#doctor .cites li:last-child b { color: #FF9900; }
@media (max-width: 900px) { #doctor .cites li:last-child { margin: 8px -34px -36px; } #doctor::after { display: none; } }
@media (prefers-reduced-motion: reduce) { #doctor::before, #doctor::after { animation: none !important; } }

/* homepage story sections match the store front's width; The idea gets a rent-vs-own panel on its right (Willis 2026-09-08).
   The full-bleed width was originally unconditional (≥701px, no upper bound) — Willis 2026-09-12, pointing at
   "THE IDEA"/"GO DEEPER" running edge to edge: "these section are not obeying the master drag splitter," then
   "every single section include top to bottom should respect the master drag splitter system." So this is no
   longer contained-above-1100px-only like .dh-wrap; it's just var(--max-grid) at every width ≥701px, full stop —
   .fb-shell is display:block on the homepage (rails hidden below), so there's no grid-track minimum to protect. */
@media (min-width: 701px) {
  body:has(#d-home) .fb-shell { max-width: var(--max-grid); }
  body:has(#d-home) .feed-wide > section:not(#shelf):not(#evidence):not(#alerts) { margin-inline: 0; }
  #model .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
  #model .wrap > .sect-k, #model .wrap > h2, #model .wrap > .lead { grid-column: 1; }
  #model .lead { max-width: none; }
  /* Willis 2026-09-12, screenshots of these cards squished with words like "climbs · stop paying," wrapping
     one-per-line. A container-query attempt (measuring .idea-vs's own width to swap in smaller fonts) was
     tried and verified BROKEN: this site's own "Scale to fit" feature applies root.style.zoom, and @container
     thresholds get evaluated in a different coordinate space than the real rendered pixels. Switched to the
     standard `repeat(auto-fit, minmax(Npx, 1fr))` Grid pattern instead — no thresholds relative to zoom, it
     just drops to 1 column (full width) once 2 columns of at least Npx no longer fit. First attempt used
     150px and was STILL broken — verified via real measurement that the .85fr share of #model .wrap's
     1.15fr/.85fr split only gives ~181px per card at the DEFAULT --max-grid (never even touched), and this
     card's actual sentence needs meaningfully more room than that to read in a normal 2-3 lines instead of
     9. Raised to 280px so the auto-fit reliably stacks (clean, full-width, verified-readable) at the current
     default column share, and only shows the two cards side by side once the splitter is dragged wide enough
     to give the .85fr column real room. */
  .idea-vs { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: stretch; position: relative; }
  .vs-rent, .vs-own { border-radius: 18px; padding: 22px 20px; color: #fff; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
  .vs-rent { background: #E31C23; }
  .vs-own { background: #0972D3; }
  .vs-rent::before, .vs-own::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 2px) 0 0 / 16px 16px; animation: dt-drift 7s linear infinite; pointer-events: none; }
  .vs-rent > *, .vs-own > * { position: relative; }
  .vs-k { font: 800 11.5px 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
  .vs-rent > b, .vs-own > b { font: 900 44px/1 Inter, system-ui, sans-serif; letter-spacing: -.03em; }
  .vs-rent > b small, .vs-own > b small { font-size: 18px; font-weight: 700; }
  .vs-rent p, .vs-own p { margin: 0; font: 600 13.5px/1.35 Inter, system-ui, sans-serif; opacity: .92; }
  .vs-tot { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.3); font: 600 13px Inter, system-ui, sans-serif; }
  .vs-tot b { font-weight: 900; }
  .vs-own .vs-tot b { color: #FFC72C; }
  /* taken out of grid flow (position:absolute) so it can't force a 3rd auto-fit track — floats centered
     over the two cards when they're side by side; only shown at real wide viewports (below) since a
     horizontal arrow makes no sense once the cards stack to one column. */
  /* hidden by default, not just below some breakpoint: with the 280px minmax above, these cards now stack
     to one column under most normal conditions (the .85fr column share rarely has 2×280px+gap to spare) —
     a horizontal arrow floating over vertically-stacked cards looks wrong, and there's no reliable zoom-safe
     way to detect "currently 2-up" in pure CSS (see the container-query post-mortem above). Simplest honest
     fix: drop the decorative arrow rather than risk it showing in the wrong state. */
  .vs-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 900 34px Inter, sans-serif; color: #FF7801; display: none; pointer-events: none; }
}
@media (min-width: 701px) and (max-width: 1000px) { #model .wrap { grid-template-columns: 1fr; } .idea-vs { grid-column: 1; grid-row: auto; } }
@media (max-width: 700px) { .idea-vs { margin-top: 16px; } }

/* The doctor (team.html): no eye tiles — the data-bar icon rule was leaking into the sunburst; homepage tile palette instead of the music one (Willis 2026-09-08) */
#doctor { background: #5B3E96; }
#doctor[data-bar]::before, #doctor::before { background-image: none !important; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 5deg, transparent 5deg 13deg) !important; width: 900px; height: 900px; left: -200px; top: -300px; border-radius: 50%; animation: dt-spin 90s linear infinite; }
#doctor::after { background: radial-gradient(rgba(255,255,255,.22) 1.6px, transparent 2.2px) 0 0 / 22px 22px; mask-image: none; -webkit-mask-image: none; opacity: .8; }
#doctor .sect-k { color: #FFC72C; }
#doctor .doc-panel { background: #0972D3; border-color: rgba(255,255,255,.18); }
#doctor .doc-hook { color: #FFC72C; }
#doctor .doc-close b { color: #D4E94A; }
#doctor .doc-press a { color: #FFC72C; }
#doctor .cites { background: #D4E94A; }
#doctor .cites .t { color: #0F0F0F; }
#doctor .cites li { color: #222; border-top-color: rgba(0,0,0,.14); }
#doctor .cites li b { color: #0F0F0F; }
#doctor .cites li:last-child { background: #8B5FBF; color: #fff; }
#doctor .cites li:last-child b { color: #FFC72C; }

/* alerts band: the frame gets the same rounded corners as every other section, no dead space under the dark card (Willis 2026-09-08) */
.feed-wide > #alerts { border-radius: 22px !important; overflow: hidden; padding: 0 !important; margin: 22px 0; }
.feed-wide > #alerts > .wrap { padding: 0; }
#alerts .alerts-band { border-radius: 22px; margin: 0; }
@media (max-width: 700px) { .feed-wide > #alerts { border-radius: 16px !important; } #alerts .alerts-band { border-radius: 16px; } }

/* ══════════ HOW IT WORKS — three comic step tiles in the tile palette, numbered, with motion (Willis 2026-09-08 "think like a super marketing expert") ══════════ */
.how3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; margin-top: 26px; }
.hw { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 24px 24px; color: #fff; display: flex; flex-direction: column; gap: 10px; min-height: 340px; transition: transform .2s; }
.hw:hover { transform: translateY(-4px); }
.hw.t-blue { background: #0972D3; } .hw.t-lime { background: #D4E94A; color: #0F0F0F; } .hw.t-violet { background: #8B5FBF; }
.hw::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hw.t-blue::before { background: radial-gradient(rgba(255,255,255,.22) 1.6px, transparent 2.2px) 0 0 / 18px 18px; animation: dt-drift 7s linear infinite; }
.hw.t-lime::before { left: 50%; top: 40%; width: 620px; height: 620px; margin: -310px 0 0 -310px; inset: auto; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.4) 0 6deg, transparent 6deg 15deg); animation: dt-spin 70s linear infinite; }
.hw.t-violet::before { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 10px, transparent 10px 24px); background-size: 34px 34px; animation: dt-drift 5s linear infinite; }
.hw > * { position: relative; z-index: 1; }
.hw .hw-n { position: absolute; right: 18px; top: 8px; font: 900 120px/1 Inter, system-ui, sans-serif; letter-spacing: -.06em; color: rgba(255,255,255,.22); z-index: 0; }
.hw.t-lime .hw-n { color: rgba(0,0,0,.12); }
.hw img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0,0,0,.35)); animation: dt-float 6s ease-in-out infinite; margin-bottom: 6px; }
.hw:nth-child(3) img { animation-delay: -2s; } .hw:nth-child(5) img { animation-delay: -4s; }
.hw h3 { margin: 0; font: 900 26px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.hw p { margin: 0; font: 500 15px/1.45 Inter, system-ui, sans-serif; opacity: .92; }
.hw .hw-tag { margin-top: auto; align-self: flex-start; background: #FFC72C; color: #0F0F0F; font: 800 12px 'Space Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.hw-arrow { align-self: center; font: 900 40px Inter, sans-serif; color: #FF7801; }
.how-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; padding: 18px 22px; background: #0F0F0F; color: #fff; border-radius: 18px; }
.how-cta b { font: 900 20px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; margin-right: auto; }
.how-cta .dh-cta { display: inline-flex; align-items: center; gap: 10px; background: #FF7801; color: #fff; font: 800 15px Inter, system-ui, sans-serif; padding: 13px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(255,120,1,.35); }
.how-ghost { color: #FFC72C; font: 700 15px Inter, system-ui, sans-serif; text-decoration: none; }
.how-ghost:hover { text-decoration: underline; }
@media (max-width: 1000px) { .how3 { grid-template-columns: 1fr; } .hw-arrow { transform: rotate(90deg); justify-self: center; } .hw { min-height: 0; } }
@media (max-width: 700px) { .hw { border-radius: 16px; padding: 20px 18px; } .hw .hw-n { font-size: 90px; } .hw img { width: 84px; height: 84px; } .hw h3 { font-size: 22px; } .how-cta b { margin-right: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hw::before, .hw img { animation: none !important; } }

/* products page runs the store's full width like the homepage (Willis 2026-09-08): shell to the screen edges, grid fills with as many columns as fit.
   Willis 2026-09-12: "every single section include top to bottom should respect the master drag splitter system."
   Can't just swap in var(--max-grid) here like everywhere else, though — .fb-shell's own grid-template-columns
   (284px minmax(0,650px) 284px, set higher up) needs ~1280px just for its fixed side tracks + gaps, and --max-grid's
   default (1080px) and floor (720px) both sit below that. Below 1280px the grid would overflow/squeeze rather than
   reflow (there's no narrower breakpoint here — that only happens under 1100px, a different code path). So this
   floors at the grid's real minimum and tracks the splitter above it: shrinks/grows with --max-grid once dragged
   past ~1280px, stays pinned at the safe floor below that instead of breaking. */
@media (min-width: 1100px) {
  body:has(.mkt-wrap) .fb-shell { max-width: max(var(--max-grid), 1280px); padding-inline: 20px; }
  .mkt-wrap { border-radius: 14px; }
  .mkt-wrap .mkt-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 20px 14px; }
  .mkt-wrap .cc-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
  .mkt-body { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
}
@media (min-width: 1500px) { .mkt-wrap .mkt-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; } }

/* ══════════ LOOKY TV — the Watch section as a small channel: vertical promo beside the pitch, a scrolling row of product videos, an in-page theater (Willis 2026-09-08) ══════════ */
.feed-wide > #watch { background: #0F0F0F !important; color: #fff; border-color: #0F0F0F !important; }
#watch::before { background: #FF9900 !important; color: #0F0F0F !important; }
.tv { position: relative; }
.tv-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; padding: 8px 0 22px; position: relative; }
.tv-hero::before { content: ""; position: absolute; right: -10%; top: -30%; width: 720px; height: 720px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,153,0,.14) 0 5deg, transparent 5deg 13deg); animation: dt-spin 90s linear infinite; pointer-events: none; }
.tv-hero > * { position: relative; }
.tv-eye { margin: 0 0 8px; font: 800 12px/1 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #FF9900; }
#watch h2 { margin: 0 0 12px; font: 900 clamp(30px, 3.6vw, 48px)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #fff; }
.tv-sub { margin: 0 0 16px; font: 500 16.5px/1.45 Inter, system-ui, sans-serif; color: #D6D6D6; max-width: 560px; }
.tv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tv-chips span { font: 700 12px Inter, system-ui, sans-serif; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 12px; }
.tv-copy .dh-cta { display: inline-flex; align-items: center; gap: 10px; background: #FF7801; color: #fff; font: 800 15px Inter, system-ui, sans-serif; padding: 13px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(255,120,1,.35); }
.tv-phone { justify-self: center; width: min(100%, 330px); }
.tv-phone .pd-video-frame { border-radius: 26px; border: 8px solid #1A1A1A; box-shadow: 0 30px 70px rgba(0,0,0,.6); background: #000; overflow: hidden; }
.tv-phone video { display: block; width: 100%; height: auto; }
.tv-rh { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.tv-rh h3 { margin: 0; font: 800 20px Inter, system-ui, sans-serif; color: #fff; }
.tv-rh .lm-nav { margin-left: auto; }
.tv-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.tv-row::-webkit-scrollbar { display: none; }
.tv-card { flex: 0 0 240px; border: 0; padding: 0; background: none; text-align: left; color: #fff; cursor: pointer; scroll-snap-align: start; position: relative; }
.tv-card img { display: block; width: 240px; height: 135px; object-fit: cover; border-radius: 12px; background: #1A1A1A; transition: transform .2s; }
.tv-card:hover img { transform: scale(1.03); }
.tv-card .tv-play { position: absolute; left: 12px; top: 95px; width: 32px; height: 32px; border-radius: 50%; background: #FF9900; color: #0F0F0F; display: grid; place-items: center; font-size: 13px; }
.tv-card.on img { outline: 3px solid #FF9900; outline-offset: 2px; }
.tv-card b { display: block; margin-top: 8px; font: 700 14.5px Inter, system-ui, sans-serif; }
.tv-card small { display: block; font: 500 12.5px Inter, system-ui, sans-serif; color: #BDBDBD; }
.tv-theater { position: relative; margin-top: 16px; background: #000; border-radius: 16px; overflow: hidden; }
.tv-theater video { display: block; width: 100%; max-height: 70vh; margin: 0 auto; }
.tv-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #FF9900; color: #0F0F0F; font: 900 16px Inter, sans-serif; cursor: pointer; }
@media (max-width: 1000px) { .tv-hero { grid-template-columns: 1fr; } .tv-phone { width: min(100%, 300px); } }
@media (max-width: 700px) { .tv-card { flex-basis: 200px; } .tv-card img { width: 200px; height: 112px; } .tv-card .tv-play { top: 72px; } .tv-rh .lm-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .tv-hero::before { animation: none !important; } }

/* ══════════ CART — header badge, add-to-cart buttons, toast, cart page in the store-listing anatomy (Willis 2026-09-08 "where is the shopping cart?") ══════════ */
.lb-cart { display: inline-flex; align-items: flex-end; gap: 4px; color: #fff; text-decoration: none; margin-left: 12px; position: relative; padding: 4px 6px; border-radius: 8px; }
.lb-cart:hover { background: rgba(255,255,255,.1); }
.lb-cart svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lb-cart .n { position: absolute; left: 17px; top: -2px; font: 900 15px Inter, system-ui, sans-serif; color: #FF9900; }
.lb-cart span { font: 800 14px Inter, system-ui, sans-serif; line-height: 1; padding-bottom: 4px; }
.mh-tabs .mh-cart-n { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; border-radius: 9px; background: #FF9900; color: #0F0F0F; font: 800 11px/18px Inter, sans-serif; text-align: center; display: none; }
.mh-tabs .mh-cart-n.some { display: block; }
.mh-tabs .mh-cartlink { position: relative; }
.mh-tabs .mh-cartlink .icn { fill: none; stroke: currentColor; stroke-width: 1.9; }
.dh-addcart { display: block; margin-top: 8px; text-align: center; border-radius: 999px; padding: 9px 12px; background: #FFC800; color: #00005F; font: 800 13.5px Inter, system-ui, sans-serif; cursor: pointer; }
.dh-addcart:hover { background: #FFD23A; }
.dh-addcart.in-cart::before, .dh-plus.in-cart::before { content: "✓ "; }
.dh-plus[data-cart-add] { cursor: pointer; }
.mpage .dh-addcart { background: #FF9900; color: #0F0F0F; }
#lb-cart-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); z-index: 99998; background: #00005F; color: #fff; border: 2px solid #FFC800; border-radius: 12px; padding: 12px 18px; font: 700 14px Inter, system-ui, sans-serif; box-shadow: 0 12px 30px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 92vw; }
#lb-cart-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#lb-cart-toast a { color: #FFC800; margin-left: 6px; }
.mkt-btn[data-cart-add] { border: 1px solid #FCD200; cursor: pointer; font: inherit; }
button[data-cart-add].btn { cursor: pointer; font: inherit; }
/* cart page */
.cartpage { background: #F7F7F7; padding: 20px 20px 40px; }
.cart-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cart-list { background: #fff; border-radius: 12px; padding: 20px 24px 10px; }
.cart-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid #DDD; padding-bottom: 10px; margin-bottom: 4px; }
.cart-head h1 { margin: 0; font: 500 28px Inter, system-ui, sans-serif; color: #0F1111; }
.cart-pricehd { font: 500 14px Inter, system-ui, sans-serif; color: #565959; }
.cart-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 18px; padding: 16px 0; border-bottom: 1px solid #DDD; }
.cart-row.no { opacity: .7; }
.cart-img { display: grid; place-items: center; width: 180px; height: 180px; background: #F7F7F7; border-radius: 8px; }
.cart-img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.cart-name { font: 500 18px/1.3 Inter, system-ui, sans-serif; color: #0F1111; text-decoration: none; }
.cart-name:hover { color: #C45500; text-decoration: underline; }
.cart-tag { font: 400 14px/1.35 Inter, system-ui, sans-serif; color: #565959; margin: 4px 0; }
.cart-st { font: 500 13px Inter, system-ui, sans-serif; color: #565959; }
.cart-st .ok { color: #007600; font-weight: 700; } .cart-st .soon { color: #C40000; font-weight: 700; }
.cart-acts { display: flex; gap: 14px; margin-top: 12px; font: 500 13px Inter, system-ui, sans-serif; }
.cart-acts a { color: #007185; text-decoration: none; } .cart-acts a:hover { text-decoration: underline; }
.cart-del { border: 0; background: none; color: #007185; font: inherit; cursor: pointer; padding: 0; }
.cart-del:hover { text-decoration: underline; }
.cart-price { font: 700 18px Inter, system-ui, sans-serif; color: #0F1111; text-align: right; white-space: nowrap; }
.cart-price small { font-weight: 500; font-size: 13px; color: #565959; }
.cart-sub { font: 500 13px Inter, system-ui, sans-serif; color: #565959; margin: 10px 0 4px; }
.cart-empty, .cart-paid { text-align: center; padding: 30px 10px 26px; }
.cart-empty img, .cart-paid img { width: 72px; height: 72px; }
.cart-empty b, .cart-paid b { display: block; font: 800 22px Inter, system-ui, sans-serif; color: #00005F; margin: 8px 0 6px; }
.cart-empty p, .cart-paid p { margin: 0 auto 16px; max-width: 520px; font: 500 15px/1.45 Inter, system-ui, sans-serif; color: #444; }
.cart-empty-links { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cartpage .dh-cta { display: inline-flex; align-items: center; gap: 10px; background: #FF7801; color: #fff; font: 800 15px Inter, system-ui, sans-serif; padding: 13px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(255,120,1,.35); }
.cart-ghost { color: #00005F; font: 700 15px Inter, system-ui, sans-serif; text-decoration: none; }
.cart-box { background: #fff; border-radius: 12px; padding: 20px; position: sticky; top: 90px; }
.cart-total { font: 500 18px Inter, system-ui, sans-serif; color: #0F1111; margin-bottom: 14px; }
.cart-total b { font-weight: 700; }
.cart-checkout { width: 100%; border: 0; border-radius: 999px; background: #FFD814; color: #0F1111; font: 700 15px Inter, system-ui, sans-serif; padding: 12px; cursor: pointer; box-shadow: 0 2px 5px rgba(15,17,17,.15); }
.cart-checkout:hover { background: #F7CA00; } .cart-checkout:disabled { opacity: .5; cursor: default; }
.cart-note { margin: 12px 0 0; font: 500 12.5px/1.45 Inter, system-ui, sans-serif; color: #565959; }
.cart-note a { color: #007185; }
.cart-trust { margin: 14px 0 0; padding: 12px 0 0 18px; border-top: 1px solid #DDD; font: 500 13px/1.6 Inter, system-ui, sans-serif; color: #444; }
.cart-more { margin-top: 26px; }
.cart-more-h { color: #00005F; font: 800 24px Inter, system-ui, sans-serif; margin: 0 0 12px; }
.cart-more .dh-avail { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cart-more .dh-card { display: flex; flex-direction: column; gap: 3px; background: #fff; border-radius: 10px; padding: 10px 10px 12px; text-decoration: none; color: #151515; }
.cart-more .dh-img { position: relative; display: block; aspect-ratio: 1; width: 100%; margin: 0 0 10px; background: #F7F7F7; border-radius: 8px; overflow: hidden; }
.cart-more .dh-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; box-sizing: border-box; }
.cart-more .dh-plus { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: #FFD814; color: #0F1111; display: grid; place-items: center; font: 500 26px/1 Inter, sans-serif; }
.cart-more .dh-badges { display: flex; gap: 8px; align-items: center; margin: 2px 0 4px; } .cart-more .dh-badge { font: 800 11px Inter, sans-serif; text-transform: uppercase; color: #fff; background: #CC0C39; border-radius: 3px; padding: 3px 6px; } .cart-more .dh-badge-t { font: 700 12px Inter, sans-serif; color: #CC0C39; }
.cart-more .dh-price { font: 800 22px/1 Inter, system-ui, sans-serif; } .cart-more .dh-price em { font: 500 12px Inter, sans-serif; color: #565959; font-style: normal; margin-left: 6px; }
.cart-more b { font: 700 14.5px Inter, system-ui, sans-serif; }
.cart-more .dh-view { margin-top: 8px; text-align: center; border-radius: 999px; padding: 8px; background: #FFD814; color: #0F1111; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; }
@media (max-width: 900px) { .cart-wrap { grid-template-columns: 1fr; } .cart-box { position: static; } .cart-row { grid-template-columns: 110px minmax(0, 1fr); } .cart-img { width: 110px; height: 110px; } .cart-price { grid-column: 2; text-align: left; } }
@media (max-width: 700px) { .cartpage { padding: 12px 12px 30px; } .cart-list { padding: 14px 14px 6px; } .lb-cart span { display: none; } .lb-cart { margin-left: 4px; } }

/* cart v2: promo strip with a real person, licence stepper, save for later, share, "goes well with"; people in the story sections */
.cart-promo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; background: linear-gradient(90deg, #E6F5FC, #fff); border: 1px solid #DDD; border-radius: 12px; padding: 10px 22px 10px 14px; margin-bottom: 18px; }
.cart-promo-img { width: 120px; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,95,.18)); }
.cart-promo-t b { display: block; font: 800 20px Inter, system-ui, sans-serif; color: #00005F; }
.cart-promo-t span { font: 500 14px Inter, system-ui, sans-serif; color: #444; }
.cart-promo-btn { border: 1px solid #888; border-radius: 999px; padding: 10px 18px; font: 600 14px Inter, system-ui, sans-serif; color: #0F1111; text-decoration: none; background: #fff; white-space: nowrap; }
.cart-promo-btn:hover { background: #F7F7F7; }
.cart-meta { font: 500 13px Inter, system-ui, sans-serif; color: #444; margin-top: 6px; }
.cart-acts { align-items: center; flex-wrap: wrap; }
.cart-qty { display: inline-flex; align-items: center; border: 2px solid #FFD814; border-radius: 999px; padding: 2px; margin-right: 6px; }
.cart-qty button { width: 32px; height: 28px; border: 0; background: none; font: 700 16px Inter, sans-serif; cursor: pointer; color: #0F1111; }
.cart-qty button:disabled { opacity: .35; cursor: default; }
.cart-qty b { min-width: 26px; text-align: center; font: 700 15px Inter, sans-serif; }
.cart-lnk { border: 0; background: none; color: #007185; font: 500 13px Inter, system-ui, sans-serif; cursor: pointer; padding: 0; text-decoration: none; }
.cart-lnk:hover { text-decoration: underline; }
.cart-lnk + .cart-lnk, .cart-qty + .cart-lnk { border-left: 1px solid #DDD; padding-left: 12px; }
.cart-lnk-c { display: block; text-align: center; margin-top: 6px; color: #007185; font: 500 13px Inter, sans-serif; cursor: pointer; }
.cart-price small { display: block; font-size: 12px; color: #565959; font-weight: 500; }
.cart-subfoot { text-align: right; font: 500 18px Inter, system-ui, sans-serif; color: #0F1111; padding: 14px 0 10px; }
.cart-subfoot b { font-weight: 700; }
.cart-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.cart-box { position: static; }
.cart-ok { font: 500 13px/1.4 Inter, system-ui, sans-serif; color: #007600; margin-bottom: 12px; }
.cart-ok span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #007600; color: #fff; font-size: 11px; margin-right: 4px; }
.cart-gift { display: flex; align-items: center; gap: 8px; font: 500 14px Inter, system-ui, sans-serif; color: #0F1111; margin: 0 0 12px; }
.cart-also { background: #fff; border-radius: 12px; padding: 18px 18px 8px; }
.cart-also h3 { margin: 0 0 12px; font: 700 17px/1.25 Inter, system-ui, sans-serif; color: #0F1111; }
.also { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #EEE; }
.also:first-child { border-top: 0; padding-top: 0; }
.also img { width: 96px; height: 96px; object-fit: contain; background: #F7F7F7; border-radius: 8px; }
.also-n { font: 500 14px/1.3 Inter, system-ui, sans-serif; color: #007185; text-decoration: none; }
.also-p { font: 800 17px Inter, system-ui, sans-serif; color: #0F1111; margin: 2px 0; } .also-p small { font-weight: 500; font-size: 12px; color: #565959; }
.also-s { font: 500 12px Inter, sans-serif; color: #007600; }
.also-add { margin-top: 8px; border: 0; border-radius: 999px; background: #FFD814; color: #0F1111; font: 700 13px Inter, sans-serif; padding: 8px 14px; cursor: pointer; }
.cart-saved { margin-top: 22px; }
.cart-saved h2 { margin: 0 0 12px; font: 500 24px Inter, system-ui, sans-serif; color: #0F1111; }
.cart-saved .dh-avail, .cart-more .dh-avail { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cart-saved .dh-card { display: flex; flex-direction: column; gap: 3px; background: #fff; border-radius: 10px; padding: 10px 10px 12px; text-decoration: none; color: #151515; }
.cart-saved .dh-img { position: relative; display: block; aspect-ratio: 1; width: 100%; margin: 0 0 10px; background: #F7F7F7; border-radius: 8px; overflow: hidden; }
.cart-saved .dh-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; box-sizing: border-box; }
.cart-saved .dh-badges { display: flex; gap: 8px; align-items: center; margin: 2px 0 4px; } .cart-saved .dh-badge { font: 800 11px Inter, sans-serif; text-transform: uppercase; color: #fff; background: #CC0C39; border-radius: 3px; padding: 3px 6px; } .cart-saved .dh-badge-t { font: 700 12px Inter, sans-serif; color: #CC0C39; }
.cart-saved .dh-price { font: 800 22px/1 Inter, system-ui, sans-serif; } .cart-saved .dh-price em { font: 500 12px Inter, sans-serif; color: #565959; font-style: normal; margin-left: 6px; }
.cart-saved b { font: 700 14.5px Inter, system-ui, sans-serif; }
.cart-saved .dh-view { margin-top: 8px; text-align: center; border-radius: 999px; padding: 8px; background: #FFD814; color: #0F1111; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; }
.cart-paid img { width: 110px; height: auto; }
/* the people (Willis's generated set) */
.vs-face { position: absolute; right: -8px; bottom: -6px; width: 44%; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.3)); pointer-events: none; animation: dt-float 6s ease-in-out infinite; }
.vs-own .vs-face { animation-delay: -3s; }
.vs-rent, .vs-own { min-height: 210px; padding-right: 42%; }
.how-face { width: 96px; height: auto; margin: -34px 4px -18px 0; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.al-face { width: 110px; height: auto; margin: -30px 6px -20px 0; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); flex: none; }
#alerts .alerts-band { align-items: center; }
@media (max-width: 900px) { .cart-promo { grid-template-columns: auto 1fr; } .cart-promo-btn { grid-column: 2; justify-self: start; } .cart-side { position: static; } .vs-face { width: 38%; } }
@media (max-width: 700px) { .cart-promo-img { width: 80px; } .how-face, .al-face { display: none; } .vs-rent, .vs-own { padding-right: 14px; } .vs-face { display: none; } }
@media (prefers-reduced-motion: reduce) { .vs-face { animation: none !important; } }

/* listeners (Willis's headphone set): mosaic beside the music hero, face stacks in the band headers */
.mp-hero.has-listeners .mp-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.mp-listeners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; z-index: 2; transform: rotate(-3deg); }
.mp-listeners img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 30px rgba(0,0,0,.5); animation: dt-float 7s ease-in-out infinite; }
.mp-listeners img:nth-child(2) { animation-delay: -1s; } .mp-listeners img:nth-child(3) { animation-delay: -2s; } .mp-listeners img:nth-child(4) { animation-delay: -3s; } .mp-listeners img:nth-child(5) { animation-delay: -4s; } .mp-listeners img:nth-child(6) { animation-delay: -5s; }
.mp-listeners img:nth-child(2), .mp-listeners img:nth-child(5) { transform: translateY(14px); }
.lm-faces { display: inline-flex; align-items: center; margin: 0 4px; text-decoration: none; }
.lm-faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #0B0D1A; margin-left: -10px; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .15s; }
.lm-faces img:first-child { margin-left: 0; }
.lm-faces:hover img { transform: translateY(-2px); }
@media (max-width: 900px) { .mp-hero.has-listeners .mp-in { grid-template-columns: 1fr; } .mp-listeners { transform: none; grid-template-columns: repeat(6, 1fr); gap: 6px; } .mp-listeners img { border-radius: 10px; } .mp-listeners img:nth-child(2), .mp-listeners img:nth-child(5) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp-listeners img { animation: none !important; } }

/* listener mosaic sits inside the hero column, capped (was outside the grid and filled the page) */
.mp-hero.has-listeners .mp-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: center; }
.mp-listeners { max-width: 440px; justify-self: end; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp-listeners img { max-width: 100%; }
@media (max-width: 900px) { .mp-listeners { max-width: none; justify-self: stretch; } }

/* products page top banner: Willis's photo (three people at lookybox.com) beside the shelf pitch (2026-09-08) */
.shelf-hero { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 0; background: linear-gradient(135deg, #5B3E96 0%, #8B5FBF 100%); border-radius: 18px; overflow: hidden; margin: 0 0 18px; min-height: 300px; color: #fff; }
.shelf-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 2.2px) 0 0 / 20px 20px; animation: dt-drift 7s linear infinite; pointer-events: none; }
.sh-copy { position: relative; z-index: 1; padding: 34px 20px 34px 34px; }
.sh-eye { margin: 0 0 8px; font: 800 11.5px/1 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #FFC72C; }
.shelf-hero h1 { margin: 0 0 12px; font: 900 clamp(26px, 2.8vw, 40px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #fff; }
.sh-sub { margin: 0 0 18px; font: 500 15.5px/1.45 Inter, system-ui, sans-serif; color: rgba(255,255,255,.9); max-width: 520px; }
.sh-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sh-ctas .dh-cta { display: inline-flex; align-items: center; gap: 10px; background: #FF7801; color: #fff; font: 800 15px Inter, system-ui, sans-serif; padding: 13px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.sh-ghost { color: #FFC72C; font: 700 15px Inter, system-ui, sans-serif; text-decoration: none; }
.sh-pic { position: relative; align-self: stretch; min-height: 300px; }
.sh-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; mask-image: linear-gradient(90deg, transparent 0, #000 22%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
@media (max-width: 900px) { .shelf-hero { grid-template-columns: 1fr; min-height: 0; } .sh-pic { min-height: 220px; order: -1; } .sh-pic img { mask-image: linear-gradient(180deg, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); } .sh-copy { padding: 6px 22px 24px; } }
@media (prefers-reduced-motion: reduce) { .shelf-hero::before { animation: none !important; } }

/* moiré on the music page (from the Looky Moiré Lab idea): two fine gratings, one slowly turning, make the fringes move; two ring sets make the shop ground breathe (Willis 2026-09-08) */
.mp-moire-lines, .mp-moire-rings { position: relative; overflow: hidden; }
.mp-moire-lines > .lm-in, .mp-moire-rings > .mp-in { position: relative; z-index: 1; }
.mo { position: absolute; pointer-events: none; z-index: 0; }
@keyframes mo-turn { from { transform: rotate(2deg); } 50% { transform: rotate(5deg); } to { transform: rotate(2deg); } }
@keyframes mo-slide { from { transform: translate(0, 0); } 50% { transform: translate(18px, 10px); } to { transform: translate(0, 0); } }
.mo-a, .mo-b { left: -20%; top: -20%; width: 140%; height: 140%; background: repeating-linear-gradient(0deg, rgba(255,153,0,.22) 0 2px, transparent 2px 7px); mask-image: linear-gradient(90deg, transparent 0, #000 40%, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%, #000 60%, transparent 100%); }
.mo-b { background: repeating-linear-gradient(0deg, rgba(230,0,122,.22) 0 2px, transparent 2px 7px); animation: mo-turn 24s ease-in-out infinite; transform-origin: 50% 50%; }
.mo-r1, .mo-r2 { inset: -10%; background: repeating-radial-gradient(circle at 30% 40%, rgba(255,199,44,.16) 0 2px, transparent 2px 9px); }
.mo-r2 { background: repeating-radial-gradient(circle at 34% 44%, rgba(255,153,0,.16) 0 2px, transparent 2px 9px); animation: mo-slide 18s ease-in-out infinite; }
.mp-moire-rings::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, transparent 0, rgba(15,15,15,.55) 45%, #0F0F0F 75%); pointer-events: none; z-index: 0; }
@media (max-width: 700px) { .mo-a, .mo-b { mask-image: none; -webkit-mask-image: none; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .mo { animation: none !important; } }

/* shelf banner: a fixed 240 px strip, not a hero (the inline <picture> was letting it grow) */
.shelf-hero { height: 240px; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.sh-pic { display: block; position: relative; height: 100%; min-height: 0; }
.sh-pic img { object-position: 62% 38%; }
.sh-copy { padding: 22px 16px 22px 28px; }
.sh-eye { margin-bottom: 6px; }
.shelf-hero h1 { font-size: clamp(22px, 2.1vw, 30px); margin-bottom: 8px; }
.sh-sub { font-size: 14px; margin-bottom: 14px; max-width: 460px; }
.sh-ctas .dh-cta { padding: 10px 16px; font-size: 14px; }
.sh-ghost { font-size: 14px; }
@media (max-width: 900px) { .shelf-hero { height: auto; grid-template-columns: 1fr; } .sh-pic { height: 200px; order: -1; } }

/* shelf banner v3: the people are a cutout standing on the violet, no office behind them (Willis: "it was this one with no bg") */
.shelf-hero { height: 250px; overflow: visible; margin-top: 10px; }
.shelf-hero::after { content: ""; position: absolute; right: 6%; bottom: 10px; width: 40%; height: 40px; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(10px); pointer-events: none; }
.sh-pic { display: block; position: relative; height: 100%; overflow: visible; }
.sh-pic img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; height: 118%; max-width: none; object-fit: contain; object-position: bottom; mask-image: none; -webkit-mask-image: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); z-index: 1; }
.shelf-hero { border-radius: 18px 18px 18px 18px; }
.mkt-wrap > .shelf-hero { clip-path: inset(-40px 0 0 0 round 18px); }
@media (max-width: 900px) { .shelf-hero { height: auto; } .sh-pic { height: 210px; } .sh-pic img { height: 100%; } .mkt-wrap > .shelf-hero { clip-path: none; } }

/* homepage music band on the Looky Neon city (Looky Jump's neon theme layers, pixel art, parallax scroll) — Willis 2026-09-08 "try neon studio tile bg" */
.lm-neon { position: relative; overflow: hidden; background: #07061A; }
.lm-neon > .lm-in { position: relative; z-index: 2; }
.nl { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; z-index: 0; image-rendering: pixelated; background-repeat: repeat-x; background-position: 0 100%; }
@keyframes nl-scroll { to { background-position: -1088px 100%; } }
.nl-sky { background-image: url("kids/engine/backgrounds/neon/neon-sky.png"); background-size: auto 100%; opacity: .9; }
.nl-far { background-image: url("kids/engine/backgrounds/neon/neon-far.png"); background-size: 1088px 320px; animation: nl-scroll 160s linear infinite; opacity: .8; }
.nl-mid { background-image: url("kids/engine/backgrounds/neon/neon-mid.png"); background-size: 1088px 320px; animation: nl-scroll 95s linear infinite; opacity: .85; }
.nl-near { background-image: url("kids/engine/backgrounds/neon/neon-near.png"); background-size: 1088px 320px; animation: nl-scroll 55s linear infinite; }
.nl-grid { background-image: url("kids/engine/backgrounds/neon/neon-grid.png"); background-size: 1088px 320px; animation: nl-scroll 30s linear infinite; opacity: .9; }
.nl-fade { z-index: 1; background: linear-gradient(180deg, rgba(7,6,26,.92) 0, rgba(7,6,26,.78) 45%, rgba(7,6,26,.55) 100%); }
.lm-neon .lm-tile { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 18px rgba(255,0,200,.35), 0 10px 26px rgba(0,0,0,.5); }
.lm-neon .lm-tile:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 26px rgba(0,255,220,.5), 0 14px 30px rgba(0,0,0,.55); }
.lm-neon .lm-art, .lm-neon .lm-disc { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 16px rgba(90,197,240,.35), 0 10px 26px rgba(0,0,0,.5); }
.lm-neon .lm-brand { text-shadow: 0 0 12px rgba(255,200,0,.7); }
.lm-neon .lm-rh h2, .lm-neon .lm-rh h3 { text-shadow: 0 0 14px rgba(0,255,220,.35); }
/* Coming next: the sparkle sits by the heading, not on the link */
.dh-next::after { right: auto; left: 190px; top: 14px; }
@media (max-width: 700px) { .nl-far, .nl-mid, .nl-near, .nl-grid { background-size: 816px 240px; } }
@media (prefers-reduced-motion: reduce) { .nl { animation: none !important; } }

/* products page cards: the same picture effects as the homepage shelf — lift, 3D tilt, deeper shadow, one shine sweep; the card itself rises (Willis 2026-09-08) */
@media (min-width: 701px) {
  .mkt-card { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
  .mkt-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,95,.16); }
  .mkt-card .mkt-img { position: relative; overflow: hidden; perspective: 700px; }
  .mkt-card .mkt-img img { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; will-change: transform; }
  .mkt-card:hover .mkt-img img { transform: translateY(-6px) rotateY(-10deg) rotateX(4deg) scale(1.06); filter: drop-shadow(0 18px 24px rgba(0,0,95,.28)); }
  .mkt-card .mkt-img::after { content: ""; position: absolute; top: 0; left: 0; width: 28%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-160%) skewX(-20deg); pointer-events: none; }
  .mkt-card:hover .mkt-img::after { animation: dh-shine .9s ease-out; }
  .mkt-card:hover .mkt-btn.buy { background: #F7CA00; }
  .mkt-card:hover .mkt-btn.demo { background: #FA8900; }
  .mkt-grid .mkt-card:nth-child(4n+2) .mkt-img img { animation: dt-float 7s ease-in-out infinite; }
  .mkt-grid .mkt-card:nth-child(4n+2):hover .mkt-img img { animation: none; }
  @media (prefers-reduced-motion: reduce) { .mkt-card, .mkt-card .mkt-img img, .mkt-card .mkt-img::after { transition: none; animation: none !important; } }
}

/* products page uses the compact card (.cc) — the hover/glow effects and the Add-to-cart pill belong there, not on .mkt-card (2026-09-08) */
@media (min-width: 701px) {
  .cc { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .cc:hover { transform: translateY(-4px); }
  .cc .cc-img { position: relative; overflow: hidden; perspective: 700px; transition: box-shadow .2s; }
  .cc:hover .cc-img { box-shadow: 0 16px 34px rgba(0,0,95,.18), 0 0 0 1px rgba(0,0,95,.08); }
  .cc .cc-img img { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; will-change: transform; }
  .cc:hover .cc-img img { transform: translateY(-6px) rotateY(-10deg) rotateX(4deg) scale(1.06); filter: drop-shadow(0 18px 24px rgba(0,0,95,.28)); }
  .cc .cc-img::after { content: ""; position: absolute; top: 0; left: 0; width: 28%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-160%) skewX(-20deg); pointer-events: none; }
  .cc:hover .cc-img::after { animation: dh-shine .9s ease-out; }
  .cc:hover .cc-plus { background: #F7CA00; transform: scale(1.08); }
  .cc-grid .cc:nth-child(4n+2) .cc-img img { animation: dt-float 7s ease-in-out infinite; }
  .cc-grid .cc:nth-child(4n+2):hover .cc-img img { animation: none; }
}
.cc-add { margin-top: 6px; border: 0; border-radius: 999px; padding: 9px 12px; background: #FFD814; color: #0F1111; font: 700 13.5px Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 5px rgba(15,17,17,.15); }
.cc-add:hover { background: #F7CA00; }
.cc-add.in-cart::before { content: "✓ "; }
@media (prefers-reduced-motion: reduce) { .cc, .cc .cc-img img, .cc .cc-img::after { transition: none; animation: none !important; } }

/* products page cards: no tilt, no shine, no float — just a soft glow and a small lift on hover, like the homepage feel Willis pointed at (2026-09-08) */
@media (min-width: 701px) {
  .cc:hover { transform: translateY(-2px); }
  .cc .cc-img { perspective: none; }
  .cc:hover .cc-img { box-shadow: 0 0 0 2px rgba(255,200,0,.9), 0 12px 30px rgba(0,0,95,.18), 0 0 24px rgba(255,200,0,.35); }
  .cc:hover .cc-img img { transform: scale(1.03); filter: none; }
  .cc .cc-img::after { display: none; }
  .cc-grid .cc:nth-child(4n+2) .cc-img img { animation: none; }
}

/* products page cards: the shimmer sweep on hover is back (that was the part Willis wanted); still no tilt, no float */
@media (min-width: 701px) {
  .cc .cc-img::after { display: block; }
  .cc:hover .cc-img::after { animation: dh-shine .9s ease-out; }
  .cc:hover .cc-img { box-shadow: 0 12px 30px rgba(0,0,95,.16); }
  .cc:hover .cc-img img { transform: scale(1.02); }
}

/* Shelf card hover, corrected: the box art is centred with translateX(-50%), so every hover transform must keep it (it was jumping sideways) */
@media (min-width: 701px) {
  .cc .cc-img img { transition: transform .25s ease; will-change: auto; animation: none !important; filter: none !important; }
  .cc:hover .cc-img img, .cc-img:hover img { transform: translateX(-50%) scale(1.03); }
  .cc:hover .cc-plus { transform: none; }
  .cc .cc-img::after { z-index: 2; }
}

/* "Go deeper" in the coral-red palette Willis pasted (2026-09-08): coral ground #F5504D, white focal cards, deep red #FF2442 links, mustard tags, black text, one green hover */
.feed-wide > #more { background: #F5504D !important; border-color: #F5504D !important; position: relative; overflow: hidden; }
#more::before { background: #FF2442 !important; color: #fff !important; }
.feed-wide > #more::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.22) 1.6px, transparent 2.2px) 0 0 / 20px 20px; animation: dt-drift 7s linear infinite; pointer-events: none; }
#more .wrap { position: relative; z-index: 1; }
#more .deep { background: #fff; border: 0; box-shadow: 0 10px 26px rgba(0,0,0,.18); color: #111; }
#more .deep b { color: #111; }
#more .deep small { color: #444; }
#more .deep u { color: #FF2442; }
#more .deep::before { content: "Learn"; display: inline-block; align-self: flex-start; font: 800 10.5px 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #111; background: #D4A843; border-radius: 999px; padding: 5px 9px; margin-bottom: 4px; }
#more .deep:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.24), 0 0 0 3px #7BC142; }
#more .deep:hover u { color: #111; text-decoration: underline; text-decoration-color: #7BC142; text-decoration-thickness: 3px; }
@media (prefers-reduced-motion: reduce) { .feed-wide > #more::after { animation: none !important; } }

/* ══════════ FAQ, redesigned (2026-09-09): sticky intro column with topic chips, question cards in a two-column grid, coloured topic tags, orange plus, one open at a time ══════════ */
.feed-wide > #faq { background: #F7F7FB !important; }
#faq .faq-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: start; }
#faq .faq-head { position: sticky; top: 96px; }
#faq h2 { font: 900 clamp(28px, 3vw, 40px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #00005F; margin: 0 0 12px; }
.faq-lead { margin: 0 0 14px; font: 500 15px/1.45 Inter, system-ui, sans-serif; color: #444; }
.faq-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.faq-topics button { font: 700 13px Inter, system-ui, sans-serif; color: #151515; background: #fff; border: 1px solid #C9CCE6; border-radius: 999px; padding: 8px 13px; cursor: pointer; }
.faq-topics button:hover { border-color: #00005F; }
.faq-topics button.on { background: #00005F; color: #fff; border-color: #00005F; }
#faq .faq-more { display: inline-flex; align-items: center; gap: 8px; background: #FF7801; color: #fff; font: 800 14.5px Inter, system-ui, sans-serif; padding: 12px 18px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(255,120,1,.35); margin: 0 0 16px; }
.faq-note { background: #fff; border: 1px solid #E3E5EC; border-radius: 14px; padding: 14px 16px; font: 500 13.5px/1.45 Inter, system-ui, sans-serif; color: #444; }
.faq-note b { color: #00005F; }
#faq .faq-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: none; border: 0; padding: 0; }
#faq .faq-panel details { border: 1px solid #E3E5EC; border-top: 1px solid #E3E5EC; border-radius: 16px; background: #fff; overflow: hidden; transition: box-shadow .15s, transform .15s; align-self: start; }
#faq .faq-panel details:hover { box-shadow: 0 10px 26px rgba(0,0,95,.10); transform: translateY(-2px); }
#faq .faq-panel details[open] { grid-column: 1 / -1; box-shadow: 0 14px 34px rgba(0,0,95,.12); border-color: #00005F; }
#faq .faq-panel summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; font: 700 15.5px/1.3 Inter, system-ui, sans-serif; color: #151515; background: none; cursor: pointer; list-style: none; }
#faq .faq-panel summary::after { content: "+"; width: 32px; height: 32px; border-radius: 50%; background: #FF7801; color: #fff; display: grid; place-items: center; font: 800 20px/1 Inter, sans-serif; position: static; transform: none; transition: transform .2s, background .2s; }
#faq .faq-panel details[open] summary::after { transform: rotate(45deg); background: #00005F; }
#faq .faq-panel summary:hover { background: #FAFAFF; }
.faq-tag { display: block; grid-column: 1 / -1; font: 800 10.5px 'Space Mono', monospace; letter-spacing: .12em; text-transform: uppercase; margin-bottom: -6px; }
.faq-tag.t-buy { color: #0972D3; } .faq-tag.t-run { color: #1F7A46; } .faq-tag.t-kids { color: #8B5FBF; } .faq-tag.t-who { color: #E31C23; }
#faq .faq-panel summary { grid-template-rows: auto auto; }
#faq .faq-panel summary .faq-tag { grid-row: 1; }
#faq .faq-panel summary::after { grid-row: 2; }
#faq .faq-panel details p { padding: 0 18px 18px; margin: 0; font: 500 15px/1.55 Inter, system-ui, sans-serif; color: #333; max-width: 760px; }
#faq .faq-panel details[open] p { animation: faq-in .25s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { #faq .faq-grid { grid-template-columns: 1fr; } #faq .faq-head { position: static; } #faq .faq-panel { grid-template-columns: 1fr; } }

/* FAQ cards: question text left, plus on the right (the grid was putting the plus first) */
#faq .faq-panel summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; text-align: left; grid-template-columns: none; grid-template-rows: none; }
#faq .faq-panel summary .faq-tag { flex: 1 1 100%; margin-bottom: 0; }
#faq .faq-panel summary::after { margin-left: auto; flex: none; grid-row: auto; }

/* FAQ: Willis's thinking-people picture under the intro column; section ground picks up its soft pink */
.feed-wide > #faq { background: #FFF4F5 !important; }
.faq-people { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: 18px; box-shadow: 0 14px 34px rgba(0,0,95,.14); transform: rotate(-2deg); transition: transform .25s; }
.faq-people:hover { transform: rotate(0deg) scale(1.02); }
#faq .faq-note { background: #fff; }
@media (max-width: 1000px) { .faq-people { max-width: 420px; transform: none; } }

/* the trade-finder banner under the shelf banner: blue instead of the same violet (Willis 2026-09-09) */
details#find.find-wrap { background: #0972D3; }
details#find.find-wrap > summary::before { background: #FFC72C; color: #0F0F0F; }
details#find.find-wrap > summary::after { background: #FFC72C; color: #0F0F0F; }
details#find.find-wrap .sect-k { color: #0972D3; }

/* ══════════ eyewear models (Willis's set, cut out 2026-09-09) — EMR page demo + buy panel, homepage EMR tile, the doctor's list ══════════ */
.ew-model { pointer-events: none; filter: drop-shadow(0 16px 24px rgba(0,0,0,.35)); }
/* EMR page: demo intro with the pointing woman on the right */
#demo .demo-intro { position: relative; padding-right: 300px; min-height: 250px; }
#demo .ew-point { position: absolute; right: 10px; bottom: -32px; height: 320px; width: auto; animation: dt-float 7s ease-in-out infinite; }
/* EMR page: final buy panel — the celebrating man beside the box */
.buy-img-model { position: relative; }
.buy-img-model .ew-cheer { position: absolute; left: -40px; bottom: -20px; height: 78%; width: auto; animation: dt-float 6s ease-in-out infinite; animation-delay: -2s; }
/* homepage EMR tile: box + the surprised woman */
.dtile > .dt-art.art-model img.dt-model { position: absolute; right: 2%; bottom: 0; height: 100% !important; width: auto !important; max-width: 52%; z-index: 2; object-fit: contain; object-position: bottom; --r: 0deg; animation: dt-float2 7s ease-in-out infinite; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.dtile > .dt-art.art-model img:first-child { left: 4%; margin-left: 0; max-width: 52%; height: 84%; }
/* team.html: thumbs-up man on the lime list */
#doctor .cites { position: relative; overflow: hidden; padding-bottom: 240px; }
#doctor .ew-thumbs { position: absolute; right: -10px; bottom: -8px; height: 300px; width: auto; animation: dt-float 7s ease-in-out infinite; }
#doctor .cites li:last-child { position: relative; z-index: 1; }
@media (max-width: 1000px) { #demo .demo-intro { padding-right: 0; } #demo .ew-point { display: none; } .buy-img-model .ew-cheer { display: none; } #doctor .cites { padding-bottom: 36px; } #doctor .ew-thumbs { display: none; } }
@media (max-width: 700px) { .dtile > .dt-art.art-model img.dt-model { display: none; } }
@media (prefers-reduced-motion: reduce) { .ew-model, .dt-model { animation: none !important; } }

/* doctor list: the thumbs-up man stands in his own lime area under the violet punchline (his head was going under the strip) */
#doctor .cites { display: flex; flex-direction: column; padding-bottom: 0; overflow: visible; }
#doctor .cites ul { margin: 0; }
#doctor .cites li:last-child { margin-bottom: 0; }
#doctor .ew-thumbs { position: static; order: 9; align-self: flex-end; height: 280px; width: auto; margin: 14px -20px -30px 0; }
@media (max-width: 1000px) { #doctor .ew-thumbs { display: none; } }

/* ══════════ why.html redesign (2026-09-09): hero band with the manifesto video, tollbooth tiles, coral inflation band, receipt cards, lime answer panel ══════════ */
.wh-hero { background: #00005F; color: #fff; padding: 40px 20px 46px; position: relative; overflow: hidden; }
.wh-hero::before { content: ""; position: absolute; left: -200px; top: -320px; width: 900px; height: 900px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.08) 0 5deg, transparent 5deg 13deg); animation: dt-spin 90s linear infinite; pointer-events: none; }
.wh-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 2.2px) 0 0 / 22px 22px; animation: dt-drift 7s linear infinite; mask-image: linear-gradient(90deg, transparent 45%, #000 85%); -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 85%); pointer-events: none; }
.wh-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; max-width: 1240px; margin: 0 auto; }
.wh-hero .kicker { color: #FFC72C; }
.wh-hero h1 { color: #fff; font: 900 clamp(32px, 4.2vw, 56px)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.03em; margin: 8px 0 14px; }
.wh-lead { font: 500 18px/1.45 Inter, system-ui, sans-serif; color: #D6D6E8; margin: 0 0 20px; max-width: 560px; }
.wh-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.wh-ctas .dh-cta { display: inline-flex; align-items: center; gap: 10px; background: #FF7801; color: #fff; font: 800 15px Inter, system-ui, sans-serif; padding: 13px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(255,120,1,.35); }
.wh-ghost { color: #FFC72C; font: 700 15px Inter, system-ui, sans-serif; text-decoration: none; }
.wh-video .pd-video-frame { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); }
.wh-video video { display: block; width: 100%; height: auto; }
.wh-vcap { margin: 10px 4px 0; font: 600 12.5px 'Space Mono', monospace; letter-spacing: .06em; color: #C9CCE6; text-transform: uppercase; }
.why { max-width: 980px; padding-top: 34px; }
.why > p { max-width: 720px; }
.why h2 { font: 900 26px/1.15 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #00005F; margin: 44px 0 10px; }
.toll-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 20px; }
.toll-grid .toll { margin: 0; border: 0; border-radius: 18px; padding: 20px 18px 18px; color: #fff; position: relative; overflow: hidden; min-height: 170px; }
.toll-grid .toll::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 2px) 0 0 / 16px 16px; animation: dt-drift 7s linear infinite; pointer-events: none; }
.toll-grid .toll > * { position: relative; }
.toll-grid .toll b { font: 900 20px/1.15 Inter, system-ui, sans-serif; color: #fff; margin-bottom: 8px; }
.toll-grid .toll p { color: rgba(255,255,255,.9); font: 500 14.5px/1.45 Inter, system-ui, sans-serif; }
.toll.t-blue { background: #0972D3; } .toll.t-lime { background: #D4E94A; } .toll.t-violet { background: #8B5FBF; }
.toll.t-lime, .toll.t-lime b, .toll.t-lime p { color: #0F0F0F; }
.wh-band { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: #F5504D; color: #fff; border-radius: 22px; padding: 26px 28px 26px 18px; margin: 34px 0; position: relative; overflow: hidden; }
.wh-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.2) 1.6px, transparent 2.2px) 0 0 / 20px 20px; animation: dt-drift 7s linear infinite; pointer-events: none; }
.wh-band > * { position: relative; }
.wh-band-face { width: 130px; height: auto; align-self: end; margin-bottom: -26px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); animation: dt-float 6s ease-in-out infinite; }
.wh-band h2 { color: #fff; margin: 0 0 8px; }
.wh-band p { color: rgba(255,255,255,.92); margin: 8px 0; }
.wh-big { font: 900 clamp(22px, 2.6vw, 32px)/1.15 Inter, system-ui, sans-serif !important; letter-spacing: -.02em; color: #fff !important; background: #FF2442; display: inline-block; padding: 10px 16px; border-radius: 12px; }
.wh-h-tag { display: flex; align-items: center; gap: 12px; }
.wh-tag { font: 800 11px 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: #E31C23; border-radius: 6px; padding: 5px 9px; }
.why .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.why .receipts figure { background: #fff; border: 1px solid #E3E5EC; border-radius: 16px; padding: 10px 10px 12px; transition: transform .15s, box-shadow .15s; }
.why .receipts figure:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,95,.12); }
.why .receipts img { border: 0; box-shadow: none; border-radius: 10px; }
.why .receipts figcaption { padding: 10px 4px 0; font-size: 13.5px; color: #333; }
.why .pull { border-left: 6px solid #FFC72C; background: #00005F; color: #fff; border-radius: 0 14px 14px 0; padding: 16px 20px; font: 800 19px/1.35 Inter, system-ui, sans-serif; }
.wh-answer { background: #D4E94A; color: #0F0F0F; border-radius: 22px; padding: 26px 28px 8px; margin: 40px 0 30px; }
.wh-answer h2 { color: #0F0F0F; margin-top: 0; }
.wh-answer p { color: #222; }
.wh-answer .pull { background: #0F0F0F; border-left-color: #FF9900; margin-bottom: 18px; }
.yt-lite { max-width: 720px; }
@media (max-width: 900px) { .wh-hero-in { grid-template-columns: 1fr; } .toll-grid { grid-template-columns: 1fr; } .why .receipts { grid-template-columns: 1fr; } .wh-band { grid-template-columns: 1fr; padding: 22px; } .wh-band-face { width: 90px; margin: 0; align-self: start; } }
@media (prefers-reduced-motion: reduce) { .wh-hero::before, .wh-hero::after, .toll-grid .toll::before, .wh-band::before, .wh-band-face { animation: none !important; } }

/* team.html header in a navy comic container (Willis 2026-09-09 "why not have container… comic style bg") */
.team-head { position: relative; overflow: hidden; background: #00005F; color: #fff; border-radius: 22px; padding: 38px 40px 40px; margin-bottom: 26px; }
.team-head::before { content: ""; position: absolute; right: -240px; top: -320px; width: 820px; height: 820px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.09) 0 5deg, transparent 5deg 13deg); animation: dt-spin 90s linear infinite; pointer-events: none; }
.team-head::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 2.2px) 0 0 / 22px 22px; animation: dt-drift 7s linear infinite; pointer-events: none; }
.team-head > * { position: relative; z-index: 1; }
.team-head .sect-k { color: #FFC72C; }
.team-head h1 { color: #fff; font: 900 clamp(32px, 4.2vw, 54px)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.03em; margin: 6px 0 12px; }
.team-head p { color: #D6D6E8; font: 500 17px/1.5 Inter, system-ui, sans-serif; max-width: 720px; margin: 0; }
@media (max-width: 700px) { .team-head { padding: 24px 20px 26px; border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) { .team-head::before, .team-head::after { animation: none !important; } }

/* homepage EMR tile: the box stays in front and fully visible; the surprised woman peeks in from the right, behind it */
.dtile > .dt-art.art-model img:first-child { left: 3%; max-width: 58%; height: 88%; z-index: 2; margin-left: 0; }
.dtile > .dt-art.art-model img.dt-model { right: -6%; max-width: 46%; height: 92% !important; z-index: 1; opacity: .96; }

/* team header text on navy: the page's own inline styles were re-darkening the lead and kicker */
.team-head p, .team-head .team-lead { color: #E6E6F4 !important; }
.team-head .sect-k, .team-head .kicker { color: #FFC72C !important; }
.team-head h1 { color: #fff !important; }

/* Looky TV on the Looky Neon glowing grid (Willis 2026-09-09): a perspective floor of cyan and magenta lines scrolling toward you, a horizon glow, the pixel neon-grid layer at the floor line */
.feed-wide > #watch.tv-neon { position: relative; overflow: hidden; background: #05030F !important; }
#watch.tv-neon > .wrap { position: relative; z-index: 2; }
.tvn { position: absolute; left: 0; right: 0; pointer-events: none; }
@keyframes tvn-run { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 60px; } }
.tvn-floor { bottom: -8%; height: 58%; transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg) scale(1.6); background: repeating-linear-gradient(90deg, rgba(0,255,220,.55) 0 2px, transparent 2px 60px), repeating-linear-gradient(0deg, rgba(255,0,200,.55) 0 2px, transparent 2px 60px); background-size: 100% 100%, 100% 60px; animation: tvn-run 1.6s linear infinite; mask-image: linear-gradient(180deg, transparent 0, #000 35%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%); z-index: 0; }
.tvn-horizon { top: 30%; height: 42%; background: radial-gradient(ellipse at 50% 100%, rgba(255,0,200,.55) 0, rgba(0,255,220,.22) 35%, transparent 62%); z-index: 0; }
.tvn-px { bottom: 0; height: 190px; background: url("kids/engine/backgrounds/neon/neon-grid.png") repeat-x 0 100% / 1088px 320px; image-rendering: pixelated; animation: nl-scroll 30s linear infinite; opacity: .9; z-index: 1; }
.tvn-fade { inset: 0; background: linear-gradient(180deg, rgba(5,3,15,.85) 0, rgba(5,3,15,.35) 40%, rgba(5,3,15,0) 70%); z-index: 1; }
.tv-neon .tv-hero::before { display: none; }
.tv-neon #watch h2, .tv-neon h2 { text-shadow: 0 0 18px rgba(0,255,220,.45), 0 0 40px rgba(255,0,200,.25); }
.tv-neon .tv-eye { color: #00FFDC; text-shadow: 0 0 10px rgba(0,255,220,.6); }
.tv-neon .tv-chips span { border-color: rgba(0,255,220,.45); box-shadow: 0 0 10px rgba(0,255,220,.2); }
.tv-neon .tv-phone .pd-video-frame { border-color: #1a1a2e; box-shadow: 0 0 0 1px rgba(255,0,200,.5), 0 0 30px rgba(255,0,200,.35), 0 30px 70px rgba(0,0,0,.7); }
.tv-neon .tv-card img { box-shadow: 0 0 0 1px rgba(0,255,220,.25); }
.tv-neon .tv-card:hover img { box-shadow: 0 0 0 1px rgba(0,255,220,.7), 0 0 20px rgba(0,255,220,.35); }
@media (prefers-reduced-motion: reduce) { .tvn-floor, .tvn-px { animation: none !important; } }

/* Looky TV title bar: white text on a magenta-to-cyan neon strip (the old orange bar went dark under the neon fade) */
#watch.tv-neon[data-bar]::before { background: linear-gradient(90deg, #FF00C8, #7B2FF7 60%, #00FFDC) !important; color: #fff !important; text-shadow: 0 0 8px rgba(0,0,0,.4); position: relative; z-index: 3; }

/* Coming next = two containers, one per title (Willis 2026-09-09: "two container instead of just one long one") */
@media (min-width: 701px) {
  .dh-next { background: transparent !important; padding: 0 !important; overflow: visible; }
  .dh-next::before { display: none; }
  .dh-next::after { left: 176px; top: -12px; }
  .dh-next .dh-h { color: #00005F; }
  .dh-next .dh-all { color: #00005F; }
  .dh-next-grid { gap: 22px; margin-top: 6px; }
  .dh-nx, .dh-nx + .dh-nx { background: #5B3E96; color: #fff; border-radius: 22px; padding: 26px 28px; border: 0; position: relative; overflow: hidden; isolation: isolate; }
  .dh-nx::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 2.2px) 0 0 / 22px 22px; animation: dt-drift 8s linear infinite; }
  .dh-nx::after { content: "✦"; position: absolute; right: 22px; top: 14px; font: 900 26px Inter, sans-serif; color: #FFC72C; text-shadow: 0 0 12px rgba(255,200,0,.6); animation: dt-twinkle 3s ease-in-out infinite; pointer-events: none; z-index: 1; }
  .dh-nx > * { position: relative; z-index: 1; }
  .dh-nx b { color: #fff; }
  .dh-nx small { color: rgba(255,255,255,.85); }
  .dh-nx u { color: #FFC72C; }
  .dh-nx:hover { box-shadow: 0 10px 28px rgba(91,62,150,.35); }
}
@media (prefers-reduced-motion: reduce) { .dh-nx::before, .dh-nx::after { animation: none !important; } }

/* ---- header account cluster, big-store layout (Willis 2026-09-09): [flag EN ▾] [Hello, sign in / Account & Lists ▾] [Returns / & Orders] [🛒 n Cart] ---- */
.ha { display: flex; align-items: stretch; gap: 2px; margin-left: auto; flex: none; }
.ha .g-head { margin-left: 0; }
.ha .lang-dd { margin: 0; }
.ha .lang-cur, .ha .g-signin-pill, .ha .g-user, .ha-orders, .ha .lb-cart { background: none; border: 1px solid transparent; border-radius: 4px; padding: 5px 9px; margin: 0; color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.15; font: inherit; white-space: nowrap; min-height: 48px; box-shadow: none; }
.ha .lang-cur:hover, .ha .lang-dd.open .lang-cur, .ha .g-signin-pill:hover, .ha .g-user:hover, .ha .g-user-dd.open .g-user, .ha-orders:hover, .ha .lb-cart:hover { border-color: #fff; background: none; }
.ha small { font: 400 12px/1.15 Inter, system-ui, sans-serif; color: #E6E6F0; }
.ha b { font: 800 14px/1.15 Inter, system-ui, sans-serif; color: #fff; }
.ha b .caret, .ha .g-user b .caret { font-size: 10px; color: #A2A6C4; margin-left: 2px; }
.ha .g-user small img { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 5px; }
.ha .lang-cur { flex-direction: row; align-items: center; gap: 6px; }
.ha .lang-cur .lf { font-size: 20px; line-height: 1; }
.ha .lang-cur .lc { font: 800 14px/1 Inter, system-ui, sans-serif; color: #fff; }
.ha .lang-cur .ln { display: none; }
.ha .lang-cur .caret { font-size: 10px; color: #A2A6C4; opacity: 1; }
.ha .lang-dd .lang-menu { min-width: 280px; padding: 10px 8px 8px; border: 1px solid #C9CBD6; border-radius: 8px; gap: 0; }
.ha .lang-head { font: 400 16px/1.2 Inter, system-ui, sans-serif; color: #111; padding: 2px 10px 10px; }
.ha .lang-dd .lang-menu button { position: relative; padding: 11px 10px 11px 44px; border-radius: 0; border: 0; border-bottom: 1px solid #E7E7EC; font: 400 15px/1.2 Inter, system-ui, sans-serif; color: #111; background: none; }
.ha .lang-dd .lang-menu button::before { content: ""; position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #8A8A8A; background: #fff; box-sizing: border-box; }
.ha .lang-dd .lang-menu button:hover { background: #F6F7FA; }
.ha .lang-dd .lang-menu button.on { background: none; border-color: #E7E7EC; }
.ha .lang-dd .lang-menu button.on::before { border-color: #E77600; background: radial-gradient(#E77600 40%, #fff 46%); }
.ha .lang-dd .lang-menu button.on::after { display: none; }
.ha .lang-dd .lang-menu button .lf { font-size: 16px; margin-right: 4px; }
.ha .lang-dd .lang-menu button.soon { color: #888; }
.ha .lang-note { padding: 12px 10px 4px; font: 400 14px/1.35 Inter, system-ui, sans-serif; color: #111; }
.ha .lb-cart { flex-direction: row; align-items: flex-end; gap: 3px; position: relative; padding: 3px 9px 6px 6px; }
.ha .lb-cart svg { width: 40px; height: 36px; stroke-width: 1.8; }
.ha .lb-cart .n { position: absolute; left: 21px; top: 1px; width: 16px; text-align: center; font: 900 16px/1 Inter, system-ui, sans-serif; color: #F08804; }
.ha .lb-cart span { font: 800 15px/1 Inter, system-ui, sans-serif; padding-bottom: 6px; }
.ha .g-signin-dd, .ha .g-user-dd { position: relative; display: flex; }
@media (max-width: 1000px) { .ha-orders { display: none; } }
@media (max-width: 700px) { .ha { gap: 0; } .ha .lang-dd { display: none; } .ha small { display: none; } .ha .lb-cart span { display: none; } .ha .g-signin-pill, .ha .g-user { min-height: 40px; padding: 4px 6px; } }

/* black outline on the shelf pills (Willis 2026-09-09: "put black border around this buttons") — homepage shelf, products cards, cart rows */
.dh-view, .dh-addcart, .cc-add, .cart-more .dh-view, .cart-saved .dh-view { border: 1.5px solid #0F1111 !important; box-shadow: 0 2px 0 #0F1111; }
.dh-card:hover .dh-view, .dh-addcart:hover, .cc-add:hover { box-shadow: 0 2px 0 #0F1111; }
.dh-view:active, .dh-addcart:active, .cc-add:active { transform: translateY(2px); box-shadow: none; }
.mpage .dh-view, .mpage .dh-addcart { border-color: #0F0F0F !important; box-shadow: 0 2px 0 #0F0F0F; }

/* black outline on the "What do you want to do?" tiles and their chevrons (Willis 2026-09-09: "put border here also") */
.dh-tile { border: 2px solid #0F1111 !important; box-shadow: 0 3px 0 #0F1111; }
.dh-tile:hover { box-shadow: 0 3px 0 #0F1111, 0 12px 28px rgba(0,0,0,.18); }
.dh-tile .dh-chev { border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }

/* black outline on the colour tiles, their art panels and the yellow pill (Willis 2026-09-09: "do it for these also") */
.dtile { border: 2px solid #0F1111 !important; box-shadow: 0 3px 0 #0F1111; }
.dtile:hover { box-shadow: 0 3px 0 #0F1111, 0 14px 30px rgba(0,0,0,.2); }
.dtile .dt-art { border: 1.5px solid #0F1111; }
.dtile .dt-pill { border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }

/* a little more air between the category row and the colour tiles (Willis 2026-09-09: "obstructed by the header, move them down just a little") */
@media (min-width: 701px) { .dh-tiles-wrap { margin-top: 22px; } #d-home .dh-tiles { padding-top: 6px; } }

/* black outline on the Coming next panels (Willis 2026-09-09) */
@media (min-width: 701px) { .dh-nx, .dh-nx + .dh-nx { border: 2px solid #0F1111 !important; box-shadow: 0 3px 0 #0F1111; } .dh-nx:hover { box-shadow: 0 3px 0 #0F1111, 0 12px 28px rgba(91,62,150,.35); } }

/* black outline on the LookyRadio album discs, song tiles and tool covers (Willis 2026-09-09) */
.lm-disc, .lm-neon .lm-disc { border: 2px solid #0F1111; box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 4px 0 #0F1111, 0 10px 26px rgba(0,0,0,.5); }
.lm-tile, .lm-tool, .lm-neon .lm-art { border: 2px solid #0F1111 !important; box-shadow: 0 3px 0 #0F1111, 0 10px 26px rgba(0,0,0,.4); }

/* more air under the LookyRadio row headers and between rows (Willis 2026-09-09: "put some space, it's obstructed by header") */
.lm-rh { margin-bottom: 26px !important; }
.lm-row { margin-bottom: 40px; }
.lm-row + .lm-row, #lm-albums, #lm-tools { padding-top: 6px; }

/* song tiles: the black rim needs a white ring to show on the dark band; the scroll rows get room so the rims and bases are never clipped (Willis 2026-09-09: "here also") */
.lm-tile, .lm-tool, .lm-neon .lm-art { box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 4px 0 #0F1111, 0 10px 26px rgba(0,0,0,.4) !important; }
.lm-scroll { padding: 8px 4px 12px !important; }
#lm-tracks { margin-top: 6px; }

/* black outline on the How it works steps and their yellow tags (Willis 2026-09-09: "border here also") */
.hw { border: 2px solid #0F1111; box-shadow: 0 3px 0 #0F1111; }
.hw:hover { box-shadow: 0 3px 0 #0F1111, 0 14px 30px rgba(0,0,0,.18); }
.hw .hw-tag { border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }

/* black outline on the renting-vs-owning cards (Willis 2026-09-09: "border here also") */
.vs-rent, .vs-own { border: 2px solid #0F1111 !important; box-shadow: 0 3px 0 #0F1111; }

/* black outline on the FAQ cards, their plus buttons, the topic chips and the people picture (Willis 2026-09-09: "also here") */
#faq .faq-panel details { border: 2px solid #0F1111 !important; box-shadow: 0 3px 0 #0F1111; }
#faq .faq-panel details:hover { box-shadow: 0 3px 0 #0F1111, 0 10px 26px rgba(0,0,95,.10); }
#faq .faq-panel details[open] { box-shadow: 0 3px 0 #0F1111, 0 14px 34px rgba(0,0,95,.12); }
#faq .faq-panel summary::after { border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }
#faq .faq-panel details[open] summary::after { box-shadow: none; }
#faq .faq-head .chip, #faq .faq-chips button { border: 1.5px solid #0F1111 !important; box-shadow: 0 2px 0 #0F1111; }
.faq-people { border: 2px solid #0F1111; }

/* ---- "Meanwhile, at subscription headquarters" comic strip after the FAQ (Willis 2026-09-09: "put something funny bottom like this") ---- */
#meanwhile { background: #0F0F14 !important; color: #fff; padding: 46px 0 56px; }
#meanwhile[data-bar]::before { background-image: none !important; }
.mw-head { max-width: 760px; margin-bottom: 26px; }
.mw-head h2 { margin: 0 0 8px; font: 900 clamp(26px, 3.6vw, 40px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #FFC800; }
.mw-head p { margin: 0; font: 500 16px/1.55 Inter, system-ui, sans-serif; color: rgba(255,255,255,.8); }
.mw-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; }
.mw-panel { margin: 0; background: #fff; border: 2px solid #0F1111; border-radius: 16px; padding: 12px 12px 14px; box-shadow: 0 4px 0 #0F1111, 0 20px 40px rgba(0,0,0,.5); color: #0F1111; position: relative; transition: transform .2s; }
.mw-panel:nth-child(1) { transform: rotate(-1.2deg); } .mw-panel:nth-child(2) { transform: rotate(1deg); }
.mw-panel:hover { transform: rotate(0) scale(1.02); animation: mw-shake .4s ease-in-out 2; }
@keyframes mw-shake { 0%, 100% { transform: rotate(0) scale(1.02); } 25% { transform: rotate(-1.5deg) scale(1.02); } 75% { transform: rotate(1.5deg) scale(1.02); } }
.mw-panel img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 1.5px solid #0F1111; }
.mw-panel figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.mw-bubble { position: relative; align-self: flex-start; background: #FFC800; border: 2px solid #0F1111; border-radius: 14px; padding: 8px 14px; font: 900 16px/1.2 Inter, system-ui, sans-serif; color: #0F1111; box-shadow: 0 2px 0 #0F1111; }
.mw-bubble::after { content: ""; position: absolute; left: 22px; top: -12px; border: 7px solid transparent; border-bottom-color: #0F1111; border-top: 0; }
.mw-panel small { font: 700 11px 'Space Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #666; }
.mw-foot { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font: 500 16px/1.5 Inter, system-ui, sans-serif; color: rgba(255,255,255,.9); }
.mw-foot b { color: #FFC800; }
.mw-foot .dh-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: #FF7801; color: #00005F; font: 800 15px Inter, system-ui, sans-serif; padding: 12px 18px; border-radius: 999px; text-decoration: none; border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }
@media (max-width: 700px) { .mw-strip { grid-template-columns: 1fr; } .mw-panel:nth-child(1), .mw-panel:nth-child(2) { transform: none; } .mw-foot .dh-cta { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .mw-panel:hover { animation: none; } }

/* Watch section: black rim with a white ring on the phone frame, chips and the demo button; video cards too (Willis 2026-09-09: "here.") */
.tv-phone .pd-video-frame { border: 8px solid #1A1A1A; box-shadow: 0 0 0 2px #0F1111, 0 0 0 4px rgba(255,255,255,.55), 0 30px 70px rgba(0,0,0,.6); }
.tv-chips span { border: 1.5px solid #0F1111 !important; background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 2px 0 #0F1111; }
.tv-copy .dh-cta, .tv-hero .dh-cta { border: 1.5px solid #0F1111; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 2px 0 #0F1111; }
.tv-theater { border: 2px solid #0F1111; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.tv-neon .tv-card img { border: 2px solid #0F1111; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 3px 0 #0F1111 !important; }
.tv-neon .tv-card:hover img { box-shadow: 0 0 0 1px rgba(0,255,220,.7), 0 3px 0 #0F1111, 0 0 20px rgba(0,255,220,.35) !important; }

/* Meanwhile strip, half size: panels left in a 460 px strip, the joke report on the right (Willis 2026-09-09: "make these image 50% smaller… include in the section") */
.mw-grid { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 40px; align-items: center; }
.mw-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 460px; }
.mw-panel { padding: 8px 8px 10px; border-radius: 12px; }
.mw-panel img { border-radius: 6px; }
.mw-bubble { font-size: 12.5px; padding: 6px 10px; border-radius: 10px; }
.mw-panel figcaption { margin-top: 10px; }
.mw-head { margin-bottom: 16px; }
.mw-k { display: inline-block; font: 700 11px 'Space Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #FF7801; margin-bottom: 8px; }
.mw-report { list-style: none; margin: 0 0 18px; padding: 16px 18px; background: #fff; color: #0F1111; border: 2px solid #0F1111; border-radius: 14px; box-shadow: 0 4px 0 #0F1111; display: grid; gap: 8px; font: 500 15px/1.45 Inter, system-ui, sans-serif; transform: rotate(-.6deg); }
.mw-report li { padding-left: 22px; position: relative; }
.mw-report li::before { content: "▼"; position: absolute; left: 0; top: 2px; color: #D70000; font-size: 12px; }
.mw-report b { color: #D70000; }
.mw-foot { margin-top: 0; }
.mw-cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; background: #FF7801; color: #00005F; font: 800 15px Inter, system-ui, sans-serif; padding: 12px 18px; border-radius: 999px; text-decoration: none; border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }
@media (max-width: 1000px) { .mw-grid { grid-template-columns: 1fr; gap: 26px; } .mw-strip { max-width: 460px; } }
@media (max-width: 700px) { .mw-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* black outline on the Go deeper cards and their LEARN tags (Willis 2026-09-09: "put border here") */
.deep-grid .deep { border: 2px solid #0F1111 !important; box-shadow: 0 3px 0 #0F1111; }
.deep-grid .deep:hover { box-shadow: 0 3px 0 #0F1111, 0 12px 28px rgba(0,0,0,.18); }
.deep-grid .deep::before { border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }

/* third panel: the customer's screen (Willis 2026-09-09: "this image") — strip grows to three, panels stay small */
.mw-grid { grid-template-columns: 640px minmax(0, 1fr); gap: 34px; }
.mw-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; gap: 14px; }
.mw-panel:nth-child(3) { transform: rotate(-1deg); }
.mw-happy .mw-bubble { background: #2BB24C; color: #fff; }
@media (max-width: 1200px) { .mw-grid { grid-template-columns: 1fr; gap: 26px; } .mw-strip { max-width: 640px; } }
@media (max-width: 700px) { .mw-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mw-panel { padding: 5px 5px 7px; } .mw-bubble { font-size: 10.5px; padding: 5px 7px; } }

/* Meanwhile epilogue: one wide panel under the strip and the report (Willis 2026-09-09: "put this image somewhere") */
.mw-wide { grid-column: 1 / -1; max-width: 900px; margin: 30px auto 0; transform: rotate(.6deg); }
.mw-wide img { aspect-ratio: 1400 / 864; }
.mw-wide .mw-bubble { background: #fff; }
.mw-grid { align-items: start; }

/* epilogue panel smaller (Willis 2026-09-09: "smaller, I'm going to give you a new one no bg") */
.mw-wide { max-width: 520px; margin-top: 22px; }

/* epilogue cutout sits straight on the black band, no frame (Willis 2026-09-09) */
.mw-cut { background: none; border: 0; box-shadow: none; padding: 0; max-width: 620px; margin: 26px auto 0; transform: none; position: relative; }
.mw-cut img { border: 0; aspect-ratio: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.mw-cut figcaption { justify-content: center; align-items: center; margin-top: 8px; }
.mw-cut .mw-bubble::after { display: none; }
.mw-cut:hover { animation: none; transform: none; }
.mw-cut:hover img { animation: mw-shake .4s ease-in-out 2; }

/* the "They OWN it" cutout lives in the Watch hero, under the demo button (Willis 2026-09-09: "put that image somewhere here instead") */
.tv-people { margin: 26px 0 0; max-width: 560px; }
.tv-people img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.tv-people:hover img { animation: mw-shake .4s ease-in-out 2; }
.tv-people figcaption { margin-top: 8px; font: 700 12px 'Space Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #00FFDC; }
@media (max-width: 1000px) { .tv-people { max-width: 440px; margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .tv-people:hover img { animation: none; } }

/* They-own-it cutout 40% smaller (Willis 2026-09-09) */
.tv-people { max-width: 336px; margin-top: 20px; }
@media (max-width: 1000px) { .tv-people { max-width: 300px; } }

/* They-own-it cutout beside the video: pinned to the right edge of the copy column, bottom-aligned with the phone, a little larger (Willis 2026-09-09: "to the left of the video, little larger") */
@media (min-width: 1001px) {
  .tv-hero { grid-template-columns: 1fr 380px 330px; column-gap: 26px; }
  .tv-copy { grid-column: 1; }
  .tv-people { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; max-width: 420px; width: 100%; margin: 0 0 6px; }
  .tv-phone { grid-column: 3; }
  .tv-people figcaption { text-align: center; }
}

/* ---- product page: every full-width section sits in a container with a comic ground; "Pairs well with" gets the lavender dot tile (Willis 2026-09-09) ---- */
.pd-fullw { position: relative; overflow: hidden; isolation: isolate; background: #fff; border: 2px solid #0F1111; border-radius: 18px; padding: 22px 24px 24px !important; box-shadow: 0 3px 0 #0F1111; }
.pd-fullw::before { display: none; }
.pd-fullw + .pd-fullw { margin-top: 22px !important; }
.pd-fullw .pd-h { position: relative; display: inline-block; padding-bottom: 6px; }
.pd-fullw .pd-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: #FFC800; border-radius: 3px; z-index: -1; }
.pd-fullw.pd-pairs { background: #fff; }
.pd-fullw.pd-pairs::before { display: none; }
.pd-pairs .pd-pair { position: relative; }
/* Felt green #046032 — best-supported green in HQ Research color-families-final.md
   ("eleven families" table, n=3 vs n=2 for the other two candidates), and grounded in
   a real physical convention (casino felt), not a brand guess. */
.pd-pairs .pd-pair-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; margin: 0; z-index: 2; accent-color: #046032; cursor: pointer; }
.pd-pairs .pd-pair-check:disabled { opacity: .55; cursor: default; }
.pd-pairs .pd-pair img { border: 1px solid #D5D9D9; box-shadow: none; background: #fff; }
.pd-pairs .pd-plus { color: var(--text-2); font-weight: 400; }
.pd-pairs .pd-pair-total { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: none; border: 0; border-radius: 0; padding: 14px 0 0; box-shadow: none; color: var(--text); border-top: 1px solid var(--hairline); margin-top: 14px !important; }
.pd-pairs .pd-pair-total b { color: #0F1111; font-size: 19px; }
.pd-pairs .pd-pair-total small { color: var(--text-2); font-weight: 400; width: 100%; order: 3; }
.pd-pair-addbtn { background: #FFC800; border: 1px solid #a88600; border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 13.5px; cursor: pointer; color: #0F1111; }
.pd-pair-addbtn:hover { background: #f0bd00; } .pd-pair-addbtn:disabled { opacity: .5; cursor: default; }
.pd-fullw .pd-infogrid details { border-color: rgba(0,0,95,.15); }
@media (max-width: 700px) { .pd-fullw { padding: 16px 14px 18px !important; border-radius: 14px; } .pd-pairs .pd-pair-total { margin-left: 0; width: 100%; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .pd-fullw.pd-pairs::before, .pd-fullw.pd-pairs::after { animation: none; } }

/* header: the orange demo button leaves the header (the tab row has Try demos); the phone/laptop preview buttons take its place; nothing may wrap or overflow (Willis 2026-09-09) */
.nav-in > .nav-cta { display: none !important; }
.nav-in { flex-wrap: nowrap; }
.hdr-search { flex: 1 1 240px; min-width: 140px; }
.lbdev { flex: none; margin-right: 14px; }
.ha { flex: none; }
@media (max-width: 1200px) { .ha-orders { display: none; } }

/* footer columns 40% smaller type (Willis 2026-09-09) */
.mf-col { gap: 7px; }
.mf-col b { font-size: 10px; letter-spacing: .02em; }
.mf-col a { font-size: 8.5px; line-height: 1.35; }

/* ---- phone/tablet LookyRadio = a music-app mini player: art tile · title + artist · prev/play/next · 3D
   (Willis 2026-09-09: "fix this music player so it looks better"). Widened from 700px to 1000px on 2026-09-12
   (Playwright audit): 701-1000px is exactly the range where .nav-row2 (the subheader) also hides itself, so the
   desktop vertical dock — floating with no reserved space — was left overlapping page content (confirmed
   overlapping .pd-gallery on product.html at 768px) with nothing in that gap to catch it. Below this breakpoint
   the dock is always the bottom bar; above it, always the vertical rail — no in-between range unhandled. */
@media (max-width: 1000px) {
  /* the desktop dock nests its tiles two levels deep (.lradio > .dock-scroll > .dock-group > tiles) for the
     scrollable rail + magnification effect; display:contents un-boxes those two wrappers on phones so the tiles
     become direct grid children of .lradio again, same as before that nesting existed (2026-09-12 regression —
     confirmed by a Playwright audit: without this, grid-template-areas below silently matched nothing). */
  .lradio .dock-scroll, .lradio .dock-group { display: contents; }
  /* .lradio's desktop rule is a floating vertical rail (position:fixed;right:18px;top:50%;transform) with no
     width/radius/shadow reset here before today — on phones it kept that positioning while ALSO picking up the
     grid-area layout below, rendering as a misplaced ~78px strip instead of the intended full-width bottom bar
     (same audit). Reset every desktop-only geometry property back to a plain bottom bar. */
  .lradio { position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lradio { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 34px 38px 34px auto; grid-template-areas: "art title prev play next tv"; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #15181E; }
  .lr-brand { grid-area: art; width: 40px; height: 40px; border-radius: 9px; font-size: 0 !important; letter-spacing: 0; background: linear-gradient(135deg, #FF7801, #E6007A 60%, #5B3E96); border: 1.5px solid #0F1111; box-shadow: 0 0 0 1px rgba(255,255,255,.35); display: grid; place-items: center; position: relative; }
  .lr-brand::before { content: "♪"; font: 900 20px Inter, system-ui, sans-serif; color: #fff; }
  .lr-title { grid-area: title; display: block !important; font: 700 13.5px/1.2 Inter, system-ui, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .lr-title::after { content: "Vision Looky · LookyRadio"; display: block; font: 500 10.5px/1.3 Inter, system-ui, sans-serif; color: #8a9099; letter-spacing: .02em; margin-top: 2px; }
  #lr-prev { grid-area: prev; } #lr-play { grid-area: play; } #lr-next { grid-area: next; }
  .lr-btn { width: 34px; height: 34px; flex: none; font-size: 13px; padding: 0; border-radius: 50%; }
  .lr-play { width: 38px; height: 38px; font-size: 15px; box-shadow: 0 0 0 1.5px #0F1111, 0 0 0 3px rgba(255,255,255,.25); }
  .lrd-vol-wrap { display: none !important; }
  .lb3d-btn.in-radio { grid-area: tv; margin: 0; height: 34px; padding: 0 8px; }
  .lb3d-btn.in-radio svg { width: 22px; height: 14px; }
  body { padding-bottom: 64px; }
}

/* ---- phone home: the colour tile row at 60% (Willis 2026-09-09: "put some of the other software with this effect, smaller, for the iphone view") ---- */
@media (max-width: 700px) {
  #m-home .mh-tiles { margin: 14px -16px 6px; position: relative; }
  #m-home .mh-tiles .dh-tiles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 12px; scrollbar-width: none; }
  #m-home .mh-tiles .dh-tiles::-webkit-scrollbar { display: none; }
  #m-home .mh-tiles .dtile { flex: 0 0 222px; height: 336px; padding: 14px 13px 12px; border-radius: 12px; }
  #m-home .mh-tiles .dt-eye { font-size: 11.5px; margin-bottom: 3px; }
  #m-home .mh-tiles .dt-h { font-size: 19px; line-height: 1.05; }
  #m-home .mh-tiles .dt-sub { font-size: 11.5px; margin-top: 6px; }
  #m-home .mh-tiles .dt-pill { font-size: 10px; padding: 5px 10px; margin-top: 8px; }
  #m-home .mh-tiles .dt-mark { font-size: 15px; margin-top: 8px; }
  #m-home .mh-tiles .dt-art { left: 12px; right: 12px; bottom: 34px; height: 180px; }
  #m-home .mh-tiles .dt-art.art-grid { height: 190px; bottom: 14px; gap: 6px; }
  #m-home .mh-tiles .dt-art.art-grid i { border-radius: 8px; padding: 5px; }
  #m-home .mh-tiles .dt-foot { left: 13px; bottom: 12px; font-size: 9.5px; }
  #m-home .mh-tiles .dt-play { width: 26px; height: 26px; left: 11px; bottom: 10px; }
  #m-home .mh-tiles .dt-play svg { width: 11px; height: 11px; }
  #m-home .mh-tiles .dtile .dt-play ~ .dt-foot, #m-home .mh-tiles .dtile .dt-foot ~ .dt-play + .dt-foot { left: 44px; }
  #m-home .mh-tiles .dt-spark { font-size: 9px !important; }
}

/* LookyRadio band header = one slim pitch line (Willis 2026-09-09: "smaller, more like click here for Vision Looky music, own your music too") */
.lm-head { gap: 12px; margin-bottom: 10px; padding: 8px 12px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.05); }
.lm-brand { font-size: 11px; letter-spacing: .12em; }
.lm-faces img { width: 26px; height: 26px; margin-left: -8px; }
.lm-pitch { font: 500 12.5px/1.3 Inter, system-ui, sans-serif; color: #C9CCE6; text-decoration: none; min-width: 0; }
.lm-pitch b { color: #FFC800; font-weight: 900; margin-right: 4px; }
.lm-pitch:hover { color: #fff; }
.lm-apple { font-size: 11.5px; padding: 6px 11px; border: 1.5px solid #0F1111; box-shadow: 0 2px 0 #0F1111; }
.lm-own { margin-left: auto; background: #FF7801; color: #00005F; }
.lm-own + .lm-apple { margin-left: 0; }
@media (max-width: 700px) { .lm-head { border-radius: 16px; } .lm-pitch { flex: 1 1 100%; } .lm-own { margin-left: 0; } }

/* phone tiles: the art panel and footer flow like the desktop ones — no relative offsets pulling them over the copy; the row snaps with its side padding (Willis 2026-09-09: "some of these are not aligned correctly") */
@media (max-width: 700px) {
  #m-home .mh-tiles .dh-tiles { scroll-padding-left: 16px; scroll-padding-right: 16px; }
  #m-home .mh-tiles .dtile { height: 352px; padding: 12px 12px 11px; }
  #m-home .mh-tiles .dtile > .dt-art { left: auto; right: auto; bottom: auto; height: auto; flex: 1 1 auto; min-height: 140px; margin: 8px -2px 0; }
  #m-home .mh-tiles .dtile > .dt-art.art-grid { height: auto; bottom: auto; padding: 6px; gap: 6px; }
  #m-home .mh-tiles .dtile > .dt-foot { left: auto; bottom: auto; margin-top: 8px; font-size: 10px; gap: 8px; }
  #m-home .mh-tiles .dtile > .dt-foot .dt-play { position: static; width: 24px; height: 24px; left: auto; bottom: auto; }
  #m-home .mh-tiles .dt-sub { font-size: 11px; margin-top: 4px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  #m-home .mh-tiles .dt-h { font-size: 18px; }
  #m-home .mh-tiles .dt-mark { font-size: 13px; margin-top: 5px; }
}

/* phone home: the single EMR hero goes; the tile row is the hero now (Willis 2026-09-09) */
@media (max-width: 700px) { #m-home .mh-hero { display: none !important; } #m-home .mh-tiles { margin-top: 8px; } }

/* ---- Sounds everywhere people browse (Willis 2026-09-09: "put the sound section so people can browse") ---- */
.dh-tab-tag { display: inline-block; margin-left: 4px; background: #FFC800; color: #0F0F0F; border: 1px solid #0F1111; border-radius: 999px; font: 800 10px/1 Inter, system-ui, sans-serif; padding: 3px 6px; vertical-align: 2px; }
.mh-cat.c-yellow { background: #FFC800; color: #0F0F0F; }
#sounds { background: #FFF6D6 !important; padding: 34px 0 40px; }
/* Willis 2026-09-12: "also this like the other sections" — contained rounded card instead of a full-bleed
   band, matching #music/.lmusic's fix above and every .feed-wide section. Desktop/tablet only, same
   701px+ gate used there (mobile keeps the existing edge-to-edge strip). */
@media (min-width: 701px) { #sounds { max-width: var(--max-grid); margin: 22px auto; border-radius: 22px; } }
.snh-lead { margin: -4px 0 16px; font: 500 15px/1.5 Inter, system-ui, sans-serif; color: #444; }
.snh-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.snh { background: #fff; border: 2px solid #0F1111; border-radius: 14px; padding: 12px; box-shadow: 0 3px 0 #0F1111; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; }
.snh.playing { background: #FFE9A6; }
.snh-play { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #0F1111; background: #FF7801; color: #0F0F0F; font-size: 15px; cursor: pointer; box-shadow: 0 2px 0 #0F1111; }
.snh.playing .snh-play { background: #E31C23; color: #fff; }
.snh b { font: 800 13.5px/1.2 Inter, system-ui, sans-serif; }
.snh small { font: 600 10.5px 'Space Mono', monospace; color: #666; }
.snh .dh-addcart { grid-column: 1 / 3; margin-top: 8px; padding: 7px 10px; font-size: 12px; }
@media (max-width: 700px) { #sounds { padding: 24px 0 28px; } .snh-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* instant-download note in the product buy box (2026-09-09) */
.pd-instant { margin: 0 0 10px; padding: 10px 12px; background: #FFF6D6; border: 1.5px solid #0F1111; border-radius: 12px; font: 500 13.5px/1.45 Inter, system-ui, sans-serif; color: #3a2e00; box-shadow: 0 2px 0 #0F1111; }
.pd-instant b { color: #00005F; }

/* licence key on the thank-you page (2026-09-09) */
.cart-key { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF6D6; border: 2px solid #0F1111; border-radius: 12px; padding: 12px 14px; margin: 8px 0; box-shadow: 0 3px 0 #0F1111; }
.cart-key span { font: 700 14px Inter, system-ui, sans-serif; }
.cart-key code { font: 800 18px 'Space Mono', monospace; letter-spacing: .06em; color: #00005F; background: #fff; border: 1.5px solid #0F1111; border-radius: 8px; padding: 6px 10px; }
.cart-key .dh-view { margin: 0; padding: 7px 12px; font-size: 12.5px; }

/* gift code in the cart (2026-09-09) */
.cart-code { display: flex; gap: 6px; margin: 10px 0 4px; }
.cart-code input { flex: 1 1 auto; min-width: 0; font: 700 14px 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; padding: 9px 11px; border: 1.5px solid #0F1111; border-radius: 10px; }
.cart-code button { font: 800 13px Inter, system-ui, sans-serif; padding: 9px 14px; border: 1.5px solid #0F1111; border-radius: 10px; background: #FFC800; cursor: pointer; box-shadow: 0 2px 0 #0F1111; }
.cart-code-msg { margin: 4px 0 8px; font: 500 13px/1.4 Inter, system-ui, sans-serif; padding: 8px 10px; border-radius: 10px; }
.cart-code-msg.good { background: #E6F7EE; color: #0b6b47; border: 1px solid #9ad8b9; }
.cart-code-msg.bad { background: #FDE8E8; color: #9b1c1c; border: 1px solid #f1b3b3; }

/* print-key button on the thank-you page (2026-09-09) */
.cart-print { margin: 6px 0 14px; }

/* music tool covers on a light ground so the box art reads on the dark band (Willis 2026-09-09: "put bg on these so it's easy to see") */
.lm-art, .lm-neon .lm-art { background: linear-gradient(160deg, #FFFFFF, #E6E6FF) !important; }
.lm-art img { filter: drop-shadow(0 10px 16px rgba(0,0,95,.28)); }

/* music tool cards: solid dark panel behind the name and price too (Willis 2026-09-09: "I don't see bg here") */
.lm-tool, .lm-neon .lm-tool { background: #15181E; border-radius: 14px; padding: 8px 10px 12px; box-sizing: border-box; }
.lm-tool .lm-art { width: 100%; height: 180px; margin-bottom: 10px; }
.lm-tool b { color: #fff; } .lm-tool small { color: #C9CCE6; }

/* Watch hero: the They-own-it scene as a looping clip (Willis 2026-09-09) */
.tv-people-video video { display: block; width: 100%; height: auto; border-radius: 16px; border: 2px solid #0F1111; box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 18px 30px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .tv-people-video video { display: none; } .tv-people-video::before { content: ""; display: block; width: 100%; aspect-ratio: 640 / 954; border-radius: 16px; background: url(img/lol/they-own-it-poster.webp) center / cover; border: 2px solid #0F1111; } }

/* ---- Looky Cartridge™: the name for the one-file, any-computer web app (Willis 2026-09-09: "mini web app technology, call it something cool") ---- */
.pd-cart-pill { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 12px; background: #0F0F14; color: #fff; border: 2px solid #0F1111; border-radius: 999px; padding: 6px 12px 6px 8px; font: 800 12.5px Inter, system-ui, sans-serif; box-shadow: 0 2px 0 #0F1111; }
.pd-cart-pill i { font-style: normal; background: #FFC800; color: #0F0F0F; border-radius: 999px; padding: 3px 8px; font: 900 11px 'Space Mono', monospace; letter-spacing: .08em; }
.pd-cart-pill span { color: #C9CCE6; font-weight: 600; }
.pd-cartridge { margin: 0 0 12px; border: 1.5px solid #0F1111; border-radius: 12px; background: #F4F4F8; padding: 8px 12px; font: 500 13px/1.5 Inter, system-ui, sans-serif; color: #333; }
.pd-cartridge summary { cursor: pointer; font-weight: 800; color: #00005F; }
.pd-cartridge p { margin: 8px 0 0; }
.pd-cart-line { display: block; margin: -4px 0 12px; font: 800 12px 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #D70000; }

/* Cartridge pill, tidied (Willis 2026-09-09: "make this look better"): tag · One file · three OS chips · one plain line, nothing wraps mid-phrase */
.pd-cart-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #0F0F14; border: 2px solid #0F1111; box-shadow: 0 3px 0 #0F1111; font: 800 13px Inter, system-ui, sans-serif; }
.pd-cart-pill i { white-space: nowrap; font: 900 11px 'Space Mono', monospace; letter-spacing: .08em; background: #FFC800; color: #0F0F0F; border-radius: 999px; padding: 6px 10px; }
.pd-cart-pill b { white-space: nowrap; color: #fff; font-weight: 900; }
.pd-cart-pill em { white-space: nowrap; font-style: normal; font-weight: 800; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 4px 10px; }
.pd-cart-pill span { white-space: nowrap; color: #C9CCE6; font-weight: 600; margin-left: 2px; }
.pd-cart-line { margin: 0 0 12px; }
@media (max-width: 700px) { .pd-cart-pill { gap: 6px; padding: 8px 10px; } .pd-cart-pill span { flex: 1 1 100%; white-space: normal; margin: 2px 0 0; } }

/* MiniApp logo in the product pill (Willis 2026-09-09: "looks good") */
.pd-cart-pill { padding-left: 8px; }
.pd-cart-logo { display: block; height: 43px; width: auto; border-radius: 10px; }
@media (max-width: 700px) { .pd-cart-logo { height: 36px; } }

/* the two "No" lines under the MiniApp pill (Willis 2026-09-09) */
.pd-cart-line { margin: 0 0 12px; font: 800 13px/1.5 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #D70000; }

/* the two No lines live inside the black MiniApp container, under the chips (Willis 2026-09-09) */
.pd-cart-pill .pd-cart-line { flex: 1 1 100%; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14); color: #FFC800; font: 800 12.5px/1.6 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.pd-cart-pill { margin-bottom: 14px; }

/* ---- MiniApp block, laid out properly: badge on the left, text column on the right (Willis 2026-09-09: "does not look good") ---- */
.pd-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin: 10px 0 16px; padding: 14px 18px 14px 14px; background: #0F0F14; border: 2px solid #0F1111; border-radius: 16px; box-shadow: 0 3px 0 #0F1111; }
.pd-mini-logo { display: block; width: 210px; height: auto; border-radius: 12px; }
.pd-mini-t { min-width: 0; }
.pd-mini-t b { display: block; font: 900 17px/1.25 Inter, system-ui, sans-serif; color: #fff; margin-bottom: 8px; letter-spacing: -.01em; }
.pd-mini-t span { display: block; font: 800 12px/1.7 'Space Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: #FFC800; }
@media (max-width: 1000px) { .pd-mini { grid-template-columns: 1fr; gap: 12px; } .pd-mini-logo { width: 180px; } }
@media (max-width: 700px) { .pd-mini { padding: 12px; } .pd-mini-t b { font-size: 15px; } .pd-mini-t span { font-size: 11px; letter-spacing: .05em; } }

/* ---- MiniApp block v3 (Willis's mockup 2026-09-09): header row = badge · ONE FILE · OS chips right; three icon columns beneath ---- */
.pd-mini { display: block; padding: 14px 18px 18px; }
.pd-mini-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pd-mini-logo { width: 196px; }
.pd-mini-one { font: 900 22px/1 Inter, system-ui, sans-serif; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.pd-mini-os { display: flex; gap: 8px; margin-left: auto; }
.pd-mini-os em { font: 800 13px Inter, system-ui, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #fff; border: 2px solid rgba(255,255,255,.45); border-radius: 999px; padding: 7px 16px; white-space: nowrap; }
.pd-mini-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.pd-mini-col { text-align: center; padding: 6px 10px 2px; border-left: 1px solid rgba(255,255,255,.18); }
.pd-mini-col:first-child { border-left: 0; }
.pd-mini-col svg { width: 44px; height: 44px; display: block; margin: 0 auto 6px; }
.pd-mini-col b { display: block; font: 900 clamp(18px, 1.6vw, 24px)/1.1 Inter, system-ui, sans-serif; color: #FFC800; text-transform: uppercase; letter-spacing: .01em; }
.pd-mini-col small { display: block; margin-top: 4px; font: 800 11.5px/1.3 Inter, system-ui, sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1000px) { .pd-mini-os { margin-left: 0; flex: 1 1 100%; } }
@media (max-width: 700px) { .pd-mini { padding: 12px; } .pd-mini-logo { width: 160px; } .pd-mini-one { font-size: 18px; } .pd-mini-os em { padding: 6px 12px; font-size: 12px; } .pd-mini-cols { grid-template-columns: 1fr; gap: 10px; } .pd-mini-col { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; text-align: left; align-items: center; } .pd-mini-col:first-child { border-top: 0; } .pd-mini-col svg { grid-row: 1 / 3; margin: 0; } .pd-mini-col small { margin-top: 0; } }

/* ---- MiniApp block v4 (mockup 2 — "ONE FILE · WORKS ON" leads into the OS pills; download / dollar / infinity icons) ---- */
.pd-mini-one { font-size: 19px; letter-spacing: .05em; }
.pd-mini-os { margin-left: 0; }
.pd-mini-head { justify-content: space-between; }
.pd-mini-col svg { width: 48px; height: 48px; margin-bottom: 8px; }
.pd-mini-col b { letter-spacing: .03em; }
@media (min-width: 701px) { .pd-mini-cols { margin-top: 18px; } .pd-mini-col { padding-top: 8px; } }

/* ---- MiniApp block v5: the panel is one picture (Willis: "just put an image") ---- */
.pd-mini.pd-mini-img { display: block; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; margin: 8px 0 16px; }
.pd-mini-img img { display: block; width: 100%; max-width: 680px; height: auto; border-radius: 4.6%/15%; border: 2px solid #0F1111; box-shadow: 0 3px 0 #0F1111; }

/* ---- buy-box rows: label never breaks, value right-aligned and wraps cleanly ---- */
.pd-bb-row { gap: 12px; align-items: baseline; }
.pd-bb-row span { white-space: nowrap; flex: 0 0 auto; }
.pd-bb-row b { text-align: right; min-width: 0; }

/* ══════════ product pages: catalogue look (Willis 2026-09-09 "compare to the big store — is it the white bg?") — product pages only, homepage untouched ══════════ */
.pdp-page .pd-crumbs { font: 14px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--text-2); }
.pdp-page .pd-crumbs a { color: #0973AA; text-decoration: none; }
.pdp-page .pd-crumbs a:hover { text-decoration: underline; }
.pdp-page .pd-stage { background: transparent; padding: 0; border-radius: 0; }
.pdp-page #pdp-main { border: 0; padding: 0; box-shadow: none; border-radius: 0; background: #fff; }
.pdp-page .pd-thumb { opacity: 1; border: 1px solid #D5D9D9; border-radius: 8px; }
.pdp-page .pd-thumb.on { border: 2px solid #00005F; box-shadow: 0 0 0 2px rgba(0,0,95,.15); }
.pdp-page .pd-info h1 { font-weight: 400; font-size: 24px; line-height: 1.3; }
.pdp-page .pd-sub, .pdp-page .pd-sub.mono { font-family: Inter, system-ui, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text-body); }
.pdp-page .pd-pricebar { background: none; padding: 0; margin: 12px 0 14px; flex-direction: column; gap: 4px; border-radius: 0; }
.pdp-page .pd-tier b { font-size: 28px; font-weight: 400; line-height: 1.1; }
.pdp-page .pd-tier span { font-family: Inter, system-ui, sans-serif; font-size: 13px; letter-spacing: 0; color: var(--text-2); }
.pdp-page .pd-tier.alt { display: flex; gap: 6px; align-items: baseline; }
.pdp-page .pd-tier.alt b { display: inline; font-size: 14px; font-weight: 700; color: var(--text); }
.pdp-page .pd-attrs td { border: 0; padding: 6px 0; text-align: left; background: none; color: var(--text); }
.pdp-page .pd-attrs td:nth-child(odd) { font-weight: 700; background: none; color: var(--text); }
.pdp-page .pd-attrs:not(.pd-vs) tr:first-child td:nth-child(-n+2) { border-top: 0; }
.pdp-page .pd-buybox { border: 1px solid #D5D9D9; border-radius: 8px; box-shadow: none; background: #fff; }
.pdp-page .pd-buybox .btn, .pdp-page .pd-buybox a.btn, .pdp-page .pd-buybox button.btn { border: 1px solid transparent !important; border-radius: 999px; box-shadow: none; font-weight: 400; font-size: 14px; padding: 9px 16px; color: #0F1111 !important; transform: none; }
.pdp-page .pd-buybox .btn:hover { transform: none; box-shadow: none; filter: brightness(.95); }
.pdp-page .pd-buybox .btn-red { background: #FF7801; border-color: #D96600 !important; }
.pdp-page .pd-buybox .btn-sun, .pdp-page .pd-buybox [data-cart-add].btn { background: #FFC800; border-color: #E0B000 !important; }
.pdp-page .pd-buybox .btn-quiet:not([data-cart-add]) { background: #fff; border-color: #D5D9D9 !important; }
.pdp-page .pd-instant { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; font-size: 13px; color: var(--text-2); }
.pdp-page .pd-cartridge { background: none; border: 0; border-top: 1px solid #E7E7E7; border-radius: 0; padding: 8px 0 0; }
.pdp-page .pd-fine.mono, .pdp-page .pd-footline { font-family: Inter, system-ui, sans-serif; letter-spacing: 0; }
.pdp-page .pd-fine.mono { font-size: 12px; }

/* ---- big-store price: small raised $ and cents, big whole number (Willis 2026-09-09 "did you notice the $ is always smaller") ---- */
.pd-price { display: inline-flex; align-items: flex-start; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-price sup { font-size: .46em; line-height: 1; margin-top: .12em; vertical-align: top; }
.pd-price sup:first-child { margin-right: .06em; }
.pd-price sup:last-child { margin-left: .06em; }
.pdp-page .pd-bb-row.total b .pd-price { font-size: 26px; }

/* ---- price number is BOLD and bigger; only the $ and cents float small (Willis 2026-09-09) ---- */
.pdp-page .pd-tier b, .pdp-page .pd-tier b .pd-price { font-size: 34px; font-weight: 800; }
.pdp-page .pd-bb-row.total b .pd-price { font-size: 30px; font-weight: 800; }
.pd-price sup { font-size: .42em; font-weight: 600; margin-top: .18em; }

/* ---- site-wide price standard (price.js): the element keeps its own size/weight; only the $ and cents float small ---- */
.pd-price { display: inline-flex; align-items: flex-start; line-height: 1; font-variant-numeric: tabular-nums; font-weight: inherit; white-space: nowrap; }
.pd-price sup { font-size: .42em; font-weight: 600; line-height: 1; margin-top: .18em; vertical-align: top; }
.pd-price sup { font-size: max(.42em, 9px); }

/* ---- price standard on cards: the wrapper keeps its size, the number keeps the card's weight ---- */
.mh-price b, .mkt-price b, .cc-price b, .cws-meta b { font-weight: inherit; }
.cc-price .pd-price sup { position: static; top: auto; }

/* ---- price inside a button or link: bold and a touch bigger than the label (Willis 2026-09-09 "you didn't apply it to buttons") ---- */
button .pd-price, a .pd-price, .btn .pd-price, .mkt-btn .pd-price { font-weight: 800; font-size: 1.12em; vertical-align: -0.02em; margin: 0 .05em; }

/* ---- price inside a card caption keeps the caption's line; only the number is heavy ---- */
.lm-tool small b, .cws-m small b { display: inline; font: inherit; font-weight: 800; color: inherit; white-space: nowrap; overflow: visible; }

/* ---- sale price (HQ → Prices): the everyday price struck through beside the sale price; label + end date ---- */
.pd-tier.sale { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid #D5D9D9; }
.pd-tier.sale .pd-was { font-size: 18px; font-weight: 600; color: #565959; text-decoration: line-through; }
.pd-tier.sale span { color: #D70000; font-weight: 700; }
.pdp-page .pd-pricebar:has(.pd-tier.sale) { flex-direction: row; align-items: flex-end; gap: 14px; }
.cc-dealtxt s { color: #565959; font-weight: 500; }

/* ══════════ Vision Looky price tag (price-tag.js) — white shelf tag with a coloured SALE / OWN IT band ══════════ */
.ptag { --band: #FFC800; --ink: #00005F; background: #fff; border: 1.5px solid #B9BEC9; border-radius: 6px; box-shadow: 0 2px 6px rgba(15,17,17,.12); overflow: hidden; font-family: Inter, system-ui, sans-serif; color: #0F1111; max-width: 420px; }
.ptag-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; }
.ptag-bc { width: 118px; height: 22px; fill: #0F1111; flex: 0 0 auto; }
.ptag-sku { font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; color: #333; }
.ptag-fine { margin: 0; padding: 0 12px 6px; font: 400 6.4px/1.35 Inter, system-ui, sans-serif; color: #555; letter-spacing: .01em; }
.ptag-mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 4px 12px 10px; }
.ptag-title { display: block; font: 800 13px/1.2 Inter, system-ui, sans-serif; margin-bottom: 4px; }
.ptag-digits { font: 500 15px/1.1 'Space Mono', monospace; letter-spacing: .05em; color: #222; margin-bottom: 8px; }
.ptag-was { display: flex; align-items: baseline; gap: 18px; font: 700 15px/1 Inter, system-ui, sans-serif; }
.ptag-was span { font-size: 13px; letter-spacing: .06em; }
.ptag-was b { font-size: 20px; font-weight: 600; }
.ptag-sale .ptag-was b { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #D9302C; }
.ptag-note span { font-size: 11px; color: #333; }
.ptag-note em { font: 600 12px/1 Inter, system-ui, sans-serif; font-style: normal; color: #555; }
.ptag-qr { width: 64px; height: 64px; flex: 0 0 auto; background: #fff; }
.ptag-qr svg { width: 100%; height: 100%; display: block; }
.ptag-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: var(--band); color: var(--ink); }
.ptag-band span { font: 700 22px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; }
.ptag-band b { font: 800 26px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; }
.ptag-band .pd-price sup { font-weight: 700; }
/* compact: shelf cards (no fine print, no QR, no digits) */
.ptag-compact { max-width: none; border-radius: 5px; }
.ptag-compact .ptag-top { padding: 5px 8px 2px; gap: 8px; }
.ptag-compact .ptag-bc { width: 70px; height: 14px; }
.ptag-compact .ptag-sku { font-size: 9px; }
.ptag-compact .ptag-mid { padding: 2px 8px 6px; }
.ptag-compact .ptag-title { font-size: 10.5px; margin-bottom: 2px; }
.ptag-compact .ptag-was { gap: 10px; }
.ptag-compact .ptag-was span { font-size: 10px; }
.ptag-compact .ptag-was b { font-size: 15px; }
.ptag-compact .ptag-note em { font-size: 10.5px; }
.ptag-compact .ptag-band { padding: 5px 9px; }
.ptag-compact .ptag-band span { font-size: 14px; letter-spacing: .1em; }
.ptag-compact .ptag-band b { font-size: 19px; }
.pdp-page .pd-pricebar:has(.ptag) { display: block; margin: 12px 0 16px; }
.cc .ptag { margin-top: 6px; }
.pd-salenote { margin: 6px 0 0; font: 700 13px Inter, system-ui, sans-serif; color: #D70000; }

/* ---- price tag, band-only variant is opt-in with class .ptag-bandonly (Willis 2026-09-09 tried it, then kept the full tag) ---- */
.ptag-bandonly { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.ptag-bandonly .ptag-top, .ptag-bandonly .ptag-fine, .ptag-bandonly .ptag-mid { display: none !important; }
.ptag-bandonly .ptag-band { border-radius: 10px; border: 2px solid #0F1111; box-shadow: 0 3px 0 #0F1111; }

/* ---- product cards: a light border around each card and air between them (Willis 2026-09-09) ---- */
.cc { border: 1.5px solid #D5D9D9; border-radius: 14px; padding: 12px 12px 14px; background: #fff; box-sizing: border-box; }
.cc:hover { border-color: #0F1111; box-shadow: 0 3px 0 #0F1111; }
.cc .cc-img { border: 0; }
.mkt-grid, .mkt-wrap .mkt-grid, #home-grid.mkt-grid { gap: 22px 18px !important; }
.cc { border: 1.5px solid #C9CDD6 !important; }   /* wins over the old `.cc { border: none !important }` at line ~2259 */
.cc:hover { border-color: #0F1111 !important; }

/* ---- products page: filters as dropdowns above the grid; the sidebar is hidden but still runs the logic ---- */
.mkt-filterbar { margin: 6px 0 16px; padding: 12px 14px 0; background: #fff; border: 2px solid #0F1111; border-radius: 14px; box-shadow: 0 3px 0 #0F1111; overflow: hidden; }
.fb-content { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; max-height: 600px; opacity: 1; transition: max-height .22s ease, opacity .18s ease, margin .22s ease; }
.fb-item { display: flex; flex-direction: column; gap: 4px; font: 800 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #00005F; }
.fb-item select { font: 600 14px Inter, system-ui, sans-serif; color: #0F1111; padding: 8px 34px 8px 12px; border: 1.5px solid #0F1111; border-radius: 10px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230F1111' stroke-width='2'/></svg>") no-repeat right 12px center; appearance: none; -webkit-appearance: none; min-width: 160px; cursor: pointer; }
.fb-item select:focus { outline: 3px solid #FFC800; outline-offset: 1px; }
.fb-clear { margin-left: auto; font: 800 13px Inter, system-ui, sans-serif; padding: 9px 14px; border-radius: 999px; border: 1.5px solid #0F1111; background: #FFC800; color: #0F1111; cursor: pointer; }
/* drag-to-collapse handle — a full-width grab bar under the filter row; drag it (or click it) to snap the row shut */
.fb-handle { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px -14px 0; padding: 5px 0; cursor: ns-resize; user-select: none; -webkit-user-select: none; touch-action: none; border-top: 1px solid var(--hairline); border-radius: 0 0 12px 12px; color: #8a8f98; background: #fafafa; }
.fb-handle:hover, .fb-handle:focus-visible { background: #f0f2f6; color: #0F1111; outline: none; }
.fb-handle-grip { font-size: 16px; line-height: 1; letter-spacing: 2px; transform: scaleX(2); }
.fb-handle-txt { font: 800 10px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mkt-filterbar.collapsed .fb-content { max-height: 0; opacity: 0; margin: 0; pointer-events: none; }
.mkt-body.filters-top { grid-template-columns: minmax(0, 1fr) !important; }
.mkt-body.filters-top > .mkt-facets { display: none !important; }
@media (max-width: 700px) { .fb-item { flex: 1 1 45%; } .fb-item select { width: 100%; min-width: 0; } .fb-clear { flex: 1 1 100%; margin-left: 0; } }

/* ---- buy-box buttons the big-store way (Willis 2026-09-09): full width of the narrow box, short, 13px regular, one line, thin darker rim ---- */
.pdp-page .pd-buybox .btn, .pdp-page .pd-buybox a.btn, .pdp-page .pd-buybox button.btn { display: block; width: 100%; box-sizing: border-box; padding: 7px 12px; font-size: 13px; line-height: 1.35; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; text-align: center; }
.pdp-page .pd-buybox .btn + .btn, .pdp-page .pd-buybox .btn + button.btn { margin-top: 8px; }
.pdp-page .pd-buybox .btn-red { background: #FF7801; border-color: #E06A00 !important; }
.pdp-page .pd-buybox .btn-sun, .pdp-page .pd-buybox [data-cart-add].btn { background: #FFC800; border-color: #E6B400 !important; }
.pdp-page .pd-buybox .btn .pd-price { font-size: 1.05em; }

/* ══════════ the new price label: one coloured tile (Willis's mock-ups, 2026-09-09) ══════════ */
.ptile { --band: #F9D018; --ink: #00005F; display: flex; flex-direction: column; gap: 2px; background: var(--band); color: var(--ink); border-radius: 14px; padding: 14px 18px 14px; max-width: 420px; font-family: Inter, system-ui, sans-serif; border: 2px solid #0F1111; box-shadow: 0 3px 0 #0F1111; }
.ptile-label { font: 800 14px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .95; }
.ptile-price { font: 800 40px/1.05 Inter, system-ui, sans-serif; letter-spacing: -.01em; margin-top: 4px; }
.ptile-sub { font: 500 13px/1.3 'Space Mono', monospace; opacity: .85; margin-top: 4px; }
.ptile-sale .ptile-sub { opacity: 1; font-weight: 700; }
.ptile .pd-price sup { font-weight: 700; }
.ptile-compact { border-radius: 10px; padding: 8px 10px 8px; gap: 1px; max-width: none; border-width: 1.5px; box-shadow: 0 2px 0 #0F1111; }
.ptile-compact .ptile-label { font-size: 11px; }
.ptile-compact .ptile-price { font-size: 24px; margin-top: 2px; }
.ptile-compact .ptile-sub { font-size: 10.5px; margin-top: 2px; }
.pdp-page .pd-pricebar:has(.ptile) { display: block; margin: 12px 0 16px; }
.cc .ptile { margin-top: 6px; }
.ptile-compact .ptile-price { font-size: 22px; }   /* long non-dollar prices like "At eye2tap.net" still fit on a card */

/* ---- the Home · Shelf · Demos · Tools · About row is the constant sub-header on every page, homepage included (Willis 2026-09-09) ---- */
body:has(#d-home) .nav-row2 { display: block !important; }
@media (min-width: 701px) and (max-width: 1000px) { .nav-row2 { display: block !important; } .nav-row2 .lkdock a { padding: 12px 10px; font-size: 13.5px; } .nav-row2 .nav-note { display: none; } }

/* ---- the colour block fits the price, not the column (Willis 2026-09-09 "only the price should be bg, not the other parts") ---- */
.ptile { display: inline-flex; width: auto; min-width: 250px; max-width: 340px; padding: 14px 22px 14px 18px; }
.ptile-compact { display: inline-flex; width: auto; min-width: 0; max-width: 100%; padding: 8px 14px 8px 10px; }
.pdp-page .pd-pricebar:has(.ptile) { display: block; }

/* ---- colour behind the PRICE only (Willis 2026-09-09 "this price should have the bg, not the other parts") ---- */
.ptile, .ptile-compact { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #0F1111; padding: 0 !important; min-width: 0 !important; max-width: none !important; display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; }
.ptile-label { color: #565959; font-size: 12px; }
.ptile-price { display: inline-block; background: var(--band); color: var(--ink); padding: 6px 16px 8px; border-radius: 12px; border: 2px solid #0F1111; box-shadow: 0 3px 0 #0F1111; margin: 2px 0 4px; }
.ptile-sub { color: #565959; }
.ptile-compact .ptile-price { padding: 3px 10px 4px; border-radius: 9px; border-width: 1.5px; box-shadow: 0 2px 0 #0F1111; font-size: 22px; }
.ptile-compact .ptile-label { font-size: 10px; }
.ptile-sale .ptile-sub { color: #D70000; font-weight: 700; }

/* ---- light background must have dark text (Willis 2026-09-09): yellow kicker pills on dark heroes get a dark pill, not a pale one ---- */
.wh-hero .kicker, .team-head .kicker, .team-head .sect-k { background: rgba(0, 0, 0, .38) !important; color: #FFC800 !important; border: 1px solid rgba(255, 255, 255, .28); }
.wh-hero .kicker::before, .team-head .kicker::before { background: #FFC800; }

/* ---- 2026-09-14 grade fixes (Claude 73 / Codex 77): 24 px tap targets, shelf height reserve, badge ratio ---- */
.mf-col a { display: inline-block; padding: 4px 0; min-height: 24px; line-height: 1.3; }
.pd-pairs .pd-pair-check { width: 24px; height: 24px; }
.pay-badge { aspect-ratio: 3 / 2; }

/* ---- holo card in the product gallery (2026-09-14) ---- */
.pd-stage iframe.pd-holo { display: block; width: 100%; aspect-ratio: 1 / 1.05; border: 0; border-radius: calc(var(--r-card) - 6px); background: #0B1220; }
.pd-thumb-holo .pd-thumb-play { background: #0B1220; color: #FFC800; }