/* ==========================================================================
   SeriesChief — Founding leagues (/signup/) and 404 page styles.
   Prefix: fl-. Extends site.css; no shared selectors are redefined.
   Motion is CSS-only, hangs off site.js [data-reveal].is-visible, animates
   transform/opacity only and is gated on html.js (complete without JS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero + status board
   -------------------------------------------------------------------------- */
.fl-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.2rem + 5vw, 6rem) clamp(3rem, 1.8rem + 4vw, 5.5rem); }
.fl-hero__grid-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 75%); }
.fl-hero__chequer { position: absolute; z-index: -1; top: 0; right: 0; width: min(40vw, 560px); height: 78%;
  opacity: 0.07; transform: skewX(var(--lean)); transform-origin: top right; pointer-events: none;
  background: conic-gradient(var(--fg) 25%, transparent 0 50%, var(--fg) 0 75%, transparent 0) 0 0 / 44px 44px;
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 70%);
  mask-image: linear-gradient(200deg, #000 10%, transparent 70%); }

.fl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 2.8rem clamp(2rem, 0.5rem + 4vw, 5.5rem); align-items: center; }
.fl-hero__copy { display: grid; gap: 1.6rem; justify-items: start; }
.fl-hero__title { font-size: clamp(4rem, 1.9rem + 7.4vw, 9.4rem); line-height: 0.86; }
.fl-hero .lede { max-width: 44ch; }
.fl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding-top: 0.4rem; }
.fl-hero__actions .link-arrow { min-height: 44px; } /* shared .link-arrow is text-height */

/* Status board: a timing-screen readout, deliberately not button-shaped */
.fl-board .panel__bar { color: var(--muted); }
.fl-board__main { position: relative; padding: clamp(1.3rem, 0.9rem + 1.4vw, 2rem); display: grid; gap: 0.9rem; border-bottom: 1px solid var(--line); }
.fl-board__main::before { /* chequer cap, top-right */
  content: ""; position: absolute; top: 0; right: 0; width: 84px; height: 42px; opacity: 0.16;
  background: conic-gradient(var(--fg) 25%, transparent 0 50%, var(--fg) 0 75%, transparent 0) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 80%); mask-image: linear-gradient(225deg, #000 20%, transparent 80%);
}
.fl-board__label { color: var(--fg-2); }
.fl-board__state {
  font-family: var(--font-display); font-style: italic; font-weight: 880; font-stretch: 66%;
  text-transform: uppercase; font-size: clamp(2.2rem, 1.3rem + 3vw, 3.9rem); line-height: 0.88; color: var(--signal);
  min-height: 2em; /* two lines reserved: no shift while the decode runs */
  text-wrap: balance;
}
.fl-board__note { color: var(--muted); font-size: var(--step--1); max-width: 40ch; }

.fl-light { position: relative; display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%; flex: none; background: var(--signal); }
.fl-light::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--signal); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .fl-light::after { animation: fl-standby 2.4s var(--ease) infinite; } }
@keyframes fl-standby { 0% { opacity: 0.7; transform: scale(0.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }

.fl-board__rows { margin: 0; display: grid; }
.fl-board__rows > div {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 4.6rem; align-items: center; gap: 0.75rem;
  padding: 0.78rem clamp(1rem, 0.7rem + 1.2vw, 1.6rem); border-bottom: 1px solid var(--line);
}
.fl-board__rows > div:last-child { border-bottom: 0; }
.fl-board__rows > div:nth-child(even) { background: rgb(242 239 230 / 0.02); }
.fl-board__rows dt { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.fl-board__rows dd { margin: 0; color: var(--fg); font-size: var(--step--1); line-height: 1.35; }
.fl-chip {
  justify-self: end; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.28rem 0.55rem; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; line-height: 1.2;
}
.fl-chip--signal { border-color: rgb(255 90 31 / 0.55); color: var(--signal-hi); }

@media (max-width: 960px) { .fl-hero__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Founding grid — GSRC in P1, open slots, proof, fit chips
   -------------------------------------------------------------------------- */
.fl-founders__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-5); align-items: end; margin-bottom: var(--space-4); }
.fl-founders__intro { display: grid; gap: 1rem; justify-items: start; }
.fl-founders__intro .lede { max-width: 42ch; }
.fl-founders__proof { display: grid; gap: 0.8rem; }
.fl-proof__list { margin: 0; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 0.4rem clamp(1.2rem, 0.5rem + 2.4vw, 2.6rem); }
.fl-proof__list > div { display: flex; flex-direction: column-reverse; gap: 0.25rem; }
.fl-proof__list dt { color: var(--muted); font-size: var(--step--1); line-height: 1.3; }
.fl-proof__list dd { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 860; font-stretch: 70%; text-transform: uppercase;
  font-size: var(--step-2); line-height: 0.95; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }

.fl-slots { margin: 0; padding: 0; grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.05fr); }
.fl-slots__open { min-height: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 0.4rem 1rem; padding-block: 1rem 0.9rem; }
@media (max-width: 760px) { .fl-slots { grid-template-columns: 1fr; gap: 0.7rem; } }
.fl-fit { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.fl-fit .label { color: var(--faint); }
.fl-fit__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 960px) { .fl-founders__head { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .fl-proof__list { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Formation lap — five one-line steps on a track line, beside a real screen
   -------------------------------------------------------------------------- */
.fl-lap__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-4) var(--space-5); align-items: center; }
.fl-lap__copy { display: grid; gap: 1.1rem; justify-items: start; }
.fl-steps { position: relative; list-style: none; margin: 0.8rem 0 0 0.45rem; padding: 0; width: calc(100% - 0.45rem); border-left: 2px solid var(--line-2); }
.fl-steps::after { /* orange fill drawn down the track when the list arrives */
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--signal); transform-origin: top;
}
.fl-step {
  position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.9rem;
  padding: 0.85rem 0 0.85rem 1.4rem; border-bottom: 1px solid var(--line);
}
.fl-step:last-child { border-bottom: 0; }
.fl-step::before { content: ""; position: absolute; z-index: 1; left: -9px; top: 1.15rem; width: 14px; height: 14px; background: var(--bg); border: 3px solid var(--signal); transform: rotate(45deg); }
.fl-step--finish::before { background: conic-gradient(var(--fg) 25%, var(--bg) 0 50%, var(--fg) 0 75%, var(--bg) 0) 0 0 / 7px 7px; border-color: var(--fg); }
.fl-step__num { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: var(--signal); }
.fl-step h3 { margin: 0; }
.fl-step p { color: var(--muted); font-size: var(--step--1); margin-top: 0.15rem; }
.fl-lap__shot { width: 100%; }

html.js .fl-steps::after { transform: scaleY(0); transition: transform 1.6s var(--ease-in-out) 0.2s; }
html.js .fl-steps.is-visible::after { transform: scaleY(1); }

@media (max-width: 960px) { .fl-lap__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Closing band — the deal in two lines, pricing in one, honest status plate
   -------------------------------------------------------------------------- */
.fl-cta .display { max-width: 12ch; }
.fl-deal { margin: 0; display: grid; gap: 0.6rem; max-width: 48ch; }
.fl-deal > div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-top: 0.6rem; border-top: 1px solid rgb(26 10 3 / 0.28); }
.fl-deal dt { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-ink); }
.fl-deal dd { margin: 0; color: rgb(26 10 3 / 0.88); font-size: var(--step-0); line-height: 1.45; }
.fl-cta__side { display: grid; gap: 1.2rem; justify-items: start; }
.fl-cta .fl-cta__price { font-size: 1rem; line-height: 1.5; max-width: 38ch; }
.fl-cta__links { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 520px) { .fl-deal > div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* --------------------------------------------------------------------------
   404 — off track
   -------------------------------------------------------------------------- */
.fl-404 { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.fl-404__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: center; }
.fl-404__copy { display: grid; gap: 1.5rem; justify-items: start; position: relative; z-index: 1; }
.fl-404__title { font-size: clamp(4.4rem, 1.4rem + 12vw, 13rem); line-height: 0.82; letter-spacing: -0.01em; }
.fl-404__title .accent { color: var(--signal); }
.fl-404 .lede { max-width: 38ch; }
.fl-404__ticker {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  padding: 0.55rem 0.9rem; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--amber);
}
.fl-404__ticker .label { color: var(--fg-2); }
.fl-404__ticker .fl-404__del { color: var(--amber); }
.fl-404__rejoin { display: grid; gap: 0.9rem; justify-items: start; }
.fl-404__links { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.fl-404__art { position: relative; margin: 0 calc(var(--page) * -1) 0 0; }
.fl-404__art img { width: 100%; height: auto; border-radius: var(--radius-lg) 0 0 var(--radius-lg); filter: brightness(0.85) saturate(0.9); }
.fl-404__art::after { /* blend the still into the page on its left edge */
  content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 16 / 9; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, var(--bg) 0%, rgb(11 12 11 / 0) 35%);
}
.fl-404__art figcaption { margin-top: 0.6rem; }

@media (max-width: 900px) {
  .fl-404__grid { grid-template-columns: 1fr; }
  .fl-404__art { margin-inline: calc(var(--page) * -1); }
  .fl-404__art img { border-radius: 0; }
  .fl-404__art::after { background: linear-gradient(0deg, var(--bg) 0%, rgb(11 12 11 / 0) 40%); }
  .fl-404__art figcaption { padding-inline: var(--page); }
}