/* StormRecord Homepage v2 — redesign styles
   Loaded by index.html ONLY, on top of styles.css.
   All selectors scoped under .page-home so other pages are unaffected. */

.page-home {
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --paper: #FBFAF6;
  --paper-2: #F3EFE5;
  --paper-3: #E8E2D3;
  --rule: #D8D1BF;
  --rule-soft: #E8E2D3;

  --ink: #0B1220;
  --ink-soft: #1A2540;
  --text-1: #0B1220;
  --text-2: #3A4860;
  --text-3: #64748B;
  --text-4: #94A3B8;

  --map-stroke: rgba(11, 18, 32, 0.55);
  --map-stroke-strong: rgba(11, 18, 32, 0.85);

  --cool: #2563EB;
  --warm: #DC2626;
  --baseline: #047857;

  font-family: var(--sans);
  background: var(--paper);
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.page-home * { box-sizing: border-box; }
.page-home a { text-decoration: none; }
.page-home button { font-family: inherit; cursor: pointer; }
.page-home img { max-width: 100%; display: block; }

.page-home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0.3 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
}

/* ============================================
   META STRIP (top — copied from CD lines 73-109)
============================================ */
.page-home .meta-strip {
  position: relative;
  z-index: 5;
  background: rgba(251, 250, 246, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 0.5px solid var(--rule);
  padding: 10px 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.page-home .meta-strip .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-home .meta-strip .live .dot {
  width: 6px; height: 6px;
  background: var(--baseline);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(4, 120, 87, 0.18);
  animation: hp-meta-pulse 2.6s ease-in-out infinite;
}
@keyframes hp-meta-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.page-home .meta-strip .hide-mobile { display: none; }
@media (min-width: 640px) {
  .page-home .meta-strip .hide-mobile { display: inline; }
}
@media (min-width: 768px) {
  .page-home .meta-strip { padding: 10px 40px; font-size: 11px; }
}

/* ============================================
   NAV
============================================ */
.page-home .nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 250, 246, 0.88);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 0.5px solid var(--rule);
  padding: 16px 20px;
  box-shadow: none;
  transition: box-shadow 200ms ease;
}
.page-home .nav.scrolled {
  box-shadow: 0 4px 20px -10px rgba(11, 18, 32, 0.12);
}
.page-home .nav-container {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-home .nav > .nav-container > .nav-cta { display: none; }
.page-home .nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-1);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.page-home .nav-logo img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.page-home .nav-logo span { color: var(--text-1); }

.page-home .nav-links {
  display: none;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-home .nav-links > li > a,
.page-home .nav-links > li .nav-dropdown-toggle {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 200ms ease, background 200ms ease;
}
.page-home .nav-links > li > a:hover,
.page-home .nav-links > li .nav-dropdown-toggle:hover {
  color: var(--text-1);
  background: rgba(11, 18, 32, 0.04);
}
.page-home .nav-links .nav-cta {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  margin-left: 8px;
}
.page-home .nav-links .nav-cta:hover { background: #000; color: var(--paper); }

/* Use Cases dropdown — preserved structure */
.page-home .nav-dropdown { position: relative; }
.page-home .nav-dropdown-chevron {
  width: 12px;
  height: 12px;
  transition: transform 200ms ease;
}
.page-home .nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); }
.page-home .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(11, 18, 32, 0.18);
  list-style: none;
  margin: 0;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.page-home .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.page-home .nav-dropdown-menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}
.page-home .nav-dropdown-menu li { list-style: none; }
.page-home .nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text-2);
  border-radius: 8px;
  transition: background 150ms ease, color 150ms ease;
}
.page-home .nav-dropdown-menu a:hover {
  background: rgba(11, 18, 32, 0.04);
  color: var(--text-1);
}

/* Mobile hamburger — iOS Safari fix.
   Real-iPhone test showed spans collapsing to invisible on iOS even with the
   button itself touch-registering. Root cause: iOS Safari's flexbox is more
   aggressive about shrinking flex items without flex-shrink:0, and var(--ink)
   resolution can race with iOS's sub-pixel rounding. Use literal #0B1220 +
   !important + explicit dimensions + flex-shrink:0 to make spans rock-solid. */
.page-home .mobile-menu-toggle {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: #0B1220;
  cursor: pointer;
  transition: background 200ms ease;
}
.page-home .mobile-menu-toggle:hover { background: rgba(11, 18, 32, 0.05); }
.page-home .mobile-menu-toggle span {
  display: block !important;
  width: 26px !important;
  height: 3px !important;
  background: #0B1220 !important;
  border-radius: 2px;
  flex-shrink: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .page-home .nav-links { display: flex; }
  .page-home .mobile-menu-toggle { display: none !important; }
  .page-home .nav { padding: 20px 40px; }

  /* 3-column grid: logo left, nav-links centered, CTA right */
  .page-home .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  .page-home .nav-logo { justify-self: start; grid-column: 1; }
  .page-home .nav-links { justify-self: center; grid-column: 2; margin: 0; padding: 0; }
  .page-home .nav > .nav-container > .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    grid-column: 3;
    background: var(--ink);
    color: var(--paper);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 200ms ease;
  }
  .page-home .nav > .nav-container > .nav-cta:hover { background: #000; color: var(--paper); }
}

