/* ================================================================
   PATCH ROBOWARS · /sponsor — Pass A (hero + field report + cracked #1)
   Honour the system in styles.css. Local rules namespaced .sp- .
   ================================================================ */

/* Page wrapper for the sponsor route */
.sp-page {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  isolation: isolate;
}

/* Make sure all sponsor sections sit above the grid */
.sp-page { background: transparent; }
.sp-page > * { position: relative; z-index: 1; }
.sp-hero, .sp-warm, .sp-inv, .sp-patch, .sp-cta { background: transparent !important; }

/* Per-section blueprint accents — corner ticks + amber rule */
.sp-page > section,
.sp-page > .sp-field {
  position: relative;
}
.sp-page > section::before,
.sp-page > .sp-field::before {
  content: "";
  position: absolute;
  top: 0; left: 40px; right: 40px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(245, 197, 24, 0.18) 0 6px,
    transparent 6px 14px
  );
  pointer-events: none;
  z-index: 0;
}

/* Corner crosshairs at section edges */
.sp-page > section::after,
.sp-page > .sp-field::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 32px;
  width: 16px;
  height: 16px;
  border-top: 1px solid rgba(255, 106, 26, 0.45);
  border-left: 1px solid rgba(255, 106, 26, 0.45);
  pointer-events: none;
  z-index: 0;
}

/* Diagonal hatch ribbon between alternating sections */
.sp-page > section:nth-of-type(even)::before {
  background: repeating-linear-gradient(
    45deg,
    rgba(245, 197, 24, 0.10) 0 2px,
    transparent 2px 8px
  );
  height: 8px;
}

/* ── Coordinate strip (matches /compete cp-coord) ──────────────── */
.sp-coord {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding: 22px 40px 10px;
  border-bottom: 1px dashed var(--rule-faint);
}
.sp-coord .frame { color: var(--amber); }
.sp-coord .id { color: var(--orange); }
.sp-coord .bar {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(245,197,24,0.35), transparent);
  position: relative;
  overflow: hidden;
}
.sp-coord .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  animation: sp-bar-fill 1.6s ease-out forwards;
}
@keyframes sp-bar-fill { to { transform: scaleX(1); } }
.sp-coord .stat { color: var(--ink-dim); }
.sp-coord .stat .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Section 01: Hero (two columns desktop, stack mobile) ────────
   Compete-page parity: tighter vertical rhythm, single-paragraph lede,
   promoted callout sitting directly under the H1, inline email CTA.
   Right column carries the new DemandReadout (was double field-report). */
.sp-page.page { padding-top: 0; }
.sp-hero {
  /* top: 80px nav clearance absorbed from .page so photo extends under nav. */
  padding: 96px var(--page-side) 92px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sp-hero > .sp-coord,
.sp-hero > .sp-hero-grid { position: relative; z-index: 1; }

/* The .sp-coord ships with its own 22px 40px 10px padding for use
   on full-bleed sections (Cracked, Warm). Inside .sp-hero, the parent
   already supplies var(--page-side) horizontal padding, so we strip
   the strip's own h-padding — that puts its left rule flush with the
   H1 left edge and its right rule flush with the DemandReadout right
   edge regardless of viewport (small screens use page-pad; on large
   monitors the page-side calc keeps the column locked to page-max). */
.sp-hero > .sp-coord {
  padding-left: 0;
  padding-right: 0;
}

.sp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px);
  gap: 56px;
  /* stretch so the left stack matches the DemandReadout's height —
     paired with margin-top:auto on the CTA card below, this anchors
     the stack's bottom edge to the stats card's bottom edge. */
  align-items: stretch;
  margin-top: 24px;
}
.sp-hero-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sp-hero h1 {
  font-family: var(--display);
  font-size: clamp(52px, 6.6vw, 108px);
  letter-spacing: 0.005em;
  line-height: 0.94;
  /* negative top margin compensates for Bebas Neue's intrinsic top
     leading so the cap-height of "STAND BEHIND" sits on the same
     baseline as the DemandReadout's top border. */
  margin: -0.08em 0 22px;
  color: var(--ink);
  text-transform: uppercase;
}
.sp-hero h1 .accent { color: var(--orange); display: block; }

/* Promoted callout — sits directly under H1, before the lede.
   Holds the "any use to the teams… we want it everywhere" line.  */
