/* Epicenter — marketing site. Dark, Flighty-inspired; brand values are the app's own. */

@font-face { font-family:"Geist"; src:url("fonts/Geist-Regular.otf")  format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Geist"; src:url("fonts/Geist-Medium.otf")   format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Geist"; src:url("fonts/Geist-SemiBold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Geist"; src:url("fonts/Geist-Bold.otf")     format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Geist"; src:url("fonts/Geist-Black.otf")    format("opentype"); font-weight:900; font-display:swap; }

:root {
  --bg:      #0a0705;
  --bg-2:    #12100e;
  --line:    rgba(255,255,255,0.09);
  --ink:     #f4f1ee;
  --ink-dim: #a49f9a;
  --orange:  #ff6b30;
  --sky:     #7cc9ff;
  --flood:   #3fb0f0;
  --gold:    #f2b03a;
  --storm-base:#031121;
  --measure: 1120px;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: 24px; }
.section-title {
  font-weight: 900; font-size: clamp(30px, 5vw, 54px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 clamp(36px, 6vw, 64px); text-align: center; text-wrap: balance;
}
/* drop the desktop line break on small screens so the title wraps naturally */
@media (max-width: 640px) { .st-br { display: none; } }

/* ---- adaptive nav: full-width bar that contracts into a floating pill -- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 16px 24px; transition: padding .3s ease;
}
.nav-inner {
  width: 100%; max-width: var(--measure);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 8px 8px 6px; border-radius: 999px; border: 1px solid transparent;
  /* max-width animates from the full measure down to a content-hugging pill;
     the glass, border and shadow fade in with it. */
  transition: max-width .4s cubic-bezier(.4,0,.2,1), background .3s ease,
              border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled { padding-top: 12px; }
.nav.scrolled .nav-inner {
  max-width: 680px; padding: 8px 8px 8px 18px;
  background: rgba(16,12,9,0.66);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 16px 44px -16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span { font-size: 18px; }
.nav-links { display: flex; gap: 26px; font-size: 15px; color: var(--ink-dim); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  font-weight: 700; font-size: 14px; color: #1a0b04; background: var(--orange);
  padding: 9px 16px; border-radius: 999px; transition: transform .15s ease, filter .15s ease;
}
.nav-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ---- hero ------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--bg); padding-bottom: 120px; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* vignette as a real element (below the content in DOM order) so the cards'
   mix-blend-mode can blend against the plate rather than an isolated context */
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 30%, rgba(6,3,1,0.55) 100%),
    linear-gradient(180deg, rgba(6,3,1,0.55) 0%, transparent 22%, var(--bg) 96%);
}
.hero-inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: 128px 24px 0; text-align: center; }
.kicker { font-weight: 900; letter-spacing: 0.26em; font-size: 12.5px; color: rgba(255,255,255,0.92); margin: 0 0 18px; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.hero h1 {
  font-weight: 900; font-size: clamp(38px, 6.4vw, 76px); line-height: 1.0; letter-spacing: -0.03em;
  margin: 0; text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.lede { font-size: clamp(16px, 2vw, 20px); color: rgba(244,241,238,0.82); max-width: 52ch; margin: 22px auto 30px; line-height: 1.5; }
/* mobile: drop the desktop line break and let the headline wrap naturally */
@media (max-width: 640px) {
  .h1-br { display: none; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 46px); letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
}

/* hazard tabs */
.tabs {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: inline-flex; gap: 6px; padding: 7px;
  background: rgba(16,12,9,0.62); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
  max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center;
  transition: opacity .3s ease, transform .3s ease;
}
.tabs.hidden { opacity: 0; transform: translate(-50%, 26px); pointer-events: none; }
.tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font); font-weight: 600; font-size: 17px; color: rgba(244,241,238,0.78);
  background: transparent; border: 0; padding: 11px 22px 11px 13px; border-radius: 999px; cursor: pointer;
  transition: color .3s ease;
}
.tab img { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45)); }
.tab:hover { color: var(--ink); }
.tab.is-active { color: #14100c; }
/* sliding white pill that transitions between the active hazard tabs */
.tab-pill {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0;
  background: rgba(255,255,255,0.94); border-radius: 999px; pointer-events: none;
  transition: transform .42s cubic-bezier(.34,1.2,.44,1), width .42s cubic-bezier(.34,1.2,.44,1), height .42s ease;
}
.tab-pill.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .tab-pill { transition: opacity .2s ease; } }

