/* ==========================================================================
   STAY FREE ENTERPRISE - /credit-repair page
   Layout glue for storyboard beats 1-8 (plan §5). Consumes tokens.css
   custom properties only, reuses section-shells.css skeletons. No raw
   hexes except the two needle-tint states, kept in sync with JS for the
   reduced-motion / no-JS resting look (same convention as compass-intake).
   Palette governance: coral = CTA only (never painted here on anything but
   .sf-cta); gold = foil/material, never additive glow on ivory. The single
   exception is #midnight (--sf-midnight-teal), where additive gold FX are
   legal. Shadows are taupe-tinted elevation tokens.
   ========================================================================== */

/* =============================================================== BEAT 1 HERO */
.sf-cr-hero { padding-block: var(--sf-space-9) var(--sf-space-8); overflow: hidden; }
.sf-cr-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sf-space-7);
  align-items: center;
}
.sf-cr-hero__copy { max-width: 42rem; }
.sf-cr-hero__title { margin-bottom: var(--sf-space-4); }
.sf-cr-hero__sub {
  font-size: var(--sf-text-md);
  color: var(--sf-text-secondary);
  max-width: 34rem;
  margin-bottom: var(--sf-space-5);
}

/* offer stack - the risk-reversal ladder. The lead item carries extra weight. */
.sf-cr-offer {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
  margin-bottom: var(--sf-space-6);
  max-width: 36rem;
}
.sf-cr-offer__item {
  display: flex;
  gap: var(--sf-space-3);
  align-items: flex-start;
  color: var(--sf-text-secondary);
  font-size: var(--sf-text-base);
  line-height: 1.5;
}
.sf-cr-offer__item strong { color: var(--sf-text-primary); font-weight: 700; }
.sf-cr-offer__item--lead {
  padding: var(--sf-space-3) var(--sf-space-4);
  background: var(--sf-bg-alt);
  border-left: 3px solid var(--sf-teal);
  border-radius: 0 var(--sf-radius-md) var(--sf-radius-md) 0;
  font-size: var(--sf-text-md);
}
.sf-cr-offer__mark {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-top: 0.5em;
  border-radius: 50%;
  /* gold foil dot, engraved-edge material cue, never glow */
  background: var(--sf-gold);
  box-shadow: var(--sf-shadow-gold-edge);
}
.sf-cr-offer__item--lead .sf-cr-offer__mark { background: var(--sf-teal); box-shadow: none; }

.sf-cr-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-4);
}
.sf-cr-hero__note { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }

/* capability plate - Higgsfield shot #5 */
.sf-cr-hero__media { position: relative; }
.sf-cr-hero__plate {
  aspect-ratio: 4 / 5;
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
  box-shadow: var(--sf-elevation-3);
}
.sf-cr-hero__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-cr-hero__plate-label {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-lg);
  color: var(--sf-taupe);
}
.sf-cr-hero__plate-sub {
  font-size: var(--sf-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-taupe);
  max-width: 22ch;
}

@media (max-width: 900px) {
  .sf-cr-hero__grid { grid-template-columns: 1fr; gap: var(--sf-space-6); }
  .sf-cr-hero__media { order: -1; max-width: 22rem; }
}

/* ============================================================ BEAT 2 PROBLEM */
.sf-cr-problem { position: relative; overflow: hidden; }
/* chiffon canvas is appended by JS; sits behind the prose, multiply blend */
.sf-cr-problem__prose { position: relative; z-index: 1; }
.sf-cr-problem__head { margin-bottom: var(--sf-space-4); }
.sf-cr-chiffon__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ============================================================ BEAT 3 COMPASS */
/* Override the shell's fixed 220vh; the steps define the scroll track height. */
.sf-cr-process { min-height: auto; padding-block: var(--sf-space-8); }
.sf-cr-process__intro {
  max-width: 44rem;
  margin-bottom: var(--sf-space-6);
}
.sf-cr-process__intro p { color: var(--sf-text-secondary); }

.sf-cr-process__layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: var(--sf-space-7);
  align-items: start;
}

/* sticky stage holds the compass + the currently-decoding word */
.sf-cr-process__stage {
  position: sticky;
  top: 12vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-space-3);
  text-align: center;
}

.sf-cr-compass { width: 100%; max-width: 280px; }
.sf-cr-compass__svg { width: 100%; height: auto; display: block; }
.sf-cr-compass__ring { fill: none; stroke: var(--sf-teal); stroke-width: 1.5; opacity: 0.5; }
.sf-cr-compass__ring-inner { fill: rgba(14, 74, 60, 0.03); stroke: var(--sf-teal); stroke-width: 0.75; opacity: 0.26; }
.sf-cr-compass__ticks line { stroke: var(--sf-teal); stroke-width: 1; opacity: 0.32; }
.sf-cr-compass__ticks line.is-long { stroke-width: 1.75; opacity: 0.55; }

