/* ============================================================
   CalculatesNow — Design System
   Loaded AFTER Bootstrap + style.css so these tokens win.
   ============================================================ */

:root {
  /* Brand (teal) */
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;
  --accent-600:#0891b2;

  /* Neutrals (slate) */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --line:    #e6eaef;
  --line-2:  #eef2f6;
  --bg:      #f7f9fb;
  --surface: #ffffff;

  /* Spacing scale (4px base) — single source of truth for margin/padding */
  --space-1: .25rem;  /* 4px  */
  --space-2: .5rem;   /* 8px  */
  --space-3: .75rem;  /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-8: 3rem;    /* 48px */
  --space-10: 4rem;   /* 64px */
  --space-card: var(--space-6);     /* card / panel interior */
  --space-section: var(--space-10); /* section vertical rhythm */
  --space-gutter: var(--space-4);   /* section horizontal padding */

  /* Radius */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md: 0 6px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.12);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .18s;

  --font: 'Jost', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family: var(--font); color: var(--ink-900); letter-spacing: -.01em; font-weight: 600; }
h1 { font-weight: 800; font-size: var(--text-4xl); }
h2 { font-weight: 700; font-size: var(--text-2xl); }
h3 { font-weight: 600; font-size: var(--text-xl); }
a { color: var(--brand-700); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-800); }
.text-muted, small { color: var(--ink-500) !important; }

/* ---------- Skip link (a11y) ---------- */
.cn-skip {
  position: absolute; left: 12px; top: -48px; z-index: 2000;
  background: var(--brand-700); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); transition: top var(--dur) var(--ease);
}
.cn-skip:focus { top: 12px; color:#fff; }

/* ---------- Header / nav ---------- */
/* Clean, modern navbar — teal bottom accent, text-style links, no pill borders */
.header-inner {
  background: var(--surface);
  border-bottom: 2.5px solid var(--brand-600);
  box-shadow: 0 2px 10px rgba(15,23,42,.07);
  position: sticky; top: 0; z-index: 1000;
}
.header-inner .navbar { padding-top: .7rem; padding-bottom: .7rem; }
.header-inner .navbar-brand { margin-right: auto !important; margin-left: 0 !important; align-items: flex-start; }
.navbar-brand img { height: 38px; width: auto; }

/* Nav links — clean text, no pill/border */
.header-inner .navbar-nav .nav-link {
  color: var(--ink-600) !important;
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .01em;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--r-sm);
  padding: .45rem .7rem !important;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header-inner .navbar-nav .nav-link:hover,
.header-inner .navbar-nav .nav-link:focus,
.header-inner .navbar-nav .show > .nav-link {
  color: var(--brand-700) !important;
  background: var(--brand-50) !important;
}

/* Dropdown menus */
.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 8px 28px rgba(15,23,42,.11);
  padding: .35rem;
  margin-top: .3rem;
  min-width: 210px;
  max-height: 72vh;
  overflow-y: auto;
}
.dropdown-item {
  border-radius: var(--r-sm);
  padding: .42rem .8rem;
  color: var(--ink-700);
  font-size: .875rem;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--brand-50); color: var(--brand-800); }

/* ---------- Breadcrumb ---------- */
.cn-breadcrumb { background: transparent; font-size: .82rem; padding: .9rem 0 .2rem; }
.cn-breadcrumb a { color: var(--ink-500); }
.cn-breadcrumb a:hover { color: var(--brand-700); }
.cn-breadcrumb .sep { color: var(--ink-400); margin: 0 .4rem; }
.cn-breadcrumb [aria-current="page"] { color: var(--ink-700); font-weight: 600; }

/* ---------- Trust strip ---------- */
.cn-trust { padding: .35rem 0 .1rem; }
.cn-trust .wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
.cn-trust span.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; color: var(--ink-600); font-weight: 500;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .28rem .7rem;
}
.cn-trust .pill i { color: var(--brand-600); font-size: .8rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-body { padding: 1.35rem 1.5rem; }

/* Calculator page header — premium gradient hero area */
.calculator-header {
  background: linear-gradient(160deg, var(--brand-50) 0%, var(--bg) 65%);
  padding: var(--space-10) var(--space-gutter) var(--space-8);
  text-align: center;
  margin-bottom: var(--space-6);
}
.calculator-header h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink-900);
  margin-bottom: .6rem;
}
.calculator-header p {
  color: var(--ink-600);
  font-size: var(--text-lg);
  max-width: 54ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--r-sm); font-weight: 600; transition: all var(--dur) var(--ease); }