.lbl-sm { display: none; }
/* mobile: shorter labels (Fire/Quake/Flood/Storm) in a compact, airy pill */
@media (max-width: 600px) {
  /* width relative to the screen; tabs flex to fill it evenly */
  .tabs { display: flex; flex-wrap: nowrap; gap: 4px; padding: 5px;
    width: min(440px, calc(100vw - 24px)); max-width: none; }
  .tab { flex: 1 1 0; min-width: 0; justify-content: center;
    font-size: 12px; gap: 5px; padding: 9px 6px; white-space: nowrap; }
  .tab img { width: 18px; height: 18px; }
  .lbl-full { display: none; }
  .lbl-sm { display: inline; }
}

/* hero phone */
.hero-phone { display: flex; justify-content: center; position: relative; }
.hero-phone::before {
  content: ""; position: absolute; width: 130%; height: 70%; left: -15%; top: 6%;
  background: radial-gradient(closest-side, rgba(255,107,48,0.22), transparent 70%);
  filter: blur(20px); z-index: -1; pointer-events: none;
}
/* the phone slot is now just a spacer that keeps the card grid fixed; the hand
   mockup (larger) is overlaid on it and is free to cover neighbouring cards */
.phone { position: relative; width: min(300px, 74vw); aspect-ratio: 600 / 1304; }
.phone .hand {
  position: absolute; top: 0; left: -22%; width: 159%; max-width: none; height: auto;
  z-index: 5; pointer-events: none; transition: opacity .3s ease;
  /* no CSS drop-shadow: a filter combined with the mask below gets clipped to the
     image's rectangular box, leaving a hard shadow line at the edges */
  /* dissolve the wrist's hard bottom edge into whatever is behind it — the live
     hazard-tinted plate — so it blends on both the light plate and the dark
     mobile background, with no visible cut edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
}
/* keep the App Store CTA / agency row above the overlaid wrist */
.hero-inner.hero-tail { z-index: 7; }

/* ---- hazard cards: two masonry columns flanking the phone, lit per hazard --
   Tokens from the app: paper #FAFAFA, ink #000 / secondary rgba(60,60,67,.6),
   accents per hazard, Geist, ~18px card radius. */
.hero-stage {
  position: relative; margin: 14px auto 0; width: min(1360px, 98vw);
  --sel-accent: 255,107,48;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
/* the stage carries the SELECTED hazard's palette; inactive dark cards tint from it */
.hero-stage.sel-wildfire   { --sel-accent: 255,107,48; }
.hero-stage.sel-earthquake { --sel-accent: 242,176,58; }
.hero-stage.sel-flood      { --sel-accent: 63,176,240; }
.hero-stage.sel-storm      { --sel-accent: 124,201,255; }
.col { display: flex; flex-direction: column; gap: 16px; width: 212px; flex: none; }
.col.offset { transform: translateY(30px); }
.hero-stage .phone { flex: none; }

/* per-hazard accent (R,G,B for rgba()) */
.hz-wildfire   { --accent: 255,107,48; }
.hz-earthquake { --accent: 242,176,58; }
.hz-flood      { --accent: 63,176,240; }
.hz-storm      { --accent: 124,201,255; }

.uic {
  box-sizing: border-box; width: 100%; text-align: left;
  font-family: var(--font); color: #000; background: #FAFAFA;
  border-radius: 18px; border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 16px 40px -22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.85);
  padding: 12px 15px;
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease, filter .45s ease;
}
/* selected hazard lights up; the rest recede */
.uic.dim {
  /* uniform semi-opaque palette tint — mostly solid so every card reads the same,
     with the plate showing through as subtle texture (no overlay amplifying the
     plate's brightness differently per card) */
  background: linear-gradient(rgba(var(--sel-accent), 0.18), rgba(var(--sel-accent), 0.18)), rgba(12,10,9,0.6);
  border-color: rgba(var(--sel-accent), 0.30);
  box-shadow: 0 12px 30px -22px rgba(0,0,0,0.7);
  position: relative;
}
/* image-heavy viz cards, inactive: let the glassy card show through their fill.
   The ShakeMap is a LIGHT-bg image, so multiply it into the dark card (its light
   areas take the card's tint) — matching the transparent-bg bomb/bathtub icons. */
.uic.dim .shake-map { opacity: 0.6; }
.uic.dim .uic-wall img { opacity: 0.5; }
.uic.lit {
  box-shadow: 0 0 0 1px rgba(var(--accent), 0.5),
              0 22px 48px -18px rgba(var(--accent), 0.38),
              0 18px 40px -20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ---- inactive (dark, palette-matched) card internals ---- */
.uic .note-title, .uic .note-sub, .uic .viz-n, .uic .viz-sub, .uic .viz-kick,
.uic .viz-eyebrow, .uic .viz-gloss, .uic .uic-ol-today, .uic .uic-ol-l,
.uic .uic-ol-note, .uic .uic-ol-lvl, .uic .uic-al-sum, .uic .uic-m-lbl,
.uic .uic-m-val, .uic .uic-m-sub, .uic .uic-felt-h, .uic .uic-felt-s,
.uic .f1-mph { transition: color .45s ease; }

.uic.dim .note-title, .uic.dim .viz-n, .uic.dim .uic-ol-today,
.uic.dim .uic-al-sum, .uic.dim .uic-m-lbl, .uic.dim .uic-m-val,
.uic.dim .uic-felt-h { color: rgba(255,255,255,0.86); }
.uic.dim .note-sub, .uic.dim .viz-sub, .uic.dim .viz-kick, .uic.dim .viz-eyebrow,
.uic.dim .viz-gloss, .uic.dim .uic-ol-l, .uic.dim .uic-ol-note, .uic.dim .uic-ol-lvl,
.uic.dim .uic-m-sub, .uic.dim .uic-felt-s, .uic.dim .f1-mph { color: rgba(255,255,255,0.48); }
.uic.dim .uic-m-ic, .uic.dim .uic-spark { color: rgba(255,255,255,0.55); }
.uic.dim .chev { color: rgba(255,255,255,0.4); }
.uic.dim .uic-al-ic, .uic.dim .uic-warn, .uic.dim .uic-ol-lvl,
.uic.dim .uic-mag-st .dot { color: rgb(var(--sel-accent)); }
/* dividers + felt override to dark */
.uic.dim .uic-m-row + .uic-m-row, .uic.dim .uic-al-item + .uic-al-item { border-color: rgba(255,255,255,0.12); }
.uic.dim.uic-felt { background: linear-gradient(rgba(var(--sel-accent),0.18), rgba(var(--sel-accent),0.18)), rgba(12,10,9,0.6); border-color: rgba(var(--sel-accent),0.4); }
/* f1 track + graphics on dark */
.uic.dim .f1-track { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.22)); }

