/* ═══════════════════════════════════════
   MyRentHelper — B-Warm Design System
   Outfit headings, DM Sans body
   ═══════════════════════════════════════ */
:root {
  --primary: #3D5A99;
  --primary-dark: #2E4573;
  --primary-light: #EEF1F7;
  --terracotta: #C47D52;
  --terracotta-light: #FDF5EF;
  --cream: #FAFAF6;
  --warm-gray-50: #F7F6F3;
  --warm-gray-100: #EDECE8;
  --warm-gray-200: #D9D7D2;
  --warm-gray-300: #B8B5AE;
  --warm-gray-400: #9A968D;
  --warm-gray-500: #7D786E;
  --warm-gray-600: #5C584F;
  --warm-gray-700: #3D3A33;
  --warm-gray-800: #2A2722;
  --warning: #B8860B;
  --warning-light: #FFF8E7;
  --success: #2D7D46;
  --success-light: #E8F5EC;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--cream); color: var(--warm-gray-700);
  line-height: 1.65; font-size: var(--fs-base);
}
h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; color: var(--warm-gray-800); line-height: 1.2; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link { position:absolute;top:-100%;left:0;background:var(--primary);color:#fff;padding:0.75rem 1.5rem;z-index:1000;font-weight:600; }
.skip-link:focus { top:0; }
:focus-visible { outline:3px solid var(--primary);outline-offset:2px; }
:focus:not(:focus-visible) { outline:none; }

/* NAV */
.site-nav { background:#fff;border-bottom:1px solid var(--warm-gray-100);position:sticky;top:0;z-index:100; }
.nav-inner { max-width:1100px;margin:0 auto;padding:0.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between; }
.logo { display:flex;align-items:center;gap:0.5rem;font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-lg);color:var(--warm-gray-800);text-decoration:none; }
.nav-toggle { display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:4px; }
.nav-toggle span { width:22px;height:2px;background:var(--warm-gray-600);border-radius:2px;transition:0.2s; }
.nav-links { display:flex;align-items:center;gap:1.25rem;list-style:none; }
.nav-links a { color:var(--warm-gray-600);font-size:var(--fs-sm);font-weight:500;transition:color 0.15s; }
.nav-links a:hover { color:var(--primary);text-decoration:none; }
@media(max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-links { display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:1rem 1.5rem;border-bottom:1px solid var(--warm-gray-100);gap:0.75rem; }
  .nav-links.open { display:flex; }
}

/* HERO */
.hero { max-width:720px;margin:0 auto;padding:3rem 1.5rem 2rem;text-align:center; }
.hero h1 { font-size:var(--fs-3xl);margin-bottom:1rem; }
.hero-accent { color:var(--primary); }
.hero-sub { font-size:var(--fs-lg);color:var(--warm-gray-500);margin-bottom:1.5rem; }
.hero-cta { display:inline-block;background:var(--primary);color:#fff;padding:0.875rem 2rem;border-radius:var(--radius);font-weight:600;font-size:var(--fs-base);transition:background 0.15s; }
.hero-cta:hover { background:var(--primary-dark);text-decoration:none; }

/* TOOL GRID */
.tool-section { max-width:1000px;margin:0 auto;padding:0 1.5rem 3rem; }
.tool-section h2 { font-size:var(--fs-2xl);margin-bottom:1.5rem;text-align:center; }
.tool-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem; }
.tool-card { display:flex;flex-direction:column;background:#fff;border:1px solid var(--warm-gray-100);border-radius:var(--radius-lg);padding:1.5rem;text-decoration:none;color:inherit;transition:box-shadow 0.15s,border-color 0.15s;position:relative; }
a.tool-card:hover { box-shadow:var(--shadow-md);border-color:var(--primary);text-decoration:none; }
.tool-card__icon { font-size:1.75rem;margin-bottom:0.75rem; }
.tool-card__title { font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-lg);margin-bottom:0.375rem;color:var(--warm-gray-800); }
.tool-card__desc { font-size:var(--fs-sm);color:var(--warm-gray-500);flex:1; }
.tool-card__badge { display:inline-block;margin-top:0.75rem;font-size:var(--fs-xs);font-weight:600;padding:0.25rem 0.625rem;border-radius:20px; }
.tool-card__badge--live { background:var(--success-light);color:var(--success); }

/* TRUST SECTION */
.trust-section { max-width:900px;margin:0 auto;padding:2rem 1.5rem 3rem; }
.trust-section h2 { font-size:var(--fs-2xl);margin-bottom:1.5rem;text-align:center; }
.trust-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem; }
.trust-card { background:#fff;border:1px solid var(--warm-gray-100);border-radius:var(--radius);padding:1.5rem;text-align:center; }
.trust-card__icon { font-size:2rem;margin-bottom:0.75rem; }
.trust-card__title { font-family:'Outfit',sans-serif;font-weight:700;margin-bottom:0.375rem; }
.trust-card__text { font-size:var(--fs-sm);color:var(--warm-gray-500); }

/* HUB HERO */
.hub-hero { max-width:720px;margin:0 auto;padding:2.5rem 1.5rem 1.5rem;text-align:center; }
.hub-hero h1 { font-size:var(--fs-3xl);margin-bottom:0.75rem; }
.hub-hero p { font-size:var(--fs-lg);color:var(--warm-gray-500); }

/* STATE GRID */
.state-directory { max-width:1000px;margin:0 auto;padding:0 1.5rem 2rem; }
.state-directory h2 { font-size:var(--fs-xl);margin-bottom:1rem; }
.state-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.5rem; }
.state-grid a { display:block;padding:0.625rem 0.875rem;background:#fff;border:1px solid var(--warm-gray-100);border-radius:var(--radius);font-size:var(--fs-sm);font-weight:500;color:var(--warm-gray-700);transition:border-color 0.15s; }
.state-grid a:hover { border-color:var(--primary);color:var(--primary);text-decoration:none; }

/* TRUST BAR */
.trust-bar { display:flex;flex-wrap:wrap;gap:1rem;max-width:900px;margin:0 auto 2rem;padding:0.875rem 1.5rem;background:var(--success-light);border-radius:var(--radius);font-size:var(--fs-sm);color:var(--success); }

/* TOOL PAGE (select state + results) */
.tool-page { max-width:900px;margin:0 auto;padding:0 1.5rem 3rem; }
.tool-page h1 { font-size:var(--fs-2xl);margin-bottom:0.5rem;text-align:center;padding-top:2rem; }
.tool-page .tool-subtitle { text-align:center;color:var(--warm-gray-500);margin-bottom:1.5rem;font-size:var(--fs-lg); }
.state-select-wrap { max-width:400px;margin:0 auto 2rem;text-align:center; }
.state-select-wrap label { display:block;font-weight:600;margin-bottom:0.5rem;color:var(--warm-gray-700); }
.state-select-wrap select { width:100%;padding:0.75rem 1rem;font-size:var(--fs-base);border:2px solid var(--warm-gray-200);border-radius:var(--radius);background:#fff;font-family:inherit;cursor:pointer; }
.state-select-wrap select:focus { border-color:var(--primary);outline:none; }
.tool-results { display:none;background:var(--terracotta-light);border:1px solid #E8D5C0;border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem; }
.tool-results.active { display:block; }
.tool-results h2 { font-size:var(--fs-xl);margin-bottom:1rem;color:var(--warm-gray-800); }
.result-row { display:flex;justify-content:space-between;align-items:baseline;padding:0.75rem 0;border-bottom:1px solid rgba(0,0,0,0.06); }
.result-row:last-child { border-bottom:none; }
.result-label { font-weight:500;color:var(--warm-gray-600);font-size:var(--fs-sm); }
.result-value { font-weight:700;color:var(--warm-gray-800);text-align:right;max-width:60%; }
.result-statute { margin-top:1rem;padding-top:0.75rem;border-top:1px solid rgba(0,0,0,0.08);font-size:var(--fs-sm);color:var(--warm-gray-400); }

/* STATE HERO (for NTV state pages) */
.state-hero { text-align:center;padding:2rem 1.5rem 1rem;max-width:720px;margin:0 auto; }
.state-label { display:inline-block;background:var(--primary-light);color:var(--primary);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:0.25rem 0.75rem;border-radius:20px;margin-bottom:0.75rem; }
.state-hero h1 { font-size:var(--fs-3xl);margin-bottom:0.5rem; }
.state-subtitle { font-size:var(--fs-lg);color:var(--warm-gray-500); }

/* RESULTS GRID (NTV state pages) */
.results-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:900px;margin:0 auto 2rem;padding:0 1.5rem; }
.result-card { background:#fff;border:1px solid var(--warm-gray-100);border-radius:var(--radius-lg);padding:1.5rem;text-align:center; }
.result-card__label { font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.04em;color:var(--warm-gray-400);font-weight:600;margin-bottom:0.5rem; }
.result-number { font-family:'Outfit',sans-serif;font-size:3rem;font-weight:800;color:var(--terracotta);line-height:1; }
.result-unit { font-size:var(--fs-sm);color:var(--warm-gray-500);margin-top:0.25rem; }
.result-note { font-size:var(--fs-xs);color:var(--warm-gray-400);margin-top:0.5rem; }

/* CROSS-LINKS */
.crosslinks { max-width:900px;margin:0 auto 2rem;padding:0 1.5rem; }
.crosslinks h2 { font-size:var(--fs-xl);margin-bottom:1rem; }
.crosslinks-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0.75rem; }
.crosslink-card { display:flex;align-items:center;gap:0.75rem;padding:1rem;background:#fff;border:1px solid var(--warm-gray-100);border-radius:var(--radius);text-decoration:none;color:inherit;transition:border-color 0.15s; }
.crosslink-card:hover { border-color:var(--primary);text-decoration:none; }
.crosslink-card__icon { font-size:1.25rem;flex-shrink:0; }
.crosslink-card__title { font-weight:600;font-size:var(--fs-sm);color:var(--warm-gray-700); }

/* FAQ */
.faq-section { max-width:720px;margin:0 auto 2rem;padding:0 1.5rem; }
.faq-section h2 { font-size:var(--fs-xl);margin-bottom:1rem; }
.faq-item { border-bottom:1px solid var(--warm-gray-100); }
.faq-question { width:100%;text-align:left;background:none;border:none;padding:1rem 0;font-size:var(--fs-base);font-weight:600;color:var(--warm-gray-700);cursor:pointer;font-family:inherit;display:flex;justify-content:space-between;align-items:center; }
.faq-question::after { content:'+';font-size:1.25rem;color:var(--warm-gray-400);transition:transform 0.2s; }
.faq-question[aria-expanded="true"]::after { content:'-'; }
.faq-answer { display:none;padding:0 0 1rem;font-size:var(--fs-sm);color:var(--warm-gray-500);line-height:1.7; }
.faq-answer.open { display:block; }

/* DISCLAIMER */
.disclaimer-bar { max-width:900px;margin:0 auto 3rem;padding:0 1.5rem; }
.disclaimer-bar p { background:var(--warning-light);border:1px solid #E8D5A0;border-radius:var(--radius);padding:1rem 1.25rem;font-size:var(--fs-sm);color:var(--warm-gray-600);line-height:1.6; }
.disclaimer-bar strong { color:var(--warning); }

/* PROSE */
.prose { max-width:720px;margin:0 auto;padding:2.5rem 1.5rem 3rem; }
.prose h1 { font-size:var(--fs-2xl);margin-bottom:1.5rem; }
.prose h2 { font-size:var(--fs-xl);margin-top:2rem;margin-bottom:0.75rem; }
.prose p { margin-bottom:1rem; }
.prose ul,.prose ol { margin-bottom:1rem;padding-left:1.5rem; }
.prose li { margin-bottom:0.375rem; }

/* FOOTER */
.site-footer { background:var(--warm-gray-800);color:var(--warm-gray-300);padding:2.5rem 1.5rem; }
.footer-inner { max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:2rem; }
.footer-name { font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-lg);color:#fff;margin-bottom:0.25rem; }
.footer-tagline { font-size:var(--fs-sm); }
.footer-links { display:flex;gap:3rem; }
.footer-col__heading { font-weight:700;color:#fff;font-size:var(--fs-sm);margin-bottom:0.5rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:0.375rem; }
.footer-col a { color:var(--warm-gray-300);font-size:var(--fs-sm); }
.footer-col a:hover { color:#fff; }
.footer-bottom { grid-column:1/-1;border-top:1px solid var(--warm-gray-600);padding-top:1.5rem;margin-top:1rem;font-size:var(--fs-xs);color:var(--warm-gray-400); }
@media(max-width:768px) {
  .footer-inner { grid-template-columns:1fr; }
  .footer-links { flex-direction:column;gap:1.5rem; }
  .hero h1 { font-size:var(--fs-2xl); }
  .state-hero h1 { font-size:var(--fs-2xl); }
  .hub-hero h1 { font-size:var(--fs-2xl); }
  .results-grid { grid-template-columns:1fr; }
  .result-number { font-size:2.5rem; }
  .trust-bar { flex-direction:column;align-items:flex-start;gap:0.5rem; }
  .state-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}