/* ============================================================
   VEGAS BUSTER — STYLESHEET
   Dark sportsbook aesthetic. Edit colors in :root below.
   ============================================================ */

:root{
  /* Surfaces — neutral dark grey carrying a faint green undertone,
     so the accent green reads as part of the palette, not stuck on top. */
  --bg:        #080A0A;
  --surface:   #121816;
  --surface-2: #1A211E;
  --surface-3: #222A27;
  --line:      #2E3833;
  --line-soft: #1E2523;

  /* Text — very slightly warm-neutral so it doesn't go blue against the green */
  --text:      #F2F5F3;
  --muted:     #98A39D;
  --dim:       #6B7570;

  /* Accents */
  --green:     #2FD980;   /* softened from neon; still pops, less harsh at size */
  --green-lo:  #22B96B;   /* gradient bottom / hover */
  --green-dim: #0E7A4B;
  --red:       #F4525F;   /* desaturated a touch to sit beside the green */
  --gold:      #E8B93F;   /* pulled back from bright yellow to an aged gold */
  --gold-dim:  #9E7C24;
  --felt:      #0B3226;   /* casino felt, used behind the free play */

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --r:    14px;
  --r-sm: 9px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.wrap--narrow{ max-width:820px; }

/* ---------- Type ---------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem, 5.6vw, 4.4rem); margin-bottom:24px; }
h2{ font-size:clamp(2.1rem, 4.4vw, 3.2rem); }
h3{ font-size:1.28rem; letter-spacing:0; }

h1 em{
  font-style:normal;
  color:var(--green);
  text-shadow:0 0 34px rgba(47,217,128,.36);
}

.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display);
  font-size:.9rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(47,217,128,.16);
  animation:pulse 2.4s ease-in-out infinite;
  flex:none;
}
.dot--gold{ background:var(--gold); box-shadow:0 0 0 4px rgba(232,185,63,.16); }
@keyframes pulse{ 50%{ opacity:.42; } }

.lede{ font-size:1.1rem; color:var(--muted); max-width:56ch; margin:0 0 32px; }
.lede strong{ color:var(--text); font-weight:600; }
.sub{ color:var(--muted); max-width:62ch; margin:14px 0 0; }

/* Tabular numbers everywhere odds/records appear */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body);
  font-weight:600; font-size:.95rem;
  padding:13px 24px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(180deg, #38E389, #1FB56A);
  color:#04120B;
  box-shadow:0 6px 26px -8px rgba(47,217,128,.6);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(47,217,128,.7); }
.btn--gold{
  background:linear-gradient(180deg, #F2C752, #C99A23);
  color:#181203;
  box-shadow:0 6px 26px -8px rgba(232,185,63,.55);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(232,185,63,.68); }
.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--green); color:var(--green); transform:translateY(-2px); }
.btn--outline{
  background:var(--surface-2); color:var(--text); border-color:var(--line);
}
.btn--outline:hover{ border-color:var(--muted); transform:translateY(-2px); }
.btn--lg{ padding:16px 32px; font-size:1.02rem; }
.btn--sm{ padding:9px 17px; font-size:.87rem; }
.btn--block{ width:100%; }

.chip{
  display:inline-block;
  font-size:.76rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted);
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:6px 12px; border-radius:100px;
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:#040605;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
  padding:9px 0;
  position:relative; z-index:60;
}
.ticker__track{
  display:flex; gap:34px;
  width:max-content;
  animation:scroll 46s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

.tick{
  display:flex; align-items:center; gap:9px;
  font-size:.8rem; font-weight:500;
  color:var(--dim);
  white-space:nowrap;
}
.tick b{
  font-family:var(--display);
  font-size:.86rem; font-weight:700;
  letter-spacing:.06em;
  padding:2px 8px; border-radius:4px;
}
.tick--w b{ background:rgba(47,217,128,.14); color:var(--green); }
.tick--l b{ background:rgba(244,82,95,.14);  color:var(--red); }
.tick--p b{ background:rgba(152,163,157,.14); color:var(--muted); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,10,10,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line-soft); background:rgba(8,10,10,.94); }

.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }

.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo__mark{ color:var(--gold); display:flex; align-items:center; flex:none; }
.logo__text{ display:flex; flex-direction:column; }
.logo__name{
  font-family:var(--display); font-weight:700;
  font-size:1.32rem; letter-spacing:.13em; line-height:1;
}
.logo__tag{
  font-size:.56rem; letter-spacing:.28em;
  color:var(--dim); margin-top:3px; font-weight:600;
}