.btn:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 1px; box-shadow: none; }
.btn-primary {
  background: var(--brand-600); border-color: var(--brand-600);
}
.btn-primary:hover {
  background: var(--brand-700); border-color: var(--brand-700);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,148,136,.28);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary, .btn-secondary { color: var(--brand-700); border-color: var(--brand-600); background: var(--surface); }
.btn-outline-primary:hover, .btn-secondary:hover { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-600); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .6rem .8rem; color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.form-label { font-weight: 600; color: var(--ink-700); font-size: .88rem; margin-bottom: .35rem; }

/* Range sliders */
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-600); border: 3px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--dur) var(--ease); }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-600); border: 3px solid var(--surface); cursor: pointer; }

/* ---------- Result card (premium redesign) ---------- */
.cn-result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-600);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.cn-result-label {
  display: inline-flex;
  align-items: center;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: .22rem .75rem;
  margin-bottom: .6rem;
}
.cn-result-value {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--brand-600);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .5rem;
}
.cn-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
  margin-top: .75rem;
}
.cn-stat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .55rem .75rem;
}
.cn-stat-label { font-size: var(--text-xs); color: var(--ink-500); margin-bottom: .15rem; }
.cn-stat-value { font-size: var(--text-sm); font-weight: 700; color: var(--ink-900); }
.cn-stat-value.accent { color: var(--brand-600); }
.cn-result-note { font-size: var(--text-xs); color: var(--ink-500); margin-top: .75rem; }

/* ---------- FAQ accordion (seo_content) ---------- */
.seo-content .accordion-item { border: 1px solid var(--line); border-radius: var(--r-sm) !important; margin-bottom: .5rem; overflow: hidden; }
.seo-content .accordion-button { font-weight: 600; color: var(--ink-900); }
.seo-content .accordion-button:not(.collapsed) { background: var(--brand-50); color: var(--brand-800); box-shadow: none; }
.seo-content .accordion-button:focus { box-shadow: 0 0 0 3px var(--brand-100); }
.seo-content h2 { font-size: 1.4rem; }
.seo-content .related-tools { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.seo-content .related-tools a {
  display: inline-block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .4rem .9rem; font-weight: 500; font-size: .9rem;
}
.seo-content .related-tools a:hover { border-color: var(--brand-500); background: var(--brand-50); }
.seo-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.seo-content th, .seo-content td { border: 1px solid var(--line); padding: .55rem .8rem; text-align: left; font-size: .92rem; }
.seo-content th { background: var(--bg); font-weight: 600; }

/* ---------- Main ---------- */
.cn-main { display: block; }

/* ---------- Accessibility: focus + motion ---------- */
a:focus-visible, button:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: 3px solid var(--brand-200); outline-offset: 2px; border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Dark mode
   ============================================================ */

/* Make Bootstrap surfaces follow tokens (so they flip in dark) */
.form-control, .form-select { background-color: var(--surface); color: var(--ink-900); }
.form-control::placeholder { color: var(--ink-500); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.8); opacity: .8; }
.dropdown-menu { background-color: var(--surface); }
.card-header { background: var(--surface); border-color: var(--line); color: var(--ink-900); }
.seo-content .accordion-item { background: var(--surface); }
.seo-content .accordion-button { background: var(--surface); }
.table { color: var(--ink-900); border-color: var(--line); }
.table > :not(caption) > * > * { border-color: var(--line); background-color: transparent; }
.table-hover > tbody > tr:hover > * { background-color: var(--brand-50); color: var(--ink-900); }

/* Theme toggle button */
.cn-theme-toggle {
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-700); cursor: pointer; transition: all var(--dur) var(--ease); padding: 0;
}
.cn-theme-toggle:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-500); }
.cn-theme-toggle svg { width: 18px; height: 18px; }
.cn-theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .cn-theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .cn-theme-toggle .icon-sun { display: inline; }

/* ---- Dark tokens ---- */
:root[data-theme="dark"] {
  --brand-50:  #102a24;
  --brand-100: #16352b;
  --brand-600: #14b8a6;
  --brand-700: #5eead4;
  --brand-800: #99f6e4;
  --ink-900: #e9eef5;
  --ink-700: #c2ccd8;
  --ink-600: #9fb0c0;
  --ink-500: #8a99a8;
  --ink-400: #64748b;
  --line:    #283448;
  --line-2:  #1b2433;
  --bg:      #0b1220;
  --surface: #141c2b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
}

