/* ==========================================================================
   Homepage & marketing sections
   ========================================================================== */

.hero {
  padding-block: var(--space-7) var(--space-6);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center;
}
.hero h1 { margin-block: var(--space-4); }
.hero .lede { max-width: 44ch; margin-bottom: var(--space-6); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.hero-trust { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.hero-trust strong { font-family: var(--font-mono); font-size: var(--step-2); display: block; color: var(--accent-500); }
.hero-trust span { font-size: 0.8rem; color: var(--text-muted); }

/* Live mini-calculator inside the hero readout — the signature moment */
.hero-demo .readout__value { display: flex; align-items: baseline; gap: 0.15em; }
.demo-controls { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.demo-controls label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-on-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.demo-controls input[type="range"] {
  width: 100%; accent-color: var(--accent-400);
}

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section-head p { color: var(--text-secondary); margin-top: var(--space-2); }

.category-strip { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.stat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.stat-bar .card-pad { text-align: center; }
.stat-bar .stat-num { font-family: var(--font-mono); font-size: var(--step-3); color: var(--accent-500); }
.stat-bar .stat-label { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-2); }

.cta-band {
  background: var(--surface-ink); color: var(--text-on-ink);
  border-radius: var(--radius-lg); padding: var(--space-7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.cta-band h2 { color: var(--text-on-ink); }
.cta-band p { color: var(--text-on-ink-muted); margin-top: var(--space-2); }

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Print styles — used by the Print button on calculator pages
   ========================================================================== */
@media print {
  .site-header, .site-footer, .result-actions, .breadcrumbs, .related-grid,
  .newsletter, .cta-band, .search-box, .nav-toggle, .header-actions,
  .skip-link, script { display: none !important; }
  body { background: #fff; color: #000; }
  .readout { background: #fff; color: #000; box-shadow: none; border: 1px solid #000; }
  .readout__value { color: #000; text-shadow: none; }
  a { text-decoration: underline; }
  .card, .chart-wrap, .table-wrap { box-shadow: none; border: 1px solid #999; }
}