.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links > a{
  font-size:.91rem; font-weight:500; color:var(--muted);
  transition:color .16s ease;
}
.nav__links > a:hover{ color:var(--text); }
.nav__links .btn{ color:#04120B; }
.nav__x{ display:flex; color:var(--muted); }

.nav__toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  padding:9px; gap:5px; flex-direction:column;
}
.nav__toggle span{
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:82px 0 92px; overflow:hidden; }
.hero__glow{
  position:absolute; inset:-40% -20% auto -20%; height:760px;
  background:
    radial-gradient(52% 60% at 22% 34%, rgba(47,217,128,.15), transparent 68%),
    radial-gradient(46% 54% at 82% 20%, rgba(232,185,63,.10), transparent 66%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:grid; grid-template-columns:1.35fr .95fr;
  gap:64px; align-items:center;
}
.hero__cta{ display:flex; gap:13px; flex-wrap:wrap; margin-bottom:26px; }
.hero__trust{ display:flex; gap:9px; flex-wrap:wrap; }

/* Hero side card */
.hero__card{
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px;
  box-shadow:0 28px 70px -24px rgba(0,0,0,.85);
}
.kick__label{
  font-family:var(--display);
  font-size:.82rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin:0 0 14px;
}
.kick__clock{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.kick__clock > div{
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  padding:12px 6px; text-align:center;
}
.kick__clock b{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:1.78rem; line-height:1;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.kick__clock span{
  display:block; margin-top:5px;
  font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dim);
}
.kick__divider{ height:1px; background:var(--line-soft); margin:24px 0; }

.heroplay__label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--display); font-size:.82rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin:0 0 12px;
}
.heroplay__match{ font-size:.9rem; color:var(--muted); margin:0 0 8px; }
.heroplay__pick{
  font-family:var(--display); font-weight:700;
  font-size:2rem; line-height:1.05; margin:0 0 4px;
}
.heroplay__meta{
  display:flex; gap:10px; align-items:center;
  font-size:.85rem; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.heroplay__odds{ color:var(--green); font-weight:700; }
.heroplay a{
  display:inline-block; margin-top:16px;
  font-size:.87rem; font-weight:600; color:var(--green);
  border-bottom:1px solid rgba(47,217,128,.34);
  padding-bottom:2px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:92px 0; }
.section--tight{ padding:0 0 20px; }
.section--alt{ background:var(--surface); border-block:1px solid var(--line-soft); }
.sectionhead{ margin-bottom:40px; }
.sectionhead--center{ text-align:center; }
.sectionhead--center .eyebrow{ justify-content:center; }
.sectionhead--center .sub{ margin-inline:auto; }

/* ---------- Stat tiles ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 22px;
  position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--green), transparent);
  opacity:.5;
}
.stat--gold::after{ background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.stat__label{
  font-family:var(--display);
  font-size:.8rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--dim); margin:0 0 10px;
}
.stat__value{
  font-family:var(--display); font-weight:700;
  font-size:2.9rem; line-height:1;
  font-variant-numeric:tabular-nums;
  margin:0;
}
.stat__value.is-pos{ color:var(--green); }
.stat__value.is-neg{ color:var(--red); }
.stat__value.is-gold{ color:var(--gold); }
.stat__sub{ font-size:.8rem; color:var(--dim); margin:7px 0 0; }
.stats__note{
  text-align:center; font-size:.83rem; color:var(--dim);
  margin:20px 0 0;
}

/* ---------- Free play (full) ---------- */
.freeplay{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:0;
  background:linear-gradient(150deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.freeplay__left{
  padding:38px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(47,217,128,.10), transparent 62%),
    var(--felt);
  border-right:1px solid var(--line);
}
.freeplay__league{
  display:inline-block;
  font-family:var(--display); font-size:.76rem; font-weight:700;
  letter-spacing:.15em;
  background:rgba(255,255,255,.10); color:#fff;
  padding:5px 11px; border-radius:5px; margin-bottom:18px;
}
.freeplay__match{ font-size:1rem; color:rgba(255,255,255,.72); margin:0 0 6px; }
.freeplay__time{ font-size:.83rem; color:rgba(255,255,255,.46); margin:0 0 22px; }
.freeplay__pick{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem,4vw,3rem); line-height:1;
  margin:0 0 12px; color:#fff;
}
.freeplay__odds{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  font-variant-numeric:tabular-nums;
}
.pill{
  font-size:.8rem; font-weight:600;
  background:rgba(0,0,0,.34); color:#fff;
  border:1px solid rgba(255,255,255,.14);
  padding:5px 11px; border-radius:100px;
}
.pill--green{ background:rgba(47,217,128,.18); border-color:rgba(47,217,128,.4); color:var(--green); }

.freeplay__right{ padding:38px; }
.freeplay__h{
  font-family:var(--display); font-size:.82rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--dim); margin:0 0 12px;
}
.freeplay__text{ color:var(--muted); margin:0 0 24px; }

/* Between plays (freePlay.pending in data/picks.js). Same shell as a live
   free play so the section keeps its weight on the page — the left panel
   just carries "Dropping soon" instead of a pick, and the right panel ends
   in two buttons rather than one. */
.freeplay--pending .freeplay__left{ display:flex; flex-direction:column; justify-content:center; }
.freeplay--pending .freeplay__pick{ opacity:.82; }
.freeplay__ctarow{ display:flex; flex-wrap:wrap; gap:10px; }
.freeplay__ctarow .btn{ flex:1 1 auto; text-align:center; }
.flames{ display:flex; align-items:center; gap:4px; margin-bottom:22px; }
.flames span{ font-size:1rem; filter:grayscale(1); opacity:.28; }
.flames span.on{ filter:none; opacity:1; }
.flames em{
  font-style:normal; font-size:.78rem; color:var(--dim);
  margin-left:7px; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Card grid ---------- */
.cardgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(258px,1fr));
  gap:14px;
}
.pcard{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px;
  position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
  min-height:196px;
  display:flex; flex-direction:column;
}
.pcard:hover{ border-color:var(--line); transform:translateY(-3px); }
.pcard__top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px;
}
.pcard__league{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.15em;
  color:var(--dim);
  border:1px solid var(--line);
  padding:3px 9px; border-radius:4px;
}
.pcard__units{
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  color:var(--gold); text-transform:uppercase;
}
.pcard__match{ font-size:.87rem; color:var(--muted); margin:0 0 6px; }
.pcard__pick{
  font-family:var(--display); font-weight:700;
  font-size:1.6rem; line-height:1.05; margin:0 0 8px;
}
.pcard__note{ font-size:.83rem; color:var(--dim); margin:10px 0 0; }
.pcard__time{ font-size:.78rem; color:var(--dim); margin-top:auto; padding-top:14px; }

