/*
  Locol landing, variant "cinema" (dark). Loads after launch-base.css and only
  re-skins it: ink surfaces with a little blue depth, Plus Jakarta Sans
  headings and Hanken Grotesk body with tight tracking, 1 px rules between rows, captures that dissolve into the page.
  "+ captures": the real C3-C6 captures replace the placeholders. The one
  lime accent is now the Live Activity's own countdown in C5 (row 05), so the
  CSS pill that sat on C1 is gone.
  Ink #0c0e14 is the captures' own background, so their edges disappear.
*/

:root {
  color-scheme: dark;
  --paper: #0c0e14;        /* page ink = capture background */
  --surface: #12151d;
  --raised: #171b25;
  --ink: #f3f4f7;          /* headings 17.5:1 on paper */
  --text: #c9cdd6;         /* body 12.1:1 on paper, 10.8:1 on raised */
  --muted: #98a0b0;        /* 7.3:1 on paper, 6.5:1 on raised */
  --faint: #8a93a5;        /* 6.2:1 on paper, 5.6:1 on raised */
  --blue: #e6e8ee;         /* links + primary button fill (base maps these to --blue) */
  --blue-pressed: #ffffff;
  --on-blue: #0c0e14;      /* 15:1 on the light button */
  --focus: #8da8ff;
  --depth: #141b33;
  --rule: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .14);
  --inset: #171b25;
  --danger: #ffb4b9;
  --bezel: transparent;

  --heading: "Plus Jakarta Sans", "Avenir Next", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --max: 1240px;
  --radius: 16px;
  --step-row: clamp(1.625rem, 3.6vw, 2.75rem);
}

html { background: var(--paper); }
body {
  /* Blue depth: a surface tone behind the top of the page, not a halo. */
  background: radial-gradient(1400px 820px at 72% -8%, var(--depth), rgba(12, 14, 20, 0) 72%) no-repeat, var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; }
a { text-decoration-color: rgba(230, 232, 238, .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline-color: var(--focus); }
::selection { background: rgba(141, 168, 255, .35); color: #fff; }

.skip-link { background: var(--ink); color: var(--paper); font-weight: 600; }


/* ------------------------------------------------------------------ header */

.brand { color: var(--ink); font-weight: 700; letter-spacing: -0.025em; }
.header-link { color: var(--text); text-decoration: none; font-weight: 500; }
.header-link:hover { color: var(--ink); }
.cta-compact { border: 1px solid var(--border); background: rgba(255, 255, 255, .06); color: var(--ink); font-weight: 500; }
.cta-compact:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: var(--ink); }

/* -------------------------------------------------------------------- hero */

.hero { padding-top: 40px; }
.hero h1 {
  letter-spacing: -0.03em;
  line-height: 0.96;
  /* White to a cool grey top-down: depth without colour (bottom stop 9:1). */
  background: linear-gradient(180deg, #ffffff 30%, #b6bcc9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em; /* keep descenders inside the clipped box */
  text-wrap: balance;     /* two even lines where it has to wrap (phones, tablets) */
}
.hero-sub { max-width: 32ch; margin-top: 24px; color: var(--text); letter-spacing: -0.01em; }
.cta-row { margin-top: 32px; }
.button { min-height: 50px; border-radius: 10px; font-weight: 600; letter-spacing: -0.01em; transition: background-color .15s ease, border-color .15s ease; }
.button-primary { padding: 0 22px; }
.button-secondary { background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--ink); }
.button-secondary:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: var(--ink); }
.cta-note, .status-line { color: var(--muted); }
.cta-alt { color: var(--ink); }
.status-line { margin-top: 18px; letter-spacing: 0.02em; }

/* Captures: no bezel, no border. The screen keeps its corner radius and
   fades out at the bottom, so the dark UI melts into the page. */
.capture { border: 0; background: transparent; }
.capture img { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.capture-caption { color: var(--muted); letter-spacing: 0.01em; }

.hero-visual { position: relative; }

/* Mobile: C1 only, top-cropped (base), fading into the page. */
@media (max-width: 767px) {
  .hero { gap: 36px; }
  .hero-visual { justify-content: flex-start; }
  .hero-visual .capture-c1 img { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 55%, transparent 92%); }
  .hero-visual .capture-caption { margin-top: -28px; text-align: left; }
}

