/* UI signal mirrors the active theme accent. Board palettes remain
   independently user-selectable. */

:root {
  /* White + Neon (light). Surfaces are true white with a faint green cast, so
     the page reads as paper rather than as a tinted panel.

     The accent is a reinterpreted neon — brighter and more saturated than the
     previous deep forest green, so the light theme shares the brand's neon
     personality instead of feeling like a separate palette. Raw neon (#39ff14)
     on white is about 1.4:1 and cannot set type at all, so --gold-bright stays
     a dark step for text readability while --gold carries the vibrant accent
     and the glows deliver the neon atmosphere through shadows and hover states.
     Dark mode inverts this the other way, where neon itself is the legible
     step. */
  --bg: #ffffff;
  --bg-2: #f4f8f4;
  --bg-3: #e8f0e8;
  --cream: #0b1a10;
  --cream-dim: #4a5f52;
  --gold: #22c55e;
  --gold-bright: #16a34a;
  --gold-deep: #0f7d28;
  --felt: #f4f8f4;
  --felt-deep: #e8f0e8;
  --ruby: #7a1f32;
  --text: #0b1a10;
  --muted: #52655a;
  --line: rgba(11, 26, 16, 0.14);
  --line-strong: rgba(11, 26, 16, 0.26);
  --panel: #ffffff;
  --shadow: rgba(11, 26, 16, 0.1);
  --font: "Outfit", "Segoe UI", sans-serif;
  --serif: "Outfit", "Segoe UI", sans-serif;
  --ink: #0b1a10;
  --on-solid: #ffffff;
  --on-gold: #ffffff;
  --fill-subtle: rgba(11, 26, 16, 0.045);
  --hover-fill: rgba(11, 26, 16, 0.07);
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --danger-border: rgba(180, 35, 24, 0.28);
  --danger-text: #b42318;
  --stat-white: #4a5f52;
  --paper: #ffffff;
  --paper-2: #f7faf7;
  --header-bg: rgba(255, 255, 255, 0.92);
  --footer-bg: #ffffff;
  --wash-top: #ffffff;
  --wash-mid: #f4f8f4;
  --wash-bottom: #e8f0e8;
  /* Buttons carry the DEEP green, not the neon: white type on #39ff14 would be
     unreadable. --glow-line is where this theme gets its neon. */
  --gold-btn-from: #16a34a;
  --gold-btn-to: #0f7d28;
  --gold-btn-border: #16a34a;
  --gold-btn-from-hover: #22c55e;
  --gold-btn-to-hover: #16a34a;
  --board-mat: #f4f8f4;
  --input-bg: #ffffff;
  --input-text: #0b1a10;
  --thumb-bg: #22c55e;
  --overlay-bg: rgba(255, 255, 255, 0.94);
  --glow-line: rgba(34, 197, 92, 0.5);
  /* Practice sequence ramp - the dashboard's heat cells and week chips.
     Teal, never the brand accent, so activity data stays distinguishable
     from the site's signal colour. --seq-base is the mark/ring colour;
     1-4 climb the intensity ladder; --seq-empty is the no-practice cell.
     Defined here (not in the sigma copy) because it is data, not mood. */
  --seq-base: #0d9488;
  --seq-1: #ccfbf1;
  --seq-2: #5eead4;
  --seq-3: #2dd4bf;
  --seq-4: #0f766e;
  --seq-empty: rgba(11, 26, 16, 0.07);
  --panel-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(11, 26, 16, 0.05),
    0 10px 24px rgba(11, 26, 16, 0.07);
  --panel-glow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 16px rgba(11, 26, 16, 0.07),
    0 22px 40px rgba(11, 26, 16, 0.1),
    0 0 0 1px rgba(34, 197, 92, 0.5),
    0 0 24px rgba(34, 197, 92, 0.2);
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* Deep Blue + Neon (dark). The surfaces are a blue-black rather than the warm
     charcoal this replaced, because a near-black carrying a blue cast lets the
     accent read as a light source IN the room instead of a colour painted on top
     of one. That is the whole intent: neon on deep blue is the pairing where the
     signal colour looks like it is emitting.

     The accent is the opposite of the light theme. Here the neon itself is the
     legible step (14.4:1 on --bg), so --gold-bright is the LIGHTER neighbour
     and --gold-deep carries fills and gradients.

     --ink sits ON the accent as button type, so it is a green-cast near-black
     rather than a neutral one. It has to stay genuinely dark (tests assert
     luminance < 80) or the accent buttons stop being dark-on-light. */
  --bg: #080d14;
  --bg-2: #0e141d;
  --bg-3: #151d28;
  --cream: #eef4fa;
  --cream-dim: #9fb1c4;
  --gold: #39ff14;
  --gold-bright: #7cff4a;
  --gold-deep: #00cc22;
  --felt: #111925;
  --felt-deep: #070b11;
  --text: #eef4fa;
  --muted: #8fa3b8;
  --line: rgba(190, 220, 255, 0.1);
  --line-strong: rgba(190, 220, 255, 0.18);
  --panel: rgba(14, 20, 29, 0.96);
  --shadow: rgba(0, 0, 0, 0.5);
  --font: "Outfit", "Segoe UI", sans-serif;
  --serif: "Outfit", "Segoe UI", sans-serif;
  --ink: #04120a;
  --on-solid: #04120a;
  --on-gold: #04120a;
  --fill-subtle: rgba(238, 244, 250, 0.05);
  --hover-fill: rgba(238, 244, 250, 0.085);
  --danger: #f3aaa0;
  --danger-bg: rgba(122, 49, 40, 0.24);
  --danger-border: rgba(204, 111, 96, 0.58);
  --danger-text: #ffd1c9;
  --stat-white: #eef4fa;
  --paper: #151d28;
  --paper-2: #111925;
  --header-bg: rgba(8, 13, 20, 0.92);
  --footer-bg: #080d14;
  --wash-top: #080d14;
  --wash-mid: #080d14;
  --wash-bottom: #0e141d;
  /* The gradient runs light -> deeper as it descends, the same relationship the
     previous accent had, so the button still has somewhere to go. */
  --gold-btn-from: #39ff14;
  --gold-btn-to: #00cc22;
  --gold-btn-border: #39ff14;
  --gold-btn-from-hover: #7cff4a;
  --gold-btn-to-hover: #39ff14;
  --board-mat: #0e141d;
  --input-bg: #111925;
  --input-text: #eef4fa;
  --thumb-bg: #1b2534;
  --overlay-bg: rgba(4, 7, 12, 0.78);
  /* Glows follow the accent. These are literals rather than var(--gold) because
     they are baked into shadow stacks, so leaving them behind is exactly what
     produced a blue halo around warm panels last time. */
  --glow-line: rgba(57, 255, 20, 0.4);
  --panel-glow:
    inset 0 1px 0 rgba(190, 220, 255, 0.055),
    0 12px 30px rgba(0, 0, 0, 0.34);
  --panel-glow-hover:
    inset 0 1px 0 rgba(190, 220, 255, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(57, 255, 20, 0.4),
    0 0 18px rgba(57, 255, 20, 0.14);

  --data-win: #6ee7b7;
  --data-win-fill: #34d399;
  --data-win-soft: rgba(52, 211, 153, 0.16);
  --data-draw: #cbd5e1;
  --data-draw-fill: #94a3b8;
  --data-draw-soft: rgba(148, 163, 184, 0.2);
  --data-loss: #fda4af;
  --data-loss-fill: #fb7185;
  --data-loss-soft: rgba(251, 113, 133, 0.16);
  --data-warn: #fcd34d;
  --data-warn-fill: #fbbf24;
  --data-warn-soft: rgba(251, 191, 36, 0.16);

  --series-1: #38bdf8;
  --series-2: #2dd4bf;
  --series-3: #a78bfa;
  --series-4: #fbbf24;

  --seq-base: #2dd4bf;
  --seq-empty: rgba(255, 255, 255, 0.07);
  /* Intensity steps for the same ramp. 1-2 are translucent washes so a
     quiet day is a faint echo of the accent; 3-4 go full strength, and 4
     is the BRIGHTER step - the same inversion the accent uses, so a hot
     cycle reads as lit rather than painted on. */
  --seq-1: rgba(45, 212, 191, 0.2);
  --seq-2: rgba(45, 212, 191, 0.42);
  --seq-3: #2dd4bf;
  --seq-4: #5eead4;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/outfit-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/outfit-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/outfit-latin-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: light;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image: none;
  overflow-x: hidden;
  letter-spacing: -0.011em;
}

::selection {
  background: color-mix(in srgb, var(--gold) 32%, transparent);
  color: var(--cream);
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.btn:focus-visible,
.nav-link:focus-visible,
.social-chip:focus-visible {
  outline-offset: 3px;
}

html[data-theme="dark"] body {
  background-image: none;
}

body::before {
  content: none;
}

.site-header,
.page-shell,
.site-footer {
  position: relative;
  z-index: 1;
}

html {
  --board-light: #eeeed2;
  --board-dark: #769656;
}

html[data-board="walnut"] {
  --board-light: #f0d9b5;
  --board-dark: #b58863;
}

html[data-board="ice"] {
  --board-light: #dee3e6;
  --board-dark: #8ca2ad;
}

html[data-board="navy"] {
  --board-light: #e3e9f0;
  --board-dark: #4b7399;
}

html[data-board="midnight"] {
  --board-light: #c9cdd4;
  --board-dark: #454c59;
}

img { max-width: 100%; display: block; }

.page-shell {
  flex: 1;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0 48px;
}

/* The landing page alone, widened to match its own sections.

   .home-chapter-inner and the guest importer are both 1560px, but this shell
   was 1240px — so every block that inherited the shell width sat 160px in from
   the tab strip's left edge, and the top of the page had a visibly different
   left margin from the bottom of it.

   Scoped to .home-page rather than widening .page-shell for the whole site:
   every other page lays its content out against the 1240px measure, and
   changing that would reflow all of them. The 1560px cap still applies above
   1592px, so an ultrawide monitor does not get unreadably long lines. */
.home-page .page-shell {
  width: min(1560px, calc(100% - 32px));
}

body.training-page .page-shell {
  display: flex;
  flex-direction: column;
  width: calc(100% - 24px);
  max-width: none;
  padding: 8px 12px 10px;
  min-height: 0;
}

.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;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent);
  contain: layout style;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 4%,
    color-mix(in srgb, var(--gold) 62%, transparent) 36%,
    color-mix(in srgb, var(--gold) 22%, var(--line)) 64%,
    transparent 96%
  );
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

body.training-page .site-header {
  width: 100%;
}

.site-header-inner {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
}

body.training-page .site-header-inner {
  width: min(1760px, calc(100% - 20px));
  height: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
}

.site-header .theme-switch-knob {
  background: var(--cream);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--serif);
  line-height: 1;
  flex-shrink: 0;
}

.brand-name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand em {
  font-style: normal;
  color: var(--gold);
  font-weight: 700;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--cream);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bar {
  position: relative;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bar::before { top: -5px; }
.nav-toggle-bar::after { top: 5px; }

.site-header.is-nav-open .nav-toggle-bar {
  background: transparent;
}

.site-header.is-nav-open .nav-toggle-bar::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header.is-nav-open .nav-toggle-bar::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-header-end {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.nav-link {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: -0.012em;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 11px;
  border-radius: 0;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--cream);
  background: transparent;
}

.nav-link[aria-current="page"] {
  color: var(--cream);
  font-weight: 600;
  background: transparent;
}

.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gold);
}

