/* ─────────────────────────────────────────────
   FirstSnap.net — landing page styles
   Layers on top of styles.css design tokens.
───────────────────────────────────────────── */

.lp-wrap {
  position: relative;
  z-index: 2;
}

/* ── Hero ── */
.lp-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 28px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1000px) {
  .lp-hero { grid-template-columns: 1fr; padding: 48px 20px 32px; gap: 36px; }
}

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--chalk);
  padding: 6px 12px 6px 10px;
  background: rgba(244, 214, 58, 0.06);
  border: 1px solid var(--chalk-border);
  border-radius: 0;
  margin-bottom: 22px;
}
.lp-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--turf);
  animation: fs-pulse 1.8s infinite;
}
.lp-eyebrow .sep { color: var(--muted-2); font-weight: 500; letter-spacing: 0.04em; }

.lp-h1 {
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  color: var(--text);
}
.lp-h1 .l1 { display: block; color: var(--text); }
/* NO GRADIENT HERE. Until 2026-09-07 this line was a linear-gradient clipped to
   the text (background-clip: text + -webkit-text-fill-color: transparent) --
   chalk fading to turf. Two reasons it is gone, in order of weight:

   1. It contradicted the art direction three files up. styles.css opens with
      "No glows, no atmosphere gradients, no grain -- contrast does the work
      instead", and this was the largest element on the site doing the opposite.
   2. It is the single most recognisable generated-landing-page move there is.
      thetell.io -- same genre, one sport over -- puts the identical three
      declarations on the second clause of its own H1.

   It is NOT gone for accessibility reasons: every treatment considered cleared
   AAA on this ground (the gradient ran 10.47:1 down to 7.58:1), and Chromium
   forces the fill colour under forced-colors, so the usual background-clip
   disappearing-text hazard did not reproduce. Don't cite a11y for this.

   What replaces it is the accent bar the rest of the page already speaks:
   .lp-section-eyebrow::before is a 20px chalk rule, .lp-step-h::before a 28px
   one, and this is the same mark at headline scale. It also spends far less
   chalk -- 1,508px² against 26,803px² for a knocked-out solid block -- which
   matters because chalk means "our call" (styles.css) and the primary CTA sits
   directly below this line. The headline must not out-shout the button. */
.lp-h1 .l2 {
  display: inline-block;
  position: relative;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding-bottom: 0.20em;
  margin-top: 8px;
  white-space: nowrap;
  color: var(--chalk);
}
/* Sized in em so the bar tracks the clamp()ed headline instead of going spindly
   on a phone and stubby on a desktop. */
.lp-h1 .l2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.085em;
  background: var(--chalk);
}

.lp-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 560px;
  margin: 0 0 32px;
}
.lp-sub .mono {
  color: var(--chalk);
  font-size: 14.5px;
  padding: 1px 6px;
  background: var(--chalk-bg);
  border: 1px solid var(--chalk-border);
  border-radius: 0;
}

.lp-cta-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 28px;
}
.lp-cta-row .btn-lg { padding: 14px 26px; font-size: 15px; }
.lp-cta-note {
  font-size: 12.5px; color: var(--muted);
}
.lp-cta-note .num { color: var(--text); font-weight: 600; }

.lp-trust {
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.lp-trust-item {
  display: flex; flex-direction: column; gap: 2px;
}
.lp-trust-val {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
}
.lp-trust-val .pos { color: var(--turf); }
.lp-trust-val .chalk { color: var(--chalk); }
.lp-trust-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}

/* ── Hero card preview (right column) ── */
.lp-hero-card {
  position: relative;
  border-radius: 0;
  padding: 22px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.lp-hero-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 0;
  padding: 1px;
  background: linear-gradient(155deg, rgba(244, 214, 58, 0.35), transparent 40%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.hc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.hc-head-l { display: flex; align-items: center; gap: 8px; }
.hc-tag {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--chalk);
}
.hc-meta {
  font-size: 11.5px; color: var(--muted);
  font-family: var(--font-mono);
}
.hc-game {
  display: flex; align-items: center; gap: 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border-soft);
}
.hc-teams {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800; letter-spacing: -0.015em;
}
.hc-team-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 0;
  background: var(--surface3);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--text);
  border: 1px solid var(--border);
}
.hc-at { color: var(--muted); font-weight: 500; font-size: 13px; }
.hc-kick {
  margin-left: auto;
  font-size: 11.5px; color: var(--muted); font-family: var(--font-mono);
  text-align: right;
}
.hc-kick .when { display: block; color: var(--text-2); font-weight: 600; }

