/* ============================================================
   Gold theme preview — "Private bank" palette
   Layered AFTER styles.css. Safe to delete this file to revert.
   ============================================================ */

:root{
  /* Anchor: deeper navy, more "vault" than the original */
  --cp-brand: #0a1628;
  --cp-brand-soft: rgba(10, 22, 40, .08);

  /* Gold tokens */
  --cp-gold: #C9A961;        /* decorative gold (buttons, borders, glyphs) */
  --cp-gold-deep: #9E7A38;   /* text-on-white gold (AA readable) */
  --cp-gold-hover: #B8924A;
  --cp-gold-soft: rgba(201, 169, 97, .10);
  --cp-gold-line: rgba(201, 169, 97, .28);
  --cp-gold-glow: rgba(201, 169, 97, .18);

  /* Repoint link/kicker color to gold (used by .cp-kicker) */
  --cp-link: var(--cp-gold-deep);

  /* Legacy brand var still used by older modules */
  --brand: var(--cp-gold);
  --pl-brand: var(--cp-gold);
}

/* ---------- Header (subtle gold underline accent) ---------- */
.cp-header{
  border-bottom: 1px solid rgba(201, 169, 97, .18) !important;
}
.cp-header .cp-brand{ color: var(--cp-brand) !important; }

/* Nav tab underline — was blue→green gradient, now gold */
.cp-nav a::after,
.cp-nav-trigger::after{
  background: linear-gradient(90deg, var(--cp-gold), var(--cp-gold-hover)) !important;
}
.cp-nav a:hover,
.cp-nav-trigger:hover,
.cp-nav a.is-active,
.cp-nav-dropdown.is-active .cp-nav-trigger{
  color: var(--cp-brand) !important;
}
.cp-nav-menu a:hover .cp-menu-title,
.cp-nav-menu a.is-active .cp-menu-title{
  color: var(--cp-brand) !important;
}
.cp-nav-menu a.is-active{
  background: var(--cp-gold-soft) !important;
}
.cp-nav-menu a.is-active .cp-menu-title{
  color: var(--cp-gold-deep) !important;
}

/* Dropdown menu icons: blue→gold (POBO). keep stocks/card/app as-is for color cue */
.cp-nav-menu a[data-nav="pobo"] .cp-menu-icon{
  background: linear-gradient(135deg, rgba(201,169,97,.22), rgba(201,169,97,.05)) !important;
  color: var(--cp-gold-deep) !important;
}
.cp-menu-icon{
  background: linear-gradient(135deg, rgba(201,169,97,.16), rgba(201,169,97,.04)) !important;
  color: var(--cp-gold-deep) !important;
}
.cp-nav-menu a[data-nav="stocks"] .cp-menu-icon,
.cp-nav-menu a[data-nav="creditcard"] .cp-menu-icon,
.cp-nav-menu a[data-nav="app"] .cp-menu-icon{
  /* keep their individual color hues — only override the default blue */
}

/* Language menu active state — blue → gold */
.cp-lang .lang a.active,
.cp-lang .lang a[aria-current="true"]{
  color: var(--cp-gold-deep) !important;
  background: var(--cp-gold-soft) !important;
}
.cp-lang .lang a.active::after,
.cp-lang .lang a[aria-current="true"]::after{
  background-color: var(--cp-gold-deep) !important;
}

/* Header CTA primary (used on some pages) — navy fill is fine, keep but adjust hover */
.cp-cta.primary{
  background: var(--cp-brand) !important;
  border-color: var(--cp-brand) !important;
}
.cp-cta.primary:hover{
  background: #14305c !important;
  border-color: #14305c !important;
}

/* ---------- Hero ---------- */
#homeContent .cp-display,
.cp-hero-copy .cp-display{
  color: var(--cp-brand);
}
.cp-hero-meta strong{ color: var(--cp-brand); }

/* Hero stage glows: blue → gold */
.cp-hero-stage-glow{
  background:
    radial-gradient(420px 280px at 12% 0%, var(--cp-gold-glow), transparent 70%),
    radial-gradient(320px 240px at 85% 5%, rgba(201,169,97,.10), transparent 70%) !important;
}
.cp-stage-card--main::before{
  background: linear-gradient(160deg, var(--cp-gold-glow), transparent 60%) !important;
}
.cp-stage-card--main{
  border-color: rgba(201, 169, 97, .22) !important;
}