.nav-link-cta {
  color: var(--gold);
  font-weight: 600;
}

.nav-link-cta:hover,
.nav-link-cta[aria-current="page"] {
  color: var(--gold-bright);
}

.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.site-header .btn {
  padding: 7px 13px;
  min-height: 34px;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
}

.header-account {
  padding-inline: 12px;
}

.header-day-run {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.header-day-run:hover,
.header-day-run[aria-current="page"] {
  color: var(--cream);
  background: var(--fill-subtle);
  border-color: var(--line);
}

.header-day-run-value {
  font-variant-numeric: tabular-nums;
}

.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.header-icon:hover,
.header-icon[aria-current="page"] {
  color: var(--cream);
  background: var(--fill-subtle);
  border-color: var(--line);
}

.header-icon .btn-glyph {
  width: 15px;
  height: 15px;
  opacity: 1;
}

.header-icon-text {
  display: none;
}

.btn-with-glyph {
  gap: 7px;
}

.btn-glyph {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
}

.btn-with-glyph:hover .btn-glyph,
.btn-with-glyph[aria-current="page"] .btn-glyph {
  opacity: 1;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 42px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font);
}

.theme-switch-light,
.theme-switch-dark {
  display: none;
}

.theme-switch:hover {
  border-color: var(--line);
  background: var(--fill-subtle);
  color: var(--cream);
}

.theme-switch-track {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--bg-3);
  flex-shrink: 0;
}

.theme-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  transition: transform 0.18s ease;
}

html[data-theme="dark"] .theme-switch-knob {
  transform: translateX(12px);
}

html[data-theme="light"] .theme-switch-dark,
html:not([data-theme]) .theme-switch-dark {
  color: var(--muted);
}

html[data-theme="light"] .theme-switch-light,
html:not([data-theme]) .theme-switch-light {
  color: var(--cream);
}

html[data-theme="dark"] .theme-switch-light {
  color: var(--muted);
}

html[data-theme="dark"] .theme-switch-dark {
  color: var(--cream);
}

.btn,
.header-button,
.try-free,
.neon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-ghost { border-color: var(--line); }

.btn-gold,
.try-free,
.neon-button {
  background: var(--gold-btn-from);
  border-color: var(--gold-btn-border);
  color: var(--on-solid);
  box-shadow: none;
}

.btn:hover,
.header-button:hover {
  border-color: var(--cream-dim);
  background: var(--paper-2);
  color: var(--cream);
}

.btn-gold:hover,
.try-free:hover,
.neon-button:hover {
  background: var(--gold-btn-from-hover);
  border-color: var(--gold-btn-to-hover);
  color: var(--on-solid);
  box-shadow: none;
}

.home-view {
  /* One vertical rhythm for the whole landing page.

     Measured: the page was 6007px, about 5.6 screens on a laptop, and 1243px
     of that — a fifth — was whitespace between sections rather than content.
     The sections each declared their own generous padding, so nothing could be
     tightened as a system. These two tokens now own the rhythm: the band
     between top-level sections, and the padding inside a block.

     --home-band is the one number to raise or lower. It was 12px to get the
     Discord invitation above the fold, then back to 22px because at 12px the
     boxes read as one continuous field with no separation. 20px is the ceiling:
     the fold has almost no headroom, and 22px put Discord 21px under it. */
  --home-band: 20px;
  --home-pad: 16px;
  display: grid;
  gap: 0;
  padding-top: 6px;
  padding-bottom: 12px;
}

.home-view > * {
  padding-top: var(--home-band);
  padding-bottom: var(--home-band);
}

/* The blocks that carry their own padding must not also be eating the band.

   The chapter declared `padding: 0` and the hero declared 10/18px, so the
   token was only reaching some of the page: measured, the gap between four of
   the five blocks was 4px while the token said 22px. Two exceptions, both
   deliberate and both still scaled off the token so the rhythm stays one
   number — the hero's band is halved because it is a heading, and the chapter
   is a wrapper whose children carry their own. */
.home-view > .home-text {
  padding-top: calc(var(--home-band) / 2);
  padding-bottom: calc(var(--home-band) / 2);
}

.home-view > .home-chapter {
  /* `padding: 0` wiped the bottom band too, so the tab strip sat 4px off the
     Discord card — the token was reaching the top of the chapter only. The
     bottom is restored here so both edges of the block are the band. */
  padding: 0 0 var(--home-band);
  border-top: 0;
  margin-top: var(--home-band);
}

/* The Discord invitation is the one block that must clear the fold, and it was
   finishing at exactly the fold line with only a half band above it, so the
   card read as attached to the tab panel above.

   The band is a MARGIN, not padding. .home-discord-block is the bordered card
   itself, so padding-top pushed the content down *inside* the border: the card's
   top edge landed on the chapter's bottom edge and the two hairlines touched,
   which is the opposite of the gap this rule was written to buy. A margin sits
   outside the border, so the space is real.

   A small margin, not the full --home-band. The chapter above already ends with
   a band of its own (see .home-view > .home-chapter), so this is an ADDITION to
   that: 20px of chapter padding plus 8px here. Stacking two full bands gave a
   41px gulf that read as a section break rather than the small separation
   between the tab panel and the invitation.

   Paid for out of the space BELOW it. That space sits under the fold — the FAQ
   line is the last thing on the page — so moving it costs nothing visible and
   buys the gap that is actually visible. */
.home-view > .home-discord-block {
  margin-top: 8px;
  /* The card's own 16px/22px box comes from .home-discord-block further down,
     and this selector out-specifies it — so the top is restated here rather
     than left to fall back. Only the BAND moved out to the margin; the card
     keeps its internal padding. */
  padding-top: var(--home-pad);
  padding-bottom: 5px;
}

.home-view > * + * {
  border-top: 1px solid var(--line);
}

.home-view > * + .home-chapter {
  border-top: 0;
}

.home-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-feature {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(260px, 1.08fr);
  gap: 32px 48px;
  align-items: center;
}

.home-split-copy h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--cream);
}

.home-split-copy p {
  margin: 0 0 20px;
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-split-copy .btn {
  margin-top: 2px;
}

.home-split-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2, var(--bg-2));
}

/* A real screenshot rather than the hand-built markup the shot used to be.
   Sized to the card's width and scaled from its own aspect ratio, so it fills
   the frame edge to edge with no letterboxing, and the width/height attributes
   in the markup reserve the space before it loads. */
.home-shot-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1369 / 915;
  object-fit: cover;
}

.home-stats-glance {
  display: grid;
  gap: 18px;
  padding: 22px 24px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--panel-glow);
}

.home-stats-glance-chrome {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-stats-glance-chrome span:first-child {
  color: var(--gold);
}

.home-stats-glance-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.home-stats-glance-top strong {
  display: block;
  font-size: 1.08rem;
  color: var(--cream);
}

.home-stats-glance-top p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.home-stats-glance-rating {
  text-align: right;
}

.home-stats-glance-rating span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-stats-glance-rating b,
.home-stats-glance-top b {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.02em;
}

.home-stats-glance-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.home-stats-glance-kpis div {
  display: grid;
  gap: 4px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.home-stats-glance-kpis span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-stats-glance-kpis strong {
  font-size: 1.08rem;
  color: var(--cream);
}

.home-chapter {
  position: relative;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-3) 70%, var(--panel) 30%) 0%,
      var(--bg-2) 42%,
      var(--bg-2) 100%
    );
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 6%, transparent);
}

/* Full-bleed without 100vw (Safari mobile includes scrollbar gutter and overflows) */
@media (min-width: 981px) {
  .home-chapter {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

html.home-page,
body.home-page {
  overflow-x: hidden;
}

.home-chapter-inner {
  /* Was min(1240px, ...). The frame is 1,565px at a 1920px viewport, so the
     1,240px cap left roughly 325px unused, split into dead margin on both
     sides. Widening to the frame's own measure gives the tab panels a third
     column, which is what the cropped screenshots needed. */
  width: min(1560px, calc(100% - 32px));
  margin: 0 auto;
  /* The chapter takes the band on both edges, so the inner box adds none —
     two bands stacked read as one gap and then a second one, which is how the
     spacing ended up uneven. */
  padding: 0;
  display: grid;
  gap: 0;
}

/* The .home-chapter-head rules went with the chapter header. Six of them were
   left styling markup that no longer exists, and a future heading added back
   under that class would silently inherit a 42rem measure and a rule that no
   longer meant anything. */

/* ——— Tabbed showcase ———
   Five sections that used to be five full-width rows, which made the chapter
   2,383px — 41% of the homepage. They now share one panel and swap on click.

   The tab strip is a real tablist: the active tab carries an accent underline
   rather than a filled pill, so it reads as a set of tabs rather than as five
   competing buttons, and the row keeps the chapter's hairline rule as its
   baseline. */
.home-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.home-tab {
  appearance: none;
  position: relative;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 9px 14px 11px;
  color: var(--muted);
  font: 700 0.95rem/1 var(--sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.18s ease;
}

.home-tab:hover {
  color: var(--cream);
}

/* The accent bar is the only state marker, so it animates its own scale rather
   than the tab's box-shadow — cheaper, and it cannot shift the label. */
.home-tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--om-brass, var(--accent)), var(--om-brass-bright, var(--accent)));
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-tab.is-active {
  color: var(--cream);
}

.home-tab.is-active::after {
  transform: scaleX(1);
}

.home-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
  outline-offset: -4px;
  border-radius: 8px;
}

.home-tabs-panel:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: 6px;
  border-radius: 10px;
}

/* The panel keeps the split layout the rows already had, so switching tabs
   swaps content without the page re-flowing to a different shape. */
.home-tabs-panel[hidden] {
  display: none;
}