/* Locked state
   The overlay is rendered as a <button> by js/main.js (see lockOverlay), so
   it needs the button reset below. It falls back to a plain <div> when
   checkout.lockedCardAction is "none" — the cursor and hover rules are
   scoped to button.pcard__lock so the inert version stays inert. */
.pcard--locked .pcard__body{ filter:blur(7px); opacity:.34; user-select:none; }
.pcard__lock{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  background:linear-gradient(180deg, rgba(18,24,22,.34), rgba(18,24,22,.86));
  /* button reset */
  width:100%; margin:0; padding:0; border:0; font:inherit; color:inherit;
  text-align:center; -webkit-appearance:none; appearance:none;
  transition:background .2s ease;
}
button.pcard__lock{ cursor:pointer; }
.pcard__lock svg{ color:var(--gold); }
.pcard__lock b{
  font-family:var(--display); font-size:.86rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}

/* "Members only" and the price swap places on hover. Both labels sit in the
   same grid cell so the overlay doesn't reflow when they cross over. */
.pcard__lock__labels{ display:grid; place-items:center; }
.pcard__lock__labels > *{
  grid-area:1 / 1;
  transition:opacity .18s ease, transform .18s ease;
}
.pcard__lock__cta{
  opacity:0; transform:translateY(5px);
  font-family:var(--display); font-size:.95rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  white-space:nowrap;
}
.pcard--locked:hover button.pcard__lock b,
button.pcard__lock:focus-visible b{ opacity:0; transform:translateY(-5px); }
.pcard--locked:hover .pcard__lock__cta,
button.pcard__lock:focus-visible .pcard__lock__cta{ opacity:1; transform:none; }

.pcard--locked:hover{ border-color:rgba(232,185,63,.45); }
.pcard--locked:hover button.pcard__lock{
  background:linear-gradient(180deg, rgba(18,24,22,.28), rgba(18,24,22,.9));
}
button.pcard__lock:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; }

/* Phones and tablets never fire :hover, so the swap would leave the price
   permanently hidden on the devices most people browse from. Stack the two
   labels and show both instead. */
@media (hover:none){
  .pcard__lock__labels{ display:flex; flex-direction:column; gap:7px; }
  .pcard__lock__labels > *{ grid-area:auto; }
  .pcard__lock__cta{ opacity:1; transform:none; font-size:.85rem; }
}

.cardgrid__cta{ text-align:center; margin-top:34px; }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px;
}
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(47,217,128,.12);
  border:1px solid rgba(47,217,128,.3);
  color:var(--green);
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  margin-bottom:16px;
}
.step h3{ margin-bottom:9px; }
.step p{ color:var(--muted); font-size:.94rem; margin:0; }

/* ---------- Pricing ---------- */
/* Three tiers across. No `align-items:start` — that was making every card
   only as tall as its own text, which is why they used to end ragged.
   The default (stretch) squares them off and, because .tier .btn has
   margin-top:auto, it lands every Buy button on the same line. */
.pricing{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.tier{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px 22px;
  display:flex; flex-direction:column;
  position:relative;
}
.tier--featured{
  border-color:rgba(232,185,63,.42);
  background:linear-gradient(170deg, rgba(232,185,63,.07), var(--surface) 42%);
  box-shadow:0 28px 64px -28px rgba(232,185,63,.32);
  /* Lifts the Season Pass ~12px proud of the row top and bottom, so it
     reads as the featured one without breaking the shared baseline.
     Zeroed out below 900px, where the cards stack and there's no row. */
  margin-block:-12px;
}

/* Added for ~2.6s when someone clicks a locked card, so they land looking at
   one tier instead of three. The static ring is on the class itself and the
   pulse rides on top — under prefers-reduced-motion the animation is squashed
   to nothing but the ring still marks the card. Declared after .tier--featured
   so it still shows if the unlock tier is ever switched to the Season Pass. */
.tier--flash{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(47,217,128,.22);
  animation:tierflash 1.8s ease-out 1;
}
@keyframes tierflash{
  0%  { box-shadow:0 0 0 0 rgba(47,217,128,.55); }
  60% { box-shadow:0 0 0 14px rgba(47,217,128,0); }
  100%{ box-shadow:0 0 0 3px rgba(47,217,128,.22); }
}

.tier__badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.16em;
  background:linear-gradient(180deg,#F2C752,#C99A23); color:#181203;
  padding:5px 15px; border-radius:100px; white-space:nowrap;
}
.tier__name{
  font-family:var(--display); font-weight:700;
  font-size:1.45rem; letter-spacing:.04em; text-transform:uppercase;
  margin:0 0 6px;
}
.tier__tag{ font-size:.88rem; color:var(--muted); margin:0 0 22px; min-height:2.6em; }
.tier__price{
  display:flex; align-items:baseline; gap:5px;
  margin-bottom:4px; font-variant-numeric:tabular-nums;
}
.tier__price sup{
  font-size:1.1rem; font-weight:600; color:var(--muted); top:-.9em; position:relative;
}
.tier__price b{
  font-family:var(--display); font-weight:700;
  /* Was 3.4rem here and overridden to 3rem by a stray rule further down
     the file. Folded into one place. Bump it if the cards look bare. */
  font-size:3rem; line-height:1;
}
.tier--featured .tier__price b{ color:var(--gold); }
.tier__cadence{ font-size:.85rem; color:var(--dim); margin:0 0 24px; }
.tier__list{ list-style:none; padding:0; margin:0 0 28px; display:grid; gap:11px; }
.tier__list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.91rem; color:var(--muted);
}
.tier__list svg{ flex:none; margin-top:4px; color:var(--green); }
.tier--featured .tier__list svg{ color:var(--gold); }
.tier .btn{ margin-top:auto; }
.pricing__fine{
  text-align:center; font-size:.8rem; color:var(--dim);
  margin:26px auto 0; max-width:60ch;
}


