/* ==========================================================================
   STAY FREE ENTERPRISE — /business-funding page styles
   Plan §5 "/business-funding" storyboard (beats 1-8). Consumes tokens.css +
   base.css semantics; adds only page-specific structure. Governance:
   - coral = CTA only (the meter's threshold marker is coral ONLY while the
     snapshot is live; it retires to teal on resolve so a single coral CTA
     owns the viewport — see .sf-fm.is-resolved below).
   - gold carries extra weight HERE (Marcus): foil on tiers, markers, arc
     "ready zone". Rendered as material via foil.css, never additive glow.
   - shadows taupe-tinted; motion = drape / diffuse / catch-light / drift.
   - no two adjacent sections share a skeleton (§4 anti-AI checklist item 2).
   ========================================================================== */

/* ===================================================== 2b. CAPITAL PLATE */
.sf-fund-capital .sf-shell__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-fund-capital__copy h2 { margin-bottom: var(--sf-space-3); }
.sf-fund-capital__copy p { color: var(--sf-text-secondary); }

/* ============================================================ 1. HERO */
.sf-fund-hero {
  position: relative;
  padding-block: var(--sf-space-7) var(--sf-space-8);
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(212, 177, 90, 0.10), transparent 60%),
    linear-gradient(180deg, var(--sf-ivory), var(--sf-sand) 140%);
  overflow: hidden;
}
.sf-fund-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sf-space-7);
  align-items: center;
}
.sf-fund-hero__copy { max-width: 34rem; }
.sf-fund-hero h1 { margin-block: var(--sf-space-2) var(--sf-space-3); }
.sf-fund-hero__sub {
  color: var(--sf-text-secondary);
  font-size: var(--sf-text-md);
  max-width: 32rem;
}
.sf-fund-hero__reassure {
  margin-top: var(--sf-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-2) var(--sf-space-4);
  font-size: var(--sf-text-sm);
  color: var(--sf-teal);
  font-weight: 600;
}
.sf-fund-hero__reassure li { position: relative; padding-left: 18px; }
.sf-fund-hero__reassure li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 2px; /* rectangular, never a seal */
  background: var(--sf-gold);
}

/* ---- the meter card (SVG gauge + snapshot state machine) ---- */
.sf-fund-meter {
  position: relative;
  background: var(--sf-ivory);
  border: 1px solid rgba(14, 74, 60, 0.14);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-elevation-3);
  padding: var(--sf-space-5);
}
.sf-fund-meter__framehead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sf-space-3);
  margin-bottom: var(--sf-space-3);
}
.sf-fund-meter__frametitle {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-md);
  font-weight: 540;
  color: var(--sf-charcoal);
}
.sf-fund-meter__frametag {
  font-size: var(--sf-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sf-teal);
}

.sf-fm { display: grid; gap: var(--sf-space-3); }

/* gauge */
.sf-fm__gauge { display: grid; justify-items: center; gap: var(--sf-space-1); }
.sf-fm__gauge-svg { width: 100%; max-width: 300px; height: auto; }
.sf-fm__track  { fill: none; stroke: rgba(14, 74, 60, 0.22); stroke-width: 6; stroke-linecap: round; }
.sf-fm__zone {
  fill: none;
  stroke: var(--sf-gold);
  stroke-width: 6; stroke-linecap: round;
  opacity: 0.9;
}
.sf-fm__progress { fill: none; stroke: var(--sf-teal); stroke-width: 6; stroke-linecap: round; transition: none; }
.sf-fm__tick { stroke: rgba(14, 74, 60, 0.28); stroke-width: 1.5; }
.sf-fm__threshold { stroke: var(--sf-coral); stroke-width: 3; stroke-linecap: round; transition: stroke var(--sf-dur-base) var(--sf-ease-out); }
.sf-fm__threshold-flag { fill: var(--sf-coral); transition: fill var(--sf-dur-base) var(--sf-ease-out); }
.sf-fm__needle-blade { fill: #8A6B5A; }
.sf-fm__hub { fill: var(--sf-teal); stroke: var(--sf-ivory); stroke-width: 2; }
.sf-fm__word {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-lg);
  font-weight: 520;
  color: var(--sf-teal);
  text-align: center;
  letter-spacing: -0.01em;
  min-height: 1.4em;
}
.sf-fm__gauge.is-ready .sf-fm__word { color: var(--sf-gold); }
.sf-fm__gauge.is-foundation .sf-fm__word { color: var(--sf-teal); }