.home-tabs-panel.is-active {
  animation: home-tab-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ——— Compact tab panels ———
   The panels inherit .home-split, which was sized to give a section of the page
   to itself. Sharing one screen with the hero and the importer there is no room
   for that.

   The panels are a THREE-up row: copy on the left, visual on the right, and the
   space to the right of that for the panel's own supporting detail.

   `display: grid` is declared here rather than inherited. The panels are
   `.home-tabs-panel` alone — they do not carry `.home-split` — so nothing gave
   them a display value, they fell back to `block`, and every column below was
   computed and then ignored. That is why the copy and the visual were stacking
   full width at 1,560px each instead of sitting side by side.

   More importantly the visuals are no longer cropped. The Game Review screenshot
   is ~960px of content; clipped into a 190px band it lost 650px, which cut off
   in the middle of the move list and left a screenshot of a screenshot. It now
   gets a column tall enough to show the board, the coach note and the accuracy
   card, which is the whole argument the panel is making. */
.home-tabs-panel {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(230px, 0.8fr)
    minmax(0, 0.75fr);
  gap: 14px 30px;
  align-items: center;
  min-height: 264px;
}

.home-tabs-panel .home-split-copy h2 {
  font-size: clamp(1.12rem, 1.5vw, 1.34rem);
  margin-bottom: 8px;
}

.home-tabs-panel .home-split-copy > p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

.home-tabs-panel .home-split-shot,
.home-tabs-panel .home-look-shot,
.home-tabs-panel .home-trophy-glance {
  max-height: 264px;
  overflow: hidden;
  align-self: center;
}

/* The Game Review panel's figure is a full app mock — board, coach note, move
   list and accuracy card — and it is 970px of content. Clipping it at 320px cut
   off 650px and removed the coach note and the move list, which is most of what
   the panel is showing.

   So the review figure is scaled down as a whole rather than cropped: the mock
   shrinks proportionally and the whole thing stays visible, board included.
   Scaling beats cropping here because the mock is built from the same CSS
   tokens as the rest of the site, so the type inside it is a size we can afford
   to render smaller — where cropping a real screenshot would simply delete
   content.

   `transform: scale` with a sized wrapper, not `zoom`.

   `zoom` was the first attempt and it does not work here: it shrinks the
   paint but leaves the layout box at its natural ~1,357px, so the grid placed
   the figure in a third track far off the right edge of the page — measured at
   x=2877 on a 1,920px viewport. Nothing looked broken in the CSS; the element
   was simply somewhere the visitor could not scroll to.

   So the scale is applied with a transform, and the negative margins pull the
   layout box back to the size the scaled result actually occupies. Both are
   derived from the same 0.34 factor below, so changing it cannot leave the two
   out of step. */
/* The three product clips, filling the Repertoire tab.

   They were a full-width section of their own, 567px of a page that has to fit
   one screen. They went into the panel next to a static screenshot of a course
   list, at 139px each — too small to see the board move. The screenshot is gone
   now, so the clips take the two columns the copy does not use, and the panel
   is a single row of copy beside them rather than a three-column grid with the
   visual squeezed into a third.

   At ~700px a clip is legible: the app fills the frame and the recorded moves
   are followable, which is the point of showing it. */
.home-tabs-panel:has(.home-panel-clips) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 16px 30px;
}
.home-panel-clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
  align-self: center;
  min-width: 0;
}

.home-panel-clips .repertoire-demo-card,
/* The shared grid stylesheet sets `grid-column: span 2` on every card, sized
   for its own three-up row on the Repertoire page. In a narrower row it made
   each card span two of the three tracks, so all three overflowed to 286px in
   139px columns and the row was taller than the rest of the page. */
.home-panel-clips .repertoire-demo-card:nth-child(4),
.home-panel-clips .repertoire-demo-card:nth-child(5) {
  grid-column: auto;
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  /* The shared card carries 12px/14px padding, which is a large fraction of a
     200px clip. Trimmed so the video gets the width. */
  padding: 5px;
  border-radius: 8px;
}

.home-panel-clips .repertoire-demo-label {
  font-size: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  /* Three words in a ~200px column: truncating beats wrapping to three lines
     and unbalancing the row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-panel-clips .repertoire-showcase-video {
  width: 100%;
  height: auto;
  aspect-ratio: 140 / 111;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  /* Bounded by WIDTH, not height. A `max-height` here was tried first and it
     was the wrong instrument twice over.

     The videos carry no width/height attributes, so before they load there is
     no intrinsic size and the ratio derives a height from the column width —
     which is how the panel reached 639px and pushed Discord below the fold.
     But capping the height at 150px fixed that by squashing them: three
     ~330px-wide clips became a letterboxed strip far smaller than the copy
     beside them, which read as a widget dropped into the panel rather than as
     a demonstration of the feature.

     The width cap is the same constraint expressed honestly. Three at 300px is
     a ~950px row, so the ratio gives 240px of height — legible, and short
     enough to keep the Discord card above the fold. */
  max-width: 300px;
  margin-inline: auto;
}

/* Below the three-column breakpoint the clips go back to a row of their own
   under the copy, where there is finally the full width to spend. */
@media (max-width: 1080px) {
  .home-tabs-panel:has(.home-panel-clips) {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-panel-clips {
    grid-column: 1 / -1;
  }
}



.home-tabs-panel .home-shot-image.is-review {
  aspect-ratio: 1707 / 991;
  object-fit: contain;
}

/* ——— Panel screenshots ————————————————
   The Opening Library and Endgames panels show the real pages rather than a
   hand-built mock of them. The mock was an approximation of a filter that
   already exists, which is worse than the thing itself.

   Each image keeps its OWN aspect ratio, declared as a class rather than
   inherited: the two are 1338x1239 and 1338x1022, so at one column a shared
   ratio letterboxes one of them and crops the other. `contain` inside the
   ratio box means the visible part is the whole screenshot either way.

   The frame SHRINKS TO THE IMAGE rather than filling its grid track. It used to
   stretch, and since the image inside is width-capped the two disagreed: the
   frame was 1002px wide around a 620px screenshot, which left ~380px of empty
   panel inside a bordered box. That reads as a container that failed to fill,
   not as a framed screenshot.

   `width: fit-content` on a flex container resolves against the *flex base
   size* of the child, not the track — which made the image 320px in a 1002px
   column, because the child's own 900px cap was measured against a shrink-to-fit
   parent and then re-shrunk. So the figure keeps the track (the grid centres it)
   and the IMAGE is what carries the cap; the border is drawn on the image's
   box instead of the column's. */
.home-shot-figure {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  /* Not `width: 100%`: that is the empty-frame bug. The image's own max-width
     is the cap, and the figure wraps it — so the border hugs the picture. */
  width: fit-content;
  max-width: 100%;
  /* Left-aligned in its track, like the other panels' visuals. `auto` centred
     the frame inside the wider 0.9fr column, which pushed the card well right
     of where every other tab's visual sits. */
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--panel-glow);
  align-self: center;
}

/* The image sizes ITSELF, rather than filling a percentage of a parent whose
   own width depends on it.

   `width: 100%` inside a `fit-content` flex container is circular: the child's
   percentage resolves against a shrink-to-fit parent, so the browser falls back
   to the intrinsic width — measured, a 900px cap in force and the image still
   rendered 320px. Left on `auto`, `max-width` is the only thing bounding it,
   which is what the cap is for.

   390px: the size of the Game Review mock beside it, which is what every
   panel's visual is meant to be. It has been 300, then 620, then 900 — each
   time chasing "bigger" until the picture was 833px tall and twice the height
   of the review board it sits next to. A tab strip where the visuals are
   wildly different sizes reads as a layout that has drifted, not as one panel
   being more important than the others. */
.home-shot-figure > img {
  width: auto;
  max-width: 390px;
  flex: 0 1 auto;
}

/* These two panels drop the third column and let the copy take the rest.

   The stat cards that used to sit there ("114 courses / ECO A00–E99") went with
   the screenshot's arrival: the screenshot is the real page, so a headline
   number beside it was something to check rather than something to learn. That
   left an empty track, so the pair takes the full panel width.

   The visual track is 0.9fr rather than the base 0.8fr only to clear the 390px
   image plus its 8px frame padding. The image is capped by its own
   `max-width` above, so the track does not size it — a wider one here would
   only add gap, which is the empty-frame problem in a different form. */
.home-tabs-panel:has(> .home-shot-figure) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
}

.home-tabs-panel:has(> .home-shot-figure) .home-split-copy > p {
  font-size: 0.9rem;
}

/* Each image keeps its OWN aspect ratio rather than an inherited one: the two
   are 1338x1239 and 1338x1022, so at a shared ratio one of them letterboxes or
   crops. `contain` inside the ratio box means the whole screenshot is visible
   either way. */
.home-tabs-panel .home-shot-image.is-library {
  aspect-ratio: 1338 / 1239;
}

.home-tabs-panel .home-shot-image.is-endgames {
  aspect-ratio: 1338 / 1022;
}

/* ——— The copy-only panels ————————————————
   Blunder Override, Puzzles and Community Courses have no visual at all. They
   were copy plus a three-item list; the list went, so each is one column of
   copy and a button, and nothing beside it.

   A single child in the base three-track grid would sit in the 1.05fr column
   with two empty columns to its right — a narrow column of text stranded on the
   left of a 1560px panel. So these span the full width instead, which also lets
   the sentence run to a readable measure rather than to whatever 1.05fr is.

   The panel is a CSS custom property so the four rules that need it cannot
   drift apart. Getting that wrong is not hypothetical: the first version asked
   only "is there a figure?", which the Repertoire clips panel does not have —
   its visual is a `<div>`. So it matched, was given one column, stacked its
   three videos under the copy, and grew from 280px to 391px. It is the tallest
   panel on the page, so the strip's pin carried that to every other tab and
   pushed Discord below the fold. Hence the panel itself, not just its figure.

   The long selector is repeated on purpose rather than grouped: a custom
   property cannot be interpolated into a selector, so `:not(--x)` is not a
   thing, and grouping four rules under it would mean the list lives in one
   place but the repetition of the list does not. */
.home-tabs-panel:not(:has(figure)):not(:has(.home-panel-clips)):not(:has(.home-trophy-glance)):not(:has(.home-look-shot)) {
  grid-template-columns: minmax(0, 1fr);
}

.home-tabs-panel:not(:has(figure)):not(:has(.home-panel-clips)):not(:has(.home-trophy-glance)):not(:has(.home-look-shot)) .home-split-copy {
  max-width: 62ch;
}

.home-tabs-panel:not(:has(figure)):not(:has(.home-panel-clips)):not(:has(.home-trophy-glance)):not(:has(.home-look-shot)) .home-split-copy > p {
  font-size: 0.98rem;
  line-height: 1.65;
}

.home-tabs-panel .home-trophy-glance {
  padding: 10px;
  gap: 5px;
}

/* Mobile-only blunder visual — hidden on desktop */
.home-blunder-visual {
  display: none;
}

.home-tabs-panel .home-trophy-glance strong {
  font-size: 1.06rem;
}

.home-tabs-panel .home-trophy-icon svg {
  width: 56px;
  height: 56px;
}

/* The look panel's four rows of swatches stack taller than the band, so only
   the first two are shown. Boards and pieces are what a visitor is deciding on;
   arrow and highlight colours are a settings-page decision. */
.home-tabs-panel .home-look-shot {
  max-height: 194px;
  overflow: hidden;
}

.home-tabs-panel .home-look-row {
  padding: 6px 0;
}

.home-tabs-panel .home-look-row:nth-child(n + 3) {
  display: none;
}

/* The two panels that show a real screenshot replaced the hand-built list
   mocks that used to sit here — a filter-chip row, a list of invented course
   names, a 4x4 board of coloured squares. Their CSS went with the markup.

   Worth recording why, because the mocks looked like a feature: they
   illustrated a filter that already exists on the page, from memory, and
   anything a visitor compared side by side would be wrong. The two panels
   that have no screenshot are text-only instead — see .home-points. */

@media (max-width: 820px) {
  .home-tabs-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .home-tabs-panel .home-split-shot,
  .home-tabs-panel .home-look-shot {
    max-height: 220px;
  }
}

/* The third column needs real width, so it collapses before the second does.
   Below this the panel goes back to copy-over-visual rather than squeezing
   three columns until the screenshot is unreadable.

   Scoped to panels that HAVE a third column. A text-only panel is already two
   columns wide, and this rule would have re-gridded it to a narrow second track
   — squeezing the bullet list into ~210px for no reason, since there is no
   third column to reclaim the space from. */
@media (max-width: 1080px) {
  .home-tabs-panel:has(figure),
  .home-tabs-panel:has(.home-trophy-glance),
  .home-tabs-panel:has(.home-look-shot) {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.8fr);
  }
}

