/* =========================================================
   OVERRIDES.CSS — REWRITTEN / CONSOLIDATED (VALID CSS)
   Goal:
   - Preserve intent of all existing patches
   - Fix broken structure / duplicate conflicts
   - Keep top rail mobile stable (brand visible, menu centered)
   - Keep footer black panel treatment + gold brand card
   - Keep hero inset fixes + CTA color split + mobile bg motion
   ========================================================= */

/* =========================================================
   0) GLOBAL SHELL SAFETY / BASE CONTAINMENT
   (Merged from multiple overflow/page-shell patches)
   ========================================================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html,
body{
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  overflow-x: clip; /* modern */
}

@supports not (overflow: clip){
  html,
  body{
    overflow-x: hidden !important;
  }
}

body{
  position: relative;
  min-height: 100%;
}

/* Common media overflow guards */
img,
video,
svg,
canvas{
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   1) TOKENS / GLOBAL OVERRIDE TOKENS
   (Merged token patches)
   ========================================================= */

:root{
  /* Frame / border stabilization */
  --frame-border: rgba(200,161,43,.22);
  --frame-border-strong: rgba(200,161,43,.34);
  --panel-border: rgba(200,161,43,.20);

  /* Force border system toward P&E gold where token-driven */
  --frame: #C8A12B !important;
  --frame-2: #A88433 !important;
  --border: rgba(200,161,43,.38) !important;
  --hairline: rgba(200,161,43,.28) !important;

  /* Panel polish tokens */
  --panel-line: rgba(255,255,255,.12);
  --panel-line-soft: rgba(255,255,255,.06);
  --panel-gold-hair: rgba(200,161,43,.18);
  --panel-glow: rgba(200,161,43,.10);

  /* Hero inset / width tuning */
  --hero-content-max: 780px;
  --hero-gutter: 18px;
  --hero-gutter-mobile: 14px;
}

/* =========================================================
   2) PAGE SHELL OVERFLOW CONTAINMENT + LAYOUT STABILIZER
   (Merged from page shell / root stabilizer / footer bleed patches)
   ========================================================= */

.page{
  position: relative;
  box-sizing: border-box !important;

  /* keep wrapper inside viewport math */
  width: min(100%, var(--max, 1040px)) !important;
  max-width: min(100%, var(--max, 1040px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* avoid fake extension below footer */
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;

  /* final shell visual (from your later patches) */
  border: 0 !important;
  border-radius: 18px;
  outline: 1px solid rgba(255,255,255,.06);
  outline-offset: -1px;

  box-shadow:
    0 34px 90px rgba(0,0,0,.28),
    0 10px 26px rgba(0,0,0,.16) !important;

  /* containment */
  overflow: hidden;
  overflow: clip;
  display: flow-root;
}

/* Fallback if clip unsupported */
@supports not (overflow: clip){
  .page{
    overflow: hidden;
  }
}

/* Generic width safety */
.page,
main,
#main,
.content,
.wrap,
.container{
  max-width: 100%;
  box-sizing: border-box;
}

/* Main and footer spacing guards */
main,
#main{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.site-footer{
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Common pseudo-element overflow offenders */
body::before,
body::after,
.page::before,
.page::after,
.site-footer::before,
.site-footer::after{
  max-width: 100% !important;
}

/* Force common blocks to respect wrapper width */
.page :where(
  .hero-panel, .section-head, .notice, .how-strip, .stack-strip, .panel,
  .service-card, .product-inner, .product-card, .insight-card, .form,
  .site-footer, .next-strip, .insights-grid, .services-grid
){
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   3) GLOBAL BORDER / FRAME COLOR OVERRIDE
   (Keep broad catch-all from your previous file)
   ========================================================= */

.topbar-rail,
.rail-card,
.glass,
.card,
.panel,
.hero-glass,
.wrap,
.container,
main,
.page{
  border-color: rgba(200,161,43,.38) !important;
}

/* If “border” is actually a shadow ring */
.topbar-rail,
.rail-card,
.glass,
.card,
.panel,
.hero-glass{
  box-shadow: 0 0 0 1px rgba(200,161,43,.26) !important;
}

/* =========================================================
   4) SECTION SEPARATOR LINE / FOOTER BLEED LOOK FIXES
   (Merged duplicate separator patches)
   ========================================================= */

/* Base sections can still use line system */
.page > main > section{
  position: relative;
}

/* Site-section separator treatment */
.page > main > section.site-section{
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent 45%);
}

.page > main > section.site-section::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  opacity: .55;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gold) 46%, transparent 54%),
    transparent 72%
  );
}

/* No separator on first section */
.page > main > section.site-section:first-of-type,
.page > main > section.site-section:first-of-type::before{
  border-top: 0 !important;
  content: none !important;
}

/* Disable auto top-line on footer / final blocks */
.site-footer,
.site-footer::before{
  border-top: 0 !important;
  content: none !important;
}

/* Optional final section bottom-line bleed prevention */
.page > main > section:last-of-type{
  border-bottom: 0 !important;
}

/* (Intentionally leaving ::before untouched unless needed) */

/* =========================================================
   5) PANEL OUTLINE POLISH (Hero / Key Cards)
   ========================================================= */

:where(.hero-panel, .system-hero, .feature-card, .insight-hero, .panel-frame){
  position: relative;
  border-radius: 26px !important;
  border: 1px solid var(--panel-line) !important;
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(200,161,43,.07), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 8px 24px rgba(0,0,0,.18);
  overflow: hidden;
}

:where(.hero-panel, .system-hero, .feature-card, .insight-hero, .panel-frame)::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid var(--panel-gold-hair);
  pointer-events: none;
}

:where(.hero-panel, .system-hero, .feature-card, .insight-hero, .panel-frame)::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
  pointer-events: none;
}

/* =========================================================
   6) TOP RAIL POLISH / BRONZE SOFTEN (GLOBAL, NON-MOBILE)
   ========================================================= */

