/* ==========================================================================
   home.css — marketing home page only. Loaded after tokens.css.

   Every rule here is a transcription of an inline style in
   design/website/02-hero.html … 09-waitlist.html. The design's px sizes,
   weights, letter-spacings and gaps are kept; its literal hexes are replaced
   by the token that matches them:

     #1d1f2029  -> var(--divider)          rgba(29,31,32,.16)   exact
     #1d1f2014  -> var(--hairline)         rgba(29,31,32,.08)   exact (.078)
     #1d1f2066  -> (.40) no token: --text-faint is now .50 (the app's 50%), so this ink is not reproduced
     #d4d4d7    -> var(--n300)/var(--track)                     exact
     #1d2d3d    -> var(--plate)/var(--a900)                     exact
     #eef6ff    -> var(--accent-soft)/var(--a100)               exact
     #749dc4    -> var(--a500)  (zone 2)                        exact
     #5980a6    -> var(--accent) / var(--accent-strong)         see note 1
     #416180    -> var(--accent-strong)/var(--a700)             exact
     #94bce3    -> var(--on-plate-accent)                       see note 2

   FIVE HEXES IN THE DESIGN HAVE NO TOKEN. Each is snapped to the nearest ramp
   step and called out where it is used:
     #1d1f20cc  rgba(29,31,32,.80) body copy    -> var(--text-copy)   (.72)
     #1d1f2099  rgba(29,31,32,.60) secondary    -> var(--text-secondary) (.65)
     #1d1f2094  rgba(29,31,32,.58) the "no" X   -> var(--text-secondary)
     #1d1f2040  rgba(29,31,32,.25) dashed rule  -> var(--divider)     (.16)
     #f2f2f380  rgba(242,242,243,.50) on plate  -> the plate's .muted (.72)
                 — .50 measures 4.26:1 on the plate, under this site's 4.5
                   floor, so it is deliberately NOT reproduced.
     #f2f2f333 / #f2f2f326 / #f2f2f34d — borders inside the plate. No token
                 exists, and a fixed white-ish line is invisible on the DARK
                 theme's LIGHT plate, so they become --plate-line /
                 --plate-line-faint below, which turn over with the theme.

   NOTE 1: --accent (#5980A6) is 3.71:1 — fine behind an icon or a border,
   NOT fine behind a label. Every place the design put white type on #5980A6
   (hero button, START SESSION, MOST POPULAR, the waitlist button) uses
   --accent-strong or .btn-plate instead. See tokens.css.
   NOTE 2: #94BCE3 is only correct on the LIGHT theme's dark plate. Inside a
   plate always use --on-plate-accent, which flips to --a700 in dark.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. PLATE LOCALS + the plate button
   tokens.css scopes its inverted-ink helpers to .plate / .on-plate but NOT to
   .plate-band, so .muted inside the full-bleed adapt and waitlist bands would
   fall back to dark ink on a dark ground. Fixed here.
   -------------------------------------------------------------------------- */

.plate,
.on-plate,
.plate-band {
  /* The design's #f2f2f333 / #f2f2f326 / #f2f2f34d, made theme-aware. */
  --plate-line: rgba(242, 242, 243, .20);
  --plate-line-faint: rgba(242, 242, 243, .15);
  --plate-field: rgba(242, 242, 243, .30);
  --on-plate-accent-hover: var(--a300);
}

.plate-band .muted,
.plate-band .fine,
.plate-band .faint { color: rgba(242, 242, 243, .72); }   /* 7.26:1 on the plate */

@media (prefers-color-scheme: dark) {
  .plate,
  .on-plate,
  .plate-band {
    --plate-line: rgba(29, 31, 32, .20);
    --plate-line-faint: rgba(29, 31, 32, .15);
    --plate-field: rgba(29, 31, 32, .30);
    --on-plate-accent-hover: var(--a800);
  }
  .plate-band .muted,
  .plate-band .fine,
  .plate-band .faint { color: rgba(29, 31, 32, .72); }    /* 6.18:1 on the light plate */
}

/* A solid button ON a plate. .btn-accent cannot be used there: its ground
   (--accent-strong) sits at 2.14:1 against the light theme's dark plate and
   1.78:1 against the dark theme's light plate, so the button all but vanishes
   into the band. Riding the plate's own accent instead keeps BOTH the button
   against the plate and the label against the button above 5.7:1 in both
   themes. */
.btn-plate {
  background: var(--on-plate-accent);
  border-color: var(--on-plate-accent);
  color: var(--plate);
}
.btn-plate:hover {
  background: var(--on-plate-accent-hover);
  border-color: var(--on-plate-accent-hover);
  color: var(--plate);
}