@media (prefers-reduced-motion: reduce) { .uic { transition: opacity .2s ease; } }
.uic .chev { width: 12px; height: 12px; flex: none; }
.uic .chev path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* felt-report pill */
.uic-felt { display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(rgba(255,107,48,0.14), rgba(255,107,48,0.14)), #FAFAFA;
  border: 1.5px solid rgba(255,107,48,0.5); }
.uic-warn { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--orange); }
.uic-felt-h { font-size: 14px; font-weight: 600; color: #141414; line-height: 1.25; }
.uic-felt-s { font-size: 12px; color: #6B6B6B; line-height: 1.32; margin-top: 3px; }

/* week-ahead outlook */
.uic-ol-l { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(60,60,67,0.6); }
.uic-ol-today { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #000; margin-top: 3px; line-height: 1; }
.uic-ol-lvl { font-size: 15px; font-weight: 500; color: rgba(60,60,67,0.6); letter-spacing: 0; margin-left: 3px; }
.uic-ol-note { font-size: 12.5px; color: rgba(60,60,67,0.6); line-height: 1.32; margin-top: 8px; }

/* saved alert rule */
.uic-alert { padding: 4px 14px; }
.uic-al-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.uic-al-item + .uic-al-item { border-top: 1px solid #E9E9E9; }
.uic-al-ic { width: 18px; height: 18px; flex: none; color: var(--orange); }
.uic-al-ic path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.uic-al-sum { flex: 1 1 auto; font-size: 14px; font-weight: 500; color: #000; line-height: 1.25; }
.uic-al-item .chev { color: rgba(60,60,67,0.3); }

/* local conditions metric rows */
.uic-metric { padding: 6px 15px; }
.uic-m-row { display: flex; align-items: center; gap: 7px; padding: 8px 0; }
.uic-m-row + .uic-m-row { border-top: 1px solid #E9E9E9; }
.uic-m-ic { width: 18px; height: 18px; flex: none; color: rgba(60,60,67,0.45); }
.uic-m-ic path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uic-m-lbl { font-size: 13.5px; font-weight: 500; color: #000; width: 42px; flex: none; }
.uic-m-val { font-size: 14px; font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }
.uic-m-sub { font-size: 12px; color: rgba(60,60,67,0.6); }
.uic-spark { width: 38px; height: 18px; margin-left: auto; flex: none; color: #141414; }
.uic-spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- comparison visualizations (recreated from the app) ---- */
.viz-kick { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(60,60,67,0.6); }
.viz-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(60,60,67,0.55); margin-top: 11px; }
.viz-payoff { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.viz-n { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: #000; font-variant-numeric: tabular-nums; line-height: 1; }
.viz-sub { font-size: 13px; font-weight: 500; color: rgba(60,60,67,0.6); }
.viz-gloss { font-size: 12px; color: rgba(60,60,67,0.6); line-height: 1.3; margin-top: 7px; }

/* icon wall (bombs / bathtubs) — overlap tuned per art, faded at the bottom */
.uic-wall { margin-top: 11px; display: flex; flex-wrap: wrap; align-content: flex-start;
  overflow: hidden; height: 66px;
  -webkit-mask-image: linear-gradient(#000 52%, transparent); mask-image: linear-gradient(#000 52%, transparent); }
.uic-wall img { flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18)); }
.wall-bomb img { width: 30px; height: 30px; margin: 0 -12px 3px 0; }   /* tall/skinny → overlap */
.wall-tub img  { width: 32px; height: 32px; margin: 0 0 2px 0; }         /* wide → flush */

/* shakemap: banded MMI intensity + legend */
.uic-shake .shake-map { position: relative; width: 100%; height: 116px; margin-top: 2px;
  background: url(/assets/img/shakemap.png?v=9) center/contain no-repeat; }
.shake-map .shake-legend { position: absolute; left: 8px; top: 9px; width: 11px; height: 44px; border-radius: 4px;
  background: linear-gradient(#9C1C40, #E34A2B, #F08A24, #E3C23B, #2E9C5C);
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.35); }

/* F1 race lanes */
.uic-f1 .f1-lane { position: relative; height: 32px; margin-top: 11px; }
.f1-track { position: absolute; left: 0; top: 62%; height: 11px; width: var(--frac); transform: translateY(-50%);
  border-radius: 99px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.18)); }
.f1-car { position: absolute; top: 62%; left: var(--frac); width: 32px; height: 32px;
  transform: translate(-50%,-50%) rotate(90deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28)); }
.f1-mph { position: absolute; left: var(--frac); top: -3px; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: rgba(60,60,67,0.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uic-f1 .viz-payoff { margin-top: 15px; }

/* on narrower viewports the side columns can't fit — hide them, keep the phone */
@media (max-width: 1200px) { .hero-stage .col { display: none; } .hero-stage { width: auto; } }
/* mobile: pin the phone below the nav and cycle hazards while it's pinned (hero.js).
   The stage grows to 300vh to give the scroll room; the plate + vignette are pinned
   to the viewport (position: fixed) so they stay a clean backdrop instead of being
   stretched across the tall track. The hero goes transparent so the pinned plate
   shows through, and .bento carries an opaque bg to cover it once we scroll past. */
@media (max-width: 600px) {
  /* clip the hand's horizontal overflow (it's wider than the viewport) so the
     page can't blow out sideways, but keep vertical overflow visible so the
     phone's position:sticky still works */
  .hero { overflow-x: clip; overflow-y: visible; background: transparent; }
  .hero canvas { position: fixed; z-index: -1; }
  .hero-veil { position: fixed; z-index: -1; }
  .hero-stage { display: block; min-height: 300vh; }
  .hero-stage .phone { position: sticky; top: 96px; margin-inline: auto; }
  .bento { position: relative; z-index: 1; background: var(--bg); }
}

.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 36px; }
.appstore {
  display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff;
  padding: 12px 20px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.2);
  transition: transform .15s ease, border-color .15s ease;
}
.appstore:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.45); }
.appstore svg { width: 26px; height: 26px; flex: none; }
.appstore .lines { display: flex; flex-direction: column; line-height: 1.1; }
.appstore .small { font-size: 11px; opacity: 0.8; }
.appstore .big { font-size: 18px; font-weight: 600; }
.note { font-size: 13px; color: var(--ink-dim); }
.agency-row { margin-top: 30px; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-dim); }
.agency-row b { color: rgba(244,241,238,0.9); font-weight: 600; }

/* ---- bento ------------------------------------------------------------ */
.bento { padding: clamp(72px, 11vw, 140px) 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { position: relative; overflow: hidden; border-radius: 26px; background: var(--bg-2); border: 1px solid var(--line); }
.card.wide { grid-column: 1 / -1; min-height: 420px; }
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  background: radial-gradient(90% 70% at 50% 118%, var(--glow, rgba(255,107,48,0.28)), transparent 70%);
}
.accent-ember { --glow: rgba(255,107,48,0.26); }
.accent-flood { --glow: rgba(63,176,240,0.24); }
.accent-storm { --glow: rgba(124,201,255,0.22); }
.accent-quake { --glow: rgba(242,176,58,0.22); }

.card { min-height: 460px; }
.card.wide { min-height: 480px; }
.card-copy { position: relative; z-index: 3; padding: 34px 34px 0; }
.card-copy h3 { font-weight: 400; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.45; color: var(--ink-dim); margin: 0; max-width: 46ch; }
.card-copy h3 b { font-weight: 700; color: var(--ink); }
.pill { position: absolute; top: 24px; right: 24px; z-index: 4; font-weight: 800; font-size: 11px; letter-spacing: 0.08em; color: #06131f; background: var(--sky); padding: 5px 11px; border-radius: 999px; }

/* Screenshots peek up from below the copy, tilted, bleeding off the card bottom. The scene fills
   the card; each shot is anchored by its TOP so its tall body runs off the bottom edge (clipped),
   showing the recognizable top of each screen. */
.scene { position: absolute; inset: 0; z-index: 1; }
.shot {
  position: absolute; width: 58%; border-radius: 20px;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.07);
}
.scene .tilt-l { top: 46%; left: 50%; translate: -50% 0; rotate: -5deg; }
.scene .tilt-r { top: 46%; left: 50%; translate: -50% 0; rotate: 5deg; }
.scene-pair .back  { top: 42%; left: 9%;  width: 48%; rotate: -7deg; opacity: 0.9; }
.scene-pair .front { top: 52%; right: 8%; width: 52%; rotate: 6deg; }

/* video-background cards — the clip already carries the card's own
   backdrop, so it fills the whole card; a top veil keeps the copy legible. */
.video-card { padding: 0; }
.video-card::before { display: none; }
.video-card .card-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
}
.video-card .video-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8,5,3,0.95) 0%, rgba(8,5,3,0.88) 20%, rgba(8,5,3,0.68) 38%,
    rgba(8,5,3,0.34) 54%, rgba(8,5,3,0.08) 68%, rgba(8,5,3,0) 78%);
}
/* A tight shadow plus a soft halo, so the dim body copy still separates where a
   longer line runs past the veil onto a bright frame (e.g. the orange builder). */
