/* ==========================================================================
   DoCalc — Core stylesheet
   Shared across every niche (SaaS, Finance, Insurance, Real Estate).
   Niche accent colors are applied via body[data-niche] in niche-specific.css.
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none !important; }
a:link, a:visited, a:hover, a:active { text-decoration: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
/* Defensive: without this, any element that's both [hidden] AND carries a
   class setting its own `display` (e.g. .btn's `display: inline-flex`)
   stays visible — an author-stylesheet `display` rule beats the browser's
   built-in `[hidden] { display: none }` UA rule on a cascade tie. Bit us
   on #logout-btn (.btn.btn-outline + hidden) in the admin panel. */
[hidden] { display: none !important; }

/* ---- Design tokens ---- */
:root {
  /* Brand */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #eff6ff;

  /* Niche accents (overridden per-page via body[data-niche]) */
  --color-accent: var(--color-primary);
  --color-accent-dark: var(--color-primary-dark);
  --color-accent-light: var(--color-primary-light);

  /* Neutrals */
  --color-ink: #0f172a;
  --color-muted: #64748b;
  /* #697690 rather than the lighter slate-400 (#94a3b8): at small sizes
     (11-12.5px, used throughout for meta text/hints) slate-400 only hits
     2.56:1 on white, well under WCAG AA's 4.5:1 for normal text. */
  --color-faint: #697690;
  --color-border: #e2e8f0;
  --color-surface: #f8fafc;
  --color-bg: #ffffff;

  /* Feedback — darkened from the brighter Tailwind 600 shades so 11px
     bold badge text (e.g. .badge-live) clears 4.5:1 on their tinted
     backgrounds; dark mode re-brightens these back up (see below), since
     the darker shades read too low-contrast on dark, translucent badge
     backgrounds. */
  --color-success: #15803d;
  --color-success-light: #f0fdf4;
  --color-warn: #b45309;
  --color-warn-light: #fffbeb;
  --color-danger: #b91c1c;
  --color-danger-light: #fef2f2;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --max-width: 1160px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #f1f5f9;
    --color-muted: #94a3b8;
    --color-faint: #7b899f;
    --color-border: #263041;
    --color-surface: #131a29;
    --color-bg: #0b1120;
    --color-accent-light: rgba(37, 99, 235, 0.14);
    --color-success: #16a34a;
    --color-success-light: rgba(22, 163, 74, 0.12);
    --color-warn: #d97706;
    --color-warn-light: rgba(217, 119, 6, 0.12);
    --color-danger: #ef4444;
    --color-danger-light: rgba(220, 38, 38, 0.12);
  }
}

/* ---- Manual theme override ----
   The media query above sets the OS-detected default; these attribute
   selectors (set by js/main.js's theme toggle) win regardless of OS
   setting since `:root[data-theme]` outranks a plain `:root` in
   specificity, letting an explicit user choice override the OS default
   in either direction. */
:root[data-theme="dark"] {
  --color-ink: #f1f5f9;
  --color-muted: #94a3b8;
  --color-faint: #7b899f;
  --color-border: #263041;
  --color-surface: #131a29;
  --color-bg: #0b1120;
  --color-accent-light: rgba(37, 99, 235, 0.14);
  --color-success: #16a34a;
  --color-success-light: rgba(22, 163, 74, 0.12);
  --color-warn: #d97706;
  --color-warn-light: rgba(217, 119, 6, 0.12);
  --color-danger: #ef4444;
  --color-danger-light: rgba(220, 38, 38, 0.12);
}
:root[data-theme="light"] {
  --color-ink: #0f172a;
  --color-muted: #64748b;
  --color-faint: #697690;
  --color-border: #e2e8f0;
  --color-surface: #f8fafc;
  --color-bg: #ffffff;
  --color-accent-light: var(--color-primary-light);
  --color-success: #15803d;
  --color-success-light: #f0fdf4;
  --color-warn: #b45309;
  --color-warn-light: #fffbeb;
  --color-danger: #b91c1c;
  --color-danger-light: #fef2f2;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

main { flex: 1; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(28px, 4.5vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: clamp(18px, 2.2vw, 21px); }
p { color: var(--color-muted); }
p + p { margin-top: 12px; }

.text-ink { color: var(--color-ink); }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 1000;
  background: var(--color-ink); color: var(--color-bg);
  padding: 10px 16px; border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600;
  min-width: 48px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-outline { background: transparent; color: var(--color-ink); border: 1px solid var(--color-border); }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-block { width: 100%; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 16px; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--color-ink);
  flex-shrink: 0;
}
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary), #7c3aed);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.logo-img { height: 28px; width: auto; display: block; }
.nav-links {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--color-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-ink); background: var(--color-surface); }
.nav-soon {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--color-surface); color: var(--color-faint);
  border: 1px solid var(--color-border);
  border-radius: 3px; padding: 1px 5px; margin-left: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.currency-switch {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--color-border); border-radius: 100px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-ink);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.currency-switch svg { width: 15px; height: 15px; color: var(--color-muted); }
