:root {
  --brand:#2563eb; --brand-bright:#3b82f6; --brand-deep:#1d4ed8; --brand-glow:#38bdf8;
  --bg:#ffffff; --bg-soft:#f5f8fd; --card:#ffffff; --border:#e6ecf5;
  --text:#0f1b33; --text-soft:#5d6b85;
  --radius:18px; --shadow-sm:0 2px 14px rgba(20,40,90,.06); --shadow-md:0 12px 40px rgba(20,40,90,.10);
  --amber:#b45309; --green:#047857;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Rubik', system-ui, sans-serif; background:var(--bg); color:var(--text); line-height:1.85; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:780px; margin:0 auto; padding:0 20px; }

.topbar { border-bottom:1px solid var(--border); background:rgba(255,255,255,.9); backdrop-filter:blur(8px); position:sticky; top:0; z-index:10; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.logo { display:flex; align-items:center; gap:9px; }
.logo-text { font-family:'Secular One', sans-serif; font-size:19px; letter-spacing:-.2px; }
.logo-text b { color:var(--brand); }
.topbar .cta-top { font-size:14.5px; font-weight:600; color:var(--brand); }

.crumbs { font-size:13px; color:var(--text-soft); padding:18px 0 0; }
.crumbs a { color:var(--brand); }

header.top { padding:22px 0 6px; }
header.top h1 { font-family:'Secular One', sans-serif; font-size:clamp(29px,5.4vw,45px); line-height:1.25; letter-spacing:-.5px; }
header.top .sub { color:var(--text-soft); font-size:17.5px; margin-top:16px; }
header.top .meta { color:#8494ad; font-size:13px; margin-top:16px; }

.hero-band { height:4px; border-radius:99px; margin:22px 0 4px;
  background:linear-gradient(90deg, var(--brand-glow), var(--brand) 55%, var(--brand-deep)); }

article { padding:14px 0 10px; }
article h2 { font-family:'Secular One', sans-serif; font-size:clamp(23px,3.6vw,30px); margin:46px 0 14px; line-height:1.35; letter-spacing:-.3px; }
article h3 { font-size:19px; font-weight:700; margin:26px 0 8px; }
article p { color:#3d4a63; margin-bottom:15px; }
article ul, article ol { color:#3d4a63; margin:0 22px 18px 0; }
article li { margin-bottom:10px; }
article strong { color:var(--text); font-weight:600; }

.toc { background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin:26px 0 8px; }
.toc b { display:block; margin-bottom:10px; font-size:15px; }
.toc ol { margin:0 20px 0 0; color:var(--text-soft); }
.toc li { margin-bottom:6px; font-size:15.5px; }
.toc a { color:var(--brand); }

.q { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:20px 22px; margin-bottom:13px; display:flex; gap:15px; align-items:flex-start; }
.q .n { flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:15px;
  background:rgba(37,99,235,.09); color:var(--brand); border:1px solid rgba(37,99,235,.2); }
.q b { display:block; margin-bottom:5px; font-size:16.5px; }
.q p { margin:0; font-size:15.5px; color:var(--text-soft); }
.q .why { display:block; margin-top:9px; font-size:14.5px; color:var(--amber); }

.note { border-radius:var(--radius); padding:20px 24px; margin:26px 0; border:1px solid; }
.note.tip  { background:rgba(4,120,87,.05);  border-color:rgba(4,120,87,.22); }
.note.warn { background:rgba(180,83,9,.05);  border-color:rgba(180,83,9,.24); }
.note h3 { margin:0 0 8px; }
.note p, .note li { color:#3d4a63; margin-bottom:8px; }

table.cmp { width:100%; border-collapse:collapse; margin:18px 0 22px; font-size:15px; }
table.cmp th, table.cmp td { border:1px solid var(--border); padding:12px 14px; text-align:right; vertical-align:top; }
table.cmp th { background:var(--bg-soft); font-weight:700; }
table.cmp td:first-child { font-weight:600; white-space:nowrap; }

.faq details { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 22px; margin-bottom:11px; box-shadow:var(--shadow-sm); }
.faq summary { cursor:pointer; font-weight:700; font-size:16.5px; }
.faq p { margin:11px 0 0; font-size:15.5px; color:var(--text-soft); }

.cta-band { background:linear-gradient(135deg, rgba(56,189,248,.10), rgba(37,99,235,.08));
  border:1px solid rgba(37,99,235,.16); border-radius:22px; padding:30px 32px; margin:44px 0 10px; text-align:center; box-shadow:var(--shadow-md); }
.cta-band h2 { margin:0 0 10px; font-size:25px; }
.cta-band p { color:var(--text-soft); font-size:15.5px; margin-bottom:20px; }
.cta-band a.btn { display:inline-block; padding:14px 30px; border-radius:14px; font-weight:700; font-size:16px; color:#fff;
  background:linear-gradient(100deg, var(--brand-bright), var(--brand-deep)); box-shadow:0 10px 26px rgba(37,99,235,.28); }

.next { display:grid; gap:12px; margin:16px 0 0; }
.next a { display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow-sm); }
.next a b { color:var(--brand); }
.next a span { display:block; color:var(--text-soft); font-size:14.5px; margin-top:3px; }

footer { border-top:1px solid var(--border); margin-top:44px; padding:28px 0 44px; color:var(--text-soft); font-size:13.5px; text-align:center; }
footer .links { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
footer a { color:var(--brand); }