/* ---------- FAQ ---------- */
.faq{ display:grid; gap:10px; }
.faq__item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.faq__q{
  width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  padding:20px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-family:var(--body); font-size:1rem; font-weight:600;
  color:var(--text);
}
.faq__q span{ color:var(--green); font-size:1.4rem; line-height:1; transition:transform .22s ease; flex:none; }
.faq__item.is-open .faq__q span{ transform:rotate(45deg); }
.faq__a{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
}
.faq__a p{
  padding:0 24px 22px; margin:0;
  color:var(--muted); font-size:.94rem;
}

/* ---------- Responsible gambling ---------- */
.rg{ background:var(--surface); border-top:1px solid var(--line-soft); padding:44px 0; }
.rg__inner{ display:flex; gap:22px; align-items:flex-start; }
.rg__icon{ font-size:1.7rem; color:var(--gold); flex:none; line-height:1.4; }
.rg h3{ margin:0 0 9px; font-size:1.15rem; }
.rg p{ color:var(--muted); font-size:.92rem; margin:0 0 10px; max-width:74ch; }
.rg__lines{ display:flex; gap:11px; flex-wrap:wrap; align-items:center; font-size:.9rem; }
.rg__lines a{ color:var(--green); }
.rg__lines a:hover{ text-decoration:underline; }
.rg__lines span{ color:var(--dim); }

/* ---------- Footer ---------- */
.foot{ background:#040605; border-top:1px solid var(--line-soft); padding:52px 0 34px; }
.foot__inner{
  display:flex; justify-content:space-between; gap:44px;
  flex-wrap:wrap; padding-bottom:34px;
  border-bottom:1px solid var(--line-soft);
}
.foot__brand{ max-width:320px; }
.foot__brand .logo__mark{ display:inline-flex; vertical-align:-4px; margin-right:8px; }
.foot__brand p{ color:var(--dim); font-size:.86rem; margin:12px 0 0; }
.foot__links{
  display:grid; grid-template-columns:repeat(2,auto); gap:11px 44px;
  align-content:start;
}
.foot__links a{ font-size:.89rem; color:var(--muted); }
.foot__links a:hover{ color:var(--green); }
.foot__legal{ padding-top:26px; }
.foot__legal p{ font-size:.78rem; color:var(--dim); line-height:1.65; margin:0 0 12px; max-width:none; }
.foot__legal strong{ color:var(--muted); }
.foot__legal a{ color:var(--muted); text-decoration:underline; }
.foot__copy{ font-size:.78rem; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; }
  .freeplay{ grid-template-columns:1fr; }
  .freeplay__left{ border-right:0; border-bottom:1px solid var(--line); }
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; top:74px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(8,10,10,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:12px 24px 22px;
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links > a{ padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:1rem; }
  .nav__links .btn{ margin-top:14px; justify-content:center; }
  .nav__x{ display:none; }
  .section{ padding:64px 0; }
  .hero{ padding:52px 0 64px; }
  .freeplay__left,.freeplay__right{ padding:28px; }
}

@media (max-width:520px){
  .wrap{ padding:0 18px; }
  .stats{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat{ padding:20px 16px; }
  .stat__value{ font-size:2.2rem; }
  .kick__clock b{ font-size:1.4rem; }
  .hero__cta .btn{ width:100%; }
  .foot__inner{ flex-direction:column; gap:30px; }
  .foot__links{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{ padding:64px 0 88px; }
.legal__back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.88rem; color:var(--muted); margin-bottom:30px;
}
.legal__back:hover{ color:var(--green); }
.legal h1{
  font-size:clamp(2.1rem,4.4vw,3rem);
  margin-bottom:10px;
}
.legal__updated{ color:var(--dim); font-size:.85rem; margin:0 0 12px; }
.legal__notice{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--r-sm);
  padding:16px 20px; margin:0 0 40px;
  font-size:.88rem; color:var(--muted);
}
.legal h2{
  font-size:1.35rem; margin:38px 0 12px;
  padding-top:26px; border-top:1px solid var(--line-soft);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; }
.legal p, .legal li{ color:var(--muted); font-size:.95rem; }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-left:20px; }
.legal li{ margin-bottom:8px; }
.legal strong{ color:var(--text); }
.legal a{ color:var(--green); text-decoration:underline; }

/* ============================================================
   RESULTS PAGE
   ============================================================ */
.warnbox{
  background:rgba(232,185,63,.07);
  border:1px solid rgba(232,185,63,.34);
  border-left:3px solid var(--gold);
  border-radius:var(--r-sm);
  padding:15px 19px; margin:0 0 26px;
  font-size:.89rem; color:var(--muted);
}
.warnbox strong{ color:var(--gold); }
.warnbox code{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:4px; padding:1px 6px;
  font-size:.86em; color:var(--text);
}

/* ---------- Profit curve ---------- */
.curve{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 24px 18px;
}
.curve__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
.curve__head h3{
  font-size:.86rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--dim); margin:0;
}
.curve__head span{
  font-family:var(--display); font-weight:700;
  font-size:1.7rem; font-variant-numeric:tabular-nums;
}
.curve__head .is-pos{ color:var(--green); }
.curve__head .is-neg{ color:var(--red); }
.curve svg{ display:block; width:100%; height:200px; }
.curve__axis{
  display:flex; justify-content:space-between;
  font-size:.74rem; color:var(--dim);
  margin-top:8px; padding:0 4px;
}

