:root {
  --navy: #0a1628;
  --navy-2: #14233d;
  --gold: #f4b942;
  --gold-deep: #c8902a;
  --coral: #e94560;
  --coral-deep: #c93350;
  --cream: #fafaf7;
  --paper: #ffffff;
  --ink: #14182b;
  --muted: #6b7280;
  --line: #e5e7eb;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --shadow: 0 1px 3px rgba(10,22,40,.06), 0 1px 2px rgba(10,22,40,.04);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,Helvetica,Arial,sans-serif; background:var(--cream); color:var(--ink); line-height:1.7; font-size:16px; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--coral); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.tight { max-width:780px; margin:0 auto; padding:0 1.25rem; }

.topbar { background:#06101e; color:#cbd5e1; font-size:.78rem; padding:.45rem 0; border-bottom:1px solid #0d1d36; }
.topbar .wrap { display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.tb-meta { color:#94a3b8; }
.tb-shield { display:inline-block; width:13px; height:13px; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border-radius:2px 2px 7px 7px; }

header.site { background:var(--navy); color:#fff; padding:.6rem 0; position:sticky; top:0; z-index:50; box-shadow:var(--shadow); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; flex-direction:column; align-items:center; gap:.25rem; color:#fff; text-decoration:none; line-height:1; }
.brand-logo { height:64px !important; width:auto; display:block; }
.brand-sub { font-size:.62rem; letter-spacing:2px; color:var(--gold); text-transform:uppercase; font-weight:700; opacity:.7; text-align:center; }
@media (max-width:680px) { .brand-logo { height:50px !important; } .brand-sub { font-size:.55rem; letter-spacing:1.4px; } header.site { padding:.4rem 0; } }
@media (max-width:480px) { .brand-logo { height:44px !important; } .brand-sub { font-size:.5rem; letter-spacing:1.2px; } }
nav.primary { display:flex; gap:1.4rem; align-items:center; }
nav.primary a { color:#cbd5e1; font-size:.92rem; font-weight:500; }
nav.primary a:hover { color:var(--gold); text-decoration:none; }
.nav-dd { position:relative; }
.nav-dd > button { background:none; border:0; color:#cbd5e1; font-size:.92rem; font-weight:500; cursor:pointer; padding:0; font-family:inherit; display:inline-flex; align-items:center; gap:.3rem; }
.nav-dd > button:hover { color:var(--gold); }
.nav-dd > button::after { content:"▾"; font-size:.7rem; opacity:.6; }
.nav-dd-menu { position:absolute; top:calc(100% + 12px); left:0; min-width:220px; background:var(--navy-2); border:1px solid #1f2c45; border-radius:8px; padding:.5rem 0; opacity:0; visibility:hidden; transform:translateY(-4px); transition:all .15s; z-index:60; box-shadow:0 12px 28px rgba(0,0,0,.35); }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-dd-menu a { display:block; padding:.55rem 1rem; color:#cbd5e1; font-size:.88rem; font-weight:500; }
.nav-dd-menu a:hover { background:rgba(244,185,66,.1); color:var(--gold); text-decoration:none; }
.nav-cta { background:var(--coral); color:#fff !important; padding:.5rem 1rem; border-radius:6px; font-weight:600; font-size:.85rem; }
.nav-cta:hover { background:var(--coral-deep); text-decoration:none; }
.menu-toggle { display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer; }

.page-hero { background:linear-gradient(135deg,#0a1628 0%,#14233d 100%); color:#fff; padding:3rem 0 2.5rem; }
.crumbs { font-size:.78rem; color:#94a3b8; margin-bottom:1rem; }
.crumbs a { color:#cbd5e1; }
.crumbs span { margin:0 .35rem; }
.page-hero h1 { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; line-height:1.2; letter-spacing:-.4px; }
.page-hero p.lede { color:#cbd5e1; max-width:720px; margin-top:.75rem; font-size:1rem; }

.content { padding:3rem 0; }
.content h2 { font-size:1.5rem; font-weight:800; margin:2rem 0 .75rem; color:var(--navy); }
.content h2:first-child { margin-top:0; }
.content h3 { font-size:1.15rem; font-weight:700; margin:1.5rem 0 .5rem; color:var(--navy); }
.content p { margin-bottom:1rem; color:#374151; }
.content ul, .content ol { margin:.5rem 0 1rem 1.5rem; color:#374151; }
.content li { margin-bottom:.4rem; }
.content blockquote { border-left:4px solid var(--gold); padding:1rem 1.25rem; background:#fef3c7; margin:1.25rem 0; border-radius:6px; color:#78350f; }

.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); margin:1.5rem 0; background:#fff; }
table.compare { width:100%; border-collapse:collapse; font-size:.92rem; min-width:480px; }
table.compare th, table.compare td { padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line); }
table.compare thead { background:var(--navy); color:#fff; }
table.compare thead th { font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.8px; }
table.compare tbody tr:nth-child(even) { background:#fafbfc; }

.warn-box { background:#fff5f5; border:1px solid #fecaca; border-left:4px solid var(--bad); padding:1rem 1.25rem; border-radius:8px; margin:1.25rem 0; font-size:.95rem; color:#7f1d1d; }
.info-box { background:#eff6ff; border:1px solid #bfdbfe; border-left:4px solid #2563eb; padding:1rem 1.25rem; border-radius:8px; margin:1.25rem 0; font-size:.95rem; color:#1e3a8a; }
.tip-box { background:#f0fdf4; border:1px solid #bbf7d0; border-left:4px solid var(--good); padding:1rem 1.25rem; border-radius:8px; margin:1.25rem 0; font-size:.95rem; color:#14532d; }

.author { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:2rem; margin:2.5rem 0; display:grid; grid-template-columns:120px 1fr; gap:1.5rem; align-items:start; box-shadow:var(--shadow); }
.author-photo { width:120px; height:120px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--gold),var(--coral)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:2.2rem; }
.author-photo img { width:100%; height:100%; object-fit:cover; }
.author h3 { margin:0 0 .25rem; color:var(--navy); }
.author-role { color:var(--coral); font-size:.9rem; font-weight:600; }
@media (max-width:680px) { .author { grid-template-columns:1fr; text-align:center; } .author-photo { margin:0 auto; } }

footer.site { background:var(--navy); color:#cbd5e1; padding:3rem 0 1.5rem; margin-top:4rem; font-size:.9rem; }
footer.site .ftgrid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
footer.site h4 { color:#fff; font-size:.95rem; margin-bottom:.85rem; }
footer.site a { color:#cbd5e1; }
footer.site a:hover { color:var(--gold); }
footer.site ul { list-style:none; margin:0; padding:0; }
footer.site ul li { margin-bottom:.4rem; }
footer.site .brand { color:#fff; margin-bottom:.5rem; }
footer.site .ft-blurb { color:#94a3b8; font-size:.85rem; line-height:1.6; }
footer.site .ft-badges { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
footer.site .ft-badge { background:rgba(255,255,255,.06); padding:.4rem .7rem; border-radius:6px; font-size:.75rem; color:#cbd5e1; border:1px solid rgba(255,255,255,.08); }
.ft-bottom { border-top:1px solid #1f2c45; padding-top:1.25rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem; color:#94a3b8; font-size:.8rem; }
@media (max-width:768px) { footer.site .ftgrid { grid-template-columns:1fr 1fr; } footer.site .ftgrid .ft-about { grid-column:1 / -1; } }
@media (max-width:480px) { footer.site .ftgrid { grid-template-columns:1fr; } }

.sponsor-row { background:#fff8e1; border-bottom:1px solid #fde68a; font-size:.78rem; color:#92400e; padding:.5rem 0; text-align:center; }
.sponsor-row strong { color:#78350f; }

@media (max-width:880px) {
  nav.primary { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; padding:.5rem 1.25rem 1rem; gap:0; border-top:1px solid var(--line); box-shadow:0 8px 20px rgba(10,22,40,.08); }
  nav.primary.open { display:flex; }
  nav.primary > a { padding:.85rem 0; border-bottom:1px solid var(--line); color:var(--navy); font-weight:600; font-size:1rem; }
  nav.primary > a:last-child { border-bottom:0; }
  .menu-toggle { display:block; }
  .nav-dd { border-bottom:0; }
  .nav-dd > button { display:none !important; }
  .nav-dd-menu { position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important; background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; display:block !important; }
  .nav-dd-menu a { display:block !important; padding:.85rem 0 !important; padding-left:0 !important; border-bottom:1px solid var(--line) !important; color:var(--navy) !important; font-weight:600 !important; font-size:1rem !important; background:transparent !important; }
  .nav-dd-menu a:hover { color:var(--coral) !important; background:transparent !important; }
  nav.primary > .nav-cta { text-align:center !important; padding:.95rem 1rem !important; margin-top:.85rem !important; border-bottom:0 !important; font-size:1rem; border-radius:8px; }
}