:root { --bg:#0b0c10; --fg:#111; --ink:#111; --brand:#0e7c86; --muted:#6b7280; --card:#fff; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji'; color:#111; background:#f9fafb; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 100%); margin-inline: auto; padding: 0 16px; }

.skiplink { position:absolute; left:-9999px; }
.skiplink:focus { left:8px; top:8px; background:#fff; padding:8px; border:1px solid #000; }

.topbar { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee; }
.topbar-inner { display:flex; align-items:center; gap:12px; padding:10px 0; }
.brand { font-weight:700; font-size:20px; margin-right:auto; color:#111; }
.search input { width: 52vw; max-width: 420px; border:1px solid #ddd; border-radius:10px; padding:10px 12px; }

.btn { border:1px solid #ddd; background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; }
.btn-ghost { background:transparent; }

.bottomnav { position:fixed; bottom:0; inset-inline:0; display:flex; justify-content:space-around; border-top:1px solid #eee; background:#fff; padding:6px 0; z-index:11; }
.bn-item { padding:8px; font-size:14px; }

.hero { padding:28px 0 8px; }
.hero h1 { font-size: clamp(26px, 5vw, 42px); margin: 12px 0; }
.hero p { color: var(--muted); margin: 6px 0 14px; }
.hero .cta { display:flex; gap:10px; flex-wrap:wrap; }
.badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.grid { display:grid; grid-template-columns: repeat(1, 1fr); gap: 14px; }
.card { background:#fff; border:1px solid #eee; border-radius:14px; padding:16px; }
.card h3 { margin:4px 0 8px; }

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .bottomnav { display:none; }
}

.footer { margin-top:40px; background:#fff; border-top:1px solid #eee; }
.footer-grid { display:flex; gap:20px; justify-content:space-between; padding:18px 0; flex-wrap:wrap; }
.footer-nav a { margin-right:14px; }

/* Mega overlay */
.mega[hidden] { display:none; }
.mega { position:fixed; inset:0; background: rgba(17,17,17,0.5); z-index: 100; backdrop-filter: blur(2px); }
.mega-content { background:#fff; margin:0 auto; height:100%; overflow:auto; }
.mega-head { display:flex; align-items:center; justify-content:space-between; padding:16px 0; position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; }
.mega-grid { display:grid; grid-template-columns: repeat(1, 1fr); gap: 20px; padding: 10px 0 40px; }
.mega-group h3 { margin:0 0 8px; }
.mega-group ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
.mega-group li a { display:block; background:#f3f4f6; padding:10px 12px; border-radius:10px; }
.mega-search { width:100%; padding:12px; border:1px solid #ddd; border-radius:12px; margin:12px 0; }
@media (min-width: 760px) {
  .mega-content{ width:min(950px, 96%); border-radius:16px; margin-top:4vh; height:92vh; }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
  .mega-group ul { grid-template-columns: 1fr; }
}

/* Content styles */
.prose h2 { font-size: 22px; margin: 20px 0 8px; }
.prose p { line-height: 1.6; color:#333; }
.faq details { border:1px solid #eee; margin:8px 0; padding:10px 12px; border-radius:10px; background:#fff; }
.faq summary { cursor:pointer; font-weight:600; }
.breadcrumbs { font-size: 13px; color: var(--muted); margin: 10px 0 6px; }
.breadcrumbs a { color: inherit; }

/* financeAds container helpers */
.tool-wrap { margin: 6px 0 16px; }