/* when resolved, coral retires from the gauge; the CTA below owns coral */
.sf-fm.is-resolved .sf-fm__threshold,
.sf-fm__gauge.is-resolved .sf-fm__threshold { stroke: var(--sf-teal); }
.sf-fm.is-resolved .sf-fm__threshold-flag,
.sf-fm__gauge.is-resolved .sf-fm__threshold-flag { fill: var(--sf-teal); }

/* panel: back chrome + swapping stage */
.sf-fm__panel { position: relative; }
.sf-fm__back {
  font-size: var(--sf-text-sm);
  font-weight: 600;
  color: var(--sf-taupe);
  padding: 2px 0;
  margin-bottom: var(--sf-space-2);
}
.sf-fm__back:hover { color: var(--sf-teal); }
.sf-fm__stage { min-height: 210px; }

/* resume affordance — a returning visitor opens fresh on question 1 but can
   jump back to where they left off (saved state auto-expires after 24h).
   Gold = material text accent, never coral. */
.sf-fm__resume {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 2px 0;
  margin-bottom: var(--sf-space-2);
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-sm);
  font-weight: 600;
  color: var(--sf-gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--sf-dur-fast) var(--sf-ease-out);
}
.sf-fm__resume:hover { color: var(--sf-gold); }
.sf-fm__resume:focus-visible { outline: 2px solid var(--sf-gold); outline-offset: 2px; }
.sf-fm__resume[hidden] { display: none; }

/* Reserve the fundability meter's mounted height so a slow script load doesn't
   collapse the hero and then pop the gauge in. Released the instant the meter
   mounts (data-sf-meter-mounted), so it only holds space during the load gap.
   ~692px = the desktop mounted height, measured live. */
[data-sf-fundability-meter]:not([data-sf-meter-mounted]) { display: block; min-height: 692px; }

.sf-fm__step {
  font-size: var(--sf-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sf-taupe);
  margin-bottom: var(--sf-space-1);
}
.sf-fm__question {
  font-size: var(--sf-text-lg);
  font-weight: 520;
  line-height: 1.15;
  color: var(--sf-charcoal);
  margin-bottom: var(--sf-space-1);
}
/* headings receive programmatic focus for SR announcement only (they are
   never tabbed to) — suppress the visible ring so sighted users see no box */
.sf-fm__question:focus,
.sf-fm__result-title:focus { outline: none; }
.sf-fm__help { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); margin-bottom: var(--sf-space-3); max-width: none; }

.sf-fm__options { display: grid; gap: var(--sf-space-2); }
.sf-fm__option {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: var(--sf-space-2) var(--sf-space-3);
  border: 1px solid rgba(14, 74, 60, 0.20);
  border-radius: var(--sf-radius-md);
  background: var(--sf-ivory);
  transition: border-color var(--sf-dur-fast) var(--sf-ease-out),
              box-shadow var(--sf-dur-fast) var(--sf-ease-out),
              transform var(--sf-dur-fast) var(--sf-ease-out);
}
.sf-fm__option:hover,
.sf-fm__option:focus-visible {
  border-color: var(--sf-teal);
  box-shadow: var(--sf-elevation-1);
  transform: translateY(-1px);
  outline: none;
}
.sf-fm__option:focus-visible { outline: 2px solid var(--sf-teal); outline-offset: 2px; }
.sf-fm__option.is-selected {
  border-color: var(--sf-teal);
  box-shadow: inset 0 0 0 1px var(--sf-teal), var(--sf-shadow-gold-edge);
  background: rgba(14, 74, 60, 0.04);
}
.sf-fm__option-label { font-weight: 600; color: var(--sf-charcoal); }
.sf-fm__option-hint { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }

/* result */
.sf-fm__result-kicker {
  font-size: var(--sf-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sf-teal);
}
.sf-fm__result-title { font-size: var(--sf-text-xl); font-weight: 540; color: var(--sf-charcoal); margin-block: var(--sf-space-1) var(--sf-space-2); }
.sf-fm__result-line { font-size: var(--sf-text-base); color: var(--sf-text-secondary); max-width: none; }
.sf-fm__result-cta { margin-top: var(--sf-space-3); display: grid; gap: var(--sf-space-2); justify-items: start; }
.sf-fm__result-note { font-size: var(--sf-text-sm); color: var(--sf-taupe); margin: 0; }
.sf-fm__redo {
  margin-top: var(--sf-space-3);
  font-size: var(--sf-text-sm);
  font-weight: 600;
  color: var(--sf-taupe);
  text-decoration: underline;
}
.sf-fm__redo:hover { color: var(--sf-teal); }