/* ——— FAQ bar ———
   Replaces the six-question accordion. One line, and the strongest objection is
   answered in the line itself so the link has something to sell rather than
   just offering navigation. */
.home-faq-bar {
  /* The top pad carries the separation from the Discord card, now that the
     gap above Discord is a full band. Still under the fold, so it costs
     nothing. */
  padding: 20px 0 16px;
}

.home-faq-bar p {
  margin: 0;
  color: var(--cream-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.home-faq-bar strong {
  color: var(--cream);
  font-weight: 700;
}

.home-faq-bar a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  color: var(--om-brass-bright, var(--accent));
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.home-faq-bar a:hover {
  text-decoration: underline;
}

.home-faq-bar-arrow {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-faq-bar a:hover .home-faq-bar-arrow {
  transform: translateX(3px);
}

@keyframes home-tab-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-tabs-panel.is-active {
    animation: none;
  }
  .home-tab::after {
    transition: none;
  }
}

.home-chapter .home-split {
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.home-chapter .home-split:first-of-type {
  border-top: 0;
  padding-top: 8px;
}

.home-chapter .home-split-copy h2 {
  font-size: clamp(1.55rem, 2.1vw, 2rem);
}

.home-chapter .home-split-shot,
.home-chapter .home-track-preview,
.home-chapter .home-trophy-glance,
.home-chapter .home-look-shot {
  background: var(--panel);
}

.home-trophy-glance {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 220px;
  padding: 28px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--panel-glow);
  text-align: center;
}

.home-trophy-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold);
}

.home-trophy-icon svg {
  width: 40px;
  height: 40px;
}

.home-trophy-glance strong {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--cream);
}

.home-trophy-glance p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.home-chapter .home-look-shot {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--panel-glow);
  padding: 20px 18px;
  gap: 16px;
}

/* The Discord invitation is the one thing on the page that is a two-way door
   rather than a link to another page, so it is given a real card rather than
   the hairline-separated plain block it used to be. With the puzzles panel
   gone it is the last block in the chapter, and it now reads as a deliberate
   end to the page instead of trailing copy.

   The tint is Discord's blurple kept as a background wash only. The button
   stays on the site's gold: it is the same action as every other button here,
   and swapping it for the brand's own colour would make it look like a
   different kind of control. */
/* ——— Discord ———
   A single row rather than a card with a heading, a paragraph, three bullets and
   a button. The bullets restated the paragraph, and on a page with one screen
   to work in, the invitation is worth showing and the supporting copy is not.

   The mark shrinks to an icon so it can sit inline with the words, and the
   button keeps the gold fill: it is still the same control as every other
   button on the site. */
.home-discord-block {
  display: block;
  /* No margin: .home-view's band already spaces the siblings, and a margin on
     top of a band stacks the two rather than adding to them. */
  margin-top: 0;
  padding: 16px 22px;
  border: 1px solid color-mix(in srgb, #5865f2 38%, var(--line));
  border-radius: 14px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, #5865f2 14%, transparent), transparent 62%),
    color-mix(in srgb, #5865f2 6%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, #5865f2 12%, transparent);
}

.home-discord-block .home-discord-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: none;
}

/* The paragraph and the three bullets were the height. One line of copy says the
   same thing: the server is how you reach us. Scoped to the block so it beats
   the standalone `.home-discord-points` rule below, which is a lower specificity
   and would keep rendering the list regardless of source order. */
.home-discord-block .home-discord-copy > p {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.home-discord-block .home-discord-points {
  display: none;
}

/* The eyebrow ("Community") repeated the heading's own words. */
.home-discord-block .home-discord-head > div > p.eyebrow {
  display: none;
}

.home-discord-block .btn {
  min-height: 38px;
  padding: 0 18px;
  font-size: 0.9rem;
}

.home-discord-block .btn:hover {
  transform: none;
  box-shadow: none;
}

.home-discord-copy {
  display: grid;
  gap: 14px;
  max-width: 40rem;
}

.home-discord-block .home-discord-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Inline icon size for the single-row layout. The card is now one line, so the
   60px tile this used to be left a gap taller than the words beside it. */
.home-discord-block .home-discord-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(150deg, #5865f2 0%, #4752c4 55%, #3d45a8 100%);
  box-shadow:
    0 2px 10px color-mix(in srgb, #5865f2 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000000 10%, transparent);
}

.home-discord-block .home-discord-mark svg {
  width: 18px;
  height: 18px;
}

.home-discord-block h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--cream);
}

.home-discord-block > .home-discord-copy > p,
.home-discord-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-discord-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.home-discord-points li {
  position: relative;
  padding-left: 16px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.home-discord-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.home-discord-block .btn {
  width: fit-content;
  gap: 8px;
}

/* The invitation is the point of the block, so the button is sized like a
   primary call to action rather than an inline link, and lifts on hover so it
   invites the click. It keeps .btn-gold's fill — the same action as every other
   button on the page reads as the same control. */
.home-discord-block .btn {
  min-height: 48px;
  padding: 0 26px;
  font-size: 1.02rem;
  font-weight: 700;
  transition:
    filter 0.18s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease;
}

.home-discord-block .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--gold) 30%, transparent);
}

.home-text-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Was 20px. The hero sits above everything on the page, so every pixel here
     is a pixel the blocks below lose; this row of buttons does not need 20px
     between it and the paragraph above it. */
  margin-top: 12px;
}

html.home-js .home-reveal:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 2.25rem, 0);
}

/* The Discord invitation is exempt from the scroll reveal.

   Every .home-reveal starts at opacity 0 and is only made visible when
   home.js marks it .is-in. So anything carrying the class is invisible if the
   script is blocked, fails, or the visitor has JS off — and this block is the
   one thing on the page that must always be reachable, since it is how a
   visitor with a question gets an answer.

   It is a one-line call to action, not a showcase, so the reveal bought nothing
   here anyway. Dropping the classes makes it unconditionally visible; the
   animation is not lost elsewhere. */
html.home-js .home-discord-block.home-reveal,
html.home-js .home-discord-block.home-reveal-soft {
  opacity: 1;
  transform: none;
  animation: none;
}

html.home-js .home-reveal.is-in {
  animation: home-reveal-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Refined scroll reveal for the homepage panels below the trainer. Same
   contract as .home-reveal (the observer adds .is-in, then .is-settled hands
   the element back to normal CSS) with a little more depth: a shorter rise,
   a 0.985 -> 1 settle, and a soft focus pull that clears as the panel lands.
   Kept as a variant so the trainer cards keep their original motion. */
html.home-js .home-reveal-soft:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0) scale(0.985);
  filter: blur(5px);
}

html.home-js .home-reveal-soft.is-in {
  animation: home-reveal-glow-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes home-reveal-glow-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0) scale(0.985);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

html.home-js .home-reveal.is-in.is-settled {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

/* Home FAQ ------------------------------------------------------------- */

.home-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(300px, 1.18fr);
  gap: 20px 48px;
  align-items: start;
}

.home-faq-intro h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--cream);
}

.home-faq-lede {
  margin: 0 0 16px;
  max-width: 28rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-faq-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-faq-more:hover {
  color: var(--gold-bright);
}

.home-faq-more-arrow {
  transition: transform 0.18s ease;
}

.home-faq-more:hover .home-faq-more-arrow {
  transform: translateX(3px);
}

.home-faq-list {
  display: grid;
  gap: 10px;
}

.home-faq-item {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--panel-glow);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.home-faq-item:hover,
.home-faq-item[open] {
  border-color: var(--glow-line);
}

.home-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px 15px 18px;
  list-style: none;
  cursor: pointer;
  color: var(--cream);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.4;
}

.home-faq-item > summary::-webkit-details-marker {
  display: none;
}

.home-faq-item > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.home-faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.home-faq-icon::before,
.home-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.5px;
  margin: -0.75px 0 0 -4.5px;
  background: var(--muted);
  transition: background 0.2s ease;
}

.home-faq-icon::after {
  transform: rotate(90deg);
}

.home-faq-item[open] .home-faq-icon {
  transform: rotate(45deg);
  border-color: var(--gold);
}

.home-faq-item[open] .home-faq-icon::before,
.home-faq-item[open] .home-faq-icon::after {
  background: var(--gold);
}

.home-faq-a {
  padding: 2px 44px 16px 18px;
}

.home-faq-a > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.home-faq-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--gold);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-faq-link:hover {
  color: var(--gold-bright);
}

details[open] > .home-faq-a {
  animation: home-faq-open 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes home-faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-faq-icon,
  .home-faq-more-arrow {
    transition: none;
  }

  details[open] > .home-faq-a {
    animation: none;
  }
}

@keyframes home-reveal-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 2.25rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.home-js .home-reveal:not(.is-in) {
    transform: translate3d(0, 1.35rem, 0);
    filter: none;
  }

  html.home-js .home-reveal.is-in {
    animation: home-reveal-rise-soft 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
}

@keyframes home-reveal-rise-soft {
  from {
    opacity: 0;
    transform: translate3d(0, 1.35rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* The hero is a 720px measure, but the BOX was 720px and centred, so the text
   began 160px in from the tab strip's left edge — the top of the page and the
   bottom of it had visibly different left margins.

   Now the box is the full page width and the measure is applied to its
   children, so the block lines up with the tabs, the importer and the FAQ while
   the text stays at a readable 720px. */
.home-text { text-align: left; max-width: none; }
.home-text > * { max-width: 720px; }

.home-page .home-text h1 {
  max-width: 20ch;
}

.home-page .lede {
  max-width: 40rem;
  font-size: 1.08rem;
}

.home-page .lede + .lede {
  margin-top: 12px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.home-text h1,
.page-header h1 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 4.4vw, 3.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--cream);
  text-shadow: none;
}

.home-text p,
.lede {
  margin: 0;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.roulette-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin: 0 0 16px;
}

.roulette-title {
  margin: 0;
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.roulette-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.opening-roulette {
  overflow: hidden;
}

.roulette-window {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0 4px;
  box-shadow: none;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.roulette-track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}

/* The marquee only animates once home.js has built the second half. Without
   it the track is a plain, complete, usable row — so a JS failure, an old
   browser, or a no-script visit degrades to a static list rather than a
   half-width strip that looks broken. */
.roulette-track.is-looping {
  animation: roulette-move 200s linear infinite;
}

.roulette-track.is-offscreen {
  animation-play-state: paused;
}

/* iOS: the continuous transform is dropped and the row becomes scrollable, so
   the same cards stay reachable without a permanent compositor cost. */
.opening-roulette.is-static .roulette-track {
  animation: none;
}

.opening-roulette.is-static .roulette-window {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.opening-roulette.is-static .opening-card {
  scroll-snap-align: start;
}

.roulette-set {
  display: flex;
  gap: 18px;
  padding-right: 18px;
}

.roulette-window:hover .roulette-track {
  animation-play-state: paused;
}

@keyframes roulette-move {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .roulette-track.is-looping {
    animation-duration: 300s;
  }
}

.opening-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 176px;
  flex-shrink: 0;
  padding: 12px;
  text-decoration: none;
  color: var(--cream);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 1px solid var(--line);
  box-shadow: var(--panel-glow);
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.opening-card:hover {
  border-color: var(--glow-line);
  background: linear-gradient(180deg, var(--paper), var(--bg-2));
  transform: translateY(-1px);
  box-shadow: var(--panel-glow-hover);
}

.opening-card img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  background: #769656;
  border-radius: 3px;
}

.opening-card span {
  font-size: 0.86rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  min-height: 2.2em;
}

.opening-card-kicker {
  display: block;
  margin-top: -6px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.opening-card-kicker.is-early {
  color: var(--gold-bright);
  letter-spacing: 0.06em;
  line-height: 1.35;
}

.opening-card.coming-soon::after {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 7px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: 6px;
}

.opening-card.coming-soon {
  opacity: 0.68;
  cursor: default;
  pointer-events: none;
}

.opening-card.coming-soon:hover {
  transform: none;
  border-color: var(--line);
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: var(--panel-glow);
}

.opening-card.coming-soon::after {
  content: "Coming soon";
}

.roulette-view-more {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

.home-trainer-showcase {
  display: grid;
  gap: 28px;
}

.home-trainer-head {
  max-width: 40rem;
}

.home-trainer-head h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.45rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream);
}

.home-trainer-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-trainer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 0;
}

.home-trainer-card + .home-trainer-card {
  padding-left: 28px;
  margin-left: 28px;
  border-left: 1px solid var(--line);
}

.home-leaderboard-showcase {
  display: grid;
  gap: 20px;
}

.home-connect-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-connect-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.home-connect-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.home-connect-stats span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-connect-stats strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
}

.home-track-preview {
  --track-gold: var(--gold);
  --track-blue: #38bdf8;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--panel-glow);
  position: relative;
}

.home-track-chrome {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.76rem;
}

.home-track-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--track-gold) 40%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-track-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: home-track-pulse 1.6s ease-in-out infinite;
}