/* Account panel accents */
.cp-panel-tag{
  background: var(--cp-gold-soft) !important;
  color: var(--cp-gold-deep) !important;
  border-color: var(--cp-gold-line) !important;
}
.cp-panel-balance strong{ color: var(--cp-brand) !important; }
.cp-stage-flow-group--in .cp-stage-flow-label{ color: var(--cp-gold-deep) !important; }

/* ---------- Primary button — full gold statement ---------- */
.cp-btn-primary{
  background: var(--cp-gold) !important;
  color: var(--cp-brand) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,
              0 8px 22px rgba(201, 169, 97, .28) !important;
}
.cp-btn-primary:hover{
  background: var(--cp-gold-hover) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,
              0 10px 26px rgba(184, 146, 74, .35) !important;
}
.cp-btn-ghost{
  background: rgba(10, 22, 40, .04) !important;
  color: var(--cp-brand) !important;
}
.cp-btn-ghost:hover{
  background: rgba(10, 22, 40, .07) !important;
}

/* ---------- Kicker / labels ---------- */
.cp-kicker{
  color: var(--cp-gold-deep) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px !important;
}

/* ---------- Section feature background sweep — blue → gold ---------- */
.cp-section-feature{
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(201,169,97,.07), transparent 70%),
    linear-gradient(180deg, #faf8f3 0%, var(--cp-bg) 100%) !important;
  border-color: rgba(201, 169, 97, .18) !important;
}
.cp-section-tinted{
  background: linear-gradient(180deg, #faf8f3 0%, var(--cp-bg) 100%) !important;
  border-color: rgba(201, 169, 97, .14) !important;
}

/* ---------- Trust strip ---------- */
.cp-trust-strip{
  background: linear-gradient(180deg, #fdfbf6, #ffffff) !important;
  border-color: rgba(201, 169, 97, .16) !important;
}
.cp-trust-strip-icon{
  background: var(--cp-gold-soft) !important;
  color: var(--cp-gold-deep) !important;
  border: 1px solid var(--cp-gold-line) !important;
}
.cp-trust-strip-text strong{ color: var(--cp-brand) !important; }
.cp-trust-strip-cta a{
  color: var(--cp-gold-deep) !important;
  font-weight: 600;
}

/* ---------- Bridge (Web3 ↔ TradFi) ---------- */
.cp-bridge-core{
  background:
    linear-gradient(180deg, #11233f 0%, #0a1628 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(201, 169, 97, .35) !important;
  box-shadow: 0 18px 44px rgba(10, 22, 40, .25),
              0 0 0 1px rgba(201, 169, 97, .10) inset !important;
}
/* "CARD PLUS" eyebrow — text only, no heavy fill */
.cp-bridge-core-tag{
  background: transparent !important;
  color: var(--cp-gold) !important;
  padding: 0 !important;
  border: 0 !important;
}
.cp-bridge-core-title{ color: #fff !important; }
.cp-bridge-core-desc{ color: rgba(255,255,255,.72) !important; }
.cp-bridge-arrow{ color: var(--cp-gold-deep) !important; }
.cp-bridge-side-label{ color: var(--cp-gold-deep) !important; font-weight: 700; }

/* ---------- Suite cards — unify the blue "remit" tile to gold ---------- */
.cp-suite-card{
  border-color: var(--cp-line) !important;
}
.cp-suite-card:hover{
  border-color: var(--cp-gold-line) !important;
  box-shadow: 0 20px 42px rgba(201, 169, 97, .12) !important;
}
.cp-suite-card--remit .cp-suite-hero-icon{
  background: var(--cp-gold-soft) !important;
  color: var(--cp-gold-deep) !important;
}
.cp-suite-card--remit:hover{ border-color: var(--cp-gold-line) !important; }
/* Suite eyebrow — uppercase text label, no pill */
.cp-suite-tag{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--cp-gold-deep) !important;
}
.cp-suite-card--remit .cp-suite-tag,
.cp-suite-card--stocks .cp-suite-tag,
.cp-suite-card--card .cp-suite-tag,
.cp-suite-card--app .cp-suite-tag{
  color: var(--cp-gold-deep) !important;
}
.cp-suite-link{
  color: var(--cp-gold-deep) !important;
  font-weight: 600;
}
.cp-suite-card h3{ color: var(--cp-brand) !important; }

/* ---------- Capability (Why Card Plus) ---------- */
.cp-capability-num{
  color: var(--cp-gold) !important;
  font-weight: 700;
  letter-spacing: .04em;
}
.cp-capability-item h3{ color: var(--cp-brand) !important; }

/* ---------- Get started block — gold edge on the card ---------- */
.cp-getstarted-card{
  border: 1px solid rgba(201, 169, 97, .22) !important;
  background:
    radial-gradient(600px 260px at 80% 0%, rgba(201,169,97,.08), transparent 65%),
    linear-gradient(180deg, #fffdf7 0%, #ffffff 70%) !important;
  box-shadow: 0 1px 2px rgba(10,22,40,.04),
              0 22px 52px rgba(201, 169, 97, .10) !important;
}
.cp-step-num{
  background: var(--cp-gold) !important;
  color: var(--cp-brand) !important;
  font-weight: 700;
}
.cp-steps li strong{ color: var(--cp-brand) !important; }

/* ---------- Footer security bar — gold edge ---------- */
.footer-security-bar{
  border-top: 1px solid rgba(201, 169, 97, .20) !important;
}
.security-item svg{ color: var(--cp-gold-deep) !important; }

/* ---------- Catch-all: any leftover Apple-blue pills become gold ---------- */
.pill{
  background: var(--cp-gold-soft) !important;
  border-color: var(--cp-gold-line) !important;
  color: var(--cp-gold-deep) !important;
}
.pl-tile-badge{
  background: var(--cp-gold-soft) !important;
  border-color: var(--cp-gold-line) !important;
  color: var(--cp-gold-deep) !important;
}
.suite-tag{
  background: var(--cp-gold-soft) !important;
  border-color: var(--cp-gold-line) !important;
  color: var(--cp-gold-deep) !important;
}

/* ---------- Page-specific blue leftovers ---------- */

/* App page: top kicker pill ("MANAGE YOUR CREDIT CARD...") */
body[data-page="app"] .app-download-section .c-font3{
  background: var(--cp-gold-soft) !important;
  color: var(--cp-gold-deep) !important;
}

/* Trust page hero "trust-icon" SVG stroke */
#homeContent .trust-icon svg,
#trustContent .trust-icon svg{
  stroke: var(--cp-gold-deep) !important;
}

/* Trust flow node — bordered "core" pill */
.flow-node-core{
  border-color: var(--cp-gold-line) !important;
  box-shadow: 0 20px 42px var(--cp-gold-glow) !important;
}

/* Pearl guide card hover */
.pl-guide-card:hover{
  border-color: var(--cp-gold-line) !important;
}

/* Credit-card page card-grid blue tint */
body[data-page="creditcard"] .box-border > div:before{
  background: linear-gradient(135deg, var(--cp-gold-glow), rgba(24,163,124,.10)) !important;
}

/* Trust page feature icon tiles */
.trust-flow-section .bridge-step-icon,
.trust-feature-icon{
  background: var(--cp-gold-soft) !important;
  color: var(--cp-gold-deep) !important;
}

/* Bridge "Web3 in" tags — used to be soft blue, now soft gold */
.cp-bridge-side--in .cp-bridge-tags li{
  background: var(--cp-gold-soft) !important;
  border-color: var(--cp-gold-line) !important;
}

/* Suite card hover border (line 4412) — already in our hover rule above,
   but the original 0,113,227 still applies via cascade for the base hover. Reinforce. */
.cp-suite-card:hover{
  border-color: var(--cp-gold-line) !important;
}

/* Resource cards on trust page */
.cp-resource-card:hover{
  border-color: var(--cp-gold-line) !important;
}

/* Trust banner kicker pill */
.cp-trust-banner-copy .cp-kicker{
  background: var(--cp-gold-soft) !important;
  color: var(--cp-gold-deep) !important;
}

/* Section-feature & various radial background washes — re-tint blue→gold */
.cp-section-feature,
.cp-trust-banner,
.cp-trust-flow-section,
.cp-resource-section{
  background-image:
    radial-gradient(800px 400px at 50% 0%, var(--cp-gold-glow), transparent 70%),
    linear-gradient(180deg, #faf8f3 0%, var(--cp-bg) 100%) !important;
}

/* Hero panel "soft blue card" wash */
.cp-hero-panel::before{
  background: linear-gradient(160deg, var(--cp-gold-glow), transparent 50%) !important;
}

/* Trust page hero bg sweep */
#trustContent .cp-hero{
  background-image:
    radial-gradient(720px 300px at 12% 10%, var(--cp-gold-glow), transparent 65%),
    linear-gradient(180deg, #faf8f3, var(--cp-bg)) !important;
}

/* Misc accent icons that used #1d4ed8 */
.feature-icon-blue,
.icon-accent-blue{
  background: var(--cp-gold-soft) !important;
  color: var(--cp-gold-deep) !important;
}