.sf-cr-compass__blade,
.sf-cr-compass__tail {
  /* resting = rust-taupe (stuck); JS animates toward gold (free). Kept here
     so the no-JS / reduced-motion resting state reads correct. */
  fill: #8A6B5A;
  transition: fill var(--sf-dur-slow) var(--sf-ease-out);
}
.sf-cr-compass__tail { opacity: 0.7; }
.sf-cr-compass__hub { fill: var(--sf-gold); stroke: var(--sf-teal); stroke-width: 1.5; }
/* engraved-edge drop shadow on the needle = material presence, not glow */
.sf-cr-compass__needle { filter: drop-shadow(0 2px 3px rgba(138, 128, 116, 0.35)); }
/* resting orientation: pointing down (stuck). JS rotates it up (free). */
.sf-cr-compass__needle { transform: rotate(180deg); transform-origin: 100px 100px; }
.sf-reduced .sf-cr-compass__needle { transform: rotate(38deg); }

.sf-cr-process__word {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-3xl);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--sf-taupe);
  min-height: 1.1em;
  transition: color var(--sf-dur-slow) var(--sf-ease-out);
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}
.sf-cr-process__word.is-free { color: var(--sf-teal); }
.sf-cr-process__counter {
  font-size: var(--sf-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sf-taupe);
}

/* the 4 steps, tall enough to scrub the needle through its full swing */
.sf-cr-process__steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-6);
}
.sf-cr-process__step {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sf-space-2);
  padding: var(--sf-space-5) 0;
  border-top: 1px solid rgba(14, 74, 60, 0.14);
  opacity: 0.42;
  transition: opacity var(--sf-dur-base) var(--sf-ease-out);
}
.sf-cr-process__step.is-active { opacity: 1; }
.sf-cr-process__step:first-child { border-top: none; }
.sf-cr-process__step-index {
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-teal);
}
.sf-cr-process__step-title { font-size: var(--sf-text-2xl); }
.sf-cr-process__step-body { color: var(--sf-text-secondary); max-width: 40ch; }
.sf-cr-process__step-word {
  align-self: flex-start;
  margin-top: var(--sf-space-2);
  padding: 4px 12px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-bg-alt);
  border: 1px solid rgba(212, 177, 90, 0.5);
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sf-taupe);
  transition: color var(--sf-dur-base) var(--sf-ease-out), border-color var(--sf-dur-base) var(--sf-ease-out);
}
.sf-cr-process__step.is-active .sf-cr-process__step-word { color: var(--sf-teal); border-color: var(--sf-gold); }

@media (max-width: 820px) {
  .sf-cr-process__layout { grid-template-columns: 1fr; gap: var(--sf-space-4); }
  .sf-cr-process__stage { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sf-space-4); margin-bottom: var(--sf-space-4); }
  .sf-cr-compass { max-width: 150px; }
  .sf-cr-process__word { font-size: var(--sf-text-2xl); }
  .sf-cr-process__step { min-height: 0; border-top: 1px solid rgba(14, 74, 60, 0.14); opacity: 1; }
}

/* =========================================================== BEAT 4 MIDNIGHT */
.sf-cr-midnight {
  position: relative;
  overflow: hidden;
  padding-block: var(--sf-space-10);
  isolation: isolate; /* keep the section's additive FX from bleeding onto ivory neighbours */
}
/* WebGL god-ray host + the additive ember canvas both live here (dark-legal) */
.sf-cr-midnight__fx,
.sf-cr-midnight__voronoi {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* the canvas sf-gl.js injects must fill the host (same treatment pin-drop.css
   and dust-reformation.css give their scoped canvases) — unstyled it rendered
   inline at attribute size: the hard-edged strip Anthony flagged 2026-07-11 */
.sf-cr-midnight__fx .fx-canvas-abs,
.sf-cr-midnight__voronoi .fx-canvas-abs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.sf-cr-midnight__voronoi { display: none; } /* shown only when data-voronoi="on" */
.sf-cr-midnight[data-voronoi="on"] .sf-cr-midnight__voronoi { display: block; }
.sf-cr-midnight .sf-embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.sf-cr-midnight__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 46rem;
}
.sf-cr-midnight__eyebrow { color: var(--sf-gold); }
.sf-cr-midnight__head { margin-bottom: var(--sf-space-4); color: var(--sf-ivory); }
.sf-cr-midnight__body {
  margin-inline: auto;
  margin-bottom: var(--sf-space-6);
  color: rgba(250, 247, 242, 0.82);
  font-size: var(--sf-text-md);
  max-width: 40rem;
}
/* a faint gold hairline framing the dark spread - foil edge, not glow */
.sf-cr-midnight::before,
.sf-cr-midnight::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 177, 90, 0.45), transparent);
  z-index: 1;
}
.sf-cr-midnight::before { top: 8%; }
.sf-cr-midnight::after { bottom: 8%; }

