/* ============================================================================
   BallIndex — the golf ball price index
   A trustworthy data board on a two-pole colour system: slate charcoal is the
   structural brand (masthead, footer, ticker, boards); tee-box azure is the
   "good / primary / trusted" signal (links, active nav, price-drops, known
   price, high trust) and red is its "bad" counterpart (price-rises, not-rankable,
   high risk) — a red↔blue axis that's friendlier to colour-blind readers than
   the old red↔green. Gold marks the #1 / premium tier. NO green anywhere. Every
   text-on-colour pair is AA-verified so colour never weakens a trust signal.
   ========================================================================== */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
  /* Primary brand = slate charcoal (replaced the old clubhouse green entirely). */
  --slate-900: #15181d;   /* darkest graphite — masthead, footer, ticker, boards */
  --slate-850: #21262e;   /* board header surface                                */
  --slate-800: #2b313a;   /* dark accent text on light (eyebrows, demobar)       */
  --slate-700: #3a414c;   /* hover borders, control accents                      */

  /* Cool charcoal / white / light-grey base so prices & tracking data pop. */
  --cream:  #eef1f5;   /* light text on charcoal + the page wash */
  --paper:  #ffffff;   /* cards / controls                       */
  --paper-2:#e7eaef;   /* secondary surfaces, demo bar, chips     */
  --ink:    #1c1f24;   /* primary text (neutral near-black)       */
  --ink-2:  #4a4f57;
  --muted:  #5c616a;   /* secondary/meta text — darkened from #6b7079 so it clears AA (≥5.1:1) on the cream wash + paper-2, not just white */

  --gold:      #f1c33b;
  --gold-deep: #cf9d17;
  --gold-ink:  #5a4408;

  --silver: #c9cdd2;
  --bronze: #cd8e54;

  /* The "good / primary / trusted" colour — tee-box azure. Links, active nav,
     price-drops, known-price + high-trust signals, the thesis hero. All pairs
     AA-checked — azure on white 5.7:1, white on azure 5.7:1, azure-bright on
     slate-900 7.7:1, cream on azure-night 14:1. */
  --azure:        #1763c9;   /* links + pills + signals on light surfaces */
  --azure-deep:   #1257b4;   /* link hover                                */
  --azure-bright: #5fb0ff;   /* accent text on dark slate                 */
  --azure-night:  #13294a;   /* deep blue end of the thesis gradient      */

  /* Red = ATTENTION: price drops, reductions, hot deals (NOT danger). */
  --red:     #d92d20;
  --red-ink: #c01f12;
  --drop:  #d92d20;   /* price falling = a drop = red attention        */
  --rise:  #5c616a;   /* price rising = neutral grey (de-emphasised, AA as text) */

  --c-known:     #1763c9;   /* known / verified  → blue           */
  --c-estimated: #b45309;   /* estimate / caution → amber          */
  --c-listed:    #5c616a;   /* listed-only / demo → grey           */
  --c-notrank:   #595f68;   /* not suitable      → dark grey       */
  --trust-green: #2e8b57;   /* green, used sparingly: high trust / low risk */

  --line:      rgba(24, 28, 36, 0.22);   /* defined hard-box borders   */
  --line-soft: rgba(24, 28, 36, 0.10);   /* internal row dividers       */
  --line-dark: rgba(238, 241, 245, 0.16);
  --frame:     rgba(24, 28, 36, 0.46);   /* the strongest framing rule  */

  /* Flat, boxed "ledger" look — panels are defined by hard borders, not float. */
  --shadow: 0 1px 1px rgba(20,24,32,.05);
  --radius: 2px;
  --tap: 44px;   /* minimum comfortable touch target — this is a phone-first tool */

  /* Financial-paper system: serif headlines (Libre Caslon Text) + a clean
     grotesque for UI + monospaced tabular figures for every price/number. */
  --font-display: 'Libre Caslon Text', 'Spectral', Georgia, 'Times New Roman', serif;
  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --maxw: 1200px;
}

/* ---- 2. Reset & base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(24,28,36,.04) 1px, transparent 0);
  background-size: 28px 28px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a { color: inherit; }
/* In-content body links read azure (the primary signal colour). Structural
   links (nav, footer, board/masthead) keep inheriting their container colour;
   a few links with their own rules (demobar, card foot, thesis) are set azure
   at their own definitions below. */
.section__note a, .prose a, .notice a, .disclosure a, .callout a, .break-notes a {
  color: var(--azure); font-weight:600;
  text-decoration: underline; text-decoration-color: rgba(23,99,201,.4); text-underline-offset: 2px;
}
.section__note a:hover, .prose a:hover, .notice a:hover, .disclosure a:hover,
.callout a:hover, .break-notes a:hover { color: var(--azure-deep); text-decoration-color: currentColor; }
img { max-width: 100%; }
h1,h2,h3,h4 { margin: 0; line-height: 1.04; }
p { margin: 0 0 .8em; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--font-mono); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ---- 3. Skip link & focus ---------------------------------------------- */
.skip { position:absolute; left:-999px; top:0; z-index:99; background:var(--gold); color:var(--gold-ink); padding:.6em 1em; font-weight:700; }
.skip:focus { left:8px; top:8px; }
/* Focus ring visible on BOTH light and dark surfaces: dark outline (passes on
   light backgrounds) + gold halo (passes on the dark masthead/ticker/thead). */
:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(241,195,59,.55); }