.video-card .card-copy h3 { text-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 2px 20px rgba(0,0,0,0.6); }

/* felt-report replica */
.card.felt { min-height: 300px; }
/* The felt card's particle field. Above the card's ::before glow so the lit points read
   against it, below .felt-demo (2) and .card-copy (3) so it never competes with type. */
.felt-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.felt-demo { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 40px 34px 44px; }
.felt-chip { display: flex; gap: 14px; align-items: flex-start; width: min(520px, 100%); background: rgba(255,107,48,0.10); border: 1.5px solid rgba(255,107,48,0.4); border-radius: 18px; padding: 18px 20px; }
.felt-chip .ping { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 999px; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,107,48,0.6); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,107,48,0.5);} 70%,100% { box-shadow: 0 0 0 16px rgba(255,107,48,0);} }
.felt-h { font-weight: 700; font-size: 16px; color: var(--ink); }
.felt-s { font-size: 13px; color: var(--ink-dim); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .felt-chip .ping { animation: none; } }

/* ---- live California hazard map (first bento card) --------------------- */
.map-card { padding: 0; }
/* higher specificity than the `.card, .card.wide { min-height: 340px }` mobile
   rule below, so the map card's height actually applies */
.card.wide.map-card { min-height: 600px; }
.map-card::before { display: none; }
.map-card .ca-map { position: absolute; inset: 0; z-index: 0; }
.map-card .ca-map .mapboxgl-ctrl-logo { opacity: 0.5; }
.map-card .ca-map .mapboxgl-ctrl-bottom-right { z-index: 2; }
/* vignette: the map dissolves into the page surface on every edge, with extra
   darkening at the top (copy) and bottom (carousel) */