/* Mobile drawer */
.page-home .nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  visibility: hidden;
}
.page-home .nav-drawer.open {
  pointer-events: auto;
  visibility: visible;
}
.page-home .nav-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 250ms ease;
}
.page-home .nav-drawer.open .nav-drawer-scrim { opacity: 1; }
.page-home .nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 88vw);
  background: var(--paper);
  border-left: 0.5px solid var(--rule);
  box-shadow: -20px 0 60px -20px rgba(11, 18, 32, 0.25);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: 20px 24px 32px;
  gap: 4px;
  overflow-y: auto;
}
.page-home .nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.page-home .nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--rule);
}
.page-home .nav-drawer-head .brand-name {
  font-weight: 600;
  font-size: 15px;
}
.page-home .nav-drawer-close {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-home .nav-drawer-close:hover { background: rgba(11, 18, 32, 0.05); }
.page-home .nav-drawer-close svg { width: 22px; height: 22px; }
.page-home .nav-drawer-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1);
  padding: 14px 4px;
  border-bottom: 0.5px solid var(--rule-soft);
  letter-spacing: -0.005em;
  display: block;
}
.page-home .nav-drawer-link.sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
  padding: 10px 4px 10px 20px;
}
.page-home .nav-drawer-link:hover { color: var(--cool); }
/* Use Cases group toggle inside the drawer (mirrors desktop nav dropdown) */
.page-home .nav-drawer-group-toggle {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  cursor: pointer;
}
.page-home .nav-drawer-chevron {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.page-home .nav-drawer-group-toggle[aria-expanded="true"] .nav-drawer-chevron {
  transform: rotate(180deg);
}
.page-home .nav-drawer-group {
  display: flex;
  flex-direction: column;
}
.page-home .nav-drawer-group[hidden] { display: none; }
.page-home .nav-drawer-cta {
  margin-top: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.page-home .nav-drawer-cta:hover { background: #000; color: var(--paper); }

/* ============================================
   HERO — copied from CD source lines 300-700
============================================ */
.page-home .hero {
  position: relative;
  z-index: 2;
  padding: 32px 20px 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-home .hero-graticule {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(to right, rgba(11, 18, 32, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 18, 32, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 100% 80% at 60% 55%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 60% 55%, black 30%, transparent 80%);
}

/* MAP — fills entire hero, behind content */
.page-home .hero-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.page-home .hero-map svg {
  width: 100%;
  height: 100%;
  display: block;
  /* +10% scale per user request — fills more of the hero, removes empty space
     above and below USA inside the SVG viewBox. */
  transform: scale(1.1);
  transform-origin: center;
}
/* Toggle desktop/mobile SVG variants */
.page-home .hero-map .hero-map-svg-mobile { display: none; }

/* Reading zone — paper wash on left, makes text legible over map (CD line 367) */
.page-home .hero-reading-zone {
  position: absolute;
  top: 0;
  left: -10%;
  right: 40%;
  bottom: 20%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 35% 45%,
    rgba(251, 250, 246, 0.96) 0%,
    rgba(251, 250, 246, 0.85) 30%,
    rgba(251, 250, 246, 0.45) 60%,
    rgba(251, 250, 246, 0) 85%
  );
}

/* Eyebrow — copied from CD lines 477-501; margin-bottom tightened from CD's 28 to 16 per spec */
.page-home .hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.page-home .hero-eyebrow::before,
.page-home .hero-eyebrow::after {
  content: '';
  flex: 0 0 20px;
  height: 0.5px;
  background: var(--text-4);
}

/* Map style hooks (the inline SVG uses these classes) */
.page-home .us-nation {
  fill: rgba(11, 18, 32, 0.015);
  stroke: var(--map-stroke-strong);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.page-home .us-state {
  fill: none;
  stroke: rgba(11, 18, 32, 0.18);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.page-home .isobar {
  fill: none;
  animation: hp-isobarBreathe 10s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.page-home .iso-1 { animation-delay: 0s; }
.page-home .iso-2 { animation-delay: -1.6s; }
.page-home .iso-3 { animation-delay: -3.2s; }
.page-home .iso-4 { animation-delay: -4.8s; }
.page-home .iso-5 { animation-delay: -6.4s; }
@keyframes hp-isobarBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

.page-home .radar-sweep {
  transform-origin: center;
  animation: hp-radarRotate 4s linear infinite;
}
@keyframes hp-radarRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.page-home .radar-center {
  animation: hp-radarPing 4s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hp-radarPing {
  0% { r: 3; opacity: 1; }
  50% { r: 10; opacity: 0; }
  100% { r: 3; opacity: 0; }
}
.page-home .city-dot {
  animation: hp-cityPulse 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hp-cityPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.page-home .city-ring {
  animation: hp-cityRing 3s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hp-cityRing {
  0% { r: 2; opacity: 0.9; }
  100% { r: 14; opacity: 0; }
}

/* Corner registration marks */
.page-home .corner-mark {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  pointer-events: none;
  color: var(--text-4);
  opacity: 0.6;
}
.page-home .corner-mark.tl { top: 16px; left: 16px; }
.page-home .corner-mark.tr { top: 16px; right: 16px; }
.page-home .corner-mark.bl { bottom: 16px; left: 16px; }
.page-home .corner-mark.br { bottom: 16px; right: 16px; }

/* hero-container is the CD's "hero-inner" — flex container that fills the hero */
.page-home .hero-container {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 0;
}
.page-home .hero-content {
  display: flex;
  flex-direction: column;
}

.page-home .trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: rgba(251, 250, 246, 0.85);
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.page-home .trust-pill .dot {
  width: 7px;
  height: 7px;
  background: var(--baseline);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(4, 120, 87, 0.4);
  animation: hp-pulse 2.6s ease-in-out infinite;
}
@keyframes hp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* h1.hero-headline — copied from CD lines 503-527 (mobile) */
.page-home .hero h1.hero-headline {
  font-family: var(--sans);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: center;
  color: var(--text-1);
  margin-bottom: 24px;
}
.page-home .hero h1.hero-headline .line1 {
  display: block;
  color: var(--text-1);
}
.page-home .hero h1.hero-headline .emphasis {
  display: block;
  background: linear-gradient(180deg, var(--cool) 0%, var(--ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  letter-spacing: -0.03em;
  /* Descender breathing room for the background-clip:text gradient. The
     gradient is painted into the element's padding box, so descenders (g,
     j, p, y) need both line-height > 1 AND padding-bottom large enough to
     keep the glyph's lowest point inside the painted area at 72px. The
     0.15em padding-bottom adds ~11px at 72px, which clears italic
     descenders too. Applies at all viewports. */
  line-height: 1.2;
  padding-bottom: 0.15em;
  overflow: visible;
}
/* subheadline — CD calls this .hero-tagline (lines 529-539) */
.page-home .subheadline {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  text-align: center;
  max-width: 500px;
  margin: 0 auto 36px;
}

/* hero-cta-row — copied from CD .hero-actions (lines 541-549) */
.page-home .hero-cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  margin: 0 auto 40px;
  width: 100%;
}

/* btn-primary — copied verbatim from CD lines 551-578.
   white-space:nowrap added so "Search Historical Weather" stays on one line
   even when the button is squeezed by flex:1 in the 520px hero-cta-row. */
.page-home .btn-primary {
  background: var(--ink);
  color: var(--paper);
  padding: 17px 24px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow:
    0 12px 32px -8px rgba(11, 18, 32, 0.3),
    0 4px 12px -4px rgba(11, 18, 32, 0.15);
  transition: transform 200ms ease, box-shadow 300ms ease;
}
.page-home .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 40px -8px rgba(11, 18, 32, 0.4),
    0 6px 16px -4px rgba(11, 18, 32, 0.2);
  color: var(--paper);
}
.page-home .btn-primary:active { transform: translateY(0); }
.page-home .btn-primary svg { width: 18px; height: 18px; }

/* btn-secondary — copied verbatim from CD lines 580-595 */
.page-home .btn-secondary {
  background: rgba(251, 250, 246, 0.7);
  color: var(--ink);
  padding: 16px 24px;
  border: 0.5px solid var(--ink);
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-home .btn-secondary:hover { background: var(--paper-2); color: var(--ink); }


/* Instrument panel — copied verbatim from CD lines 597-627 */
.page-home .instrument-panel {
  position: relative;
  z-index: 3;
  background: rgba(251, 250, 246, 0.75);
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  padding: 20px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 16px 40px -12px rgba(11, 18, 32, 0.1);
  margin-top: auto;
}
.page-home .reading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-home .reading-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--text-3);
}
.page-home .reading-value {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.005em;
}

/* Desktop layout — copied from CD lines 644-698 (960px breakpoint).
   Hero padding-top tightened from CD's 48 to 24 per spec.
   hero-container padding-top removed (CD had 32) per spec.
   Combined effect: 24px from nav bottom to eyebrow (vs CD's 80). */
@media (min-width: 960px) {
  .page-home .hero {
    padding: 24px 56px 16px;
    /* CD source uses min-height: calc(100vh - 88px) for full-viewport hero.
       Removed here so hero sizes to content and the stat strip stays
       visible above the fold at 900vh. The strip ends up just below the
       text content rather than at the absolute bottom of the viewport. */
  }
  .page-home .hero-container {
    display: grid;
    grid-template-columns: minmax(460px, 560px) 1fr;
    /* CD has gap: 48px; tightened to 40px so the stat strip sits a little
       lower (more breathing room from CTAs) but still within 900vh fold */
    gap: 40px 48px;
    padding-top: 0;
    align-items: start;
  }
  .page-home .hero-content {
    display: flex;
    flex-direction: column;
    grid-column: 1;
  }
  .page-home .hero-eyebrow {
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 28px;
  }
  .page-home .hero-eyebrow::before { display: none; }
  .page-home .hero-eyebrow::after { flex: 1; }
  .page-home .hero h1.hero-headline {
    text-align: left;
    font-size: 72px;
    /* CD has 28px; tightened to fit strip in 900vh */
    margin-bottom: 20px;
    letter-spacing: -0.042em;
  }
  .page-home .subheadline {
    text-align: left;
    font-size: 18px;
    /* CD has 36px bottom margin; tightened to 24px */
    margin: 0 0 24px 0;
    max-width: 520px;
  }
  .page-home .hero-cta-row {
    flex-direction: row;
    max-width: 520px;
    /* CD has 40px bottom margin; tightened to 16px */
    margin: 0 0 16px 0;
  }
  /* CD line 687: .btn-primary, .btn-secondary { padding: 16px 22px; font-size: 14.5px; } */
  .page-home .hero-cta-row .btn-primary,
  .page-home .hero-cta-row .btn-secondary {
    flex: 1;
    padding: 16px 22px;
    font-size: 14.5px;
  }
  .page-home .hero-reading-zone {
    top: 0; left: -40%; right: 45%; bottom: 10%;
  }
  .page-home .instrument-panel {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    padding: 20px 28px;
    max-width: none;
    /* CD source has margin-top: 48 here, but combined with grid gap: 48 that's 96px
       between row 1 and panel — pushed strip below fold at 900vh. Removed so the
       grid gap alone (48px) provides the spacing. */
    margin-top: 0;
  }
}

/* Mobile layout — copied verbatim from CD lines 342-364 (959px max breakpoint) */
/* Mobile layout — copied from CD source @media (max-width: 959px) lines 342-364.
   CD relocates the map between tagline and CTAs via JS (sets .mobile-inline class
   and moves the DOM node). We do the same visually with CSS:
     - .hero-content uses display:contents so its children (h1, subheadline, cta-row)
       become direct flex items of .hero-container
     - order properties interleave: h1 → subheadline → MAP → CTAs → instrument-panel
   Map values (max-width 520, aspect-ratio 1000/620, margin 16px auto 40px) and
   hero padding (8px 20px 40px) copied verbatim from CD. */
@media (max-width: 959px) {
  /* iPhone real-device test fixes: shrink h1 to 2-line wrap, tighten gaps,
     reorder so primary CTA lands above the fold on iPhone 12 / 14 Pro Max. */
  .page-home .hero { min-height: 0; padding: 4px 20px 32px; }
  .page-home .hero-eyebrow { display: none !important; }
  .page-home .corner-mark { display: none; }
  .page-home .hero-graticule { display: none; }
  .page-home .hero-reading-zone { display: none; }

  /* display:contents promotes hero-container and hero-content children up to
     direct flex items of .hero, then `order` interleaves them. */
  .page-home .hero-container { display: contents; }
  .page-home .hero-content { display: contents; }

  /* Mobile order: headline → subhead → CTAs → map → instrument panel.
     Puts CTA above the fold (per iPhone test); map shifts below CTA. */
  .page-home .hero h1.hero-headline { order: 1; }
  .page-home .subheadline { order: 2; }
  .page-home .hero-cta-row { order: 3; }
  .page-home .hero-map { order: 4; }
  .page-home .instrument-panel { order: 5; margin-top: auto; }

  /* Headline: at 28px the .line1 'Historical Weather Reports,' wraps to 2
     lines inside the 334px content box (verified via diagnostic), making
     3 total. Drop to 24px so the entire line1 phrase fits on one line at
     iPhone 12 (390px) — 2 lines total, matching CD intent. */
  .page-home .hero h1.hero-headline {
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 auto 14px;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .page-home .subheadline {
    margin: 0 auto 16px;
  }
  .page-home .hero-cta-row {
    margin: 0 auto 4px;
  }

  .page-home .hero-map {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1000 / 620;
    height: auto;
    /* tightened from 16px auto 40px per iPhone whitespace audit */
    margin: 4px auto 12px;
    display: block;
  }
  .page-home .hero-map .hero-map-svg-desktop { display: none; }
  .page-home .hero-map .hero-map-svg-mobile { display: block; }
  /* Cancel the desktop +10% scale on mobile — the map already has its own
     mobile-centered SVG variant and we want it to render at natural size */
  .page-home .hero-map svg { transform: none; }
}

/* ============================================
   GENERIC SECTION SCAFFOLDING
============================================ */
.page-home section {
  position: relative;
  z-index: 2;
}
.page-home .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-home .section-header {
  margin-bottom: 48px;
}
.page-home .section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.page-home h2 {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-1);
  margin: 0 0 16px;
}
.page-home .section-header > p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 640px;
  margin: 0;
}

@media (min-width: 768px) {
  .page-home h2 { font-size: 48px; }
  .page-home .section-header > p { font-size: 18px; }
}

/* ============================================
   HOW IT WORKS
============================================ */
.page-home .how-it-works {
  padding: 80px 0 96px;
  background: var(--paper);
}
.page-home .steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
.page-home .step-card {
  position: relative;
  background: rgba(251, 250, 246, 0.7);
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 300ms ease, transform 300ms ease;
}
.page-home .step-card:hover {
  border-color: var(--text-2);
  transform: translateY(-2px);
}
.page-home .step-number {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cool);
  letter-spacing: 0.08em;
}
.page-home .step-visual {
  width: 100%;
  display: none;
}
.page-home .step-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}
.page-home .step-card > p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.page-home .step-arrow { display: none; }

.page-home .stats-bar {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 20px;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 16px;
}
.page-home .stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--ink);
}
.page-home .stat-value {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-1);
  letter-spacing: -0.03em;
}
.page-home .stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .page-home .how-it-works { padding: 112px 0 128px; }
  .page-home .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .page-home .stats-bar { grid-template-columns: repeat(4, 1fr); padding: 40px 32px; gap: 32px; }
  .page-home .stat-value { font-size: 44px; }
}

/* ============================================
   WHAT'S INSIDE (showcase)
============================================ */
.page-home .report-showcase {
  padding: 88px 0 96px;
  background: var(--paper);
}
.page-home .showcase-layout {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.page-home .showcase-features-col {
  min-width: 0;
}
.page-home .showcase-features-list {
  list-style: none;
  margin: 32px 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-home .feature-item {
  background: rgba(251, 250, 246, 0.6);
  border: 0.5px solid var(--rule);
  border-radius: 16px;
  padding: 22px 22px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: start;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 300ms ease, background 300ms ease, transform 300ms ease;
}
.page-home .feature-item:hover {
  border-color: var(--text-2);
  background: rgba(251, 250, 246, 0.9);
  transform: translateY(-2px);
}
.page-home .feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-home .feature-icon svg { width: 20px; height: 20px; }
.page-home .feature-icon.blue { background: rgba(37, 99, 235, 0.10); color: var(--cool); }
.page-home .feature-icon.red { background: rgba(220, 38, 38, 0.10); color: var(--warm); }
.page-home .feature-icon.green { background: rgba(4, 120, 87, 0.10); color: var(--baseline); }
.page-home .feature-icon.amber { background: rgba(217, 119, 6, 0.10); color: #B45309; }
.page-home .feature-icon.dark { background: rgba(11, 18, 32, 0.08); color: var(--ink); }
.page-home .feature-item h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.page-home .feature-item p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

.page-home .meteorologist-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--sans);
  margin-bottom: 14px;
}
.page-home .meteorologist-trust svg {
  width: 16px;
  height: 16px;
  color: var(--baseline);
}
.page-home .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 250, 246, 0.85);
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.page-home .badge-pill svg {
  width: 14px;
  height: 14px;
  color: var(--cool);
}

/* PDF page stack (fanned) */
.page-home .report-preview {
  display: flex;
  justify-content: center;
}
.page-home .report-stack {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 80px 70px 24px;
  aspect-ratio: 1.05 / 1.1;
  --fan-rot-l: -5deg;
  --fan-rot-r: 7deg;
  --fan-x-l: -42px;
  --fan-x-r: 50px;
  --fan-y-l: -42px;
  --fan-y-r: -46px;
  --front-y: 40px;
}
.page-home .pdf-page {
  position: absolute;
  top: 56px;
  left: 50%;
  width: calc(100% - 140px);
  max-width: 320px;
  aspect-ratio: 0.78 / 1;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transform: translateX(-50%) translateY(20px);
  transform-origin: 50% 80%;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 250ms ease;
}
.page-home .pdf-page:hover { z-index: 4 !important; }
.page-home .pdf-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.page-home .pdf-page.middle {
  z-index: 1;
  transform: translateX(-50%) translate(var(--fan-x-l), calc(var(--fan-y-l) + 20px)) rotate(var(--fan-rot-l));
  box-shadow:
    0 1px 2px rgba(11, 18, 32, 0.04),
    0 10px 22px -10px rgba(11, 18, 32, 0.14);
}
.page-home .pdf-page.back {
  z-index: 2;
  transform: translateX(-50%) translate(var(--fan-x-r), calc(var(--fan-y-r) + 20px)) rotate(var(--fan-rot-r));
  box-shadow:
    0 1px 2px rgba(11, 18, 32, 0.04),
    0 10px 22px -10px rgba(11, 18, 32, 0.14);
}
.page-home .pdf-page.front {
  z-index: 3;
  transform: translateX(-50%) translateY(calc(var(--front-y) + 20px)) rotate(0deg);
  box-shadow:
    0 2px 4px rgba(11, 18, 32, 0.06),
    0 14px 30px -10px rgba(11, 18, 32, 0.20),
    0 24px 50px -20px rgba(11, 18, 32, 0.14);
}
.page-home .reveal.visible .pdf-page.front {
  opacity: 1;
  transform: translateX(-50%) translateY(var(--front-y)) rotate(0deg);
  transition-delay: 120ms;
}
.page-home .reveal.visible .pdf-page.middle {
  opacity: 1;
  transform: translateX(-50%) translate(var(--fan-x-l), var(--fan-y-l)) rotate(var(--fan-rot-l));
  transition-delay: 320ms;
}
.page-home .reveal.visible .pdf-page.back {
  opacity: 1;
  transform: translateX(-50%) translate(var(--fan-x-r), var(--fan-y-r)) rotate(var(--fan-rot-r));
  transition-delay: 520ms;
}

@media (min-width: 768px) {
  .page-home .report-stack {
    --fan-rot-l: -10deg;
    --fan-rot-r: 15deg;
    --fan-x-l: -64px;
    --fan-x-r: 78px;
    --fan-y-l: -52px;
    --fan-y-r: -56px;
    --front-y: 40px;
    padding: 88px 90px 24px;
    aspect-ratio: 1.05 / 1.15;
    max-width: 480px;
  }
}

@media (min-width: 1024px) {
  .page-home .showcase-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
  .page-home .report-preview { position: sticky; top: 100px; justify-content: flex-start; }
}

/* ============================================
   Lightbox (PDF page viewer)
============================================ */
.page-home .lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  padding: 24px;
}
.page-home .lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.page-home .lightbox-stage {
  position: relative;
  max-width: min(840px, 100%);
  max-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-home .lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  display: block;
  transition: opacity 200ms ease;
}
.page-home .lightbox-img.swapping { opacity: 0; }
.page-home .lightbox-btn {
  position: absolute;
  background: rgba(251, 250, 246, 0.95);
  color: var(--ink);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background 200ms ease, transform 200ms ease;
}
.page-home .lightbox-btn:hover { background: var(--paper); transform: scale(1.05); }
.page-home .lightbox-btn svg { width: 20px; height: 20px; }
.page-home .lightbox-close { top: -56px; right: 0; }
.page-home .lightbox-prev { left: -64px; top: 50%; transform: translateY(-50%); }
.page-home .lightbox-next { right: -64px; top: 50%; transform: translateY(-50%); }
.page-home .lightbox-prev:hover, .page-home .lightbox-next:hover {
  transform: translateY(-50%) scale(1.05);
}
.page-home .lightbox-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(251, 250, 246, 0.7);
}
@media (max-width: 720px) {
  .page-home .lightbox-prev { left: 8px; }
  .page-home .lightbox-next { right: 8px; }
  .page-home .lightbox-close { top: 8px; right: 8px; }
  .page-home .lightbox-counter { bottom: 12px; }
  .page-home .lightbox-img { max-height: calc(100vh - 32px); }
}

