/* =========================================================
   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;
}

/* =========================================================
   8) MOBILE TOP RAIL — CONSOLIDATED HARD FIX (FINAL)
   Replaces all conflicting earlier topbar mobile experiments.
   - brand visible
   - no text-indent hiding
   - menu icon centered
   - no accidental spacer gap
   - one layout mode (flex)
   ========================================================= */

@media (max-width: 720px){

  /* ---------- A) topbar shell / gap cleanup ---------- */

  .topbar{
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 10px !important;
  }

  /* mystery spacer culprits */
  .topbar + *{
    margin-top: 0 !important;
  }

  .topbar-spacer,
  .rail-spacer,
  .header-spacer,
  .topbar-left,
  .brand-slot{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------- B) force one layout mode only ---------- */

  .topbar-rail,
  .topbar-inner,
  .topbar-row{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;

    /* neutralize inherited grid experiments */
    grid-template-columns: none !important;
  }

  /* hide center status box to free space */
  .topbar-box,
  .topbar-center,
  .topbar-status{
    display: none !important;
  }

  /* ---------- C) brand chip visible + readable ---------- */

  .topbar-brand,
  .brand-chip,
  .topbar .brand,
  .topbar-rail .brand,
  .topbar a[aria-label*="Pattern"],
  .topbar a[title*="Pattern"],
  .topbar a[href*="overview"],
  .topbar a[href*="index"],
  .topbar a[href="/"],
  .topbar a[href="./"]{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 132px !important;

    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 14px !important;

    white-space: nowrap !important;
    overflow: hidden !important;

    /* undo hidden-text patch */
    text-indent: 0 !important;
    position: relative !important;
  }

  /* undo older "hide inline text" patch everywhere inside brand */
  .topbar-brand *,
  .brand-chip *{
    text-indent: 0 !important;
  }

  .topbar-brand__name,
  .brand-chip__label,
  .topbar-brand span,
  .brand-chip span{
    display: inline !important;
    min-width: 0 !important;
    font-size: 10px !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* If logo is image/svg, keep visible and not pushed off-canvas */
  .topbar-brand svg,
  .brand-chip svg,
  .topbar-brand img,
  .brand-chip img,
  .topbar-brand::before,
  .brand-chip::before{
    text-indent: 0 !important;
  }

  /* ---------- D) right-side actions group ---------- */

  .topbar-actions,
  .top-actions,
  .topbar-right{
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
  }

  /* ---------- E) CTA buttons readable (not arrow-only) ---------- */

  .cta-run-top,
  .topbar-cta,
  .cta-top,
  .cta-credits-top,
  .topbar .btn[href*="credits"],
  .topbar .btn-signin,
  .topbar .signin-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 44px !important;
    min-height: 44px !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    gap: 4px !important;

    flex: 0 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .cta-run-top__label,
  .topbar-cta__label,
  .cta-top__label{
    display: inline !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* hide arrows/icons if present so labels fit */
  .cta-run-top__arrow,
  .topbar-cta__arrow,
  .cta-top__arrow{
    display: none !important;
  }

  /* Sign-in subtle distinct look (kept from earlier patch) */
  .topbar-actions .cta-run-top[href*="signin"]{
    border-color: rgba(255,255,255,.18) !important;
    background:
      radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, rgba(24,22,20,.92), rgba(12,11,10,.96)) !important;
  }

  /* ---------- F) hamburger button + icon centering ---------- */

  #railToggle,
  .topbar-menu,
  .menu-btn,
  .topbar-dash{
    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;
    line-height: 1 !important;
    flex: 0 0 44px !important;
  }

  #railToggle > *,
  .topbar-menu > *{
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  #railToggle svg,
  .topbar-menu svg,
  #railToggle .bar,
  .topbar-menu .bar{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- G) clipping safety ---------- */

  .topbar *,
  .topbar-rail *,
  .topbar-inner *{
    min-width: 0 !important;
  }
}

/* Small-phone compression (split out to valid top-level media) */
@media (max-width: 390px){

  .topbar{
    padding: 8px 8px !important;
  }

  .topbar-rail,
  .topbar-inner,
  .topbar-row{
    gap: 6px !important;
    padding: 7px !important; /* kept from earlier patch */
  }

  .topbar-brand,
  .brand-chip{
    max-width: 120px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .topbar-brand__name,
  .brand-chip__label{
    font-size: 8px !important;
    letter-spacing: .06em !important;
  }

  .cta-run-top,
  .topbar-cta,
  .cta-top{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .cta-run-top__label,
  .topbar-cta__label,
  .cta-top__label{
    font-size: 9px !important;
    letter-spacing: .03em !important;
  }

  .cta-run-top[href*="credits"] .cta-run-top__label,
  .cta-run-top[href*="signin"] .cta-run-top__label{
    font-size: 9px !important;
    letter-spacing: .03em !important;
  }
}

/* =========================================================
   9) GLOBAL CREDITS BUTTON TEXT = WHITE LEGIBILITY TREATMENT
   ========================================================= */

a[href*="credits"],
a[href*="credits.html"],
.btn-credits,
.cta-credits,
.credits-btn,
.credit-btn,
.topbar a[href*="credits"],
.rail-drawer a[href*="credits"],
.site-footer a[href*="credits"]{
  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.25px rgba(0,0,0,.18);
}

a[href*="credits"] *,
a[href*="credits.html"] *,
.btn-credits *,
.cta-credits *,
.credits-btn *,
.credit-btn *{
  color: inherit !important;
  text-shadow: inherit !important;
  -webkit-text-stroke: inherit !important;
}

a[href*="credits"]:hover,
a[href*="credits"]:focus,
a[href*="credits"]:active,
.btn-credits:hover,
.btn-credits:focus,
.btn-credits:active,
.cta-credits:hover,
.cta-credits:focus,
.cta-credits:active{
  color: rgba(255,255,255,.99) !important;
}

/* backup: defeat text-fill overrides */
a[href*="credits"],
a[href*="credits"] *{
  -webkit-text-fill-color: rgba(255,255,255,.97) !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;
  }
}

/* =========================================================
   11) INDEX CTA COLOR SPLIT (Exact selectors)
   ========================================================= */

/* Shared polish for hero actions */
.stage .lockup .actions .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 */
.stage .lockup .actions > a.btn.primary[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);
}

.stage .lockup .actions > a.btn.primary[href*="signin"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.stage .lockup .actions > a.btn.primary[href*="signin"]:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Enter Site -> gold */
.stage .lockup .actions > a.btn.secondary.cta-enter{
  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;
}

.stage .lockup .actions > a.btn.secondary.cta-enter:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.stage .lockup .actions > a.btn.secondary.cta-enter:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Play Brand Theme -> blue steel */
.stage .lockup .actions > button.btn.secondary.audio-btn{
  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);
}

.stage .lockup .actions > button.btn.secondary.audio-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.stage .lockup .actions > button.btn.secondary.audio-btn:active{
  transform: translateY(0);
  filter: brightness(.98);
}

.stage .lockup .actions > button.btn.secondary.audio-btn .ico{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.98) !important;
}

.stage .lockup .actions > button.btn.secondary.audio-btn[aria-pressed="true"] .ico{
  background: rgba(200,161,43,.16) !important;
  border-color: rgba(200,161,43,.38) !important;
}

.stage .lockup .actions > button.btn.secondary.audio-btn .audio-copy small{
  color: rgba(255,255,255,.82) !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;
  }
}
/* =========================================================
   CANONICAL MOBILE TOP RAIL (replace all previous topbar mobile patches)
   Layout: [brand] [credits] [sign in] [menu]
   ========================================================= */