/* Tablet and up: C1 large in front, C2 peeking behind at 6 degrees. */
@media (min-width: 768px) {
  .hero-visual { --capture-w: 320px; display: block; width: 500px; max-width: 100%; margin-inline: auto; padding: 8px 0 0 28px; }
  .hero-visual .capture { aspect-ratio: 554 / 930; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .hero-visual .capture-c1 { position: relative; z-index: 2; filter: drop-shadow(-24px 30px 44px rgba(0, 0, 0, .7)); }
  .hero-visual .capture-c2 { position: absolute; z-index: 1; top: 44px; left: 176px; transform: rotate(6deg); transform-origin: 30% 20%; filter: brightness(.5) saturate(.85); }
  .hero-visual .capture-caption { position: relative; z-index: 2; margin-top: -20px; text-align: left; }
}

/* Desktop: copy left, visual right; the H1 is set at display size. */
@media (min-width: 1100px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 500px; align-items: center; gap: 48px; min-height: min(780px, calc(100svh - 72px)); padding-top: 24px; }
  .hero-copy { container-type: inline-size; }
  .hero h1 { font-size: clamp(2.4rem, 9.6cqi, 5.6rem); }
  .hero h1 .h1-line { display: block; white-space: nowrap; }
  .hero-visual { margin: 0; }
}

/* -------------------------------------------------------------------- rows */
/* One sentence, one capture, 1 px rules between rows. */