/* ============================================
   REPORT PAGES PREVIEW + Used-by line
============================================ */
.page-home .sample-reports.preview-row {
  background: var(--paper);
  padding: 0 0 32px;
}
.page-home .report-pages-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.page-home .report-page-preview {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1206 / 1539;
  box-shadow: 0 12px 28px -10px rgba(11, 18, 32, 0.14);
}
.page-home .report-page-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.page-home .used-by-line {
  text-align: center;
  font-style: italic;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.55;
  max-width: 800px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .page-home .report-pages-row { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ============================================
   SAMPLE REPORTS (download cards)
============================================ */
.page-home .sample-reports {
  background: var(--paper);
  padding: 88px 0 96px;
}
.page-home .sample-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.page-home .sample-card {
  background: rgba(251, 250, 246, 0.85);
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 300ms ease, transform 300ms ease;
}
.page-home .sample-card:hover {
  border-color: var(--text-2);
  transform: translateY(-2px);
}
.page-home .sample-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-home .pdf-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-home .sample-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.page-home .sample-desc {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
}
.page-home .btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--paper);
  color: var(--ink);
  border: 0.5px solid var(--ink);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  align-self: flex-start;
  transition: background 200ms ease, color 200ms ease;
}
.page-home .btn-download:hover { background: var(--ink); color: var(--paper); }
.page-home .btn-download svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
  .page-home .sample-cards { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ============================================
   WHY (pricing + comparison)
============================================ */
.page-home .why-section {
  padding: 88px 0 96px;
  background: var(--paper-2);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}
.page-home .value-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 56px;
}
.page-home .value-card {
  background: rgba(251, 250, 246, 0.85);
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 300ms ease, transform 300ms ease;
}
.page-home .value-card:hover {
  border-color: var(--text-2);
  transform: translateY(-2px);
}
.page-home .value-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-home .value-icon svg { width: 22px; height: 22px; }
.page-home .value-icon.blue { background: rgba(37, 99, 235, 0.10); color: var(--cool); }
.page-home .value-icon.green { background: rgba(4, 120, 87, 0.10); color: var(--baseline); }
.page-home .value-icon.dark { background: rgba(11, 18, 32, 0.08); color: var(--ink); }
.page-home .value-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  letter-spacing: -0.005em;
}
.page-home .value-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}
.page-home .value-card a { color: var(--cool); }