.home-track-fit {
  margin-left: auto;
  color: var(--track-blue);
  font-weight: 700;
}

@keyframes home-track-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.home-track-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.home-track-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
}

.home-track-kicker {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-track-hero strong {
  display: block;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.home-track-hero p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.home-track-hero-rating {
  text-align: right;
}

.home-track-hero-rating span {
  display: block;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-track-hero-rating b {
  font-size: 2.1rem;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.home-track-kpis,
.home-track-rates {
  display: grid;
  gap: 8px;
}

.home-track-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-track-kpis-extra > div {
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}

.home-track-rates {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-track-kpis > div,
.home-track-rates > div {
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.home-track-kpis > div {
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 88%, #000);
}

.home-track-rates > div {
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.home-track-kpis span,
.home-track-rates span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-track-kpis strong,
.home-track-rates strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 1.25rem;
}

.home-track-kpis em,
.home-track-rates em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
}

.home-track-rates .is-up { color: var(--data-up); }
.home-track-rates .is-down { color: var(--data-down); }

.home-track-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, #0ea5e9 8%, transparent);
}

.home-track-tabs span {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.home-track-tabs .is-on {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
}

.home-elo-shot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #000 16%, transparent), transparent 70px),
    var(--paper);
}

.home-elo-shot-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: space-between;
  align-items: flex-end;
}

.home-elo-shot-head p {
  margin: 0;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-elo-shot-head strong {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
}

.home-elo-shot-head .home-search-chips {
  width: 100%;
}

.home-elo-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: min(100%, 420px);
}

.home-elo-kpis > div {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.home-elo-kpis span,
.home-elo-kpis em {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-elo-kpis b {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.home-elo-kpis em {
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
}

.home-elo-kpis .is-up b { color: var(--data-up); }
.home-elo-kpis .is-down b { color: var(--data-down); }

.home-elo-spark {
  width: 100%;
  height: 72px;
  color: var(--data-up);
}

.home-elo-ledger {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.82rem;
}

.home-elo-head,
.home-elo-row {
  display: grid;
  grid-template-columns: minmax(118px, 1.3fr) 52px minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
}

.home-elo-head {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--panel) 82%, var(--bg-2));
}

.home-elo-month {
  padding: 6px 12px;
  color: var(--gold-bright);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.home-elo-row {
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.home-elo-row.is-up { background: linear-gradient(90deg, var(--data-win-soft), transparent 58%); }
.home-elo-row.is-down { background: linear-gradient(90deg, var(--data-loss-soft), transparent 58%); }
.home-elo-row.is-up b { color: var(--data-up); }
.home-elo-row.is-down b { color: var(--data-down); }
.home-elo-row b { text-align: right; }

.home-track-charts {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

.home-track-chart,
.home-track-score {
  position: relative;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 88%, #000);
}

.home-track-chart p,
.home-track-score p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.home-track-chart svg {
  width: 100%;
  height: 148px;
  color: var(--gold);
  display: block;
}

.home-track-chart.is-outlook svg {
  color: var(--gold);
}

.home-track-tip {
  position: absolute;
  top: 42px;
  right: 18px;
  min-width: 92px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.home-track-tip strong,
.home-track-tip span,
.home-track-tip em {
  display: block;
}

.home-track-tip span {
  color: var(--muted);
  font-size: 0.72rem;
}

.home-track-tip em {
  margin-top: 2px;
  font-style: normal;
  font-weight: 800;
}

.home-track-rings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}

.home-track-rings svg {
  width: 72px;
  height: 72px;
  margin: 0 auto 4px;
  color: var(--cream);
}

.home-track-rings strong {
  display: block;
  font-size: 0.95rem;
}

.home-track-rings span {
  color: var(--muted);
  font-size: 0.72rem;
}

.home-track-openings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-track-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
}

.home-track-bar strong { display: block; font-size: 0.9rem; }
.home-track-bar span { color: var(--muted); font-size: 0.8rem; }
.home-track-bar i {
  display: block;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.home-track-bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #38bdf8);
}
.home-track-bar.is-white b {
  background: linear-gradient(90deg, #854d0e, #fbbf24);
}
.home-track-bar.is-black b {
  background: linear-gradient(90deg, #0f172a, #38bdf8);
}
.home-track-bar em {
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.home-track-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-track-form span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.home-track-form .is-win { background: var(--data-win-fill); }
.home-track-form .is-loss { background: var(--data-loss-fill); }
.home-track-form .is-draw { background: var(--data-draw-fill); }

.home-trainer-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-trainer-card h3 {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--cream);
}

.home-trainer-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.home-trainer-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

/* ——— Single-screen landing ———
   The trainer is the largest remaining block at 744px, and it is 3 boards at
   236px plus a heading. On a page that must fit one screen the board is
   illustration, not a tool: the point is "there is a board and you can learn
   lines on it", which a 132px board says as clearly as a 236px one while leaving
   the shape to the importer and the tabs, which are the actual calls to action.

   The copy is kept — it is what explains the three modes — and only the media
   and the vertical rhythm around it are reduced. */
.home-trainer-showcase {
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.home-trainer-showcase .home-real-board {
  width: min(100%, 104px);
}

.home-trainer-head h2 {
  font-size: clamp(1.16rem, 1.6vw, 1.4rem);
  margin-bottom: 4px;
}

.home-trainer-head > p {
  font-size: 0.86rem;
  margin-bottom: 2px;
}

.home-trainer-card {
  gap: 6px;
}

.home-trainer-card h3 {
  font-size: 0.94rem;
  margin: 4px 0 0;
}

.home-trainer-card p {
  font-size: 0.8rem;
  line-height: 1.45;
}

.home-trainer-grid {
  gap: 12px 0;
}

/* The chip above each board is a mode label, and at this size the board and the
   heading below it already say which mode it is. Two of the three are redundant
   with the card title, so they go rather than eat 24px each. */
.home-trainer-showcase .home-trainer-chip {
  display: none;
}

.home-trainer-showcase .home-trainer-chips {
  display: none;
}

.home-trainer-actions {
  margin-top: 10px;
}

/* ——— Hero ———
   305px for a heading and a paragraph. The heading is the one thing on the page
   that must not be cut, so the paragraph is trimmed to two lines and the
   whitespace around the block is what goes. */
.home-text h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  margin-bottom: 8px;
}

.home-view > .home-text {
  padding-top: 6px;
  padding-bottom: 12px;
}

.home-trainer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-trainer-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-trainer-chip.is-on {
  border-color: var(--gold-btn-border);
  background: linear-gradient(180deg, var(--gold-btn-from), var(--gold-btn-to));
  color: var(--on-solid);
}

.home-real-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  /* Capped rather than filling the card. At 100% the board was 306px, which
     made each trainer card 481px tall and the section 846px — the single
     largest block on the page. 236px keeps the position readable while cutting
     about 70px per row of the three-up grid. */
  width: min(100%, 236px);
  margin: 0 auto;
  aspect-ratio: 1;
  border: 0;
  /* Square, like every other board on the site. It carries no frame of its own —
     it sits directly on the card — so the 3px radius was rounding the grid
     itself, clipping the corner squares of the thumbnail. */
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 24px var(--shadow);
}

.home-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.home-sq.light { background: var(--board-light); }
.home-sq.dark { background: var(--board-dark); }

.home-sq.is-origin {
  box-shadow: inset 0 0 0 3px var(--hl-origin, color-mix(in srgb, var(--gold) 90%, transparent));
}

.home-sq.is-target {
  box-shadow: inset 0 0 0 3px var(--hl-target, color-mix(in srgb, var(--gold) 60%, transparent));
}

.home-sq img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.home-board-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.home-trainer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-book-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 1.1fr);
  gap: 28px 36px;
  align-items: center;
  padding: 28px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: none;
}

.home-book-copy h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream);
}

.home-book-copy p {
  margin: 0 0 18px;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-book-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-book-points li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-subtle);
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

.home-book-points li span {
  min-width: 0;
}

.home-book-points li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.home-book-copy .btn {
  margin-top: 18px;
}

.home-book-shot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  pointer-events: none;
}

.home-book-chrome {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-book-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 80%, #000);
  color: var(--cream);
  font-size: 0.92rem;
}

.home-book-field em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.home-book-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-book-chips span {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.home-book-chips .is-on {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  color: var(--cream);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}

.home-book-status {
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.home-book-stage {
  position: relative;
  width: min(100%, 280px);
  margin: 4px auto 6px;
}

.home-book-stage .home-real-board {
  box-shadow: 0 8px 20px var(--shadow);
}

.home-book-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* The showcase arrow sits on a light board in both themes, so it is drawn in
   the deepest accent step rather than the user's arrow colour: that keeps it
   legible on pale squares in light mode and on the cobalt theme in dark. */
.home-book-arrows .is-main {
  fill: var(--gold-deep);
}

.home-book-arrows .is-alt {
  fill: color-mix(in srgb, var(--gold-deep) 78%, transparent);
  opacity: 0.72;
}

.home-book-moves {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-book-move {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem 2.8rem;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
}

.home-book-move.is-main {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.home-book-move strong {
  font-size: 0.92rem;
}

.home-book-move span {
  color: var(--muted);
  font-size: 0.78rem;
}

.home-book-move b {
  text-align: right;
  font-size: 0.82rem;
}

.home-book-move em {
  font-style: normal;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 700;
  color: #34d399;
}

.home-book-dev {
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.site-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.info-box2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
}

.roulette-window,
.home-book-banner,
.info-box2,
.home-search-banner {
  border: 1px solid var(--line-strong);
  box-shadow: var(--panel-glow);
}

.roulette-window {
  border: 0;
  box-shadow: none;
  background: transparent;
}

html[data-theme="dark"] .opening-card,
html[data-theme="dark"] .home-book-banner,
html[data-theme="dark"] .info-box2,
html[data-theme="dark"] .home-search-banner {
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .opening-card.free .opening-card-kicker {
  color: var(--gold-bright);
}

html[data-theme="dark"] .opening-card.free .opening-card-kicker.is-early {
  color: var(--cream-dim);
}

.info-box2 h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 700;
  color: var(--cream);
}

.info-box2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-box2 li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  color: var(--muted);
  line-height: 1.7;
}

.info-box2 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.home-discord {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-discord-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-discord-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #5865f2;
  color: #fff;
}

.home-discord-mark svg {
  width: 28px;
  height: 28px;
}

.home-discord-head .eyebrow {
  margin: 0 0 4px;
}

.home-discord .btn {
  gap: 8px;
}

.home-discord-btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.home-discord h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 700;
  color: var(--cream);
}

.home-discord p {
  margin: 0;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-search-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 1.1fr);
  gap: 28px 36px;
  align-items: start;
  padding: 28px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
}

.home-search-copy h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 700;
  color: var(--cream);
}

.home-search-copy p {
  margin: 0 0 16px;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-search-points {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-search-points li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-subtle);
  color: var(--cream);
  font-size: 0.92rem;
  line-height: 1.5;
}

.home-search-points li span {
  min-width: 0;
}

.home-search-points li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--gold);
}