/* ============================================== 2. PROBLEM (centered prose) */
.sf-fund-problem .sf-shell__prose { max-width: 40rem; }
.sf-fund-problem__lead {
  font-family: var(--sf-font-display);
  font-size: clamp(var(--sf-text-xl), 3.2vw, var(--sf-text-3xl));
  font-weight: 460;
  line-height: 1.18;
  color: var(--sf-charcoal);
  margin-inline: auto;
  margin-bottom: var(--sf-space-4);
}
.sf-fund-problem__body { color: var(--sf-text-secondary); font-size: var(--sf-text-md); margin-inline: auto; }
.sf-fund-problem__accent { color: var(--sf-teal); font-style: italic; }

/* ============================================== 3. PRODUCT LADDER (cards) */
.sf-fund-ladder__head { max-width: 44rem; margin-bottom: var(--sf-space-6); }
.sf-fund-ladder__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sf-space-4);
  align-items: stretch; /* 2026-07-11 (Anthony): even cards, no boarding-class stagger */
}
.sf-fund-tier {
  position: relative;
  background: var(--sf-ivory);
  border: 1px solid rgba(14, 74, 60, 0.16);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-5);
  box-shadow: var(--sf-elevation-2);
  display: grid;
  gap: var(--sf-space-2);
  grid-template-rows: auto auto auto 1fr auto; /* class / name / for / list / best-when pinned bottom */
}
.sf-fund-tier--economy  { }
.sf-fund-tier--business { }
.sf-fund-tier--first {
  border-color: rgba(212, 177, 90, 0.55);
  box-shadow: var(--sf-shadow-gold-edge), var(--sf-elevation-3);
}
.sf-fund-tier__class {
  font-size: var(--sf-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sf-taupe);
}
.sf-fund-tier__badge {
  justify-self: start;
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--sf-radius-sm);
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--sf-charcoal);
}
.sf-fund-tier__name {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-xl);
  font-weight: 540;
  color: var(--sf-charcoal);
  line-height: 1.1;
}
.sf-fund-tier__for { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }
.sf-fund-tier__list { display: grid; gap: 6px; margin-top: var(--sf-space-1); }
.sf-fund-tier__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--sf-text-sm);
  color: var(--sf-charcoal);
}
.sf-fund-tier__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--sf-gold);
  box-shadow: var(--sf-shadow-gold-edge);
}
.sf-fund-tier__foot { font-size: var(--sf-text-sm); color: var(--sf-taupe); }

/* card-stacking detail accordion (lives inside the ladder, not its own URL) */
.sf-fund-accordion { margin-top: var(--sf-space-6); border-top: 1px solid rgba(14, 74, 60,.14); }
.sf-fund-accordion__item { border-bottom: 1px solid rgba(14, 74, 60, 0.14); }
.sf-fund-accordion__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sf-space-3);
  padding: var(--sf-space-4) 0;
  text-align: left;
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-md);
  font-weight: 520;
  color: var(--sf-charcoal);
}
.sf-fund-accordion__icon {
  flex: 0 0 auto; width: 22px; height: 22px; position: relative;
}
.sf-fund-accordion__icon::before,
.sf-fund-accordion__icon::after {
  content: ""; position: absolute; background: var(--sf-teal);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.sf-fund-accordion__icon::before { width: 14px; height: 2px; }
.sf-fund-accordion__icon::after  { width: 2px; height: 14px; transition: transform var(--sf-dur-fast) var(--sf-ease-out); }
.sf-fund-accordion__trigger[aria-expanded="true"] .sf-fund-accordion__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.sf-fund-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--sf-dur-base) var(--sf-ease-out);
}
.sf-fund-accordion__panel-inner { padding-bottom: var(--sf-space-4); }
.sf-fund-accordion__panel p { color: var(--sf-text-secondary); font-size: var(--sf-text-base); max-width: 52rem; }

/* ============================================== 4. PROCESS (horizontal strip) */
.sf-fund-process__head { margin-bottom: var(--sf-space-5); max-width: 42rem; margin-inline: auto; text-align: center; } /* 2026-07-11 (Anthony): centered like the proof band below */
.sf-fund-step {
  background: var(--sf-ivory);
  border: 1px solid rgba(14, 74, 60, 0.14);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-5);
  box-shadow: var(--sf-elevation-1);
  display: grid;
  gap: var(--sf-space-2);
}
.sf-fund-step__marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 10px; /* rectangular-ish, never a circular seal */
  font-family: var(--sf-font-display);
  font-weight: 640;
  font-size: var(--sf-text-md);
  color: var(--sf-charcoal);
}
.sf-fund-step__name { font-family: var(--sf-font-display); font-size: var(--sf-text-lg); font-weight: 520; color: var(--sf-charcoal); }
.sf-fund-step__body { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); max-width: none; }
.sf-fund-step__when { font-size: var(--sf-text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--sf-teal); }

