@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   Matchdaita — public site

   The brand board: charcoal black, dark slate, slate grey, white, and one
   accent — AI cyan — used for the model's own figure, for the thing you
   press, and for a selection that happened. A selection that did not happen
   is slate, not red: the page records, it does not scold.

   Dark is the brand's own and the default. Light is a second full set under
   data-theme="light", with the masthead kept dark so the mark reads the same.
   ========================================================================== */

:root {
  --bg:#080F14;  --bar:#0B1220;  --bar2:#111827;  --card:#111827;  --card2:#161F2E;
  --line:#1F2937; --line2:#2B3647;
  --blue:#00E5FF; --blue2:#67EEFF; --blue-soft:#0B2A33;
  --gold:#F0B54A;
  --win:#00E5FF;  --loss:#6B7280; --warn:#E0A03C;
  --txt:#FFFFFF;  --mut:#9CA3AF;  --mut2:#6B7280;
  --ink:#FFFFFF;  --ink-mut:rgba(255,255,255,.62); --ink-line:rgba(255,255,255,.14);
  --go:#00E5FF;   --go-hi:#5CEEFF; --go-txt:#080F14;
  --util:#05090D;
  --shadow:0 1px 2px rgba(0,0,0,.40), 0 1px 8px rgba(0,0,0,.30);
  --shadow-lg:0 2px 6px rgba(0,0,0,.40), 0 16px 40px rgba(0,0,0,.45);
  --glass-bg:rgba(17,24,39,.70);
  --glass-border:rgba(255,255,255,.12);
  --glass-highlight:rgba(255,255,255,.08);
  --r:10px; --r-lg:14px;
  --max:1140px;
  color-scheme:dark;
}

:root[data-theme="light"] {
  --bg:#F3F4F6;  --bar:#111827;  --bar2:#1F2937;  --card:#FFFFFF;  --card2:#EEF1F5;
  --line:#E5E7EB; --line2:#D1D5DB;
  --blue:#0097A7; --blue2:#00B8D4; --blue-soft:#E0FAFF;
  --gold:#C9860A;
  --win:#0097A7;  --loss:#6B7280; --warn:#B26A00;
  --txt:#111827;  --mut:#4B5563;  --mut2:#6B7280;
  --util:#080F14;
  --shadow:0 1px 2px rgba(17,24,39,.08), 0 1px 8px rgba(17,24,39,.05);
  --shadow-lg:0 2px 4px rgba(17,24,39,.06), 0 12px 32px rgba(17,24,39,.10);
  --glass-bg:rgba(255,255,255,.62);
  --glass-border:rgba(255,255,255,.65);
  --glass-highlight:rgba(255,255,255,.50);
  color-scheme:light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* Prices, probabilities and money must never shuffle their glyph widths. */
.num, .price, .odds, .stat b, .pl, table td, table th { font-variant-numeric: tabular-nums; }

a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0; letter-spacing:-.028em; font-weight:800; line-height:1.12; }
p { margin:0; }
img, svg { max-width:100%; }
:focus-visible { outline:3px solid var(--blue2); outline-offset:2px; border-radius:4px; }

.wrap { max-width:var(--max); margin:0 auto; padding:0 16px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.up { color:var(--win); } .down { color:var(--loss); }

/* ---- utility strip -------------------------------------------------------
   Sky, William Hill and Ladbrokes all carry a thin bar above the masthead.
   Ours carries the age limit and the help line, so compliance sits above the
   fold on every page without a dismissible banner doing the work. */
.util { background:var(--util); color:rgba(255,255,255,.72); font-size:11.5px; font-weight:600; }
.util .wrap { display:flex; align-items:center; gap:14px; min-height:34px; flex-wrap:wrap; }
.util a { color:rgba(255,255,255,.72); text-decoration:underline; text-underline-offset:2px; }
.util a:hover { color:#fff; }
.util .age {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:19px; padding:0 5px; border-radius:9.5px;
  border:1.5px solid rgba(255,255,255,.72); font-size:10.5px; font-weight:800; letter-spacing:.02em;
}
.util .spacer { margin-left:auto; }

/* ---- masthead ---- */
.top {
  position:sticky; top:0; z-index:40; color:var(--ink);
  background:linear-gradient(180deg, var(--bar2) 0%, var(--bar) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 2px 14px rgba(0,0,0,.30);
}
.top .wrap { display:flex; align-items:center; gap:18px; min-height:60px; }

.brand { display:flex; align-items:center; gap:9px; flex:none; }
.brand .mark { width:30px; height:30px; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.32)); }
.brand .word { font-size:20px; font-weight:800; letter-spacing:-.03em; line-height:1; white-space:nowrap; color:#fff; }
/* MATCHDAITA, set wide, the AI in cyan; the tagline under it in small caps. */
.brand .wordset { display:flex; flex-direction:column; gap:3px; }
.brand .word { text-transform:uppercase; letter-spacing:.08em; font-weight:800; font-size:17px; }
.brand .word em { font-style:normal; font-weight:800; color:#00E5FF; }
.brand .tag { font-size:7.5px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-mut); line-height:1; }

.nav { display:flex; align-items:center; gap:2px; margin-left:6px; }
.nav a {
  color:rgba(255,255,255,.82); font-size:13.5px; font-weight:600; padding:8px 11px;
  border-radius:7px; text-decoration:none; white-space:nowrap;
}
.nav a:hover { background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
.top .right { margin-left:auto; display:flex; align-items:center; gap:8px; }

.tog {
  width:34px; height:34px; flex:none; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:8px; color:#fff; padding:0;
}
.tog:hover { background:rgba(255,255,255,.20); }
.tog svg { width:17px; height:17px; display:block; }
/* The button shows the theme you are IN, not the one you would switch to.
   data-theme is always set by the time this matters — the script resolves the
   system preference into it before first paint. */
.tog .i-moon { display:none; }
:root:not([data-theme="light"]) .tog .i-sun { display:none; }
:root:not([data-theme="light"]) .tog .i-moon { display:block; }

.burger { display:none; }

/* ---- the record, floating ------------------------------------------------
   Two square tiles laid over the hero rather than banded across the top of it.
   No coloured ground behind them: they sit on the page itself, ringed in the
   green this site already reserves for money, and cast a shadow onto whatever
   they happen to be over.

   They are placed into the hero's own empty space, never over its words. The
   container takes no pointer events, so a tile can overlap a button without
   catching the click meant for it. */
.floaters {
  position:absolute; left:50%; transform:translateX(-50%); top:0;
  width:min(100% - 32px, var(--max)); height:100%;
  /* Above the masthead's 40: a tile floats in front of the blue bar rather than
     disappearing behind it. What keeps that from being a nuisance is not the
     stacking order but the two rules below — it starts low enough to overlap only
     the bar's edge, and it fades if it ever reaches the words. */
  pointer-events:none; z-index:45;
}
/* Three layers, one job each, so nothing has to cancel anything else:
   .floater carries the parallax, .bob the idle drift, .inner the tilt and the lift.
   When they shared a transform, hovering had to kill the drift animation mid-cycle
   and the tile snapped back to where the animation had started from. */
.floater { position:absolute; top:var(--top, auto); left:var(--left, auto);
           right:var(--right, auto); bottom:var(--bottom, auto);
           /* No transition: the easing is done per frame in JS, because a moving
              pointer restarts a CSS transition every frame and it stutters. */
           transform:translate3d(var(--px, 0px), var(--py, 0px), 0);
           will-change:transform; }
.bob { animation:drift var(--dur, 20s) ease-in-out var(--delay, 0s) infinite; }
/* Hovering settles the drift where it stands rather than cancelling it. */
.floater:hover .bob { animation-play-state:paused; }

/* Liquid Glass, per the H&B app: a translucent panel, a wide blur with the
   saturation pushed up so colour comes through it, a hairline that is lighter at
   the top edge than the bottom, and no hard fill anywhere. */
.floater .inner {
  width:152px; height:152px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:0 13px; border-radius:26px;
  background-color:var(--glass-bg);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);
  /* White glass on a near-white page has almost nothing to hold its edge, so in
     light mode the definition comes from the green ring and a faint ink hairline
     inside it, not from the fill. */
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 0 0 1px rgba(22,25,43,.07),
    0 0 0 1.5px rgba(21,145,74,.45),
    0 0 26px rgba(21,145,74,.20),
    0 26px 54px rgba(0,0,0,.26),
    0 5px 14px rgba(0,0,0,.13);
  rotate:var(--rot, 0deg);
  /* Slightly overshooting ease, so a tile rises and settles rather than sliding. */
  transition:rotate .55s cubic-bezier(.34,1.30,.64,1),
             translate .55s cubic-bezier(.34,1.42,.64,1),
             scale .55s cubic-bezier(.34,1.42,.64,1),
             box-shadow .45s ease,
             opacity .3s ease;
  position:relative; overflow:hidden;
}
/* The specular sweep. Glass without a highlight is just a translucent box. */
.floater .inner::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 34%, transparent 62%);
}
:root:not([data-theme="light"]) .floater .inner {
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1px rgba(49,196,111,.34),
    0 26px 56px rgba(0,0,0,.62),
    0 4px 12px rgba(0,0,0,.42);
}
:root:not([data-theme="light"]) .floater .inner::after {
  background:linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 34%, transparent 62%);
}

