*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cobalt:#2351E5;
  --cobalt-light:#4A72FF;
  --navy:#0A0F1E;
  --surface:#EEECEA;
  --white:#fff;
  --lime:#7AC231;
  --amber:#E8A020;
  --red:#D94040;
  --text:#0A0F1E;
  --text-2:#4A5568;
  --text-3:#8896A8;
  --border:#D8D5CE;
  --font:'Inter Tight','Inter',sans-serif;
  --body:'Inter','Inter Tight',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--surface);color:var(--text);line-height:1.65;overflow-x:hidden}

/* NAV (mirrors main site) */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 52px;height:62px;background:rgba(10,15,30,0.97);border-bottom:1px solid rgba(255,255,255,0.08)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{width:32px;height:32px;object-fit:cover;display:block}
.logo-text{font-family:var(--font);font-size:18px;font-weight:700;color:#fff;letter-spacing:-0.02em}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{color:rgba(255,255,255,0.55);text-decoration:none;font-size:14px;font-family:var(--font);font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-btn{background:var(--cobalt);color:#fff;border:none;cursor:pointer;padding:11px 22px;border-radius:4px;font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:0.01em;transition:background .2s;text-decoration:none;display:inline-block}
.nav-btn:hover{background:var(--cobalt-light)}

/* PAGE HEADER */
.page-head{background:var(--navy);padding:140px 52px 56px;position:relative;overflow:hidden}
.page-head-grid{position:absolute;inset:0;opacity:0.035;background-image:linear-gradient(rgba(255,255,255,1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,1) 1px,transparent 1px);background-size:64px 64px}
.page-head-inner{max-width:1020px;margin:0 auto;position:relative}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase;margin-bottom:18px}
.crumb a{color:var(--cobalt-light);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.page-head h1{font-family:var(--font);font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1.1;color:#fff;letter-spacing:-0.03em;margin-bottom:16px}
.page-head .lede{font-size:17px;color:rgba(255,255,255,.65);max-width:640px}
.head-meta{display:flex;gap:16px;margin-top:22px;flex-wrap:wrap}
.head-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cobalt-light);background:rgba(35,81,229,.15);border:1px solid rgba(35,81,229,.3);border-radius:100px;padding:5px 14px}

/* ARTICLE BODY */
.article-wrap{max-width:1020px;margin:0 auto;padding:56px 52px 96px}
.article{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:52px 56px}
.article h2{font-family:var(--font);font-size:24px;font-weight:700;letter-spacing:-0.02em;margin:44px 0 14px}
.article h2:first-child{margin-top:0}
.article h3{font-family:var(--font);font-size:17px;font-weight:600;margin:30px 0 10px}
.article p{margin:0 0 16px;color:var(--text-2);font-size:15.5px}
.article strong{color:var(--text)}
.article ul,.article ol{margin:0 0 16px 22px;color:var(--text-2);font-size:15.5px}
.article li{margin-bottom:9px}
.article li::marker{color:var(--cobalt);font-weight:600}
.article a{color:var(--cobalt);text-decoration:none}
.article a:hover{text-decoration:underline}
.article code{font-family:var(--mono);font-size:13px;background:#F4F2EF;border:1px solid var(--border);border-radius:3px;padding:2px 6px;color:var(--text);white-space:nowrap}
.article hr{border:none;border-top:1px solid var(--border);margin:40px 0}

/* Callouts */
.callout{border-radius:6px;padding:18px 20px;margin:0 0 20px;font-size:15px;border:1px solid;display:flex;gap:12px;align-items:flex-start}
.callout .co-icon{flex-shrink:0;font-size:16px;line-height:1.5}
.callout p{margin:0;font-size:15px}
.callout p+p{margin-top:8px}
.co-key{background:rgba(35,81,229,.06);border-color:rgba(35,81,229,.28)}
.co-key p{color:var(--text)}
.co-warn{background:rgba(232,160,32,.07);border-color:rgba(232,160,32,.4)}
.co-good{background:rgba(122,194,49,.08);border-color:rgba(122,194,49,.45)}

/* Solution cards */
.sol{border:1px solid var(--border);border-radius:6px;padding:20px 22px;margin-bottom:14px;background:#FBFAF9}
.sol-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.sol-num{font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;background:var(--cobalt);border-radius:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sol-title{font-family:var(--font);font-size:16px;font-weight:600;color:var(--text)}
.sol-badge{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:3px 10px;margin-left:auto}
.b-best{background:rgba(122,194,49,.15);color:#4E8A15;border:1px solid rgba(122,194,49,.5)}
.b-alt{background:rgba(136,150,168,.12);color:var(--text-2);border:1px solid var(--border)}
.sol p{margin:0;font-size:15px}
.sol p+p{margin-top:8px}

/* Steps table */
.mech{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.mech td{border:1px solid var(--border);padding:12px 14px;vertical-align:top;color:var(--text-2)}
.mech td:first-child{font-family:var(--mono);font-size:12px;color:var(--cobalt);white-space:nowrap;width:1%;font-weight:600;background:#FBFAF9}

/* References */
.refs{list-style:none;margin:0;padding:0}
.refs li{margin:0 0 10px;padding-left:0;font-size:14.5px}
.refs .ref-src{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-3);text-transform:uppercase;display:block}

/* Article footer */
.article-foot{margin-top:44px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.article-foot .updated{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--text-3);text-transform:uppercase}
.article-foot a{color:var(--cobalt);text-decoration:none;font-size:14px;font-weight:500;font-family:var(--font)}
.article-foot a:hover{text-decoration:underline}

/* HUB (support index) */
.hub-wrap{max-width:1020px;margin:0 auto;padding:56px 52px 96px}
.hub-section-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.qa-card{display:block;background:var(--white);border:1px solid var(--border);border-radius:8px;padding:26px 30px;text-decoration:none;transition:border-color .2s, box-shadow .2s;margin-bottom:14px}
.qa-card:hover{border-color:var(--cobalt);box-shadow:0 4px 18px rgba(10,15,30,.06)}
.qa-card .qa-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);background:rgba(35,81,229,.07);border:1px solid rgba(35,81,229,.25);border-radius:100px;padding:3px 10px;display:inline-block;margin-bottom:12px}
.qa-card h2{font-family:var(--font);font-size:19px;font-weight:600;letter-spacing:-0.01em;color:var(--text);margin-bottom:8px}
.qa-card p{font-size:14.5px;color:var(--text-2);margin:0}
.qa-card .qa-more{display:inline-block;margin-top:14px;font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--cobalt)}
.hub-contact{margin-top:36px;border:1px dashed var(--border);border-radius:8px;padding:24px 30px;text-align:center;color:var(--text-2);font-size:14.5px}
.hub-contact a{color:var(--cobalt);text-decoration:none;font-weight:500}
.hub-contact a:hover{text-decoration:underline}

/* FOOTER (mirrors main site) */
footer{background:var(--navy);padding:28px 52px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.footer-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.footer-logo img{width:24px;height:auto;opacity:.55;display:block}
.footer-logo-text{font-family:var(--font);font-size:15px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:-0.02em}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links a{font-family:var(--font);font-size:13px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.7)}
.footer-copy{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.25);letter-spacing:.02em}

@media(max-width:760px){
  nav{padding:0 22px}
  .nav-links{display:none}
  .page-head{padding:120px 22px 44px}
  .article-wrap,.hub-wrap{padding:36px 18px 72px}
  .article{padding:32px 24px}
  footer{padding:24px 22px}
}