.rows { gap: 0; counter-reset: row; margin-top: 0; }
.statement + .rows .row:first-child { border-top: 0; } /* the statement band's bottom rule */
.row { counter-increment: row; padding-block: 64px 56px; border-top: 1px solid var(--rule); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row-line { color: var(--ink); font-size: var(--step-row); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
.row-line::before {
  content: counter(row, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  color: var(--faint); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.capture-row { --capture-w: min(280px, 72vw); }

/* Each row capture sits in a figure with the same one-line caption as C1. */
.row-visual { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.row-visual .capture-caption { text-align: center; }

/* C3 plan detail and C2 are the app on ink: the default fade applies.
   C4 is the friend's Safari page, light: no bottom fade (the address bar is
   the "any browser" cue), but a short top fade so the status bar, which in
   the capture overlaps scrolled text, dissolves into the page. */
.capture-c4 img { -webkit-mask-image: linear-gradient(180deg, transparent 3%, #000 16%); mask-image: linear-gradient(180deg, transparent 3%, #000 16%); }
/* C5 lock screen: the wallpaper runs to the screen edge, so the capture gets
   the whole rounded screen, no fade (the Live Activity sits low), and a
   hairline edge so the navy corners read as glass, not a hole in the page. */
.capture-c5 { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6)); }
.capture-c5 img { -webkit-mask-image: none; mask-image: none; }
.capture-c5::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: inherit; pointer-events: none; }
/* C6 Plans list: only a peek behind C3 on desktop (1100 px and up), like C2
   behind C1; below that it would run off the left edge of the page. */
.capture-c6 { display: none; }
.capture-c6 img { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 86%); mask-image: linear-gradient(180deg, #000 50%, transparent 86%); }

@media (min-width: 768px) {
  .row { justify-content: space-between; gap: 48px; padding: 88px 7% 72px; }
  .row-line { flex: 0 1 15ch; }
  .capture-row { --capture-w: 300px; }
}

/* ---------------------------------------------------------------- coverage */

.eyebrow { color: var(--muted); font-weight: 500; letter-spacing: 0.12em; }
.coverage-line { max-width: 22ch; margin-top: 14px; color: var(--ink); letter-spacing: -0.035em; line-height: 1.08; }
.town-list { max-width: 64ch; margin-top: 22px; color: var(--faint); }
.town-list li:not(:last-child)::after { color: rgba(255, 255, 255, .2); }
.coverage-note { max-width: 48ch; margin-top: 14px; color: var(--muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------- statement */
/* The owner's core message, straight under the hero: a full-bleed band on the
   surface token (a 100vw pseudo-element; body clips x-overflow), 1 px rules
   top and bottom, display type in the hero's
   gradient treatment and left-aligned like the hero, one muted sentence under
   it. No image, no button, no motion of its own beyond the shared fade. */

main > .statement {
  position: relative; isolation: isolate; margin-top: clamp(40px, 8vw, 88px);
  padding-block: clamp(4rem, 12vw, 9rem);
}
main > .statement::before {
  content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: radial-gradient(900px 420px at 18% 0%, var(--depth), transparent 70%), var(--surface);
  border-block: 1px solid var(--rule);
}
.statement-lead { margin-bottom: 20px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 500; letter-spacing: -0.015em; }
.statement h2 {
  max-width: 17ch;
  font-size: clamp(2.2rem, 7.5vw, 4.8rem); line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 30%, #b6bcc9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em; text-wrap: balance;
}
.statement-sub { margin-top: 24px; color: var(--muted); font-size: clamp(1.125rem, 2.2vw, 1.35rem); font-weight: 500; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------- story */
/* Founder note: one paragraph on ink, ~56ch, a 1 px rule above, no image. */

.story-body { max-width: 56ch; margin-top: 18px; padding-top: 28px; border-top: 1px solid var(--rule); }
.story-text { color: var(--ink); font-size: clamp(1.1875rem, 2.4vw, 1.5rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; text-wrap: pretty; }
.story-sign { margin-top: 22px; color: var(--muted); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }

/* ------------------------------------------------------------------ notify */

.notify > * { max-width: 560px; }
.notify h2 { color: var(--ink); letter-spacing: -0.025em; }
.notify-intro { color: var(--text); }
.field > label { color: var(--text); font-weight: 500; }
input[type="email"], input[type="text"] { border: 1px solid var(--border); border-radius: 10px; background: var(--raised); color: var(--ink); }
input::placeholder { color: var(--faint); }
input:hover { border-color: rgba(255, 255, 255, .26); }
input:focus-visible { border-color: var(--focus); outline-offset: 1px; }
.privacy-note, .form-note { color: var(--muted); }
.form-error { border: 1px solid rgba(255, 132, 142, .3); background: rgba(146, 37, 47, .22); color: var(--danger); }
.turnstile-status[data-tone="error"] { color: var(--danger); }
.turnstile-status[data-tone="dev"] { border-color: var(--border); }

.referral-card { border-color: var(--rule); background: var(--surface); }
.referral-link { background: var(--raised); }
.referral-link button { color: var(--ink); }
.confirmation-support, .share-status { color: var(--muted); }

/* ------------------------------------------------- hero request form (request) */
/* Ink fields on the hero, the same light primary button as the other states. */

.request-form .field > label { color: var(--muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; }
.request-form input[type="email"], .request-form input[type="text"] { background: rgba(23, 27, 37, .92); }
.request-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.request-form .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.request-form .privacy-note { color: var(--muted); }
.cta-request .confirmation { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(18, 21, 29, .88); }
.cta-request .confirmation-heading h2 { color: var(--ink); letter-spacing: -0.025em; }
.cta-request .confirmation-heading p { color: var(--text); }

/* --------------------------------------------------------------------- FAQ */

.faq h2, .organizers h2 { color: var(--ink); letter-spacing: -0.025em; }
.faq-list { border-top-color: var(--rule); }
.faq-item { border-bottom-color: var(--rule); }
.faq-item summary { color: var(--ink); font-weight: 500; }
.faq-item summary:hover::after { color: var(--ink); }
.faq-item p { color: var(--text); }

.organizers p { color: var(--text); }

/* ------------------------------------------------------------------ footer */

/* Rule drawn inside the gutters so it lines up with the row rules. */
.site-footer { border-top: 0; background: linear-gradient(var(--rule), var(--rule)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; color: var(--muted); }
.site-footer nav a { color: var(--text); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------- desktop two-column */
/* From 1100 px every section below the hero sits on the same two columns, so
   the left edges of rows, coverage, form and FAQ line up. */

@media (min-width: 1100px) {
  .row, .row:nth-child(even) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; padding-inline: 0; }
  .row .row-visual { justify-self: center; }
  .row-visual-stack .capture-c3 { z-index: 2; filter: drop-shadow(-24px 30px 44px rgba(0, 0, 0, .7)); }
  .row-visual-stack .capture-c6 { display: block; position: absolute; z-index: 1; top: 40px; right: 34%; transform: rotate(-6deg); transform-origin: 70% 20%; filter: brightness(.5) saturate(.85); }
  .row-visual-stack .capture-caption { position: relative; z-index: 2; }
  .row:nth-child(even) .row-line { grid-column: 2; grid-row: 1; }
  .row:nth-child(even) .row-visual { grid-column: 1; grid-row: 1; }
  .row-line { max-width: 15ch; }

  .coverage, .notify, .faq, .organizers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .coverage { align-items: end; }
  .coverage .eyebrow { grid-column: 1; }
  .coverage-line { grid-column: 1; }
  .town-list { grid-column: 2; grid-row: 2; margin: 0; padding-bottom: 6px; }
  .coverage-note { grid-column: 2; grid-row: 3; margin-top: 10px; }

  .notify { grid-template-rows: auto 1fr; }
  .notify h2, .notify-intro { grid-column: 1; }
  .notify-intro { align-self: start; }
  .notify .signup-shell { grid-column: 2; grid-row: 1 / span 2; margin-top: 6px; }

  .faq h2, .organizers h2 { grid-column: 1; }
  .faq-list { grid-column: 2; grid-row: 1; margin-top: 0; }
  .organizers p { grid-column: 2; grid-row: 1; margin-top: 0; }
}

/* ------------------------------------------------------------ scroll reveal */
/* Fade only, driven by scroll position in CSS (no JS). Browsers without
   scroll-driven animations, and anyone asking for reduced motion, get the
   page fully visible and still. */

@keyframes cinema-reveal { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .row > *, .statement, .story, .coverage, .notify, .faq, .organizers {
      animation: cinema-reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }
  }
}

/* The body face's line box can be a touch shorter than the base fonts; keep the
   in-text links at a full 44 px hit area. */
.privacy-note a, .faq-item a, .organizers a, .form-note a, .confirmation-support a { min-height: 44px; }