.sp-hero-callout {
  margin: 0 0 22px;
  padding: 18px 22px;
  border-left: 3px solid var(--orange);
  background: rgba(255, 106, 26, 0.06);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0.005em;
  position: relative;
  max-width: 640px;
  text-wrap: pretty;
}
.sp-hero-callout::before {
  content: "▸ THE OFFER";
  position: absolute;
  top: -8px;
  left: 14px;
  background: var(--bg);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--amber);
}
/* Match .lb-lede-mark on the about page hero — orange + 2px underline
   sat just below the baseline so the phrase reads as a marked-up term
   inside the body copy, not a separate UI accent. */
.sp-hero-callout .em {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sp-hero-callout .line {
  display: inline;
  color: var(--ink-dim);
}

.sp-hero-prose {
  max-width: 600px;
  margin: 0 0 26px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.sp-hero-prose strong { color: var(--ink); font-weight: 600; }

/* Hero CTA — compact amber echo of the bottom .sp-cta-card.
   Same corner-bracket chrome, but yellow-toned and ending in the
   email form (which stands in for the bottom card's pill action).
   margin-top:auto pushes this to the bottom of the flex stack so
   its lower edge aligns with the DemandReadout's lower edge. */
.sp-hero-cta-card {
  position: relative;
  max-width: 640px;
  margin-top: auto;
  padding: 18px 22px 18px;
  /* low-opacity border so it reads as a soft frame and doesn't fight
     the solid amber corner brackets where the two overlap. */
  border: 1px solid rgba(255, 176, 26, 0.4);
  /* lighter than the stats card so the CTA reads as a foreground action
     rather than another data panel. warm amber wash on a slightly
     translucent base. */
  background: linear-gradient(180deg, rgba(40, 28, 12, 0.55), rgba(28, 20, 9, 0.7));
  isolation: isolate;
}
.sp-hero-cta-card::before,
.sp-hero-cta-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--amber);
  pointer-events: none;
}
.sp-hero-cta-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.sp-hero-cta-card::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.sp-hero-cta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sp-hero-cta-title {
  font-family: var(--display);
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: 0.005em;
  line-height: 0.98;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sp-hero-cta-title .accent {
  color: var(--amber);
}

/* Re-skin the embedded .hero-notify so its corners, border, and submit
   button switch from orange to amber to match the card chrome. */
.sp-hero-cta-card .hero-notify {
  margin: 0;
  max-width: 100%;
  border-color: rgba(255, 176, 26, 0.55);
  background: rgba(8, 6, 3, 0.6);
}
.sp-hero-cta-card .hero-notify::before,
.sp-hero-cta-card .hero-notify::after {
  border-color: var(--amber);
}
.sp-hero-cta-card .hn-input {
  caret-color: var(--amber);
}
.sp-hero-cta-card .hn-input:focus {
  background: rgba(255, 176, 26, 0.06);
}
.sp-hero-cta-card .hn-submit {
  background: var(--amber);
  color: #1a1308;
  border-left-color: rgba(0, 0, 0, 0.25);
}
.sp-hero-cta-card .hn-submit:hover {
  background: #ffc44a;
  box-shadow: 0 0 30px rgba(255, 176, 26, 0.5);
}

.sp-hero-side {
  min-width: 0;
  position: sticky;
  top: 24px;
}

/* ── Demand Readout (right column of hero) ───────────────────────
   Replaces the old verified+projected double-card. One terminal-styled
   panel, three signals: 4× oversubscribed (headline), demand×supply
   meters (teams 25%, audience 100% maxed), €6k all-in spend, ask. */
.sp-demand {
  position: relative;
  border: 1px solid var(--rule-strong);
  background: linear-gradient(180deg, rgba(13,9,7,0.92), rgba(5,4,3,0.96));
  font-family: var(--mono);
  isolation: isolate;
}
.sp-demand::before,
.sp-demand::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--orange);
  pointer-events: none;
}
.sp-demand::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.sp-demand::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.sp-demand-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--amber);
  text-transform: uppercase;
}
.sp-demand-bar .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 10px;
  letter-spacing: 0.32em;
}
.sp-demand-bar .badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

/* Headline 4× — the demand fact, biggest piece of the card. */
.sp-demand-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 22px 18px;
  border-bottom: 1px dashed var(--rule);
  position: relative;
}
.sp-demand-headline::before {
  content: "";
  position: absolute;
  left: 22px; right: 22px; bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,106,26,0.5), transparent);
}
.sp-demand-headline-num {
  font-family: var(--display);
  font-size: clamp(64px, 7vw, 88px);
  line-height: 0.9;
  color: var(--orange);
  letter-spacing: -0.01em;
  text-shadow: 0 0 24px rgba(255, 106, 26, 0.32);
}
.sp-demand-headline-num .x {
  font-size: 0.72em;
  color: var(--orange);
  margin-left: 2px;
  vertical-align: 0.05em;
}
.sp-demand-headline-lbl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-demand-headline-lbl .top {
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
}
/* Site convention for stat-card body text is mono (see .spec-block,
   .sp-fr-row), so descriptive sub-lines stay mono — only the hero
   numerals use display. */