/* Glass needs something behind it or it reads as a grey box. The page ground is
   flat, so each tile lays its own bloom on it — the green this site keeps for
   money, bleeding into the brand blue — and then refracts that. */
.floater::before {
  content:""; position:absolute; inset:-34%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,
    rgba(21,145,74,.46) 0%, rgba(27,68,229,.26) 42%, transparent 70%);
  filter:blur(28px);
}
:root:not([data-theme="light"]) .floater::before {
  background:radial-gradient(circle at 38% 32%,
    rgba(49,196,111,.30) 0%, rgba(110,139,255,.20) 42%, transparent 70%);
}

/* A wander rather than a bob. Changing direction is what reads as floating — a
   tile going straight up and down reads as a pulse — so the path loops through six
   turns instead of alternating between two, and rotates as it goes.

   The tiles are allowed to cross the hero's type. That is a deliberate choice and
   the thing to undo first if it stops looking good: drop --amp back to single
   figures in renderHeadline and they return to stirring in place. What they are
   NOT allowed to cross is a control — see the z-index on the hero's buttons. */
@keyframes drift {
  0%   { translate:0 0; rotate:0deg; }
  16%  { translate:calc(var(--amp, 6px) *  .62) calc(var(--amp, 6px) * -.55); rotate: 1.4deg; }
  33%  { translate:calc(var(--amp, 6px) *  .20) calc(var(--amp, 6px) * -1);   rotate:-.9deg; }
  50%  { translate:calc(var(--amp, 6px) * -.58) calc(var(--amp, 6px) * -.72); rotate: 1.1deg; }
  66%  { translate:calc(var(--amp, 6px) * -.85) calc(var(--amp, 6px) * -.12); rotate:-1.3deg; }
  83%  { translate:calc(var(--amp, 6px) * -.34) calc(var(--amp, 6px) *  .40); rotate: .7deg; }
  100% { translate:0 0; rotate:0deg; }
}
/* The same path with the vertical flipped, for a tile that starts near the top of
   the hero: it wanders sideways and downward and never rises above where it began,
   so it cannot drift up into the masthead's band at all. */
@keyframes drift-down {
  0%   { translate:0 0; rotate:0deg; }
  16%  { translate:calc(var(--amp, 6px) *  .62) calc(var(--amp, 6px) *  .55); rotate: 1.4deg; }
  33%  { translate:calc(var(--amp, 6px) *  .20) calc(var(--amp, 6px) *  1);   rotate:-.9deg; }
  50%  { translate:calc(var(--amp, 6px) * -.58) calc(var(--amp, 6px) *  .72); rotate: 1.1deg; }
  66%  { translate:calc(var(--amp, 6px) * -.85) calc(var(--amp, 6px) *  .12); rotate:-1.3deg; }
  83%  { translate:calc(var(--amp, 6px) * -.34) calc(var(--amp, 6px) * -.18); rotate: .7deg; }
  100% { translate:0 0; rotate:0deg; }
}
.bob.down { animation-name:drift-down; }

.floater .inner:hover {
  rotate:0deg; translate:0 -12px;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1.5px rgba(21,145,74,.55),
    0 32px 64px rgba(0,0,0,.26),
    0 5px 14px rgba(0,0,0,.12);
}
.floater .inner { pointer-events:auto; cursor:pointer; }

/* Clicked, a tile lifts clear and stays there until it is clicked again. */
.floater.lifted { z-index:2; }
.floater.lifted .inner {
  rotate:0deg; translate:0 -26px; scale:1.06;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1.5px rgba(21,145,74,.60),
    0 40px 80px rgba(0,0,0,.30),
    0 6px 18px rgba(0,0,0,.14);
}
:root:not([data-theme="light"]) .floater.lifted .inner {
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1.5px rgba(49,196,111,.60),
    0 40px 84px rgba(0,0,0,.70),
    0 6px 18px rgba(0,0,0,.48);
}