@media (max-width: 720px){

  /* Top shell */
  .topbar{
    margin: 0 !important;
    padding: 8px !important;
  }

  /* Rail row */
  .topbar > .topbar-rail{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* Hide center status panel on mobile */
  .topbar > .topbar-rail > .topbar-box{
    display: none !important;
  }

  /* Brand chip */
  .topbar > .topbar-rail > .topbar-brand{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 132px !important;

    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    margin: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .topbar > .topbar-rail > .topbar-brand > .topbar-brand__name{
    display: block !important;
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Actions cluster */
  .topbar > .topbar-rail > .topbar-actions{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* Credits + Sign In buttons */
  .topbar > .topbar-rail > .topbar-actions > .cta-run-top{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 84px !important;

    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    margin: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar > .topbar-rail > .topbar-actions > .cta-run-top > .cta-run-top__label{
    display: block !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;
  }

  /* REAL menu button: fixed slot, always visible */
  .topbar > .topbar-rail > .topbar-actions > #railToggle.topbar-menu{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
    order: 99 !important;
  }

  /* Center the existing burger wrapper ONLY (no bar recolor/rebuild) */
  .topbar > .topbar-rail > .topbar-actions > #railToggle.topbar-menu > .icon-burger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Small phones */
@media (max-width: 390px){
  .topbar{ padding: 7px !important; }

  .topbar > .topbar-rail{ gap: 5px !important; }

  .topbar > .topbar-rail > .topbar-brand{
    max-width: 118px !important;
    padding: 0 8px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .topbar > .topbar-rail > .topbar-brand > .topbar-brand__name{
    font-size: 9px !important;
    letter-spacing: .03em !important;
  }

  .topbar > .topbar-rail > .topbar-actions{
    gap: 5px !important;
  }

  .topbar > .topbar-rail > .topbar-actions > .cta-run-top{
    max-width: 78px !important;
    padding: 0 8px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .topbar > .topbar-rail > .topbar-actions > .cta-run-top > .cta-run-top__label{
    font-size: 9px !important;
    letter-spacing: .02em !important;
  }

  .topbar > .topbar-rail > .topbar-actions > #railToggle.topbar-menu{
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}
/* =========================================================
   EMERGENCY FIX — FORCE REAL MENU BUTTON BACK ON MOBILE
   ========================================================= */
@media (max-width: 720px){

  /* make sure actions row can show all children */
  .topbar-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  /* FORCE the real menu button visible */
  .topbar-actions > #railToggle,
  .topbar-actions > .topbar-menu,
  #railToggle.topbar-menu,
  #railToggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 0 0 6px !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 42px !important;
    order: 999 !important;

    position: relative !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* if an old patch hides the icon wrapper */
  #railToggle .icon-burger{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* keep middle box hidden on mobile */
  .topbar-box{
    display: none !important;
  }

  /* let other chips shrink before menu disappears */
  .topbar-brand{
    max-width: 132px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .topbar-actions > .cta-run-top{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 84px !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);
}

/* =========================================================
   SYSTEM PAGE — USE INDEX CTA COLOR SPLIT
   Applies the exact index button colors to System hero CTAs
   ========================================================= */

/* Shared polish for hero actions */
body.system .system-actions .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 */
body.system .system-actions > a.btn.primary[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);
}
@media (hover:hover){
  body.system .system-actions > a.btn.primary[href*="signin"]:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
  }
}
body.system .system-actions > a.btn.primary[href*="signin"]:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Get Credits -> gold (same as Enter Site) */
body.system .system-actions > a.btn.secondary.cta-enter{
  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;
}
@media (hover:hover){
  body.system .system-actions > a.btn.secondary.cta-enter:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
  }
}
body.system .system-actions > a.btn.secondary.cta-enter:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Submit a Decision -> blue steel
   (support both <button> and <a>) */
body.system .system-actions > :is(button,a).btn.secondary.audio-btn{
  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);
}
@media (hover:hover){
  body.system .system-actions > :is(button,a).btn.secondary.audio-btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
  }
}
body.system .system-actions > :is(button,a).btn.secondary.audio-btn:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* =========================================================
   CREDIT ROW — FORCE LAYOUT (kills dead space)
   Put this at the VERY END of your CSS file
   ========================================================= */
.credit-chips .credit-chips__inner{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* NOT space-between */
  gap: 12px !important;
}

/* label should NEVER expand */
.credit-chips .credit-chips__label{
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

/* row takes remaining room, packs can sit at end or start */
.credit-chips .credit-chips__row{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important; /* change to flex-start if you want left */
  gap: 0 !important;
  min-width: 0 !important;
}

/* if you wrapped packs in .credit-chips__seg */
.credit-chips .credit-chips__seg{
  margin-left: 0 !important;
}
/* ================================
   CREDIT ROW — FORCE NO DEAD SPACE
   Paste BELOW all other rules
   ================================ */

.credit-chips .credit-chips__inner{
  justify-content: flex-start !important; /* kill space-between */
}

.credit-chips .credit-chips__label{
  flex: 0 0 auto !important;              /* never expand */
  margin-right: 10px !important;
}

.credit-chips .credit-chips__row{
  flex: 1 1 auto !important;              /* take remaining width */
  justify-content: flex-start !important;  /* start right after label */
}
/* =========================================================
   CREDIT PACKS ROW — SHORTER / TIGHTER (after layout fix)
   Drop at END of CSS
   ========================================================= */

.credit-chips{
  margin: 6px auto 0 !important; /* slightly closer to top rail */
}

.credit-chips .credit-chips__inner{
  padding: 7px 10px !important;   /* was 10px 12px */
  border-radius: 10px !important; /* tighter module */
}

/* label smaller + less tall */
.credit-chips .credit-chips__label{
  font-size: 10px !important;
  letter-spacing: .11em !important;
  opacity: .78 !important;
}

/* divider less tall so it doesn’t imply “big header space” */
.credit-chips .credit-chips__label::after{
  height: 14px !important;
}

/* segmented shell a touch tighter */
.credit-chips .credit-chips__seg{
  border-radius: 9px !important;
}

/* pack buttons shorter */
.credit-chips .chip-buy{
  height: 28px !important;     /* was 34px */
  min-width: 40px !important;  /* smaller but still clickable */
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

/* separators soften */
.credit-chips .credit-chips__seg .chip-buy + .chip-buy{
  border-left-color: rgba(255,255,255,.08) !important;
}

/* Mobile: even tighter */
@media (max-width: 720px){
  .credit-chips{ width: calc(100% - 16px) !important; }
  .credit-chips .credit-chips__inner{ padding: 7px 8px !important; }
  .credit-chips .chip-buy{ height: 26px !important; min-width: 38px !important; }
}
/* =========================================================
   CREDIT PACKS ROW — NARROWER (not full width) + MORE GAP
   Put at END of CSS
   ========================================================= */

/* More space under the top rail */
.credit-chips{
  margin: 14px auto 0 !important;  /* increase from 6–8px to 14px */
  width: auto !important;          /* stop forcing a wide container */
  max-width: none !important;
}

/* Make the module shrink to its contents */
.credit-chips .credit-chips__inner{
  width: fit-content !important;   /* key: shrink */
  max-width: calc(100% - 20px) !important; /* still safe on small screens */
  margin: 0 !important;            /* no centering */
}

/* Keep everything tight-left and prevent label/row from stretching */
.credit-chips .credit-chips__label,
.credit-chips .credit-chips__row{
  flex: 0 0 auto !important;
}

/* If you want the packs to wrap nicely when space is tight */
.credit-chips .credit-chips__row{
  flex-wrap: nowrap !important;    /* keep it one line on desktop */
}

/* Mobile: let it use the full width again if needed */
@media (max-width: 720px){
  .credit-chips{
    margin: 12px auto 0 !important;
    width: calc(100% - 16px) !important;
  }
  .credit-chips .credit-chips__inner{
    width: 100% !important;        /* full width on mobile for safety */
    max-width: none !important;
  }
  .credit-chips .credit-chips__row{
    justify-content: flex-end !important;
    flex-wrap: wrap !important;     /* allow wrap on very small screens */
  }
}
/* =========================================================
   CREDIT PACKS — GUTTER DOCK MODULE (tracks/sticky)
   - vertical card near page border
   - label/desc left, buttons right
   ========================================================= */

.credit-chips--dock{
  position: sticky;
  top: 86px;                 /* adjust to sit under your top rail */
  z-index: 25;

  /* make it live “in the gutter” */
  width: fit-content;
  margin: 14px 0 0 0;
  padding-left: 14px;        /* << “inch in” from the inside edge */
}

/* Card */
.credit-chips--dock .credit-chips__inner{
  width: 360px;              /* module width */
  max-width: calc(100vw - 28px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;

  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 36px rgba(0,0,0,.28);
}

/* Left meta column */
.credit-chips--dock .credit-chips__meta{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.credit-chips--dock .credit-chips__label{
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.80);
  white-space: nowrap;
}

.credit-chips--dock .credit-chips__desc{
  font-size: 12px;
  color: rgba(255,255,255,.60);
  line-height: 1.2;
  max-width: 18ch;           /* keeps it “module-like” */
}

/* Right controls */
.credit-chips--dock .credit-chips__controls{
  display:flex;
  align-items:center;
}

/* Segmented control (square-ish) */
.credit-chips--dock .credit-chips__seg{
  display:flex;
  overflow:hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.credit-chips--dock .chip-buy{
  height: 30px;
  min-width: 42px;
  padding: 0 10px;

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

  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.88) !important;
  text-decoration:none;
  font-weight: 850;
  font-size: 12px;
}

.credit-chips--dock .chip-buy + .chip-buy{
  border-left: 1px solid rgba(255,255,255,.10);
}

@media (hover:hover){
  .credit-chips--dock .chip-buy:hover{
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
  }
}
.credit-chips--dock .chip-buy:active{ transform: translateY(0); }

/* Optional active state */
.credit-chips--dock .chip-buy.is-active{
  background: rgba(200,161,43,.18);
  box-shadow: inset 0 0 0 1px rgba(200,161,43,.40);
  color: rgba(255,255,255,.95) !important;
}

/* Mobile: collapse descriptor + keep module inside frame */
@media (max-width: 720px){
  .credit-chips--dock{
    top: 74px;
    padding-left: 10px;
    margin-top: 12px;
  }
  .credit-chips--dock .credit-chips__inner{
    width: auto;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .credit-chips--dock .credit-chips__desc{ display:none; }
}
/* =========================================================
   CREDIT PACKS — subtle tinted translucency per pack
   (keeps pro look; no loud colors)
   ========================================================= */

/* base pack styling stays the same; we add a tint layer */
.credit-chips--dock .credit-pack.chip-buy{
  position: relative;
  isolation: isolate; /* keeps tint effects contained */
  overflow: hidden;
}

/* tint layer */
.credit-chips--dock .credit-pack.chip-buy::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  z-index: -1;

  /* default tint if none matched */
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  opacity: .85;
}

/* a very soft “edge glow” to sell translucency */
.credit-chips--dock .credit-pack.chip-buy::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---- per pack tint (subtle, translucent) ---- */

/* Top Up (1) — cool steel */
.credit-chips--dock .credit-pack.chip-buy[data-pack="1"]::before{
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(140,180,220,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(110,150,190,.10), rgba(255,255,255,.02));
}

/* Baseline (5) — bronze/olive warm */
.credit-chips--dock .credit-pack.chip-buy[data-pack="5"]::before{
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(200,161,43,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(168,132,51,.10), rgba(255,255,255,.02));
}

/* Cadence (10) — green-teal “steady” */
.credit-chips--dock .credit-pack.chip-buy[data-pack="10"]::before{
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(90,200,180,.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(70,160,150,.10), rgba(255,255,255,.02));
}

/* Temp (25) — violet/infra “urgent” but restrained */
.credit-chips--dock .credit-pack.chip-buy[data-pack="25"]::before{
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(170,120,220,.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(120,90,170,.10), rgba(255,255,255,.02));
}

/* Hover: lift brightness slightly, not saturation */
@media (hover:hover){
  .credit-chips--dock .credit-pack.chip-buy:hover::before{
    opacity: 1;
    filter: brightness(1.04);
  }
}

/* Active/selected: use your existing .is-active,
   but let tint still show through */
.credit-chips--dock .credit-pack.chip-buy.is-active{
  border-color: rgba(255,255,255,.20);
}

/* =========================================================
   GATEWAY DRAWER — SECTION GROUPS (My Account / Support)
   - Adds clean section headers + spacing
   - Keeps existing drawer mechanics untouched
   ========================================================= */

body.gateway .rail-body .rail-section{
  display: grid;
  gap: 6px;
  padding: 4px 0;
}

body.gateway .rail-body .rail-section__head{
  margin: 6px 0 4px;
  padding: 0 2px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.78);
  opacity: .82;
}

/* Give the groups some breathing room */
body.gateway .rail-body .rail-divider{
  margin: 10px 0;
  opacity: .55;
}

/* Make "sub" links feel secondary without disappearing */
body.gateway .rail-link--sub{
  opacity: .86;
}

/* Optional: slightly tighter link height on gateway */
body.gateway .rail-link{
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Optional: keep CTA zone visually separate (still your buttons) */
body.gateway .rail-cta-zone{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
/* =========================================================
   GATEWAY DRAWER — ALIGN ACCOUNT NOTE WITH LINKS
   Fix: "My Account" block hugs left while links are padded
   ========================================================= */

/* Give the account note the same horizontal rhythm as links */
body.gateway .rail-account-note{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Use the drawer's own link padding as the source of truth */
body.gateway .rail-account-note__kicker,
body.gateway .rail-account-note__text{
  padding-left: var(--rail-pad, 18px) !important;
  padding-right: var(--rail-pad, 18px) !important;
}

/* If your links are using a different padding than 18px,
   set the variable once to match them. */
body.gateway #railDrawer{
  --rail-pad: 18px;
}