/* ---- 4. Masthead -------------------------------------------------------- */
.masthead {
  background: linear-gradient(168deg, #262b34, var(--slate-900) 80%);
  color: var(--cream);
  border-bottom: 2px solid var(--gold-deep);
  position: relative;
  z-index: 5; /* keep the masthead (and its region dropdown) above the demo bar */
}
/* Decorative layer holds the watermark + dot grid and clips them, so the
   masthead itself can keep overflow:visible and let the region dropdown escape. */
.masthead__bg { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.masthead__bg::before {
  content:""; position:absolute; inset:0; opacity:.28;
  background-image: radial-gradient(circle at 1px 1px, rgba(238,241,245,.06) 1.2px, transparent 0);
  background-size: 18px 18px;
}
/* Faint dimpled golf-ball watermark — retro-catalogue atmosphere, behind text. */
.masthead__bg::after {
  content:""; position:absolute; right:-38px; bottom:-78px; width:230px; height:230px;
  border-radius:50%; pointer-events:none; z-index:0; opacity:.55;
  background:
    radial-gradient(circle at 3px 3px, rgba(238,241,245,.05) 1.5px, transparent 0) 0 0 / 15px 15px,
    radial-gradient(circle at 38% 32%, rgba(238,241,245,.09), rgba(238,241,245,.02) 58%, transparent 72%);
}
.masthead .wrap { position:relative; z-index:1; }

/* Logo left · nav right, on one clean row. */
.masthead__top {
  display:flex; align-items:center; justify-content:space-between; gap: 18px 28px;
  padding: 22px 0 14px; flex-wrap: wrap; position: relative;
}
.nameplate { display:flex; align-items:center; gap:13px; }
.nameplate__mark { width:46px; height:46px; flex:none; display:grid; place-items:center; filter: drop-shadow(0 2px 5px rgba(0,0,0,.30)); }
.logo-mark { width:100%; height:100%; display:block; }
.nameplate__title { font-family: var(--font-display); font-weight:700; letter-spacing:.015em; line-height:.92; }
.nameplate__title b { display:block; font-size: clamp(26px, 4vw, 42px); color: var(--paper); }
.nameplate__title em {
  display:block; font-style:normal; font-family:var(--font-ui); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color: var(--gold);
  font-size: clamp(9px, 1.3vw, 11px); margin-top:7px;
}
.masthead__strap {
  font-size: clamp(12.5px,1.4vw,14px); color: rgba(243,237,220,.86);
  border-top:1px solid var(--line-dark); padding: 12px 0 0; max-width: 64ch; font-weight:400; line-height:1.5;
}
.masthead__strap .accent { color: var(--azure-bright); font-weight:700; }

/* nav — right side of the masthead row, calm pill links */
.topnav { display:flex; gap: 2px; flex-wrap:wrap; }
.topnav a {
  display:inline-flex; align-items:center; min-height:var(--tap); box-sizing:border-box;
  text-decoration:none; font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(243,237,220,.80); padding: 8px 13px; border-radius:5px;
  transition: background .15s, color .15s;
}
.topnav a:hover { background: rgba(243,237,220,.10); color:#fff; }
.topnav a[aria-current="page"] { background: var(--azure); color: #fff; }

/* ---- 5. (removed) Index ticker — the brand moment is the floating ball alone.
   The ticker was fully styled but never rendered into the page shell; rather
   than ship dead code, it's removed here and from app.js + DESIGN.md. ------ */

/* ---- 6. Section scaffolding -------------------------------------------- */
main { padding: 24px 0 10px; }
.eyebrow {
  display:flex; align-items:center; gap:11px; margin: 0 0 16px; padding-bottom:9px;
  border-bottom:1.5px solid var(--frame);
  text-transform:uppercase; letter-spacing:.11em; font-weight:800; font-size:13px; color: var(--slate-800);
}
.eyebrow::before { content:""; width:4px; height:15px; background:var(--azure); display:inline-block; border-radius:2px; }
.eyebrow .count { font-family:var(--font-mono); letter-spacing:0; color: var(--muted); font-weight:500; font-size:11.5px; text-transform:none; }
.section { margin: 0 0 28px; }
.section__note { font-size:13px; color: var(--ink-2); margin: -8px 0 12px; max-width: 70ch; line-height:1.5; }

/* ---- 7. Badges, chips, tags -------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding: 3px 8px; border-radius: 999px;
  border:1px solid var(--line); background:#fff; white-space:nowrap; line-height:1.3;
}
.conf { border:none; color:#fff; }
.conf--known_final_price     { background: var(--c-known); }
.conf--estimated_landed_price{ background: var(--c-estimated); }
.conf--listed_price_only     { background: var(--c-listed); }
.conf--not_suitable_for_ranking { background: var(--c-notrank); }
.conf__dot { width:7px; height:7px; border-radius:50%; background: currentColor; opacity:.0; }

.grade { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }
.grade--risk { background:#fbe9e4; border-color:#eab9ad; color:#9a3322; }

.src {
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px;
  padding: 3px 9px 3px 7px; border-radius:999px; border:1px solid var(--line); background:#fff;
}
.src__trust { width:8px; height:8px; border-radius:50%; }
.src__trust--high { background: var(--trust-green); }
.src__trust--medium { background: var(--gold-deep); }
.src__trust--low { background: var(--muted); }

.tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 8px; border-radius:3px; }
.tag--pickup { background:#e9f0fb; color:var(--azure-deep); border:1px solid #bcd3f2; }
.tag--affiliate { background: #fdf6e3; color: var(--gold-ink); border:1px solid #e8cf7e; }
.tag--ddp { background:#eef1ff; color:#36407e; border:1px solid #c5cdf3; }
.tag--demo { background:transparent; color:var(--muted); border:1px dashed var(--line); text-transform:none; font-weight:600; letter-spacing:0; }

/* Data-mode badges (provenance). Demo = muted/dashed; Verified = green; Live = blue. */
.mode { border:none; }
.mode--demo { background:transparent; color:var(--muted); border:1px dashed var(--line); }
.mode--verified { background:#e3ecfb; color:var(--azure-deep); }
.mode--live { background:#e8ecff; color:#33407c; }

/* ---- 5b. Demo dataset strip -------------------------------------------- */
.demobar { background: var(--paper-2); border-bottom:1px solid var(--line); }
.demobar .wrap { padding-top:7px; padding-bottom:7px; display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--ink-2); }
.demobar .dot { width:7px; height:7px; border-radius:50%; background:var(--gold-deep); display:inline-block; flex:none; }
.demobar b { color: var(--slate-800); }
.demobar a { color: var(--azure); font-weight:700; }
.demo-link { font-family:var(--font-mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* delta pill */
.delta { font-family:var(--font-mono); font-weight:700; font-size:12.5px; display:inline-flex; align-items:center; gap:3px; }
.delta--down { color: var(--drop); }
.delta--up { color: var(--rise); }
.delta--flat { color: var(--muted); }

/* ---- 8. Sparkline ------------------------------------------------------- */
.spark { display:block; overflow:visible; }
.spark__line { stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.spark__dot { stroke:#fff; stroke-width:1.2; }
.spark--down .spark__line, .spark--down .spark__dot { stroke: var(--drop); fill: var(--drop); }
.spark--up   .spark__line, .spark--up   .spark__dot { stroke: var(--rise); fill: var(--rise); }
.spark--flat .spark__line, .spark--flat .spark__dot { stroke: var(--muted); fill: var(--muted); }
.spark--down .spark__stop-top { stop-color: var(--drop); stop-opacity:.22; }
.spark--up   .spark__stop-top { stop-color: var(--rise); stop-opacity:.20; }
.spark--flat .spark__stop-top { stop-color: var(--muted); stop-opacity:.14; }
.spark__stop-bot { stop-color:#fff; stop-opacity:0; }
.spark-empty { color: var(--muted); font-family:var(--font-mono); }

/* ---- 9. Leaderboard (hero) --------------------------------------------- */
.board { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.board__head {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: var(--slate-850); color: var(--cream); padding: 13px 20px;
  border-bottom: 2px solid var(--gold-deep);
}
.board__head h2, .board__head h3 { font-family:var(--font-display); font-weight:700; font-size: 18px; letter-spacing:.02em; color:#fff; margin:0; }
.board__head .hint { font-family:var(--font-mono); font-size:11px; color: rgba(243,237,220,.62); }

.lrow {
  display:grid; align-items:center; gap: 3px 20px; padding: 12px 20px;
  grid-template-columns: 54px minmax(0,1fr) 132px 138px;
  border-top:1px solid var(--line-soft);
}
.lrow:nth-child(even) { background: #f7f9fb; }
.lrow--podium.lrow--1 { box-shadow: inset 3px 0 0 var(--gold-deep); }
.lrow--podium.lrow--2 { box-shadow: inset 3px 0 0 #b7bbc1; }
.lrow--podium.lrow--3 { box-shadow: inset 3px 0 0 var(--bronze); }

.medal {
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-size:19px; color:var(--slate-900);
  background: var(--paper-2); border:1px solid var(--line);
}
.lrow--1 .medal { background: var(--gold); border-color: var(--gold-deep); color:#4a3905; }
.lrow--2 .medal { background: #e4e7ea; border-color:#b7bbc1; }
.lrow--3 .medal { background: #ecc6a3; border-color:var(--bronze); color:#5e3a1c; }

.lrow__main { min-width:0; }
.lrow__title { font-weight:800; font-size: clamp(16px,2.1vw,19px); letter-spacing:-.01em; }
.lrow__title a { text-decoration:none; }
.lrow__title a:hover { text-decoration: underline; text-decoration-color: var(--gold-deep); }
.lrow__sub { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:7px; }
.lrow__metaline { font-size:12px; color:var(--muted); margin-top:6px; font-family:var(--font-mono); }

.lrow__spark { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.lrow__spark .delta { font-size:12px; }

.priceblock { text-align:right; }
.priceblock__landed { font-family:var(--font-mono); font-weight:700; font-size: clamp(23px,2.9vw,29px); color: var(--slate-900); line-height:.92; }
.priceblock__landed .u { font-size:12px; color:var(--muted); font-family:var(--font-mono); letter-spacing:0; }
.priceblock__listed { font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:5px; }
.priceblock__listed s { color:var(--red-ink); text-decoration-thickness:1px; }
.priceblock__dozen { font-size:11px; color:var(--muted); margin-top:3px; }

/* ---- 10. "Looks like vs lands at" explainer ---------------------------- */
.thesis {
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: clamp(12px,3vw,30px);
  background: linear-gradient(125deg, #2a2f37 0%, var(--slate-900) 45%, var(--azure-night) 100%);
  color: var(--cream); border-radius: var(--radius); padding: 22px clamp(18px,4vw,32px);
  box-shadow: var(--shadow); border:1px solid rgba(243,237,220,.08);
}
.thesis__cell .k { display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.13em; font-size:10.5px; font-weight:800; opacity:.78; }
.thesis__cell .v { font-family:var(--font-display); font-size: clamp(28px,4.4vw,40px); line-height:1; margin-top:8px; }
.thesis__cell--looks .v { color:#e7a597; }
.thesis__cell--lands .v { color: var(--gold); }
.thesis__cell small { display:block; font-family:var(--font-mono); font-size:11.5px; opacity:.78; margin-top:8px; }
.thesis__arrow { font-size:34px; color: var(--gold); }
.thesis__foot { grid-column:1/-1; border-top:1px solid var(--line-dark); margin-top:6px; padding-top:12px; font-size:13px; }
.thesis__foot a { color: var(--azure-bright); }
@media (max-width: 720px){
  .thesis { grid-template-columns: 1fr; text-align:left; }
  .thesis__arrow { transform: rotate(90deg); }
}

/* ---- 11. Card grid for movers / pickup / listed-only ------------------- */
.cards { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.dcard {
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--c-listed);
  border-radius:var(--radius); padding:15px 16px 15px 14px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:9px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
/* Colour the card edge by landed-cost confidence — reinforces the trust signal. */
.dcard[data-conf="known_final_price"]      { border-left-color: var(--c-known); }
.dcard[data-conf="estimated_landed_price"] { border-left-color: var(--c-estimated); }
.dcard[data-conf="listed_price_only"]      { border-left-color: var(--c-listed); }
.dcard[data-conf="not_suitable_for_ranking"]{ border-left-color: var(--c-notrank); }
.dcard:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(22,33,15,.04), 0 14px 28px -16px rgba(10,46,28,.42); }
.dcard__top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.dcard__title { font-weight:800; font-size:15px; }
.dcard__row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.dcard__price { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:2px; }
.dcard__landed { font-family:var(--font-mono); font-weight:700; font-size:24px; color:var(--slate-900); line-height:.92; }
.dcard__landed .u { font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.dcard__listed { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.dcard--muted { background: #f6f3ea; border-style:dashed; }
.dcard__foot { margin-top:auto; font-size:11.5px; color:var(--muted); font-family:var(--font-mono); display:flex; justify-content:space-between; gap:8px; align-items:center; }
.dcard__foot a { color: var(--azure); font-weight:700; text-decoration:none; }
.dcard__foot a:hover { text-decoration:underline; }

/* notice banner for non-rankable modules */
.notice {
  border-left:4px solid var(--c-listed); background:#eef1f5; padding:11px 14px; border-radius:0 var(--radius) var(--radius) 0;
  font-size:13px; color:var(--ink-2); margin-bottom:14px;
}
.notice--risk { border-left-color: var(--c-estimated); background:#fdf3e6; }
.notice b { color: var(--ink); }

/* ---- 12. Controls / filters -------------------------------------------- */
.controls { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; box-shadow:var(--shadow); }
.controls label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); display:flex; gap:7px; align-items:center; }
.controls select, .controls input[type="search"], .controls input[type="number"] {
  font-family:var(--font-ui); font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink);
}
.chiprow { display:flex; flex-wrap:wrap; gap:7px; }
.chip {
  font-size:12px; font-weight:700; padding:6px 11px; border-radius:999px; border:1px solid var(--line);
  background:#fff; cursor:pointer; color:var(--ink-2); letter-spacing:.02em;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.chip:hover { border-color: var(--slate-700); color: var(--slate-900); }
.chip[aria-pressed="true"] { background: var(--azure); color:#fff; border-color:var(--azure); }
.toggle { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-2); }
.toggle input { width:16px; height:16px; accent-color: var(--azure); }

/* ---- 13. Legend --------------------------------------------------------- */
.legend { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:12px; color:var(--ink-2); align-items:center; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* ---- 14. Scoreboard table ---------------------------------------------- */
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
table.scoreboard { width:100%; border-collapse:collapse; min-width: 880px; }
.scoreboard thead th {
  position:sticky; top:0; z-index:2; background: var(--slate-900); color: var(--cream);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:11px 12px; white-space:nowrap; font-weight:700;
}
.scoreboard thead th.num { text-align:right; }
.scoreboard th.sortable { cursor:pointer; }
.scoreboard th.sortable:hover { color:#fff; }
.scoreboard th .arrow { opacity:.4; font-size:10px; }
.scoreboard th[aria-sort="ascending"] .arrow,
.scoreboard th[aria-sort="descending"] .arrow { opacity:1; color: var(--gold); }
.scoreboard tbody td { padding:11px 12px; border-top:1px solid var(--line-soft); font-size:13.5px; vertical-align:middle; }
.scoreboard tbody tr.deal--alt { background:#f6f8fb; } /* class-striped: breakdown rows interleave */
.scoreboard tbody tr.deal:hover { background:#eef4fc; }
.scoreboard td.num { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.scoreboard td.model { font-weight:700; }
.scoreboard td.model small { display:block; font-weight:500; color:var(--muted); font-size:11.5px; }
/* Landed €/ball is the product's hero metric — it must win the eye even inside
   the dense table. Louder figure + a quiet azure column wash (a surface tint,
   not a side-stripe) so the column reads as the anchor among the numbers. */
.landed-cell b { font-size:17px; font-weight:800; color:var(--slate-900); letter-spacing:-.01em; }
.scoreboard thead th.landed-col { box-shadow: inset 0 -3px 0 var(--azure-bright); }
.scoreboard tbody td.landed-cell { background: rgba(23,99,201,.06); }
.scoreboard tbody tr.deal:hover td.landed-cell { background: rgba(23,99,201,.10); }
.btn-break {
  border:1px solid var(--line); background:var(--paper); border-radius:3px; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; font-weight:700; padding:4px 8px; color:var(--slate-800);
}
.btn-break:hover { background:#eef4fc; border-color: var(--azure); }
tr.breakdown { display:none; }
tr.breakdown.open { display: table-row; }
tr.breakdown td { background:#f1f3f6; padding:0; border-top:none; }
.break-inner { padding:14px 18px; display:flex; gap:30px; flex-wrap:wrap; }
.break-table { border-collapse:collapse; font-family:var(--font-mono); font-size:12.5px; min-width:260px; }
.break-table td { padding:3px 14px 3px 0; border:none !important; }
.break-table td.amt { text-align:right; font-variant-numeric:tabular-nums; }
.break-table tr.total td { border-top:1.5px solid var(--ink) !important; font-weight:700; padding-top:6px; }
.break-notes { font-size:12px; color:var(--ink-2); max-width:46ch; }
.break-notes li { margin-bottom:4px; }
.row-flag { font-size:12px; }

/* ---- 15. Editorial (grade guide, methodology) -------------------------- */
.prose { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding: clamp(20px,4vw,40px); max-width: 860px; }
.prose h2 { font-family:var(--font-display); font-weight:700; font-size:28px; margin: 28px 0 10px; color:var(--slate-900); }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:18px; margin:20px 0 6px; }
.prose p, .prose li { font-size:15px; color:var(--ink-2); }
.prose ul { padding-left:20px; }
.prose code { font-family:var(--font-mono); background:var(--paper-2); padding:1px 5px; border-radius:3px; font-size:13px; }
.prose .formula { background:var(--slate-900); color:var(--cream); border-radius:var(--radius); padding:16px 18px; font-family:var(--font-mono); font-size:13px; overflow-x:auto; }
.prose .formula b { color: var(--gold); }

.gradeladder { display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.gl {
  display:grid; grid-template-columns: 150px 1fr 130px; gap:14px; padding:14px 16px; border-top:1px solid var(--line-soft); align-items:start;
}
.gl:first-child { border-top:none; }
.gl--excluded { background:#f5f6f8; }
.gl__name { font-weight:800; }
.gl__name small { display:block; color:var(--muted); font-weight:600; font-size:11.5px; margin-top:2px; }
.gl__desc { font-size:13.5px; color:var(--ink-2); }
.riskmeter { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.riskmeter .bar { height:7px; border-radius:4px; background:var(--paper-2); overflow:hidden; }
.riskmeter .bar i { display:block; height:100%; }
.risk-none .bar i{width:8%;background:var(--trust-green)} .risk-very_low .bar i{width:20%;background:var(--trust-green)}
.risk-low .bar i{width:38%;background:#9aa526} .risk-medium .bar i{width:60%;background:var(--gold-deep)}
.risk-high .bar i{width:82%;background:#e0762a} .risk-very_high .bar i{width:100%;background:#c2410c}

.callout { border-left:4px solid var(--azure); background:#eef4fc; padding:14px 16px; border-radius:0 var(--radius) var(--radius) 0; margin:18px 0; }
.callout--warn { border-left-color: var(--c-estimated); background:#fdf3e6; }
.callout strong { color:var(--ink); }

.disclosure { font-size:13px; color:var(--ink-2); background:var(--paper-2); border:1px dashed var(--line); border-radius:var(--radius); padding:14px 16px; }

/* ---- 16. Footer — brand on the left edge · links centred · sources on the
   right edge, with plenty of air. --------------------------------------- */
.footer { background: var(--slate-900); color: rgba(243,237,220,.82); margin-top:40px; border-top:3px solid var(--gold-deep); }
.footer__grid { display:grid; grid-template-columns: 1fr auto 1fr; gap: 24px 48px; padding:38px 0 30px; align-items:start; }
.footer h3 { color: var(--gold); text-transform:uppercase; letter-spacing:.1em; font-size:11px; margin-bottom:13px; font-weight:700; }
.footer a { color:#fff; text-decoration:none; }
.footer a:hover { text-decoration:underline; text-decoration-color: var(--azure-bright); }

/* left edge — compact brand lockup + one slim line */
.footer__brand { max-width: 40ch; }
.footer__lockup { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.footer__lockup b { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:.02em; color:var(--paper); }
.footer__mark { width:32px; height:32px; flex:none; display:grid; place-items:center; }
.footer__disclosure { font-size:12px; line-height:1.55; color: rgba(243,237,220,.72); margin:0; }

/* centre — navigation, centred */
.footer__nav { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.footer__nav h3 { margin-bottom:11px; }

/* right edge — sources, right-aligned */
.footer__sources { text-align:right; }
.footer__src { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.footer__src span { font-family:var(--font-mono); font-size:11px; background: rgba(243,237,220,.08); padding:3px 8px; border-radius:3px; }

.footer__legal { border-top:1px solid var(--line-dark); padding:16px 0; font-size:11.5px; color: rgba(243,237,220,.6); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---- 17. Responsive ----------------------------------------------------- */
@media (max-width: 860px){
  .footer__grid { grid-template-columns: 1fr; gap:26px; }
  .footer__nav { align-items:flex-start; text-align:left; }
  .footer__sources { text-align:left; }
  .footer__src { justify-content:flex-start; }
}
@media (max-width: 720px){
  .lrow { grid-template-columns: 44px 1fr; }
  .lrow__spark { grid-column: 2; flex-direction:row; align-items:center; gap:10px; }
  .priceblock { grid-column: 2; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
  .priceblock__listed, .priceblock__dozen { margin-top:0; }
  .medal { width:38px; height:38px; font-size:18px; }
  .gl { grid-template-columns: 1fr; gap:8px; }
  .riskmeter { flex-direction:row; align-items:center; }
  .riskmeter .bar { width:120px; }
}
/* deals table → stacked cards on phones */
@media (max-width: 680px){
  .table-scroll { border:none; box-shadow:none; background:transparent; overflow:visible; }
  table.scoreboard { min-width:0; }
  .scoreboard thead { position:absolute; left:-9999px; }
  .scoreboard tbody tr.deal {
    display:block; background:#fff !important; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:12px; padding:6px 4px;
  }
  /* The display:block above out-specifies the UA [hidden] rule, so JS filtering
     would silently fail on phones without this explicit collapse. */
  .scoreboard tbody tr.deal[hidden],
  .scoreboard tbody tr.breakdown[hidden] { display:none !important; }
  .scoreboard tbody td { display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--line-soft); text-align:right; padding:8px 14px; }
  .scoreboard tbody td:first-child { border-top:none; }
  .scoreboard td::before { content: attr(data-label); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:var(--muted); text-align:left; }
  .scoreboard td.model { text-align:left; }
  .scoreboard td.model::before { content:""; }
  tr.breakdown.open { display:block; }
  tr.breakdown td { display:block; }
  tr.breakdown td::before { content:""; }
  .break-inner { padding:12px; gap:16px; }
}

/* ============================================================================
   18. Command centre — red price-drop strip + explore cards
   ========================================================================== */
.dropstrip { margin: 4px 0 30px; }
.dropstrip__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px; flex-wrap:wrap; }
.dropstrip__flag { display:inline-flex; align-items:center; gap:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--red-ink); }
.dropstrip__icon { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; font-size:10px; line-height:1; }
.dropstrip__all { font-weight:700; font-size:12.5px; color:var(--azure); text-decoration:none; }
.dropstrip__all:hover { text-decoration:underline; }
.dropstrip__items { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:10px; }
.dropalert {
  display:flex; flex-direction:column; gap:7px; background:var(--paper);
  border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--radius);
  padding:11px 13px; text-decoration:none; color:inherit; box-shadow:var(--shadow);
  transition:transform .14s, box-shadow .14s;
}
.dropalert:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(20,24,32,.05), 0 14px 26px -16px rgba(20,24,32,.42); }
.dropalert__name { font-weight:800; font-size:13.5px; letter-spacing:-.01em; }
.dropalert__meta { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.dropalert__price { font-family:var(--font-mono); font-weight:700; font-size:21px; color:var(--ink); }
.dropalert__price small { font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.dropalert__delta { font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--red-ink); }

.explore { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.explore__card {
  display:flex; flex-direction:column; gap:5px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 15px; text-decoration:none; color:inherit; box-shadow:var(--shadow);
  transition:border-color .14s, transform .14s;
}
.explore__card:hover { border-color:var(--azure); transform:translateY(-2px); }
.explore__card b { font-size:14.5px; }
.explore__card span { font-size:12px; color:var(--muted); line-height:1.45; }

/* ============================================================================
   19. Deal Brief
   ========================================================================== */
.brief__crumbs { font-size:12px; color:var(--muted); margin:0 0 14px; }
.brief__crumbs a { color:var(--azure); text-decoration:none; }
.brief__crumbs a:hover { text-decoration:underline; }
.brief__crumbs span[aria-current] { color:var(--ink-2); font-weight:600; }
.brief { display:flex; flex-direction:column; gap:14px; }
.brief__hero {
  display:grid; grid-template-columns: 1fr auto; gap:18px 28px; align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px clamp(18px,3vw,28px); position:relative; overflow:hidden;
}
.brief__badges { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px; }
.brief__title { font-weight:800; font-size:clamp(22px,3vw,30px); letter-spacing:-.015em; }
.brief__rawtitle { font-family:var(--font-mono); font-size:12px; color:var(--muted); margin:7px 0 11px; }
.brief__pricebox { text-align:right; min-width:230px; }
.brief__landed { font-family:var(--font-mono); font-weight:700; font-size:clamp(34px,5vw,46px); color:var(--ink); line-height:.95; }
.brief__landed .u { display:block; font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:5px; letter-spacing:0; }
.brief__landed--none { color:var(--c-listed); }
.brief__listed { font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin:9px 0 14px; }
.brief__listed s { color:var(--red-ink); text-decoration-thickness:1px; }
.brief__stats {
  display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0;
}
.brief__stats > div { background:var(--paper); padding:12px 14px; }
.brief__stats dt { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin:0; }
.brief__stats dd { margin:5px 0 0; font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--ink); }
.brief__grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.brief__card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; }
.brief__card h2 { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); margin-bottom:11px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.brief__card-note { font-family:var(--font-mono); font-size:11px; color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none; }
.brief__why, .brief__risks { margin:0; padding-left:18px; }
.brief__why li, .brief__risks li { font-size:13.5px; color:var(--ink-2); margin-bottom:8px; line-height:1.5; }
.brief__risks li::marker { color:var(--c-estimated); }
.brief__muted { font-size:12.5px; color:var(--muted); margin:8px 0 0; }
.brief__muted a, .brief__card a { color:var(--azure); }
.brief__source { margin-top:4px; }
.brief__cta { margin-top:6px; }
.brief__back { margin-top:2px; }
.brief__back a { color:var(--azure); text-decoration:none; font-weight:600; }
.brief__trend { padding:6px 0; }

/* Go-to-deal CTA — the only outbound surface on the site */
.gotodeal { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:15px; padding:12px 22px; border-radius:8px; text-decoration:none; }
.gotodeal--live { background:var(--red); color:#fff; box-shadow:0 8px 18px -10px rgba(217,45,32,.75); }
.gotodeal--live:hover { background:var(--red-ink); }
.gotodeal--demo { background:var(--paper-2); color:var(--ink-2); border:1px dashed var(--muted); }
.gotodeal--demo:hover { background:#dde1e8; }
.gotodeal-wrap { display:flex; flex-direction:column; gap:9px; align-items:flex-end; }
.gotodeal__note { font-size:11.5px; color:var(--muted); max-width:36ch; margin:0; text-align:right; line-height:1.5; }
.gotodeal__note a { color:var(--azure); }
.brief__cta .gotodeal-wrap { align-items:flex-start; }
.brief__cta .gotodeal__note { text-align:left; }

/* table → brief affordances */
.model__link { color:var(--ink); text-decoration:none; font-weight:700; }
.model__link:hover { color:var(--azure); text-decoration:underline; }
.btn-brief { display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--azure); text-decoration:none; border:1px solid var(--line); border-radius:3px; padding:4px 7px; margin-right:5px; white-space:nowrap; }
.btn-brief:hover { border-color:var(--azure); background:#eef4fc; }
.risk-summary { cursor:pointer; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--c-notrank); padding:10px 0; }

@media (max-width: 720px){
  .brief__hero { grid-template-columns:1fr; }
  .brief__pricebox { text-align:left; min-width:0; }
  .gotodeal-wrap { align-items:flex-start; }
  .gotodeal__note { text-align:left; }
  .brief__stats { grid-template-columns: repeat(2,1fr); }
  .brief__grid { grid-template-columns:1fr; }
}
/* terse why/risks lists + the "hot" emphasis colour */
.brief__why li, .brief__risks li { margin-bottom:6px; }
.hot { color: var(--red-ink); font-weight:800; }
.brief__card--wide { width:100%; }

/* ============================================================================
   20. Whole-row / whole-card clickable → Deal Brief (the "View deal" affordance)
   A single stretched link makes the entire row/card one big target; the visible
   "View deal" button is the cue. Badges are spans, so no nested-link conflict.
   ========================================================================== */
.lrow { position:relative; cursor:pointer; transition: background .12s; }
.lrow:hover { background:#eef4fc !important; }
.lrow__link { text-decoration:none; color:inherit; }
.lrow__link::after { content:""; position:absolute; inset:0; z-index:1; }
.lrow__cta {
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-family:var(--font-ui); font-weight:800; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--azure); border:1.5px solid var(--azure); border-radius:2px; padding:6px 12px; background:#fff;
  transition: background .12s, color .12s;
}
.lrow:hover .lrow__cta { background:var(--azure); color:#fff; }
.lrow--1 .lrow__cta { color:#fff; background:var(--red); border-color:var(--red); }
.lrow--1:hover .lrow__cta { background:var(--red-ink); border-color:var(--red-ink); }

.dcard { position:relative; }
.dcard__title a { text-decoration:none; color:inherit; }
.dcard__title a::after { content:""; position:absolute; inset:0; z-index:1; }
.dcard__cta {
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-ui); font-weight:800;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--azure);
}
.dcard:hover .dcard__cta { text-decoration:underline; }

/* Hard "boxed ledger" frames on the major panels. */
.board, .table-scroll, .prose, .gradeladder, .controls,
.brief__hero, .brief__card, .brief__stats, .explore__card { border-width:1.5px; }

/* ============================================================================
   21. Design-polish pass (2026-06-07) — beginner-first hierarchy & declutter.
   Premium "almanac" look kept intact. Goal: the landed €/ball is the
   unmistakable hero; trust / grade / confidence survive but recede; raw eBay
   titles stop competing. Nothing is removed — only re-weighted.
   ========================================================================== */

/* --- Masthead tools: region switcher + nav share the right side --------- */
.masthead__tools { display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; justify-content:flex-end; }

/* Region / currency switcher — design-ready slot (multi-region not wired yet) */
.regionpick { position:relative; font-size:12.5px; }
.regionpick > summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  min-height:var(--tap); box-sizing:border-box;
  padding:7px 12px; border:1px solid rgba(243,237,220,.22); border-radius:999px;
  color: rgba(243,237,220,.92); font-weight:700; letter-spacing:.02em; white-space:nowrap;
  background: rgba(243,237,220,.05); transition: background .15s, border-color .15s;
}
.regionpick > summary::-webkit-details-marker { display:none; }
.regionpick > summary:hover { background: rgba(243,237,220,.12); border-color: rgba(243,237,220,.4); }
.regionpick > summary .chev { font-size:9px; opacity:.7; transition: transform .15s; }
.regionpick[open] > summary .chev { transform: rotate(180deg); }
.regionpick__flag { font-size:14px; line-height:1; }
.regionpick__panel {
  position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:220px;
  background:#fff; color:var(--ink); border:1.5px solid var(--frame); border-radius:var(--radius);
  box-shadow: 0 14px 32px -14px rgba(10,14,20,.5); padding:6px;
}
.regionpick__row { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:3px; font-weight:700; font-size:13px; }
.regionpick__row--active { background:#eef4fc; color:var(--azure-deep); }
.regionpick__row--soon { color:var(--muted); font-weight:600; }
.regionpick__row--soon .soon { margin-left:auto; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; background:var(--paper-2); color:var(--muted); padding:2px 6px; border-radius:3px; }
.regionpick__note { font-size:11px; color:var(--muted); padding:7px 11px 4px; border-top:1px solid var(--line-soft); margin-top:4px; line-height:1.5; }

/* --- Hero golf-ball moment: the masthead mark gently floats + the index
       line stays the focal point. Reduced-motion users get a static mark. --- */
@media (prefers-reduced-motion: no-preference) {
  .masthead .nameplate__mark { animation: ballfloat 6.5s ease-in-out infinite; transform-origin:50% 60%; }
  @keyframes ballfloat {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50%     { transform: translateY(-5px) rotate(3deg); }
  }
}

/* --- Leaderboard hierarchy: price louder, supporting signals quieter ----- */
.priceblock__landed { font-size: clamp(27px, 3.3vw, 35px); letter-spacing:-.02em; }
.priceblock__landed .u { display:block; margin-top:3px; font-weight:600; }
.lrow__title { font-size: clamp(17px, 2.2vw, 20px); }

/* Non-new grade flag, promoted into the row title so a brand name can't read as
   new when it isn't. Calm + legible (not the 10px demoted chip, and not alarm
   styling — the board only ranks low/medium-risk grades, so a neutral qualifier
   states the condition without overstating risk). ink-2 on paper-2 = 6.8:1.
   z-index sits it above the stretched row link so its tooltip works. */
.lrow__grade {
  display:inline-block; vertical-align:middle; margin-left:9px; position:relative; z-index:2;
  font-family:var(--font-ui); font-weight:700; font-size:11px; letter-spacing:.02em;
  color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:2px 8px;
}
/* "vs new" baseline marker on the deals table's vs-RRP cell (non-new grades). */
.vs-new { font-family:var(--font-ui); font-size:10px; font-weight:600; letter-spacing:0; color:var(--muted); text-transform:none; }

/* Demote the chip row — smaller, lighter, tighter; every signal still legible. */
.lrow__sub { gap:5px; margin-top:6px; row-gap:5px; }
.lrow__sub .badge,
.lrow__sub .src,
.lrow__sub .tag { font-size:10px; padding:2px 7px; }
.lrow__sub .src { font-weight:600; }
.lrow__sub .grade { background:transparent; }
.lrow__sub .conf { font-weight:700; } /* the load-bearing one keeps its colour + weight */

/* The board row carries no raw eBay title — the model name + chips are enough
   on the homepage; the full raw title lives on the Deal Brief + All Deals table. */

/* Card chips get the same calmer weight. */
.dcard__row .badge, .dcard__row .src, .dcard__row .tag { font-size:10px; padding:2px 7px; }

/* Compact legend: a thin divider between the price-confidence keys and trust. */
.legend__sep { width:1px; height:14px; background:var(--line); display:inline-block; }

/* Thesis is the single page-opening explainer — give it room to breathe. */
.thesis { margin-bottom:24px; }

/* ============================================================================
   22. Whole-site consistency pass (2026-06-07, Pass 3) — one clean product.
   One section-heading pattern everywhere (the dark "board cap"); chip weight
   unified across board/cards/table/brief; calmer document sub-headings; a
   warmer empty state; and the mobile deals-table overflow finally contained.
   ========================================================================== */

/* --- One section-heading rule: the dark cap bar, sitewide ---------------- */
.caphead {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
  background: var(--slate-850); color: var(--cream);
  padding: 12px 18px; border-radius: var(--radius);
  border:1.5px solid var(--frame); border-bottom:3px solid var(--gold-deep);
  box-shadow: var(--shadow); margin: 0 0 16px;
}
.caphead__title { font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.02em; color:#fff; margin:0; }
.caphead__note { font-family:var(--font-mono); font-size:11.5px; color: rgba(243,237,220,.62); letter-spacing:0; }

/* Document sub-headings (methodology / grade guide) calm down so they read as
   sub-sections under the cap, not a competing second heading system. */
.prose h2 { font-size:20px; margin:24px 0 8px; letter-spacing:-.005em; }
.prose h2:first-child { margin-top:0; }

/* --- Chip weight: identical calm weight on the table, matching board/cards - */
.scoreboard tbody td .badge,
.scoreboard tbody td .src,
.scoreboard tbody td .tag { font-size:10px; padding:2px 7px; }
.scoreboard tbody td .src { font-weight:600; }
.cell-chips { display:inline-flex; flex-wrap:wrap; gap:5px; align-items:center; }

/* --- Warmer empty state (price drops, etc.) ------------------------------ */
.emptystate {
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding: clamp(22px,4vw,34px); text-align:center; color:var(--ink-2);
}
.emptystate__icon { font-size:26px; line-height:1; display:block; margin-bottom:10px; opacity:.7; }
.emptystate b { color:var(--slate-900); display:block; font-size:15px; margin-bottom:5px; }
.emptystate p { font-size:13px; margin:0 auto; max-width:46ch; line-height:1.55; }
.emptystate a { color:var(--azure); font-weight:700; }

/* --- Mobile deals table: contain the multi-chip cells so nothing clips ---- */
@media (max-width: 680px){
  .scoreboard tbody td { flex-wrap:wrap; row-gap:8px; }
  .scoreboard tbody td .cell-chips { justify-content:flex-end; flex:1 1 auto; min-width:0; }
  .scoreboard td.model .cell-chips { justify-content:flex-start; }
}

/* ============================================================================
   23. Reduced-motion contract — honour it in full. The ball-float and the (now
   removed) ticker were already guarded; this catches the hover-lift transforms
   and transitions on interactive cards/controls so reduced-motion users get an
   instant, still interface, not a half-animated one.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dcard, .lrow, .dropalert, .explore__card, .gotodeal--live,
  .chip, .toggle, .topnav a, .regionpick > summary, .regionpick > summary .chev,
  .btn-break, .btn-brief, .lrow__cta, .dcard__cta, .model__link {
    transition: none !important;
  }
  .dcard:hover, .lrow:hover, .dropalert:hover, .explore__card:hover { transform: none !important; }
}

/* ============================================================================
   24. Ball index page — the product's centre. Phone-first; the "normal price"
   is the hero, the cheapest-now list scores each source against it. All
   features (breakdown, trend, lists) work identically at every width.
   ========================================================================== */
.ballhead { margin: 6px 0 16px; }
.ballhead__title { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,6vw,40px); letter-spacing:.01em; color:var(--slate-900); line-height:1.02; }
.ballhead__sub { font-family:var(--font-mono); font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:8px 0 0; }
.ballhead__blurb { font-size:14.5px; color:var(--ink-2); max-width:60ch; margin:9px 0 0; line-height:1.55; }

/* Hero: the normal price. Hard-boxed ledger panel, mono hero figure. */
.ballhero {
  display:grid; gap:14px; background:var(--paper); border:1.5px solid var(--frame);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(16px,4vw,24px); margin:0 0 22px;
}
.ballhero__k { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.11em; color:var(--slate-800); }
.ballhero__v { font-family:var(--font-mono); font-weight:700; font-size:clamp(40px,11vw,60px); line-height:.92; color:var(--slate-900); letter-spacing:-.02em; margin-top:6px; }
.ballhero__v .u { display:block; font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0; margin-top:6px; }
.ballhero__none { font-family:var(--font-ui); font-size:20px; font-weight:700; color:var(--c-listed); letter-spacing:0; }
.ballhero__band { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2); }
.ballhero__conf { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:2px; }
.ballhero__fresh { font-size:12px; color:var(--muted); }
.ballhero__note { font-size:12.5px; color:var(--ink-2); margin:2px 0 0; }

.idxconf { display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.idxconf--firm { background:#e3ecfb; color:var(--azure-deep); }
.idxconf--provisional { background:#fdf3e6; color:var(--c-estimated); }
.idxconf--rrp_anchored, .idxconf--none { background:var(--paper-2); color:var(--ink-2); }

/* Today's best — the "is this a good price right now" answer, set apart. */
.ballhero__today { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; background:#eef4fc; border:1px solid #cfe0f6; border-radius:var(--radius); padding:12px 14px; }
.ballhero__today--none { color:var(--ink-2); font-size:13px; }
.ballhero__today-k { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--azure-deep); }
.ballhero__today-v { font-family:var(--font-mono); font-weight:700; font-size:22px; color:var(--slate-900); }
.ballhero__today-v .u { font-size:11px; color:var(--muted); }
.ballhero__today-src { display:inline-flex; gap:6px; flex-wrap:wrap; }

.ballsec { margin: 0 0 22px; }

/* The vs-normal pill — the core comparison. Below normal = good (azure). */
.vsnorm { display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.vsnorm--below { background:#e3ecfb; color:var(--azure-deep); }
.vsnorm--above { background:var(--paper-2); color:var(--muted); }
.vsnorm--at { background:var(--paper-2); color:var(--ink-2); }
.vsnorm--grade { background:var(--paper-2); color:var(--ink-2); text-transform:none; }

/* Cheapest-now list. Each source is a boxed row; breakdown expands in place. */
.pricelist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pricerow { background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:13px 14px; display:flex; flex-direction:column; gap:9px; }
.pricerow__top { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px; }
.pricerow__src { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pricerow__price { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.pricerow__pb { font-family:var(--font-mono); font-weight:700; font-size:21px; color:var(--slate-900); line-height:1; }
.pricerow__pb .u { font-size:11px; color:var(--muted); margin-left:2px; }
.pricerow__meta { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.pricerow__actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }

.pricerow__go { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); box-sizing:border-box; font-weight:800; font-size:13px; text-decoration:none; padding:9px 16px; border-radius:6px; background:var(--azure); color:#fff; }
.pricerow__go:hover { background:var(--azure-deep); }
.pricerow__go--demo { background:var(--paper-2); color:var(--ink-2); border:1px dashed var(--muted); }
.pricerow__go--demo:hover { background:#dde1e8; }
.pricerow__break { font-size:12.5px; }
.pricerow__break > summary { display:inline-flex; align-items:center; min-height:var(--tap); padding:6px 2px; box-sizing:border-box; cursor:pointer; color:var(--azure); font-weight:700; list-style:none; }
.pricerow__break > summary::-webkit-details-marker { display:none; }
.pricerow__break > summary::before { content:"＋ "; font-family:var(--font-mono); }
.pricerow__break[open] > summary::before { content:"－ "; }
.pricerow__break .break-inner { padding:12px 0 2px; }

/* Used / practice fold-away. */
.ballother > summary { cursor:pointer; font-weight:700; font-size:13.5px; color:var(--ink-2); padding:11px 14px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); list-style:none; }
.ballother > summary::-webkit-details-marker { display:none; }
.ballother[open] > summary { margin-bottom:10px; }
.balltrend { background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.balltrend .spark { width:100%; height:64px; }

/* Action cards: alert + report (visible, honestly not-yet-wired). */
.ballact { display:grid; gap:12px; grid-template-columns:1fr; margin:0 0 22px; }
.actcard { background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.actcard__h { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--slate-900); margin:0 0 6px; }
.actcard__p { font-size:13.5px; color:var(--ink-2); margin:0 0 12px; line-height:1.5; }
.actform { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.actform__cur { font-family:var(--font-mono); font-weight:700; color:var(--ink-2); }
.actform__in { font-family:var(--font-mono); font-size:15px; width:84px; min-height:var(--tap); box-sizing:border-box; padding:8px 9px; border:1px solid var(--line); border-radius:4px; background:var(--paper-2); color:var(--ink); }
.actform__unit { font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.actform__btn { font-family:var(--font-ui); font-weight:800; font-size:13px; min-height:var(--tap); box-sizing:border-box; padding:9px 16px; border-radius:6px; border:none; background:var(--azure); color:#fff; cursor:not-allowed; opacity:.6; }
.actform__btn--ghost { background:var(--paper); color:var(--azure); border:1.5px solid var(--azure); }
.actcard__soon { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:10px 0 0; }

.ballnote { font-size:12.5px; color:var(--ink-2); background:var(--paper-2); border:1px dashed var(--line); border-radius:var(--radius); padding:11px 14px; }
.ballnote a { color:var(--azure); font-weight:700; }

/* Wider screens: hero becomes two columns, action cards sit side by side. */
@media (min-width: 760px) {
  .ballhero { grid-template-columns: 1fr auto; align-items:center; }
  .ballhero__today { flex-direction:column; align-items:flex-start; min-width:230px; }
  .ballact { grid-template-columns: 1fr 1fr; }
}


/* ============================================================================
   25. Homepage index landing - wired from great_UI into the real build.
   Data-driven hero, ticker, index demo, sticker-vs-landed proof and chart.
   ========================================================================== */
.index-ticker {
  margin: -24px calc(clamp(16px, 4vw, 40px) * -1) 24px;
  background: var(--slate-850);
  border-bottom: 2px solid var(--gold-deep);
  overflow: hidden;
}
.index-ticker__track {
  display: flex;
  width: max-content;
  animation: indexTicker 42s linear infinite;
}
.index-ticker:hover .index-ticker__track { animation-play-state: paused; }
@keyframes indexTicker { to { transform: translateX(-50%); } }
.tick__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  padding: 8px 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tick__item b { color: var(--gold); font-weight: 700; }
.tick__item .dn { color: var(--azure-bright); }
.tick__item .up { color: #ff9d92; }
.tick__sep { color: var(--slate-700); margin: 0 14px; }

/* Homepage rhythm: the teach zone (hero, thesis, index explainer) breathes with
   fluid separations; the data zone below (drop strip, board, explore) stays tight. */
.home-hero {
  display: grid;
  gap: 28px;
  align-items: center;
  margin: 0 0 clamp(28px, 5vw, 56px);
  padding: clamp(24px, 4vw, 48px) 0 clamp(18px, 2.5vw, 30px);
}
.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--slate-800);
}
.home-kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold-deep); }
.home-display {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.02;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 16px;
}
.home-display span { display: block; }
.home-display em { color: var(--azure); font-style: italic; }
.home-hero__sub {
  max-width: 48ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.58;
}
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.home-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid transparent;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.home-btn--hot { background: var(--red); color: #fff; box-shadow: 0 8px 18px -10px rgba(217,45,32,.75); }
.home-btn--hot:hover { background: var(--red-ink); }
.home-btn--quiet { background: var(--paper-2); color: var(--ink-2); border-color: #d4d8de; }
.home-btn--quiet:hover { border-color: var(--slate-700); color: var(--ink); }
.home-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  max-width: 520px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.home-proof div { background: var(--paper); padding: 10px 12px; }
.home-proof dt { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.home-proof dd { margin: 4px 0 0; font-family: var(--font-mono); font-size: 21px; font-weight: 700; color: var(--slate-900); }

.index-demo {
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.index-demo__cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--slate-850);
  color: var(--cream);
  border-bottom: 2px solid var(--gold-deep);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mono-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(238,241,245,.24);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
}
.index-demo__body { padding: 16px; }
.index-demo__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.index-chip {
  min-height: var(--tap);
  border: 1px solid #d4d8de;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  padding: 10px 14px;
  font: 700 13px var(--font-ui);
  cursor: pointer;
}
.index-chip:hover { border-color: var(--slate-700); color: var(--ink); }
.index-chip[aria-pressed="true"] { background: var(--azure); border-color: var(--azure); color: #fff; }
.index-demo__label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.index-demo__label a { color: var(--azure); text-decoration: none; }
.index-demo__label a:hover { text-decoration: underline; }
.index-demo__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.index-demo__fig {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 50px;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.index-demo__fig .cur { font-size: .55em; vertical-align: .45em; color: var(--ink-2); }
.index-demo__unit { font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.index-demo__delta,
.index-demo__gap {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: #eef4fc;
  color: var(--azure);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.index-demo__delta.is-up { background: #fbe9e4; color: #9a3322; }
.index-demo__spark { margin: 12px 0 14px; min-height: 48px; }
.index-demo__spark svg { display: block; width: 100%; height: auto; }
.index-demo__best {
  border: 1px solid #d4d8de;
  border-left: 4px solid var(--azure);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.index-demo__bestlabel {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.index-demo__bestrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.index-demo__bestrow a {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
  text-decoration: none;
}
.index-demo__bestrow a:hover { color: var(--azure); text-decoration: underline; }
.index-demo__bestsrc { font-size: 13px; color: var(--ink-2); }
.index-demo__verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-weight: 800;
  font-size: 14px;
  color: var(--azure);
}
.index-demo__verdict.is-fair { color: var(--muted); }
.vdot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex: none; }

.sticker-thesis {
  display: grid;
  gap: 18px;
  margin: 0 0 clamp(28px, 5vw, 56px);
  padding: clamp(20px, 2.5vw, 32px);
  background: linear-gradient(125deg, #2a2f37 0%, var(--slate-900) 48%, var(--azure-night) 100%);
  color: var(--cream);
  border: 1px solid rgba(243,237,220,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sticker-thesis .home-kicker { color: var(--azure-bright); margin-bottom: 8px; }
.sticker-thesis .home-kicker::before { background: var(--gold); }
.sticker-thesis__text h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.sticker-thesis__text p:last-child { color: rgba(238,241,245,.78); max-width: 42ch; }
.sticker-thesis__duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.duel__tag {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 800;
  opacity: .78;
}
.duel__tag--gold { color: var(--gold); opacity: 1; }
.duel__fig {
  margin: 7px 0 0;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
}
.duel__fig small { font-family: var(--font-mono); font-size: 12px; opacity: .75; }
.duel__fig--struck { color: #e7a597; text-decoration: line-through; text-decoration-thickness: 2px; }
.duel__fig--gold { color: var(--gold); }
.duel__meta { margin: 7px 0 0; font-family: var(--font-mono); font-size: 11px; color: rgba(238,241,245,.72); }
.duel__arrow { font-size: 30px; color: var(--gold); }
.duel__side:last-child { text-align: right; }
.sticker-thesis__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sticker-thesis__lines li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: 12px; color: rgba(238,241,245,.82); }
.sticker-thesis__lines i { border-bottom: 1px dotted rgba(238,241,245,.32); height: 1px; }
.sticker-thesis__lines .is-total { color: var(--gold); font-weight: 800; border-top: 1px solid var(--line-dark); padding-top: 8px; }

.home-index { margin: 0 0 clamp(36px, 6.5vw, 72px); }
.home-index__grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.home-index__copy,
.index-chart {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.home-index__copy { padding: 18px; color: var(--ink-2); }
.home-index__copy p { font-size: 15px; line-height: 1.58; }
.home-index__copy strong { color: var(--slate-900); }
.principles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.principles li { display: flex; gap: 10px; align-items: baseline; font-weight: 700; color: var(--ink); }
.principles span { font-family: var(--font-mono); font-size: 11px; color: var(--azure); }
.index-chart { overflow: hidden; }
.index-chart__head,
.index-chart__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.index-chart__head { background: var(--slate-850); color: var(--cream); border-bottom: 2px solid var(--gold-deep); }
.index-chart__head .mono-tag { color: var(--cream); }
.index-chart__plot { min-height: 230px; padding: 12px; }
.index-chart__plot svg { display: block; width: 100%; height: auto; }
.index-chart__foot { color: var(--muted); border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.index-chart__foot .dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.index-chart__foot .dot--azure { background: var(--azure); }
.index-chart__foot .dot--band { background: #dbe7f7; border: 1px solid #bcd3f2; }

@media (min-width: 760px) {
  .home-hero { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(36px, 4vw, 56px); }
  .home-display { font-size: 60px; }
  .sticker-thesis { grid-template-columns: .8fr 1.1fr .9fr; align-items: center; }
  .home-index__grid { grid-template-columns: .82fr 1.18fr; align-items: stretch; }
}
@media (min-width: 1080px) {
  .home-display { font-size: 72px; }
  .index-demo__body { padding: 18px; }
}
@media (max-width: 620px) {
  .home-proof { grid-template-columns: 1fr; }
  .home-display { font-size: 38px; }
  .sticker-thesis__duel { grid-template-columns: 1fr; }
  .duel__arrow { transform: rotate(90deg); width: max-content; }
  .index-chart__head { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .index-ticker__track { animation: none; }
  .index-chip, .home-btn { transition: none !important; }
}