/* Icon colours used across sections. */
.ico-accent-strong { color: var(--accent-strong); }
.ico-on-plate { color: var(--on-plate-accent); }
.ico-yes { color: var(--accent); }              /* 3.41:1 on --surface — icon only, never a label */
.ico-no { color: var(--text-secondary); }

.inline-link { font-weight: 600; }


/* --------------------------------------------------------------------------
   1. SHARED SECTION FURNITURE
   -------------------------------------------------------------------------- */

/* The design puts an 18px spacer under every section kicker, 22px in the hero
   and 20px in the waitlist band. Scoped rather than pushed onto .kicker, which
   is a shared token class the SEO pages also use. */
.band-head-main > .kicker,
.how > .wrap > .kicker,
.vs-copy > .kicker,
.faq-copy > .kicker { margin: 0 0 18px; }
.hero-copy > .kicker { margin: 0 0 22px; }
.waitlist-copy > .kicker { margin: 0 0 20px; }

/* Section header: heading left, a short note right, both bottom-aligned. */
.band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
}
.band-head-main { max-width: 640px; }
.band-head-note {
  max-width: 380px;
  font-size: 16.5px;
  line-height: 1.6;
  flex: none;
}

/* The design hard-wraps several headings. Each line is a block span rather
   than a <br>, so the whitespace between them survives into the accessible
   name — and below 700px the spans go inline again, because a break chosen at
   1440px is the wrong break on a phone. */
.h-lines .line { display: block; }
@media (max-width: 700px) {
  .h-lines .line { display: inline; }
}

/* h2 sizes the design draws smaller than the 56px default. */
.h-52 { font-size: clamp(32px, 3.7vw, 52px); }
.h-68 { font-size: clamp(38px, 4.9vw, 68px); line-height: 1; letter-spacing: -.025em; }


/* --------------------------------------------------------------------------
   2. CTA — the email capture, in both of its states
   -------------------------------------------------------------------------- */

.cta-single { margin: 34px 0 0; }

.cta-form {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 520px;
  margin: 34px 0 0;
}
.cta-input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--divider);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font-size: 15.5px;
}
/* The design's placeholder ink (#1d1f2066, .40) is 2.41:1, and --text-faint (.50) is still only 3.15:1. The field
   has a real <label>, so the placeholder is a hint rather than the only name —
   but it is still text, so it is raised to the contrast-safe step. */
.cta-input::placeholder { color: var(--text-secondary); opacity: 1; }
.cta-input:disabled { opacity: .6; }

.cta-status {
  flex-basis: 100%;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.cta-status.is-ok { color: var(--accent-strong); font-weight: 600; }
/* There is no error token in the system. Weight, not hue, carries the state —
   a red would be the only colour on the site outside the blue ramp. */
.cta-status.is-err { color: var(--text); font-weight: 600; }
/* The live waitlist count (filled in by the page script, only past the floor in site.json). Reads as proof, not as a banner. */
.cta-count {
  flex-basis: 100%;
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cta-count[hidden] { display: none; }
.waitlist-action .cta-count { color: var(--on-plate); }


/* --------------------------------------------------------------------------
   3. HERO  (design/website/02-hero.html)
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(48px, 6.9vw, 86px) clamp(56px, 7.2vw, 90px); }

.hero-grid {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
.hero-copy {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}
.hero-h1 { margin: 0; }

.hero-lede {
  max-width: 520px;
  margin: 26px 0 0;
  font-size: var(--fs-lede);       /* clamp(17px, 1.4vw, 19px) — 19px at desktop */
  line-height: 1.55;
  color: var(--text-copy);         /* design #1d1f20cc (.80); nearest token is .72 */
}
.hero-lede strong { color: var(--text); font-weight: 600; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-secondary);    /* design #1d1f2099 (.60) */
}
/* The separators are aria-hidden decoration, but they are still visible ink —
   they stay on --text-secondary rather than dropping to --text-faint (3.15:1 light). */
.hero-meta-sep { color: inherit; }


/* --------------------------------------------------------------------------
   4. THE PHONE / PLAN MOCK
   Real markup, not an image. Everything inside is an illustration: no
   focusable controls, and the whole thing is named by an sr-only <figcaption>.
   -------------------------------------------------------------------------- */

.mock {
  width: 410px;
  flex: none;
  margin: 0;
}
.mock-frame {
  border: 1px solid var(--divider);
  border-radius: var(--r-surface);
  overflow: hidden;
  background: var(--bg);
}

.mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
}
.mock-bar .data { font-size: 11px; letter-spacing: .1em; }

.mock-body { padding: 20px 16px 18px; }

/* -- today plate -- */
.mock-today {
  padding: 17px;
  border-radius: var(--r-surface);  /* the app's today plate is a surface */
}
.mock-today-date { margin: 0; }
.mock-title {
  margin: 12px 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.mock-detail { margin: 7px 0 0; }

.mock-start {
  display: flex;
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  padding: 0;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: .03em;
  cursor: default;
  pointer-events: none;            /* it is a picture of a button */
}

/* -- the three adapt buttons -- */
.mock-adapts {
  display: flex;
  margin-top: 18px;
  border: 1px solid var(--divider);
  border-radius: var(--r-control);
  overflow: hidden;
}
.mock-adapt {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-inline: 4px;
  text-align: center;
}
.mock-adapt + .mock-adapt { border-left: 1px solid var(--divider); }
.mock-adapt-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .04em;
}

/* -- the week grid: src/css/weekgrid.css -- */


/* --------------------------------------------------------------------------
   5. ADAPT  (design/website/03-adapt.html) — inverted band
   -------------------------------------------------------------------------- */

.adapt-grid { --gap: 28px; }

.adapt-card {
  border: 1px solid var(--plate-line);
  border-radius: var(--r-surface);
  padding: 28px 26px 26px;
}
.adapt-title {
  margin-top: 18px;
  font-size: clamp(23px, 2vw, 27px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.adapt-body {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}
.adapt-swaps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--plate-line-faint);
}
.adapt-swap {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .06em;
}
.adapt-from { width: 78px; flex: none; }
.adapt-from.is-struck { text-decoration: line-through; }
.adapt-to { color: var(--on-plate-accent); }


/* --------------------------------------------------------------------------
   6. HOW IT WORKS  (design/website/04-how.html)
   -------------------------------------------------------------------------- */

.how-h2 {
  max-width: 620px;
  margin-bottom: 52px;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--divider);
}
.how-step { padding: 32px 40px 34px; }
.how-step:first-child { padding-left: 0; }
.how-step:last-child { padding-right: 0; }
.how-step + .how-step { border-left: 1px solid var(--divider); }

.how-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(42px, 3.9vw, 56px);
  line-height: 1;
  color: var(--accent-strong);
}
.how-title {
  margin-top: 16px;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.how-body {
  margin-top: 11px;
  font-size: 15.5px;
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   7. VS COACH  (design/website/05-vs-coach.html)
   The design draws a CSS grid; it ships as a real <table> so the row and
   column headers are announced with each cell.
   -------------------------------------------------------------------------- */

.vs-grid {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}
.vs-copy {
  width: 430px;
  flex: none;
}
.vs-para {
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.62;
}

.vs-table-wrap {
  flex: 1;
  min-width: 0;
}
.vs-table {
  table-layout: fixed;
  min-width: 520px;
}
.vs-table thead td { width: 33.34%; padding: 14px 16px 14px 0; }
.vs-table thead th { width: 22.22%; }
.vs-table thead th,
.vs-table thead td {
  border-top: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-align: left;
  color: var(--text-secondary);
}
.vs-table thead th { padding: 14px 16px; }
.vs-table thead th.is-us { color: var(--text); }

.vs-table tbody th {
  padding: 16px 16px 16px 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}
.vs-table tbody th.is-strong { font-weight: 600; }
.vs-table tbody td {
  padding: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.4;
  vertical-align: middle;
}
.vs-table tbody td.is-us { font-weight: 600; }
.vs-table tbody td.is-muted { color: var(--text-secondary); font-weight: 400; }

/* The Adaptlete column is tinted for its whole height, header included. */
.vs-table .is-us { background: var(--surface); }


/* --------------------------------------------------------------------------
   8. SPORTS  (design/website/06-sports.html)
   Twelve cards + the body-recomposition footnote = the thirteen sports in the
   app's sports_config.dart. Cards with no hub yet render unlinked.
   -------------------------------------------------------------------------- */

.sports .band-head { margin-bottom: 44px; }
.sports .band-head-note {
  max-width: 340px;
  margin-bottom: 6px;
  font-size: 16px;
}

.sports-grid { --gap: 16px; }

.sport-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 120px;
  padding: 20px;
  border-radius: var(--r-surface);
}
.sport-card.is-flat { cursor: default; }
.sport-name {
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.sport-blurb {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
}

.sports-note {
  margin-top: 16px;
  padding: 20px 24px;
  border-radius: var(--r-surface);
  font-size: 15px;
  line-height: 1.55;
  /* design #1d1f2040 (.25) — nearest token is --divider (.16), inherited from
     .card, so nothing extra is set here. */
}


/* --------------------------------------------------------------------------
   9. PRICING  (design/website/07-pricing.html)
   The period switch is two sr-only radios sitting BEFORE the header and the
   grid, so a plain sibling combinator can restyle both. No :has(), no JS.
   -------------------------------------------------------------------------- */

.pricing-head { margin-bottom: 46px; }

.seg-group {
  display: flex;
  flex: none;
  margin-bottom: 6px;
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.seg + .seg {
  padding: 0 22px;
  border-left: 1px solid var(--divider);
}
#bill-annual:checked ~ .pricing-head .seg[for="bill-annual"],
#bill-monthly:checked ~ .pricing-head .seg[for="bill-monthly"] {
  background: var(--accent-strong);
  color: var(--on-accent);
}
/* The radio itself is off-screen, so its focus ring has to be drawn on the
   label the visitor can actually see. */
#bill-annual:focus-visible ~ .pricing-head .seg[for="bill-annual"],
#bill-monthly:focus-visible ~ .pricing-head .seg[for="bill-monthly"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.on-monthly { display: none; }
#bill-monthly:checked ~ .pricing-grid .on-annual { display: none; }
#bill-monthly:checked ~ .pricing-grid .on-monthly { display: inline; }

.pricing-grid { --gap: 24px; }

.price-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
}
.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.price-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
}
.price-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 5px 10px;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.price-amt {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -.01em;
}
.price-suffix { font-size: 14px; line-height: 1.3; }