/* ---------- Filters ---------- */
.filters{
  display:flex; gap:22px; flex-wrap:wrap;
  margin-bottom:20px;
}
.filters__group{ display:flex; gap:7px; flex-wrap:wrap; }
.fbtn{
  font-family:var(--body);
  font-size:.83rem; font-weight:600;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:100px;
  padding:8px 15px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.fbtn:hover{ color:var(--text); border-color:var(--muted); }
.fbtn.is-on{
  color:#04120B;
  background:linear-gradient(180deg, #38E389, #1FB56A);
  border-color:transparent;
}

/* ---------- Results table ---------- */
.tablewrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.ptable{
  width:100%; border-collapse:collapse;
  font-size:.9rem; min-width:760px;
}
.ptable thead th{
  text-align:left;
  font-family:var(--display);
  font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
  white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
.ptable td{
  padding:14px 16px;
  border-bottom:1px solid var(--line-soft);
  color:var(--muted);
  vertical-align:top;
}
.ptable tbody tr:last-child td{ border-bottom:0; }
.ptable tbody tr:hover td{ background:rgba(255,255,255,.018); }
.ta-r{ text-align:right; }
.ta-c{ text-align:center; }
.ptable .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.ptable .is-pos{ color:var(--green); font-weight:600; }
.ptable .is-neg{ color:var(--red);   font-weight:600; }

.td-match{ color:var(--text); white-space:nowrap; }
.td-pick b{ display:block; color:var(--text); font-weight:600; }
.td-note{
  display:block; margin-top:3px;
  font-size:.79rem; color:var(--dim);
}
.lg{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.13em; color:var(--dim);
  border:1px solid var(--line);
  padding:3px 8px; border-radius:4px; white-space:nowrap;
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:24px; border-radius:5px;
  font-family:var(--display); font-weight:700; font-size:.86rem;
  letter-spacing:.04em;
}
.badge--w{ background:rgba(47,217,128,.15); color:var(--green); }
.badge--l{ background:rgba(244,82,95,.15);  color:var(--red); }
.badge--p{ background:rgba(152,163,157,.14); color:var(--muted); }

/* Hairline down the left of each row, colored by outcome */
.ptable tbody tr td:first-child{ box-shadow:inset 3px 0 0 -1px transparent; }
.row--w td:first-child{ box-shadow:inset 3px 0 0 -1px var(--green); }
.row--l td:first-child{ box-shadow:inset 3px 0 0 -1px var(--red); }
.row--p td:first-child{ box-shadow:inset 3px 0 0 -1px var(--dim); }

.ptable__empty{
  text-align:center; color:var(--dim);
  padding:34px 0 0; font-size:.92rem;
}
.ptable__count{
  font-size:.82rem; color:var(--dim);
  margin:16px 0 0; text-align:right;
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .curve{ padding:18px 16px 14px; }
  .curve svg{ height:160px; }
  .curve__head span{ font-size:1.4rem; }
  .filters{ gap:14px; }
  .ptable__count{ text-align:left; }
}

/* ============================================================
   FOLLOW ON X
   ============================================================
   The live-timeline embed and its loading/fallback states used to live
   here. X stopped serving those embeds, so all of it came out — .feed__embed,
   .feed__loading, .spinner, @keyframes spin and .feed__fallback are gone.
   What's left is one centred card. */
.feed{
  max-width:560px;
  margin-inline:auto;
}
.feed__side{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px;
}
.feed__profile{ display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.feed__avatar{
  width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--surface-3);
  border:1px solid var(--line);
  color:var(--text);
}
.feed__profile b{ display:block; font-size:1.02rem; }
/* Gold handle — picks up the trim, and reads as the thing to tap */
.feed__handle{ font-size:.86rem; color:var(--gold); font-weight:600; }
.feed__pitch{ color:var(--muted); font-size:.92rem; margin:0 0 22px; }
.feed__note{
  text-align:center; font-size:.78rem;
  color:var(--dim); margin:11px 0 0;
}

.tier__pending{
  font-size:.78rem; color:var(--dim);
  text-align:center; margin:11px 0 0; line-height:1.5;
}


/* ============================================================
   GAME PREVIEWS
   ============================================================ */
.prevlist{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:16px;
}
.prev{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px;
  transition:border-color .2s ease, transform .2s ease;
}
.prev:hover{ border-color:var(--green); transform:translateY(-3px); }
.prev__top{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:14px;
}
.prev__date{ font-size:.78rem; color:var(--dim); white-space:nowrap; }
.prev__match{
  font-family:var(--display); font-weight:700;
  font-size:1.4rem; line-height:1.08;
  margin:0 0 8px;
}
.prev__pick{
  display:inline-block; align-self:flex-start;
  font-size:.8rem; font-weight:600;
  background:rgba(47,217,128,.14); color:var(--green);
  border:1px solid rgba(47,217,128,.3);
  padding:4px 11px; border-radius:100px;
  margin:0 0 12px;
}
.prev__blurb{
  color:var(--muted); font-size:.9rem;
  margin:0 0 16px; flex:1;
}
.prev__more{
  font-size:.85rem; font-weight:600; color:var(--green);
  margin-top:auto;
}

/* ---------- Single preview page ---------- */
.preview{ padding:56px 0 80px; }
.preview h1{
  font-size:clamp(2.1rem,4.6vw,3.1rem);
  margin-bottom:14px;
}
.preview__meta{
  font-size:.85rem; color:var(--dim);
  margin:0 0 32px;
  padding-bottom:24px; border-bottom:1px solid var(--line-soft);
}
.preview__pick{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(47,217,128,.10), transparent 62%),
    var(--felt);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px;
  margin:0 0 40px;
}
.preview__pick-label{
  font-family:var(--display); font-size:.8rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin:0 0 8px;
}
.preview__pick-value{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,4vw,2.7rem); line-height:1;
  color:#fff; margin:0 0 16px;
}
.preview h2{
  font-size:1.4rem; margin:38px 0 12px;
  padding-top:28px; border-top:1px solid var(--line-soft);
}
.preview h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.preview p{ color:var(--muted); margin:0 0 16px; }

.preview__cta{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:var(--r);
  padding:28px;
  margin:48px 0 26px;
}
.preview__cta h3{ margin:0 0 10px; font-size:1.2rem; }
.preview__cta p{ margin:0 0 18px; font-size:.94rem; }
.preview__cta-row{ display:flex; gap:11px; flex-wrap:wrap; margin:0 !important; }
.preview__disclaim{
  font-size:.78rem; color:var(--dim);
  text-align:center; margin:0;
}
.preview__disclaim a{ color:var(--muted); text-decoration:underline; }

/* Three pricing tiers: 3 across on desktop, 1 column below that.
   Two columns is not an option with three cards — it always leaves an
   orphan sitting on its own row. Below 900px the three would each be
   under 280px wide, which is too narrow for the feature lists, so the
   switch to a single column happens there. */
@media (max-width:900px){
  .pricing{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  /* Season Pass first when stacked — nobody scrolls past two cards to
     find the one you want them to buy. */
  .tier--featured{ order:-1; margin-block:0; }
}

/* Calm "nothing logged yet" note — deliberately not a warning */
.notebox{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:var(--r-sm);
  padding:15px 19px; margin:0 0 26px;
  font-size:.89rem; color:var(--muted);
}
.notebox strong{ color:var(--text); }


/* ============================================================
   ============================================================
   GOLD TRIM
   ============================================================
   Deliberately sparing. Gold is the expensive colour here, so it
   only ever shows up as a hairline or an edge — never as a fill,
   and never more than once per screenful. If you add more, take
   one away somewhere else, or it stops reading as trim and starts
   reading as a theme.

   Everything below runs off --gold-hair, so you can dial the whole
   effect up or down from one line.
   ============================================================ */

:root{
  /* A hairline that fades out at both ends, so it never looks like
     a hard rule slapped across the layout. */
  --gold-hair: linear-gradient(90deg,
                 transparent,
                 rgba(232,185,63,.30) 12%,
                 rgba(232,185,63,.85) 50%,
                 rgba(232,185,63,.30) 88%,
                 transparent);
  --gold-hair-soft: linear-gradient(90deg,
                 transparent,
                 rgba(232,185,63,.18) 14%,
                 rgba(232,185,63,.52) 50%,
                 rgba(232,185,63,.18) 86%,
                 transparent);
}

/* 1. A gold line pinned across the very top of every page.
      This is the most visible piece of trim — it frames the whole
      site. 2px so it still reads on a phone. */
body::before{
  content:"";
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--gold-hair);
  z-index:100;
  pointer-events:none;
}

/* 2. Sticky nav: once it lifts off the top of the page, the divider
      under it picks up a gold tint instead of plain grey. */
.nav.is-stuck{ border-bottom-color:rgba(232,185,63,.20); }
.nav.is-stuck::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--gold-hair-soft);
  pointer-events:none;
}

