/* ============================================================
   FRAME V2 — light.css
   Light/dark rhythm overrides. Re-themes selected sections onto
   the Clearspan light surface so the page reads as alternating
   "chapters" (the brand's light logo tier + institutional calm),
   instead of one continuous dark slab.
     · STACK (architecture / disintegrate)  → light blueprint field
     · CONTROL (compare table)              → light + oil/gold legacy accent
     · LEADERSHIP (quotes)                  → light authority beat
   All colour comes from the bound FRAME design-system tokens.
   ============================================================ */

/* ============================================================
   STACK — the architecture is the mark, on a light field
   ============================================================ */
.stack--light { background: var(--frame-clearspan); }

/* faint blueprint grid — distinguishes the light architecture
   chapter from the light Problem section above it */
.stack--light .stack__pin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(17,20,24,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,20,24,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(72% 60% at 50% 46%, #000 0%, transparent 100%);
          mask-image: radial-gradient(72% 60% at 50% 46%, #000 0%, transparent 100%);
}
.stack--light .stack__head,
.stack--light .stack__stage { position: relative; z-index: 1; }

/* head */
.stack--light .h2 { color: var(--frame-ironworks); }
.stack--light .accent { color: var(--frame-deepwater); }
.stack--light .kicker { color: var(--frame-deepwater); }
.stack--light .kicker .idx { color: var(--frame-foundry); }

/* the four chevron layers — ramp re-tuned to read on a light surface
   (mid-blue at the top → ballast at the base) with cool extruded edges */
.stack--light .mk--3 path { fill: #5E94C4; }
.stack--light .mk--2 path { fill: #3C79AC; }
.stack--light .mk--1 path { fill: #205F8C; }
.stack--light .mk--0 path { fill: var(--frame-ballast); }

.stack--light .mk--3 { filter:
  drop-shadow(0 1px 0 #3f6f99) drop-shadow(0 2px 0 #3f6f99) drop-shadow(0 3px 0 #3f6f99)
  drop-shadow(0 4px 0 #35608a) drop-shadow(0 12px 16px rgba(11,53,89,.20)); }
.stack--light .mk--2 { filter:
  drop-shadow(0 1px 0 #2b5e88) drop-shadow(0 2px 0 #2b5e88) drop-shadow(0 3px 0 #2b5e88)
  drop-shadow(0 4px 0 #234f73) drop-shadow(0 12px 16px rgba(11,53,89,.22)); }
.stack--light .mk--1 { filter:
  drop-shadow(0 1px 0 #1a4f76) drop-shadow(0 2px 0 #1a4f76) drop-shadow(0 3px 0 #1a4f76)
  drop-shadow(0 4px 0 #143f5e) drop-shadow(0 12px 16px rgba(11,53,89,.24)); }
.stack--light .mk--0 { filter:
  drop-shadow(0 1px 0 #082b47) drop-shadow(0 2px 0 #082b47) drop-shadow(0 3px 0 #082b47)
  drop-shadow(0 4px 0 #061f33) drop-shadow(0 14px 20px rgba(11,53,89,.28)); }

/* disintegrated state — signal-blue glow that still reads on light */
.stack--light .mark.is-open .mk--2,
.stack--light .mark.is-open .mk--1 { filter:
  drop-shadow(0 1px 0 #234f73) drop-shadow(0 2px 0 #234f73) drop-shadow(0 3px 0 #234f73)
  drop-shadow(0 4px 0 #1c425f) drop-shadow(0 0 22px rgba(15,76,129,.45)) drop-shadow(0 12px 18px rgba(11,53,89,.22)); }

/* centre identity lockup — mask the mark behind it with light, ink the wordmark */
.stack--light .mcore::before {
  background: radial-gradient(58% 62% at 50% 44%, rgba(243,244,245,.94), rgba(243,244,245,.62) 55%, rgba(243,244,245,0) 100%);
}
.stack--light .mcore__logo {
  filter: drop-shadow(0 0 18px rgba(243,244,245,.95)) drop-shadow(0 1px 6px rgba(17,20,24,.18));
}
.stack--light .mcore__logo svg path { fill: var(--frame-ironworks); }
.stack--light .mcore__lab { color: var(--frame-deepwater); }
.stack--light .mcore__meta { color: var(--frame-forge); }

/* annotation callouts */
.stack--light .mlab__name { color: var(--frame-ironworks); }
.stack--light .mlab__lab { color: var(--frame-foundry); }
.stack--light .mlab__meta { color: var(--frame-foundry); }
.stack--light .mlab__rule { background: rgba(17,20,24,.22); }
.stack--light .mlab__rule::after { background: var(--frame-deepwater); }

/* foot caption + its fade-in gradient (was fading to ink) */
.stack--light .stack__foot { color: var(--frame-foundry); }
.stack--light .stack__foot b { color: var(--frame-deepwater); }
.stack--light .stack__foot::before {
  background: linear-gradient(180deg, rgba(243,244,245,0), rgba(243,244,245,.86) 42%, var(--frame-clearspan) 100%);
}

/* mobile static layout (≤880) */
@media (max-width: 880px) {
  .stack--light .smark { filter: drop-shadow(0 14px 30px rgba(11,53,89,.25)); }
  .stack--light .smark .sl3 { fill: #5E94C4; }
  .stack--light .smark .sl2 { fill: #3C79AC; }
  .stack--light .smark .sl1 { fill: #205F8C; }
  .stack--light .smark .sl0 { fill: var(--frame-ballast); }
  .stack--light .slayer { background: var(--frame-white); border-color: var(--frame-scaffold); }
  .stack--light .slayer__lab { color: var(--frame-foundry); }
  .stack--light .slayer__name { color: var(--frame-ironworks); }
  .stack--light .slayer__meta { color: var(--frame-foundry); }
  /* the FRAME layer keeps its brand-blue fill — reads fine on light */
}

/* ============================================================
   CONTROL — compare table on light, with the legacy column
   carried in the secondary oil/gold warm tones (tradfi → on-chain
   storytelling; secondary palette used for meaning, not decoration)
   ============================================================ */
.section--light .compare { border-color: var(--frame-scaffold); }
.section--light .compare__head {
  background: var(--frame-coldroll); border-bottom-color: var(--frame-scaffold);
}
.section--light .compare__head .c-frame {
  color: var(--frame-deepwater); background: rgba(15,76,129,.08);
  border-left-color: var(--frame-scaffold);
}
.section--light .compare__head .c-legacy {
  color: var(--frame-oil); border-left-color: var(--frame-scaffold);
}
.section--light .compare__row { border-bottom-color: var(--frame-scaffold); }
.section--light .compare__row:hover { background: rgba(17,20,24,.025); }
.section--light .compare__row .m { color: var(--frame-forge); }
.section--light .compare__row .frame-v {
  color: var(--frame-ironworks); background: rgba(15,76,129,.06);
  border-left-color: var(--frame-scaffold);
}
.section--light .compare__row .frame-v .material-symbols-sharp { color: var(--frame-deepwater); }
.section--light .compare__row .legacy-v {
  color: var(--frame-oil); border-left-color: var(--frame-scaffold);
}
.section--light .compare__row .legacy-v .material-symbols-sharp { color: var(--frame-gold); }

/* ============================================================
   LEADERSHIP — quotes on light (institutional authority)
   ============================================================ */
.section--light .leader { border-top-color: var(--frame-scaffold); }
.section--light .leader::before { -webkit-text-stroke-color: rgba(15,76,129,.32); }
.section--light .leader__quote { color: var(--frame-ironworks); }
.section--light .leader__quote .accent { color: var(--frame-deepwater); }
.section--light .leader__avatar {
  background: var(--frame-coldroll); border-color: var(--frame-scaffold); color: var(--frame-foundry);
}
.section--light .leader__name { color: var(--frame-ironworks); }
.section--light .leader__role { color: var(--frame-foundry); }

/* ============================================================
   PROTOCOL — light variant (marquee + cut pillars on Clearspan)
   ============================================================ */
.section--light .proto__marquee span {
  -webkit-text-stroke: 1.5px rgba(17,20,24,.2); color: transparent;
}
.section--light .proto__marquee span.solid { color: var(--frame-deepwater); -webkit-text-stroke: 0; }
.section--light .pillars { border-color: var(--frame-scaffold); }
.section--light .pillar {
  background: #FFFFFF; border-right-color: var(--frame-scaffold);
}
.section--light .pillar::before { background: var(--frame-coldroll); }
.section--light .pillar__num {
  -webkit-text-stroke: 1px rgba(15,76,129,.45); color: transparent;
}
.section--light .pillar:hover .pillar__num { color: var(--frame-deepwater); -webkit-text-stroke: 1px var(--frame-deepwater); }
.section--light .pillar h3 { color: var(--frame-ironworks); }
.section--light .pillar p { color: var(--frame-forge); }
.section--light .pillar__ico { color: var(--frame-foundry); }
.section--light .pillar:hover .pillar__ico { color: var(--frame-deepwater); }
@media (max-width: 880px) {
  .section--light .pillars { border-right-color: var(--frame-scaffold); }
  .section--light .pillar { border-bottom-color: var(--frame-scaffold); }
}

/* ============================================================
   HERO — light variant (toggled via the Tweaks panel)
   Full re-theme of the hero shell, the rotating scene stage and
   the progress tabs onto the Clearspan surface. Institutional,
   calm, "fintech daylight" — pairs with the lightened body.
   ============================================================ */
.hero--light {
  background: radial-gradient(120% 92% at 78% 16%, #FFFFFF 0%, var(--frame-coldroll) 46%, var(--frame-clearspan) 100%);
}
.hero--light .hero__grid-glow {
  background-image:
    linear-gradient(rgba(17,20,24,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,20,24,.06) 1px, transparent 1px);
}
.hero--light h1 { color: var(--frame-ironworks); }
.hero--light .accent { color: var(--frame-deepwater); }
.hero--light .kicker { color: var(--frame-deepwater); }
.hero--light .hero__sub { color: var(--frame-forge); }
.hero--light .hero__sub strong { color: var(--frame-ironworks); }
.hero--light .hero__note { color: var(--frame-forge); border-top-color: var(--frame-scaffold); }

/* stat strip */
.hero--light .hero__stats { border-top-color: var(--frame-scaffold); }
.hero--light .hero__stats .stat__val { color: var(--frame-ironworks); }
.hero--light .hero__stats .stat__val .suf { color: var(--frame-deepwater); }
.hero--light .hero__stats .stat__lab { color: var(--frame-foundry); }

/* scroll cue */
.hero--light .hero__scroll { color: var(--frame-foundry); }
.hero--light .hero__scroll .bar { background: linear-gradient(var(--frame-deepwater), transparent); }
.hero--light .hero__scroll .bar::after { background: var(--frame-deepwater); }

/* ghost button on light */
.hero--light .btn--ghost { --_fg: var(--frame-ironworks); box-shadow: inset 0 0 0 1px rgba(17,20,24,.22); }
.hero--light .btn--ghost::before { background: var(--frame-ironworks); }
.hero--light .btn--ghost:hover { color: var(--frame-clearspan); }

/* scene 0 — the mark */
.hero--light .glyph { color: var(--frame-deepwater); }

/* floating chips → light glass */
.hero--light .hero__chip { background: rgba(255,255,255,.84); border-color: var(--frame-scaffold); backdrop-filter: blur(8px); }
.hero--light .hero__chip .t { color: var(--frame-foundry); }
.hero--light .hero__chip .v { color: var(--frame-ironworks); }
.hero--light .hero__chip .v .accent { color: var(--frame-deepwater); }

/* shared scene caption */
.hero--light .scene__cap { color: var(--frame-foundry); }
.hero--light .scene__cap b { color: var(--frame-ironworks); }

/* scene 1 — layer stack */
.hero--light .layer { background: rgba(255,255,255,.82); border-color: var(--frame-scaffold); }
.hero--light .layer__lab { color: var(--frame-foundry); }
.hero--light .layer__name { color: var(--frame-ironworks); }
.hero--light .layer__meta { color: var(--frame-foundry); }
.hero--light .layer--frame { border-color: var(--frame-deepwater); background: linear-gradient(110deg, rgba(15,76,129,.14), rgba(15,76,129,.04)); }
.hero--light .layer--frame .layer__name { color: var(--frame-ironworks); }
.hero--light .layer--frame .layer__lab { color: var(--frame-deepwater); }
.hero--light .layer__mark { color: var(--frame-deepwater); }

/* scene 2 — settlement ledger */
.hero--light .ledger { background: var(--frame-white); border-color: var(--frame-scaffold); box-shadow: 0 24px 56px rgba(15,76,129,.13); }
.hero--light .ledger__bar { border-bottom-color: var(--frame-scaffold); }
.hero--light .ledger__mark { color: var(--frame-deepwater); }
.hero--light .ledger__name { color: var(--frame-ironworks); }
.hero--light .ledger__live { color: var(--frame-foundry); }
.hero--light .ledger__live i { background: var(--frame-deepwater); }
.hero--light .ledger__hrow { color: var(--frame-foundry); }
.hero--light .lrow { border-top-color: var(--frame-coldroll); }
.hero--light .lrail { color: var(--frame-ironworks); }
.hero--light .lnet { color: var(--frame-foundry); }
.hero--light .lstat { color: var(--frame-deepwater); }
.hero--light .lstat__dot { background: var(--frame-deepwater); }
.hero--light .ledger__foot { border-top-color: var(--frame-scaffold); color: var(--frame-foundry); }

/* scene 3 — value chain */
.hero--light .vstep { background: var(--frame-white); border-color: var(--frame-scaffold); }
.hero--light .vstep__ico { color: var(--frame-foundry); }
.hero--light .vstep__n { color: var(--frame-foundry); }
.hero--light .vstep__t { color: var(--frame-ironworks); }
.hero--light .scene[data-scene="3"].is-active .vstep.lit { border-color: var(--frame-deepwater); background: linear-gradient(170deg, rgba(15,76,129,.12), var(--frame-white)); }
.hero--light .scene[data-scene="3"].is-active .vstep.lit .vstep__ico { color: var(--frame-deepwater); }
.hero--light .vtake { border-top-color: var(--frame-scaffold); }
.hero--light .vtake__big { color: var(--frame-ironworks); }
.hero--light .vtake__big .bps { color: var(--frame-deepwater); }
.hero--light .vtake__lab { color: var(--frame-foundry); }

/* progress tabs */
.hero--light .hero__tabs { background: var(--frame-scaffold); border-color: var(--frame-scaffold); }
.hero--light .hero__tab { background: var(--frame-white); }
.hero--light .hero__tab:hover { background: var(--frame-coldroll); }
.hero--light .hero__tab-n { color: var(--frame-foundry); }
.hero--light .hero__tab-t { color: var(--frame-forge); }
.hero--light .hero__tab.is-active { background: var(--frame-coldroll); }
.hero--light .hero__tab.is-active .hero__tab-n { color: var(--frame-deepwater); }
.hero--light .hero__tab.is-active .hero__tab-t { color: var(--frame-ironworks); }
.hero--light .hero__tab-bar { background: var(--frame-deepwater); }

/* nav over a light hero (only while transparent at the top —
   once scrolled it goes solid-dark and reverts to light text).
   Covers both the homepage hero (.hero--light) and the sub-page
   light heroes (.phero on About / For Banking). */
body:has(.hero--light) .nav:not(.is-solid) .nav__logo,
body:has(.phero) .nav:not(.is-solid) .nav__logo { color: var(--frame-ironworks); }
body:has(.hero--light) .nav:not(.is-solid) .nav__link,
body:has(.hero--light) .nav:not(.is-solid) .nav__signin,
body:has(.phero) .nav:not(.is-solid) .nav__link { color: var(--frame-forge); }
body:has(.hero--light) .nav:not(.is-solid) .nav__link:hover,
body:has(.phero) .nav:not(.is-solid) .nav__link:hover,
body:has(.phero) .nav:not(.is-solid) .nav__link.is-active { color: var(--frame-ironworks); }
body:has(.hero--light) .nav:not(.is-solid) .nav__burger,
body:has(.phero) .nav:not(.is-solid) .nav__burger { color: var(--frame-ironworks); }