.currency-switch:hover { border-color: var(--color-accent); color: var(--color-accent); }
.currency-switch:hover svg { color: var(--color-accent); }
.search-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-border); border-radius: 100px;
  color: var(--color-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.search-toggle svg { width: 17px; height: 17px; }
.search-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-border); border-radius: 100px;
  color: var(--color-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: flex; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-toggle {
  display: none;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---- Nav dropdown / mega menu ("Utility Tools", "All Calculators") ---- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--color-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-dropdown-trigger:hover, .nav-dropdown-trigger[aria-expanded="true"] {
  color: var(--color-ink); background: var(--color-surface);
}
.nav-dropdown-trigger svg { width: 14px; height: 14px; transition: transform 0.15s ease; flex-shrink: 0; }
.nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-dropdown-panel, .nav-megamenu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 120;
}
.nav-dropdown-panel.is-open, .nav-megamenu.is-open { display: block; }

.nav-dropdown-panel { min-width: 220px; padding: 8px; }
.nav-dropdown-panel a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--color-ink);
}
.nav-dropdown-panel a:hover { background: var(--color-surface); color: var(--color-accent); }

.nav-megamenu {
  left: 50%; transform: translateX(-50%);
  width: 660px; max-width: 90vw;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.nav-megamenu-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.nav-megamenu-col h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-faint); margin-bottom: 10px;
}
.nav-megamenu-col a { display: block; padding: 6px 0; font-size: 13.5px; font-weight: 600; color: var(--color-ink); }
.nav-megamenu-col a:hover { color: var(--color-accent); }
.nav-megamenu-more {
  display: flex; align-items: center; gap: 6px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 13px; font-weight: 700; color: var(--color-accent);
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed; inset: 72px 0 0 0;
    background: var(--color-bg);
    flex-direction: column; align-items: stretch;
    padding: 16px 20px; gap: 4px;
    justify-content: flex-start;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    overflow-y: auto;
  }
  .nav-links.open { opacity: 1; transform: translateY(0); visibility: visible; }
  .nav-links a { padding: 14px 12px; font-size: 16px; border-bottom: 1px solid var(--color-border); border-radius: 0; }
  .nav-toggle { display: flex; }

  /* Dropdowns/mega menu collapse into an inline accordion on mobile,
     matching the rest of .nav-links, instead of a floating panel. */
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger {
    width: 100%; justify-content: space-between;
    padding: 14px 12px; font-size: 16px;
    border-bottom: 1px solid var(--color-border); border-radius: 0;
  }
  .nav-dropdown-panel, .nav-megamenu {
    position: static; transform: none;
    width: 100%; max-width: none; min-width: 0;
    box-shadow: none; border: none; border-radius: 0;
    background: var(--color-surface);
    padding: 4px 0 4px 16px;
  }
  .nav-megamenu-grid { grid-template-columns: 1fr; gap: 4px; }
  .nav-megamenu-col { margin-bottom: 12px; }
  .nav-megamenu-more { border-top: none; margin-top: 4px; padding-top: 4px; }
}

/* On narrow phones, the logo + search/theme/currency/hamburger row is wider
   than the viewport — .nav-actions doesn't wrap (that would break the fixed
   72px header height), so the overflow pushes the hamburger button off the
   right edge and forces horizontal scroll on the whole page. Trim the two
   widest, most compressible pieces: the currency switch's text code (icon
   stays, matching the search/theme icon-only buttons) and the logo. */