/* 3. The tagline under the wordmark, in aged gold rather than grey.
      Tiny change, does a lot of work next to the gold logo mark. */
.logo__tag{ color:var(--gold-dim); }

/* 4. Hero countdown card — gold edge along the top. Inset from the
      corners so it does not clip against the border radius. */
.hero__card{ position:relative; }
.hero__card::before{
  content:"";
  position:absolute; top:0; left:20px; right:20px; height:1px;
  background:var(--gold-hair);
}

/* 5. Free play block, same treatment. This card is the hook, so it
      earns a bit of shine. */
.freeplay{ position:relative; }
.freeplay::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--gold-hair);
  z-index:2;
}

/* 6. Responsible-gambling band. Already carries a gold warning
      glyph; the hairline ties it together. */
.rg{ position:relative; }
.rg::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--gold-hair-soft);
}

/* 7. Footer — closes the frame that body::before opened. */
.foot{ position:relative; }
.foot::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--gold-hair);
}

/* 8. Results table header rule. */
.ptable thead th{ border-bottom-color:rgba(232,185,63,.28); }

/* 9. Preview pages: the pick block gets a gold left edge, matching
      the green one on the CTA box further down the page. */
.preview__pick{ border-left:3px solid var(--gold); }

/* 10. Free season futures. The note under the grid is the important
       part -- it is what tells a reader these are open bets and not
       part of the tracked record, so keep it visible, not fine print. */