.home-search-copy .btn {
  margin-top: 16px;
}

.home-search-shot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  pointer-events: none;
}

.home-search-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, #0ea5e9 8%, transparent);
}

.home-search-tabs span {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.home-search-tabs .is-on {
  background: var(--gold);
  color: var(--on-gold);
}

.home-search-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 88%, #000);
}

.home-search-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.home-search-card-head strong {
  font-size: 1rem;
}

.home-search-card-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.home-open-insight {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.home-open-insight b {
  color: var(--cream);
  font-weight: 700;
}

.home-open-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
}

.home-open-bar strong { display: block; font-size: 0.9rem; }
.home-open-bar span { color: var(--muted); font-size: 0.78rem; }
.home-open-bar i {
  display: block;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.home-open-bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #38bdf8);
}
.home-open-bar em {
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.home-search-chrome {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-search-field {
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 80%, #000);
  color: var(--cream);
  font-size: 0.92rem;
}

.home-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-search-chips span {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.home-search-chips .is-on {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  color: var(--cream);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}

.home-search-count {
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.home-search-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
}

.home-search-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.home-search-row .is-win {
  background: var(--data-win-soft);
  color: var(--data-win);
}

.home-search-row .is-loss {
  background: var(--data-loss-soft);
  color: var(--data-loss);
}

.home-search-row strong {
  display: block;
  font-size: 0.9rem;
}

.home-search-row span {
  color: var(--muted);
  font-size: 0.78rem;
}

.rep-shot {
  padding: 18px 18px 16px;
  /* A soft top highlight, so the card reads as a surface catching light rather
     than as a flat rectangle pasted onto the page. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 42%),
    var(--panel);
}

.rep-shot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* Separated from the list by a rule rather than by whitespace alone, so the
     heading and the rows do not drift into one another. */
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.rep-shot-head strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.rep-shot-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.rep-shot-list {
  display: flex;
  flex-direction: column;
  /* A real gap between cards. At 2px the rows read as one striped block rather
     than as separate courses. */
  gap: 6px;
}

.rep-shot-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.rep-shot-row img {
  width: 72px;
  height: 72px;
  /* The opening artwork is a whole 8x8 board. `cover` scaled that 240px board
     up to fill the square and then cropped the overflow, which is what left a
     random middle of the board — half a position with no edges and no idea
     where it came from. `contain` shows the entire position instead, and the
     tile behind it is the board colour so the letterbox reads as a frame
     rather than as empty space. */
  object-fit: contain;
  border-radius: 8px;
  background: #769656;
  /* A hairline edge, so the miniature position reads as a board sitting on the
     card rather than as an image floating above it. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.rep-shot-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--fill-subtle, rgba(255, 255, 255, 0.06));
}

.rep-shot-row.is-white b {
  color: #1a1712;
  background: #f6f0e4;
}

.rep-shot-row.is-black b {
  color: #e8e4dc;
  background: #1a1712;
  box-shadow: inset 0 0 0 1px var(--line);
}

.rep-shot-row strong {
  display: block;
  font-size: 0.92rem;
}

.rep-shot-row span {
  color: var(--muted);
  font-size: 0.8rem;
}

.rep-shot-row em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .rep-shot-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .rep-shot-row em {
    display: none;
  }
}

.home-look-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 1fr);
  gap: 24px 32px;
  align-items: center;
  padding: 0;
}

.home-look-copy h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 700;
  color: var(--cream);
}

.home-look-copy p {
  margin: 0 0 18px;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-look-shot {
  margin: 0;
  display: grid;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
}

.home-look-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.home-look-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-look-boards,
.home-look-pieces,
.home-look-arrows,
.home-look-effects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.home-look-tile {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.12);
  background:
    linear-gradient(to right, var(--l) 50%, var(--d) 50%) top / 100% 50% no-repeat,
    linear-gradient(to right, var(--d) 50%, var(--l) 50%) bottom / 100% 50% no-repeat;
  opacity: 0.72;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.home-look-tile.is-on {
  opacity: 1;
  transform: scale(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(24, 24, 27, 0.16),
    0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
}

.home-look-pieces img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  opacity: 0.78;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.home-look-pieces img:first-child {
  opacity: 1;
  transform: translateY(-1px);
}

.home-look-arrows i {
  display: block;
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #111), var(--c));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 35%, transparent);
  opacity: 0.7;
}

.home-look-arrows i:nth-child(2) {
  opacity: 1;
  transform: scaleX(1.08);
  animation: home-look-arrow-pulse 3.6s ease-in-out infinite;
}

.home-look-fx {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eeeed2 50%, #769656 50%);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.1);
}

.home-look-fx::after {
  content: "";
  position: absolute;
  inset: 0;
}

.home-look-fx.is-pulse::after {
  background: var(--hl-select, color-mix(in srgb, var(--gold) 48%, transparent));
  animation: home-look-fx-wash 2.8s ease-in-out infinite;
}

.home-look-fx.is-gold::after {
  background: rgba(250, 204, 21, 0.4);
}

.home-look-fx.is-teal::after {
  background: transparent;
  inset: 4px;
  border: 2px solid var(--hl-ring, #60a5fa);
  border-radius: 3px;
}

.home-look-fx.is-soft::after {
  background: rgba(148, 163, 184, 0.34);
}

@keyframes home-look-arrow-pulse {
  0%, 100% { opacity: 0.75; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}

@keyframes home-look-fx-wash {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .home-look-arrows i:nth-child(2),
  .home-look-fx.is-pulse::after {
    animation: none;
  }
}

.home-repertoire-banner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.15fr);
  gap: 28px 36px;
  align-items: center;
  padding: 0;
}

.home-repertoire-copy h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 700;
  color: var(--cream);
}

.home-repertoire-copy p {
  margin: 0 0 18px;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-repertoire-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2, var(--bg-2));
}

.home-endgames-banner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.15fr);
  gap: 28px 36px;
  align-items: center;
  padding: 0;
}

.home-endgames-copy h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 700;
  color: var(--cream);
}

.home-endgames-copy > p {
  margin: 0 0 18px;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-endgames-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2, var(--bg-2));
}

.home-stats-banner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: 28px 36px;
  align-items: center;
  padding: 0;
}

.home-stats-copy h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 700;
  color: var(--cream);
}

.home-stats-copy > p {
  margin: 0 0 18px;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-stats-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-leaderboard-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  padding: 0;
}

.home-leaderboard-copy {
  min-width: 0;
  flex: 1 1 280px;
}

.home-leaderboard-copy h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 700;
  color: var(--cream);
}

.home-leaderboard-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 36rem;
}

.eg-shot {
  padding: 16px 16px 12px;
}

.eg-shot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.eg-shot-head strong {
  font-size: 0.95rem;
}

.eg-shot-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.eg-shot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eg-shot-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.eg-shot-row img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  background: #769656;
}

.eg-shot-row strong {
  display: block;
  font-size: 0.92rem;
}

.eg-shot-row span {
  color: var(--muted);
  font-size: 0.8rem;
}

.eg-shot-row em {
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .eg-shot-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .eg-shot-row em {
    display: none;
  }

  .eg-shot-row img {
    width: 64px;
    height: 64px;
  }
}

.home-integrations {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
}

.home-integrations h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 700;
  color: var(--cream);
}

.home-integrations > p {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.home-integrations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 4px 0 6px;
}

.home-integrations-card {
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-subtle, #f6f6f8);
}

.home-integrations-card h3 {
  margin: 10px 0 8px;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
}

.home-integrations-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.home-platform-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-platform-badge.is-lichess {
  background: #1b1b1b;
  color: #fff;
}

.home-platform-badge.is-chesscom {
  background: #81b64c;
  color: #14230c;
}

html[data-theme="dark"] .home-integrations-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.site-footer {
  margin-top: auto;
  padding: 40px 16px 36px;
  border-top: 1px solid var(--line);
  text-align: left;
  background: var(--footer-bg);
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

body.training-page .site-footer {
  display: none;
}

.footer-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 28px 40px;
  align-items: start;
  margin-bottom: 28px;
}

.footer-brand-block {
  max-width: 280px;
}

.footer-brand {
  font-family: var(--font);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--cream);
  font-weight: 700;
  margin-bottom: 8px;
}

.footer-brand em {
  color: var(--gold-bright);
  font-style: normal;
}

.footer-tag {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col h3 {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-col a {
  color: var(--cream-dim);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer-col a:hover {
  color: var(--gold-bright);
}

.footer-copy {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  text-align: left;
}

.footer-links {
  display: none;
}

@media (max-width: 840px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

#features-container,
#premium-features-container,
#subscriptions-container,
#about-container {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

@media (max-width: 1100px) {
  .site-header {
    width: 100%;
    top: 0;
    margin: 0;
    padding: 0;
  }

  .site-header-inner {
    width: calc(100% - 24px);
    padding: 0;
    min-height: 56px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  .site-header-end {
    display: none;
    width: 100%;
    padding: 8px 0 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 1 0 100%;
  }

  .site-header.is-nav-open .site-header-end {
    display: flex;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav-link {
    padding: 12px 12px;
    border-radius: 10px;
  }

  .nav-link[aria-current="page"] {
    background: var(--fill-subtle);
  }

  .nav-link[aria-current="page"]::after {
    display: none;
  }

  .site-header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 12px 0 4px;
    border-left: 0;
    border-top: 1px solid var(--line);
    gap: 8px;
  }

  .site-header .btn {
    flex: 1;
  }

  .header-icon {
    width: auto;
    height: 44px;
    padding: 0 12px;
    gap: 8px;
    flex: 1;
    justify-content: flex-start;
    border-color: var(--line);
  }

  .header-day-run {
    min-height: 44px;
    padding: 0 12px;
    flex: 1;
    justify-content: center;
    border-color: var(--line);
    font-size: 0.8rem;
  }

  .header-icon-text {
    display: inline;
    font-size: 0.88rem;
    font-weight: 600;
    color: inherit;
  }

  .theme-switch {
    width: auto;
    height: 44px;
    padding: 0 12px;
    gap: 8px;
    border-color: var(--line);
  }

  .theme-switch-light,
  .theme-switch-dark {
    display: inline;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-info { grid-template-columns: 1fr; }

  .home-book-banner { grid-template-columns: 1fr; }

  .home-search-banner,
  .home-split,
  .home-chapter-stats,
  .home-faq { grid-template-columns: 1fr; }

  .home-integrations-grid { grid-template-columns: 1fr; }

  .home-trainer-grid,
  .home-connect-grid,
  .home-track-kpis,
  .home-track-rates,
  .home-track-charts,
  .home-track-rings,
  .home-elo-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .home-trainer-card + .home-trainer-card {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }

  .home-trainer-card:nth-child(2) {
    padding-left: 20px;
    margin-left: 20px;
    border-left: 1px solid var(--line);
  }

  .home-trainer-card:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  .home-track-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home-track-hero-rating {
    grid-column: 1 / -1;
    text-align: left;
  }

  .home-track-fit {
    margin-left: 0;
  }

  .page-shell { width: calc(100% - 24px); }

  .home-chapter-inner {
    width: calc(100% - 24px);
  }

  .home-track-kpis,
  .home-track-kpis-extra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-text h1,
  .page-header h1 {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
  }

  .home-view {
    padding-top: 12px;
  }

  .home-real-board {
    border: 0;
  }

  .lede {
    font-size: 1rem;
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: calc(100% - 16px);
    padding: 8px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .home-chapter-inner {
    width: calc(100% - 16px);
    padding-top: 0;
    padding-bottom: 24px;
  }

  .home-chapter .home-split {
    padding: 28px 0;
  }

  .home-faq-item > summary {
    padding: 14px 14px 14px 16px;
  }

  .home-faq-a {
    padding: 2px 36px 14px 16px;
  }

  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .site-header-inner {
    width: calc(100% - 16px);
    min-height: 52px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
  }

  .theme-switch,
  .site-header .btn {
    min-height: 44px;
  }

  .home-view {
    padding-top: 8px;
  }

  .home-view > * {
    /* The token, not a literal. This said 28px while --home-band was 12px, so
       the phone layout kept a band the desktop had just given up — and on a
       phone, where vertical space is scarcest, that is exactly backwards. */
    padding-top: var(--home-band);
    padding-bottom: var(--home-band);
  }

  .home-trainer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-trainer-card + .home-trainer-card,
  .home-trainer-card:nth-child(2),
  .home-trainer-card:nth-child(3) {
    grid-column: auto;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .home-trainer-actions,
  .home-text-actions,
  .home-search-banner,
  .home-split,
  .home-discord-block,
  .home-integrations,
  .repertoire-showcase-actions,
  .repertoire-hero-actions {
    width: 100%;
  }

  .home-trainer-actions .btn,
  .home-text-actions .btn,
  .home-book-copy .btn,
  .home-split-copy .btn,
  .home-search-copy .btn,
  .home-integrations .btn,
  .info-box2 .btn,
  .roulette-view-more .btn {
    width: 100%;
    min-height: 44px;
  }

  /* The Discord invitation keeps its own 48px. It is a deliberate exception to
     the row above: it is the block's primary action rather than one of several
     equally-weighted links, and full width already makes it easy to hit. */
  .home-discord-block .btn {
    width: 100%;
    min-height: 48px;
  }

  /* The card's desktop padding is generous; on a narrow screen it just eats
     the width the copy needs. */
  .home-discord-block {
    padding: 22px 18px;
  }

  /* Restated because the top edge is the one declaration the spacing rule in
     the main sheet sets, and `.home-view > .home-discord-block` out-specifies
     this block. Without it a phone would render the card with 16px above its
     heading and 22px below — the mobile padding losing to the desktop one. */
  .home-view > .home-discord-block {
    padding-top: 22px;
  }

  .home-book-banner,
  .info-box2,
  .home-integrations {
    padding-left: 14px;
    padding-right: 14px;
  }

  .home-book-banner {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .site-footer {
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .footer-col a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* ——— Phone: tabs & showcase ——— */
@media (max-width: 640px) {
  /* Tighten tab buttons so the 9-tab strip does not stack into a tall block
     that pushes the panels below the fold. */
  .home-tab {
    padding: 6px 10px 8px;
    font-size: 0.87rem;
  }

  /* The panel inherits min-height: 264px from the base rule, which is over
     half a phone viewport spent on empty space. Let content set the height. */
  .home-tabs-panel {
    min-height: 0;
  }

  /* Restate as a single column so the full width is available (the 820px query
     already does this below, but re-stating it here keeps the phone layout
     self-contained and easier to reason about). */
  .home-tabs-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .home-tabs-panel .home-split-copy {
    padding: 0;
  }

  .home-tabs-panel .home-split-copy > p {
    font-size: 0.87rem;
  }

  .home-tabs-panel .home-split-copy h2 {
    font-size: 1.08rem;
  }

  .home-tabs-panel:has(.home-trophy-glance) {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-tabs-panel:has(.home-look-shot) {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-trophy-glance {
    max-height: none;
    min-height: 0;
    padding: 16px 14px;
  }

  .home-trophy-icon {
    width: 48px;
    height: 48px;
  }

  .home-trophy-icon svg {
    width: 26px;
    height: 26px;
  }

  /* Blunder visual matching the leaderboard trophy style */
  .home-blunder-visual {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--panel);
    min-height: 0;
  }
  .home-blunder-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
  }
  .home-blunder-icon svg {
    width: 26px;
    height: 26px;
  }
  .home-blunder-visual strong {
    font-family: var(--serif);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--cream);
  }
  .home-blunder-visual p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .home-panel-clips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .home-panel-clips .repertoire-demo-card {
    padding: 3px;
  }

  .home-panel-clips .repertoire-showcase-video {
    max-width: none;
  }

  /* Two clips per row so the board inside each is legible — three at ~110px
     on a phone makes the chessboard ~54px, unreadable. Two per row gives
     each clip about 1.5× the width and keeps the third clip centred below. */
  .home-panel-clips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-panel-clips .repertoire-demo-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 50%;
  }

  .home-look-pieces img:first-child {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
    border-radius: 6px;
  }


  /* Cap screenshots at a size that still reads at a glance rather than
     forcing the visitor to mentally scale them. */
  .home-tabs-panel .home-look-shot {
    max-height: 220px;
    overflow: visible;
  }

  .home-shot-figure > img {
    max-width: 100%;
  }

  .home-tabs-panel .home-split-copy .btn {
    margin-top: 8px;
  }
  /* Call-to-action buttons should stretch full width so they are easy to
     tap without precision aim. */
  .home-tabs-panel .btn {
    width: 100%;
  }

  /* Fit the whole PNG on phone screens: zero padding so the image fills
     edge-to-edge against the border, and no overflow:hidden so the border-
     radius does not clip the corners. */
  .home-shot-figure {
    padding: 0;
  }
}

.home-trainer-visual,
.home-book-points li,
.login-box,
.register-box,
.reset-box,
.profile-card,
.plan-card,
.course-card,
.legal-panel,
.legal-tile,
.repertoire-guest-card,
.repertoire-demo-card,
.repertoire-intro-shot,
.members-card,
.stat-card,
.community-card,
#info-box,
#line-menu-container,
#board-container {
  box-shadow: var(--panel-glow);
}

.opening-card,
.repertoire-guest-card,
.repertoire-demo-card,
.repertoire-intro-shot,
.info-box2,
.home-book-banner,
.home-book-points li,
.plan-card,
.course-card,
.profile-card,
.legal-tile,
.members-card,
.stat-card,
.community-card {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    background 0.2s ease;
}

.opening-card:hover,
.opening-card:focus-visible,
.repertoire-guest-card:hover,
.repertoire-guest-card:focus-visible,
.repertoire-demo-card:hover,
.repertoire-demo-card:focus-visible,
.repertoire-intro-shot:hover,
.info-box2:hover,
.home-book-banner:hover,
.home-book-points li:hover,
.legal-tile:hover,
.legal-tile:focus-visible,
.members-card:hover,
.members-card:focus-visible,
.plan-card:hover,
.course-card:hover,
.profile-card:hover,
.stat-card:hover,
.community-card:hover,
.community-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--glow-line);
  box-shadow: var(--panel-glow-hover);
}

.opening-card.coming-soon:hover,
.opening-card.coming-soon:focus-visible,
.mine-card:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: var(--panel-glow);
}

@media (prefers-reduced-motion: reduce) {
  .opening-card,
  .repertoire-guest-card,
  .repertoire-demo-card,
  .repertoire-intro-shot,
  .info-box2,
  .home-book-banner,
  .home-book-points li,
  .legal-tile,
  .members-card,
  .plan-card,
  .course-card,
  .profile-card,
  .stat-card,
  .community-card,
  .btn,
  .header-button,
  .try-free,
  .neon-button {
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }

  .opening-card:hover,
  .repertoire-guest-card:hover,
  .repertoire-demo-card:hover,
  .repertoire-intro-shot:hover,
  .info-box2:hover,
  .home-book-banner:hover,
  .home-book-points li:hover,
  .legal-tile:hover,
  .members-card:hover,
  .plan-card:hover,
  .course-card:hover,
  .profile-card:hover,
  .stat-card:hover,
  .community-card:hover,
  .btn:hover,
  .header-button:hover,
  .btn-gold:hover,
  .try-free:hover,
  .neon-button:hover {
    transform: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .opening-card:hover,
  .opening-card:focus-visible,
  .repertoire-guest-card:hover,
  .repertoire-guest-card:focus-visible,
  .repertoire-demo-card:hover,
  .repertoire-demo-card:focus-visible,
  .repertoire-intro-shot:hover,
  .info-box2:hover,
  .home-book-banner:hover,
  .home-book-points li:hover,
  .legal-tile:hover,
  .members-card:hover,
  .plan-card:hover,
  .course-card:hover,
  .profile-card:hover,
  .stat-card:hover,
  .community-card:hover,
  .btn:hover,
  .header-button:hover,
  .btn-gold:hover,
  .try-free:hover,
  .neon-button:hover,
  .google-auth-button:hover {
    transform: none;
  }

  .repertoire-guest-card:active,
  .repertoire-demo-card:active,
  .opening-card:active,
  .members-card:active,
  .community-card:active,
  .legal-tile:active {
    border-color: var(--glow-line);
  }
}

/* ============================================================
   Homepage accent signals (scoped to .home-page only).
   The sigma palette uses the cobalt signal (--gold / --glow-line);
   these rules amplify it on interactive elements so the page feels
   alive, without repainting the rest of the app. Every glow is
   derived from the accent, so light and dark stay in step. All
   motion honours prefers-reduced-motion.
   ============================================================ */
.home-page .eyebrow {
  color: var(--gold);
}

/* Buttons are finished in the CTA refinement (v3) block at the end of this file. */

/* The three trainer showcase cards (Learn theory, White and Black, Practice
   without help) have NO hover feedback by design: the green glow box that used
   to wrap the card on mouse-over, together with its 2px lift, was removed. The
   resting look is the only look. The chip and board hovers below are gone too. */

.home-page .home-faq-item[open] {
  box-shadow: var(--panel-glow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-text-actions .btn-gold { animation: none; }
  .home-page .btn-gold:hover,
  .home-page .btn-gold:focus-visible,
  .home-page .btn:not(.btn-gold):hover {
    transform: none;
  }
}


/* ============================================================
   Homepage interactive glow (v2). Scoped to .home-page only and tuned
   to the active accent, so the bloom reads as the theme signal in
   both light and dark.

   Every boxed panel on the homepage carries the accent glow BY DEFAULT
   (--box-glow) and steps up one notch (--box-glow-hover) on hover.
   Boxes that already sat on --panel-glow keep that elevation and stack
   the bloom on top of it. Only motion is switched off under
   prefers-reduced-motion; the glow itself stays in both themes.
   ============================================================ */

/* The glow tokens are defined once in the CTA refinement (v3) block at the
   end of this file, and consumed by every rule below. */

/* ---- Boxes that already sat on --panel-glow: keep that elevation and
        stack the green bloom on top of it rather than replacing it. ---- */
.home-page .home-track-preview,
.home-page .home-trophy-glance,
.home-page .home-look-shot,
.home-page .home-faq-item,
.home-page .opening-card {
  border-color: var(--glow-line);
  box-shadow: var(--panel-glow), var(--box-glow);
}

/* ---- Boxes that had no elevation: the green bloom is the elevation. ---- */
.home-page .home-split-shot {
  border-color: var(--glow-line);
  box-shadow: var(--box-glow);
}



/* These boxes have no transition of their own, so give the glow one.
   .opening-card and .home-faq-item already declare transitions, so they
   are handled separately to avoid flattening their existing lists. */
.home-page .home-track-preview,
.home-page .home-trophy-glance,
.home-page .home-look-shot,
.home-page .home-split-shot {
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}

.home-page .home-faq-item {
  transition: border-color 0.28s ease, background 0.2s ease, box-shadow 0.28s ease;
}

/* ---- Hover: the same glow, one notch brighter. ---- */
.home-page .home-track-preview:hover,
.home-page .home-trophy-glance:hover,
.home-page .home-look-shot:hover,
.home-page .home-faq-item:hover,
.home-page .home-faq-item[open],
.home-page .opening-card:hover {
  box-shadow: var(--panel-glow), var(--box-glow-hover);
}

.home-page .home-split-shot:hover {
  box-shadow: var(--box-glow-hover);
}

/* ---- Trainer boards: the permanent green frame stays; the mouse-over ring,
        spotlight and piece glow no longer appear. ---- */
.home-page .home-trainer-card .home-real-board {
  border: 2px solid var(--glow-line);
  box-shadow: var(--box-glow);
}

/* Chips (Learn theory, Train White, Train Black, Practice) are static on
   mouse-over: the green glow box and lift are gone. The slow green pulse on
   the .is-on chip is a resting-state animation, not hover, and stays. */
.home-page .home-trainer-chip.is-on {
  animation: home-chip-pulse 4.2s ease-in-out infinite;
}

@keyframes home-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow-line); }
  50%      { box-shadow: 0 0 0 5px var(--glow-line); }
}

