/* ═════════════════════════════════════════════════════════════════
   px-guide.css — overlay that reskins the LEGACY page templates
   (guide/industry/blog pages built on styles.css classes) to the
   px design system. Loads AFTER styles.css and pulse.css.
   The old templates are var()-driven, so most of the work is the
   token remap below; the rest is typography, pills and radii.
   ═════════════════════════════════════════════════════════════════ */

/* ── token remap: old palette → px palette ── */
:root{
  --b:#333333;            /* old brand blue was used for headings/text accents */
  --b2:#4b4be0;
  --b3:#8181ff;
  --bl:#e7ecff;           /* light wash → periwinkle */
  --bm:#d0d4e4;           /* mid border → mist */
  --o:#6161ff;            /* orange accent → violet (single accent colour) */
  --o2:#4b4be0;
  --bg:#f5f6f8;           /* section wash → cloud */
  --t:#333333;--t2:#535768;--t3:#808080;
  --bd:#dddfeb;           /* borders → pebble */
  --ss:rgba(205,208,223,.25) 0 2px 16px;
  --sm:rgba(205,208,223,.4) 0 2px 48px;
  --sl:rgba(205,208,223,.5) 0 4px 56px;
}

/* ── typography: everything inherits Poppins from pulse.css body ── */
body *{font-family:inherit}
h1,h2{font-weight:300;letter-spacing:-.02em;line-height:1.15}
h1 span,h1 em,h2 span,h2 em{font-weight:400;font-style:normal}
h3,h4{font-weight:500;letter-spacing:0}
strong,b{font-weight:600}

/* eyebrows stay violet */
.sec-eye,.gm-eye,.tb-eye,.gba-eye,.fx-eye{color:#6161ff;font-weight:600;letter-spacing:.14em}

/* ── buttons: pill treatment ── */
.btn{border-radius:160px;font-weight:500;border-width:1px;box-shadow:none}
.blg{border-radius:160px;font-weight:500}
.bb{background:#6161ff;border-color:#6161ff;box-shadow:none}
.bb:hover{background:#4b4be0;box-shadow:none;transform:translateY(-1px)}
.bo{border-color:#535768;color:#333}
.bo:hover{background:transparent;border-color:#333;color:#333}
.bw{color:#6161ff;box-shadow:none}
.bg-btn,.bg.btn,a.bg{border-color:rgba(255,255,255,.6)}

/* ── hero backgrounds: flatten old gradients to plain white ── */
.hero,.gm-hero,.gba-hero,.fx-hero,.ind-hero,.blog-hero{background:#fff}
.hero:before,.hero:after{display:none}
.hero-tag,.ind-tag,.blog-cat-pill{background:#e7ecff;border:none;color:#6161ff;font-weight:500;letter-spacing:.02em;text-transform:none;font-size:13px;border-radius:160px;padding:8px 20px}

/* ── dark/brand sections → flat violet panels ── */
.cta-sec,.ind-cta,.pain-sec,.mistakes-sec,.prob,.stats,.sstrip,.stats-strip{background:#6161ff}
.sstrip::before,.sstrip::after,.stats-strip::before,.stats-strip::after{display:none}
.sstrip .ssv,.stats-strip .ss-v{color:#fff}
.sstrip .ssv.o,.stats-strip .ss-v.o{color:#fff}
.sstrip .ssl,.stats-strip .ss-l{color:rgba(255,255,255,.75)}
.cta-rings,.cta-ring,.cta-r,.stats-rings{display:none}
.cta-pill,.cta-pill-w{background:rgba(255,255,255,.15);border:none;color:#fff;font-weight:500;letter-spacing:.04em;border-radius:160px}
.cta-h,.cta-hw{color:#fff}
.cta-h em,.cta-hw em{color:#fff;font-weight:500;font-style:normal}
.pain-card,.mistake-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px}
.mistake-card:before,.pain-card:before{display:none}

/* ── cards: px radii + borders, calm shadows, no gradient accents ── */
.bcard,.cap-card,.rel-card,.inc-card,.rcard,.result-card,.res-card,.feat-card,
.ib,.info-box,.sidebar-card,.faq-item,.fqi,.step-block,.mock-card,.gbp-card,
.fb,.ssb,.ss-box,.gm-q,.hub-card,.related-post,.score-float,.why-card,.ag-card,.scard{
  border-radius:16px;border-color:#d0d4e4;box-shadow:none
}
.bcard:hover,.cap-card:hover,.rel-card:hover,.inc-card:hover,.feat-card:hover,.hub-card:hover,.related-post:hover{
  box-shadow:rgba(205,208,223,.4) 0 2px 48px;border-color:#d0d4e4;transform:translateY(-2px)
}
.bcard:before,.inc-card:before,.feat-card:before,.rel-card:before,.hub-card:before{display:none}

/* ── decorative icon boxes: hidden (no icon imagery in px system) ── */
.bcard-ic,.cap-ic,.rel-ic,.inc-check,.ben-ic,.mc-ic,.rc-icon,.feat-ic,
.why-ic,.val-ic,.ag-ic,.sc-ic,.pc-icon,.culture-ic,.job-icon,.perk-ic,
.upload-ic,.success-ic,.accred-ic,.rp-icon,.ind-ic,.hub-head,.ty-i,.gba-card .ci{display:none}

/* ── process steps / numbered circles ── */
.pstep-n,.ps-num,.ty-step-n,.step-n{background:#6161ff;border-radius:50%;font-weight:600}
.step-line{background:#dddfeb}
.tick,.jr-dot{color:#6161ff}

/* ── FAQ accordions ── */
.fqi,.faq-item,.faq-item-b{background:#fff;border:1px solid #d0d4e4;border-radius:16px}
.fqic,.faq-ic,.faq-toggle{background:transparent;border:none;color:#6161ff;font-weight:300;font-size:20px}
.fqqt,.faq-qt,.faq-q-text{font-weight:500}

/* ── screenshot/browser frames ── */
.browser,.mock-card,.gbp-card{border:1px solid #d0d4e4;border-radius:16px;box-shadow:rgba(205,208,223,.4) 0 2px 48px;overflow:hidden}
.bchrome,.mock-top,.gbp-bar{background:#fff;border-bottom:1px solid #f5f6f8}
.ddot,.md,.gd{background:#dddfeb !important}
.burl,.mock-title,.gbp-search{background:#f5f6f8;color:#808080;border-radius:6px;font-weight:400}

/* ── stats strips ── */
.ssv,.ss-v,.is-v,.res-v,.rc-mv{font-weight:500;color:#333}
.ssv.o,.ss-v.o,.is-v.o{color:#6161ff}

/* ── blog specifics ── */
.blog-h1{font-weight:300;letter-spacing:-.02em}
.blog-lead{color:#535768}
.cta-sidebar{background:#6161ff;border-radius:24px}
.blog-body th{background:#6161ff}
/* in-article CTA bands use an inline navy gradient across all posts */
[style*="#0f1fa8"]{background:#6161ff !important}

/* ── breadcrumbs: quiet ── */
.breadcrumb{background:#fff;border-bottom:1px solid #f5f6f8}
.bc-link,.bc-inner a{color:#6161ff}

/* ── misc cleanups ── */
.hero-blob,.hb1,.hb2,.float-card,.how-float{display:none}
.gm-trust span,.hero-trust .trust-item,.hero-trust .trust-i,.trust-item,.trust-i{color:#535768;font-weight:400}