.price-note {
  margin: 6px 0 0;
  letter-spacing: 0;               /* the design sets none on this line */
}

.price-blurb {
  font-size: 14.5px;
  line-height: 1.55;
}
.price + .price-blurb { margin-top: 8px; }
.price-note + .price-blurb { margin-top: 10px; }

.price-features {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.45;
}
.price-feature { display: flex; gap: 11px; }
.price-feature .ico { margin-top: 2px; }
.price-feature.is-out { color: var(--text-secondary); }
/* A plain note under the ticks (Free's "Ads are shown"): no icon, indented to the text column (16px icon + 11px gap). */
.price-feature.is-note { color: var(--text-secondary); padding-left: 27px; }

.price-cta-row { margin: auto 0 0; padding-top: 28px; }
.price-cta {
  min-height: 46px;
  border-radius: 13px;
  font-size: 15px;
}


/* --------------------------------------------------------------------------
   Gift  — the band between pricing and the FAQ (site.json -> gift)
   -------------------------------------------------------------------------- */

.gift-grid {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.gift-copy { flex: 1 1 0; min-width: 0; }
.gift-copy > .kicker { margin: 0 0 18px; }
.gift-body {
  margin-top: 20px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
}
.gift-cta { margin-top: 28px; }
.gift-note { margin-top: 14px; }
.gift-points {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 28px 30px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gift-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}
.gift-point svg { flex: none; margin-top: 3px; }

@media (max-width: 1100px) {
  .gift-grid { gap: 52px; }
}
@media (max-width: 980px) {
  .gift-grid { flex-direction: column; align-items: stretch; gap: 36px; }
}

/* --------------------------------------------------------------------------
   10. FAQ  (design/website/08-faq.html)
   Rendered as a <details> accordion. The JSON-LD is generated from the same
   site.json strings, so there is exactly one copy of the answers.
   -------------------------------------------------------------------------- */

.faq-grid {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.faq-copy {
  width: 340px;
  flex: none;
}
.faq-intro {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
}

.faq-list {
  flex: 1;
  min-width: 0;
  border-top: 1px solid var(--divider);
}
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 0; }

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 26px 0;
  list-style: none;
  cursor: pointer;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover .faq-q { color: var(--accent-strong); }

.faq-q {
  font-size: var(--fs-h4);         /* clamp(19px, 1.7vw, 23px) — 23px at desktop */
  line-height: 1.15;
  letter-spacing: 0;
}
.faq-chev { color: var(--text-secondary); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }

.faq-a {
  max-width: 760px;
  margin-top: -18px;               /* the design leaves 8px under the question */
  padding-bottom: 26px;
  font-size: 15.5px;
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   11. WAITLIST  (design/website/09-waitlist.html) — inverted band
   The mock's "1,247 AHEAD OF YOU" is a fabricated count and is not rendered.
   -------------------------------------------------------------------------- */

.waitlist { padding-block: clamp(60px, 7.6vw, 96px) clamp(64px, 7.9vw, 100px); }

.waitlist-grid {
  display: flex;
  align-items: flex-end;
  gap: 80px;
}
.waitlist-copy { flex: 1; min-width: 0; }
.waitlist-lede {
  max-width: 540px;
  margin-top: 22px;
  font-size: clamp(16.5px, 1.35vw, 18px);
  line-height: 1.55;
}

.waitlist-action {
  width: 520px;
  flex: none;
}
.waitlist-action .cta-single,
.waitlist-action .cta-form { margin-top: 0; max-width: none; }
.waitlist-action .btn { min-height: 56px; }
.waitlist-action .cta-input {
  min-height: 56px;
  background: transparent;
  border-color: var(--plate-field);
  color: var(--on-plate);
}
.waitlist-action .cta-input::placeholder { color: rgba(242, 242, 243, .72); }
.waitlist-action .cta-status.is-ok,
.waitlist-action .cta-status.is-err { color: var(--on-plate); }

.waitlist-meta {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .08em;
}

@media (prefers-color-scheme: dark) {
  .waitlist-action .cta-input::placeholder { color: rgba(29, 31, 32, .72); }
}


/* --------------------------------------------------------------------------
   12. RESPONSIVE
   The design is drawn at 1440px. Everything below is the collapse.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .hero-grid { gap: 44px; }
  .vs-grid { gap: 48px; }
  .vs-copy { width: 380px; }
  .faq-grid { gap: 52px; }
  .waitlist-grid { gap: 48px; }
  .waitlist-action { width: 460px; }
}

@media (max-width: 980px) {
  /* Every two-column flex row becomes one column. align-items MUST go back to
     stretch at the same time: these rows are flex-start at desktop, and in a
     COLUMN flex container flex-start stops sizing the cross axis, so each child
     falls back to its fit-content width. That let the comparison table's
     520px min-width push its own scroll container out to 520px instead of
     scrolling inside the 335px available on a phone. */
  .hero-grid,
  .vs-grid,
  .faq-grid,
  .waitlist-grid { align-items: stretch; }

  /* The hero mock stacks under the copy. */
  .hero-grid { flex-direction: column; gap: 44px; }
  .mock { width: min(410px, 100%); }

  .band-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 40px;
  }
  .band-head-note,
  .sports .band-head-note { max-width: 600px; margin-bottom: 0; }
  .sports .band-head { margin-bottom: 36px; }
  .seg-group { margin-bottom: 0; }

  .vs-grid,
  .faq-grid { flex-direction: column; gap: 40px; }
  .vs-copy,
  .faq-copy { width: auto; max-width: 640px; }

  .waitlist-grid { flex-direction: column; align-items: stretch; gap: 36px; }
  .waitlist-action { width: 100%; max-width: 520px; }
}