.sp-demand-headline-lbl .sub {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-transform: none;
}

.sp-demand-section {
  padding: 14px 22px 8px;
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* Demand × supply meter rows.  The fill is the visual story:
   teams = 25% (4× under-supplied), audience = 100% (capacity maxed). */
.sp-demand-row {
  padding: 8px 22px 14px;
}
.sp-demand-row + .sp-demand-row {
  border-top: 1px dotted var(--rule-faint);
  padding-top: 14px;
}
.sp-demand-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.sp-demand-row-head .k {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.sp-demand-row-head .v {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 700;
}
.sp-demand-row-head .v .vsub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 400;
  text-transform: uppercase;
}

.sp-demand-meter {
  position: relative;
  height: 14px;
  background: rgba(245, 197, 24, 0.06);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.sp-demand-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(255,106,26,0.55), var(--orange));
  box-shadow: inset 0 0 0 1px rgba(255,106,26,0.4),
              0 0 16px rgba(255, 106, 26, 0.32);
  animation: sp-demand-fill 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.sp-demand-meter-fill.maxed {
  background: linear-gradient(90deg, var(--orange), var(--orange-hot, #ff8a3a));
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.5),
              0 0 24px rgba(255, 106, 26, 0.55);
}
@keyframes sp-demand-fill {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.sp-demand-meter-grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    transparent 0 calc(5% - 1px),
    rgba(0, 0, 0, 0.45) calc(5% - 1px) 5%
  );
  pointer-events: none;
}

.sp-demand-row-foot {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink);
  text-transform: uppercase;
}
.sp-demand-row-foot .dim { color: var(--ink-mute); }
.sp-demand-row-foot .hot {
  color: var(--orange);
  text-shadow: 0 0 10px rgba(255, 106, 26, 0.45);
}

/* Total spend block — the punchline beneath the meters. */
.sp-demand-spend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  margin: 4px 22px 18px;
  padding: 16px 18px;
  border: 1px dashed var(--amber-dim);
  background: rgba(245, 197, 24, 0.04);
  position: relative;
}
.sp-demand-spend::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.5);
}
.sp-demand-spend-num {
  font-family: var(--display);
  font-size: 38px;
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--amber);
  text-shadow: 0 0 16px rgba(245, 197, 24, 0.35);
}
.sp-demand-spend-num .cur {
  color: var(--amber);
  opacity: 0.85;
  margin-right: 1px;
}
.sp-demand-spend-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-demand-spend-body .lbl {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
}
.sp-demand-spend-body .copy {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

/* Closer ask — explicit, indented, mirrors callout chrome. */
.sp-demand-ask {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 22px;
  border-top: 1px solid var(--rule);
  background: rgba(255, 106, 26, 0.05);
  font-family: var(--mono);
}
.sp-demand-ask .arrow {
  color: var(--orange);
  font-size: 14px;
  line-height: 1.3;
  padding-top: 1px;
}
.sp-demand-ask strong {
  display: block;
  font-size: 12px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sp-demand-ask .sub {
  display: block;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

/* ── Field Report legacy (kept for shared hero patterns) ───────── */
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sp-fr-card {
  position: relative;
  border: 1px solid var(--rule-strong);
  background: linear-gradient(180deg, rgba(13,9,7,0.85), rgba(5,4,3,0.95));
}
.sp-fr-card::before, .sp-fr-card::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--orange);
}
.sp-fr-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.sp-fr-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.sp-fr-card.amber { border-color: var(--amber-dim); }
.sp-fr-card.amber::before, .sp-fr-card.amber::after { border-color: var(--amber); }

.sp-fr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--amber);
  text-transform: uppercase;
}
.sp-fr-card.amber .sp-fr-bar { border-bottom-color: rgba(245,197,24,0.18); }
.sp-fr-bar .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--green);
}
.sp-fr-bar .badge .dot {
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
}
.sp-fr-card.amber .sp-fr-bar .badge { color: var(--amber); }
.sp-fr-card.amber .sp-fr-bar .badge .dot {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}

.sp-fr-rows {
  font-family: var(--mono);
}
.sp-fr-row {
  display: grid;
  grid-template-columns: 1fr auto 16px;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px dotted var(--rule-faint);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 12px;
}
.sp-fr-row:last-of-type { border-bottom: none; }
.sp-fr-row:hover { background: rgba(255, 106, 26, 0.04); }
.sp-fr-card.amber .sp-fr-row:hover { background: rgba(245, 197, 24, 0.04); }

