/* =============================================================================
   DraftCast Marketing Site — Site styles ("the broadcast package")
   -----------------------------------------------------------------------------
   Built on tokens.css (copied from the app — docs/website-plan.md section 5;
   shared token values are byte-match-gated by site/tests/validate-slots.mjs).
   Styling direction, from that section and applied throughout:
     · full-bleed video with content in the lower third (an actual lower-third)
     · an all-caps tracked eyebrow above every headline
     · hard-edged rules and keylines instead of soft shadows
     · NO rounded-corner card grid (the visual signature of the app category
       this product is explicitly not in) — corners here are CUT (notched via
       clip-path), the way broadcast insert graphics are, not rounded
     · brand-green is reserved for live/CTA meaning; brand-gold for the
       premium/achievement beat (price, booking)
     · motion limited to three broadcast motifs — a rule that wipes across,
       a ticker that crawls, a live dot that pulses — plus the button lift.
       All of it collapses under prefers-reduced-motion (a floor, not a
       nicety; the product CSS honours it everywhere).
   One look only, and it is dark: the product is stage-black television, the
   signed-in app is stage-black, and the seam between site and show is meant
   to be invisible (website-plan §6). A light mode would be a second, weaker
   identity for no reader benefit — so `color-scheme: dark` is the identity,
   not a default.
   No third-party fonts, no CDN, no analytics, no trackers, zero JS — see
   site/README.md.
   ========================================================================== */

/* ---- Site-scoped tokens ----------------------------------------------------
   Named --site-* so they can never collide with (or silently drift from) a
   token name the app's tokens.css also declares — the validator byte-checks
   shared names in tokens.css; this block is deliberately outside that file. */
:root {
  --site-notch: 14px; /* the cut corner — broadcast insert-graphic DNA */
  --site-notch-sm: 9px;
  --site-max: 1180px;
  --site-header-h: 72px;
  --site-green-ink: rgba(0, 194, 110, 0.12);
  --site-gold-ink: rgba(201, 162, 39, 0.1);
  --site-edge-glow: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-green-bright) 55%, transparent 100%);
  --site-grid-lines: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 96px
    ),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 96px);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--stage-black);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

code {
  font-size: 0.9em;
  background: var(--slate-700);
  padding: 0.1em 0.35em;
  border: 1px solid var(--keyline);
}

::selection {
  background: var(--brand-green);
  color: var(--text-on-light);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link — keyboard/screen-reader users don't have to tab through the nav */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-green);
  color: var(--text-on-light);
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

/* ---- Layout shell ---------------------------------------------------------*/

.wrap {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* A reading-width variant for long single-column runs (the FAQ): the full
   --site-max leaves ~45% of a 1440px row dead once answers cap at 62-68ch. */
.wrap--narrow {
  max-width: 880px;
}

.section {
  /* padding-BLOCK only — .section and .wrap often share one element, and a
     shorthand `padding: X 0` here would silently zero .wrap's horizontal
     padding (rule order). Caught at 375px: desktop's margin-auto centering
     masked it completely. */
  padding-block: var(--sp-8);
  border-top: 1px solid var(--keyline);
}

.section--flush {
  border-top: none;
}

.section--tight {
  padding-block: var(--sp-7);
}

/* A full-bleed band with the subtle stage-grid texture behind it */
.section--stage {
  background: var(--slate-900);
  background-image: var(--site-grid-lines);
  border-top: 1px solid var(--keyline-strong);
  border-bottom: 1px solid var(--keyline-strong);
}

.section--gold {
  background: linear-gradient(180deg, var(--site-gold-ink), transparent 70%);
  border-top: 1px solid var(--keyline-gold);
}

/* Two-column split used on interior pages (content + aside) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

/* ---- Type system ----------------------------------------------------------*/

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-green);
  margin: 0 0 var(--sp-3);
}

/* The eyebrow's leading tick — a tiny skewed slab, score-bug DNA */
.eyebrow::before {
  content: '';
  width: 14px;
  height: 9px;
  background: currentColor;
  transform: skewX(var(--cut));
  flex: none;
}

.eyebrow--gold {
  color: var(--brand-gold);
}

.eyebrow--plain::before {
  display: none;
}

h1,
h2,
h3 {
  font-family: var(--font-headline);
  font-weight: var(--weight-headline);
  font-style: var(--headline-italic);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  line-height: 0.96;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-name-lg);
}