.hc-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  padding: 14px 0 4px;
}
.hc-nspq {
  background: var(--surface3);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 14px 14px 12px;
  position: relative;
}
.hc-nspq-lbl {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 6px;
}
.hc-nspq-val {
  font-size: 44px; font-weight: 900;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--chalk);
  line-height: 1;
}
.hc-nspq-sub {
  font-size: 11.5px; color: var(--muted); margin-top: 6px;
}
.hc-nspq-sub .pos { color: var(--turf); font-family: var(--font-mono); font-weight: 700; }
.hc-bar {
  margin-top: 12px;
  height: 5px;
  background: var(--surface);
  border-radius: 0;
  display: flex; overflow: hidden;
}
.hc-bar > span { display: block; height: 100%; }
.hc-bar .b-no { background: var(--chalk); }
.hc-bar .b-away { background: var(--team-away); }
.hc-bar .b-home { background: var(--team-home); }
.hc-bar-legend {
  display: flex; gap: 10px; margin-top: 6px;
  font-size: 10.5px; font-family: var(--font-mono); color: var(--muted);
}
.hc-bar-legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 0; margin-right: 4px; vertical-align: -1px; }

.hc-side {
  display: flex; flex-direction: column; gap: 10px;
}
.hc-pill {
  display: flex; flex-direction: column;
  background: var(--surface3);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 10px 12px;
}
.hc-pill-lbl {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 4px;
}
.hc-pill-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hc-pill-val {
  font-size: 16px; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  letter-spacing: -0.01em;
}
.hc-pill-edge {
  font-size: 11px; font-family: var(--font-mono); font-weight: 700;
  color: var(--turf);
}

.hc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--muted);
}
.hc-foot .live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--turf); font-weight: 600;
}
.hc-foot .live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--turf);
  animation: fs-pulse 1.8s infinite;
}

/* Floating chips on hero card */
.hc-float {
  position: absolute;
  background: var(--bg-deep);
  border: 1px solid var(--chalk-border);
  border-radius: 0;
  padding: 10px 12px;
  font-size: 11.5px;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-2);
}
.hc-float .num {
  color: var(--chalk); font-weight: 700; font-family: var(--font-mono);
}
.hc-float.tl {
  top: -16px; left: -18px;
  animation: fs-rise .6s var(--easing) 0.4s both;
}
.hc-float.br {
  bottom: -16px; right: -12px;
  animation: fs-rise .6s var(--easing) 0.55s both;
}
@media (max-width: 700px) { .hc-float { display: none; } }

/* ── Marquee strip ── */
.lp-marquee {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 0;
  background: linear-gradient(to right, transparent, rgba(3, 17, 10, 0.4) 20%, rgba(3, 17, 10, 0.4) 80%, transparent);
  overflow: hidden;
  margin: 32px 0 0;
}
.lp-marquee-inner {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: fs-marquee 60s linear infinite;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.lp-marquee-inner span {
  display: inline-flex; align-items: center; gap: 8px;
}
.lp-marquee-inner .v { color: var(--chalk); font-weight: 700; }
.lp-marquee-inner .pos { color: var(--turf); font-weight: 700; }
.lp-marquee-inner .neg { color: var(--neg); font-weight: 700; }
.lp-marquee-inner .dot { color: var(--muted-2); }
@keyframes fs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── "Example card" marker ──
   The hero card and the slate cards are mock UI: real-looking matchups with
   illustrative numbers. They need to be readable as examples on the page, not
   only in a server-stripped template comment. */
.lp-example {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--border-soft);
  border-radius: 3px;
  padding: 3px 7px;
}
.lp-example-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: var(--muted);
  margin: 0 0 18px;
}
.lp-example-note a { color: var(--chalk); font-weight: 600; }