.sp-fr-row .k {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.sp-fr-row .v {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-family: var(--display);
  letter-spacing: 0.06em;
  line-height: 1;
}
.sp-fr-row .v.accent { color: var(--orange); }
.sp-fr-row .v.amber { color: var(--amber); }
.sp-fr-row .v.locked { color: var(--green); }
.sp-fr-row .v.pending {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--amber);
  font-weight: 400;
  border: 1px dashed var(--amber-dim);
  padding: 3px 8px;
  background: rgba(245, 197, 24, 0.04);
}
.sp-fr-row .caret {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  transition: transform 0.18s, color 0.18s;
}
.sp-fr-row.open .caret { transform: rotate(90deg); color: var(--orange); }
.sp-fr-card.amber .sp-fr-row.open .caret { color: var(--amber); }

.sp-fr-detail {
  grid-column: 1 / -1;
  padding: 14px 4px 4px;
  border-top: 1px dashed var(--rule-faint);
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  line-height: 1.7;
  display: none;
}
.sp-fr-row.open .sp-fr-detail { display: block; }
.sp-fr-detail .institution {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
}
.sp-fr-detail .institution .num { color: var(--orange); margin-left: 6px; font-weight: 700; }
.sp-fr-card.amber .sp-fr-detail .institution .num { color: var(--amber); }
.sp-fr-detail .platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.sp-fr-detail .platform {
  padding: 8px 10px;
  border: 1px solid var(--rule);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-fr-detail .platform .pname { color: var(--ink-mute); }
.sp-fr-detail .platform .pval {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--orange);
}
.sp-fr-card.amber .sp-fr-detail .platform .pval { color: var(--amber); }

.sp-fr-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.sp-fr-card.amber .sp-fr-foot { border-top-color: rgba(245,197,24,0.18); }

/* ── Section 03: CRACKED #1 — full-bleed diptych + scrubber ────── */
.sp-cracked {
  position: relative;
  margin: 0;
  background: #000;
  overflow: hidden;
}
.sp-cracked .sp-coord {
  background: rgba(0,0,0,0.6);
  padding: 14px 40px;
  border-bottom: 1px dashed rgba(255,106,26,0.25);
  color: rgba(245,197,24,0.7);
}
.sp-cracked-stage {
  position: relative;
  width: 100%;
  height: clamp(440px, 70vh, 720px);
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  isolation: isolate;
}
.sp-cracked-frame {
  position: relative;
  overflow: hidden;
  background: #000;
}
.sp-cracked-frame .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  filter: contrast(1.05) saturate(1.05) brightness(0.92);
}
.sp-cracked-frame .img.active { opacity: 1; }
.sp-cracked-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px);
  pointer-events: none;
  z-index: 2;
}
.sp-cracked-frame .frame-tag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: rgba(245,197,24,0.85);
  background: rgba(0,0,0,0.6);
  padding: 5px 9px;
  border: 1px solid rgba(245,197,24,0.35);
  text-transform: uppercase;
}
.sp-cracked-frame.right .frame-tag { left: auto; right: 16px; }

.sp-cracked-divider {
  position: relative;
  background: var(--orange);
  box-shadow: 0 0 20px rgba(255,106,26,0.6);
}
.sp-cracked-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(0,0,0,0.4) 8px 12px);
}

.sp-cracked-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 36px 40px 100px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85) 60%);
  pointer-events: none;
}
.sp-cracked-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sp-cracked-line {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--ink);
  text-transform: uppercase;
  max-width: 1100px;
}
.sp-cracked-line .em { color: var(--orange); }