h1.jumbo {
  font-size: var(--fs-jumbo);
}

h2 {
  font-size: var(--fs-name-lg);
}

h3 {
  font-size: var(--fs-name);
}

/* Green highlight inside a headline — the wordmark's two-tone treatment */
.hl {
  color: var(--brand-green);
}
.hl--gold {
  color: var(--brand-gold);
}

/* The rule that wipes in under a section headline — motion motif no. 1 */
.rule-wipe {
  height: 3px;
  width: 96px;
  margin: var(--sp-4) 0 var(--sp-5);
  background: var(--site-edge-glow);
  transform-origin: left center;
  animation: rule-wipe var(--dur-slow) var(--ease-broadcast-out) both;
}

@keyframes rule-wipe {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

p {
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 var(--sp-4);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--text-secondary);
  max-width: 56ch;
}

.meta {
  font-family: var(--font-data);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  letter-spacing: var(--tracking-data);
}

.stat,
.price {
  font-family: var(--font-data);
  letter-spacing: var(--tracking-data);
  font-variant-numeric: tabular-nums;
}

/* ---- Chips (score-bug tags) ----------------------------------------------*/

.chip {
  display: inline-block;
  padding: 3px 12px;
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  transform: skewX(var(--cut));
  background: var(--slate-700);
  color: var(--text-secondary);
  border: 1px solid var(--keyline-strong);
}

.chip > span {
  display: inline-block;
  transform: skewX(calc(-1 * var(--cut)));
}

.chip--live {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--text-on-light);
}

.chip--gold {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--text-on-light);
}

.chip--outline {
  background: transparent;
}

/* A row of chips (platform-support statuses on index + the FAQ) */
.chip-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* Inside an FAQ answer the chips indent with the answer text */
.faq-item .chip-row {
  padding-left: calc(1ch + var(--sp-3));
}

/* The live dot — motion motif no. 3 */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 8px rgba(0, 194, 110, 0.8);
  animation: live-pulse 2.2s var(--ease-broadcast-inout) infinite;
  flex: none;
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---- Header / nav ---------------------------------------------------------*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--site-header-h);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--stage-black) 88%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--keyline);
}

.wordmark {
  font-family: var(--font-headline);
  font-weight: var(--weight-headline);
  font-style: var(--headline-italic);
  letter-spacing: var(--tracking-headline);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  text-decoration: none;
  color: var(--text-primary);
  white-space: nowrap;
  text-transform: uppercase;
}

.wordmark span {
  color: var(--brand-green);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.site-nav a:not(.btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px; /* tap-target floor (WCAG 2.5.8 wants ≥24px; we aim 32) */
  font-family: var(--font-data);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
  color: var(--text-secondary);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-1);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn):focus-visible {
  color: var(--text-primary);
}

/* Current-page marker: a hard underline slab, not a soft state */
.site-nav a[aria-current='page'] {
  color: var(--text-primary);
}
.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--brand-green);
  transform: skewX(var(--cut));
}

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-data);
  font-weight: 800;
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  clip-path: polygon(
    var(--site-notch-sm) 0,
    100% 0,
    100% calc(100% - var(--site-notch-sm)),
    calc(100% - var(--site-notch-sm)) 100%,
    0 100%,
    0 var(--site-notch-sm)
  );
  transition:
    transform var(--dur-fast) var(--ease-broadcast-out),
    background var(--dur-fast) var(--ease-broadcast-out),
    border-color var(--dur-fast) var(--ease-broadcast-out);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--brand-green);
  color: var(--text-on-light);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--brand-green-bright);
}

.btn--ghost {
  color: var(--text-primary);
  border-color: var(--border-chrome-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--brand-silver);
  background: rgba(255, 255, 255, 0.05);
}

.btn--gold {
  background: var(--brand-gold);
  color: var(--text-on-light);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--brand-gold-bright);
}

.btn--lg {
  padding: var(--sp-4) var(--sp-7);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
}

.btn-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

/* ---- Ticker (motion motif no. 2) ------------------------------------------
   A bottom-line crawl, the broadcast's most recognisable piece of chrome.
   Decorative only: aria-hidden in markup, duplicated content for the seamless
   loop, and it parks (no crawl, single copy visible) under reduced motion. */

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--keyline-strong);
  border-bottom: 1px solid var(--keyline-strong);
  background: var(--slate-850);
  padding: var(--sp-2) 0;
  white-space: nowrap;
  display: flex;
}