/* An unpriced market has no edge to print -- Pinnacle posts no NFL 1st-quarter
   market -- so those rows say so instead of showing a number. */
.hc-pill-edge.unpriced,
.lps-edge.unpriced {
  color: var(--muted-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ── Generic section ── */
.lp-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 28px;
}
.lp-section.tight { padding: 64px 28px; }
@media (max-width: 700px) {
  .lp-section { padding: 56px 20px; }
  .lp-section.tight { padding: 48px 20px; }
}

.lp-section-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk);
  font-weight: 700;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.lp-section-eyebrow::before {
  content: ''; width: 20px; height: 2px;
  background: var(--chalk); border-radius: 0;
}
.lp-section-h {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  line-height: 1.1;
  color: var(--text);
  max-width: 720px;
}
.lp-section-h .accent { color: var(--chalk); }
.lp-section-sub {
  font-size: 16px;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 0 48px;
  line-height: 1.6;
}

/* ── Feature grid ── */
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .lp-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lp-features { grid-template-columns: 1fr; } }

.lp-feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color .15s, background .15s, transform .12s var(--easing);
}
.lp-feat:hover {
  border-color: var(--chalk-border);
  background: var(--surface2);
  transform: translateY(-2px);
}
.lp-feat-icon {
  width: 34px; height: 34px;
  border-radius: 0;
  background: var(--chalk-bg);
  border: 1px solid var(--chalk-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--chalk);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.lp-feat-h {
  font-size: 17px; font-weight: 800; letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
}
.lp-feat-body {
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
  margin: 0;
}
.lp-feat-body .v { color: var(--chalk); font-family: var(--font-mono); font-weight: 700; }

/* ── How it works ──
   THE ONE UNEVEN GRID ON THE PAGE, ON PURPOSE. Everything else here is a
   repeat(n, 1fr): features, glossary, pricing, the slate. This was too, four
   equal columns holding numbered cards 01 through 04, which is the section
   shape every generated analytics landing page ships. The beats are not equal
   -- modelling the quarter is the product and the other two follow from it --
   so the lead block takes the full width and the two consequences share the
   row below at 1.5:1. The .lp-step-n numerals were deleted with the fourth
   card; do not bring either back. See the matching note in landing.html. */
.lp-how {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  position: relative;
}
@media (max-width: 720px) { .lp-how { grid-template-columns: 1fr; } }

.lp-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 20px 20px;
  position: relative;
}
/* The lead block spans the row and carries the longer body, so it gets a
   heavier chalk rule and a little more room than the two under it. */
.lp-step.lead {
  grid-column: 1 / -1;
  padding: 26px 24px 24px;
  background: var(--surface2);
}
.lp-step.lead .lp-step-h { font-size: 19px; }
.lp-step.lead .lp-step-h::before { width: 52px; }
.lp-step.lead .lp-step-body { font-size: 14px; max-width: 78ch; }
.lp-step-h {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
  position: relative;
}
.lp-step-h::before {
  content: '';
  display: block;
  width: 28px; height: 2px;
  background: var(--chalk);
  margin-bottom: 14px;
  border-radius: 0;
}
.lp-step-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ── Proof / track record ── */
.lp-proof {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 36px 36px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 900px) { .lp-proof { grid-template-columns: 1fr; padding: 28px 24px; } }

.lp-proof-left { display: flex; flex-direction: column; gap: 16px; }
.lp-proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.lp-proof-stat {
  background: rgba(3, 17, 10, 0.55);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 14px 14px 12px;
}
.lp-proof-stat .v {
  display: block;
  font-size: 30px; font-weight: 900;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.05;
}
.lp-proof-stat .v.pos { color: var(--turf); }
.lp-proof-stat .v.chalk { color: var(--chalk); }
.lp-proof-stat .v.neg { color: var(--neg); }
.lp-proof-stat .l {
  display: block;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700;
  margin-top: 6px;
}
.lp-proof-foot {
  font-size: 12px; color: var(--muted);
  font-family: var(--font-mono);
  margin-top: 6px;
}