@media (max-width: 539px) {
  .nav-bar { gap: 8px; }
  .logo-img { height: 24px; }
  .nav-actions { gap: 6px; }
  .currency-switch {
    width: 36px; height: 36px; padding: 0;
    justify-content: center;
  }
  .currency-switch [data-currency-switch-label] { display: none; }
}
@media (max-width: 359px) {
  .logo-img { height: 22px; }
  .container.nav-bar { padding-left: 12px; padding-right: 12px; }
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  padding: 16px 0;
  font-size: 13px; color: var(--color-muted);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* ---- Hero ---- */
.hero {
  padding: 64px 0 56px;
  text-align: center;
}
/* Homepage hero only (.hero--home) — a soft, blurred calculator-symbol
   pattern in the brand's four logo colors, with a white wash gradient
   over it so text stays legible regardless of what part of the pattern
   lands behind it. Light-mode only: a pattern designed on a white
   background reads wrong on a dark page, so dark mode just falls back
   to the plain solid background (same override pattern used for every
   other theme-aware rule in this file). */
.hero--home {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.82)),
    url("/assets/images/hero-pattern-bg.jpg");
  background-size: cover;
  background-position: center;
}
@media (prefers-color-scheme: dark) {
  .hero--home { background-image: none; }
}
:root[data-theme="dark"] .hero--home { background-image: none; }
:root[data-theme="light"] .hero--home {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.82)),
    url("/assets/images/hero-pattern-bg.jpg");
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-light);
  border-radius: 100px; padding: 6px 14px;
  margin-bottom: 20px;
}
.hero h1 { max-width: 760px; margin: 0 auto 18px; }
.hero .lede { max-width: 620px; margin: 0 auto 32px; font-size: 18px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-stats {
  display: flex; justify-content: center; gap: 40px;
  margin-top: 48px; flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat strong { display: block; font-size: 26px; font-family: var(--font-mono); color: var(--color-ink); }
.hero-stat span { font-size: 13px; color: var(--color-muted); }

/* ---- Section ---- */
.section { padding: 56px 0; }
.section-border-top { border-top: 1px solid var(--color-border); }
.section-surface { background: var(--color-surface); }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.section-head p { margin-top: 8px; max-width: 560px; }
.section-link { font-size: 14px; font-weight: 600; color: var(--color-accent); white-space: nowrap; }
.section-link:hover { color: var(--color-accent-dark); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 8px; display: block;
}

/* ---- Category cards (browse by niche) ---- */
.category-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.category-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}
.category-card:hover { border-color: var(--card-color, var(--color-accent)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-card .icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--card-color, var(--color-accent)) 12%, transparent);
  color: var(--card-color, var(--color-accent));
}
.category-card .icon svg { width: 24px; height: 24px; }
.category-card h3 { font-size: 17px; color: var(--color-ink); }
.category-card p { font-size: 13.5px; margin: 0; color: var(--color-muted); }
.category-card .count {
  font-size: 12px; font-weight: 600; color: var(--card-color, var(--color-accent));
  margin-top: auto; display: flex; align-items: center; gap: 4px;
}
.category-card .badge-soon {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--color-surface); color: var(--color-faint);
  border: 1px solid var(--color-border); border-radius: 4px; padding: 3px 8px;
}

/* ---- Calculator card grid (featured / listing) ---- */
.calc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.calc-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.calc-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.calc-card .tag {
  align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  color: var(--card-color, var(--color-accent));
  background: color-mix(in srgb, var(--card-color, var(--color-accent)) 12%, transparent);
}
.calc-card h3 { font-size: 15.5px; color: var(--color-ink); }
.calc-card p { font-size: 13px; margin: 0; color: var(--color-muted); }
.calc-card .go {
  margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--color-accent);
  display: flex; align-items: center; gap: 4px;
}
.calc-card--soon { cursor: default; }
.calc-card--soon:hover { border-color: var(--color-border); box-shadow: none; }
.calc-card--soon h3, .calc-card--soon p { opacity: 0.75; }
.calc-card--soon .badge-soon { margin-top: auto; align-self: flex-start; }

