/* ============================================================
   RUNWAY — SIGNAL · COHORT 04: BRAND IN PUBLIC — FUNNEL EXTENSION
   Downstream drop/waitlist pages (waitlist → checkout → confirmation) for
   the SIGNAL brand-launch cohort. Built ONLY on runway.css design tokens —
   no new palette, type or geometry. The landing (index.html) and runway.css
   are NOT modified by this file.

   Mechanic: drop / waitlist → early-access enrolment → confirmation. The
   landing's join-the-waitlist is the opt-in; these pages are: you're on the
   list (countdown) → early-enrolment checkout (seat) → you're in.
   Image policy: PHOTO-FREE (CSS/SVG + chrome only) — introduces zero image
   refs, so nothing to sync against the image ledger.

   Net-new components (all on runway.css --tokens, dark fuchsia/chrome register):
     .bar-static  always-on funnel header (no .hero to drive the reveal)
     .fsteps      3-step progress rail (Archivo chips, pink active/done)
     .summary     order / receipt line items + pink-rule total
     .cgrid       checkout 2-col (start-aligned)
     .fnext       "what happens next" numbered steps
     .faccess     confirmation quick-access doors
     .fseal       confirmation hero seal
     .demo-note   per-section demo disclaimer

   Reused wholesale from runway.css: .bar/.brand*, .btn/.btn-pink/.btn-dark/
   .btn-ghost, .ticker*, .kicker/.eyebrow/.h1*/.h2*/.sub/.lede, .dropcard/
   .dc-*/.countdown/.cd-*, .boxcard/.box-*/.bm-*, .spec, .wl-form/.wl-field,
   .faq/details, .sec*/.sec-final/.final-*, .foot, .mbar, .reveal, .skip.

   WCAG (runway.css palette): body text white / --on-ink-2 on the near-black
   canvas; fuchsia is FILL + LARGE-display only (CTA pink-fill/black-text
   6.3:1, dark CTA ink-fill/white 19:1) — never body text. Zero funnels-core.
   ============================================================ */

/* ---- funnel header: always present (no .hero to drive the reveal) ---- */
.bar-static { position: sticky; top: 0; transform: none; }

/* ---- progress rail ---- */
.fsteps { background: var(--ink-2); border-bottom: 1px solid var(--line-d); }
.fsteps ol {
  list-style: none; margin: 0 auto; padding: .7rem 1.1rem;
  width: min(100% - 2.2rem, var(--wrap));
  display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
}
.fstep {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-3);
}
.fstep:not(:first-child)::before { content: ""; width: 22px; height: 2px; flex: none; background: var(--line-d); }
.fstep.active:not(:first-child)::before, .fstep.done:not(:first-child)::before { background: var(--pink); }
.fstep-no {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line-d);
  color: var(--on-ink-2); font-family: var(--display); font-weight: 400; font-size: .82rem;
}
.fstep.active { color: var(--white); }
.fstep.active .fstep-no { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.fstep.done { color: var(--white); }
.fstep.done .fstep-no { background: var(--ink); color: var(--pink); border-color: var(--pink); }

/* ---- order / receipt summary (on dark cards) ---- */
.summary { display: grid; gap: 0; margin: 1.3rem 0 0; }
.summary-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--line-d);
  font-size: .96rem; color: var(--on-ink-2); font-weight: 600;
}
.summary-row:first-child { border-top: none; }
.summary-row .sr-name b { color: var(--white); font-weight: 800; }
.summary-row .sr-name span { display: block; font-size: .8rem; color: var(--on-ink-3); font-weight: 600; margin-top: .1rem; }
.sr-strike { text-decoration: line-through; color: var(--on-ink-3); }
.sr-pink { color: var(--pink); font-family: var(--display); }
.summary-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: .5rem; padding-top: .9rem; border-top: 2px solid var(--pink);
}
.st-l { font-family: var(--display); font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--white); }
.st-amt { font-family: var(--display); font-size: 1.9rem; color: var(--white); line-height: 1; }

/* ---- checkout 2-col ---- */
.cgrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }

/* ---- "what happens next" numbered steps (on dark) ---- */
.fnext { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; counter-reset: fx; }
.fnext li {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--ink-3); border: 1px solid var(--line-d); border-left: 4px solid var(--pink);
  border-radius: var(--r); padding: 1.1rem 1.2rem;
}
.fnext li::before {
  counter-increment: fx; content: counter(fx, decimal-leading-zero); flex: none;
  font-family: var(--display); font-size: 1.15rem; color: var(--pink); line-height: 1.1;
}
.fnext b { display: block; color: var(--white); font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: 1rem; margin-bottom: .2rem; }
.fnext p { margin: 0; color: var(--on-ink-2); font-size: .94rem; font-weight: 500; }
.fnext i { color: var(--pink); font-style: normal; font-weight: 700; }

/* ---- confirmation quick-access doors (on dark) ---- */
.faccess { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 1.6rem; }
.faccess-btn {
  display: flex; align-items: center; gap: .9rem;
  background: var(--ink-3); border: 1px solid var(--line-d); border-radius: var(--r);
  padding: 1.1rem 1.2rem; text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.faccess-btn:hover { transform: translateY(-3px); border-color: rgba(255,30,142,.5); }
.faccess-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--pink); color: var(--ink); font-size: 1.2rem; }
.faccess-tx { display: grid; }
.faccess-tx b { font-family: var(--display); font-weight: 400; color: var(--white); font-size: 1rem; text-transform: uppercase; letter-spacing: .01em; }
.faccess-tx span { font-size: .78rem; color: var(--on-ink-3); font-weight: 600; }

/* ---- confirmation hero seal ---- */
.fseal {
  display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 1.4rem;
  border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--pink), var(--pink-deep));
  color: var(--white); font-family: var(--display); font-weight: 400; font-size: 2.6rem;
  box-shadow: 0 18px 50px -16px var(--pink-glow), 0 0 0 1px rgba(255,255,255,.12);
}

/* ---- per-section demo disclaimer ---- */
.demo-note { font-size: .76rem; color: var(--on-ink-3); text-align: center; font-weight: 600; margin: 1rem 0 0; }
.demo-note-l { text-align: left; }

/* ---- responsive ---- */
@media (max-width: 960px) { .cgrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .faccess { grid-template-columns: 1fr; }
  .fsteps ol { gap: .4rem; }
  .fstep { font-size: .66rem; letter-spacing: .08em; }
  .fstep:not(:first-child)::before { width: 12px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .faccess-btn { transition: none !important; }
  .faccess-btn:hover { transform: none !important; }
}