/* Dark component fixes (icons drawn as dark SVGs need inverting) */
:root[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(2); }
:root[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); }
:root[data-theme="dark"] .navbar-toggler { border-color: var(--line); }
:root[data-theme="dark"] .btn-primary { color: #06231d; }

/* ---- Homepage (homestyle.css) dark overrides ---- */
:root[data-theme="dark"] .header { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
:root[data-theme="dark"] .hero { background: linear-gradient(135deg, #0e1f1c 0%, #0b1a20 100%); }
:root[data-theme="dark"] .hero-subtitle { color: var(--ink-600); }
:root[data-theme="dark"] .search-input { background: var(--surface); color: var(--ink-900); border-color: var(--brand-600); }
:root[data-theme="dark"] .search-results { background: var(--surface); color: var(--ink-900); border: 1px solid var(--line); }
:root[data-theme="dark"] section { background: var(--bg) !important; }
:root[data-theme="dark"] .intro p { color: var(--ink-700); }
:root[data-theme="dark"] .hero-section { background: var(--surface) !important; }
:root[data-theme="dark"] .hero-section h1,
:root[data-theme="dark"] .hero-section h2,
:root[data-theme="dark"] .hero-section p { color: var(--ink-900); }
:root[data-theme="dark"] .features h2 { color: var(--ink-900); }
:root[data-theme="dark"] .cta p { color: var(--ink-700); }

/* Calculator header dark */
:root[data-theme="dark"] .calculator-header {
  background: linear-gradient(160deg, var(--brand-100) 0%, var(--bg) 65%);
}
:root[data-theme="dark"] .calculator-header h1 { color: var(--ink-900); }
:root[data-theme="dark"] .calculator-header p { color: var(--ink-600); }

/* Result card dark */
:root[data-theme="dark"] .cn-result { border-top-color: var(--brand-600); }
:root[data-theme="dark"] .cn-result-value { color: var(--brand-500); }
:root[data-theme="dark"] .cn-result-label { background: var(--brand-50); color: var(--brand-700); }
:root[data-theme="dark"] .cn-stat { background: var(--line-2); border-color: var(--line); }
:root[data-theme="dark"] .cn-stat-label { color: var(--ink-500); }
:root[data-theme="dark"] .cn-stat-value { color: var(--ink-900); }
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .category-card,
:root[data-theme="dark"] .tool-card,
:root[data-theme="dark"] .card { background: var(--surface); color: var(--ink-900); }

/* Page-specific blocks → token surfaces so they flip in dark mode */
.calculator-step, .results-container, .table-results, .savings-streak, .input-with-range {
  background: var(--surface); color: var(--ink-900); border-color: var(--line);
}
.calculator-step { border: 1px solid var(--line); }
/* Uniform panel padding/rhythm (overrides legacy px in style.css) */
.calculator-step, .results-container, .savings-streak { padding: var(--space-5); }
.calculator-step, .savings-streak { margin-bottom: var(--space-5); }
.results-container, .chart-container { margin-top: var(--space-5); }
.range-labels span, .range-labels { color: var(--ink-500); }
.result-value { color: var(--ink-900); }
.results-container h3, .results-container h5 { color: var(--ink-900); }

/* Defensive net for Bootstrap light utilities in dark */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light { background-color: var(--surface) !important; color: var(--ink-900); }
:root[data-theme="dark"] .text-dark { color: var(--ink-900) !important; }
:root[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ink-900); color: var(--ink-900); }

/* ---------- Header search ---------- */
.cn-search-wrap { display: flex; align-items: center; margin-right: .5rem; }
.cn-search { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .3rem .8rem; min-width: 200px; }
.cn-search:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.cn-search > i { color: var(--ink-400); font-size: .82rem; }
.cn-search-input { border: none; background: transparent; outline: none; margin-left: .5rem; color: var(--ink-900); width: 100%; font-size: .9rem; }
.cn-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-md); z-index: 1200; display: none; max-height: 340px; overflow: auto; padding: .3rem; }
.cn-sr-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: var(--r-sm); color: var(--ink-900); }
.cn-sr-item:hover, .cn-sr-item:focus { background: var(--brand-50); color: var(--brand-800); }
.cn-sr-item small { color: var(--ink-500); font-size: .72rem; white-space: nowrap; }
.cn-sr-empty { padding: .6rem .7rem; color: var(--ink-500); font-size: .85rem; }
@media (max-width: 991px) { .cn-search { min-width: 100%; margin: .4rem 0; } .cn-search-wrap { width: 100%; margin-right: 0; } }

/* Breadcrumb row with search on the right */
.cn-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cn-crumbs { min-width: 0; }
@media (max-width: 575px){ .cn-breadcrumb-row .cn-search { order: 2; } }