/* ---- Feature list (why multi-niche / why choose us) ---- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature-item { text-align: center; }
.feature-item .icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-accent-light); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.feature-item .icon svg { width: 24px; height: 24px; }
.feature-item h3 { font-size: 15px; margin-bottom: 6px; }
.feature-item p { font-size: 13.5px; }

/* ---- Newsletter / email capture ---- */
.newsletter {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  text-align: center;
}
.newsletter h2 { color: #fff; margin-bottom: 8px; }
.newsletter p { color: #94a3b8; max-width: 480px; margin: 0 auto 24px; }
.newsletter-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter-form input[type="email"] {
  flex: 1; min-width: 220px;
  height: 48px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid #334155;
  background: #1e293b; color: #fff;
}
.newsletter-form input::placeholder { color: #64748b; }
.newsletter-interests {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 18px;
}
.newsletter-interests label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #cbd5e1;
  border: 1px solid #334155; border-radius: 100px; padding: 6px 12px;
  cursor: pointer;
}
.newsletter-interests input { accent-color: var(--color-primary); }
.newsletter-note { font-size: 12px; color: #64748b; margin-top: 14px; }
.form-success {
  display: none;
  font-size: 14px; color: #4ade80;
  margin-top: 14px;
}
.form-success.show { display: block; }

/* ---- Blog / article cards ---- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.article-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.article-card .thumb {
  aspect-ratio: 16/9; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-faint); font-family: var(--font-mono); font-size: 12px;
  overflow: hidden;
}
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card .body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.article-card .tag {
  align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-accent);
  background: var(--color-accent-light); border-radius: 4px; padding: 3px 8px;
}
.article-card .body h3 { font-size: 15px; line-height: 1.4; color: var(--color-ink); }
.article-card .body p { font-size: 13px; line-height: 1.35; margin: 0; font-weight: 400; color: var(--color-muted); }
.article-meta { font-size: 12px; color: var(--color-faint); display: flex; gap: 8px; }

/* ---- Content pages (about/legal/pillar) ---- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 40px; margin-bottom: 14px; }
.prose h3 { margin-top: 24px; margin-bottom: 10px; }
.prose p { font-size: 15.5px; line-height: 1.75; color: var(--color-muted); }
.prose ul, .prose ol { margin: 14px 0 14px 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: 15.5px; line-height: 1.7; margin-bottom: 6px; color: var(--color-muted); }
.prose a { color: var(--color-accent); font-weight: 600; }
.prose strong { color: var(--color-ink); }
.callout {
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  background: var(--color-surface); border-radius: var(--radius-sm);
  padding: 16px 20px; margin: 20px 0;
}
.callout p { margin: 0; font-size: 14.5px; }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--color-border); padding: 18px 0; }
.faq-item h3 { font-size: 15.5px; margin-bottom: 8px; }
.faq-item p { font-size: 14.5px; margin: 0; }

/* ---- Blog article template ---- */
.article-layout {
  display: grid; grid-template-columns: 1fr 300px; gap: 24px;
  align-items: start;
}
.article-layout .prose { max-width: none; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-layout .calc-ads-col { position: static; }
}
.article-head-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 12.5px; color: var(--color-faint); margin-top: 14px;
}
.article-figure {
  margin: 26px 0; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border);
}
.article-figure img { width: 100%; height: auto; display: block; }
.article-figure figcaption {
  padding: 10px 14px; font-size: 12.5px; color: var(--color-muted);
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}

.answer-box {
  border: 1px solid var(--color-accent);
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  padding: 18px 22px; margin: 22px 0 28px;
}
.answer-box-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 8px;
}
.answer-box p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-muted); }
.answer-box p + p { margin-top: 8px; }

.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.pros-col, .cons-col {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 18px 20px;
}
.pros-col { border-top: 3px solid var(--color-success); }
.cons-col { border-top: 3px solid var(--color-danger); }
.pros-col h3, .cons-col h3 { font-size: 14px; margin: 0 0 12px; }
.pros-col ul, .cons-col ul { margin: 0; padding: 0; list-style: none; }
.pros-col li, .cons-col li {
  font-size: 14px; line-height: 1.6; padding-left: 22px; position: relative;
  margin-bottom: 8px; color: var(--color-ink);
}
.pros-col li:last-child, .cons-col li:last-child { margin-bottom: 0; }
.pros-col li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }
.cons-col li::before { content: "✕"; position: absolute; left: 0; color: var(--color-danger); font-weight: 700; }

.best-for-box {
  border: 1px solid var(--color-border); border-left: 3px solid #7c3aed;
  background: var(--color-surface); border-radius: var(--radius-sm);
  padding: 18px 22px; margin: 22px 0;
}
.best-for-box h3 { font-size: 14px; margin: 0 0 12px; color: var(--color-ink); }
.best-for-box ul { margin: 0; padding: 0; list-style: none; }
.best-for-box li {
  font-size: 14.5px; line-height: 1.6; padding-left: 20px; position: relative;
  margin-bottom: 7px; color: var(--color-ink);
}
.best-for-box li:last-child { margin-bottom: 0; }
.best-for-box li::before { content: "→"; position: absolute; left: 0; color: #7c3aed; }

.source-list { font-size: 13px; color: var(--color-muted); line-height: 1.8; }
.source-list a { color: var(--color-accent); }

@media (max-width: 680px) {
  .pros-cons-grid { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 56px 0 28px;
  margin-top: auto;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px; padding-bottom: 36px;
}
.footer-brand p { font-size: 13.5px; margin-top: 12px; max-width: 260px; }
.footer-col h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-muted); margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: 13.5px; color: var(--color-ink);
  padding: 5px 0;
}
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--color-border);
  font-size: 12.5px; color: var(--color-faint); flex-wrap: wrap; gap: 10px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted);
}
.footer-social a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.footer-social svg { width: 15px; height: 15px; }