.futures__note{
  margin:22px 0 0;
  font-size:.9rem; color:var(--muted);
  max-width:64ch;
}
.futures__note a{ color:var(--green); text-decoration:underline; }


/* ============================================================
   ============================================================
   PHONE LAYOUT
   ============================================================
   Most visitors arrive on a phone, so this is the section that
   matters. It sits at the end of the file on purpose: everything
   here is meant to win over the rules above it.

   Breakpoints, largest to smallest:
     820px  tablet and large phones in landscape
     700px  the results table switches to stacked cards
     560px  phone
     380px  small phone (iPhone SE and friends)
   ============================================================ */

/* ---------- Global mobile hygiene ---------- */
html{
  /* Stops iOS inflating the text when you rotate to landscape */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  /* One long unbroken string (an email, a URL) can otherwise shove
     the whole page sideways on a narrow screen */
  overflow-wrap:break-word;
  -webkit-tap-highlight-color:rgba(47,217,128,.16);
}

/* Nothing wide enough to create a sideways scroll */
img,svg,table{ max-width:100%; }

@media (max-width:820px){

  /* The mobile menu was pinned to a hard-coded 74px, which broke the
     moment the nav bar got shorter. Anchor it to the bar instead.

     It was also see-through: a backdrop-filter inside another
     backdrop-filter (the nav bar has one) stops behaving, so the hero
     text showed straight through the open menu. A solid background
     and no second blur fixes it. */
  .nav__links{
    top:100%;
    background:var(--bg);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.9);
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }

  /* iOS zooms the page in when you tap an input smaller than 16px.
     16px exactly is the fix. */

  /* 44px is about the smallest thing a thumb hits reliably */
  .nav__toggle{ padding:11px; margin-right:-11px; }
  .nav__links > a{ padding:15px 0; }

  html{ scroll-padding-top:78px; }
}

@media (max-width:700px){

  /* ---------- Results table becomes a stack of cards ----------
     An eight-column table inside a sideways scroller is unusable on
     a phone. Under 700px each row is redrawn as a card:

        Sep 7   NFL                  W
        Chiefs @ Bills
        Bills -2.5
        -110    1.0u          P/L +0.91

     The layout is driven by column ORDER, so if you ever add or
     reorder a column in results.html, update the nth-child numbers
     below to match. Column order today:
       1 Date   2 League   3 Matchup   4 Pick
       5 Odds   6 Units    7 Result    8 P/L
     ------------------------------------------------------------ */

  .tablewrap{
    overflow:visible;
    border:0;
    background:none;
    border-radius:0;
  }
  .ptable{ display:block; width:100%; min-width:0; }

  /* Heading row is hidden from view but stays for screen readers */
  .ptable thead{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
    white-space:nowrap;
  }
  .ptable tbody{ display:block; }

  .ptable tbody tr{
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    align-items:center;
    column-gap:9px; row-gap:2px;
    background:var(--surface);
    border:1px solid var(--line);
    border-left:3px solid var(--line);
    border-radius:var(--r-sm);
    padding:14px 15px;
    margin-bottom:10px;
  }
  /* The win/loss hairline moves from the first cell to the card edge */
  .ptable tbody tr td:first-child{ box-shadow:none; }
  .row--w{ border-left-color:var(--green); }
  .row--l{ border-left-color:var(--red); }
  .row--p{ border-left-color:var(--dim); }
  .ptable tbody tr:hover td{ background:none; }

  .ptable td{
    display:block;
    border:0;
    padding:0;
    line-height:1.35;
  }

  /* Row 1 — date, league, outcome badge */
  .ptable td:nth-child(1){ grid-column:1; grid-row:1; font-size:.8rem; color:var(--dim); }
  .ptable td:nth-child(2){ grid-column:2; grid-row:1; }
  .ptable td:nth-child(7){ grid-column:4; grid-row:1; justify-self:end; }

  /* Row 2 — matchup */
  .ptable td:nth-child(3){
    grid-column:1 / -1; grid-row:2;
    margin-top:8px;
    font-size:.86rem; color:var(--muted);
    white-space:normal;
  }

  /* Row 3 — the pick itself, the thing people actually scan for.
     The divider lives on this cell rather than on the three below it,
     so it draws as one unbroken rule instead of three short dashes. */
  .ptable td:nth-child(4){
    grid-column:1 / -1; grid-row:3;
    padding-bottom:12px;
    border-bottom:1px solid var(--line-soft);
  }
  .ptable td:nth-child(4) b{ font-size:1.06rem; }

  /* Row 4 — odds, stake, profit and loss */
  .ptable td:nth-child(5),
  .ptable td:nth-child(6),
  .ptable td:nth-child(8){
    grid-row:4;
    font-size:.85rem;
    padding-top:11px;
  }
  .ptable td:nth-child(5){ grid-column:1; text-align:left; }
  .ptable td:nth-child(6){ grid-column:2; text-align:left; }
  .ptable td:nth-child(8){ grid-column:3 / -1; text-align:right; font-weight:700; }

  /* Small labels, since the column headings are no longer on screen */
  .ptable td:nth-child(6)::after{ content:"u"; color:var(--dim); }
  .ptable td:nth-child(8)::before{
    content:"P/L ";
    color:var(--dim); font-weight:500;
  }

  .ptable__count{ text-align:left; }
}