/* Rail shell polish */
.topbar,
.topbar-rail{
  border: 1px solid rgba(200,161,43,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 8px 18px rgba(0,0,0,.22) !important;
}

/* Remove extra decorative bronze rectangles if any */
.topbar::before,
.topbar::after,
.topbar-rail::before,
.topbar-rail::after{
  content: none !important;
}

/* Bronze outline soften / remove */
.topbar,
.topbar-rail,
.topbar-brand,
.topbar-actions > *{
  border-color: rgba(200,161,43,.16) !important;
  box-shadow: none !important;
}

/* Topbar border token application from earlier patch */
.topbar{
  border: 1px solid var(--frame-border) !important;
}

/* =========================================================
   7) THIN TEXT FRAME CLEANUP INSIDE PANELS
   ========================================================= */

:where(.hero-panel, .section-head, .panel, .insight-card, .how-strip)
:where(.hero-copy, .hero-text, .lede-wrap, .lede-box, .intro-box, .subcopy-box, .copy-frame, .blurb){
  border: 0 !important;
  box-shadow: none !important;
}

:where(.hero-panel, .section-head, .panel, .insight-card, .how-strip)
:where(.hero-copy, .hero-text, .lede-wrap, .lede-box, .intro-box, .subcopy-box, .copy-frame, .blurb)::before,
:where(.hero-panel, .section-head, .panel, .insight-card, .how-strip)
:where(.hero-copy, .hero-text, .lede-wrap, .lede-box, .intro-box, .subcopy-box, .copy-frame, .blurb)::after{
  content: none !important;
}

/* Paragraph box fallback cleanup */
.section-head p,
.notice p,
.hero-panel .subcopy,
.hero-panel .lede,
.hero-panel .eyebrow + p,
.insight-card p:first-of-type{
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Generic thin-framed text fallback */
:where(.section-head, .notice, .hero-panel, .insight-card, .panel)
:where(.lede, .subcopy, .intro, .desc){
  border-color: rgba(200,161,43,.12) !important;
}


/* =========================================================
   10) INDEX HERO CONTENT INSET FIXES (GENERAL + NUCLEAR + LOCKUP)
   (Preserved; structure fixed)
   ========================================================= */

/* ---------- A) Nuclear first-card inset normalizer ---------- */

main > section:first-of-type :is(.glass, .panel, .card, .hero, .hero-card, .hero-panel, .intro-card, .landing-card){
  --heroInsetL: clamp(16px, 2.4vw, 30px);
  --heroInsetR: clamp(12px, 1.8vw, 22px);
  box-sizing: border-box !important;
}

main > section:first-of-type :is(.glass, .panel, .card, .hero, .hero-card, .hero-panel, .intro-card, .landing-card) > *{
  margin-left: var(--heroInsetL) !important;
  margin-right: var(--heroInsetR) !important;
  box-sizing: border-box !important;
  max-width: calc(100% - var(--heroInsetL) - var(--heroInsetR)) !important;
}

main > section:first-of-type :is(.glass, .panel, .card, .hero, .hero-card, .hero-panel, .intro-card, .landing-card) > :is(h1, h2, p, .headline, .hero-title, .hero-sub, .subhead){
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
}

main > section:first-of-type :is(.glass, .panel, .card, .hero, .hero-card, .hero-panel, .intro-card, .landing-card) > :is(a.btn, .btn, button, .audio-row, .play-row, .theme-row, .audio-pill, .sound-row){
  width: calc(100% - var(--heroInsetL) - var(--heroInsetR)) !important;
  display: flex !important;
}

main > section:first-of-type :is(.hero-actions, .cta-row, .hero-cta, .hero-buttons, .actions, .hero-meta, .hero-foot, .hero-notes, .microcopy-row, .hero-fine, .hero-footnote){
  padding-left: var(--heroInsetL) !important;
  padding-right: var(--heroInsetR) !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px){
  main > section:first-of-type :is(.glass, .panel, .card, .hero, .hero-card, .hero-panel, .intro-card, .landing-card){
    --heroInsetL: 14px;
    --heroInsetR: 10px;
  }
}

/* ---------- B) Force content spacers (first section) ---------- */

main > section:first-of-type :is(
  h1, h2, h3, p,
  .headline, .hero-title, .hero-sub, .subhead,
  .btn, a.btn, button,
  .audio-row, .play-row, .theme-row, .audio-pill, .sound-row,
  .hero-meta, .hero-foot, .hero-notes, .microcopy-row, .hero-fine, .hero-footnote,
  .hero-actions, .cta-row, .hero-cta, .hero-buttons, .actions
){
  width: min(calc(100% - (var(--hero-gutter) * 2)), var(--hero-content-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

main > section:first-of-type :is(
  h1, h2, h3, p,
  .headline, .hero-title, .hero-sub, .subhead
){
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

main > section:first-of-type :is(.btn, a.btn, button, .audio-row, .play-row, .theme-row, .audio-pill, .sound-row){
  display: flex !important;
  box-sizing: border-box !important;
}

main > section:first-of-type :is(
  .hero-content, .content, .copy, .text, .stack, .inner, .panel-inner, .card-inner
){
  width: min(calc(100% - (var(--hero-gutter) * 2)), var(--hero-content-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px){
  main > section:first-of-type :is(
    h1, h2, h3, p,
    .headline, .hero-title, .hero-sub, .subhead,
    .btn, a.btn, button,
    .audio-row, .play-row, .theme-row, .audio-pill, .sound-row,
    .hero-meta, .hero-foot, .hero-notes, .microcopy-row, .hero-fine, .hero-footnote,
    .hero-actions, .cta-row, .hero-cta, .hero-buttons, .actions,
    .hero-content, .content, .copy, .text, .stack, .inner, .panel-inner, .card-inner
  ){
    width: calc(100% - (var(--hero-gutter-mobile) * 2)) !important;
  }
}

/* ---------- C) Real DOM fix for index lockup ---------- */

main.stage .content > section.lockup{
  box-sizing: border-box !important;
  padding-left: clamp(22px, 3vw, 34px) !important;
  padding-right: clamp(22px, 3vw, 34px) !important;
}

main.stage .content > section.lockup > h1,
main.stage .content > section.lockup > p.subhead{
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

main.stage .content > section.lockup > .fineprint,
main.stage .content > section.lockup > .audio-hint{
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

main.stage .content > section.lockup > .btn,
main.stage .content > section.lockup > a.btn,
main.stage .content > section.lockup > button,
main.stage .content > section.lockup > .audio-row,
main.stage .content > section.lockup > .play-row,
main.stage .content > section.lockup > .theme-row{
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

@media (max-width: 720px){
  main.stage .content > section.lockup{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  main.stage .content > section.lockup > h1,
  main.stage .content > section.lockup > p.subhead,
  main.stage .content > section.lockup > .fineprint,
  main.stage .content > section.lockup > .audio-hint{
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* =========================================================
   12) MOBILE BG MOTION RESTORE (SAFE + WRAPPER VISIBILITY)
   (Merged both mobile bg motion patches)
   ========================================================= */

@media (max-width: 720px){

  /* keep page dark */
  html,
  body{
    background: var(--frame-3, #141311) !important;
    overflow-x: hidden !important;
  }

  /* Re-enable common background motion layers */
  .bg-motion,
  .bg-layer,
  .bg-svg,
  .site-bg,
  .page-bg,
  .ambient-bg,
  .motion-bg,
  .noise-bg{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Background layers fill viewport */
  .bg-motion,
  .bg-layer,
  .bg-svg,
  .site-bg,
  .page-bg{
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  /* Extra compositing help on mobile */
  .bg-motion{
    will-change: transform, opacity !important;
    transform: translateZ(0) !important;
  }

  .bg-motion svg,
  .bg-svg svg,
  .bg-motion canvas,
  .bg-layer canvas{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
  }

  /* Do not reposition topbar/main — just expose bg through shells */
  .page,
  .page-shell,
  .site-shell,
  .frame-shell,
  .content-shell{
    background: transparent !important;
  }

  /* Decorative frame overlays should not black out background */
  .page::before,
  .page::after,
  .page-shell::before,
  .page-shell::after{
    pointer-events: none !important;
    opacity: 1 !important;
  }

  /* Allow vertical visibility on wrapper (keep horizontal safety globally) */
  .page{
    overflow-y: visible !important;
  }

  /* Overlay reduction if present */
  .bg-overlay,
  .site-overlay,
  .page-overlay,
  .ambient-overlay,
  .noise-overlay{
    opacity: .35 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   13) FOOTER — FINAL BLACK PANEL TREATMENT (CANON)
   Consolidated from many footer attempts:
   - final shell matches black section treatment
   - visible layer includes .footer-grid
   - wrappers neutralized
   - footer boxes/polish kept
   ========================================================= */

/* 1) Footer shell + visible grid layer */
footer.site-footer,
.site-footer,
.site-footer .footer-grid{
  background: #141311 !important; /* near-black / frame-3 */
  background-image: none !important;
  color: rgba(255,255,255,.86) !important;

  border-color: rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 12px 28px rgba(0,0,0,.18) !important;
}

/* 2) Keep subtle gold top edge only */
footer.site-footer,
.site-footer{
  border-top: 1px solid rgba(200,161,43,.16) !important;
}

/* 3) Kill gray wash / fake overlays */
footer.site-footer::before,
footer.site-footer::after,
.site-footer::before,
.site-footer::after,
.site-footer .footer-grid::before,
.site-footer .footer-grid::after{
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

/* 4) Neutralize wrappers that repaint footer */
.site-footer :where(
  .page,
  .panel,
  .glass,
  .card,
  .wrap,
  .container,
  .inner,
  .footer-panel,
  .footer-inner,
  .footer-wrap,
  .footer-shell
){
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 5) Footer boxes/cards */
.site-footer :where(.footer-col, .footer-group, .footer-grid > *, .group, .block){
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
  padding: 18px 18px !important; /* from footer polish patch */
}

/* 6) Footer text */
.site-footer .footer-name{
  color: rgba(255,255,255,.94) !important;
}

.site-footer .footer-head{
  color: rgba(255,255,255,.72) !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: .08em !important;
}

.site-footer .footer-muted,
.site-footer .footer-mini{
  color: rgba(255,255,255,.64) !important;
}

/* column content spacing polish */
.site-footer .footer-col > * + *,
.site-footer .footer-group > * + *{
  margin-top: 8px !important;
}

/* 7) Footer links/chips */
.site-footer .footer-link,
.site-footer a.btn,
.site-footer .chip{
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

.site-footer .footer-link{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 16px !important;
  text-align: left !important;
}

.site-footer .footer-link:hover,
.site-footer a.btn:hover,
.site-footer .chip:hover{
  background: rgba(200,161,43,.08) !important;
  border-color: rgba(200,161,43,.22) !important;
}

/* =========================================================
   14) FOOTER BRAND CARD (FIRST COLUMN) — GOLD + WHITE TEXT
   Consolidated from multiple iterations, final behavior preserved
   ========================================================= */

/* Brand panel (first footer grid card) */
.site-footer .footer-grid > :first-child{
  background: #C8A12B !important;
  background-image: linear-gradient(180deg, #D4AF3A 0%, #B28C22 100%) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 18px rgba(0,0,0,.14) !important;
}

/* Force white text on gold (your final override intent) */
.site-footer .footer-grid > :first-child,
.site-footer .footer-grid > :first-child *{
  color: rgba(255,255,255,.96) !important;
}

.site-footer .footer-grid > :first-child .footer-name{
  color: #fff !important;
}

.site-footer .footer-grid > :first-child .footer-muted,
.site-footer .footer-grid > :first-child .footer-mini{
  color: rgba(255,255,255,.88) !important;
}

.site-footer .footer-grid > :first-child a{
  color: rgba(255,255,255,.94) !important;
}

/* =========================================================
   15) LEGIBILITY BOOST — LIGHT TEXT ON GOLD (GENERIC SELECTORS)
   Keeps your broader gold-card text treatment
   ========================================================= */

.site-footer .footer-brand,
.site-footer .brand-box,
.site-footer .footer-card--gold,
.site-footer .footer-panel--gold,
.site-footer .panel-gold{
  color: rgba(255,255,255,.97) !important;
  background: linear-gradient(180deg, #b89124 0%, #a57d1f 100%) !important;
}

.site-footer .footer-brand *,
.site-footer .brand-box *,
.site-footer .footer-card--gold *,
.site-footer .footer-panel--gold *,
.site-footer .panel-gold *{
  color: rgba(255,255,255,.97) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 1px rgba(0,0,0,.30),
    0 0 8px rgba(0,0,0,.12) !important;
  -webkit-text-stroke: 0.35px rgba(0,0,0,.25);
}

.site-footer .footer-brand .footer-muted,
.site-footer .footer-brand .footer-mini,
.site-footer .brand-box .footer-muted,
.site-footer .brand-box .footer-mini{
  color: rgba(255,255,255,.95) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* =========================================================
   16) FINAL SAFETY OVERRIDES (UNDO OLD BROKEN TOPBAR PATCHES)
   These intentionally neutralize old rules if still present in base files.
   ========================================================= */

@media (max-width: 720px){
  /* Undo old "hide brand chip" and "icon-only brand" patches */
  .topbar-brand,
  .brand-chip{
    display: inline-flex !important;
    text-indent: 0 !important;
  }

  /* Ensure brand isn’t forced to icon-only 52px by stale rules */
  .topbar-brand,
  .brand-chip{
    width: auto !important;
    min-width: 0 !important;
    max-width: 132px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 720px){
  #railToggle,
  .topbar-menu{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    flex: 0 0 44px !important;
  }

  .topbar-brand,
  .brand-chip{
    flex: 0 0 auto !important;
  }
}

/* =========================================================
   FINAL TOKEN LOCK (LAST IN FILE)
   ========================================================= */
:root{
  --frame: #2B2F34 !important;
  --frame-2: #1E1C19 !important;
  --frame-3: #141311 !important;
}
/* FOOTER BRAND CARD — GOLD EDGE (not slab) */
.site-footer .footer-grid > :first-child{
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(200,161,43,.10), transparent 55%),
    linear-gradient(180deg, rgba(24,22,20,.92), rgba(12,11,10,.96)) !important;
  border: 1px solid rgba(200,161,43,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(200,161,43,.12) !important;
}

/* Text stays white-ish, but not “poster white” */
.site-footer .footer-grid > :first-child,
.site-footer .footer-grid > :first-child *{
  color: rgba(255,255,255,.92) !important;
}
.site-footer .footer-grid > :first-child .footer-muted,
.site-footer .footer-grid > :first-child .footer-mini{
  color: rgba(255,255,255,.78) !important;
}
/* =========================================================
   SYSTEM PAGE — "WHAT YOU RECEIVE" + MICRO EXAMPLE MOBILE FIX
   - Stack the 2-col block into 1 column
   - Prevent clipping / narrow right column
   - Normalize padding + gaps
   Put at VERY BOTTOM of overrides.css
   ========================================================= */
@media (max-width: 720px){

  /* Scope to system page only */
  body.system .page main,
  body.system .page main section{
    overflow-x: hidden;
  }

  /* Find the 2-column wrapper and force stack */
  body.system :where(.receive, .what-you-receive, .outputs, .outputs-grid, .micro-grid, .two-col, .split, .columns, .table, .grid, .layout)
  {
    /* don't change everything globally — only applies if this is the actual wrapper */
  }

  /* Target the actual 2-col block by structure:
     a container that directly contains two "cards/panels" */
  body.system .page main :where(section, .site-section) :where(.grid, .two-col, .split, .columns, .table)
  {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 14px !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }

  /* Make both columns behave like full-width cards */
  body.system .page main :where(section, .site-section)
    :where(.grid, .two-col, .split, .columns, .table)
    > :where(.panel, .card, .block, .glass, .col, .column, .cell){
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Fix inner padding / overflow in the Micro Example column */
  body.system .page main :where(.micro, .micro-example, .example, .right, .col-right, .column-right)
  {
    padding: 16px !important;
    overflow: hidden !important;
    word-break: break-word;
  }

  /* Keep headings/labels from compressing */
  body.system .page main :where(.micro, .micro-example, .example)
    :where(h3, h4, .kicker, .label, .title){
    white-space: normal !important;
  }
}
/* =========================================================
   SYSTEM — DELIVERABLE: FORCE CENTER + FULL WIDTH (MOBILE)
   This one overrides the real layout drivers.
   ========================================================= */
@media (max-width: 720px){

  /* 1) The parent band must not pin content left */
  body.system #deliverable .product-band{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2) Kill whatever desktop grid/table layout is on product-inner */
  body.system #deliverable .product-inner{
    display: block !important;          /* <-- this is the big hammer */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;          /* center any fixed-width behavior */
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 3) Your new wrapper should fully stretch */
  body.system #deliverable .receive-stack{
    display: block !important;          /* simple stack */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  body.system #deliverable .receive-col{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4) Make the micro example card fill the space */
  body.system #deliverable .product-card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 0 !important;
  }

  /* 5) Buttons: full width + aligned */
  body.system #deliverable .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
  }

  body.system #deliverable .hero-actions .btn{
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}
/* =========================================================
   SYSTEM — DELIVERABLE: FORCE CENTER + FULL WIDTH (MOBILE)
   This one overrides the real layout drivers.
   ========================================================= */
@media (max-width: 720px){

  /* 1) The parent band must not pin content left */
  body.system #deliverable .product-band{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2) Kill whatever desktop grid/table layout is on product-inner */
  body.system #deliverable .product-inner{
    display: block !important;          /* <-- this is the big hammer */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;          /* center any fixed-width behavior */
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 3) Your new wrapper should fully stretch */
  body.system #deliverable .receive-stack{
    display: block !important;          /* simple stack */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  body.system #deliverable .receive-col{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4) Make the micro example card fill the space */
  body.system #deliverable .product-card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 0 !important;
  }

  /* 5) Buttons: full width + aligned */
  body.system #deliverable .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
  }

  body.system #deliverable .hero-actions .btn{
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}
/* Privacy/Terms readability (targets your actual body classes now) */
body.page-legal .legal{
  text-align: left !important;
  max-width: 72ch !important;
  margin: 0 auto !important;
}
body.page-legal .legal :where(ul,ol){ padding-left: 1.15em !important; }

/* =========================================
   SYSTEM CARDS — MOBILE TIGHTEN + NO DUPES FEEL
   - Make label/value rows 2-col
   - Prevent ugly word breaks/hyphenation
   ========================================= */
@media (max-width: 720px){

  /* Stop hyphenation + forced breaks inside these cards */
  body.system :where(.system-card, .system-body, .system-text, .meta, .muted){
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Turn each "Purpose/Output" row into label | content */
  body.system .system-row{
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
  }

  /* Keep the left label compact */
  body.system .system-label{
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    opacity: .75 !important;
  }

  /* Keep content readable + not broken */
  body.system .system-text{
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.45 !important;
  }

  /* Reduce vertical padding so cards feel tighter */
  body.system .system-band{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Optional: tighten headings so you don’t see “Gate” twice as loudly */
  body.system .system-head .system-tag{
    letter-spacing: .08em !important;
    font-size: 11px !important;
    opacity: .75 !important;
  }
}
/* ✅ PAGE-ONLY: OVERVIEW HERO CTA COLOR SPLIT (Index colors adapted)
   Put inside your existing <style> in overview.html (near other hero styles)
*/
.hero-plate .hero-actions.hero-cta-row .btn{
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.22);
}

/* Sign In -> dark (Index “Sign In”) */
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-signin{
  color: rgba(255,255,255,.96) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, #17181b, #0f1012) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 24px rgba(0,0,0,.34);
}
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-signin:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-signin:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Get Credits -> gold (Index “Enter Site”) */
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-credits{
  color: #111 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)),
    linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  border-color: rgba(255,230,140,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 24px rgba(168,132,51,.24);
  font-weight: 800;
}
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-credits:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-credits:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Submit a decision -> blue steel (Index “Play Brand Theme”) */
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-submit{
  color: rgba(255,255,255,.98) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    linear-gradient(180deg, #5f7287, #46586b) !important;
  border-color: rgba(190,215,240,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 12px 24px rgba(34,50,70,.22);
}
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.hero-plate .hero-actions.hero-cta-row > a.btn.cta-submit:active{
  transform: translateY(0);
  filter: brightness(.98);
}
/* =========================================================
   OVERVIEW — NEXT STEP CTA COLOR SPLIT (match Index + Hero)
   Targets ONLY the three buttons in the “Have a decision right now?” strip
   ========================================================= */

/* Shared polish */
.next-strip .hero-actions.next-actions .btn{
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.22);
}

/* 1) Get credits -> gold (Index “Enter Site”) */
.next-strip .hero-actions.next-actions > a.btn[href*="credits"]{
  color: #111 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)),
    linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  border-color: rgba(255,230,140,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 24px rgba(168,132,51,.24);
  font-weight: 800;
}
.next-strip .hero-actions.next-actions > a.btn[href*="credits"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.next-strip .hero-actions.next-actions > a.btn[href*="credits"]:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* 2) Sign in -> dark (Index “Sign In”) */
.next-strip .hero-actions.next-actions > a.btn[href*="signin"]{
  color: rgba(255,255,255,.96) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, #17181b, #0f1012) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 24px rgba(0,0,0,.34);
}
.next-strip .hero-actions.next-actions > a.btn[href*="signin"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.next-strip .hero-actions.next-actions > a.btn[href*="signin"]:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* 3) Submit -> blue steel (Index “Play Brand Theme”) */
.next-strip .hero-actions.next-actions > a.btn[href*="submit"]{
  color: rgba(255,255,255,.98) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    linear-gradient(180deg, #5f7287, #46586b) !important;
  border-color: rgba(190,215,240,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 12px 24px rgba(34,50,70,.22);
}
.next-strip .hero-actions.next-actions > a.btn[href*="submit"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.next-strip .hero-actions.next-actions > a.btn[href*="submit"]:active{
  transform: translateY(0);
  filter: brightness(.98);
}



/* =========================================================
   TERMS PAGE: REMOVE GRAY WASH (3 targets)
   1) Main page surface
   2) Summary blurb box
   3) Badges under Last updated
   Put this at the VERY END of terms.html <style> block
   (or at the very end of overrides.css)
   ========================================================= */

/* 1) MAIN PAGE SURFACE (hero + panel body) */
.hero-legal{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(200,161,43,.10), transparent 62%),
    radial-gradient(900px 520px at 86% 120%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(15,14,13,.72), rgba(10,10,11,.86)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}

.hero-legal .hero-title,
.hero-legal .hero-kicker,
.hero-legal .legal-meta,
.hero-legal .legal-meta *{
  color: rgba(255,255,255,.92) !important;
}

/* Main terms body panel (the big gray slab) */
.panel.panel--strong.legal-wrap{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(200,161,43,.08), transparent 62%),
    linear-gradient(180deg, rgba(15,14,13,.62), rgba(15,14,13,.78)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
}

.panel.panel--strong.legal-wrap .desc,
.panel.panel--strong.legal-wrap p,
.panel.panel--strong.legal-wrap li{
  color: rgba(255,255,255,.88) !important;
}
.panel.panel--strong.legal-wrap a{
  color: rgba(255,255,255,.92) !important;
  text-decoration-color: rgba(255,255,255,.22) !important;
}
.panel.panel--strong.legal-wrap a:hover{
  text-decoration-color: rgba(255,255,255,.40) !important;
}

/* 2) SUMMARY BLURB BOX (the right-side notice) */
.hero-legal .notice{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.90) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}
.hero-legal .notice p{
  color: rgba(255,255,255,.90) !important;
}

/* 3) BADGES UNDER LAST UPDATED (make them dark, not gray) */
.hero-legal .badges .badge{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.86) !important;
}

/* Optional: tighten the "Last updated" strip so it reads like the rest */
.hero-legal .legal-meta__label,
.hero-legal .legal-meta__value{
  color: rgba(255,255,255,.78) !important;
}
/* =========================================================
   TERMS HERO ALIGNMENT FIX
   Make hero text + summary + reminder + CTAs share one inner rail
   Put at VERY END of terms.html <style>
   ========================================================= */

:root{
  --terms-rail: min(980px, 92%);
}

/* Create a single inner rail for everything inside the Terms hero */
.hero-legal{
  display: grid !important;
  justify-items: center !important;
}

/* Wrap all hero children to the same width */
.hero-legal > .seal-row,
.hero-legal > .legal-head,
.hero-legal > .badges{
  width: var(--terms-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Give the hero a little more breathing room on the left */
.hero-legal > .seal-row{
  padding-left: 6px !important;
}

/* Legal head: ensure both columns align to the same rail */
.hero-legal .legal-head{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Summary box: align it and give consistent internal padding */
.hero-legal .notice{
  width: 100% !important;
  padding: 14px 16px !important;
}

/* Make the title/kicker block not feel glued to the left edge */
.hero-legal .legal-head > div:first-child{
  padding-left: 6px !important;
}

/* Badges row: line up with same left inset as title */
.hero-legal .badges{
  padding-left: 6px !important;
}

/* REMINDER + CTA row alignment (lower section) */
.notice[aria-label="Reminder"],
.hero-actions{
  width: var(--terms-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reminder box text: center and match button row rhythm */
.notice[aria-label="Reminder"]{
  text-align: center !important;
  padding: 14px 16px !important;
}

/* CTA buttons: center as a group and match the rail */
.hero-actions{
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Mobile: keep it clean */
@media (max-width: 720px){
  :root{ --terms-rail: min(980px, 94%); }

  .hero-actions{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .notice[aria-label="Reminder"]{
    text-align: left !important;
  }
}

/* =========================================================
   DESKTOP PORTRAIT — put "Brand Theme" + "Support" on one line
   (smaller buttons, same row)
   Put at VERY END of overrides.css
   ========================================================= */

/* 1) Only hit desktop in portrait / narrow-window cases */
@media (min-width: 721px) and (orientation: portrait){

  /* If your page uses a shared actions stack wrapper, try these */
  .actions,
  .cta-stack,
  .stack,
  .hero-actions,
  .panel-actions{
    /* no change by default */
  }

  /* --- Target the two buttons by href/label so we don't wreck the main 3 CTAs --- */
  a.btn[href*="support"],
  a.btn[href*="brand"],
  a.btn[href*="theme"],
  a.btn[aria-label*="Support" i],
  a.btn[aria-label*="Brand" i],
  a.btn[title*="Support" i],
  a.btn[title*="Brand" i]{
    /* make them smaller than the primary CTAs */
    font-size: 13px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* 2) Put them on one line when they are adjacent in a stack */
  /* This works if they live in the same parent container */
  .actions:has(a.btn[href*="support"]) ,
  .cta-stack:has(a.btn[href*="support"]),
  .hero-actions:has(a.btn[href*="support"]),
  .panel-actions:has(a.btn[href*="support"]){
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Make just those two take half width each */
  .actions a.btn[href*="brand"],
  .actions a.btn[href*="theme"],
  .actions a.btn[href*="support"],
  .cta-stack a.btn[href*="brand"],
  .cta-stack a.btn[href*="theme"],
  .cta-stack a.btn[href*="support"],
  .hero-actions a.btn[href*="brand"],
  .hero-actions a.btn[href*="theme"],
  .hero-actions a.btn[href*="support"],
  .panel-actions a.btn[href*="brand"],
  .panel-actions a.btn[href*="theme"],
  .panel-actions a.btn[href*="support"]{
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}

/* 3) Fallback: if desktop portrait is still “wide”, also apply at narrower widths */
@media (min-width: 721px) and (max-width: 980px){
  /* same behavior as above, but width-based */
  .actions:has(a.btn[href*="support"]),
  .cta-stack:has(a.btn[href*="support"]),
  .hero-actions:has(a.btn[href*="support"]),
  .panel-actions:has(a.btn[href*="support"]){
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .actions a.btn[href*="brand"],
  .actions a.btn[href*="theme"],
  .actions a.btn[href*="support"],
  .cta-stack a.btn[href*="brand"],
  .cta-stack a.btn[href*="theme"],
  .cta-stack a.btn[href*="support"],
  .hero-actions a.btn[href*="brand"],
  .hero-actions a.btn[href*="theme"],
  .hero-actions a.btn[href*="support"],
  .panel-actions a.btn[href*="brand"],
  .panel-actions a.btn[href*="theme"],
  .panel-actions a.btn[href*="support"]{
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}
/* =========================================================
   RAIL DRAWER — style the "Pattern & Edge" header like the topbar brand chip
   ========================================================= */

:root{
  --pe-brand-1: #7a5a2a;
  --pe-brand-2: #4a3417;
  --pe-brand-border: rgba(255,210,140,.26);
  --pe-brand-glow: rgba(255,200,120,.10);
}

/* Drawer header title -> pill */
.rail-drawer .rail-head .rail-title{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 16px !important;
  border-radius: 999px !important;

  color: rgba(255,255,255,.96) !important;
  border: 1px solid var(--pe-brand-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--pe-brand-1), var(--pe-brand-2)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.35),
    0 0 22px var(--pe-brand-glow) !important;

  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: none !important; /* keep as shown */
}

/* =========================================================
   DRAWER CTA PAINT FIX — gradients stable while drawer is open
   ========================================================= */

/* Ensure drawer content is on a clean stacking context */
body.rail-open aside.rail-drawer .rail-card{
  isolation: isolate !important;
}

/* Keep CTA zone above any overlay/fade layers */
body.rail-open aside.rail-drawer .rail-cta-zone{
  position: relative !important;
  z-index: 50 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translateZ(0) !important;
}

/* Make each CTA a stable composited layer */
body.rail-open aside.rail-drawer a.rail-cta{
  position: relative !important;
  z-index: 51 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 46px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  border-radius: 999px !important; /* keep pills for CTAs */
  overflow: hidden !important;     /* needed for ::before background */

  /* compositor stabilizers */
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;

  opacity: 1 !important;
  visibility: visible !important;

  /* IMPORTANT: background will be drawn by ::before */
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Put the gradient on a pseudo-layer (more reliable inside transformed drawers) */
body.rail-open aside.rail-drawer a.rail-cta::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  z-index: 0 !important;
}

/* Keep label above gradient */
body.rail-open aside.rail-drawer a.rail-cta{
  color: rgba(255,255,255,.96) !important;
}
body.rail-open aside.rail-drawer a.rail-cta > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Workspace = blue steel */
body.rail-open aside.rail-drawer a.rail-cta.rail-cta--solid{
  border: 1px solid rgba(190,215,240,.22) !important;
}
body.rail-open aside.rail-drawer a.rail-cta.rail-cta--solid::before{
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(180deg, #5f7287, #46586b) !important;
}

/* Written ruling = gold */
body.rail-open aside.rail-drawer a.rail-cta.rail-cta--ghost{
  border: 1px solid rgba(255,230,140,.34) !important;
  color: #111 !important;
}
body.rail-open aside.rail-drawer a.rail-cta.rail-cta--ghost::before{
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.14), transparent 58%),
    linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
}


/* =========================================================
   DRAWER CTA — NUCLEAR TEXT VISIBILITY FIX (labels invisible)
   Put at VERY END of overrides.css
   ========================================================= */

body.rail-open aside.rail-drawer .rail-cta-zone a.rail-cta{
  /* create a clean stacking context so ::before can't sit above text */
  position: relative !important;
  isolation: isolate !important;

  /* cancel the classic “gradient text = transparent fill” trick */
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;

  /* cancel common “hide text” / weird paint modes */
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  text-shadow: none !important;

  /* cancel masking/clipping that can blank text */
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  clip: auto !important;

  /* cancel indent/size tricks */
  font-size: 16px !important;
  line-height: 1 !important;
  text-indent: 0 !important;

  /* keep your layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Force ANY inner wrappers to render normally (span/strong/em/svg) */
body.rail-open aside.rail-drawer .rail-cta-zone a.rail-cta,
body.rail-open aside.rail-drawer .rail-cta-zone a.rail-cta *{
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;

  /* also cancels “screen/overlay” blend making text vanish */
  mix-blend-mode: normal !important;

  /* cancels any per-node masking */
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* If you have overlay layers, lock them BEHIND text */
body.rail-open aside.rail-drawer .rail-cta-zone a.rail-cta::before,
body.rail-open aside.rail-drawer .rail-cta-zone a.rail-cta::after{
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Per-variant label colors (re-assert after the reset) */
body.rail-open aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--solid{
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
}
body.rail-open aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--ghost{
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}
/* =========================================================
   DRAWER CTA — STOP STATE-FLIP (open/close/load) ON LABEL COLOR
   Put at VERY END of overrides.css
   ========================================================= */

/* Target the drawer CTAs regardless of whether body has rail-open yet */
aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--solid{
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
}

aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--ghost{
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* If your CSS uses nested spans, force inheritance */
aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--solid *,
aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--ghost *{
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html.js:not(.is-loaded) .rail-drawer { visibility: hidden; }
html.is-loaded .rail-drawer { visibility: visible; }

/* =========================================================
   STABILITY + P&E FRAME (drawer-open) + CTA label lock
   Put at VERY END of overrides.css
   ========================================================= */

/* 0) Prevent width “snap” when body overflow toggles */
html{
  scrollbar-gutter: stable; /* keeps layout width stable */
}

/* 1) LOCK: Top rail Written Ruling label should always be dark on gold */
.topbar a.btn.cta-ruling,
.topbar a.chip.cta-ruling{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

/* (fallback if you don’t have .cta-ruling but the href contains “ruling”) */
.topbar a.btn[href*="ruling" i],
.topbar a.chip[href*="ruling" i]{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

/* 2) LOCK: Drawer Written Ruling label should always be dark on gold */
aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--ghost{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}
aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--ghost *{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

/* 3) Keep Workspace label white (drawer only) */
aside.rail-drawer .rail-cta-zone a.rail-cta.rail-cta--solid{
  color:rgba(255,255,255,.96) !important;
  -webkit-text-fill-color:rgba(255,255,255,.96) !important;
}

/* 4) INTENTIONAL “FRAME” when drawer is open (replaces accidental white box) */
:root{
  --pe-frame: rgba(255,210,140,.55);      /* P&E gold tint */
  --pe-frame-soft: rgba(255,210,140,.16); /* faint glow */
}

body.rail-open::after{
  content:"";
  position:fixed;
  inset:10px;                 /* thickness/offset: try 8–14 */
  border:1px solid var(--pe-frame);
  border-radius:14px;         /* match your UI rounding */
  pointer-events:none;
  z-index:9999;               /* above everything */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 0 24px var(--pe-frame-soft);
}
/* =========================================================
   VIEWPORT FRAME — trigger from the drawer element itself
   (no dependence on body classes)
   Put at VERY END of overrides.css
   ========================================================= */

:root{
  --pe-frame: rgba(255,210,140,.62);       /* border */
  --pe-frame-soft: rgba(255,210,140,.18);  /* glow */
  --pe-frame-inset: 10px;                  /* inset */
  --pe-frame-radius: 14px;                 /* rounding */
}

/* Default: no frame */
body::after{ content:none; }

/* If drawer is open by ARIA (most common) */
@supports selector(body:has(*)){
  body:has(#railDrawer[aria-hidden="false"])::after,
  body:has(#railDrawer:not([aria-hidden]))::after{ /* if you never set aria-hidden */
    content:"";
    position: fixed;
    inset: var(--pe-frame-inset);
    border: 1px solid var(--pe-frame);
    border-radius: var(--pe-frame-radius);
    pointer-events: none;
    z-index: 999999;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.35),
      0 0 24px var(--pe-frame-soft);
  }

  /* Also catch class-based open states */
  body:has(#railDrawer.open)::after,
  body:has(#railDrawer.active)::after,
  body:has(#railDrawer.is-open)::after{
    content:"";
    position: fixed;
    inset: var(--pe-frame-inset);
    border: 1px solid var(--pe-frame);
    border-radius: var(--pe-frame-radius);
    pointer-events: none;
    z-index: 999999;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.35),
      0 0 24px var(--pe-frame-soft);
  }
}

/* Fallback for browsers without :has()
   — we’ll also add the frame when the drawer itself is visible via transform.
   This assumes the closed drawer is translateX(100%) or similar. */
#railDrawer{
  --_drawer-open-guess: 0; /* stays 0 unless overridden */
}

/* If your JS adds ANY open class to the body, keep this too as a fallback */
body.rail-open::after,
body.drawer-open::after,
body.menu-open::after{
  content:"";
  position: fixed;
  inset: var(--pe-frame-inset);
  border: 1px solid var(--pe-frame);
  border-radius: var(--pe-frame-radius);
  pointer-events: none;
  z-index: 999999;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 0 24px var(--pe-frame-soft);
}
/* =========================================================
   FIX 1: DRAWER “DOUBLE LOAD” (settling) — stop transitions only in drawer
   Put at VERY END of overrides.css
   ========================================================= */

.rail-drawer,
.rail-drawer *,
#railDrawer,
#railDrawer *{
  transition: none !important;
  animation: none !important;
}
/* DIAG B: If snap goes away, it’s Montserrat font swap */
html, body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* =========================================================
   HERO VIDEO — stop “double load” by gating reveal
   ========================================================= */

.hero-plate__video{
  opacity: 0;                 /* hidden until ready */
  transition: opacity .18s ease-out;
  will-change: opacity;
}

/* Once ready, fade in */
html.hero-video-ready .hero-plate__video{
  opacity: 1;
}

/* If user prefers reduced motion, avoid any fade */
@media (prefers-reduced-motion: reduce){
  .hero-plate__video{ transition: none; }
}

/* TEMP: kill the old right drawer while we build the HUD */
#railDrawer,
.rail-drawer,
.rail-panel,
.railDrawer,
aside[role="dialog"].rail,
aside[role="dialog"].drawer,
.drawer {
  display: none !important;
}


/* =========================================================
   TOP RAIL — force Decision Engine text to WHITE
   (does NOT touch any other buttons)
   ========================================================= */

header.topbar .topbar-actions a.btn--engine,
header.topbar .topbar-actions a.btn--engine *{
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
}

/* If your top-rail engine button is still using legacy classes */
header.topbar .topbar-actions .cta-run-top.is-ruling,
header.topbar .topbar-actions .cta-run-top.is-ruling *{
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
}


/* =========================================================
   RENDER KILL SWITCH — stop scroll repaint blocks (Chrome/Win)
   Put at VERY END of overrides.css
   ========================================================= */

/* 1) Nuke ALL background images/gradients (diagnostic) */
html, body{
  background: #070A10 !important;
  background-image: none !important;
}

/* 2) Disable the animated background layer (often forces tiling) */
.bg-motion,
.bg-motion__svg,
.bg-motion__track,
.bg-motion__sweep{
  display: none !important;
}

/* 3) Kill blend-mode + filters on large hero layers (major culprit) */
.hero-plate__media:after{
  content: none !important;              /* removes mix-blend-mode overlay layer */
}
.hero-plate__video{
  filter: none !important;               /* removes saturate/contrast compositing */
}

/* 4) Disable ALL backdrop-filter globally (it only takes one large element to break scroll) */
*{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 5) Simplify shadows on big scrolling containers */
.page, .panel, .panel-in, .wrap{
  box-shadow: none !important;
}

/* Keep structure looking intentional */
.page{
  background: rgba(12,16,26,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.panel{
  background: rgba(14,19,30,.78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
/* =========================================================
   BG-MOTION PERFORMANCE MODE — smooth + instant paint
   Replace your current BG-MOTION SAFE MODE block with this
   ========================================================= */

/* Re-enable */
.bg-motion,
.bg-motion__svg,
.bg-motion__track,
.bg-motion__sweep{
  display: block !important;
}

/* Make bg-motion fixed but DO NOT over-constrain painting */
.bg-motion{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  /* remove heavy containment/isolation that can cause strip-paint */
  contain: none !important;
  isolation: auto !important;

  /* don’t keep will-change on forever (expensive) */
  will-change: auto !important;
  transform: none !important;

  opacity: .65 !important;
}

/* Put site above it */
.page,
.topbar,
#bridgeHud,
main,
.site-footer{
  position: relative;
  z-index: 1;
}

/* Keep the SVG simple */
.bg-motion__svg{
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Sweep opacity a bit lower */
.bg-motion__sweep{
  opacity: .55 !important;
}

/* =========================================================
   NO-BLOCKS GUARANTEE — instead of hiding the whole layer,
   pause the SWEEP animation during scroll (cheaper than opacity flips)
   ========================================================= */

html.is-scrolling .bg-motion__sweep{
  animation-play-state: paused !important;
}
html.is-scrolling .bg-motion__track{
  animation-play-state: paused !important;
}

/* =========================================================
   BG-MOTION + TOPBAR RESET (fix rail shift + fix slow scroll)
   Put at VERY END of overrides.css
   ========================================================= */

/* 1) Put bg-motion BEHIND everything (no need to change .topbar positioning) */
.bg-motion{
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;           /* key change */
  pointer-events: none !important;

  /* keep it simple */
  opacity: .70 !important;
  transform: none !important;
  will-change: auto !important;
  contain: none !important;
  isolation: auto !important;
}

/* Ensure SVG isn’t doing fancy compositing */
.bg-motion__svg{
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 2) RESET the top rail so it stops shifting/locking */
header.topbar{
  position: sticky !important;      /* or fixed if you prefer */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;

  /* prevent any inherited offsets */
  transform: none !important;
}

/* Keep the rail aligned and full width */
header.topbar .topbar-rail{
  width: 100% !important;
  margin: 0 auto !important;
}

/* 3) During scroll: pause + hide ONLY the sweep (cheap), not the whole layer */
html.is-scrolling .bg-motion__sweep,
html.is-scrolling .bg-motion__track{
  animation-play-state: paused !important;
}

html.is-scrolling .bg-motion__sweep{
  opacity: 0 !important;
}