/* Scrubber */
.sp-cracked-scrub {
  position: absolute;
  left: 40px; right: 40px;
  bottom: 36px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(245,197,24,0.85);
  text-transform: uppercase;
  pointer-events: auto;
}
.sp-cracked-scrub .label { color: var(--ink-mute); }
.sp-cracked-scrub .track {
  flex: 1;
  position: relative;
  height: 26px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.sp-cracked-scrub .track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: rgba(245,197,24,0.3);
}
.sp-cracked-scrub .ticks {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.sp-cracked-scrub .tick {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(245,197,24,0.45);
  background: rgba(0,0,0,0.6);
  cursor: pointer;
  transform: rotate(45deg);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.sp-cracked-scrub .tick:hover { border-color: var(--orange); }
.sp-cracked-scrub .tick.active {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 10px rgba(255,106,26,0.6);
}
.sp-cracked-scrub .counter { color: var(--orange); min-width: 64px; text-align: right; }

/* Mobile */
@media (max-width: 1080px) {
  .sp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 36px; }
  .sp-hero-side { position: static; }
}
@media (max-width: 900px) {
  .sp-hero { padding: 64px 20px 56px; }
  .sp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .sp-hero h1 { font-size: clamp(44px, 11vw, 72px); margin-bottom: 18px; }
  .sp-hero-callout { font-size: 15px; padding: 16px 18px; margin-bottom: 18px; }
  .sp-hero-prose { font-size: 15px; margin-bottom: 22px; }
  .sp-hero-cta-meta { font-size: 9px; gap: 8px; }
  .sp-coord { padding: 16px 20px 8px; font-size: 9px; gap: 10px; }
  .sp-demand-headline { grid-template-columns: 1fr; gap: 10px; padding: 18px 18px 16px; }
  .sp-demand-headline-num { font-size: 64px; }
  .sp-demand-row, .sp-demand-section { padding-left: 18px; padding-right: 18px; }
  .sp-demand-spend { margin-left: 18px; margin-right: 18px; padding: 14px 16px; gap: 14px; }
  .sp-demand-spend-num { font-size: 32px; }
  .sp-demand-ask { padding: 14px 18px; }
  .sp-cracked-overlay { padding: 24px 20px 80px; }
  .sp-cracked-scrub { left: 20px; right: 20px; bottom: 24px; }
  .sp-cracked-stage { grid-template-columns: 1fr; grid-template-rows: 1fr 4px 1fr; height: clamp(560px, 90vh, 800px); }
  .sp-cracked-divider { height: 4px; width: auto; }
  .sp-fr-detail .platforms { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   PASS B — Warm #1 + Contribution Manifest + Activation Surface
   ================================================================ */

/* ── Section 04: WARM #1 — quieter, photo-led ─────────────────── */
.sp-warm {
  position: relative;
  padding: 120px var(--page-side) 96px;
  background: linear-gradient(180deg, #050403, #0c0905 50%, #050403);
}
.sp-warm-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 36px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.sp-warm-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #000;
  border: 1px solid rgba(245,197,24,0.25);
  overflow: hidden;
}
.sp-warm-photo .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.02) saturate(0.95) brightness(0.96);
}
.sp-warm-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5));
  pointer-events: none;
}
.sp-warm-photo .caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(245,197,24,0.85);
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  padding: 5px 9px;
  border: 1px solid rgba(245,197,24,0.3);
}
.sp-warm-prose {
  max-width: 560px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-dim);
}
.sp-warm-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sp-warm-title {
  font-family: var(--display);
  font-size: clamp(42px, 4.5vw, 68px);
  letter-spacing: 0.005em;
  line-height: 0.96;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 28px;
}
.sp-warm-title .accent { color: var(--amber); }
.sp-warm-prose p { margin: 0 0 16px; }
.sp-warm-prose strong { color: var(--ink); font-weight: 600; }

.sp-warm-pullquote {
  margin: 28px 0;
  padding: 20px 0 20px 24px;
  border-left: 2px solid var(--amber);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--ink);
  text-transform: uppercase;
}
.sp-warm-pullquote .em { color: var(--amber); }
.sp-warm-pullquote .source {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 400;
}

.sp-warm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed rgba(245,197,24,0.2);
}
.sp-warm-stat {
  padding: 14px 12px;
  border: 1px solid rgba(245,197,24,0.25);
  background: rgba(245,197,24,0.03);
  text-align: center;
  font-family: var(--mono);
}
.sp-warm-stat .v {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 4px;
}
.sp-warm-stat .k {
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ── Sections 05 + 06: Inventory tables (manifest pattern) ────── */
.sp-inv {
  padding: 96px var(--page-side);
  background: var(--bg);
}
.sp-inv.first { padding-top: 96px; }
.sp-inv-head {
  max-width: 1280px;
  margin: 0 auto 40px;
}
.sp-inv-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sp-inv-title {
  font-family: var(--display);
  font-size: clamp(48px, 5.5vw, 84px);
  letter-spacing: 0.005em;
  line-height: 0.94;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.sp-inv-title .accent { color: var(--orange); }
.sp-inv-sub {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 720px;
}

.sp-inv-card {
  position: relative;
  max-width: 1280px;
  margin: 0 auto 28px;
  border: 1px solid var(--rule-strong);
  background: linear-gradient(180deg, rgba(13,9,7,0.85), rgba(5,4,3,0.95));
}
.sp-inv-card::before, .sp-inv-card::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--orange);
}
.sp-inv-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.sp-inv-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.sp-inv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--amber);
  text-transform: uppercase;
}
.sp-inv-bar .meta {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--ink-mute);
}
.sp-inv-bar .meta .live {
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-inv-bar .meta .live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.sp-inv-cols {
  display: grid;
  grid-template-columns: 320px 1fr;
  font-family: var(--mono);
}
.sp-inv-colhead {
  padding: 12px 22px;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-bottom: 1px dashed var(--rule-faint);
}
.sp-inv-colhead.right { border-left: 1px dashed var(--rule-faint); }

.sp-inv-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  border-bottom: 1px dotted var(--rule-faint);
  cursor: pointer;
  transition: background 0.15s;
}
.sp-inv-row:last-child { border-bottom: none; }
.sp-inv-row:hover { background: rgba(255, 106, 26, 0.04); }
.sp-inv-row.open { background: rgba(255, 106, 26, 0.06); }