.ticker__reel {
  display: inline-flex;
  gap: var(--sp-7);
  padding-right: var(--sp-7);
  flex: none;
  animation: ticker-crawl 36s linear infinite;
}

.ticker span {
  font-family: var(--font-data);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ticker b {
  color: var(--brand-green);
  font-weight: 800;
}

@keyframes ticker-crawl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ---- Hero (full-bleed media, content in the lower third) ------------------*/

.hero {
  position: relative;
  min-height: min(86vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--keyline);
}

.hero--page {
  /* interior-page header: same anatomy, no media, shorter */
  min-height: 0;
  background: var(--slate-900);
  background-image: var(--site-grid-lines);
  align-items: flex-end;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hero media is a soft-focus backdrop, never a competing read: dimmed,
     desaturated, and BLURRED — blur is what makes on-frame text (today's
     placeholder poster is production-brief text edge-to-edge) illegible at
     any luminance, where a veil alone only fades it. The scale() hides the
     blur's transparent edge fringe under .hero's overflow: hidden. */
  filter: brightness(0.5) saturate(0.85) blur(7px);
  transform: scale(1.05);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* What this stack guarantees (screenshot-verified against the placeholder
     poster's on-frame brief text at 1440 and true-emulated 375 — the worst
     case, since that poster is text edge-to-edge): the media arrives already
     soft-focus (blur + brightness 0.5, see .hero__media img), a flat 0.6
     veil covers the whole frame, and the left gradient runs near-opaque
     (0.95 → 0.85) across the headline column. Blur makes on-frame text
     illegible everywhere; the veil + gradients keep the H1/lede zone
     high-contrast. The media reads as dark out-of-focus texture, brightest
     toward the right edge — it cannot compete with the headline.
     NOTE the flat veil is written as a two-stop gradient ON PURPOSE: a bare
     color is only valid as the FINAL background layer, and a non-final bare
     color invalidates the ENTIRE multi-layer declaration — the pre-fix scrim
     did exactly that (bare rgba as layer 2), so the whole background was
     silently dropped and the scrim rendered NOTHING. That, not gradient
     weakness, is why measurement showed the brief text winning. */
  background:
    var(--scrim-bottom),
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 68%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 42%, rgba(0, 0, 0, 0.5) 68%, transparent 90%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
  width: 100%;
}

.hero--page .hero__content {
  padding-top: var(--sp-7);
}

.hero__content h1 {
  max-width: 14ch;
  text-shadow: var(--overlay-text-halo);
}

.hero__content .lede {
  text-shadow: var(--overlay-text-halo);
  max-width: 52ch;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* ---- Statbar (the score-bug row) ------------------------------------------
   A row of hard numbers presented like a scoreboard bug: data face,
   tabular numerals, keylines between cells. */

.statbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--keyline-strong);
  background: var(--surface-panel);
  background-image: var(--panel-grain);
}

.statbar__cell {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-left: 1px solid var(--keyline);
  position: relative;
}

.statbar__cell:first-child {
  border-left: none;
}

.statbar__cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--brand-green);
}

.statbar__num {
  display: block;
  font-family: var(--font-data);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: var(--tracking-data);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--text-primary);
}

.statbar__label {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Lower-third feature cards --------------------------------------------
   The show's own graphic anatomy applied to selling copy: a hard slab, a
   green leading edge, an all-caps condensed title, a cut bottom corner. */

.lt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.lt {
  position: relative;
  background: var(--surface-panel);
  background-image: var(--panel-grain);
  border: 1px solid var(--keyline);
  border-left: 3px solid var(--brand-green);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--site-notch)),
    calc(100% - var(--site-notch)) 100%,
    0 100%
  );
}

.lt--gold {
  border-left-color: var(--brand-gold);
}

.lt__tag {
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-green);
  display: block;
  margin-bottom: var(--sp-3);
}

.lt--gold .lt__tag {
  color: var(--brand-gold);
}

.lt h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: var(--sp-3);
}

.lt p {
  margin-bottom: 0;
  font-size: var(--fs-meta);
}