/* Homepage cards missed earlier + logo fade in dark mode */
:root[data-theme="dark"] .calculator-card { background: var(--surface); color: var(--ink-700); border: 1px solid var(--line); }
:root[data-theme="dark"] .testimonial-card { background: var(--surface); color: var(--ink-700); border: 1px solid var(--line); }
:root[data-theme="dark"] .feature-card { border: 1px solid var(--line); }
:root[data-theme="dark"] .calculator-card h3, :root[data-theme="dark"] .testimonial-card h3,
:root[data-theme="dark"] .calculator-card h4, :root[data-theme="dark"] .testimonial-card h4,
:root[data-theme="dark"] .testimonial-card strong, :root[data-theme="dark"] .testimonial-card .author { color: var(--ink-900); }
:root[data-theme="dark"] .navbar-brand img,
:root[data-theme="dark"] .logo img { opacity: .8; }

/* Tables: light header flips to dark in dark mode (JS also swaps the class) */
:root[data-theme="dark"] .table-light { --bs-table-bg: var(--surface); --bs-table-color: var(--ink-900); --bs-table-border-color: var(--line); background-color: var(--surface); color: var(--ink-900); }
:root[data-theme="dark"] .table-dark { --bs-table-bg: #101a29; --bs-table-color: var(--ink-900); --bs-table-border-color: var(--line); }

/* Bootstrap alerts in dark mode — replace hardcoded pastel backgrounds with surface tokens */
:root[data-theme="dark"] .alert { border-color: var(--line); }
:root[data-theme="dark"] .alert-info {
  background-color: #0a2a33;
  color: var(--ink-900);
  border-color: #0d5f7a;
}
:root[data-theme="dark"] .alert-success {
  background-color: #0b2a1a;
  color: var(--ink-900);
  border-color: #166534;
}
:root[data-theme="dark"] .alert-warning {
  background-color: #2a2000;
  color: var(--ink-900);
  border-color: #854d0e;
}
:root[data-theme="dark"] .alert-danger {
  background-color: #2a0a0a;
  color: var(--ink-900);
  border-color: #991b1b;
}
:root[data-theme="dark"] .alert-primary {
  background-color: #0d1f3c;
  color: var(--ink-900);
  border-color: #1e3a5f;
}
/* Tables INSIDE alerts inherit readable colors */
:root[data-theme="dark"] .alert .table,
:root[data-theme="dark"] .result-box .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-900);
  --bs-table-border-color: rgba(255,255,255,.12);
  color: var(--ink-900);
}
:root[data-theme="dark"] .alert .table th,
:root[data-theme="dark"] .alert .table td,
:root[data-theme="dark"] .result-box .table th,
:root[data-theme="dark"] .result-box .table td {
  color: var(--ink-900);
  border-color: rgba(255,255,255,.12);
}
:root[data-theme="dark"] .alert .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255,255,255,.04);
}

/* Accordions everywhere (page-level FAQs, not just .seo-content) */
.accordion-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm) !important; margin-bottom: .5rem; overflow: hidden; }
.accordion-button { background: var(--surface); color: var(--ink-900); font-weight: 600; }
.accordion-button:not(.collapsed) { background: var(--brand-50); color: var(--brand-800); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px var(--brand-100); }
.accordion-body { color: var(--ink-700); }
:root[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); }

/* ---------- Text wordmark logo ---------- */
.cn-brand { display: inline-flex; flex-direction: column; line-height: 1.02; text-decoration: none; }
.cn-brand:hover { text-decoration: none; }
.cn-brand-name { font-family: var(--font); font-weight: 700; font-size: 1.5rem; color: var(--ink-900); letter-spacing: -0.02em; }
.cn-brand-accent { color: var(--brand-600); }
.cn-brand-tag { font-family: var(--font); font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); margin-top: 3px; }
.footer-brand .cn-brand-name { color: #fff; }
.footer-brand .cn-brand-tag { color: rgba(255,255,255,.6); }
.footer-mission { margin-top: 1em; }
@media (max-width: 575px){ .cn-brand-name { font-size: 1.25rem; } .cn-brand-tag { font-size: .52rem; letter-spacing: .1em; } }

/* ---------- Mobile improvements ---------- */
@media (max-width: 767px) {
  /* Result card floats above form on mobile */
  .cn-result { order: -1; }

  /* Tighter calculator header on small screens */
  .calculator-header { padding: var(--space-6) var(--space-gutter) var(--space-5); }
  .calculator-header h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  /* Trust strip: 2-per-row grid */
  .cn-trust .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

  /* Stat grid: 2 columns */
  .cn-result-stats { grid-template-columns: 1fr 1fr; }

  /* Footer single column */
  .footer-content { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; width: 100%; }
  .footer-brand { max-width: 100%; }
}

/* Nav touch targets (44px minimum) */
.dropdown-item { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 991px) {
  .navbar-nav .nav-link { min-height: 44px; display: flex; align-items: center; }
}