.sp-inv-cell {
  padding: 16px 22px;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sp-inv-cell.examples {
  color: var(--ink-dim);
  border-left: 1px dashed var(--rule-faint);
  font-size: 12px;
}
.sp-inv-cell .arrow {
  color: var(--orange);
  font-size: 11px;
  flex-shrink: 0;
}
.sp-inv-cell .icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--orange);
}
.sp-inv-cell .label {
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}

.sp-inv-detail {
  grid-column: 1 / -1;
  padding: 14px 22px 18px;
  background: rgba(0,0,0,0.5);
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--green);
  display: none;
  letter-spacing: 0.02em;
}
.sp-inv-row.open .sp-inv-detail { display: block; }
.sp-inv-detail .prompt { color: var(--orange); margin-right: 8px; }
.sp-inv-detail .dim { color: var(--ink-mute); }

/* Subsections (for activation: physical / digital / talent) */
.sp-inv-sub-section {
  padding: 14px 22px;
  border-top: 1px solid var(--rule);
  background: rgba(255,106,26,0.04);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--orange);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-inv-sub-section .meta {
  color: var(--ink-mute);
  letter-spacing: 0.28em;
  font-size: 10px;
}

/* Closer line for the manifest */
.sp-inv-callout {
  max-width: 1280px;
  margin: 28px auto 0;
  padding: 22px 28px;
  border: 1px dashed var(--orange);
  background: rgba(255, 106, 26, 0.06);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: 0.02em;
  position: relative;
}
.sp-inv-callout::before {
  content: "▸ THE OFFER";
  position: absolute;
  top: -10px; left: 18px;
  background: var(--bg);
  padding: 0 10px;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--amber);
}
.sp-inv-callout .em { color: var(--orange); font-weight: 700; }

/* Suggested cash bands (smaller table under manifest) */
.sp-bands {
  max-width: 1280px;
  margin: 28px auto 0;
  border: 1px solid rgba(245,197,24,0.3);
  background: rgba(245,197,24,0.04);
}
.sp-bands-bar {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(245,197,24,0.18);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--amber);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.sp-bands-bar .meta { color: var(--ink-mute); letter-spacing: 0.28em; }
.sp-bands-rows { font-family: var(--mono); }
.sp-bands-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 12px 20px;
  border-bottom: 1px dotted rgba(245,197,24,0.12);
  font-size: 12px;
  align-items: center;
}
.sp-bands-row:last-of-type { border-bottom: none; }
.sp-bands-row .b {
  color: var(--amber);
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
}
.sp-bands-row .v {
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.sp-bands-foot {
  padding: 12px 20px;
  border-top: 1px solid rgba(245,197,24,0.18);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.sp-bands-foot .arrow { color: var(--amber); margin-right: 8px; }

/* Big closer between sections 05/06 */
.sp-closer {
  max-width: 1280px;
  margin: 96px auto 0;
  padding: 0 40px;
  text-align: center;
}
.sp-closer-line {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  display: inline-block;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--orange);
  margin-bottom: 18px;
}
.sp-closer-line .em { color: var(--orange); }
.sp-closer-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .sp-warm { padding: 80px 20px 64px; }
  .sp-warm-grid { grid-template-columns: 1fr; gap: 36px; }
  .sp-warm-stats { grid-template-columns: 1fr; }
  .sp-inv { padding: 64px 20px; }
  .sp-inv-cols { grid-template-columns: 1fr; }
  .sp-inv-colhead.right { display: none; }
  .sp-inv-cell.examples { border-left: none; padding-top: 0; padding-bottom: 16px; color: var(--ink-mute); font-size: 11px; }
  .sp-closer { margin-top: 64px; padding: 0 20px; }
}