.home-page .opening-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 12px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 14%, transparent), transparent);
  transition: left 0.55s ease;
  z-index: 1;
}

.home-page .opening-card:hover::before {
  left: 100%;
}

.home-page .home-faq-item > summary {
  transition: box-shadow 0.24s ease;
}

.home-page .home-faq-item:hover > summary {
  box-shadow: 0 0 0 2px var(--glow-line), 0 0 14px var(--glow-line);
}

.home-page .home-sq.is-origin {
  animation: home-origin-pulse 3.8s ease-in-out infinite;
}

@keyframes home-origin-pulse {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--hl-origin, color-mix(in srgb, var(--gold) 90%, transparent)), 0 0 0 0 var(--glow-line); }
  50%      { box-shadow: inset 0 0 0 3px var(--hl-origin, color-mix(in srgb, var(--gold) 90%, transparent)), 0 0 0 8px var(--glow-line); }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-trainer-chip.is-on { animation: none; }
  .home-page .opening-card::before { display: none; }
  .home-page .home-faq-item:hover > summary { box-shadow: none; }
  .home-page .home-sq.is-origin { animation: none; }
}
/* ============================================================
   Homepage glow + CTA refinement (v3).

   Same design language as the rest of the app: the primary action keeps
   its solid --gold-btn-* fill and the accent stays the SIGNAL colour
   rather than becoming a fill. What changes is the finish -- a layered
   rim / bloom / halo instead of one hard ring, machined inner
   highlights, a specular sweep on the primary action, and real press
   and focus states. Scope stays .home-page only.
   ============================================================ */