/* Chart visualization */
.lp-proof-chart {
  background: rgba(3, 17, 10, 0.45);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 18px 18px 14px;
}
.lp-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.lp-chart-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--muted);
}
.lp-chart-val {
  font-size: 18px; font-weight: 800;
  font-family: var(--font-mono);
  color: var(--turf);
}
/* A losing ledger must not print its drawdown in the winning colour. */
.lp-chart-val.neg { color: var(--neg); }
.lp-chart-svg { width: 100%; height: 160px; display: block; }
.lp-chart-x {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 10.5px; color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ── Glossary ── */
.lp-gloss {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .lp-gloss { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lp-gloss { grid-template-columns: 1fr; } }
.lp-gloss-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 16px 14px;
}
.lp-gloss-key {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--chalk);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.lp-gloss-name {
  font-size: 12px; color: var(--text-2);
  margin-bottom: 8px;
  font-weight: 600;
}
.lp-gloss-def {
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
  margin: 0;
}

/* ── Locked slate preview ── */
.lp-slate {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 14px;
  position: relative;
}
@media (max-width: 900px) { .lp-slate { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lp-slate { grid-template-columns: 1fr; } }

.lp-slate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  min-height: 168px;
}
.lp-slate-card.unlocked {
  background: var(--surface);
  border: 0;
  border-left: 5px solid var(--chalk);
}
.lp-slate-card.locked {
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lp-slate-card.locked:hover { border-color: var(--chalk-border); background: var(--surface2); }

.lps-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.lps-tag {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0;
}
.lps-tag.free {
  color: var(--chalk);
  background: var(--chalk-bg);
  border: 1px solid var(--chalk-border);
}
.lps-tag.gold {
  color: var(--chalk);
  background: var(--chalk-bg);
  border: 1px solid var(--chalk-border);
}
.lps-tag.gold::before { content: '★ '; }
.lps-tag.wager {
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
}
.lps-tag.lean {
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
}
.lps-meta {
  font-size: 10.5px; color: var(--muted); font-family: var(--font-mono);
}

.lps-teams {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; letter-spacing: -0.015em;
}
.lps-team-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 0;
  background: var(--surface3);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--text);
  border: 1px solid var(--border);
}
.lps-at { color: var(--muted); font-weight: 500; font-size: 13px; }

.lps-stat {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 4px;
}
.lps-stat-l {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.lps-stat-v {
  font-size: 28px; font-weight: 900;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--chalk);
  line-height: 1;
}
.lps-edge {
  font-size: 11.5px; font-family: var(--font-mono); color: var(--turf);
  font-weight: 700;
}
.lps-foot {
  font-size: 11.5px; color: var(--muted-2);
  font-family: var(--font-mono);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}

/* Locked overlay — blurs the data inside the card */
.lps-blur {
  filter: blur(6px) saturate(0.7);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.lps-lock {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(6, 26, 19, 0.35), rgba(6, 26, 19, 0.65));
  border-radius: 0;
}
.lps-lock-icon {
  width: 30px; height: 30px;
  border-radius: 0;
  background: var(--chalk-bg);
  border: 1px solid var(--chalk-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--chalk);
}
.lps-lock-txt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-2); font-weight: 700;
}