/* ================================================================
   PASS C — Cracked #2 + Warm #2 + Patch + CTA
   ================================================================ */

/* ── Section 07: CRACKED #2 — punctuation hit ─────────────────── */
.sp-cracked2 {
  position: relative;
  margin-top: 96px;
  background: #000;
  overflow: hidden;
  height: clamp(380px, 60vh, 540px);
}
.sp-cracked2 .img {
  position: absolute;
  inset: 0;
  background-image: url('assets/photo-arena-wide.png');
  background-size: cover;
  background-position: center;
  filter: contrast(1.08) saturate(1.1) brightness(0.78);
}
.sp-cracked2::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.92) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px);
  pointer-events: none;
}
.sp-cracked2 .sp-coord {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.65);
  padding: 14px 40px;
  border-bottom: 1px dashed rgba(255,106,26,0.3);
  color: rgba(245,197,24,0.7);
}
.sp-cracked2-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 36px 40px 40px;
}
.sp-cracked2-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 18px;
  text-align: center;
}
.sp-cracked2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}
.sp-cracked2-stat {
  padding: 18px 16px;
  border: 1px solid rgba(245,197,24,0.4);
  background: rgba(0,0,0,0.55);
  text-align: center;
  font-family: var(--mono);
  position: relative;
}
.sp-cracked2-stat::before, .sp-cracked2-stat::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--orange);
}
.sp-cracked2-stat::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.sp-cracked2-stat::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.sp-cracked2-stat .v {
  display: block;
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.sp-cracked2-stat .v.em { color: var(--orange); }
.sp-cracked2-stat .k {
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--amber);
  text-transform: uppercase;
}

/* ── Section 08: WARM #2 — counterpart photograph ─────────────── */
.sp-warm2 {
  position: relative;
  background: #000;
  overflow: hidden;
  height: clamp(440px, 70vh, 640px);
}
.sp-warm2 .img {
  position: absolute;
  inset: 0;
  background-image: url('assets/photo-controller.png');
  background-size: cover;
  background-position: center;
  filter: contrast(1.02) saturate(0.85) brightness(0.85);
}
.sp-warm2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.sp-warm2 .sp-coord {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.6);
  padding: 14px 40px;
  border-bottom: 1px dashed rgba(245,197,24,0.3);
}
.sp-warm2-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 36px 40px 56px;
  text-align: center;
}
.sp-warm2-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sp-warm2-line {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--ink);
  text-transform: uppercase;
  max-width: 1100px;
  margin: 0 auto;
}
.sp-warm2-line .em { color: var(--amber); }
.sp-warm2-rule {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--amber);
  margin: 24px auto 0;
}

/* ── Section 09: Patch context ────────────────────────────────── */
.sp-patch {
  padding: 96px var(--page-side);
  background: var(--bg);
}
.sp-patch-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 36px;
  border: 1px solid var(--rule);
  background: rgba(13,9,7,0.6);
  font-family: var(--sans);
  position: relative;
}
.sp-patch-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sp-patch-prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0;
}
.sp-patch-prose strong { color: var(--ink); font-weight: 600; }

/* CAD-style leader line linking words */
.sp-patch-leader {
  display: inline-block;
  position: relative;
  padding: 0 4px;
  color: var(--orange);
  border-bottom: 1px dashed var(--orange);
}

.sp-patch-meta {
  display: flex;
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule-faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.sp-patch-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sp-patch-meta .dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
}