/* ---- Video slot frames -----------------------------------------------------
   Aspect-ratio box that holds a generated poster (site/video-slots) at the
   slot's authored spec. Sized purely by aspect-ratio so a future real MP4
   drops in with zero layout change — see site/video-slots/manifest.json.
   The frame is drawn as broadcast camera brackets (corner marks), not a
   rounded thumbnail. */

.video-slot {
  position: relative;
  width: 100%;
  border: 1px solid var(--keyline-strong);
  background: var(--slate-800);
  overflow: hidden;
}

.video-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Corner brackets */
.video-slot::before,
.video-slot::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
}

.video-slot::before {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--brand-green);
  border-left: 2px solid var(--brand-green);
}

.video-slot::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid var(--brand-green);
  border-right: 2px solid var(--brand-green);
}

.video-slot--16x9 {
  aspect-ratio: 16 / 9;
}

.video-slot--1x1 {
  aspect-ratio: 1 / 1;
}

.video-slot--9x16 {
  aspect-ratio: 9 / 16;
  max-width: 320px;
}

.video-slot__caption {
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  margin-top: var(--sp-2);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  max-width: none;
}

/* ---- Steps (how it works) --------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  counter-reset: step;
}

.step {
  border-top: 3px solid var(--brand-green);
  padding-top: var(--sp-4);
  position: relative;
}

.step__index {
  font-family: var(--font-data);
  font-weight: 800;
  font-size: var(--fs-name);
  color: var(--brand-green);
  display: block;
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

/* :is(h2, h3): a step's heading level follows the page outline (h2 when steps
   sit directly under the page h1, as on how-it-works; h3 under a section h2,
   as on index) — the explicit font-size keeps both renderings identical. */
.step :is(h2, h3) {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
}

.step p {
  font-size: var(--fs-meta);
}

/* ---- Rundown (the broadcast-night timeline) ------------------------------ */

.rundown {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  border-left: 2px solid var(--keyline-strong);
}

.rundown li {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-6);
}

.rundown li:last-child {
  padding-bottom: 0;
}

.rundown li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--stage-black);
  border: 2px solid var(--brand-green);
  transform: rotate(45deg);
}

.rundown li:last-child::before {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
}

.rundown__time {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: var(--sp-1);
}

.rundown li:last-child .rundown__time {
  color: var(--brand-gold);
}

.rundown h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: var(--sp-2);
}

.rundown p {
  margin-bottom: 0;
  font-size: var(--fs-meta);
}

/* ---- Checklist (what to look for) ---------------------------------------- */

.checklist {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.checklist li {
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-7);
  background: var(--surface-panel);
  border: 1px solid var(--keyline);
  color: var(--text-secondary);
  font-size: var(--fs-meta);
}

.checklist li::before {
  content: '';
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--brand-green);
  border-bottom: 2px solid var(--brand-green);
  transform: translateY(-70%) rotate(-45deg);
}

.checklist b {
  color: var(--text-primary);
  font-family: var(--font-data);
  letter-spacing: var(--tracking-data);
}

/* ---- Pricing ------------------------------------------------------------ */

.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-6);
}

.pricing-card {
  position: relative;
  border: 1px solid var(--keyline-gold);
  background: var(--surface-panel);
  background-image: var(--panel-grain);
  padding: var(--sp-7);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--site-notch)),
    calc(100% - var(--site-notch)) 100%,
    0 100%
  );
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-bright), transparent);
}

.pricing-card .price {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  color: var(--brand-gold);
  display: block;
  margin: var(--sp-3) 0;
  line-height: 1;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0;
}

.pricing-card li {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--keyline);
  color: var(--text-secondary);
  font-family: var(--font-data);
  letter-spacing: var(--tracking-data);
}

.pricing-card li:first-child {
  border-top: none;
}

.pricing-card li b {
  color: var(--text-primary);
}

/* ---- FAQ (native <details>, zero JS) ------------------------------------ */

.faq-item {
  border-top: 1px solid var(--keyline);
  padding: var(--sp-4) 0;
}

.faq-item:last-of-type {
  border-bottom: 1px solid var(--keyline);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-headline);
  font-weight: var(--weight-headline);
  font-style: var(--headline-italic);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.1;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: '+';
  color: var(--brand-green);
  font-family: var(--font-data);
  font-style: normal;
  flex: none;
  width: 1ch;
}

.faq-item[open] summary::before {
  content: '\2212'; /* minus sign */
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--brand-green-bright);
}