.lp-slate-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  gap: 18px;
  flex-wrap: wrap;
}
.lp-slate-foot .l { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.lp-slate-foot .l .v { color: var(--chalk); font-weight: 700; font-family: var(--font-mono); }

/* ── Pricing ── */
/* Two plans sit side by side on desktop and stack under 860px, where a 460px
   card is already the full width. The stacked gap is bigger than the desktop
   one because .lp-plan-badge hangs 10px above its card -- 46px of grid gap
   reads as ~36px of clear space between the cards. */
.lp-pricing {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  /* Stretch, not start. The Season card runs ~130px taller than the Month one
     because only it carries the price ladder, and with tops aligned the two
     CTAs ended up on different lines -- the one row a reader sweeps across
     when comparing two prices. Equal heights plus the margin-top:auto on
     .lp-plan .btn puts both buttons on the same baseline; the Month card's
     extra space lands above its button, where it reads as "nothing more to
     add" rather than as a gap. */
  align-items: stretch;
}
@media (max-width: 860px) {
  .lp-pricing {
    max-width: 460px;
    grid-template-columns: 1fr;
    gap: 46px;
  }
}

.lp-plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px 28px 26px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.lp-plan.featured {
  background: var(--surface);
  border-color: var(--chalk-border);
}
.lp-plan-badge {
  position: absolute;
  top: -10px; left: 24px;
  background: var(--chalk);
  color: #1a1408;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
}
.lp-plan-h {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700;
}
.lp-plan-name {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.lp-plan-name .accent { color: var(--chalk); }
.lp-plan-price {
  display: flex; align-items: baseline; gap: 4px;
  margin: 4px 0 0;
}
.lp-plan-price .amt {
  font-size: 56px; font-weight: 900;
  font-family: var(--font-mono);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}
.lp-plan-price .per {
  font-size: 14px; color: var(--muted); font-weight: 500;
}
.lp-plan-price .strike {
  font-size: 14px;
  color: var(--muted-2);
  text-decoration: line-through;
  font-family: var(--font-mono);
  margin-left: 6px;
}
.lp-plan-sub {
  font-size: 13px; color: var(--muted);
  margin: -4px 0 8px;
}
.lp-plan-sub .pos { color: var(--turf); font-weight: 700; }

/* Season Pass step-down ladder.

   Rungs are a timeline, read left to right then down. The first pass at this
   was a row of price/date pairs separated by hairlines, which tested as "no
   change happened" on a phone -- 15px type and a lone chalk number is not
   enough signal against a card this dense. Each rung is now a bordered chip,
   and below 480px they wrap to 2x2 rather than squeezing four chips into a
   335px card or hiding two in a scroller with no visible scrollbar.

   Colour is doing real work here: the old header and dates sat at --muted-2
   on --surface3, a 2.4:1 ratio, which is why the line explaining the whole
   widget was unreadable.

   The panel this used to sit in -- inset background, border, 13px of padding
   and a three-line explainer -- ran ~190px, and only the Season card has one.
   With both plan cards stretched to a shared height that height came straight
   back as dead space in the Month card, which reads as a card missing
   something rather than as a card with less to say. The chrome went and the
   explainer came down to one line; the chips stayed exactly as they were,
   because they are the part carrying the meaning. */
.lp-plan-ladder {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
}
.lp-ladder-h {
  display: block;
  font-size: 12px; line-height: 1.45; font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.lp-ladder-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
@media (max-width: 480px) {
  .lp-ladder-row { grid-template-columns: repeat(2, 1fr); }
}
.lp-ladder-step {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}
.lp-ladder-step b {
  font-family: var(--font-mono);
  font-size: 15.5px; font-weight: 700;
  color: var(--text);
}
.lp-ladder-step i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
}
/* The rung the card is quoting above. .on is the one on sale now; .next is the
   opening rung before the ladder starts, when nothing is live yet and without
   this the quoted price is just one of four equal numbers.

   Future rungs read "from Oct 20", not a bare date: four dated prices in a row
   otherwise look like an instalment schedule. Keep the caption short enough to
   stay on one line -- the row is 401px inside a 457px card, ~93px a rung. */
.lp-ladder-step.on,
.lp-ladder-step.next {
  border-color: var(--chalk);
  background: var(--surface2);
}
.lp-ladder-step.on b,
.lp-ladder-step.next b { color: var(--chalk); }
.lp-ladder-step.on i { color: var(--turf); font-weight: 700; }
.lp-ladder-step.next i { color: var(--text-2); font-weight: 600; }
.lp-plan ul {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; color: var(--text-2);
}
/* Not flex: these items carry inline <b>/<em> runs, and a flex li turns every
   child element and every text node into its own flex item -- the bold lead-in
   ("1st quarter.") gets shrunk into a column of its own with a gap either side.
   Hanging indent keeps the tick outdented without boxing the copy. */
.lp-plan ul li {
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
}
.lp-plan ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--turf);
  font-weight: 800;
}
.lp-plan ul li.muted { color: var(--muted-2); }
.lp-plan ul li.muted::before {
  content: '—';
  color: var(--muted-2);
}
.lp-plan .btn {
  /* auto, not 14px: pushes the CTA to the foot of a stretched card so both
     plans' buttons share a baseline. The card is a flex column with gap:14px,
     so the taller card -- where auto resolves to nothing -- still keeps that
     14px clear of the feature list. */
  margin-top: auto;
  width: 100%;
}