.map-card .map-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg), transparent 15%),
    linear-gradient(to top,    var(--bg), transparent 24%),
    linear-gradient(to right,  var(--bg), transparent 13%),
    linear-gradient(to left,   var(--bg), transparent 13%),
    radial-gradient(62% 46% at 20% 24%, rgba(10,7,5,0.82) 0%, rgba(10,7,5,0.35) 52%, transparent 80%),
    radial-gradient(135% 128% at 50% 46%, transparent 54%, rgba(10,7,5,0.32) 88%, transparent 100%),
    linear-gradient(160deg, rgba(10,7,5,0.6) 0%, rgba(10,7,5,0.12) 26%, transparent 44%);
}
.map-card .card-copy { z-index: 3; pointer-events: none; }
.map-card .card-copy h3 { max-width: 26ch; }

/* live indicator, top-right */
.map-live {
  position: absolute; z-index: 4; top: 26px; right: 26px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.78);
  background: rgba(18,14,11,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 7px 13px;
}
.map-live .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,107,48,0.6); animation: ping 1.8s ease-out infinite; }

/* bottom carousel — auto-rotating cards of the most prominent events */
.event-carousel {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 20px 22px 22px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
}
.event-carousel::-webkit-scrollbar { display: none; }
.ev-track { display: flex; gap: 12px; width: max-content; }
.ev {
  flex: none; width: 300px; display: flex; align-items: center; gap: 13px; color: #fff; font-family: var(--font);
  background: rgba(20,16,13,0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 12px 16px;
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.ev.is-current {
  border-color: rgba(255,255,255,0.32); background: rgba(28,23,18,0.9);
  transform: translateY(-4px); box-shadow: 0 18px 42px -18px rgba(0,0,0,0.9);
}
.ev-ic { width: 36px; height: 36px; flex: none; }
.ev-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 3px; }
.ev-top { display: flex; align-items: baseline; gap: 10px; }
/* title takes the row and truncates if long; the metric never truncates */
.ev-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-metric { flex: none; font-size: 14px; font-weight: 800; color: rgba(255,255,255,0.95); white-space: nowrap; }
/* location · time gets the full body width on its own row */
.ev-meta { font-size: 12px; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-empty { color: rgba(255,255,255,0.6); font-size: 14px; padding: 16px; }

/* app-style markers: white rounded chip + hazard icon + downward tail */
.hz-pin { cursor: default; }
.hz-pin-in {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px;
  background: #fafafa; border-radius: 9px;
  /* no shadow on inactive pins: when co-located pins overlap, an inactive pin's
     shadow was falling over the top of the pin in front of it */
  transition: transform .3s ease, box-shadow .3s ease;
}
/* rounded-tip tail: a small rounded square rotated 45° behind the chip */
.hz-pin-in::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -4px;
  width: 12px; height: 12px; background: #fafafa; border-radius: 0 0 3px 0;
  transform: translateX(-50%) rotate(45deg);
}
.hz-pin-in img { width: 22px; height: 22px; }
.hz-pin-in.is-current { transform: scale(1.3); box-shadow: 0 10px 26px rgba(0,0,0,0.6); z-index: 3; }

/* cluster count — same white chip language as the pins, with a count */
.hz-cluster {
  display: grid; place-items: center; cursor: pointer; font-family: var(--font);
  font-weight: 800; color: #14100c; background: #fafafa; border-radius: 10px;
  box-shadow: 0 3px 11px rgba(0,0,0,0.5); transition: transform .15s ease;
}
.hz-cluster:hover { transform: scale(1.08); }

@media (max-width: 760px) {
  .card.wide.map-card { min-height: 600px; }
  /* same 20px inset for the badge, copy, and carousel so they all line up */
  .map-live { top: 20px; left: 20px; right: auto; }
  .map-card .card-copy { padding: 82px 20px 0; }
  .map-card .card-copy h3 { max-width: none; }
  .event-carousel { padding: 18px 20px 20px; }
  .ev { width: 270px; }
  /* soft radial vignette pool behind the top text, plus the edge fades */
  .map-card .map-veil { background:
    radial-gradient(110% 32% at 40% 12%, rgba(10,7,5,0.85) 0%, rgba(10,7,5,0.35) 50%, transparent 78%),
    linear-gradient(to bottom, var(--bg), transparent 14%),
    linear-gradient(to top,    var(--bg), transparent 26%),
    linear-gradient(to right,  var(--bg), transparent 10%),
    linear-gradient(to left,   var(--bg), transparent 10%); }
}

/* ---- pricing ---------------------------------------------------------- */
.pricing { padding: clamp(56px, 9vw, 120px) 0 clamp(72px, 10vw, 140px); background: linear-gradient(180deg, var(--bg) 60%, #0c0806 100%); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; }
.tier { border: 1px solid var(--line); border-radius: 26px; padding: 34px; background: var(--bg-2); }
.tier.premium { border-color: transparent; background: radial-gradient(120% 120% at 80% 0%, #143a5e, transparent 60%), var(--storm-base); }
.tier-badge { display: inline-block; font-weight: 800; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.tier-badge.sky { color: #06131f; background: var(--sky); border-color: transparent; }
.tier-price { font-weight: 900; font-size: 40px; margin: 18px 0 2px; }
.tier-price span { font-size: 16px; font-weight: 500; color: var(--ink-dim); }
.tier-note { font-size: 13px; color: var(--ink-dim); margin: 0 0 22px; }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li { position: relative; padding: 9px 0 9px 26px; font-size: 15px; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
.tier.premium li::before { color: var(--sky); }

/* ---- closer ----------------------------------------------------------- */
.closer { position: relative; overflow: hidden; text-align: center; background: var(--bg); }
.closer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Reveal the plate from the top so it emerges out of the pricing section's flat dark rather than
   cutting in at a hard edge, and land on the footer's colour at the bottom. Both ends match the
   neighbouring section, so the seams disappear. */
.closer::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(10,7,5,0.74) 15%,
    rgba(6,3,1,0.5) 58%,
    #060504 100%);
}
.closer-inner { position: relative; z-index: 2; padding: clamp(80px, 12vw, 150px) 24px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.closer h2 { font-weight: 900; font-size: clamp(32px, 6vw, 64px); letter-spacing: -0.03em; margin: 0; }

/* ---- footer ----------------------------------------------------------- */
footer { background: #060504; padding: 56px 0 44px; font-size: 14px; color: var(--ink-dim); }
footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a:hover { color: var(--ink); }
footer .fine { width: 100%; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: rgba(255,255,255,0.4); }

/* ---- legal pages ------------------------------------------------------ */
.legal { max-width: 760px; margin: 0 auto; padding: 120px 24px 96px; color: var(--ink); }
.legal a.back { color: var(--orange); font-weight: 600; font-size: 14px; }
.legal h1 { font-weight: 900; font-size: clamp(32px, 6vw, 48px); letter-spacing: -0.02em; margin: 18px 0 6px; }
.legal .updated { color: var(--ink-dim); font-size: 14px; margin: 0 0 40px; }
.legal h2 { font-weight: 700; font-size: 20px; margin: 40px 0 10px; }
.legal p, .legal li { color: rgba(244,241,238,0.82); font-size: 16px; line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal strong { color: var(--ink); }
.legal a[href^="http"], .legal a[href^="mailto"] { color: var(--sky); }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .grid, .tiers { grid-template-columns: 1fr; }
  .card, .card.wide { min-height: 340px; }
  .scene-pair .back { width: 48%; left: 8%; }
  .scene-pair .front { width: 54%; right: 6%; }
  .hero-inner { padding-top: 104px; }
}