/* ============================================================================================
   go-overage.css — the landing pages' overage stylesheet (2026-09-15)

   WHAT THIS IS
   Every page's linked CSS is held to 40 KB gzipped (scripts/verify.mjs, rule P2). The shared sheet
   sat 730 bytes under the line after the About page, so the styles only the /go/ pages need live
   here, linked by src/pages/go/[slug].astro with `data-overage`, as the home's engine styles do in
   home-overage.css. The modal and the form recipe are shared and stay in the shared sheet.

   HOW IT IS MEASURED
   The verifier leaves this sheet out of the P2 total and reports it on its own line for each
   landing page ("overage stylesheet N bytes gzipped").

   WHAT IS IN IT
   The landing hero's meta rows and its clock card on the wash, the media section with the big
   image, the two-column body with the register card, the countdown, the facts list and the card's
   share row. Tokens only; nothing here invents
   a value.

   HOW TO MERGE IT BACK
   Move these rules into the components under src/components/landing/ as <style is:global> blocks
   and drop the stylesheets prop from the route, once the budget allows.
   ============================================================================================ */


/* ——— the hero: the split hero's copy column with its own rhythm (Robert, 2026-09-15: "too jammed together"):
   24px between the parts, the lede at the lead rung in the body ink on a 52ch measure, the meta rows 12px
   apart, and 8px more air above the action ——— */
.landing-hero .hero-split-copy { gap: var(--sp-24); }
.landing-hero .hero-split-copy > h1 { font-size: var(--fs-display); line-height: var(--lh-display); }  /* the reference's split title rung: a landing H1 runs long */
.landing-lede { font-size: var(--fs-lead-sm); line-height: var(--lh-sub); color: var(--body); max-width: 52ch; }
.landing-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); color: var(--body); font-size: var(--fs-ui); }
.landing-meta li { display: flex; align-items: flex-start; gap: 10px; }
.landing-meta .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--muted); flex: none; }
.landing-hero .hero-split-copy > .ctas { margin-top: var(--sp-8); }
.landing-meta a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.landing-meta a:hover { text-decoration-color: var(--orange); }
/* the compact card on the wash panel (Robert's second look): the tile lifted on a soft drop, 26rem wide, centred */
.landing-hero .hero-split-panel { align-items: center; }
.landing-card--compact { max-width: 26rem; margin-inline: auto; box-shadow: 0 24px 60px -24px rgba(26, 26, 46, .22), 0 1px 2px rgba(26, 26, 46, .05); }
.landing-card--compact:hover { transform: none; }
/* the big image in a section of its own under the hero: the panel corner, a hairline, rail to rail on the card inset */
.landing-media { padding-block: var(--section-pad); }
.landing-figure { display: block; margin: 0; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); }
.landing-figure img { width: 100%; height: auto; }
/* on a panel without a clock the image, or the recording's poster, inside the card corner and a hairline */
.landing-card-image, .hero-split-panel > .landing-poster { display: block; width: 100%; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.hero-split-panel > .landing-poster img { width: 100%; height: auto; }
.landing-poster { position: relative; }
.landing-poster img { opacity: .92; transition: transform 1.2s var(--ease), opacity var(--t-base) var(--ease); }
.landing-poster:hover img { transform: scale(1.02); opacity: 1; }
.landing-play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 72px; height: 72px; display: grid; place-items: center; border-radius: var(--r-circle); background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); transition: transform var(--t-fast) var(--ease); }
.landing-play .icon { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.landing-poster:hover .landing-play { transform: scale(1.06); }

/* ——— the body: copy left, the card right, sticky beside the copy from 1000px ——— */
.landing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .landing-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-8); } .landing-card { position: sticky; top: 96px; } }
.landing-copy { display: grid; gap: var(--s-4); max-width: 68ch; }
.landing-copy > h2 { font-size: var(--fs-subhead); margin-top: var(--s-4); }
.landing-copy > h2:first-child { margin-top: 0; }
.landing-copy > h3 { font-size: var(--fs-card-sm); margin-top: var(--s-2); }
.landing-copy > :is(p, ul, ol) { color: var(--body); }
/* main dropped the .prose wrapper here, so the sitewide bullet convention's .prose rule no longer reaches these
   lists; they take the same recipe directly — a grid gap, never an li margin (base.css) */
.landing-copy > :is(ul, ol) { padding-left: 1.25em; display: grid; gap: .5em; }
/* the register card: the tile with its own rows */
.landing-card { gap: var(--s-4); padding: var(--s-5); }
.landing-card-kicker { margin: 0; }
.landing-status { margin: 0; font-size: var(--fs-card-sm); font-weight: var(--fw-display); color: var(--ink); }
.countdown { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.countdown li { display: grid; gap: 2px; justify-items: center; padding: var(--s-3) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-field); background: var(--tile); }
.countdown-n { font-size: var(--fs-card); line-height: var(--lh-flat); color: var(--ink); }
.countdown-l { font-size: var(--fs-nano); letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--muted); }
/* the clock on the hero panel (Robert's third and fourth looks): the figures at the subhead rung on their tiles
   with 16px of room inside, a colon in each gap, the labels in the nano caps; the tile row fills the card */
.countdown--lg { gap: 14px; }
.countdown--lg li { position: relative; padding: var(--s-4) var(--s-3); }
.countdown--lg .countdown-n { font-size: var(--fs-subhead); letter-spacing: var(--track-tight); }
.countdown--lg li + li::before { content: ':'; position: absolute; left: -11px; top: 16px; font-size: var(--fs-card-sm); line-height: 1; color: var(--muted); }
.landing-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) 10px; margin: 0; font-size: var(--fs-small); color: var(--body); }
.landing-facts dt { color: var(--muted); }
.landing-facts dt .icon { width: 18px; height: 18px; margin-top: 1px; }
.landing-facts dd { margin: 0; }
.landing-facts a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.landing-facts a:hover { text-decoration-color: var(--orange); }
.landing-card-actions { display: grid; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); }
.landing-card-actions .btn { width: 100%; justify-content: center; }
.landing-card-row { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.landing-card-label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink); }
.landing-card-label .icon { width: 16px; height: 16px; color: var(--muted); }
.landing-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); font-size: var(--fs-small); }