/* ── Section 06: Return on Brand — visual showcase ─────────────── */
.sp-showcase {
  padding: 96px var(--page-side) 96px;
  position: relative;
}
.sp-showcase-head {
  max-width: 1280px;
  margin: 0 auto 40px;
}
.sp-showcase-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--orange);
  text-transform: uppercase;
  display: inline-block;
}
.sp-showcase-title {
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin: 14px 0 22px;
  font-weight: 800;
  text-transform: uppercase;
}
.sp-showcase-title .accent { color: var(--orange); }
.sp-showcase-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 640px;
}
.sp-showcase-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.sp-showcase-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #06050a;
  border: 1px solid var(--rule);
  overflow: hidden;
  isolation: isolate;
}
.sp-showcase-tile-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.sp-showcase-tile:hover .sp-showcase-tile-img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.08);
}
.sp-showcase-tile-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,5,10,0.0) 30%, rgba(6,5,10,0.94) 95%),
    radial-gradient(ellipse at top right, rgba(255,106,26,0.08), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.sp-showcase-tile-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--orange);
  pointer-events: none;
  z-index: 3;
}
.sp-showcase-tile-corner.tl { top: 10px; left: 10px;  border-right: none; border-bottom: none; }
.sp-showcase-tile-corner.tr { top: 10px; right: 10px; border-left: none;  border-bottom: none; }
.sp-showcase-tile-corner.bl { bottom: 10px; left: 10px;  border-right: none; border-top: none; }
.sp-showcase-tile-corner.br { bottom: 10px; right: 10px; border-left: none;  border-top: none; }
.sp-showcase-tile-label {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--orange);
  background: rgba(6,5,10,0.78);
  border: 1px solid rgba(255,106,26,0.45);
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.sp-showcase-tile-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}
.sp-showcase-tile-body {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  z-index: 3;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.sp-showcase-foot {
  max-width: 1280px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border: 1px dashed var(--rule);
  background: rgba(13,9,7,0.5);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-showcase-foot .arrow { color: var(--orange); }

@media (max-width: 900px) {
  .sp-showcase { padding: 64px 20px; }
  .sp-showcase-grid { grid-template-columns: 1fr; gap: 16px; }
  .sp-showcase-tile-body { font-size: 12px; bottom: 18px; left: 18px; right: 18px; }
  .sp-showcase-tile-label { top: 14px; right: 14px; font-size: 9px; padding: 5px 8px; }
}

/* ── Section 10: CTA · two doors ──────────────────────────────── */
.sp-cta {
  padding: 96px var(--page-side) 120px;
  background: linear-gradient(180deg, var(--bg) 0%, #0a0806 50%, var(--bg) 100%);
}
.sp-cta-head {
  max-width: 1280px;
  margin: 0 auto 36px;
}
.sp-cta-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sp-cta-title {
  font-family: var(--display);
  font-size: clamp(52px, 6vw, 96px);
  letter-spacing: 0.005em;
  line-height: 0.92;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}
.sp-cta-title .accent { color: var(--orange); }

.sp-cta-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sp-cta-card {
  position: relative;
  padding: 36px 32px 32px;
  background: linear-gradient(180deg, rgba(13,9,7,0.85), rgba(5,4,3,0.95));
  text-decoration: none;
  display: block;
  transition: transform 0.18s, background 0.18s;
}
.sp-cta-card.primary { border: 1px solid var(--orange); }
.sp-cta-card.secondary { border: 1px solid var(--amber-dim); }
.sp-cta-card::before, .sp-cta-card::after {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--orange);
}
.sp-cta-card.secondary::before, .sp-cta-card.secondary::after { border-color: var(--amber); }
.sp-cta-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.sp-cta-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.sp-cta-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(20,12,8,0.95), rgba(10,7,5,1));
}

.sp-cta-card .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-cta-card.primary .label .num { color: var(--orange); }
.sp-cta-card .door {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: 0.005em;
  line-height: 0.96;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sp-cta-card.primary .door .accent { color: var(--orange); }
.sp-cta-card.secondary .door .accent { color: var(--amber); }
.sp-cta-card .desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: 22px;
}
.sp-cta-card .action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 14px 18px;
  border: 1px solid var(--orange);
  color: var(--ink);
  background: var(--orange);
  color: var(--bg);
  transition: background 0.15s;
}
.sp-cta-card.primary .action { background: var(--orange); color: var(--bg); border-color: var(--orange); }
.sp-cta-card.primary:hover .action { background: var(--orange-hot); }
.sp-cta-card.secondary .action {
  background: transparent;
  color: var(--amber);
  border-color: var(--amber);
}
.sp-cta-card.secondary:hover .action {
  background: var(--amber);
  color: var(--bg);
}
.sp-cta-card .action .arrow { font-size: 14px; }

.sp-cta-foot {
  max-width: 1280px;
  margin: 28px auto 0;
  padding: 18px 24px;
  border: 1px dashed var(--rule);
  background: rgba(13,9,7,0.5);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sp-cta-foot .arrow { color: var(--orange); }
.sp-cta-foot .pipe { color: var(--ink-faint); }

@media (max-width: 900px) {
  .sp-cracked2-stats { grid-template-columns: 1fr 1fr; }
  .sp-cracked2-overlay { padding: 24px 20px 24px; }
  .sp-warm2-overlay { padding: 24px 20px 36px; }
  .sp-patch { padding: 64px 20px; }
  .sp-patch-card { padding: 24px 22px; }
  .sp-cta { padding: 64px 20px 96px; }
  .sp-cta-grid { grid-template-columns: 1fr; }
}