.page-home .comparison-wrapper {
  background: rgba(251, 250, 246, 0.95);
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  padding: 16px;
  overflow-x: auto;
}
.page-home .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 480px;
}
.page-home .comparison-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  text-align: left;
  padding: 14px 14px;
  border-bottom: 0.5px solid var(--rule);
  font-weight: 500;
}
.page-home .comparison-table tbody td {
  padding: 14px 14px;
  border-bottom: 0.5px solid var(--rule-soft);
  color: var(--text-2);
}
.page-home .comparison-table tbody tr:last-child td { border-bottom: 0; }
.page-home .comparison-table tbody td:first-child {
  font-weight: 500;
  color: var(--text-1);
  font-size: 13px;
}
.page-home .comparison-table .check {
  color: var(--baseline);
  font-weight: 600;
}
.page-home .comparison-table .varies { color: var(--text-3); }

@media (min-width: 768px) {
  .page-home .value-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .page-home .comparison-table { font-size: 15px; }
  .page-home .comparison-table thead th,
  .page-home .comparison-table tbody td { padding: 16px 22px; }
}

/* ============================================
   USE CASES
============================================ */
.page-home .use-cases-section {
  padding: 88px 0 96px;
  background: var(--paper);
}
.page-home .use-cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.page-home .use-case-card {
  background: rgba(251, 250, 246, 0.85);
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 300ms ease, transform 300ms ease;
}
.page-home .use-case-card:hover {
  border-color: var(--text-2);
  transform: translateY(-2px);
}
.page-home .use-case-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-home .use-case-icon svg { width: 22px; height: 22px; }
.page-home .use-case-icon.blue { background: rgba(37, 99, 235, 0.10); color: var(--cool); }
.page-home .use-case-icon.red { background: rgba(220, 38, 38, 0.10); color: var(--warm); }
.page-home .use-case-icon.green { background: rgba(4, 120, 87, 0.10); color: var(--baseline); }
.page-home .use-case-icon.amber { background: rgba(217, 119, 6, 0.10); color: #B45309; }
.page-home .use-case-icon.dark { background: rgba(11, 18, 32, 0.08); color: var(--ink); }
.page-home .use-case-icon.muted { background: rgba(100, 116, 139, 0.12); color: var(--text-2); }
.page-home .use-case-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.page-home .use-case-card p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.page-home .card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cool);
}
.page-home .card-arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 200ms ease;
}
.page-home .use-case-card:hover .card-arrow svg { transform: translateX(2px); }