@media (max-width: 860px) {
  .how-h2 { margin-bottom: 36px; }
  .how-steps { grid-template-columns: minmax(0, 1fr); }
  .how-step {
    padding: 26px 0 28px;
    border-left: 0;
  }
  .how-step + .how-step { border-top: 1px solid var(--divider); }
}

@media (max-width: 560px) {
  .price-amt { font-size: 44px; }
  .price-card { padding: 24px 20px 22px; }
  .adapt-card { padding: 24px 20px 22px; }
  .mock-adapt-label { font-size: 11px; }
  .mock-body { padding: 16px 12px 14px; }
  .faq-summary { gap: 12px; }
  .hero-meta { gap: 6px 16px; }
}


/* --------------------------------------------------------------------------
   13. MOTION — 140ms for a state change, 240ms for enter/leave, both inside
   the reduced-motion guard. Nothing here bounces.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .seg,
  .faq-q,
  .cta-input {
    transition:
      color var(--dur-state) var(--ease-out),
      background-color var(--dur-state) var(--ease-out),
      border-color var(--dur-state) var(--ease-out);
  }
  .faq-chev { transition: transform var(--dur-enter) var(--ease-out); }
}

/* "Same race. Different plan." (issue #8) */
.custom-intro { margin-top: 20px; max-width: 62ch; }
.custom-example { margin-top: 28px; padding: 24px; max-width: 62ch; }
.custom-example-h { margin: 0 0 8px; }
.custom-tiers { margin-top: 20px; max-width: 62ch; color: var(--text-secondary); }

/* The tile grid under the adapt buttons (src/css/weekgrid.css). */
.mock-body .wk { margin-top: 18px; }