/* ==========================================================================
   STAY FREE ENTERPRISE — home page, below-the-fold (index.html only)
   Layout glue for the storyboard beats after the hero: the Two Paths
   diptych (foil edge + hover sheen), the Founder strip capability
   placeholder, the Ladder teaser leg cards + connector, the Proof band
   risk-reversal line, and the Dust Reformation closing CTA. Split out of
   home.css (PERF, see that file's header) — loaded async via preload+swap
   since nothing here is visible before first paint. Consumes tokens.css
   custom properties only, reuses section-shells.css for the structural
   skeletons. No raw hexes.
   ========================================================================== */

/* ---------------------------------------------------------- two paths -- */
.sf-paths__head { max-width: 40rem; margin-bottom: var(--sf-space-6); }

.sf-path-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
  padding: var(--sf-space-6) var(--sf-space-5);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-bg-primary);
  box-shadow: var(--sf-elevation-2);
  border: 1px solid rgba(14, 74, 60, 0.1);
  /* foil-texture gold edge, per plan §2: material, never glow */
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--sf-gold), transparent 85%) 1;
}
.sf-path-card--primary { padding-block: var(--sf-space-7) var(--sf-space-6); }

.sf-path-card__kicker {
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-teal);
}
.sf-path-card__title {
  font-size: var(--sf-text-2xl);
}
.sf-path-card--primary .sf-path-card__title { font-size: var(--sf-text-3xl); }
.sf-path-card__body { color: var(--sf-text-secondary); }

.sf-path-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-1);
  margin-block: var(--sf-space-1);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}
.sf-path-card__list li { display: flex; align-items: center; gap: var(--sf-space-2); }
.sf-path-card__list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sf-gold);
  flex: 0 0 auto;
}

.sf-path-card__cta { align-self: flex-start; margin-top: var(--sf-space-2); }

/* hover sheen sweep — same technique as .sf-cta::after (cta-button.css),
   scoped to the path cards; foil highlight band, never additive glow. */
.sf-path-card::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
.sf-path-card:hover::after,
.sf-path-card:focus-within::after {
  transform: translateX(130%);
  transition: transform 0.7s var(--sf-ease-out);
}
.sf-path-card:hover,
.sf-path-card:focus-within {
  box-shadow: var(--sf-elevation-3);
  transform: translateY(-3px);
  transition: transform var(--sf-dur-fast) var(--sf-ease-out), box-shadow var(--sf-dur-fast) var(--sf-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .sf-path-card::after { display: none; }
  .sf-path-card:hover, .sf-path-card:focus-within { transform: none; }
}

/* ------------------------------------------------------- founder strip -- */
.sf-founder__quote {
  font-family: var(--sf-font-display);
  font-style: italic;
  font-weight: 460;
  font-size: var(--sf-text-2xl);
  line-height: 1.35;
  color: var(--sf-text-primary);
}
.sf-founder__body { margin-top: var(--sf-space-4); }
.sf-founder__cta { margin-top: var(--sf-space-4); }

.sf-founder__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
  box-shadow: var(--sf-elevation-3);
}
.sf-founder__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* boarding-pass wrap around the founder strip: full-width, no card radius */
#founder.sf-boarding-pass { border-radius: 0; overflow: hidden; }

/* ------------------------------------------------------------- ladder -- */
.sf-ladder__head { max-width: 40rem; margin-bottom: var(--sf-space-6); }

.sf-ladder__leg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-2);
  padding: var(--sf-space-5);
  padding-top: var(--sf-space-6);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-bg-primary);
  border: 1px solid rgba(14, 74, 60, 0.1);
  box-shadow: var(--sf-elevation-1);
}
.sf-ladder__leg + .sf-ladder__leg { margin-left: 6px; }
.sf-ladder__leg::before {
  /* dashed connector reading into this leg from the previous one — travels
     WITH the card inside the scrubbed track, never misaligned on scroll */
  content: "";
  position: absolute;
  top: 22px; left: -28px;
  width: 22px;
  border-top: 1.5px dashed rgba(212, 177, 90, 0.55);
}
.sf-ladder__leg:first-child::before { display: none; }

.sf-ladder__pin {
  width: 30px; height: 30px;
  display: block;
}
.sf-ladder__step {
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-teal);
}
.sf-ladder__leg-title { font-size: var(--sf-text-xl); }
.sf-ladder__leg-body { color: var(--sf-text-secondary); font-size: var(--sf-text-sm); }

.sf-ladder__cta-row { margin-top: var(--sf-space-5); }

/* ---------------------------------------------------------- proof band -- */
.sf-proof__head { max-width: 40rem; margin-bottom: var(--sf-space-5); }
.sf-proof__wall { margin-bottom: var(--sf-space-5); }

.sf-proof__reversal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-4);
  padding: var(--sf-space-5);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-bg-primary);
  border-left: 3px solid var(--sf-teal);
  box-shadow: var(--sf-elevation-1);
}
.sf-proof__reversal-copy { flex: 1 1 24rem; color: var(--sf-text-primary); }
.sf-proof__reversal-copy strong { color: var(--sf-teal); }

/* --------------------------------------------------------- dust closing -- */
.sf-close__cta-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-space-2);
  margin-top: var(--sf-space-5);
}
.sf-close__note {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}