@media (min-width: 768px) {
  .page-home .use-cases-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
  .page-home .use-cases-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   FAQ
============================================ */
.page-home .faq-section {
  padding: 88px 0 96px;
  background: var(--paper);
}
.page-home .faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
}
.page-home .faq-item {
  background: rgba(251, 250, 246, 0.85);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 200ms ease;
}
.page-home .faq-item.active { border-color: var(--text-2); }
.page-home .faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  gap: 16px;
}
.page-home .faq-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 250ms ease;
}
.page-home .faq-item.active .faq-chevron { transform: rotate(180deg); }
.page-home .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home .faq-item.active .faq-answer { max-height: 500px; }
.page-home .faq-answer-content {
  padding: 0 24px 24px;
}
.page-home .faq-answer-content p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}
.page-home .faq-answer-content a { color: var(--cool); }

/* ============================================
   FINAL CTA
============================================ */
.page-home .cta-final {
  padding: 80px 0 120px;
  background: var(--paper);
}
.page-home .cta-bar {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: 24px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  box-shadow: 0 24px 50px -15px rgba(11, 18, 32, 0.35);
}
.page-home .cta-bar::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.page-home .cta-text { position: relative; }
.page-home .cta-text h2 {
  color: var(--paper);
  font-size: 32px;
  margin: 0 0 6px;
}
.page-home .cta-text p {
  color: rgba(251, 250, 246, 0.75);
  font-size: 16px;
  margin: 0;
}
.page-home .cta-action {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-home .cta-price {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.page-home .cta-price span {
  font-size: 14px;
  color: rgba(251, 250, 246, 0.6);
  font-weight: 400;
  margin-left: 8px;
}
.page-home .cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-home .btn-white {
  background: var(--paper);
  color: var(--ink);
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: background 200ms ease;
}
.page-home .btn-white:hover { background: var(--paper-2); }
.page-home .btn-white-outline {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(251, 250, 246, 0.4);
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  transition: background 200ms ease, border-color 200ms ease;
}
.page-home .btn-white-outline:hover {
  background: rgba(251, 250, 246, 0.08);
  border-color: var(--paper);
  color: var(--paper);
}

@media (min-width: 768px) {
  .page-home .cta-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 56px 56px;
    gap: 48px;
  }
  .page-home .cta-text h2 { font-size: 40px; }
  .page-home .cta-action { flex-direction: column; align-items: flex-end; gap: 16px; }
  .page-home .cta-price { font-size: 56px; }
  .page-home .cta-buttons { flex-direction: row; }
}

/* ============================================
   FOOTER
============================================ */
.page-home .footer {
  background: var(--paper-3);
  border-top: 0.5px solid var(--rule);
  padding: 56px 0 40px;
  position: relative;
  z-index: 2;
}
.page-home .footer-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-home .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.page-home .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-home .footer-brand img { width: 32px; height: 32px; border-radius: 8px; }
.page-home .footer-brand-text h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 2px;
}
.page-home .footer-tagline {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
}
.page-home .footer-links h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 500;
}
.page-home .footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-home .footer-links a {
  font-size: 14px;
  color: var(--text-2);
  transition: color 200ms ease;
}
.page-home .footer-links a:hover { color: var(--text-1); }
.page-home .footer-bottom {
  border-top: 0.5px solid var(--rule);
  padding-top: 24px;
}
.page-home .footer-independence {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
  margin: 0 0 12px;
}
.page-home .footer-bottom > p {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 12px;
}
.page-home .footer-disclaimer {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.75;
  color: var(--text-3);
  letter-spacing: 0.04em;
  padding-top: 16px;
  border-top: 0.5px solid var(--rule-soft);
  margin: 0;
}

