/* home-dc.css — landing page visual layer (the Claude Design homepage).
 *
 * Scoped to the landing rebuild served at /next. Loaded AFTER v3.css and
 * home.css, which keep owning the shared chrome this page still uses: the
 * settings cog + dropdown/bottom-sheet, the menu sheet, and the contact
 * dialog. Everything below is the page itself.
 *
 * Why the header keeps `class="top"`: v3.css anchors .settings-cluster
 * against it and the mobile bottom sheet keys off the same ancestor, so we
 * re-layout the header here rather than fork it. The cog keeps working with
 * zero JS changes. Do not put a `transform` on .top or any ancestor of the
 * cluster — that creates a containing block for the sheet's position:fixed
 * and pushes it off-screen.
 */

:root {
  --dc-bg: #f7f5f0;
  --dc-ink: #12100c;
  --dc-ink-2: #2a2721;
  --dc-muted: #6f695d;
  --dc-muted-2: #8a8477;
  --dc-faint: #a09a8c;
  --dc-faint-2: #c4bda9;
  --dc-line: #e7e3d9;
  --dc-line-2: #ece8de;
  --dc-line-3: #f2efe7;
  --dc-card: #fff;
  --dc-gold: #8f7118;
  --dc-gold-lit: #c9a53c;
  --dc-cream: #faf6e8;
  --dc-cream-line: #eee2bd;
  --dc-good-bg: #e9f0e5;
  --dc-good-line: #d6e3d0;
  --dc-good-ink: #4d6b45;
  --dc-mid-bg: #f8f1dd;
  --dc-mid-line: #eaddb8;
  --dc-mid-ink: #6d5c25;
  --dc-bad-bg: #fbe9e7;
  --dc-bad-line: #f0d3cf;
  --dc-bad-ink: #8a4a44;
  --dc-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dc-shell: 1240px;
  --dc-gut: clamp(20px, 4vw, 36px);
  /* Inset that reproduces v3.css's header width: content spans
     min(100vw - 36px, 1500px), never wider, never tighter than 18px. */
  --dc-bar-gut: max(18px, calc((100% - 1500px) / 2));
}