/* static fallback: reduced-motion / no-WebGL shows the mark, not a blank void */
.sf-cr-midnight.sf-reduced .sf-cr-midnight__fx,
.sf-cr-midnight .sf-cr-midnight__fx.sf-cr--static {
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(212, 177, 90, 0.14), transparent 70%);
}

/* ============================================================== BEAT 5 PROOF */
.sf-cr-proof__head { max-width: 42rem; margin-bottom: var(--sf-space-6); }
.sf-cr-proof__head p { color: var(--sf-text-secondary); font-size: var(--sf-text-sm); margin-top: var(--sf-space-2); }
.sf-cr-proof__wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sf-space-4);
  margin-bottom: var(--sf-space-6);
}
@media (max-width: 900px) { .sf-cr-proof__wall { grid-template-columns: 1fr; } }

.sf-cr-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-cr-proof__reversal-copy { flex: 1 1 24rem; color: var(--sf-text-primary); }
.sf-cr-proof__reversal-copy strong { color: var(--sf-teal); }

/* ========================================================== BEAT 6 READINESS */
.sf-cr-readiness .sf-shell__grid { align-items: center; }
.sf-cr-readiness__copy { max-width: 40rem; }
.sf-cr-readiness__copy h2 { margin-bottom: var(--sf-space-3); }
.sf-cr-readiness__copy p { color: var(--sf-text-secondary); margin-bottom: var(--sf-space-5); }
.sf-cr-readiness__cta-row { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); }

/* ul. prefix is LOAD-BEARING: base.css's `ul[class] { padding: 0 }` reset is
   (0,1,1) and silently beat the bare class (0,1,0) — the card rendered with
   its checklist flush against the edge (Anthony, 2026-07-11) */
ul.sf-cr-readiness__list {
  list-style: none;
  margin: 0; padding: var(--sf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
  background: var(--sf-bg-primary);
  border-radius: var(--sf-radius-lg);
  border: 1px solid rgba(14, 74, 60, 0.12);
  box-shadow: var(--sf-elevation-2);
}
.sf-cr-readiness__item {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  font-size: var(--sf-text-md);
  color: var(--sf-text-primary);
}
.sf-cr-readiness__check {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(14, 74, 60, 0.08);
  border: 1.5px solid var(--sf-teal);
  position: relative;
}
.sf-cr-readiness__check::after {
  /* teal checkmark, structural color, never coral/gold */
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid var(--sf-teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ================================================================ BEAT 7 FAQ */
.sf-cr-faq__inner { max-width: 46rem; margin-inline: auto; }
.sf-cr-faq__head { text-align: center; margin-bottom: var(--sf-space-6); }
.sf-cr-faq__list { display: flex; flex-direction: column; gap: var(--sf-space-3); }
.sf-cr-faq__item {
  border: 1px solid rgba(14, 74, 60, 0.16);
  border-radius: var(--sf-radius-md);
  background: var(--sf-bg-primary);
  box-shadow: var(--sf-elevation-1);
  overflow: hidden;
}
.sf-cr-faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--sf-space-4) var(--sf-space-5);
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-md);
  color: var(--sf-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-3);
}
.sf-cr-faq__q::-webkit-details-marker { display: none; }
.sf-cr-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--sf-teal);
  border-bottom: 2px solid var(--sf-teal);
  transform: rotate(45deg);
  transition: transform var(--sf-dur-fast) var(--sf-ease-out);
}
.sf-cr-faq__item[open] .sf-cr-faq__q::after { transform: rotate(-135deg); }
.sf-cr-faq__q:hover { color: var(--sf-teal); }
.sf-cr-faq__q:focus-visible { outline: 2px solid var(--sf-teal); outline-offset: -2px; }
.sf-cr-faq__a { padding: 0 var(--sf-space-5) var(--sf-space-4); }
.sf-cr-faq__a p { color: var(--sf-text-secondary); max-width: none; }
.sf-cr-faq__a a { color: var(--sf-teal); text-decoration: underline; }

/* ============================================================== BEAT 8 CLOSE */
.sf-cr-close__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sf-space-7);
  align-items: center;
}
.sf-cr-close__cta h2 { margin-bottom: var(--sf-space-3); }
.sf-cr-close__cta p { color: var(--sf-text-secondary); margin-bottom: var(--sf-space-5); }
.sf-cr-close__disclosure { align-self: stretch; }
@media (max-width: 820px) {
  .sf-cr-close__grid { grid-template-columns: 1fr; gap: var(--sf-space-5); }
}

/* ---- reduced motion: kill page transitions the effects don't already gate -- */
@media (prefers-reduced-motion: reduce) {
  .sf-cr-process__step,
  .sf-cr-process__word,
  .sf-cr-compass__blade,
  .sf-cr-compass__tail,
  .sf-cr-process__step-word { transition: none !important; }
  .sf-cr-process__step { opacity: 1; }
}