@media (min-width: 768px) {
  .page-home .footer { padding: 64px 0 40px; }
  .page-home .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 56px;
  }
}

/* ============================================
   REVEAL ANIMATIONS
============================================ */
.page-home .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .isobar,
  .page-home .radar-sweep,
  .page-home .radar-center,
  .page-home .city-dot,
  .page-home .city-ring,
  .page-home .trust-pill .dot,
  .page-home .floating-card {
    animation: none !important;
  }
  .page-home .hero-map,
  .page-home .reveal,
  .page-home .pdf-page,
  .page-home .floating-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .page-home .pdf-page.front,
  .page-home .reveal.visible .pdf-page.front {
    transform: translateX(-50%) translateY(var(--front-y)) rotate(0deg) !important;
  }
  .page-home .pdf-page.middle,
  .page-home .reveal.visible .pdf-page.middle {
    transform: translateX(-50%) translate(var(--fan-x-l), var(--fan-y-l)) rotate(var(--fan-rot-l)) !important;
  }
  .page-home .pdf-page.back,
  .page-home .reveal.visible .pdf-page.back {
    transform: translateX(-50%) translate(var(--fan-x-r), var(--fan-y-r)) rotate(var(--fan-rot-r)) !important;
  }
}

/* a11y: --text-3 (#64748B) sits at ~3.7:1 on the cream-3 footer background.
   Bump these footer text elements to --text-2 (#3A4860) for 4.5:1+ contrast. */
.page-home .footer-links h4,
.page-home .footer-independence,
.page-home .footer-bottom > p,
.page-home .footer-disclaimer {
  color: var(--text-2);
}