.floater b {
  position:relative; z-index:1;
  display:block; color:var(--win); font-size:30px; font-weight:800; letter-spacing:-.04em;
  line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* Both figures rest in the money green. A negative return still turns red — that
   is the one thing this colour is not allowed to hide. */
.floater b.neg { color:var(--loss); }
.floater .lbl {
  position:relative; z-index:1;
  display:block; margin-top:9px; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut2); line-height:1.35;
  /* Wraps onto a second line rather than being clipped by the tile's rounded
     corners — "Return on capital" does not fit on one at this size. */
  overflow-wrap:break-word;
}

/* Above 1172px the content column is pinned at its maximum, so the hero's boxes —
   and therefore the gaps the tiles drift around in — are identical at 1200 and at
   2560. Below it they start closing, and by 1060 there is no square left that a
   tile can wander inside without touching type. So that is where the tiles stop
   floating and become a pair of squares above the headline: the breakpoint is
   where the measurement stops holding, not where a phone starts. */
@media (max-width: 1180px) {
  .floaters {
    position:static; transform:none; width:auto; height:auto;
    display:flex; gap:12px; justify-content:center; padding:22px 16px 0;
  }
  .floater { position:static; }
  /* A direct declaration on .bob beats the value inherited from the inline style on
     .floater, so the stacked pair stirs rather than roams — there is nowhere for
     them to roam to in a centred row, and the roam amplitude would push them past
     the edge of a narrow screen. */
  .bob { --amp:9px; }
  .floater .inner { width:152px; height:152px; }
}

.figs-foot {
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.55; color:var(--mut); max-width:62ch;
}
.figs-foot b { color:var(--txt); font-weight:700; }

/* Fading the whole tile, not its face: the bloom it lays down is a sibling of the
   glass, and fading only the glass left the bloom washing over the words at full
   strength. Over the navigation's own words it drops most of the way out, because
   those are controls; over the headline only enough to be read through. */
.floater { transition:opacity .3s ease; }
.floater.over-nav  { opacity:.22; }
.floater.over-type { opacity:.62; }
.floater.over-nav:hover, .floater.over-type:hover { opacity:.9; }

@media (prefers-reduced-motion: reduce) {
  .floater { transform:none; }
  .bob { animation:none; }
  .floater .inner { translate:0 0; }
  .floater .inner:hover { translate:0 0; }
  .floater.lifted .inner { translate:0 -14px; scale:1; }
}

/* ---- inner-page masthead ----
   The brand and a single link, for every page that is not the landing page: sign
   up, sign in, verify, the day's bet. Lives here rather than in auth.css because
   four pages use it and only two of them load that file. */
.auth-top { background:linear-gradient(180deg, var(--bar2) 0%, var(--bar) 100%); color:var(--ink); }
.auth-top .wrap { display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap; }
.auth-top .alt { margin-left:auto; font-size:13.5px; color:rgba(255,255,255,.78); }
.auth-top .alt a { color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  padding:11px 18px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:background .12s, border-color .12s;
}
.btn:hover { text-decoration:none; }
/* Sky reserve their cash-out green for the one button that hands you money.
   Ours goes on the one button that starts the trial, and nowhere else. */
.btn-go   { background:var(--go); color:var(--go-txt); }
.btn-go:hover { background:var(--go-hi); }
.btn-blue { background:var(--blue); color:#080F14; }
.btn-blue:hover { filter:brightness(1.08); }
.btn-ghost { background:transparent; color:var(--txt); border-color:var(--line2); }
.btn-ghost:hover { background:var(--card2); }
.btn-onnavy { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-onnavy:hover { background:rgba(255,255,255,.22); }
.btn-lg { font-size:16px; padding:14px 24px; border-radius:9px; }
.btn-block { width:100%; }

/* ---- advertising --------------------------------------------------------
   Real slots at real IAB sizes, laid into the grid rather than dropped on top
   of it. The label is not negotiable and is not styled to disappear: an ad that
   reads as editorial on a betting site is the thing regulators come for. */
.ad { margin:0 auto; }
.ad-rail { padding:18px 0; }
.ad-label {
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut2); margin:0 0 6px; text-align:center;
}
.ad-slot {
  position:relative; margin:0 auto; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line); background:var(--card2);
  display:flex; align-items:center; justify-content:center;
}
/* Leaderboard: 970x90 desktop, 728x90 tablet, 320x100 phone. */
.ad-leaderboard { width:100%; max-width:970px; height:90px; }
/* The footer unit is the narrower standard leaderboard. */
.ad-leaderboard.ad-728 { max-width:728px; }
@media (max-width: 1000px){ .ad-leaderboard { max-width:728px; } }
@media (max-width: 760px) { .ad-leaderboard { max-width:320px; height:100px; } }
/* MPU 300x250, the in-feed unit. */
.ad-mpu { width:300px; height:250px; }
/* Half page 300x600, for the results and methodology rails. */
.ad-halfpage { width:300px; height:600px; }
.ad-empty { color:var(--mut2); font-size:12px; font-weight:600; text-align:center; padding:12px; }

/* House promotion. Same slots and the same sizes as the advertising they stand in
   for, but deliberately NOT wearing the "Advertisement" label — it is our own
   product, and calling it an advertisement would be the same misdirection as
   failing to label a real one. So it is dressed as part of the site: the brand
   navy, the cash-out green on the button, and a glass sheen across the top. */
.ad-rail.house { padding:20px 0; }
.ad-rail .wrap.centre { display:flex; justify-content:center; }

.promo {
  position:relative; overflow:hidden; display:flex; align-items:center; gap:20px;
  text-decoration:none; color:#fff; border-radius:16px; padding:0 22px;
  background:linear-gradient(135deg, #1F2937 0%, var(--bar) 52%, #080F14 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 14px 34px rgba(0,0,0,.26);
  transition:box-shadow .3s ease, transform .3s ease;
}
/* A slow diagonal sheen across the top, so the panel reads as a lit surface
   rather than a flat blue rectangle. */
.promo::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(148deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 30%, transparent 58%);
}
/* One green bloom in the corner, picked up from the tiles. */
.promo::after {
  content:""; position:absolute; right:-70px; top:-90px; width:280px; height:280px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(51,209,126,.30) 0%, transparent 62%);
}
.promo:hover { text-decoration:none; transform:translateY(-2px);
               box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 20px 44px rgba(0,0,0,.34); }