/* ============================================== 5. TRUST BAR (badges) */
.sf-fund-trust { background: linear-gradient(180deg, var(--sf-ivory), var(--sf-ivory)); }
.sf-fund-trust__head { text-align: center; max-width: 44rem; margin: 0 auto var(--sf-space-5); }
.sf-fund-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sf-space-3);
}
.sf-fund-badge {
  border: 1px solid rgba(14, 74, 60, 0.20);
  border-left: 3px solid var(--sf-gold); /* rectangular badge, gold accent as material */
  border-radius: var(--sf-radius-sm); /* rectangular, explicitly NOT a rosette */
  background: var(--sf-ivory);
  padding: var(--sf-space-4);
  box-shadow: var(--sf-elevation-1);
  display: grid;
  gap: 6px;
}
.sf-fund-badge__label { font-family: var(--sf-font-display); font-size: var(--sf-text-md); font-weight: 540; color: var(--sf-charcoal); line-height: 1.15; }
.sf-fund-badge__desc { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); max-width: none; }

/* ============================================== 6. PROOF (editorial split) */
.sf-fund-proof__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: var(--sf-space-6);
  align-items: center;
}
.sf-fund-proof__wall { display: grid; gap: var(--sf-space-3); }
.sf-fund-proof__aside { align-self: center; }
.sf-fund-proof__reversal {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-lg);
  font-weight: 460;
  line-height: 1.25;
  color: var(--sf-charcoal);
  margin-bottom: var(--sf-space-4);
}
.sf-fund-proof__note { font-size: var(--sf-text-sm); color: var(--sf-taupe); margin-top: var(--sf-space-3); }

/* ============================================== 7. FAQ (centered accordion) */
.sf-fund-faq__head { text-align: center; max-width: 40rem; margin: 0 auto var(--sf-space-5); }
.sf-fund-faq__list { max-width: 46rem; margin-inline: auto; }
.sf-fund-faq__item { border-bottom: 1px solid rgba(14, 74, 60, 0.14); }
.sf-fund-faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-3);
  padding: var(--sf-space-4) 0;
  text-align: left;
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-md);
  font-weight: 520;
  color: var(--sf-charcoal);
}
.sf-fund-faq__icon { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.sf-fund-faq__icon::before,
.sf-fund-faq__icon::after {
  content: ""; position: absolute; background: var(--sf-teal);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.sf-fund-faq__icon::before { width: 14px; height: 2px; }
.sf-fund-faq__icon::after  { width: 2px; height: 14px; transition: transform var(--sf-dur-fast) var(--sf-ease-out); }
.sf-fund-faq__q[aria-expanded="true"] .sf-fund-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.sf-fund-faq__a { overflow: hidden; max-height: 0; transition: max-height var(--sf-dur-base) var(--sf-ease-out); }
.sf-fund-faq__a-inner { padding-bottom: var(--sf-space-4); }
.sf-fund-faq__a p { color: var(--sf-text-secondary); font-size: var(--sf-text-base); }
.sf-fund-faq__a a { color: var(--sf-teal); font-weight: 600; text-decoration: underline; }

/* ============================================== 8. FINAL CTA + disclosure */
.sf-fund-final { text-align: center; }
.sf-fund-final__inner { max-width: 40rem; margin-inline: auto; }
.sf-fund-final h2 { margin-bottom: var(--sf-space-3); }
.sf-fund-final__sub { color: var(--sf-text-secondary); font-size: var(--sf-text-md); margin: 0 auto var(--sf-space-5); }
.sf-fund-final__disclosure { max-width: 52rem; margin: var(--sf-space-7) auto 0; text-align: left; }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
  .sf-fund-hero__inner { grid-template-columns: 1fr; gap: var(--sf-space-6); }
  .sf-fund-proof__grid { grid-template-columns: 1fr; gap: var(--sf-space-5); }
  .sf-fund-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .sf-fund-ladder__grid { grid-template-columns: 1fr; gap: var(--sf-space-5); align-items: stretch; }
  .sf-fund-tier--business,
  .sf-fund-tier--first { transform: none; }
}
@media (max-width: 560px) {
  .sf-fund-trust__grid { grid-template-columns: 1fr; }
  .sf-fund-meter { padding: var(--sf-space-4); }
}

/* reduced motion: strip the boarding-class rise + accordion easing already
   handled globally in base.css; nothing additive to glow here. */
@media (prefers-reduced-motion: reduce) {
  .sf-fund-tier--business, .sf-fund-tier--first { transform: none; }
}