/* ============================================================
   XcellaPrime rebrand override — loads AFTER main.css / ml.css
   Strategy: remap legacy desk CSS vars to XcellaPrime palette,
   then explicit OPTION_C_HYBRID rules (navy gradient hero,
   white content sections, #0F62F5 pill CTAs, #3B8DFF accents).
   Layout (grid/flex) untouched.
   ============================================================ */

/* ---- remap legacy tokens (main.css consumes these) ---- */
:root{
  --bg:#FFFFFF; --bg2:#F4F7FE; --panel:#FFFFFF;
  --line:#E3E9F4; --line2:#D5DEEF;
  --ink:#0D2149; --muted:#44557A; --faint:#6B7B99;
  --green:#0F62F5; --green-hi:#3B8DFF; --green-dim:#0D2149;
  --gold:#3B8DFF;
  --sans:'Noto Sans Thai','Inter',system-ui,sans-serif;
}

/* ---- base ---- */
body{background:var(--xp-bg-white);color:var(--xp-text-dark)}
body::before{opacity:.35}
a{color:var(--xp-primary)}
a:hover{color:var(--xp-accent)}
h1,h2,h3,h4,h5{font-family:var(--xp-font-heading);color:var(--xp-secondary)}
a:focus-visible{outline:3px solid var(--xp-accent);outline-offset:2px}

/* ---- header: sticky navy glass ---- */
header.site{position:sticky;top:0;z-index:60;background:rgba(13,33,73,0.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
header.site nav.main a{color:#E7EEFC}
header.site nav.main a:hover{color:#FFFFFF;text-decoration:none}
header.site nav.main a[aria-current="page"]{color:var(--xp-accent)}
header.site .brand .tag{color:#9FB4DC}
header.site .nav-toggle{color:#E7EEFC;border-color:rgba(231,238,252,0.35)}
.brand .wm-logo{height:38px;width:auto;display:block}
header.site .btn-cta{box-shadow:none}
@media(max-width:720px){
  header.site nav.main{background:#FFFFFF;border-bottom:1px solid var(--line2)}
  header.site nav.main a{color:#0D2149}
  header.site nav.main a:hover{color:#0F62F5}
}

/* ---- hero: full-bleed navy gradient ---- */
.hero{background:linear-gradient(180deg,var(--xp-hero-navy) 0%,var(--xp-hero-navy-end) 100%);margin:0 -24px;padding:72px 48px 44px;border-radius:0 0 28px 28px}
.hero .kick{color:var(--xp-accent)}
.hero h1{color:#FFFFFF}
.hero h1 .g{color:var(--xp-accent)}
.hero p.lede{color:#C9D6F2}
.hero .trust{color:#9FB4DC}
.hero .trust .mono{color:#C9D6F2}

/* ---- CTAs: blue pills ---- */
.btn-cta{background:var(--xp-primary);color:#FFFFFF;border-radius:var(--xp-pill-radius);font-family:var(--xp-font-heading);font-weight:600;padding:11px 22px;box-shadow:0 6px 18px rgba(15,98,245,0.28)}
.btn-cta:hover{background:var(--xp-accent);text-decoration:none;color:#FFFFFF}

/* ---- cards: white + soft navy shadow ---- */
.acc-card,.plat .pc,.chan .ch{background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--xp-card-radius);box-shadow:var(--xp-card-shadow)}
.acc-card.feat{border-color:var(--xp-primary)}
.acc-card .nm .pill{background:var(--xp-primary);color:#FFFFFF}
.spec-strip{background:var(--bg2);border-radius:var(--xp-card-radius);overflow:hidden}
.steps{border-radius:var(--xp-card-radius);overflow:hidden}
.steps .st{background:#FFFFFF}
.qr-block{background:var(--xp-secondary);border:1px solid rgba(255,255,255,0.08);border-radius:var(--xp-card-radius)}
.qr-block .qr{background:#FFFFFF;border-radius:12px}
.qr-block h3{color:#FFFFFF}
.qr-block p{color:#C9D6F2}
.qr-block .hint{color:#9FB4DC}
.empty-note{background:#FFFFFF;border-radius:var(--xp-card-radius)}

/* ---- component accents ---- */
.sheet-label{border-bottom-color:var(--line2)}
.sheet-label em{color:var(--xp-accent)}
.faq summary .q-m{color:var(--xp-primary)}
.prose blockquote{border-left-color:var(--xp-primary);background:var(--bg2)}
.prose h2{border-top-color:var(--line2)}
.updated-tag{color:var(--xp-accent);border-color:var(--line2)}
.dl-links a:hover{border-color:var(--xp-primary);color:var(--xp-secondary)}
.blog-list .t a{color:var(--xp-secondary)}
.blog-list .c{color:var(--xp-accent)}
.why .n{color:var(--xp-accent)}

/* ---- footer: navy ---- */
footer.site{background:var(--xp-secondary);border-top:0;margin-top:90px}
.fgrid .fh,.fgrid h5{color:#8FA3CF}
.fgrid a{color:#C9D6F2}
.fgrid a:hover{color:#FFFFFF}
.fgrid .about-p{color:#C9D6F2}
.fbar{border-top:1px solid rgba(255,255,255,0.12);color:#8FA3CF}
.risk{border-top:1px solid rgba(255,255,255,0.12);color:#8FA3CF}
.risk a{color:var(--xp-accent)}

/* header polish: logo lockup without tag, nav single-line */
header.site .brand .tag{display:none}
header.site nav.main{white-space:nowrap}