@media (max-width:560px){

  /* ---------- Frame ---------- */
  .wrap{
    /* max() keeps the gutter honest on notched phones in landscape */
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .section{ padding:54px 0; }
  .section--tight{ padding:0 0 14px; }
  .sectionhead{ margin-bottom:28px; }

  /* ---------- Type ----------
     The desktop clamp bottoms out at 2.6rem, which is a lot of
     headline on a 375px screen. */
  h1{ font-size:clamp(2.1rem, 9vw, 2.7rem); margin-bottom:18px; }
  h2{ font-size:clamp(1.75rem, 7.4vw, 2.2rem); }
  h3{ font-size:1.16rem; }
  .lede{ font-size:1.02rem; margin-bottom:26px; }
  .eyebrow{ font-size:.82rem; letter-spacing:.13em; margin-bottom:14px; }

  /* ---------- Nav ---------- */
  .nav__inner{ height:62px; gap:12px; }
  .logo__name{ font-size:1.18rem; letter-spacing:.11em; }
  .logo__tag{ font-size:.52rem; letter-spacing:.22em; }
  html{ scroll-padding-top:70px; }

  /* ---------- Hero ---------- */
  .hero{ padding:34px 0 48px; }
  .hero__inner{ gap:32px; }
  .hero__glow{ height:420px; }
  .hero__cta{ gap:10px; margin-bottom:22px; }
  .hero__card{ padding:20px; }
  .kick__clock{ gap:6px; }
  .kick__clock > div{ padding:10px 2px; }
  .kick__clock b{ font-size:1.5rem; }
  .kick__clock span{ font-size:.56rem; letter-spacing:.1em; }
  .kick__divider{ margin:20px 0; }
  .heroplay__pick{ font-size:1.72rem; }

  /* ---------- Buttons ----------
     On a phone a full-width button is easier to hit and reads as a
     clear next step, so every main call to action becomes one. */
  .btn--lg{ padding:15px 22px; font-size:.98rem; }
  .hero__cta .btn,
  .cardgrid__cta .btn,
  .freeplay__right .btn,
  .preview__cta-row .btn,
  .chip{ font-size:.72rem; padding:5px 10px; }

  /* ---------- Record tiles ---------- */
  .stats{ grid-template-columns:1fr 1fr; gap:9px; }
  .stat{ padding:16px 14px; }
  .stat__label{ font-size:.7rem; letter-spacing:.13em; margin-bottom:7px; }
  .stat__value{ font-size:1.95rem; }
  .stat__sub{ font-size:.72rem; }
  .stats__note{ font-size:.78rem; }

  /* ---------- Free play ---------- */
  .freeplay__left,
  .freeplay__right{ padding:22px 20px; }
  .freeplay__pick{ font-size:2rem; }
  .freeplay__text{ font-size:.94rem; }

  /* ---------- Card grid ---------- */
  .cardgrid{ grid-template-columns:1fr; }
  .pcard{ min-height:0; padding:18px; }
  .pcard__pick{ font-size:1.45rem; }

  /* ---------- Steps, pricing, FAQ ---------- */
  .step{ padding:22px 20px; }
  .step__n{ width:34px; height:34px; margin-bottom:12px; }
  .tier{ padding:26px 20px; }
  .tier__tag{ min-height:0; margin-bottom:18px; }
  .tier__price b{ font-size:2.7rem; }
  .tier__list{ margin-bottom:22px; }
  .faq__q{ padding:16px 18px; font-size:.95rem; }
  .faq__a p{ padding:0 18px 18px; font-size:.9rem; }

  /* ---------- Feed and email signup ---------- */
  .feed__side{ padding:20px; }

  /* ---------- Responsible gambling ---------- */
  .rg{ padding:32px 0; }
  .rg__inner{ gap:14px; }
  .rg__lines{ gap:8px; font-size:.86rem; }

  /* ---------- Footer ----------
     The bottom inset keeps the copyright line clear of the home bar
     on a modern iPhone. */
  .foot{
    padding:38px 0 calc(26px + env(safe-area-inset-bottom));
  }
  .foot__inner{ gap:26px; padding-bottom:26px; }
  .foot__links{ gap:9px 24px; }
  .foot__legal p{ font-size:.74rem; }

  /* ---------- Legal and preview pages ---------- */
  .legal{ padding:40px 0 60px; }
  .legal h2{ font-size:1.2rem; margin-top:30px; padding-top:20px; }
  .preview{ padding:36px 0 56px; }
  .preview__pick{ padding:22px 20px; }
  .preview__cta{ padding:22px 20px; }
  .preview__cta-row{ display:grid; gap:10px; }

  /* ---------- Results page ---------- */
  .curve{ padding:16px 14px 12px; }
  .curve svg{ height:150px; }
  .filters{ gap:10px; }
  .fbtn{ padding:9px 14px; }
}

@media (max-width:380px){
  /* iPhone SE territory — shave the numbers that overflow first */
  h1{ font-size:2rem; }
  .kick__clock b{ font-size:1.3rem; }
  .stat__value{ font-size:1.7rem; }
  .tier__price b{ font-size:2.4rem; }
  .freeplay__pick{ font-size:1.8rem; }
}

/* A phone in landscape is short rather than narrow, so claw back
   some vertical space instead of shrinking the type again. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding:28px 0 36px; }
  .section{ padding:44px 0; }
}