/* ── FAQ ── */
.lp-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px) { .lp-faq { grid-template-columns: 1fr; } }
.lp-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 20px 16px;
}
.lp-faq-q {
  font-size: 14.5px; font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lp-faq-q::before {
  content: 'Q.';
  font-family: var(--font-mono);
  color: var(--chalk);
  margin-right: 8px;
  font-weight: 700;
}
.lp-faq-a {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  margin: 0;
}

/* ── Final CTA ── */
.lp-final {
  max-width: 1280px;
  margin: 0 auto 32px;
  padding: 0 28px;
}
.lp-final-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 56px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 700px) { .lp-final-card { padding: 40px 24px; } }
/* Yard lines, hard-edged and full-bleed. The old radial mask faded them into a
   vignette, which is the one soft edge a marked field never has. */
.lp-final-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(238, 242, 238, 0.055) 2px, transparent 2px),
    linear-gradient(to right, rgba(238, 242, 238, 0.018) 1px, transparent 1px);
  background-size: 160px 100%, 32px 100%;
  pointer-events: none;
}
.lp-final-h {
  font-size: 56px; font-weight: 800; letter-spacing: 0.008em;
  margin: 0 0 14px;
  line-height: 0.98;
  color: var(--text);
  position: relative;
}
.lp-final-h .accent { color: var(--chalk); }
@media (max-width: 700px) { .lp-final-h { font-size: 30px; } }
.lp-final-sub {
  font-size: 16px;
  color: var(--text-2);
  max-width: 580px;
  margin: 0 auto 28px;
  position: relative;
  line-height: 1.55;
}
.lp-final-cta {
  display: inline-flex; gap: 12px;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-final-note {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  position: relative;
}
.lp-final-note .v { color: var(--chalk); font-weight: 700; }

/* ── Footer ── */
.lp-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 28px 32px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) { .lp-footer { grid-template-columns: 1fr 1fr; } }
.lp-footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.lp-footer-brand .row { display: flex; align-items: center; gap: 10px; }
.lp-footer-brand img { width: 32px; height: 32px; }
.lp-footer-brand .name { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.lp-footer-brand .name .tld { color: var(--chalk); }
.lp-footer-brand p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.lp-footer-col {
  display: flex; flex-direction: column; gap: 8px;
}
.lp-footer-col .h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700;
  margin-bottom: 4px;
}
.lp-footer-col a {
  font-size: 13px; color: var(--text-2);
  cursor: pointer; transition: color .15s;
}
.lp-footer-col a:hover { color: var(--chalk); }
.lp-footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 28px 32px;
  font-size: 11.5px;
  color: var(--muted-2);
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.lp-footer-bottom .disc {
  max-width: 720px;
  line-height: 1.55;
  font-size: 11px;
}


/* ─────────────────────────────────────────────
   Broadcast type layer. Display face on headings, mono on figures, condensed
   uppercase on micro-labels. Appended so the authored rules above stay intact.
───────────────────────────────────────────── */
.lp-h1, .lp-section-h, .lp-feat-h, .lp-gloss-key, .lp-pricing-h, .lp-faq-q, .lp-cta-h, .hc-nspq-lbl {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  line-height: 1.04;
}
.lp-trust-val, .hc-nspq-val, .hc-pill-val, .lps-stat-v, .lps-edge {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.lp-eyebrow, .lp-section-eyebrow, .lp-trust-lbl, .hc-pill-lbl, .lps-stat-l {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}