.promo .copy { position:relative; z-index:1; min-width:0; }
.promo .kick {
  display:block; font-size:9.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#67EEFF; margin-bottom:5px;
}
.promo .hd { display:block; font-size:18px; font-weight:800; letter-spacing:-.028em; line-height:1.15; }
.promo .sub { display:block; margin-top:5px; font-size:12.5px; color:rgba(255,255,255,.70); line-height:1.45; }
.promo .cta {
  position:relative; z-index:1; margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; padding:12px 20px; border-radius:9px;
  background:var(--go); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:background .2s ease, gap .2s ease;
}
.promo:hover .cta { background:var(--go-hi); gap:12px; }
.promo .arw { transition:transform .2s ease; }
.promo:hover .arw { transform:translateX(2px); }

/* The MPU is a portrait block, so the same pieces stack instead of sitting in a row. */
.promo.ad-mpu {
  flex-direction:column; align-items:flex-start; justify-content:center;
  padding:24px; gap:14px;
}
.promo.ad-mpu .hd { font-size:24px; line-height:1.1; }
.promo.ad-mpu .sub { font-size:13px; }
.promo.ad-mpu .cta { margin-left:0; width:100%; justify-content:center; }

/* The house panel: full page width, a row on a desktop and a stack on a phone.
   It is not an ad unit, so it does not wear an ad unit's dimensions. */
.promo.ad-wide { width:100%; padding:24px 26px; gap:24px; }
.promo.ad-wide .copy { flex:1; max-width:62ch; }
.promo.ad-wide .hd { font-size:24px; line-height:1.1; }
.promo.ad-wide .sub { font-size:13.5px; margin-top:7px; }
@media (max-width: 760px) {
  .promo.ad-wide { flex-direction:column; align-items:flex-start; padding:20px; gap:16px; }
  .promo.ad-wide .hd { font-size:20px; }
  .promo.ad-wide .sub { display:block; }
  .promo.ad-wide .cta { margin-left:0; width:100%; justify-content:center; }
}

@media (max-width: 760px) {
  .promo { padding:0 15px; gap:12px; }
  .promo .hd { font-size:15px; }
  .promo .kick { font-size:9px; margin-bottom:3px; }
  /* 320x100 has room for a headline and a button, and not for body copy. */
  .ad-leaderboard.promo .sub { display:none; }
  .promo .cta { font-size:12.5px; padding:10px 14px; }
  .promo.ad-mpu { padding:20px; }
  .promo.ad-mpu .sub { display:block; }
}

/* Prototype bookmaker creative, for when third-party advertising is switched on.
   Clearly a placeholder, sized like the real thing. */
.ad-creative {
  width:100%; height:100%; display:flex; align-items:center; gap:14px;
  padding:0 18px; text-decoration:none; background:#080F14; color:#fff;
}
.ad-creative:hover { text-decoration:none; }
.ad-creative .logo {
  flex:none; font-size:12px; font-weight:800; letter-spacing:-.02em; padding:5px 8px;
  border-radius:5px; background:#fff; color:#080F14;
}
.ad-creative .copy { min-width:0; }
.ad-creative .hd { font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.ad-creative .sub { font-size:10.5px; color:rgba(255,255,255,.62); margin-top:3px; line-height:1.3; }
.ad-creative .cta {
  margin-left:auto; flex:none; font-size:12px; font-weight:800; padding:8px 14px;
  border-radius:6px; background:var(--gold); color:#080F14;
}
.ad-mpu .ad-creative { flex-direction:column; align-items:flex-start; justify-content:center; padding:20px; gap:10px; }
.ad-mpu .ad-creative .hd { font-size:22px; line-height:1.1; }
.ad-mpu .ad-creative .cta { margin-left:0; width:100%; text-align:center; }
/* A creative must never spill its slot: the slot size is the contract with the
   advertiser and a clipped headline is worse than a shorter one. */
.ad-creative .copy { overflow:hidden; }
@media (max-width: 760px) {
  .ad-leaderboard .ad-creative { padding:0 12px; gap:10px; }
  .ad-leaderboard .ad-creative .hd { font-size:13px; }
  .ad-leaderboard .ad-creative .cta { font-size:11px; padding:7px 10px; }
  /* 320x100 has room for a headline and a button, and not for body copy. */
  .ad-leaderboard .ad-creative .sub { display:none; }
  .ad-leaderboard .ad-creative .logo { font-size:10px; padding:4px 6px; }
}
/* Paid plans get this class on <body> and every slot collapses. */
body.no-ads .ad-rail, body.no-ads .ad { display:none; }

/* ---- sections ---- */
.sec { padding:52px 0; }
.sec-tight { padding:36px 0; }
.eyebrow {
  font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue); margin-bottom:10px;
}
.sec h2 { font-size:30px; margin-bottom:12px; }
.sec .lede { font-size:17px; color:var(--mut); max-width:62ch; }
@media (min-width: 760px){ .sec { padding:68px 0; } .sec h2 { font-size:36px; } }

/* ---- hero ---- */
.hero { position:relative; padding:34px 0 44px; }
.hero .grid { display:grid; gap:28px; align-items:start; }
@media (min-width: 940px) {
  .hero { padding:56px 0 60px; }
  .hero .grid { grid-template-columns:1fr 400px; gap:48px; }
}
.hero h1 { font-size:38px; letter-spacing:-.035em; }
@media (min-width: 760px){ .hero h1 { font-size:52px; } }
.hero .sub { margin-top:18px; font-size:18px; line-height:1.5; color:var(--mut); max-width:52ch; }
.hero .sub strong { color:var(--txt); font-weight:700; }
/* Above the tiles. They are welcome to drift across the headline — it is still
   readable through glass and that is the point of it — but a decorative panel must
   never come between a cursor and a button, and the two things people came here to
   press are in this row. */
.hero .cta { position:relative; z-index:46; display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero .trial-note { margin-top:12px; font-size:13px; color:var(--mut2); }

.kicker {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-size:12px; font-weight:700; padding:6px 12px 6px 8px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--mut); box-shadow:var(--shadow);
}
.kicker b { color:var(--txt); font-weight:800; }
.kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--win); flex:none; }