/* ---- Misc utility ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  border-radius: 4px; padding: 3px 8px;
}
.badge-live { color: var(--color-success); background: var(--color-success-light); }
.badge-soon { color: var(--color-faint); background: var(--color-surface); border: 1px solid var(--color-border); }

/* ---- Bookmark / Add-to-Home-Screen toast ---- */
.bookmark-toast {
  position: fixed;
  bottom: 20px; right: 20px; left: auto;
  z-index: 1500;
  width: calc(100vw - 40px);
  max-width: 340px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.bookmark-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bookmark-toast-close {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); font-size: 16px;
}
.bookmark-toast-close:hover { background: var(--color-surface); color: var(--color-ink); }
.bookmark-toast-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 20px; }
.bookmark-toast-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: var(--color-accent-light); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.bookmark-toast-icon svg { width: 18px; height: 18px; }
.bookmark-toast-title { font-size: 13.5px; font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.bookmark-toast-body { font-size: 12.5px; color: var(--color-muted); line-height: 1.55; margin: 0 0 14px; }
.bookmark-toast-body kbd {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ink);
}
.bookmark-toast-actions { display: flex; gap: 8px; }
.bookmark-toast-actions .btn { height: 36px; padding: 0 16px; font-size: 12.5px; flex: 1; }

@media (max-width: 480px) {
  .bookmark-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; width: auto; }
}

/* ---- Cookie consent banner ---- */
.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 1700;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.consent-banner.show { transform: translateY(0); }
.consent-banner-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.consent-banner-text { flex: 1; min-width: 240px; font-size: 13px; color: var(--color-muted); line-height: 1.6; margin: 0; }
.consent-banner-text a { color: var(--color-accent); }
.consent-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-banner-actions .btn { height: 40px; padding: 0 20px; font-size: 13px; }

@media (max-width: 640px) {
  .consent-banner-inner { flex-direction: column; align-items: stretch; }
  .consent-banner-actions { flex-direction: column; }
}

/* ---- Currency selection modal ---- */
.currency-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: currency-fade-in 0.15s ease;
}
@keyframes currency-fade-in { from { opacity: 0; } to { opacity: 1; } }
.currency-modal-card {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 86vh; overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px;
}
.currency-modal-card h2 { font-size: 20px; margin-bottom: 8px; }
.currency-modal-card > p { font-size: 13.5px; margin-bottom: 22px; }
.currency-modal-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.currency-option {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.currency-option:hover, .currency-option:focus-visible {
  border-color: var(--color-accent); background: var(--color-accent-light); outline: none;
}
.currency-option-symbol {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-surface);
  font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--color-ink);
}
.currency-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.currency-option-text strong { font-size: 13px; color: var(--color-ink); }
.currency-option-text span { font-size: 11.5px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.currency-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--color-muted);
}
.currency-modal-close:hover { background: var(--color-surface); color: var(--color-ink); }

@media (max-width: 480px) {
  .currency-modal-grid { grid-template-columns: 1fr; }
  .currency-modal-card { padding: 24px; }
}

/* ---- Calculator search modal ---- */
.search-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px;
  padding-top: 10vh;
  animation: currency-fade-in 0.15s ease;
}
.search-modal-card {
  width: 100%; max-width: 560px;
  max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.search-input-row svg { width: 18px; height: 18px; color: var(--color-muted); flex-shrink: 0; }
.search-input-row input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--color-ink);
}
.search-input-row input::placeholder { color: var(--color-faint); }
.search-modal-close {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--color-faint);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.search-modal-close:hover { border-color: var(--color-accent); color: var(--color-accent); }
.search-results { overflow-y: auto; padding: 8px; }
.search-result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm);
}
.search-result[data-active="true"], .search-result:hover { background: var(--color-surface); }
.search-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result-main strong { font-size: 14px; color: var(--color-ink); }
.search-result-desc {
  font-size: 12.5px; color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--color-accent); background: var(--color-accent-light);
  border-radius: 100px; padding: 3px 9px; white-space: nowrap;
}
.search-empty {
  padding: 28px 16px; text-align: center;
  font-size: 13.5px; color: var(--color-muted); line-height: 1.7;
}
.search-empty a { color: var(--color-accent); font-weight: 600; }

@media (max-width: 480px) {
  .search-modal-overlay { padding-top: 0; align-items: flex-start; padding: 0; }
  .search-modal-card { max-width: none; height: 100vh; max-height: 100vh; border-radius: 0; }
  .search-results { flex: 1; }
}