/* ============================================================
   PBRX TONE SPRINKLE
   Two reusable tones for small, supporting boxes so long reads
   pick up rhythm as the visitor educates themselves:
     .tone-cream  →  warm paper (#EFEBE4 fill, #D8D2C7 hairline)
     .tone-onyx   →  onyx panel (#11171F frame, #212B36 tiles)
   Applied to existing groups only — no layout changes.
   ============================================================ */

/* ---------- CREAM ---------- */
.tone-cream.market,
.tone-cream.fin-facts{border-color:#D8D2C7;background:#D8D2C7}
.tone-cream .mtile,
.tone-cream .fin-fact{background:#EFEBE4;-webkit-backdrop-filter:none;backdrop-filter:none}
.tone-cream .mtile::before{background:#0A66C9}
.tone-cream .mtile .mv,
.tone-cream .fin-fact .fv{color:#1A1A1A}
.tone-cream .mtile .ml{color:#5D625C}
.tone-cream .fin-fact .fd{color:#4D504D}

.tone-cream.kws{border-top-color:#D8D2C7;border-bottom-color:#D8D2C7;background:#EFEBE4;padding:11px 16px;border-radius:10px;color:#5D625C}
.tone-cream.kws i{color:#0A66C9;opacity:.7}

.tone-cream.pfh-std span,
.tone-cream.chiprow .schip,
.tone-cream.proofstrip{background:#EFEBE4;border-color:#D8D2C7;color:#3F4A44}
.tone-cream.proofstrip span{color:#3F4A44}

.tone-cream.journey{background:#EFEBE4;border:1px solid #D8D2C7;border-radius:14px;padding:22px 20px}
.tone-cream .jstep h4{color:#1A1A1A}
.tone-cream .jstep p{color:#4D504D}

.tone-cream.csv-kits .csv-kit{background:#EFEBE4;border-color:#D8D2C7}

/* ---------- ONYX ---------- */
.tone-onyx.market,
.tone-onyx.fin-facts{border:1px solid rgba(255,255,255,.16);background:#11171F}
.tone-onyx .mtile,
.tone-onyx .fin-fact{background:#212B36;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tone-onyx .mtile::before{background:#08A4F3}
.tone-onyx .mtile .mv,
.tone-onyx .fin-fact .fv{color:#FFFFFF}
.tone-onyx .fin-fact .fi svg{color:#08A4F3}
.tone-onyx .mtile .ml{color:#08A4F3}
.tone-onyx .fin-fact .fd{color:rgba(255,255,255,.78)}

.tone-onyx.kws{border-top-color:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.14);background:#11171F;padding:11px 16px;border-radius:10px;color:rgba(255,255,255,.8)}
.tone-onyx.kws i{color:#08A4F3;opacity:.85}

.tone-onyx.proofstrip,
.tone-onyx.chiprow .schip,
.tone-onyx.pfh-std span{background:#212B36;border-color:rgba(255,255,255,.22);color:#FFFFFF}
.tone-onyx.proofstrip span{color:#FFFFFF}

/* ============================================================
   PBRX POP CARD — approved site-wide dark-section card
   Dark navy fill (no frosted glass), sharp 1px #08A4F3 border,
   small line icon top-left, near-white copy, equal heights.
   ============================================================ */
:root{--pop-fill:#0E1926;--pop-line:rgba(8,164,243,.42);--pop-blue:#08A4F3}

.cs-chip,
.csv-mtile,
.band-navy .mtile,
.tone-onyx .mtile,
.tone-onyx .fin-fact,
.band-navy .card.sheer,
.cs-navy .card.sheer,
.hero-connector.pop .fx-cell{
  background:var(--pop-fill);
  border:1px solid var(--pop-line);
  border-radius:8px;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  color:#FFFFFF;
  transition:border-color .2s ease,background .2s ease;
}
.cs-chip:hover,
.csv-mtile:hover,
.band-navy .mtile:hover,
.tone-onyx .mtile:hover,
.tone-onyx .fin-fact:hover,
.band-navy .card.sheer:hover,
.cs-navy .card.sheer:hover,
.hero-connector.pop .fx-cell:hover{
  background:#12202F;
  border-color:var(--pop-blue);
  box-shadow:none;
  transform:none;
}
.band-navy .card.sheer::before,
.cs-navy .card.sheer::before,
.tone-onyx .mtile::before,
.band-navy .mtile::before{display:none}

/* icon, top-left */
.cs-chip{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 16px 17px;height:100%;font-size:14.5px;line-height:1.45;color:#FFFFFF}
.cs-chip svg{width:18px;height:18px;color:var(--pop-blue);flex:0 0 auto}
.cs-chipgrid{align-items:stretch}

.band-navy .card.sheer .ibadge,
.cs-navy .card.sheer .ibadge{background:rgba(8,164,243,.12);border:1px solid var(--pop-line);color:var(--pop-blue)}
.band-navy .card.sheer .file,
.cs-navy .card.sheer .file{color:rgba(255,255,255,.62)}
.band-navy .card.sheer h4,
.cs-navy .card.sheer h4,
.band-navy .card.sheer h3,
.cs-navy .card.sheer h3{color:#FFFFFF}
.band-navy .card.sheer p,
.cs-navy .card.sheer p,
.cs-navy .card.sheer li{color:rgba(255,255,255,.82)}
.cs-navy .card.sheer .cs-num,
.band-navy .card.sheer .cs-num{color:var(--pop-blue)}

.band-navy .mtile .mv,.tone-onyx .mtile .mv,.csv-mtile b,.tone-onyx .fin-fact .fv{color:#FFFFFF}
.band-navy .mtile .ml,.tone-onyx .mtile .ml,.csv-mtile span{color:var(--pop-blue)}
.tone-onyx .fin-fact .fd{color:rgba(255,255,255,.82)}
.tone-onyx.market,.tone-onyx.fin-facts,.csv-mkt{background:transparent;border:none;gap:12px}

/* home formulary index (POP) */
.hero-connector.pop .formulary{background:transparent;border:1px solid var(--pop-line);border-radius:8px;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.hero-connector.pop .fx-grid{background:transparent;gap:10px;padding:10px}
.hero-connector.pop .fx-cell{padding:16px 15px 17px}
.hero-connector.pop .fx-cell .icon{color:var(--pop-blue)}

/* fear-factor section — can't-miss weight */
#csm-fear{border-top:2px solid var(--pop-blue);background:#0A121F}
#csm-fear .cs-kicker{color:var(--pop-blue)}
#csm-fear h2{font-size:clamp(34px,5vw,58px);max-width:940px}
#csm-fear .cs-lead{font-size:18.5px;color:#FFFFFF}
#csm-fear .cs-chipgrid{margin:26px 0 22px}
#csm-fear .cs-close{font-size:19px;padding-top:18px;border-top:1px solid rgba(8,164,243,.28)}

/* back-to-top: a real button, never a floating white square */
#top{background:#0E1926;border:1px solid var(--pop-line);color:#FFFFFF;box-shadow:none}
#top:hover{background:#12202F;border-color:var(--pop-blue);color:#FFFFFF}
#top .icon{width:20px;height:20px;color:#FFFFFF}