/* ---- betslip card ---- */
.slip { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.slip-hd { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.slip-hd .t { font-size:14px; font-weight:800; letter-spacing:-.02em; }
.slip-hd .d { font-size:11.5px; color:var(--mut2); font-weight:600; }
.pill {
  margin-left:auto; flex:none; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 9px; border-radius:5px;
}
.pill-won  { background:var(--win);  color:#080F14; }
.pill-lost { background:var(--loss); color:#fff; }
.pill-open { background:var(--card2); color:var(--mut); }

.leg { padding:13px 16px; border-bottom:1px solid var(--line); }
.leg .fx { font-size:11px; font-weight:700; color:var(--mut2); display:flex; gap:6px; align-items:baseline; }
.leg .fx .comp { color:var(--blue2); }
.leg .sel { display:flex; align-items:baseline; gap:10px; margin-top:3px; }
.leg .sel .s { font-size:15px; font-weight:700; letter-spacing:-.02em; flex:1; min-width:0; }
.leg .sel .o { font-size:15px; font-weight:800; flex:none; }
.leg .cond { font-size:12px; color:var(--mut); margin-top:3px; }
.leg .res { display:flex; align-items:center; gap:7px; margin-top:7px; font-size:11.5px; font-weight:700; }
.leg .res .tick { width:15px; height:15px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff; font-size:9px; }
.leg .res .tick.w { background:var(--win); color:#080F14; } .leg .res .tick.l { background:var(--loss); }
.leg .res .sc { color:var(--mut2); font-weight:600; }
.leg .why { margin-top:8px; padding:9px 11px; background:var(--card2); border-radius:7px; font-size:12.5px; line-height:1.45; color:var(--mut); }
.leg .why b { color:var(--txt); font-weight:700; }

.slip-ft { padding:13px 16px; background:var(--card2); }
.slip-ft .row { display:flex; align-items:baseline; justify-content:space-between; font-size:13px; }
.slip-ft .row + .row { margin-top:6px; }
.slip-ft .row .k { color:var(--mut); font-weight:600; }
.slip-ft .row .v { font-weight:800; }
.slip-ft .row.big { padding-top:9px; margin-top:9px; border-top:1px solid var(--line2); font-size:15px; }
.slip-ft .row.big .v { font-size:19px; }

/* ---- the refusal band ---------------------------------------------------
   Navy, full bleed, and carrying the one statistic no tipster site publishes:
   how much of the board was thrown away. */
.band { background:linear-gradient(180deg, var(--bar2) 0%, var(--bar) 100%); color:var(--ink); padding:34px 0; }
.band h2 { font-size:22px; color:#fff; }
.band .lede { color:rgba(255,255,255,.72); font-size:15px; margin-top:8px; max-width:64ch; }
.band .strip { display:grid; grid-template-columns:repeat(2, 1fr); margin-top:26px; }
/* The strip carries whatever counters the scan actually published — five some days,
   six others — so the columns come from the count rather than from a number here. */
@media (min-width: 700px){ .band .strip { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr; } }
.stat { padding:10px 14px; border-left:1px solid var(--ink-line); }
.band .strip .stat:nth-child(-n+2) { border-top:0; }
@media (max-width: 699px) {
  .stat { border-top:1px solid var(--ink-line); padding:12px 14px; }
  .stat:nth-child(odd) { border-left:0; }
}
@media (min-width: 700px){ .stat:first-child { border-left:0; } }
.stat b { display:block; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.1; white-space:nowrap; }
.stat span { display:block; margin-top:4px; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mut); }
.stat.hi b { color:var(--gold); }
.band .band-foot { margin-top:18px; font-size:12.5px; color:rgba(255,255,255,.58); }

/* ---- steps ---- */
.steps { display:grid; gap:14px; margin-top:30px; }
@media (min-width: 700px){ .steps { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1040px){ .steps { grid-template-columns:repeat(3,1fr); } }
.step { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); }
.step .n {
  width:26px; height:26px; border-radius:6px; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue); font-size:13px; font-weight:800; margin-bottom:11px;
}
.step h3 { font-size:16.5px; margin-bottom:7px; }
.step p { font-size:14px; color:var(--mut); line-height:1.5; }
.step.key { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), var(--shadow); }
.step.key .n { background:var(--blue); color:#fff; }

/* ---- inputs table ---- */
.inputs { margin-top:26px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card); }
.input-row { display:grid; grid-template-columns:34px 1fr; gap:0 12px; padding:14px 16px; border-top:1px solid var(--line); }
.input-row:first-child { border-top:0; }
.input-row .n { font-size:12px; font-weight:700; color:var(--mut2); padding-top:2px; }
.input-row .nm { font-size:15px; font-weight:700; letter-spacing:-.015em; display:flex; align-items:center; gap:9px; }
.input-row .dt { grid-column:2; font-size:13.5px; color:var(--mut); line-height:1.5; margin-top:5px; }
/* One tick per input, all the same, sitting immediately after the name rather than
   ranged off at the row's edge — it belongs to the words, not to a column. The list
   says what the tool weighs; it does not grade the inputs against each other. */
.input-row .nm { justify-content:flex-start; }
.input-row .tick {
  flex:none; width:18px; height:18px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--win); color:#fff; font-size:10px; font-weight:800; line-height:1;
}

/* ---- refusals ---- */
.refusals { display:grid; gap:12px; margin-top:28px; }
@media (min-width: 820px){ .refusals { grid-template-columns:repeat(2,1fr); } }
.refusal { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--loss); border-radius:var(--r); padding:15px 17px; }
.refusal .fx { font-size:14.5px; font-weight:800; letter-spacing:-.02em; }
.refusal p { margin-top:6px; font-size:13.5px; color:var(--mut); line-height:1.5; }

/* ---- the locked state ----
   Where the refusals go before the bet opens. It says what is behind the door and
   when it opens, rather than pretending the section is empty. */
.locked {
  margin-top:26px; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--go); border-radius:var(--r); padding:20px 22px;
  box-shadow:var(--shadow); max-width:70ch;
}
.lock-head { display:flex; align-items:center; gap:9px; font-size:16px; letter-spacing:-.02em; }
.lock-ic { color:var(--go); font-size:11px; }
.locked p { margin-top:9px; font-size:14px; line-height:1.6; color:var(--mut); }
.locked .lock-sub { font-size:13px; color:var(--mut2); }
.lock-cta { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }

/* ---- the scan's own notes ----
   The run's working, published as it was written. Set as a quotation rather than
   as copy, because it is not copy: nobody edited it for the page. */