/* The design is a light page; v3.css ships a dark app shell. Reassert. */
body.dc-home,
body.dc-home .app {
  background: var(--dc-bg);
  color: var(--dc-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Flatten the shared shell.
 *
 * The shell this page inherits is three nested CSS grids, all sized for the
 * old landing page: `.app` and `.home-app` are centred fixed-width grids with
 * their own gaps, and `.home-stage` becomes TWO COLUMNS at >=1020px
 * (home.css: `grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr)`) so
 * the previous hero could sit beside its preview card.
 *
 * This design is a single vertical column of full-bleed bands -- the paper
 * sections and the dark closing CTA have to reach both edges -- so every one
 * of those containers has to go back to plain block flow at full width.
 * Without this the page's sections pair up into two columns on any desktop
 * screen. Each selector below carries the `body.dc-home` prefix purely to
 * out-specify the media-query rules it is undoing.
 */
body.dc-home .app,
body.dc-home .home-app,
body.dc-home .home-stage {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
body.dc-home .home-stage { grid-template-columns: none; }

/* Overflow guards.
 *
 * Grid and flex children default to `min-width: auto`, so a child whose
 * min-content is wider than its track (the signal table carries
 * `min-width: 520px` so its columns stay legible) pushes past the track
 * instead of scrolling inside it, and the whole document gains a sideways
 * scrollbar. On a phone that shifts the header and clips the headline.
 * Zeroing the min lets `overflow-x: auto` on .dc-tablewrap actually engage.
 *
 * `overflow-x: clip` on the page is the backstop. Deliberately not `hidden`:
 * hidden makes the element a scroll container, which kills `position: sticky`
 * on the header. clip does not. (Same rule v4.css is held to in
 * tests/test_content_page_chrome.py.) */
body.dc-home { overflow-x: clip; }
.dc-split > *,
.dc-panel,
.dc-tablewrap,
.dc-cell { min-width: 0; }
.dc-shell { max-width: var(--dc-shell); margin: 0 auto; padding-inline: var(--dc-gut); }
.dc-mono { font-family: var(--dc-mono); }

/* ── Header ──────────────────────────────────────────────────────── */

.dc-home .top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  justify-self: stretch;
  /* Match the shared header width contract from v3.css `.top`
     (`width: min(100vw - 36px, 1500px)`, centred with 18px gutters) so this
     header lines up with every other route's. The bar itself stays
     full-bleed -- only the content is inset -- so the blur and the bottom
     hairline still reach both edges. */
  padding: 10px var(--dc-bar-gut);
  background: rgba(247, 245, 240, 0.88);
  border-bottom: 1px solid var(--dc-line);
  /* No z-index here on purpose. v3.css sets `.top { z-index: 60 }` so the
     header's stacking context sits ABOVE .settings-backdrop (z: 50). This
     rule used to say 50; at equal z-index the backdrop won on DOM order --
     it is appended to <body> last -- and painted its blur over the settings
     panel, which is trapped inside the header's context. The whole page,
     panel included, came out blurred. */
}
.dc-home .top::before,
.dc-home .top::after { display: none; }

/* Desktop only, and this is not cosmetic caution: backdrop-filter creates a
   containing block for position:fixed descendants, exactly like transform.
   #settingsDropdown is a descendant, and below 720 v3.css makes it a fixed
   bottom sheet -- with the blur on, `bottom: 0` resolved to the bottom of the
   82px header instead of the viewport and the panel opened off-screen. On
   desktop the panel is absolutely positioned, so the blur is harmless there.
   Same rule as the transform warning at the top of this file. */
@media (min-width: 721px) {
  .dc-home .top { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
/* Without the blur the bar must carry its own opaque ground, or content
   scrolls through it. */
@media (max-width: 720px) {
  .dc-home .top { background: var(--dc-bg); }
}
.dc-home .top .brand { flex: none; }
/* No .brand-logo override: the lockup inherits v3.css's responsive ladder
   (60 / 63 / 71px) so this header's mark is the same size as every other
   route's. The header's height follows from it rather than being pinned. */
/* display:contents lets the nav's children join the header's flex line, so
   brand / links / actions all share one row without a nested wrapper. */
.dc-home .top .top-nav { display: contents; }

.dc-nav-spacer { flex: 1 1 auto; }

/* Cog goes inline instead of absolute so it can sit between "Sign in" and
   the CTA. Static is safe for the fixed-position mobile sheet. */
.dc-home .top .settings-cluster { position: static; flex: none; }
/* Desktop only. Below 720 v3.css turns this panel into a bottom sheet with
   `top: auto; bottom: 0`, and this rule out-specifies that even from inside
   its media query -- a fixed box with both top and bottom set computes its
   height from the gap between them, which came out negative and collapsed
   the whole panel to 2px of border. */
@media (min-width: 721px) {
  .dc-home .top .settings-dropdown { top: calc(100% + 8px); right: var(--dc-gut); }
}

.dc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--dc-ink);
  color: #fdfcf9;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.dc-btn:hover { background: var(--dc-gold); color: #fdfcf9; }
.dc-btn--lg { padding: 16px 30px; font-size: 16.5px; }
.dc-btn--ghost { background: var(--dc-card); color: var(--dc-ink-2); border-color: #d8d3c6; }
.dc-btn--ghost:hover { background: var(--dc-card); border-color: var(--dc-gold); color: var(--dc-ink); }
.dc-btn--gold { background: var(--dc-gold-lit); color: var(--dc-ink); }
.dc-btn--gold:hover { background: #dcb84e; color: var(--dc-ink); }
.dc-btn--outline-dark { background: transparent; color: #fdfcf9; border-color: rgba(253, 252, 249, 0.22); }
.dc-btn--outline-dark:hover { background: transparent; border-color: var(--dc-gold-lit); color: #fdfcf9; }

/* ── Live slate ticker (populated by home.js from the real slate) ─── */

/* home.css styles .games-band as a 44px rounded pill on a dark surface.
   Here it is a full-bleed white strip under the header, so the pill shape,
   the fixed height and its grid have to come off. */
.dc-band {
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--dc-line);
  border-radius: 0;
  background: var(--dc-card);
  overflow: hidden;
}
.dc-band-inner {
  /* Same rail as the header above it -- at 1240px they visibly stepped. */
  padding: 11px var(--dc-bar-gut);
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
}
.dc-band-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--dc-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dc-ink);
}
.dc-band-label i { width: 5px; height: 5px; border-radius: 999px; background: var(--dc-gold); }
.dc-band-rule { width: 1px; height: 18px; background: var(--dc-line-2); flex: none; }
/* The marquee contract lives in home.css: .games-band-track-wrap is the
   clipping box with edge fades, .games-band-track is the animated strip that
   home.js duplicates and then times via animationDuration. We only recolour
   the fades -- home.css paints them with v3's dark --surface, which on this
   white band showed as two grey smears. */
.dc-band .games-band-track-wrap { flex: 1; min-width: 0; }
.dc-band .games-band-track-wrap::before { background: linear-gradient(90deg, var(--dc-card), transparent); }
.dc-band .games-band-track-wrap::after { background: linear-gradient(270deg, var(--dc-card), transparent); }
.dc-band .game-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.dc-band .game-chip-tag {
  font-family: var(--dc-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc-gold);
  background: var(--dc-cream);
  border: 1px solid var(--dc-cream-line);
  border-radius: 4px;
  padding: 2px 5px;
}
.dc-band .game-chip-match { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.dc-band .game-chip-match em { font-style: normal; color: var(--dc-faint); }
.dc-band .game-chip-time { font-family: var(--dc-mono); font-size: 11px; color: var(--dc-faint); }
.dc-band-all {
  flex: none;
  font-family: var(--dc-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--dc-gold);
  text-decoration: none;
}

/* ── Hero ────────────────────────────────────────────────────────── */

/* The hero runs flush left, from the headline down to the fine print. The
   sample preview below it is full width and unaffected; .dc-statrow, which
   sits after the preview, stays centred. */
.dc-hero { padding: clamp(36px, 4.5vw, 56px) 0 0; text-align: left; }
.dc-hero-shell { max-width: 1400px; margin: 0 auto; padding-inline: var(--dc-gut); }
.dc-h1 {
  /* No top margin: the headline is the first thing in the hero now that the
     leagues plate has moved to its own section. The 34px it used to carry to
     clear that plate stacked on the hero's own padding for a 106px void. */
  margin: 0;
  max-width: 1300px;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 900;
  text-wrap: balance;
}
.dc-h1 em { font-style: normal; color: var(--dc-gold); }
.dc-hero-lead {
  margin: 26px 0 0;
  max-width: 860px;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--dc-ink-2);
  text-wrap: pretty;
}
.dc-hero-sub { margin: 12px 0 0; max-width: 800px; font-size: 17px; line-height: 1.6; color: var(--dc-muted); text-wrap: pretty; }
.dc-hero-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }

/* Social proof, shared with the current landing page. home.css already lays it
   out flush left for its two-column hero, which is what this hero wants too;
   only the margin and the two colours that assume v3's dark `--page` canvas
   need restating for cream. */
.dc-home .home-proof { justify-content: flex-start; margin: 26px 0 0; }
.dc-home .home-proof-avatar { box-shadow: 0 0 0 2px var(--dc-bg), 0 4px 10px -6px rgba(18, 16, 12, 0.45); }
.dc-home .home-proof-text { color: var(--dc-muted); }
.dc-fine { margin: 16px 0 0; font-size: 13.5px; color: var(--dc-muted-2); }

.dc-statrow {
  max-width: var(--dc-shell);
  margin: 0 auto;
  padding: 34px var(--dc-gut) clamp(56px, 8vw, 76px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 56px;
}
.dc-stat b { display: block; font-family: var(--dc-mono); font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.dc-stat span { display: block; font-size: 12.5px; color: var(--dc-muted-2); margin-top: 4px; }

/* ── Section furniture ───────────────────────────────────────────── */

.dc-sec { padding: clamp(60px, 9vw, 92px) 0; }
.dc-sec--paper { background: var(--dc-card); border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); }
.dc-eyebrow { font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.11em; color: var(--dc-gold); margin: 0 0 16px; }
.dc-h2 { margin: 0; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 900; }
.dc-h2--lg { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; }
.dc-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--dc-muted); text-wrap: pretty; }
.dc-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.dc-seclink {
  font-family: var(--dc-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  color: var(--dc-gold);
  border-bottom: 1px solid #dcc98e;
  padding-bottom: 3px;
  text-decoration: none;
}
.dc-panel {
  background: var(--dc-card);
  border: 1px solid #e9e5db;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(18, 16, 12, 0.04), 0 30px 60px -46px rgba(18, 16, 12, 0.45);
  overflow: hidden;
}

/* The sample preview is one big link to the simulator. `display: block` and an
   inherited colour keep it laying out exactly as the <div> it replaced; the
   only visible difference is the affordance on hover. */
.dc-panel-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 260ms ease, transform 260ms ease;
}
.dc-panel-link:hover,
.dc-panel-link:focus-visible {
  border-color: var(--dc-cream-line);
  box-shadow: 0 1px 2px rgba(18, 16, 12, 0.04), 0 36px 70px -46px rgba(18, 16, 12, 0.55);
  transform: translateY(-2px);
}
.dc-panel-link:focus-visible { outline: 2px solid var(--dc-gold); outline-offset: 3px; }
.dc-panel-link:hover .dc-rerun,
.dc-panel-link:focus-visible .dc-rerun { border-color: var(--dc-gold); background: var(--dc-cream); }
@media (prefers-reduced-motion: reduce) {
  .dc-panel-link { transition: none; }
  .dc-panel-link:hover { transform: none; }
}
.dc-grid { display: grid; gap: 16px; }
.dc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.dc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 56px; align-items: center; }
.dc-split--top { align-items: start; }

/* ── Sample preview ──────────────────────────────────────────────── */

.dc-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 14px 22px;
  background: var(--dc-cream);
  border-bottom: 1px solid var(--dc-cream-line);
}
.dc-tag { font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.09em; color: var(--dc-gold); white-space: nowrap; }
.dc-preview-match { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.dc-preview-meta { font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.07em; color: #a4966d; white-space: nowrap; }
.dc-rerun {
  padding: 7px 14px;
  border: 1px solid #e3d5ab;
  border-radius: 999px;
  background: var(--dc-card);
  color: var(--dc-gold);
  font-family: var(--dc-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  cursor: pointer;
  white-space: nowrap;
}
.dc-rerun:hover { border-color: var(--dc-gold); }
.dc-preview-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--dc-line-2); }
.dc-cell { background: var(--dc-card); padding: 22px 24px 24px; }
.dc-cell-label { font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.09em; color: var(--dc-faint); }
.dc-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.dc-winprob { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.dc-winprob-side small { display: block; font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.07em; color: var(--dc-muted-2); }
.dc-winprob-side b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dc-winprob-side--home { text-align: right; }
.dc-winprob-side--home b { color: var(--dc-gold); }
.dc-winprob-bar { flex: 1; height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: var(--dc-line-2); }
.dc-winprob-bar i { background: #cfc8b6; transition: width 120ms linear; }
.dc-winprob-bar u { flex: 1; background: var(--dc-gold); text-decoration: none; }

.dc-rows {
  display: grid;
  gap: 1px;
  background: var(--dc-line-2);
  margin: 20px 0 0;
  border: 1px solid var(--dc-line-2);
  border-radius: 11px;
  overflow: hidden;
}
.dc-row { background: var(--dc-card); padding: 11px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dc-row dt { font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--dc-faint); }
.dc-row dd { margin: 0; font-size: 14.5px; font-weight: 500; }

.dc-chips { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.dc-chip { flex: 1 1 110px; border: 1px solid var(--dc-line-2); border-radius: 11px; padding: 11px 14px; }
.dc-chip b { display: block; font-family: var(--dc-mono); font-size: 17px; font-weight: 400; }
.dc-chip span { display: block; font-size: 11.5px; color: var(--dc-muted-2); margin-top: 3px; }
.dc-chip--bad { border-color: #f0dcd9; background: #fbf0ee; }
.dc-chip--bad b, .dc-chip--bad span { color: var(--dc-bad-ink); }

.dc-hist { display: flex; align-items: flex-end; gap: 3px; height: 132px; margin-top: 18px; }
.dc-hist i { flex: 1; border-radius: 2px 2px 0 0; background: #e7e2d6; }
.dc-hist-axis { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--dc-faint); }

.dc-player { margin-top: 14px; border: 1px solid var(--dc-line-2); border-radius: 12px; padding: 14px; }
.dc-player-name { font-size: 14.5px; font-weight: 600; }
.dc-player-pos { font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--dc-muted-2); margin-top: 2px; }
.dc-statline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 11px 0 0; }
.dc-stat-cell { border-radius: 9px; padding: 9px 11px; }
.dc-stat-cell > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.dc-stat-cell dt { font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.06em; }
.dc-stat-cell dd { margin: 0; font-family: var(--dc-mono); font-size: 16px; }
.dc-stat-cell small { display: block; font-family: var(--dc-mono); font-size: 9.5px; margin-top: 2px; }
.dc-sig-good { background: var(--dc-good-bg); border: 1px solid var(--dc-good-line); }
.dc-sig-good dt { color: #5f7a58; }
.dc-sig-good dd { color: #2f4429; }
.dc-sig-good small { color: #7f9276; }
.dc-sig-mid { background: var(--dc-mid-bg); border: 1px solid var(--dc-mid-line); }
.dc-sig-mid dt { color: #8a7530; }
.dc-sig-mid dd { color: #5a4a1c; }
.dc-sig-mid small { color: #a08f5c; }
.dc-sig-bad { background: var(--dc-bad-bg); border: 1px solid var(--dc-bad-line); }
.dc-sig-bad dt { color: #9a5b55; }
.dc-sig-bad dd { color: #6d332e; }
.dc-sig-bad small { color: #b08681; }
.dc-legend { display: flex; gap: 5px; flex-wrap: wrap; }
.dc-legend span { padding: 3px 7px; border-radius: 5px; font-family: var(--dc-mono); font-size: 9px; letter-spacing: 0.05em; }
.dc-legend .dc-sig-good { color: var(--dc-good-ink); }
.dc-legend .dc-sig-mid { color: var(--dc-mid-ink); }
.dc-legend .dc-sig-bad { color: var(--dc-bad-ink); }
.dc-note { margin: 12px 0 0; font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.07em; color: #b3ab98; }

/* ── Steps ───────────────────────────────────────────────────────── */

.dc-step { padding: 24px 22px 26px; background: var(--dc-bg); border-radius: 16px; }
.dc-step--gold { background: var(--dc-cream); border: 1px solid var(--dc-cream-line); }
.dc-step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-step-n { font-family: var(--dc-mono); font-size: 12px; color: var(--dc-gold); }
.dc-step-kind { font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--dc-faint); }
.dc-step h3 { margin: 20px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.dc-step p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--dc-muted); }

/* ── Ladder ──────────────────────────────────────────────────────── */

.dc-ladder { display: grid; gap: 10px; }
.dc-ladder-row { display: grid; grid-template-columns: 74px 1fr 40px; gap: 12px; align-items: center; }
.dc-ladder-row > span:first-child { font-family: var(--dc-mono); font-size: 11.5px; color: var(--dc-muted-2); }
.dc-ladder-row > span:last-child { font-family: var(--dc-mono); font-size: 11.5px; text-align: right; }
.dc-ladder-bar { height: 10px; border-radius: 3px; background: var(--dc-line-3); overflow: hidden; }
.dc-ladder-bar i { display: block; height: 100%; border-radius: 3px; }
.dc-ladder-foot { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--dc-line-2); font-size: 13px; color: var(--dc-muted-2); line-height: 1.55; }
.dc-pills { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.dc-pill { padding: 8px 14px; border-radius: 999px; background: var(--dc-card); border: 1px solid var(--dc-line); font-size: 13.5px; color: #4a463e; }

/* ── Output cards ────────────────────────────────────────────────── */

.dc-out {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  background: var(--dc-card);
  border: 1px solid #e9e5db;
  border-radius: 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.dc-out:hover {
  border-color: #e0cf9e;
  box-shadow: 0 1px 2px rgba(18, 16, 12, 0.04), 0 18px 34px -26px rgba(18, 16, 12, 0.4);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .dc-out:hover { transform: none } }
.dc-out-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 32px; }
.dc-out-fig { font-family: var(--dc-mono); font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--dc-gold); }
.dc-out-fig s { text-decoration: none; color: #cdc6b4; }
.dc-out-n { font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.09em; color: var(--dc-faint-2); flex: none; }
.dc-out-rule { height: 1px; background: #efece3; margin: 20px 0 18px; }
.dc-out h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.008em; }
.dc-out p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--dc-muted); text-wrap: pretty; }
.dc-spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; flex: none; }
.dc-spark i { width: 7px; border-radius: 1px; background: #ded7c5; }

/* ── Signal table ────────────────────────────────────────────────── */

.dc-sig-key { display: grid; gap: 11px; margin-top: 28px; }
.dc-sig-key > div { display: grid; grid-template-columns: 106px 1fr; gap: 14px; align-items: baseline; }
.dc-sig-key b { padding: 5px 9px; border-radius: 6px; font-family: var(--dc-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.06em; text-align: center; }
.dc-sig-key span { font-size: 14.5px; color: var(--dc-muted); }
.dc-tablewrap { overflow-x: auto; }
.dc-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.dc-table thead th {
  padding: 14px 20px;
  background: #faf8f3;
  border-bottom: 1px solid var(--dc-line-2);
  font-family: var(--dc-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--dc-faint);
  text-align: right;
}
.dc-table thead th:first-child { text-align: left; padding-left: 17px; }
.dc-table td { padding: 15px 20px; border-bottom: 1px solid var(--dc-line-3); font-size: 14.5px; text-align: right; }
.dc-table td:first-child { text-align: left; padding-left: 17px; }
.dc-table td.dc-num { font-family: var(--dc-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.dc-table td.dc-book { color: var(--dc-muted-2); }
.dc-table td.dc-gap { font-weight: 500; }
.dc-table tbody tr.is-good { background: #fbfdfa; box-shadow: inset 3px 0 0 #7d9c72; }
.dc-table tbody tr.is-mid { background: #fefcf6; box-shadow: inset 3px 0 0 var(--dc-gold-lit); }
.dc-table tbody tr.is-bad { background: #fefaf9; box-shadow: inset 3px 0 0 #c2695f; }
.is-good .dc-gap { color: var(--dc-good-ink); }
.is-mid .dc-gap { color: var(--dc-mid-ink); }
.is-bad .dc-gap { color: var(--dc-bad-ink); }
.dc-badge { display: inline-block; padding: 4px 8px; border-radius: 5px; font-family: var(--dc-mono); font-size: 9px; letter-spacing: 0.05em; }
.dc-table tfoot td {
  padding: 15px 20px;
  background: #faf8f3;
  border-top: 1px solid var(--dc-line-2);
  border-bottom: 0;
  text-align: left;
  font-size: 12.5px;
  color: var(--dc-muted-2);
}
.dc-table tfoot b { font-family: var(--dc-mono); font-weight: 400; color: var(--dc-ink); }
.dc-table tfoot span + span { margin-left: 26px; }

/* Phones: stop the sideways scroll.
 *
 * The table carries `min-width: 520px` so its five columns stay legible on a
 * desktop, which on a phone meant dragging the whole thing horizontally to
 * read the Gap and Signal columns -- the two that matter most. Below 720 it
 * stops being a table and becomes one card per market: the market name and
 * its signal badge on the top line, then Sim / Book / Gap as three labelled
 * figures underneath. Every value stays on screen, nothing scrolls. */
@media (max-width: 720px) {
  .dc-tablewrap { overflow-x: visible; }
  .dc-table { min-width: 0; display: block; }
  .dc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dc-table tbody { display: block; }
  .dc-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dc-line-3);
  }
  .dc-table tbody td { padding: 0; border: 0; text-align: left; }
  /* Explicit placement. Left to auto-flow, Sim landed on the first line
     beside the market name, orphaned from Book and Gap on the line below. */
  .dc-table td.dc-cell-market {
    grid-area: 1 / 1 / 2 / 3;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--dc-ink);
  }
  .dc-table td.dc-cell-sig { grid-area: 1 / 3 / 2 / 4; justify-self: end; align-self: start; }
  .dc-table td[data-label="Sim"] { grid-area: 2 / 1 / 3 / 2; }
  .dc-table td[data-label="Book"] { grid-area: 2 / 2 / 3 / 3; }
  .dc-table td[data-label="Gap"] { grid-area: 2 / 3 / 3 / 4; }
  /* Column heads are hidden, so each figure carries its own label. */
  .dc-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--dc-mono);
    font-size: 9px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dc-faint);
  }
  .dc-table td.dc-num { font-size: 14px; }
  .dc-table tfoot { display: block; }
  .dc-table tfoot tr { display: block; }
  .dc-table tfoot td { display: block; width: auto; padding: 14px 16px; }
  .dc-table tfoot span { display: block; }
  .dc-table tfoot span + span { margin-left: 0; margin-top: 6px; }
}

/* ── Video ───────────────────────────────────────────────────────── */

.dc-video {
  margin-top: 40px;
  background: var(--dc-card);
  border: 1px solid #e9e5db;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(18, 16, 12, 0.04), 0 30px 60px -46px rgba(18, 16, 12, 0.4);
}
.dc-video video,
.dc-video iframe,
.dc-video .dc-video-facade,
.dc-video .dc-video-slot { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; }
.dc-video iframe { border: 0; }

/* The facade: poster plus play button, standing in for the player until the
   visitor asks for it. A <button> rather than a div so it is keyboard
   reachable and announces itself. */
.dc-video-facade {
  position: relative;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #f4f1ea;
  cursor: pointer;
}
.dc-video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-video-facade .dc-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: transform 180ms ease, background 180ms ease;
}
.dc-video-facade:hover .dc-video-play { transform: scale(1.06); background: var(--dc-gold); }
.dc-video-facade:focus-visible { outline: 3px solid var(--dc-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dc-video-facade:hover .dc-video-play { transform: none } }
.dc-video-slot {
  background: repeating-linear-gradient(135deg, #f4f1ea 0 14px, #efebe1 14px 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
  font-family: var(--dc-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  color: var(--dc-gold);
}
.dc-video-slot small { display: block; margin-top: 8px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--dc-faint); }
.dc-video-play { width: 76px; height: 76px; border-radius: 999px; background: var(--dc-ink); display: grid; place-items: center; flex: none; }
.dc-video-play i {
  width: 0;
  height: 0;
  border-left: 20px solid #fdfcf9;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}

/* ── Coverage ────────────────────────────────────────────────────
 *
 * Eight tiles, one per hub, sitting on a three-column grid. Seven are a
 * single column and soccer takes two, which makes nine cell-units and fills
 * three rows exactly; soccer reverts to one column below three, where the
 * eight tiles divide evenly on their own. Anything that leaves a ragged last
 * row reads as a broken list rather than a board, which is what this replaces.
 *
 * The tile is a full-height flex column so the "SIMULATOR ->" line pins to the
 * floor and stays aligned across a row whose sport names wrap unevenly
 * ("College football" is two lines at narrow widths, "Hockey" never is).
 *
 * There are no league marks in public/, so the type carries it: the code is
 * the object, set large and tight, and the hairline above it fills with gold
 * on hover. No images means no extra requests for a section that exists to
 * answer one question -- "do you cover my league".
 */

.dc-cov {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 44px 0 0;
  padding: 0;
}

.dc-cov-item { display: flex; }
.dc-cov-item--wide { grid-column: span 2; }

.dc-cov-item > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 22px 22px 18px;
  border: 1px solid var(--dc-line);
  border-radius: 16px;
  background: var(--dc-card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

/* The hairline. Scales from the left rather than animating `width`, so it
   composites instead of relaying out the tile on every frame. */
.dc-cov-item > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.dc-cov-item > a:hover,
.dc-cov-item > a:focus-visible {
  border-color: var(--dc-cream-line);
  box-shadow: 0 1px 2px rgba(18, 16, 12, 0.04), 0 18px 34px -26px rgba(18, 16, 12, 0.4);
  transform: translateY(-2px);
}
.dc-cov-item > a:hover::before,
.dc-cov-item > a:focus-visible::before { transform: scaleX(1); }
.dc-cov-item > a:focus-visible { outline: 2px solid var(--dc-gold); outline-offset: 2px; }

.dc-cov-code {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
}
.dc-cov-sport { font-size: 13px; color: var(--dc-muted-2); }

/* The competition list under Soccer. Chips rather than a middot run so the
   five names wrap into rows instead of one long line that forces the tile
   wider than its column. */
.dc-cov-comps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dc-cov-comps em {
  font-style: normal;
  font-family: var(--dc-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--dc-gold);
  padding: 4px 8px;
  border: 1px solid var(--dc-cream-line);
  border-radius: 999px;
  background: var(--dc-cream);
  white-space: nowrap;
}

/* margin-top:auto pins this to the tile floor; the row then shares one
   baseline for it no matter how tall each tile's sport name ran. */
.dc-cov-go {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--dc-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--dc-faint);
  transition: color 180ms ease, transform 220ms ease;
}
.dc-cov-item > a:hover .dc-cov-go,
.dc-cov-item > a:focus-visible .dc-cov-go { color: var(--dc-gold); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .dc-cov-item > a,
  .dc-cov-item > a::before,
  .dc-cov-go { transition: none; }
  .dc-cov-item > a:hover { transform: none; }
  .dc-cov-item > a:hover .dc-cov-go { transform: none; }
}

.dc-cov-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--dc-line);
}
.dc-cov-soon { margin: 0; font-size: 13.5px; color: var(--dc-muted-2); }
.dc-cov-soon span {
  font-family: var(--dc-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--dc-gold);
  margin-right: 8px;
}

@media (max-width: 900px) {
  .dc-cov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-cov-item--wide { grid-column: auto; }
}
@media (max-width: 520px) {
  .dc-cov { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dc-cov-item > a { padding: 18px 18px 16px; }
  .dc-cov-go { padding-top: 10px; }
}

/* ── Pricing ─────────────────────────────────────────────────────
 *
 * Ported from the pricing page's plan module (the inline <style> in
 * public/pricing.html) so the two read as one system. Same hierarchy: an
 * uppercase plan name, a large tabular price, a tagline, a tick list, then a
 * CTA pinned to the floor. The accent is this page's gold rather than v3's
 * bronze, which is the only substantive difference.
 */

/* One card, not two: the landing page sells Pro and the comparison table
   below carries Free. A single card left at grid width would run the full
   1240px shell, so cap it at the width it had as one of a pair and centre it.
   The two-column rule stays for pricing.html, which still shows both. */
.dc-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
  gap: 20px;
  align-items: stretch;
  margin-top: 44px;
}

.dc-plan-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--dc-card);
  border: 1px solid #e9e5db;
  border-radius: 16px;
}

/* Pro is the plan being sold, so it carries the accent border, the lift and
   the ribbon. 1.5px rather than 1px matches the pricing page exactly. */
.dc-plan-card--pro {
  position: relative;
  border: 1.5px solid var(--dc-gold);
  box-shadow: 0 20px 48px -24px rgba(143, 113, 24, 0.55);
}
.dc-plan-card--pro::before {
  content: "Most popular";
  position: absolute;
  top: -12px;
  left: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--dc-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dc-plan-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dc-muted);
}
.dc-plan-card--pro .dc-plan-name { color: var(--dc-gold); }

.dc-plan-price-row { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; flex-wrap: wrap; }
.dc-plan-price {
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--dc-ink);
  font-variant-numeric: tabular-nums;
}
.dc-plan-period { font-size: 0.95rem; color: var(--dc-muted); }
.dc-plan-tagline { margin: 10px 0 20px; font-size: 14px; line-height: 1.5; color: var(--dc-muted); }

.dc-plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 13px; }
/* Absolutely-positioned tick plus padding, so inline <strong> flows normally.
   (The pricing page notes a grid layout here once split each <strong> into
   its own cell and stacked the words vertically.) */
.dc-plan-features li {
  position: relative;
  padding-left: 27px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--dc-ink-2);
}
.dc-plan-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--dc-gold);
}
.dc-plan-features li strong { color: var(--dc-ink); font-weight: 700; }
.dc-plan-features li.lead {
  padding-left: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dc-muted);
}
.dc-plan-features li.lead::before { content: none; }

/* margin-top:auto is what bottom-aligns the two CTAs when the feature lists
   are different lengths. */
.dc-plan-cta {
  margin-top: auto;
  display: block;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid #d8d3c6;
  background: var(--dc-bg);
  color: var(--dc-ink);
  font-size: 0.98rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.dc-plan-cta:hover { border-color: var(--dc-ink-2); color: var(--dc-ink); }
.dc-plan-cta--pro { background: var(--dc-gold); border-color: var(--dc-gold); color: #fff; }
.dc-plan-cta--pro:hover { background: #7a610f; border-color: #7a610f; color: #fff; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .dc-plan-cta--pro:hover { transform: none } }
.dc-plan-foot { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--dc-muted); }

/* ── Comparison table ────────────────────────────────────────────
   Same rules as the cards: the Pro column is the accent one, ticks are the
   same glyph in the same gold, and the column heads reuse .dc-plan-name. */

.dc-compare {
  width: 100%;
  margin-top: 28px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.dc-compare th,
.dc-compare td { padding: 15px 18px; border-bottom: 1px solid var(--dc-line-2); }
.dc-compare thead th { border-bottom: 1px solid var(--dc-line); padding-top: 0; }
.dc-compare tbody th {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dc-ink-2);
}
.dc-compare td { width: 150px; text-align: center; font-size: 14px; color: var(--dc-muted); }
.dc-compare thead th:not(:first-child) { text-align: center; }
.dc-compare tbody tr:last-child th,
.dc-compare tbody tr:last-child td { border-bottom: 0; }

/* The Pro column is a tinted, gold-edged strip so it reads as the same object
   as the Pro card above it. Radii only on the first and last cells. */
.dc-compare .is-pro {
  background: linear-gradient(180deg, #fdfbf2, #fcf8ec);
  border-left: 1.5px solid var(--dc-gold);
  border-right: 1.5px solid var(--dc-gold);
  color: var(--dc-ink-2);
}
.dc-compare thead .is-pro { border-top: 1.5px solid var(--dc-gold); border-radius: 12px 12px 0 0; }
.dc-compare tbody tr:last-child .is-pro { border-bottom: 1.5px solid var(--dc-gold); border-radius: 0 0 12px 12px; }
.dc-compare .is-pro strong { color: var(--dc-ink); font-weight: 700; }

.dc-yes { font-size: 15px; font-weight: 800; color: var(--dc-gold); }
.dc-no { display: block; width: 12px; height: 1.5px; margin: 0 auto; border-radius: 1px; background: #d8d2c2; }

@media (max-width: 680px) {
  .dc-plan-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dc-compare th,
  .dc-compare td { padding: 13px 10px; }
  .dc-compare td { width: 88px; font-size: 13px; }
  .dc-compare tbody th { font-size: 13.5px; }
}

/* ── FAQ ─────────────────────────────────────────────────────────── */

.dc-faq details { border-top: 1px solid #e2ded2; }
.dc-faq details:last-of-type { border-bottom: 1px solid #e2ded2; }
.dc-faq summary { padding: 20px 0; font-size: 17px; font-weight: 500; display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.dc-faq summary::-webkit-details-marker { display: none; }
.dc-faq summary::after { content: "+"; color: var(--dc-gold); flex: none; }
.dc-faq details[open] summary::after { content: "\2212"; }
.dc-faq p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--dc-muted); max-width: 640px; }

/* ── Closing CTA ─────────────────────────────────────────────────── */

.dc-close { padding: 0 var(--dc-gut) 12px; }
.dc-close-inner { max-width: var(--dc-shell); margin: 0 auto; background: var(--dc-ink); border-radius: 24px; padding: clamp(56px, 8vw, 88px) 40px; text-align: center; }
.dc-close h2 { margin: 0 auto; max-width: 760px; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 900; color: #fdfcf9; text-wrap: balance; }
.dc-close h2 em { font-style: normal; color: var(--dc-gold-lit); }
.dc-close p { margin: 20px auto 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: #a8a293; }
.dc-close-actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────────────── */

/* The header is the logo, the cog and the CTA at every width.

   It used to hide the cog below 1080 and swap in a hamburger, because there
   were inline nav links, an ODDS LIVE pip and a sign-in link that all had to
   go somewhere on a phone. None of those exist now, so the hamburger was a
   second trigger for the one panel the cog already opens. The cog stays
   visible instead, and v3.css still turns its panel into a bottom sheet
   below 720. */
@media (max-width: 900px) {
  .dc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}
/* Phones: the bar must stay on one line -- logo, CTA, menu.
 *
 * Measured at 485px: brand 190 + CTA 133 + menu 44 = 367, plus two 14px gaps
 * and two 18px gutters = 395 against 449 available. At 390px only 354 is
 * available, so it wrapped the menu onto a second row; at 360px it is 71px
 * short. The gutters, the gaps and the lockup each give back a little rather
 * than any one of them collapsing. nowrap makes a regression obvious (it
 * overflows) instead of silently stacking again. */
@media (max-width: 520px) {
  .dc-home .top {
    flex-wrap: nowrap;
    gap: 10px;
    padding-inline: 16px;
  }
  /* The bar is logo + cog + CTA on one line, and the CTA is the thing that
     must never be cut: it is the only action in the header. So the lockup is
     the flex item that gives, and the two controls are pinned.

     `min-width: 0` alone is not enough -- a flex item's default
     `flex-shrink: 1` still refuses to go below its min-content size, and for
     an <img> that is its intrinsic width. Capping the logo's width in
     percentage terms is what actually lets the row fit at 360 and below. */
  .dc-home .top .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .dc-home .top .brand-logo { height: 48px; max-width: 100%; object-fit: contain; object-position: left center; }
  .dc-home .top .settings-cluster,
  .dc-home .top .dc-btn { flex: none; }
  .dc-home .top .dc-btn { padding: 9px 14px; font-size: 14px; }
}

/* Below 430 the lockup alone cannot give back enough: cog (32) + CTA (~133)
   + two 10px gaps + 32px of gutters is already 217, so the mark has to come
   down with it rather than eat the CTA. */
@media (max-width: 430px) {
  .dc-home .top { gap: 8px; padding-inline: 12px; }
  .dc-home .top .brand-logo { height: 42px; }
  .dc-home .top .dc-btn { padding: 8px 12px; font-size: 13.5px; }
}

/* 380 and below, down to a 320px iPhone SE. Measured ratio of the lockup is
   ~3.02:1, so a 40px mark is ~121 wide; with the CTA at ~104 and the cog at
   40 that is 281 plus 16px of gaps against 288 available at 320px. */
@media (max-width: 380px) {
  .dc-home .top { gap: 8px; }
  .dc-home .top .brand-logo { height: 40px; }
  .dc-home .top .dc-btn { padding: 8px 11px; font-size: 12.5px; }
}

@media (max-width: 720px) {
  .dc-band-all { display: none; }
  /* The proof line wraps at this width, so stack the avatars over the text
     rather than letting them share a cramped row. Both stay flush left with
     the rest of the hero. */
  .dc-home .home-proof { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dc-home .home-proof-text { text-align: left; }
  .dc-statrow { gap: 18px 32px; }
  .dc-hist { height: 96px; }
  .dc-close-inner { padding-inline: 22px; }
}

/* Reveal-on-scroll. Opt-in from JS: html.no-reveal is set before paint and
   only removed once home-next.js runs, so a script failure leaves every
   element visible rather than blank. */
html:not(.no-reveal) [data-reveal] { opacity: 0; transform: translateY(14px); }
html:not(.no-reveal) [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(.2, .7, .3, 1) var(--d, 0ms), transform 620ms cubic-bezier(.2, .7, .3, 1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html:not(.no-reveal) [data-reveal] { opacity: 1; transform: none; }
}