.faq-item p {
  margin-top: var(--sp-3);
  max-width: 68ch;
  padding-left: calc(1ch + var(--sp-3));
}

/* ---- Form (book a draft) ------------------------------------------------ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  max-width: 640px;
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

input,
select,
textarea {
  width: 100%;
  padding: var(--sp-3);
  background: var(--surface-input);
  border: 1px solid var(--border-chrome);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--brand-green-dim);
}

.field-note {
  grid-column: 1 / -1;
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  max-width: none;
}

/* ---- Status strip (GET /health placeholder — see site/README.md) ------- */

.status-strip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: none;
}

/* ---- CTA band ------------------------------------------------------------ */

.cta-band {
  text-align: left;
  padding: var(--sp-8) 0;
  background:
    linear-gradient(180deg, transparent, var(--site-green-ink)),
    var(--stage-black);
  border-top: 1px solid var(--keyline-strong);
}

.cta-band h2 {
  max-width: 20ch;
}

/* ---- Footer -------------------------------------------------------------*/

.site-footer {
  position: relative;
  border-top: 1px solid var(--keyline-strong);
  padding: var(--sp-7) 0 var(--sp-7);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  overflow: hidden;
  background: var(--slate-900);
}

.site-footer .wordmark {
  font-size: clamp(2rem, 5vw, 3.4rem);
  display: inline-block;
  margin-bottom: var(--sp-4);
}

.site-footer nav {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin: var(--sp-4) 0;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px; /* tap-target floor, same as the primary nav */
  padding: var(--sp-1) var(--sp-1);
  text-decoration: none;
  color: var(--text-muted);
  font-family: var(--font-data);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--text-primary);
}

.site-footer__legal {
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  max-width: none;
  margin-bottom: 0;
}

/* ---- Responsive ---------------------------------------------------------*/

@media (max-width: 980px) {
  .lt-grid {
    grid-template-columns: 1fr;
  }
  .split,
  .pricing-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .site-header {
    flex-wrap: wrap;
  }
  .hero:not(.hero--page) {
    min-height: 70vh;
  }
}

@media (max-width: 700px) {
  /* Small viewports: the wrapped two-row header was measuring 165px sticky —
     a fifth of the screen gone permanently. Below 700px it scrolls away with
     the page, and the sign-in control drops its button chrome to link weight
     so the nav row stays one line shorter. */
  .site-header {
    position: static;
    padding-block: var(--sp-2);
  }
  .site-nav {
    gap: var(--sp-1) var(--sp-4);
  }
  .site-nav .btn--ghost {
    border: none;
    clip-path: none;
    padding: var(--sp-2) var(--sp-1);
    min-height: 32px;
    font-size: var(--fs-meta);
    color: var(--text-secondary);
    letter-spacing: var(--tracking-data);
  }
  .site-nav .btn--ghost:hover,
  .site-nav .btn--ghost:focus-visible {
    background: none;
    color: var(--text-primary);
  }
}

@media (max-width: 560px) {
  /* (nav gap for small widths is set in the 700px block above) */
  /* Phones: the hero media is heavily centre-cropped by object-fit: cover at
     this aspect, so dim it further — the headline zone must always win. */
  .hero__media {
    opacity: 0.6;
  }
  /* :not(.hero--page): interior-page headers size to content everywhere —
     only the home hero (full-bleed media) claims most of a phone screen. */
  .hero:not(.hero--page) {
    min-height: 82svh;
  }
  .statbar {
    grid-template-columns: 1fr 1fr;
  }
  .statbar__cell {
    border-top: 1px solid var(--keyline);
  }
}

/* ---- Motion discipline ---------------------------------------------------
   The product CSS honours prefers-reduced-motion everywhere (WatchConsole.css,
   global.css, BroadcastStage.css) per docs/website-plan.md section 5 — "the
   site must honour it too; that is a floor, not a nicety." Three motifs to
   kill: the rule wipe, the ticker crawl, the live-dot pulse — plus the button
   lift and smooth scrolling. The ticker parks readable (first copy visible,
   duplicate copies are aria-hidden decoration anyway). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .ticker__reel {
    animation: none;
  }
  .live-dot {
    animation: none;
  }
  .rule-wipe {
    animation: none;
  }
  .btn:hover,
  .btn:focus-visible {
    transform: none;
  }
}