.notes { margin-top:34px; border-left:3px solid var(--blue); padding:2px 0 2px 20px; }
.notes h3 { font-size:18px; }
.notes .notes-intro { font-size:13.5px; color:var(--mut2); margin-top:6px; }
.notes ul { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px; counter-reset:note; }
.notes li {
  position:relative; padding-left:30px; font-size:14px; line-height:1.55; color:var(--mut);
  counter-increment:note;
}
.notes li::before {
  content:counter(note); position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue); font-size:11px; font-weight:800;
}
.notes li b { color:var(--txt); font-weight:700; }

/* ---- pricing ---- */
.toggle { display:inline-flex; padding:3px; background:var(--card2); border:1px solid var(--line); border-radius:9px; margin-top:20px; }
.toggle button {
  font-family:inherit; font-size:13.5px; font-weight:700; padding:8px 18px; border-radius:7px;
  border:0; background:transparent; color:var(--mut); cursor:pointer;
}
.toggle button[aria-pressed="true"] { background:var(--card); color:var(--txt); box-shadow:var(--shadow); }
.toggle .save { color:var(--win); font-weight:800; margin-left:6px; font-size:12px; }

/* Four plans: two abreast from tablet width, all four in a row once there is
   room for the featured one to still read as featured. */
.plans { display:grid; gap:16px; margin-top:26px; align-items:start; }
@media (min-width: 700px){ .plans { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1100px){ .plans { grid-template-columns:repeat(4,1fr); gap:14px; } }
@media (min-width: 1100px){ .plan { padding:20px 18px; } .plan .price .amt { font-size:34px; } }
.plan { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.plan.feature { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue), var(--shadow-lg); }
.plan .flag {
  align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  background:var(--blue); color:#fff; padding:4px 9px; border-radius:5px; margin-bottom:12px;
}
.plan h3 { font-size:20px; }
.plan .desc { font-size:13.5px; color:var(--mut); margin-top:6px; min-height:40px; }
.plan .price { margin:16px 0 4px; display:flex; align-items:baseline; gap:6px; }
.plan .price .amt { font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.plan .price .per { font-size:14px; color:var(--mut); font-weight:600; }
.plan .vat { margin-top:6px; font-size:12px; color:var(--mut); line-height:1.4; }
.plan .alt { margin-top:4px; font-size:12.5px; color:var(--mut2); min-height:19px; }
/* A second flag on the board, so it must not compete with "Most people want this".
   Same shape, no fill — a note rather than a claim. */
.plan .flag-quiet { background:transparent; color:var(--blue); border:1px solid var(--blue); }
.plan .btn { margin:18px 0 16px; }
.plan ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.plan li { display:grid; grid-template-columns:17px 1fr; gap:9px; font-size:13.5px; line-height:1.45; color:var(--mut); }
.plan li b { color:var(--txt); font-weight:700; }
.plan li .ic { margin-top:3px; color:var(--win); }
.plan li.no { color:var(--mut2); }
.plan li.no .ic { color:var(--mut2); }
.plan .grp { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mut2); margin:16px 0 -1px; }

/* ---- record ---- */
.record { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:26px; box-shadow:var(--shadow); }
.record .warn {
  display:flex; gap:11px; padding:14px 18px; background:rgba(178,106,0,.09);
  border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.5; color:var(--txt);
}
:root:not([data-theme="light"]) .record .warn { background:rgba(224,160,60,.10); }
.record .warn .ic { flex:none; color:var(--warn); margin-top:1px; }
.record .warn b { font-weight:800; }
.record table { width:100%; border-collapse:collapse; font-size:13.5px; }
.record th {
  text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mut2); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.record td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.record tr:last-child td { border-bottom:0; }
.record th.r, .record td.r { text-align:right; }
.record .fxlist { color:var(--mut); font-size:12.5px; margin-top:3px; }
.record .mode { font-weight:700; }
.record .empty { padding:26px 18px; color:var(--mut); font-size:14px; }
.record-wrap { overflow-x:auto; }
.placeholder-note {
  margin-top:12px; font-size:12.5px; color:var(--mut2); display:flex; gap:8px; align-items:flex-start;
}

/* ---- faq / honesty ---- */
.qa { display:grid; gap:12px; margin-top:26px; }
@media (min-width: 820px){ .qa { grid-template-columns:repeat(2,1fr); } }
.qa .q { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:17px 19px; }
.qa .q h3 { font-size:15.5px; margin-bottom:7px; }
.qa .q p { font-size:13.5px; color:var(--mut); line-height:1.55; }

/* ---- footer ---- */
.foot { background:var(--util); color:rgba(255,255,255,.62); padding:40px 0 26px; font-size:13px; margin-top:8px; }
.foot a { color:rgba(255,255,255,.62); }
.foot a:hover { color:#fff; }
.foot .cols { display:grid; gap:26px; }
@media (min-width: 760px){ .foot .cols { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; } }
.foot h4 { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:11px; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot .brand .word { font-size:16px; }
.foot .blurb { margin-top:12px; max-width:38ch; line-height:1.55; }

.rg { margin-top:32px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.rg .head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rg .age {
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:24px;
  padding:0 7px; border-radius:12px; border:2px solid rgba(255,255,255,.80); color:#fff;
  font-size:13px; font-weight:800;
}
.rg .orgs { display:flex; gap:8px; flex-wrap:wrap; }
.rg .orgs a {
  font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:6px 11px; border-radius:6px;
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.80); text-decoration:none;
}
.rg .orgs a:hover { background:rgba(255,255,255,.10); color:#fff; text-decoration:none; }
.rg p { margin-top:14px; line-height:1.6; max-width:88ch; font-size:12.5px; color:rgba(255,255,255,.55); }
.rg p + p { margin-top:9px; }
.rg strong { color:rgba(255,255,255,.86); font-weight:700; }
.legal { margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:11.5px; color:rgba(255,255,255,.42); display:flex; gap:16px; flex-wrap:wrap; }

/* ---- mobile nav ---- */
@media (max-width: 900px) {
  .nav {
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; margin:0; padding:8px; background:var(--bar);
    border-top:1px solid rgba(255,255,255,.14); box-shadow:0 12px 24px rgba(0,0,0,.30);
  }
  .nav.open { display:flex; }
  .nav a { padding:12px 14px; font-size:15px; border-radius:8px; }
  .burger {
    display:grid; place-items:center; width:34px; height:34px; padding:0; cursor:pointer;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:8px; color:#fff;
  }
  .burger svg { width:18px; height:18px; }
  .top .wrap { position:relative; }
  .top .right .btn { display:none; }
}

/* ---- calibration card + probability pairs ---------------------------------
   The hero's right-hand object. It replaced a bet slip with a stake and a
   return on it: same engine behind it, but what the page leads with is now
   whether the model's confidence matches reality, which is the only claim
   this site is in a position to make. */
.calib-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 20px 16px; box-shadow:var(--shadow); }
.calib-loading { color:var(--mut); font-size:14px; margin:0; }
.calib-hd { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.calib-hd b { font-size:30px; line-height:1; letter-spacing:-.01em; }
.calib-hd span { color:var(--mut); font-size:12.5px; line-height:1.4; }
.calib-hd span b { color:var(--txt); font-size:inherit; }
.calib-svg { width:100%; height:auto; display:block; }
.calib-ft { color:var(--mut); font-size:12px; line-height:1.5; margin:10px 0 0; }
.calib-ft b { color:var(--txt); }

/* Model against market, per selection. Tabular figures so the columns line up
   down a list of legs. */
.pp { display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; }
.pp-i { display:flex; flex-direction:column; line-height:1.15; font-variant-numeric:tabular-nums; }
.pp-i b { font-size:15px; }
.pp-i span { color:var(--mut); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.pp-i.gap b { color:var(--mut); }
.pp-i.gap.over b { color:var(--go); }
.pp-i.gap.under b { color:var(--warn); }

/* ---- the post-mortem on a lost leg ---- */
.rvw { display:flex; gap:10px; align-items:flex-start; margin-top:10px; padding:10px 12px;
       background:var(--card2); border:1px solid var(--line); border-radius:10px; font-size:13px; line-height:1.45; }
.rv { flex:none; border-radius:999px; padding:2px 9px; font-size:10.5px; font-weight:700;
      letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; margin-top:2px; }
.rv-variance { background:rgba(21,145,74,.12); color:var(--win); }
.rv-model { background:rgba(214,0,43,.10); color:var(--loss); }
.rv-event { background:rgba(245,166,35,.16); color:var(--warn); }
.rv-market { background:var(--blue-soft); color:var(--blue); }
.rv-unknown { background:var(--card); color:var(--mut); border:1px solid var(--line); }
.rv-text { color:var(--txt); }


/* ==========================================================================
   The high-tech pass. One visual language: charcoal ground, slate panels on
   hairlines, no drop shadows in the dark, cyan for the figure, the press and
   the accent line. The wordmark carries the brand; there is no mark.
   ========================================================================== */
.brand .mark { display:none; }
.brand .wordset { gap:4px; }
.brand .word { font-size:19px; letter-spacing:.16em; }
.brand .tag { font-size:8px; letter-spacing:.38em; color:var(--blue); opacity:.9; }
.foot .brand .word { font-size:16px; }

.util { background:#05090D; border-bottom:0; color:var(--mut); font-weight:500; }
.util .age { border-color:var(--blue); color:var(--blue); }

.top { background:rgba(8,15,20,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
       border-bottom:1px solid var(--line); box-shadow:none; }
.top .wrap { min-height:64px; }
.nav a { color:rgba(255,255,255,.70); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.nav a:hover { background:transparent; color:#fff; }
.tog, .burger { background:transparent; border-color:var(--line2); }
.tog:hover, .burger:hover { background:rgba(255,255,255,.06); }

/* The hero's ground: a cyan bloom off the top corner and a fine grid. */
.hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(0,229,255,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 48px 48px;
  border-bottom:1px solid var(--line);
}
:root[data-theme="light"] .hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(0,151,167,.14), transparent 60%),
    linear-gradient(rgba(17,24,39,.05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(17,24,39,.05) 1px, transparent 1px) 0 0 / 48px 48px;
}
.hero h1 { letter-spacing:-.025em; }
.kicker { background:rgba(0,229,255,.06); border-color:rgba(0,229,255,.28); color:var(--mut); box-shadow:none;
          font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11.5px; letter-spacing:.02em; }
.kicker b { color:var(--txt); }

.eyebrow { color:var(--blue); letter-spacing:.24em; font-size:10.5px; }
.sec h2 { letter-spacing:-.02em; }

.btn { border-radius:8px; }
.btn-go { box-shadow:0 0 0 1px rgba(0,229,255,.35), 0 8px 24px rgba(0,229,255,.18); }
.btn-go:hover { box-shadow:0 0 0 1px rgba(0,229,255,.65), 0 10px 30px rgba(0,229,255,.28); }
.btn-ghost { border-color:var(--line2); background:rgba(255,255,255,.02); }
.btn-ghost:hover { background:rgba(255,255,255,.06); }

/* Every panel the same: a hairline, no shadow. */
.slip, .calib-card, .step, .plan, .qa .q, .record, .refusal, .promo, .toggle, #trial .wrap > div {
  box-shadow:none; border:1px solid var(--line); background:var(--card); border-radius:12px;
}
.calib-card { position:relative; overflow:hidden; }
.calib-card::before { content:""; position:absolute; left:0; right:0; top:0; height:2px;
                      background:linear-gradient(90deg, var(--blue), transparent 70%); }
.calib-hd b { color:var(--blue); }

.step .n { background:rgba(0,229,255,.10); color:var(--blue); border:1px solid rgba(0,229,255,.32); }
.step.key { border-color:rgba(0,229,255,.55); box-shadow:0 0 0 1px rgba(0,229,255,.25), 0 0 44px rgba(0,229,255,.08); }
.step.key .n { background:var(--blue); color:#080F14; border-color:var(--blue); }

.plan.feature { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), 0 0 48px rgba(0,229,255,.12); }
.plan .flag { background:var(--blue); color:#080F14; }
.plan .flag-quiet { background:transparent; color:var(--blue); border:1px solid var(--blue); }
.plan li .ic { color:var(--blue); }
.toggle button[aria-pressed="true"] { box-shadow:none; background:var(--card2); border:1px solid var(--line2); }

.slip-hd { background:rgba(255,255,255,.025); }
.slip-hd .t { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.leg .fx .comp { color:var(--blue); }
.leg .sel .o { color:var(--blue); }
.pill { letter-spacing:.08em; }

.record th { text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; color:var(--mut2); background:rgba(255,255,255,.025); }
.record td.r b { color:var(--blue); }
.record tfoot td { background:rgba(255,255,255,.025); }

.promo { background:linear-gradient(135deg, #111827 0%, #0B1220 100%); border-color:rgba(0,229,255,.24); }
.promo::before { background:linear-gradient(148deg, rgba(255,255,255,.06) 0%, transparent 50%); }
.promo::after { background:radial-gradient(circle, rgba(0,229,255,.22) 0%, transparent 62%); }
.promo:hover { box-shadow:0 0 0 1px rgba(0,229,255,.45), 0 16px 40px rgba(0,0,0,.4); }
.promo .kick { color:var(--blue); }
.promo .cta { background:var(--blue); color:#080F14; box-shadow:none; }
.promo:hover .cta { background:var(--go-hi); }

.foot { background:#05090D; border-top:1px solid var(--line); }
.rg .age { border-color:var(--blue); color:var(--blue); }
:focus-visible { outline-color:var(--blue); }

/* The hero leads with the record. One number, large, in the accent; the
   rest of the figures in a quiet row beneath. Nothing about money anywhere. */
.hero .h-rec { display:flex; flex-direction:column; gap:6px; }
.hero .h-rec .big {
  display:block; font-size:92px; line-height:.92; letter-spacing:-.045em; font-weight:900;
  color:var(--blue); font-variant-numeric:tabular-nums;
  text-shadow:0 0 48px rgba(0,229,255,.35);
}
.hero .h-rec .line { display:block; font-size:30px; line-height:1.12; letter-spacing:-.025em; font-weight:800; }
@media (min-width: 760px){
  .hero .h-rec .big { font-size:128px; }
  .hero .h-rec .line { font-size:38px; }
}
:root[data-theme="light"] .hero .h-rec .big { text-shadow:none; }
.hero .sub b { color:var(--txt); font-weight:800; }
.hero-stats {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 22px; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--line);
}
@media (min-width: 560px){ .hero-stats { grid-template-columns:repeat(4, auto); justify-content:start; gap:14px 34px; } }
.hs b { display:block; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.hs b small { font-size:12px; font-weight:600; letter-spacing:0; color:var(--mut); margin-left:4px; }
.hs span { display:block; margin-top:6px; font-size:9.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--mut2); }
.hs-edge b { color:var(--blue); }

/* Day by day, in the hero: ten bars, one per day published. */
.days-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 20px 16px; position:relative; overflow:hidden; }
.days-card::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--blue), transparent 70%); }
.days-loading { color:var(--mut); font-size:14px; margin:0; }
.days-hd { display:flex; flex-direction:column; gap:2px; margin-bottom:18px; }
.days-hd .eyebrow { margin-bottom:6px; }
.days-hd b { font-size:30px; line-height:1; letter-spacing:-.02em; color:var(--blue); font-variant-numeric:tabular-nums; }
.days-sub { color:var(--mut); font-size:12.5px; margin-top:6px; }
.dbars { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; align-items:end; height:150px; }
.db { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; min-width:0; }
.db-frac { font-size:10px; font-weight:700; color:var(--mut); font-variant-numeric:tabular-nums; }
.db-track { flex:1; width:100%; max-width:34px; display:flex; align-items:flex-end; background:rgba(107,114,128,.18); border-radius:5px; overflow:hidden; }
/* Every bar is the share that happened, in the accent; a clean sweep is lit. */
.db-fill { width:100%; background:var(--blue); opacity:.5; border-radius:5px 5px 0 0; transition:height .9s cubic-bezier(.2,.8,.2,1); }
.db.all .db-fill { opacity:1; box-shadow:0 0 18px rgba(0,229,255,.35); }
.db.all .db-frac { color:var(--blue); }
.db-date { font-size:8.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--mut2); white-space:nowrap; }
.days-ft { margin:14px 0 0; font-size:12px; color:var(--mut); line-height:1.5; }
@media (prefers-reduced-motion: reduce){ .db-fill { transition:none; } }

/* The founders' offer: one card and the note beside it. */
.founders { display:grid; gap:16px; margin-top:26px; align-items:start; }
@media (min-width: 860px){ .founders { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; } }
.founders-card .price .per { color:var(--mut); }
.founders-note { padding:4px 0; }
.founders-note h3 { font-size:17px; margin-bottom:8px; }
.founders-note p { font-size:14px; color:var(--mut); line-height:1.6; }
.founders-note p + p { margin-top:10px; }
.founders-note b { color:var(--txt); }

/* Sign in beside Join free in the masthead; both fold into the menu on a phone. */
.top .btn-top { color:#fff; border-color:rgba(255,255,255,.28); background:transparent; }
.top .btn-top:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); }
.nav .nav-mobile { display:none; }
@media (max-width: 900px) {
  .nav .nav-mobile { display:block; border-top:1px solid rgba(255,255,255,.12); margin-top:6px; padding-top:14px; }
  .nav .nav-mobile + .nav-mobile { border-top:0; margin-top:0; padding-top:12px; }
  .nav .nav-mobile-go { color:var(--blue); font-weight:800; }
}

/* The run, under the bars. */
.days-run { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.days-run b { display:block; font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; }
.days-run span { display:block; margin-top:5px; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mut2); line-height:1.4; }
.hs-sample b small { font-size:12px; font-weight:600; letter-spacing:0; color:var(--mut); margin-left:4px; }

/* The brand is a link; it does not underline. */
.brand, .brand:hover, a.brand:hover .word { text-decoration:none; }
a.brand:hover { text-decoration:none; }

/* No hairline above or below the masthead. */
.top { box-shadow:none; border-top:0; }
.util { box-shadow:none; }

/* The hero: the card sits level with the words, and the grid fades out
   towards the foot rather than stopping at a line. */
@media (min-width: 940px) { .hero .grid { align-items:center; } }
.hero { border-bottom:0; padding-bottom:72px; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:220px; pointer-events:none;
               background:linear-gradient(to bottom, transparent, var(--bg)); }
.hero .wrap { position:relative; z-index:1; }

/* The record behind sign-up: a few rows show through, the rest is the offer. */
.record-locked { position:relative; }
.record-locked .record-wrap { filter:blur(4px); opacity:.55; pointer-events:none; user-select:none; max-height:260px; overflow:hidden; }
.record-gate { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px;
               background:linear-gradient(to bottom, transparent, var(--card) 55%); }
.record-gate .inner { text-align:center; max-width:46ch; }
.record-gate h3 { font-size:20px; margin-bottom:8px; }
.record-gate p { font-size:14px; color:var(--mut); line-height:1.55; }
.record-gate .cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.sealed-gate { background:var(--card); border:1px solid rgba(0,229,255,.35); border-radius:12px; padding:28px 24px; text-align:center; margin-top:18px; }
.sealed-gate h2 { font-size:22px; margin-bottom:8px; }
.sealed-gate p { font-size:14.5px; color:var(--mut); line-height:1.55; max-width:48ch; margin:0 auto; }
.sealed-gate .cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }