/**
 * Founding Client Program page styles (/founding-client).
 * Loaded only on founding-client.php — page-specific styles that do not belong in site.css.
 *
 * Design source of truth: the PRD 01 prototype Artifact (§ 6 Design Considerations) —
 * the site's design family deliberately dialed up. Every color consumes site.css
 * role tokens (--text, --text-muted, --text-accent, --surface-*, --tint-primary-*);
 * no literal brand hex.
 *
 * Reuses site.css block classes: the section system (.section, .section--dark,
 * .section--light, .section__container, .section__heading), .btn / .btn--primary /
 * .btn__text, the .expandable accordion family (FAQ), the form primitives
 * (.form-group, .form-label, .form-input, .form-select, .form-textarea, .form-hint,
 * .form-error, .form-error-summary), .link-body, .visually-hidden, and .skip-link.
 *
 * Motion gates: JS-dependent initial states sit behind the root .js class (never on
 * base selectors — no-JS visitors see finished states, FR 4); every transition and
 * animation of 200ms or longer is disabled under the root .motion-reduce class,
 * rendering finished states (FR 11). The wavy dividers reference the SVG filters
 * #fc-wavy / #fc-wavy2 defined inline in founding-client.php (FR 10).
 *
 * Responsive Breakpoints (Desktop-First):
 * - Desktop: 1025px+ (base styles, no media query)
 * - Laptop:  max-width: 1024px
 * - Tablet:  max-width: 768px
 * - Mobile:  max-width: 480px
 */

/* ==========================================================================
   Page-Wide Editorial Register
   ========================================================================== */

/* This page commits fully to the serif accent: every section heading renders
   in DM Serif (site.css leaves .section__heading on the default sans). Scoped
   to this page by the one-file-per-page loading rule. */
.section__heading {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Spark eyebrow — the uppercase kicker above each section heading. The hero
   eyebrow's spark glyph repeats on every section via CSS mask over
   currentColor, so it themes with the eyebrow's role token and stays out of
   the accessibility tree (CSS-only decoration, FR 14). */
.fc-eyebrow {
  font-size: var(--font-size-tiny);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-sm);
}

.fc-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.6em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M12 2v5M12 17v5M2 12h5M17 12h5M5 5l3.5 3.5M15.5 15.5L19 19M19 5l-3.5 3.5M8.5 15.5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M12 2v5M12 17v5M2 12h5M17 12h5M5 5l3.5 3.5M15.5 15.5L19 19M19 5l-3.5 3.5M8.5 15.5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Groups a section's eyebrow + heading (+ lead) and spaces the block from the
   section body beneath it. */
.fc-section__intro-group {
  margin-bottom: var(--space-xl);
}

/* Mono meta line — the "honesty voice" under CTAs (deadline, spot count,
   "I read every one"). */
.fc-meta {
  font-family: var(--font-typewriter);
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Cosmic Backdrops & Shared Treatments — starscape tile, brand washes, glow CTAs
   ========================================================================== */

/* The cosmos continues past the hero — a sparse static starscape tiled on
   dark sections at roughly the hero field's density. Defined once at :root;
   consumed by .fc-starscape and the .fc-apply glow bookend. */
:root {
  --fc-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23ffffeb'%3E%3Ccircle cx='13' cy='37' r='1' opacity='.3'/%3E%3Ccircle cx='89' cy='12' r='.7' opacity='.22'/%3E%3Ccircle cx='160' cy='58' r='1.2' opacity='.34'/%3E%3Ccircle cx='210' cy='140' r='.8' opacity='.26'/%3E%3Ccircle cx='60' cy='180' r='1' opacity='.3'/%3E%3Ccircle cx='140' cy='222' r='.6' opacity='.2'/%3E%3Ccircle cx='236' cy='236' r='1' opacity='.18'/%3E%3Ccircle cx='30' cy='110' r='.7' opacity='.24'/%3E%3C/g%3E%3C/svg%3E");
}

.fc-starscape {
  background-image: var(--fc-stars);
}

/* Faint asymmetric brand washes — quiet depth on the big light flats. */
.fc-wash-a {
  background-image: radial-gradient(circle 50rem at 85% 0%, var(--tint-primary-faint), transparent 70%);
}

.fc-wash-b {
  background-image: radial-gradient(circle 46rem at 8% 30%, var(--tint-primary-faint), transparent 70%);
}

/* Brand-glow CTAs — composed onto .btn--primary (hero, mid-page CTA, submit).
   The glow is reinforcement on the already-styled primary button, never the
   only interactive cue. */
.fc-glow-btn {
  box-shadow: 0 0 36px var(--tint-primary-glow);
}

.fc-glow-btn:hover {
  box-shadow: 0 0 48px var(--tint-primary-glow);
}

/* ==========================================================================
   Wavy Section Dividers — feTurbulence + feDisplacementMap, layered waves (FR 10)
   ========================================================================== */

/* SVG filter-defs holder — replaces the prototype's inline style attribute,
   which the site CSP (style-src, no unsafe-inline) would block. Keeps the
   zero-size defs SVG out of layout flow. */
.fc-svg-defs {
  position: absolute;
}

/* A .fc-wave section paints its own canvas color over the bottom of the
   section above it, displaced into a wavy edge by the SVG filters defined in
   founding-client.php (#fc-wavy seed 7 / #fc-wavy2 seed 13). Two layers: a
   solid wave in front, a translucent offset wave behind it — a layered
   horizon. The filters displace by up to ~11px, so both layers overhang the
   viewport 2% each side to keep displaced edges from opening gaps.

   Color consumes the theme-resolved role token (--surface-canvas) rather than
   the prototype's raw palette tokens: inside .section--light it resolves to
   the warm canvas, inside .section--dark to ink — same rendered colors, and
   the .fc-wave--light/--dark modifiers only carry what genuinely differs
   between themes (the back wave's translucency).

   The overhang must be clipped by an ancestor or it widens the page into
   horizontal scroll — main carries overflow-x: clip below (clip, not hidden:
   hidden would turn main into a scroll container and swallow the waves'
   vertical overhang into the section above). */
main {
  overflow-x: clip;
}

.fc-wave {
  position: relative;
}

.fc-wave::before {
  content: "";
  position: absolute;
  top: -2.2rem;
  left: -2%;
  width: 104%;
  height: 5rem;
  z-index: 1;
  background-color: var(--surface-canvas);
  filter: url(#fc-wavy);
  pointer-events: none;
}

.fc-wave::after {
  content: "";
  position: absolute;
  top: -3.4rem;
  left: -2%;
  width: 104%;
  height: 5rem;
  z-index: 0;
  filter: url(#fc-wavy2);
  pointer-events: none;
}

.fc-wave--light::after {
  background-color: color-mix(in srgb, var(--surface-canvas) 35%, transparent);
}

.fc-wave--dark::after {
  background-color: color-mix(in srgb, var(--surface-canvas) 30%, transparent);
}

/* ==========================================================================
   ① Hero — starfield canvas, big-bang glow, orbit rings, serif headline
   ========================================================================== */

.fc-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82vh;
  padding: var(--space-2xl) var(--space-md);
  overflow: hidden;
}

/* Starfield canvas — painted by starfield.js (task 4.2); sits behind the
   content with the glow and rings. */
.fc-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* The big bang — a radial brand glow at the hero's center. The burst
   animation (scale-up from a point) is JS-gated and lands in the Motion
   section; this is its finished state. */
.fc-hero__glow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 110rem;
  height: 110rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--tint-primary-glow) 0%,
    var(--tint-primary-soft) 32%,
    transparent 62%);
  pointer-events: none;
}

/* Orbit rings — hairline structure around the bang, behind the headline.
   One-off cream washes at 7% / 4.5% (Tier 2 inline color-mix — they track
   the text token, used only here). */
.fc-hero__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--color-text-light) 7%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.fc-hero__ring--1 {
  width: 60rem;
  height: 60rem;
}

.fc-hero__ring--2 {
  width: 88rem;
  height: 88rem;
  border-color: color-mix(in srgb, var(--color-text-light) 4.5%, transparent);
}

.fc-hero__content {
  position: relative;
  z-index: 1;
  max-width: 100rem;
  text-align: center;
}

.fc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--font-size-tiny);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-md);
}

.fc-hero__eyebrow svg {
  flex-shrink: 0;
}

/* Oversized display headline — clamp() per css-conventions (display-scale,
   would otherwise need 3+ breakpoint overrides). */
.fc-hero__headline {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(4.6rem, 7vw, 8.4rem);
  line-height: 1.08;
  text-wrap: balance;
  color: var(--text);
  margin-bottom: var(--space-md);
}

.fc-accent {
  color: var(--color-primary);
}

/* Hand-drawn underline under the headline accent. Base state is fully drawn
   (no-JS / reduced-motion finished state); the JS-gated draw-in initial state
   lands in the Motion section (task 3.5). */
.fc-underline {
  position: relative;
  white-space: nowrap;
}

.fc-underline svg {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: 0.3em;
  overflow: visible;
}

.fc-underline path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
}

.fc-hero__subhead {
  font-size: var(--font-size-large);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 78rem;
  margin: 0 auto var(--space-lg);
}

.fc-hero__subhead strong {
  color: var(--text);
}

.fc-hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

/* ==========================================================================
   ② The Exchange — typewriter catch line, founder strip, trade cards
   ========================================================================== */

/* The catch line — typewriter voice in a recessed quote well. The full
   sentence renders via the ::after attr() pseudo (finished state) until
   typewriter.js arms the block (adds .fc-catch--typing — Motion section)
   and types into the span's text node, reserving the finished height via a
   measured min-height so typing never reflows (task 4.4 contract). */
.fc-catch {
  font-family: var(--font-typewriter);
  font-size: var(--font-size-xl);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--surface-recessed);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  padding: var(--space-md);
  max-width: 86rem;
  margin: 0 0 var(--space-xl);
}

.fc-catch__label {
  display: block;
  font-size: var(--font-size-micro);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-xs);
}

.fc-catch__type::after {
  content: attr(data-type-text);
}

/* Typing-point cursor — hidden without JS (the finished sentence needs no
   cursor); the .js reveal and blink live in the Motion section. */
.fc-catch__cursor {
  display: none;
  width: 0.5ch;
  height: 1.05em;
  margin-left: 2px;
  background-color: var(--color-primary);
  vertical-align: text-bottom;
}

/* Founder strip — the trust anchor for a "too good to be true" offer. The
   circle crop is CSS-only per the responsive-image convention (PRD A2):
   square asset, border-radius here, never baked into the file. */
.fc-founder {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: var(--space-md);
  max-width: 86rem;
  margin: 0 0 var(--space-xl);
}

.fc-founder__photo {
  flex-shrink: 0;
  line-height: 0;
}

.fc-founder__img {
  display: block;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  object-fit: cover;
}

.fc-founder__name {
  font-family: var(--font-accent);
  font-size: var(--font-size-xl);
  color: var(--text);
  line-height: 1.2;
}

.fc-founder__role {
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 0.6rem;
}

.fc-founder__line {
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Trade cards — receive | ask, side by side */
.fc-trade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: stretch;
}

.fc-trade__col {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: var(--space-lg);
}

/* Corner tint on the receive card — the value side glows, faintly */
.fc-trade__col:first-child {
  background-image: radial-gradient(circle 26rem at 100% 0%, var(--tint-primary-faint), transparent 70%);
}

.fc-trade__heading {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--font-size-2xl);
  color: var(--text);
  margin-bottom: var(--space-md);
}

.fc-trade__receive-lead {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.fc-trade__receive-body {
  color: var(--text-muted);
  line-height: 1.65;
}

/* Checkmark list — shared by the ask column (here) and section ④ */
.fc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.fc-list li {
  display: flex;
  gap: 1rem;
  line-height: 1.55;
}

.fc-list__check {
  color: var(--text-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.fc-list strong {
  color: var(--text);
}

.fc-list span:not(.fc-list__check) {
  color: var(--text-muted);
}

.fc-terms-note {
  font-family: var(--font-typewriter);
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-md);
  margin-top: var(--space-xl);
  max-width: 78rem;
}

/* ==========================================================================
   ③ What's Included — recessed inclusion tiles, fine print
   ========================================================================== */

.fc-included {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: var(--space-lg);
}

.fc-included__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

/* Each inclusion in its own recessed well — package contents, not a list */
.fc-included__grid li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-weight: 600;
  color: var(--text);
  background-color: var(--surface-recessed);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
}

.fc-fine-print {
  font-size: var(--font-size-tiny);
  line-height: 1.7;
  color: var(--text-muted);
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-md);
}

.fc-fine-print strong {
  color: var(--text);
}

/* ==========================================================================
   ④ Who I'm Looking For — checklist on dark starscape
   ========================================================================== */

.fc-who__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 72rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.fc-who__list li {
  display: flex;
  gap: 1.4rem;
  font-size: var(--font-size-large);
  line-height: 1.5;
  color: var(--text);
}

.fc-who__list .fc-list__check {
  font-size: var(--font-size-large);
}

/* The last row's aside — "if that made you nod…" */
.fc-who__list em {
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  display: block;
  margin-top: 0.3rem;
}

/* ==========================================================================
   ⑤ The Portal Experience — browser mock, Available-now / Building-together buckets
   ========================================================================== */

.fc-portal__lead {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(2.8rem, 3.4vw, 4rem);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.fc-portal__lead-sub {
  font-size: var(--font-size-large);
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
}

/* Browser-frame mock — a CSS-drawn skeleton of the client portal (FR 16).
   It depicts the dark portal UI and consumes the role tokens of the
   .section--dark it sits in; if it ever moves to a light context, give it
   the .surface--dark marker rather than hard-coding palette tokens. */
.fc-browser {
  border: 1px solid var(--border-hairline-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-image);
  max-width: 92rem;
  margin: 0 auto var(--space-md);
}

.fc-browser__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--tint-primary-edge);
}

.fc-browser__dots {
  display: flex;
  gap: 0.5rem;
}

.fc-browser__dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--border-hairline-light);
}

.fc-browser__url {
  font-family: var(--font-typewriter);
  font-size: var(--font-size-micro);
  color: var(--text-muted);
  background-color: var(--surface-recessed);
  border-radius: 4px;
  padding: 0.3rem 1.2rem;
}

.fc-browser__body {
  display: grid;
  grid-template-columns: 18rem 1fr;
  background-color: var(--surface-recessed);
  min-height: 34rem;
}

.fc-browser__side {
  background-color: var(--surface-canvas);
  padding: 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Skeleton primitives — grey-box stand-ins for portal UI */
.fc-skel {
  border-radius: 4px;
  background-color: var(--surface-raised);
}

.fc-skel--nav {
  height: 1.2rem;
  width: 80%;
}

.fc-skel--nav-active {
  background-color: var(--tint-primary-edge);
}

.fc-browser__main {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.fc-skel--title {
  height: 1.6rem;
  width: 34%;
}

.fc-browser__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.fc-skel-card {
  background-color: var(--surface-raised);
  border-radius: 8px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fc-skel-card__label {
  height: 0.9rem;
  width: 60%;
  background-color: var(--border-hairline-light);
  border-radius: 3px;
}

/* Progress bars — the fill pseudo consumes var(--fill) set by the modifier
   classes below. Base state is the finished fill; the JS-gated zero-width
   initial state lives in the Motion section. */
.fc-skel-bar {
  height: 0.8rem;
  border-radius: 99px;
  background-color: var(--surface-recessed);
  overflow: hidden;
  position: relative;
}

.fc-skel-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background-color: var(--color-primary);
  width: var(--fill, 50%);
}

/* Fill targets — replace the prototype's inline style="--fill: N%" attributes
   (blocked by the site CSP, same rule as the defs holder above). These are
   the FINISHED states; portal-mock.js animates toward them (task 4.5). */
.fc-skel-bar--a { --fill: 85%; }
.fc-skel-bar--b { --fill: 55%; }
.fc-skel-bar--c { --fill: 25%; }

/* Feedback-thread bubbles — client message and orange-washed reply */
.fc-skel-chat {
  background-color: var(--surface-raised);
  border-radius: 8px 8px 8px 2px;
  padding: 1.2rem;
  max-width: 46%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.fc-skel-chat--reply {
  border-radius: 8px 8px 2px 8px;
  align-self: flex-end;
  background-color: var(--tint-primary-soft);
  /* align-self: flex-end shrink-wraps the item, and the skeleton spans have
     no intrinsic width — without an explicit width the reply renders as a
     padding-only sliver (a latent prototype defect, caught in the 3.6 pass).
     width: 100% hands sizing back to the max-width cap above. */
  width: 100%;
}

.fc-skel-chat span {
  display: block;
  height: 0.8rem;
  border-radius: 3px;
  background-color: var(--border-hairline-light);
}

.fc-skel-chat span:last-child {
  width: 70%;
}

.fc-portal__framing {
  font-family: var(--font-accent);
  font-size: var(--font-size-xl);
  color: var(--text-accent);
  text-align: center;
  max-width: 70rem;
  margin: 0 auto var(--space-xl);
  text-wrap: balance;
}

/* Two honest buckets — solid "Available now" vs dashed "Building together" */
.fc-buckets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

.fc-bucket {
  border-radius: 12px;
  padding: var(--space-lg);
}

/* Hairline is the cream-derived variant — this card sits on the dark canvas
   (the prototype's ink-derived hairline renders invisible there). */
.fc-bucket--now {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline-light);
  box-shadow: var(--shadow-1);
}

/* Dashed border = not built yet — the co-created state encoded in form. The
   overlaid SVG rect strokes itself solid orange on hover/focus (border-draw);
   its transition is in the Motion section so reduced motion gets the rest
   state only. */
.fc-bucket--together {
  position: relative;
  border: 2px dashed var(--border-strong-light);
  background-color: transparent;
}

.fc-bucket__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fc-bucket__border rect {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.fc-bucket--together:hover .fc-bucket__border rect,
.fc-bucket--together:focus-within .fc-bucket__border rect {
  stroke-dashoffset: 0;
}

/* Status chips — the tinted state recipe (-light bg + -dark text) for the
   live chip; brand wash for the co-created chip */
.fc-chip {
  display: inline-block;
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 0.5rem 1.4rem;
  margin-bottom: var(--space-xs);
}

.fc-chip--now {
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
}

.fc-chip--together {
  background-color: var(--tint-primary-soft);
  color: var(--text-accent);
}

/* Live dot — static here; the JS-gated ping halo lives in the Motion section
   (-main is a non-text graphic per the state-color rules). */
.fc-chip__dot {
  display: inline-block;
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.7rem;
  border-radius: 50%;
  background-color: var(--color-success-main);
  vertical-align: 0.05em;
}

.fc-bucket__tagline {
  font-size: var(--font-size-small);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.fc-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.fc-feature {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.2rem;
  align-items: start;
}

.fc-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 8px;
  background-color: var(--tint-primary-soft);
  color: var(--text-accent);
}

.fc-feature__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.fc-feature__desc {
  font-size: var(--font-size-small);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ==========================================================================
   ⑥ How It Works — dotted trajectory, node dots, ghost glyphs, mid-page CTA
   ========================================================================== */

.fc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.fc-step {
  position: relative;
  isolation: isolate;
  padding-top: var(--space-sm);
}

/* Ghost glyphs — hand-imperfect explosion (01/03) and star (02/04) SVGs at
   ghost opacity, echoing the home process section's odd/even orange–green
   alternation. Inline color-mix: the orange rung the tint scale doesn't have
   (16%), and secondary has no tint scale (primary-only by convention) — both
   still track their brand-hue tokens. */
.fc-step__ghost {
  position: absolute;
  top: -2.2rem;
  right: 0.4rem;
  z-index: -1;
  width: 10rem;
  height: 10rem;
  pointer-events: none;
}

.fc-step__ghost--burst {
  color: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.fc-step__ghost--star {
  color: color-mix(in srgb, var(--color-secondary) 14%, transparent);
}

.fc-step__num {
  font-family: var(--font-accent);
  font-size: var(--font-size-5xl);
  line-height: 1;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-sm);
}

/* Dotted trajectory segment launching each step from its node dot — every
   segment stops short at 40%, so the steps read as discrete waypoints rather
   than one continuous line */
.fc-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 40%;
  height: 2px;
  background-image: repeating-linear-gradient(to right,
    var(--text-accent) 0 6px, transparent 6px 14px);
  opacity: 0.5;
}

/* Node dot where each step meets the trajectory */
.fc-step::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.fc-step__title {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.fc-step__desc {
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Mid-page CTA — the timeline ends at launch; invite the reader to step 1 */
.fc-midcta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  text-align: center;
}

.fc-midcta__line {
  font-family: var(--font-accent);
  font-size: var(--font-size-2xl);
  color: var(--text);
  text-wrap: balance;
}

/* ==========================================================================
   ⑦ FAQ — accordion skin over the site.css .expandable family
   ========================================================================== */

/* The questions ride the shared .expandable accordion unmodified; this
   wrapper only sets the column width and rhythm. */
.faq-list {
  max-width: 86rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ==========================================================================
   ⑧ Final CTA & Application Form — glow bookend, commitments fieldset, success state
   ========================================================================== */

/* Glow bookend — the apply section opens with an echo of the hero's bang.
   Painted as a background gradient (not an element) so it can't force
   horizontal overflow or fight the wavy divider's overhang. */
.fc-apply {
  background-image: radial-gradient(circle 60rem at 50% -12rem,
    var(--tint-primary-soft), transparent 65%), var(--fc-stars);
}

.fc-apply__heading {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(3rem, 4vw, 4.6rem);
  text-wrap: balance;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.fc-apply__intro {
  font-size: var(--font-size-large);
  color: var(--text-muted);
  max-width: 72rem;
  margin-bottom: var(--space-xl);
}

/* No-JS fallback line — the mono honesty voice, sized as a standalone note */
.fc-form__noscript {
  font-family: var(--font-typewriter);
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
  max-width: 72rem;
  margin-bottom: var(--space-md);
}

.fc-form {
  max-width: 86rem;
}

.fc-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-md);
}

/* Honeypot wrapper (FR 17) — moved off-screen rather than display:none, which
   some form-filling bots skip; combined with aria-hidden + tabindex="-1" in
   the markup, no real user (sighted, keyboard, or AT) ever meets the field.
   Deliberately innocuous class name — "honeypot" in a class is a tell. */
.fc-form__extra {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Commitments fieldset — the screening filter, visually a recessed well.
   Inline color-mix: the border needs a rung between --border-hairline-light
   (10%) and --border-strong-light (55%, form-field weight) — bright enough
   that the legend reads as deliberately sitting on the outline, without
   promoting the well to a field. */
.fc-form__commitments {
  background-color: var(--surface-recessed);
  border: 1px solid color-mix(in srgb, var(--color-text-light) 22%, transparent);
  border-radius: 12px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.fc-form__commitments-legend {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text);
  padding: 0 0.8rem;
}

.fc-form__commitments-hint {
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.fc-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 0.8rem 0;
  cursor: pointer;
  color: var(--text);
  line-height: 1.5;
}

.fc-checkbox input {
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--focus);
  cursor: pointer;
}

.fc-form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Success confirmation (FR 22) — replaces the form; focus lands here */
.fc-form__success {
  background-color: var(--surface-raised);
  border-left: 4px solid var(--color-success-main);
  border-radius: 0 12px 12px 0;
  padding: var(--space-lg);
  max-width: 72rem;
}

.fc-form__success h3 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--font-size-2xl);
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.fc-form__success p {
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Motion — JS-Gated Initial States & Animations (behind the root .js class)
   ========================================================================== */

/* Every rule here is a JS-gated initial state or animation (FR 4): without
   .js on the root none of it applies, and the finished states declared in
   the sections above render as-is. The Reduced Motion section below must
   stay AFTER this one — its equal-specificity overrides win by source order. */

/* -- Hero load-in: bang burst, canvas fade, staggered rise, underline draw -- */

/* The big bang — the glow bursts from a point, the universe fades in around it */
@keyframes fc-bang {
  from { transform: translate(-50%, -50%) scale(0.04); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.js .fc-hero__glow {
  animation: fc-bang 1300ms cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

@keyframes fc-fade {
  to { opacity: 1; }
}

.js .fc-hero__canvas {
  opacity: 0;
  animation: fc-fade 1400ms ease 250ms forwards;
}

/* One-time staggered rise — directs reading order */
@keyframes fc-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.js .fc-hero__eyebrow,
.js .fc-hero__headline,
.js .fc-hero__subhead,
.js .fc-hero__cta-group {
  opacity: 0;
  animation: fc-rise 700ms ease forwards;
}

.js .fc-hero__eyebrow   { animation-delay: 200ms; }
.js .fc-hero__headline  { animation-delay: 380ms; }
.js .fc-hero__subhead   { animation-delay: 560ms; }
.js .fc-hero__cta-group { animation-delay: 720ms; }

/* Accent underline strokes itself in once the headline has landed */
@keyframes fc-draw {
  to { stroke-dashoffset: 0; }
}

.js .fc-underline path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: fc-draw 600ms ease 1250ms forwards;
}

/* -- Typewriter — gated on .fc-catch--typing, which typewriter.js adds to
   the blockquote when it arms (task 4.4 contract), NOT on .js: the catch
   line is § 7 content, and the bootstrap .js class proves only that inline
   JS ran, not that the module loaded. No JS, a failed module load, or
   reduced motion (module doesn't arm) all leave the full ::after sentence
   from the Exchange section rendering. -- */

.fc-catch--typing .fc-catch__type::after {
  content: none;
}

@keyframes fc-blink {
  50% { opacity: 0; }
}

.fc-catch--typing .fc-catch__cursor {
  display: inline-block;
  animation: fc-blink 1s steps(1) infinite;
}

/* -- Live chip ping — ambient halo on the "Available now" dot -- */

@keyframes fc-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.js .fc-chip__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: inherit;
  animation: fc-ping 2.4s ease-out infinite;
}

/* -- Portal mock choreography — portal-mock.js adds .is-visible (task 4.5) -- */

.js .fc-skel-bar::after {
  width: 0;
  transition: width 900ms ease-out;
}

.js .fc-browser.is-visible .fc-skel-bar::after {
  width: var(--fill, 50%);
}

.js .fc-browser.is-visible .fc-skel-card:nth-child(2) .fc-skel-bar::after { transition-delay: 200ms; }
.js .fc-browser.is-visible .fc-skel-card:nth-child(3) .fc-skel-bar::after { transition-delay: 400ms; }

.js .fc-skel-chat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.js .fc-browser.is-visible .fc-skel-chat { opacity: 1; transform: none; transition-delay: 900ms; }
.js .fc-browser.is-visible .fc-skel-chat--reply { transition-delay: 1400ms; }

/* -- Timeline trajectory draw-in — sequence encoded as motion (task 4.6) -- */

.js .fc-step::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms ease;
}

.js .fc-steps.is-visible .fc-step::before { transform: scaleX(1); }
.js .fc-steps.is-visible .fc-step:nth-child(2)::before { transition-delay: 350ms; }
.js .fc-steps.is-visible .fc-step:nth-child(3)::before { transition-delay: 700ms; }
.js .fc-steps.is-visible .fc-step:nth-child(4)::before { transition-delay: 1050ms; }

.js .fc-step__num {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.js .fc-steps.is-visible .fc-step__num { opacity: 1; transform: none; }
.js .fc-steps.is-visible .fc-step:nth-child(2) .fc-step__num { transition-delay: 350ms; }
.js .fc-steps.is-visible .fc-step:nth-child(3) .fc-step__num { transition-delay: 700ms; }
.js .fc-steps.is-visible .fc-step:nth-child(4) .fc-step__num { transition-delay: 1050ms; }

/* -- Dashed-card border draw — pure CSS hover, works without JS, so it is
   not .js-gated; the Reduced Motion section stills it -- */

.fc-bucket__border rect {
  transition: stroke-dashoffset 900ms ease;
}

/* -- Scroll reveals — the page observer adds .is-visible (task 4.6) -- */

.js .fc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.js .fc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Reduced Motion — Finished States (under the root .motion-reduce class, FR 11)
   ========================================================================== */

/* With the root motion-reduce class set (OS preference or the FR 32 toggle,
   stamped pre-paint by the head script), every animation and ≥200ms
   transition above lands on its finished state. These overrides tie the
   .js rules on specificity and win by source order — keep this section last
   among the motion blocks. */

.motion-reduce .fc-hero__eyebrow,
.motion-reduce .fc-hero__headline,
.motion-reduce .fc-hero__subhead,
.motion-reduce .fc-hero__cta-group {
  animation: none;
  opacity: 1;
}

.motion-reduce .fc-hero__glow {
  animation: none;
}

.motion-reduce .fc-hero__canvas {
  animation: none;
  opacity: 1;
}

.motion-reduce .fc-underline path {
  animation: none;
  stroke-dashoffset: 0;
}

.motion-reduce .fc-catch__cursor {
  display: none;
}

.motion-reduce .fc-chip__dot::after {
  animation: none;
  opacity: 0;
}

.motion-reduce .fc-bucket__border rect {
  transition: none;
}

.motion-reduce .fc-skel-bar::after {
  width: var(--fill, 50%);
  transition: none;
}

.motion-reduce .fc-skel-chat {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-reduce .fc-step::before {
  transform: none;
  transition: none;
}

.motion-reduce .fc-step__num {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-reduce .fc-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* FAQ accordion — the .expandable transitions (350ms content, 300ms icon)
   live in site.css, which is not yet class-gated (the site-wide reduced-
   motion audit owns that migration); this page-level exception closes FR 11
   for the FAQ in the meantime. Open/close still works — instantly. */
.motion-reduce .expandable__content,
.motion-reduce .expandable__icon {
  transition-duration: 0s;
}

/* ==========================================================================
   Responsive (Desktop-First)
   ========================================================================== */

/* Responsive — max-width: 1024px (Laptop) */
@media (max-width: 1024px) {
  /* Timeline: 4-across → 2×2; the dotted trajectory still leads each row */
  .fc-steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-lg);
  }
}

/* Responsive — max-width: 768px (Tablet) */
@media (max-width: 768px) {
  .fc-hero {
    min-height: 70vh;
  }

  /* Two-column layouts collapse to single column */
  .fc-trade,
  .fc-buckets,
  .fc-form__row {
    grid-template-columns: 1fr;
  }

  .fc-included__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Browser mock: sidebar becomes a top nav strip, cards stack */
  .fc-browser__body {
    grid-template-columns: 1fr;
  }

  .fc-browser__side {
    flex-direction: row;
    align-items: center;
  }

  .fc-skel--nav {
    width: 8rem;
    height: 1rem;
  }

  .fc-browser__cards {
    grid-template-columns: 1fr;
  }

  .fc-skel-chat {
    max-width: 80%;
  }
}

/* Responsive — max-width: 480px (Mobile) */
@media (max-width: 480px) {
  .fc-included__grid {
    grid-template-columns: 1fr;
  }

  .fc-founder {
    flex-direction: column;
    text-align: center;
  }

  /* Timeline stacks fully; the horizontal trajectory no longer makes sense —
     the node dots alone mark the steps */
  .fc-steps {
    grid-template-columns: 1fr;
  }

  .fc-step::before {
    display: none;
  }
}