.home-page {
  /* Three layers instead of one hard ring: a 1px rim to define the edge,
     a mid bloom to light the surface, a wide halo for ambient room
     light. Everything reading --box-glow picks this up. */
  --box-glow:
    0 0 0 1px var(--glow-line),
    0 0 22px color-mix(in srgb, var(--gold) 13%, transparent),
    0 0 60px color-mix(in srgb, var(--gold) 7%, transparent);
  --box-glow-hover:
    0 0 0 2px var(--glow-line),
    0 0 30px color-mix(in srgb, var(--gold) 26%, transparent),
    0 0 80px color-mix(in srgb, var(--gold) 14%, transparent);
  /* Contact shadow plus soft ambient: the "machined" part of a button. */
  --cta-depth:
    inset 0 1px 0 color-mix(in srgb, var(--on-solid) 18%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 10px 26px rgba(0, 0, 0, 0.18);
}

/* ---- Ambient hero light: one very soft green wash behind the headline
        so the top of the page has depth instead of flat panels. ---- */
.home-page .home-text {
  position: relative;
  isolation: isolate;
}

.home-page .home-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22%;
  left: -14%;
  width: min(720px, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 10%, transparent), color-mix(in srgb, var(--gold) 0%, transparent) 72%);
}

/* ---- Primary action: solid fill, machined face, neon rim ---- */
.home-page .btn-gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 12px 22px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--on-solid) 14%, transparent), transparent 58%),
    var(--gold-btn-from);
  box-shadow:
    var(--cta-depth),
    0 0 0 1px var(--glow-line),
    0 0 22px color-mix(in srgb, var(--gold) 16%, transparent),
    0 0 56px color-mix(in srgb, var(--gold) 8%, transparent);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.28s ease;
}

/* Specular sweep: one soft highlight crossing the face. */
.home-page .btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, color-mix(in srgb, var(--on-solid) 26%, transparent) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page .btn-gold:hover::after,
.home-page .btn-gold:focus-visible::after {
  transform: translateX(130%);
}

/* Hover: same face, one notch brighter, lit edge. */
.home-page .btn-gold:hover,
.home-page .btn-gold:focus-visible {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--on-solid) 18%, transparent), transparent 58%),
    var(--gold-btn-from-hover);
  box-shadow:
    var(--cta-depth),
    0 0 0 2px var(--glow-line),
    0 0 30px color-mix(in srgb, var(--gold) 30%, transparent),
    0 0 72px color-mix(in srgb, var(--gold) 16%, transparent);
  transform: translateY(-1px);
}

/* Pressed: the button seats into the page. */
.home-page .btn-gold:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.24),
    0 0 0 1px var(--glow-line),
    0 0 18px color-mix(in srgb, var(--gold) 18%, transparent);
}

/* Hero call to action: a slow ambient breath rather than a hard pulsing
   ring. Literal shadows here so no custom properties resolve inside the
   keyframes. */
@keyframes home-cta-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--on-solid) 18%, transparent),
      0 1px 2px rgba(0, 0, 0, 0.24),
      0 10px 26px rgba(0, 0, 0, 0.18),
      0 0 0 1px var(--glow-line),
      0 0 20px color-mix(in srgb, var(--gold) 14%, transparent),
      0 0 48px color-mix(in srgb, var(--gold) 7%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--on-solid) 18%, transparent),
      0 1px 2px rgba(0, 0, 0, 0.24),
      0 10px 26px rgba(0, 0, 0, 0.18),
      0 0 0 1px var(--glow-line),
      0 0 30px color-mix(in srgb, var(--gold) 26%, transparent),
      0 0 74px color-mix(in srgb, var(--gold) 13%, transparent);
  }
}

.home-page .home-text-actions .btn-gold {
  animation: home-cta-breathe 4.5s ease-in-out 1s infinite;
}

/* ---- Secondary action: a thin glass panel that lights up on hover.
        Padding matches the primary so a button row stays level. ---- */
.home-page .btn:not(.btn-gold) {
  position: relative;
  padding: 12px 20px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--paper) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  transition:
    color 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The dark glass recipe is white-on-white on a light page, so the light theme
   gets a real surface instead: white face, slate border, soft contact shadow. */
html[data-theme="light"] .home-page .btn:not(.btn-gold) {
  color: var(--text);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--paper) 88%, var(--bg-3)));
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-page .btn:not(.btn-gold):hover,
.home-page .btn:not(.btn-gold):focus-visible {
  border-color: var(--glow-line);
  color: var(--cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--glow-line),
    0 0 24px color-mix(in srgb, var(--gold) 18%, transparent),
    0 0 60px color-mix(in srgb, var(--gold) 8%, transparent);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-text-actions .btn-gold { animation: none; }
  .home-page .btn-gold::after { display: none; }
  .home-page .btn-gold:hover,
  .home-page .btn-gold:focus-visible,
  .home-page .btn-gold:active,
  .home-page .btn:not(.btn-gold):hover,
  .home-page .btn:not(.btn-gold):focus-visible {
    transform: none;
  }
}
/* ============================================================
   Homepage FAQ: zig-zag arrangement (v4).

   The intro column stays put; the question cards alternate their
   alignment inside the list column so they stair-step down the page
   instead of stacking flush. Each card is a fixed step narrower than
   the column, so a card only ever moves INWARD from a column edge --
   nothing can overflow the section or collide with the intro copy on
   the left. A fixed step keeps the shape identical at every width
   instead of growing with the viewport.
   ============================================================ */

.home-page .home-faq-list .home-faq-item {
  width: calc(100% - 160px);
}

.home-page .home-faq-list .home-faq-item:nth-child(odd) {
  justify-self: start;
}

.home-page .home-faq-list .home-faq-item:nth-child(even) {
  justify-self: end;
}

/* Tighten the step as the viewport narrows so cards keep their reading
   width; the shape survives all the way down to phones. */
@media (max-width: 900px) {
  .home-page .home-faq-list .home-faq-item {
    width: calc(100% - 96px);
  }
}

@media (max-width: 640px) {
  .home-page .home-faq-list .home-faq-item {
    width: calc(100% - 40px);
  }
}

/* A wider vertical gap so the stair-step reads as a rhythm instead of a
   stack, and a slower expand so a cascade of cards is legible while the
   visitor scrolls rather than snapping open all together. */
.home-page .home-faq-list {
  gap: 18px;
}

.home-page details[open] > .home-faq-a {
  animation-duration: 0.45s;
}

/* The homepage game-review band now lives in static/home_import.css
   (.home-import-*), shared by the guest landing page and the signed-in
   workspace. The old .home-scan-* rules that lived here were removed when
   that panel was replaced. */