/*
 * Noteworthy News V4 - Homepage
 *
 * Standalone stylesheet for the 2026 homepage redesign. Loaded with
 * tokens.css and base.css only; components.css/v3.css stay on inner pages.
 * Direction: near-black base, graphite panels, crisp white type, serif
 * editorial headlines, blue for action, red strictly for live signals.
 */

/* ── Homepage token overrides ───────────────────── */
body.v4 {
  --color-bg:           #04060B;
  --color-bg-panel:     #090E17;
  --color-bg-card:      #0C1220;
  --color-bg-raised:    #101827;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-soft:  rgba(255, 255, 255, 0.055);
  --color-border-hover: rgba(255, 255, 255, 0.16);
  --color-accent:       #3E8DF3;
  --color-accent-hover: #61A3F6;
  --color-gold-text:    #E2C05C;
  --container-max:      1280px;
  --header-height: 3.75rem;

  font-family: var(--font-ui);
  background: var(--color-bg);
}

@media (max-width: 719px) {
  body.v4 { --header-height: 3.5rem; }
}

/* ── Skip link ──────────────────────────────────── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0.75rem;
  z-index: 10000;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-to-content:focus {
  left: 0.75rem;
}

/* ── Layout ─────────────────────────────────────── */
.container-wide {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}

/* ═══════════════════════════════════════════════════
   BUTTONS, CHIPS, BADGES
   ═══════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.72rem 1.25rem;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; }

.btn-outline {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-text);
}
.btn-outline:hover { border-color: rgba(255, 255, 255, 0.34); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover { color: var(--color-text); }

.btn-lg { padding: 0.9rem 1.55rem; font-size: 0.9375rem; border-radius: 8px; }
.btn-sm { padding: 0.5rem 0.85rem; font-size: 0.8125rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.chip-dev {
  border-color: rgba(62, 141, 243, 0.34);
  background: rgba(62, 141, 243, 0.10);
  color: #9CC4F8;
}

/* Badges rendered by feed.js */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  line-height: 1.2;
}

.badge-live {
  background: rgba(239, 68, 68, 0.13);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #F87171;
}

.badge-accent {
  background: rgba(62, 141, 243, 0.11);
  border: 1px solid rgba(62, 141, 243, 0.28);
  color: #93C0F7;
}

.badge-warning {
  background: rgba(234, 179, 8, 0.10);
  border: 1px solid rgba(234, 179, 8, 0.26);
  color: #E9C551;
}

/* ── Live dot ───────────────────────────────────── */
.live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-live);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  animation: livePulse 2.4s ease-out infinite;
}

.live-dot--calm {
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(62, 141, 243, 0.4);
  animation-name: livePulseBlue;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes livePulseBlue {
  0%   { box-shadow: 0 0 0 0 rgba(62, 141, 243, 0.4); }
  70%  { box-shadow: 0 0 0 7px rgba(62, 141, 243, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 141, 243, 0); }
}

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-slow) var(--ease-out),
              border-color var(--duration-slow) var(--ease-out),
              height var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
}

.site-header.scrolled {
  background: rgba(4, 6, 11, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--color-border-soft);
}

.site-header.condensed {
  height: calc(var(--header-height) - 0.45rem);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.nav-row {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text);
  flex: 0 0 auto;
}

.brand:hover { color: #fff; }

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  transition: width var(--duration-slow) var(--ease-out), height var(--duration-slow) var(--ease-out);
}

.condensed .brand-mark { width: 22px; height: 22px; }

.brand-name {
  font-family: var(--font-heading);
  font-size: 0.9875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Keep header text readable over the bright planet limb */
.site-header:not(.scrolled) .nav-link,
.site-header:not(.scrolled) .brand-name,
.site-header:not(.scrolled) .nav-icon-btn,
.site-header:not(.scrolled) .nav-auth .btn-ghost {
  text-shadow: 0 1px 10px rgba(2, 4, 9, 0.9), 0 0 22px rgba(2, 4, 9, 0.6);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.nav-link:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.05); }
.nav-link.active { color: var(--color-text); }

.nav-link[data-nav-live] {
  color: #F87171;
  font-weight: 600;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline: 0.35rem;
  padding-inline: 0.5rem;
  border-left: 1px solid var(--color-border-soft);
  border-right: 1px solid var(--color-border-soft);
}

.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.nav-icon-btn:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.06); }

.audio-toggle .audio-icon-on { display: none; }
.audio-toggle.sfx-on .audio-icon-off,
.audio-toggle.is-playing .audio-icon-off { display: none; }
.audio-toggle.sfx-on .audio-icon-on,
.audio-toggle.is-playing .audio-icon-on { display: block; }
.audio-toggle.sfx-on,
.audio-toggle.is-playing { color: var(--color-accent); }

.nav-auth {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-user-name {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.nav-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  transition: background var(--duration-fast) var(--ease-out);
}

.nav-live-chip:hover { background: rgba(239, 68, 68, 0.15); }

.nav-live-chip-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #F87171;
}

.nav-live-chip-count {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border-radius: 8px;
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 959px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(21rem, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin: 0;
    padding: calc(var(--header-height) + 1.25rem) 1.4rem 2rem;
    background: rgba(6, 9, 16, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--color-border-soft);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.34s;
    overflow-y: auto;
  }

  .nav-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-link {
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--color-border-soft);
    border-radius: 0;
  }

  .nav-tools {
    border: none;
    margin: 0.75rem 0 0;
    padding: 0;
    gap: 0.5rem;
  }

  .nav-icon-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
  }

  .nav-auth {
    margin-top: 0.9rem;
    gap: 0.6rem;
  }

  .nav-auth .btn {
    flex: 1;
    padding: 0.85rem 1rem;
    font-size: 0.9375rem;
  }
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */

.hero {
  /* --hp: 0..1 scroll progress through the hero, set by main.js.
     --mx/--my: -1..1 pointer position, set by main.js on fine pointers. */
  --hp: 0;
  --mx: 0;
  --my: 0;
  position: relative;
  padding-top: calc(var(--header-height) + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(2.75rem, 7vh, 5.5rem);
  min-height: 94svh;
  display: flex;
  align-items: center;
  overflow: clip;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(90% 70% at 66% 0%, #0A1526 0%, #060B15 46%, var(--color-bg) 100%);
}

/* Nebula depth: soft pools of cold light. Long fades and low alphas keep
   the gradients from banding into visible edges on dark screens. */
.hero-nebula {
  position: absolute;
  inset: -12px;
  background:
    radial-gradient(52% 40% at 70% 4%, rgba(56, 118, 214, 0.09), transparent 82%),
    radial-gradient(40% 36% at 20% 32%, rgba(40, 90, 170, 0.055), transparent 84%),
    radial-gradient(36% 30% at 88% 54%, rgba(46, 128, 168, 0.04), transparent 85%);
  opacity: calc(1 - var(--hp) * 0.4);
  translate: calc(var(--mx) * -7px) calc(var(--my) * -5px);
  will-change: translate, opacity;
}

/* Live starfield canvas (see v2/js/starfield.js) */
.hero-starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(0.95 - var(--hp) * 0.35);
  will-change: opacity;
}

/* Planet: a sharp Earth-at-night disc rendered at native texture size,
   dipping into the hero from above with real visible curvature. The lead
   story card overlaps it, so the planet reads as scenery behind the front
   page. Two scroll-linked motions keep it alive without layout work:
     1. the disc turns on `transform: rotate` (surface child), and
     2. the whole planet drifts down via `translate`, counteracting part of
        the page scroll so it stays in view while it turns.
   Both are compositor-only. */
.hero-planet {
  position: absolute;
  /* --spin: slow ambient rotation added by main.js on top of the
     scroll-linked sweep, so the planet is alive even before you scroll. */
  --spin: 0deg;
  /* Scale with the viewport so the curvature composition holds on wide
     screens: the limb always bottoms out ~270px below the top edge, with
     its lowest point at 68% of the viewport width. */
  --planet-size: max(1580px, 110vw);
  width: var(--planet-size);
  left: calc(68vw - var(--planet-size) / 2);
  top: calc(270px - var(--planet-size));
  aspect-ratio: 1;
  /* Recede at roughly half scroll speed instead of leaving with the page;
     drift a few px against the pointer for depth. */
  translate: calc(var(--mx) * -13px) calc(var(--hp) * 380px + var(--my) * -7px);
  will-change: translate;
}

/* Crisp atmosphere line, aligned to the disc edge inside the texture */
.hero-planet::after {
  content: '';
  position: absolute;
  inset: 1.4%;
  border-radius: 50%;
  box-shadow:
    inset 0 0 3px rgba(170, 205, 255, 0.9),
    inset 0 0 22px rgba(96, 156, 245, 0.55),
    inset 0 0 90px rgba(52, 110, 205, 0.3),
    0 0 50px rgba(64, 128, 224, 0.35),
    0 0 150px rgba(48, 100, 190, 0.18);
}

/* Soft atmospheric scattering band hugging the limb */
.planet-aurora {
  position: absolute;
  inset: -2.4%;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%,
      transparent 65.8%,
      rgba(64, 140, 255, 0.22) 69.2%,
      rgba(126, 200, 255, 0.1) 71.6%,
      transparent 76%);
  filter: blur(7px);
}

.planet-surface {
  position: absolute;
  inset: 0;
  background: url('/v2/assets/earth-disc.webp?v=5') center / contain no-repeat;
  /* 163deg turns the lit continents onto the visible lower limb; scrolling
     the hero sweeps the disc a further 42deg, sliding the lights and
     coastline clearly along the horizon. Saturation/contrast are baked into
     the texture so no filter pass runs while this layer animates. */
  transform: rotate(calc(163deg + var(--hp) * 42deg + var(--spin)));
  will-change: transform;
}

/* Interior falls into shadow so the lit limb ring carries the shape */
.planet-shade {
  position: absolute;
  inset: 0.8%;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(2, 4, 8, 0.92) 40%, rgba(2, 4, 8, 0.45) 60%, transparent 76%);
}

/* ── Signal pings: alerts detected on the visible limb ── */
.planet-pings {
  position: absolute;
  inset: 0;
}

.ping {
  --ping-c: 248, 113, 113;
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: rgba(var(--ping-c), 0.95);
  box-shadow: 0 0 10px rgba(var(--ping-c), 0.8), 0 0 3px rgba(var(--ping-c), 1);
  animation: pingDot 7.2s ease-in-out infinite;
  animation-delay: var(--pd, 0s);
}

.ping--gold { --ping-c: 226, 192, 92; }
.ping--blue { --ping-c: 120, 176, 255; }

.ping::before,
.ping::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--ping-c), 0.55);
  animation: pingRing 7.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  animation-delay: inherit;
}

.ping::after {
  animation-name: pingRingLate;
}

@keyframes pingDot {
  0%, 4% { opacity: 0.25; }
  8%, 34% { opacity: 1; }
  60%, 100% { opacity: 0.25; }
}

@keyframes pingRing {
  0%, 6% { transform: scale(1); opacity: 0; }
  10% { opacity: 0.9; }
  34%, 100% { transform: scale(8.5); opacity: 0; }
}

@keyframes pingRingLate {
  0%, 14% { transform: scale(1); opacity: 0; }
  18% { opacity: 0.6; }
  46%, 100% { transform: scale(8.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ping { animation: none; opacity: 0.55; }
  .ping::before, .ping::after { animation: none; opacity: 0; }
}

.hero-veil {
  position: absolute;
  inset: 0;
  background:
    /* Fixed-height scrim keeps the header readable over the bright limb */
    linear-gradient(180deg, rgba(4, 6, 11, 0.66) 0px, rgba(4, 6, 11, 0.3) 120px, rgba(4, 6, 11, 0.06) 300px, rgba(4, 6, 11, 0.12) 66%, var(--color-bg) 99%),
    linear-gradient(90deg, rgba(4, 6, 11, 0.44) 0%, rgba(4, 6, 11, 0.1) 45%, rgba(4, 6, 11, 0.03) 100%);
}

/* ── Astronaut: tethered figure stabilizing the lead story card ── */
.hero-astro {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.astro-tether {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.astro-tether-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.astro-body {
  position: absolute;
  z-index: 1;
  /* Between copy and card; hand reaches the story edge. */
  left: 41%;
  top: 7%;
  width: clamp(235px, 19.5vw, 310px);
  transform:
    translate3d(var(--astro-x, 0px), var(--astro-y, 0px), 0)
    rotate(var(--astro-r, -6deg))
    scale(var(--astro-s, 1));
  will-change: transform;
}

/* Inner micro-motion: slow counter-lean so the figure reads as a body
   settling in zero-g, not a rigid cutout riding one transform. */
.astro-inner {
  animation: astroSettle 11s ease-in-out infinite alternate;
}

@keyframes astroSettle {
  from { transform: rotate(1.1deg) translateY(-2px); }
  to { transform: rotate(-1.4deg) translateY(2.5px); }
}

.astro-body img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 24px 36px rgba(0, 0, 0, 0.45))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 20px rgba(70, 130, 220, 0.1));
}

/* Soft shadow the legs cast onto the story card surface. */
.hero-astro-cast {
  position: absolute;
  z-index: 0;
  width: 170px;
  height: 38px;
  margin: -19px 0 0 -85px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 78%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  will-change: left, top, opacity;
}

/* Contact shade: the astronaut's glove dims the card surface under it,
   selling the touch point. Position driven by hero-astro.js. */
.hero-story::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: var(--hand-x, -200px);
  top: var(--hand-y, -200px);
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2, 4, 9, 0.3), transparent 72%);
  opacity: var(--hand-on, 0);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Reduced motion / no-JS: a calm static pose */
@media (prefers-reduced-motion: reduce) {
  .astro-body { transform: rotate(-6deg); }
  .astro-inner { animation: none; }
  .hero-story::before { display: none; }
  .hero-astro-cast { opacity: 0.35 !important; }
}

@media (max-width: 899px) {
  .hero-astro { display: none; }
}

/* ── Hero wire ticker: latest headlines crossing the hero floor ── */
.hero-wire {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.62rem clamp(1.25rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  background: linear-gradient(180deg, rgba(4, 6, 11, 0.14), rgba(4, 6, 11, 0.56));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: calc(1 - var(--hp) * 2.4);
  will-change: opacity;
}

.hero-wire-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding-right: 1.1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.hero-wire-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 96%, transparent);
}

.hero-wire-track {
  display: inline-flex;
  align-items: center;
  gap: 1.9rem;
  white-space: nowrap;
  padding-right: 1.9rem;
  animation: wireScroll var(--wire-dur, 64s) linear infinite;
  will-change: transform;
}

.hero-wire:hover .hero-wire-track { animation-play-state: paused; }

@keyframes wireScroll {
  to { transform: translateX(-50%); }
}

.hero-wire-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.hw-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.hw-sep {
  width: 3px;
  height: 3px;
  flex-shrink: 0;
  align-self: center;
  rotate: 45deg;
  background: rgba(226, 192, 92, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .hero-wire-track { animation: none; }
}

@media (max-width: 719px) {
  .hero-wire { display: none; }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: center;
}

/* Gentle parallax between copy and the lead story media.
   `translate` composes with the hero-load transform animation.
   will-change keeps these on the compositor so the per-frame parallax
   never repaints the card or the copy. */
.hero-main {
  translate: 0 calc(var(--hp) * -18px);
  will-change: translate;
}

.hero-story {
  /* Scroll parallax plus the astronaut's gentle push (set by hero-astro.js) */
  translate: var(--sway-x, 0px) calc(var(--hp) * -46px + var(--sway-y, 0px));
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  .hero-main, .hero-story, .hero-planet, .hero-nebula { translate: none; }
  .planet-surface { transform: rotate(163deg); }
}

/* Load-in sequence */
.hero-load {
  opacity: 0;
  transform: translateY(18px);
  animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-load-1 { animation-delay: 0.05s; }
.hero-load-2 { animation-delay: 0.14s; }
.hero-load-3 { animation-delay: 0.26s; }
.hero-load-4 { animation-delay: 0.36s; }
.hero-load-5 { animation-delay: 0.46s; }
.hero-load-6 { animation-delay: 0.58s; }
.hero-load-7 { animation-delay: 0.5s; }

@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-load { opacity: 1; transform: none; animation: none; }
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 1.3rem;
}

.hero-eyebrow-sep {
  width: 1px;
  height: 12px;
  background: var(--color-border-hover);
}

.hero-clock {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.hero-title {
  font-family: var(--font-body);
  font-size: clamp(2.7rem, 6vw, 4.65rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #FAFBFC;
  margin-bottom: 1.3rem;
}

.hero-title em {
  font-style: italic;
  color: rgba(240, 244, 250, 0.88);
}

.hero-sub {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.4vw, 1.155rem);
  line-height: 1.55;
  color: rgba(235, 238, 244, 0.72);
  max-width: 46ch;
  margin-bottom: 1.9rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

.hero-trust svg { color: var(--color-gold-text); flex: 0 0 auto; }

/* Small app teaser: one quiet line, not a hero object */
.hero-app-teaser {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: rgba(9, 14, 23, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-secondary);
  transition: border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.hero-app-teaser:hover { border-color: var(--color-border-hover); color: var(--color-text); }

.hero-app-teaser svg { flex: 0 0 auto; color: var(--color-text-muted); }

.hero-app-teaser-text {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-app-teaser-tag {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9CC4F8;
  border: 1px solid rgba(62, 141, 243, 0.32);
  border-radius: 4px;
  padding: 0.16rem 0.4rem;
}

/* Flagship story: real lead story with real media */
.hero-story {
  position: relative;
  border: 1px solid rgba(110, 158, 224, 0.26);
  border-radius: 14px;
  /* No backdrop-filter here: this card translates every frame with the
     scroll parallax, and re-blurring its backdrop each frame is the single
     most expensive effect in the hero. A near-opaque fill reads the same
     over the dark scene and keeps the card compositor-only. */
  background: rgba(7, 11, 18, 0.92);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(96, 148, 224, 0.06),
    0 0 44px rgba(58, 118, 208, 0.12);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.hero-story:hover {
  border-color: rgba(130, 176, 240, 0.4);
  box-shadow:
    0 36px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(110, 162, 232, 0.12),
    0 0 58px rgba(64, 128, 218, 0.19);
}

.hero-story[data-status="breaking"] { border-color: rgba(239, 68, 68, 0.4); }

/* Glass glare tracking the pointer (fine pointers only, set by main.js) */
@media (hover: hover) and (pointer: fine) {
  .hero-story::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--cx, 72%) var(--cy, 24%),
      rgba(214, 232, 255, 0.065), transparent 62%);
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
    pointer-events: none;
  }

  .hero:hover .hero-story::after { opacity: 1; }
}

.hero-story-link {
  display: block;
  color: inherit;
}

.hero-story-link:hover { color: inherit; }

.hero-story .pm-media {
  aspect-ratio: 16 / 9.6;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border-soft);
}

.hero-story-body { padding: 1.05rem 1.25rem 1.2rem; }

.hero-story-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.hero-story-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.hero-story-title {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 1.75vw, 1.55rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.014em;
  color: #F5F7FA;
  margin-bottom: 0.55rem;
}

.hero-story-link:hover .hero-story-title { color: #fff; }

.hero-story-summary {
  font-family: var(--font-ui);
  font-size: 0.865rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.7rem;
}

.hero-story-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
}

.hero-story-link:hover .hero-story-cta { color: var(--color-accent-hover); }

/* Live story variant (no media): denser text card */
.hero-story-live .hero-story-body { padding-top: 1.2rem; }

/* Hero story skeleton */
.hero-story-skeleton .hss-media {
  aspect-ratio: 16 / 9.6;
  background: linear-gradient(100deg, rgba(255,255,255,0.045) 40%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.045) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

.hss-body { padding: 1.05rem 1.25rem 1.2rem; }

.hss-line {
  height: 17px;
  border-radius: 4px;
  margin-bottom: 0.6rem;
  background: linear-gradient(100deg, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

.hss-line.short { width: 55%; margin-bottom: 0; }

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════
   SECTION PRIMITIVES
   ═══════════════════════════════════════════════════ */

.band-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.8rem;
}

.band-kicker-gold { color: var(--color-gold-text); }

.band-title {
  font-family: var(--font-body);
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.14;
  color: #F7F9FB;
  text-wrap: balance;
}

.band-sub {
  font-family: var(--font-ui);
  font-size: 0.9875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-top: 0.8rem;
}

.band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.band-head-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.band-head-center .band-sub { margin-inline: auto; }

.band-sub-right {
  margin-top: 0;
  max-width: 30ch;
  text-align: right;
  align-self: flex-end;
}

.band-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), gap var(--duration-fast) var(--ease-out);
}

.band-link:hover { color: var(--color-text); }

/* ═══════════════════════════════════════════════════
   DEVELOPING NOW
   ═══════════════════════════════════════════════════ */

.developing {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5vh, 3rem) 0;
  border-top: 1px solid var(--color-border-soft);
}

.dev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.dev-head .band-kicker { margin-bottom: 0; color: #F87171; }

.dev-head-tools {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.dev-arrows { display: flex; gap: 0.35rem; }

.dev-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.dev-arrow:hover { color: var(--color-text); border-color: var(--color-border-hover); }

.dev-strip {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.dev-strip::-webkit-scrollbar { display: none; }

.dev-track {
  display: flex;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.dev-track:empty { display: none; }

.dev-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 264px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-panel);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
  animation: stripIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.dev-card--has-media {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
  width: 292px;
  min-height: 96px;
}

.dev-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.72rem 0.85rem;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.dev-card--has-media .dev-card-title {
  -webkit-line-clamp: 2;
}

.dev-card--has-media .dev-card-foot {
  margin-top: 0.1rem;
}

.dev-card-thumb {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  align-self: stretch;
  background: #070b13;
  border-right: 1px solid var(--color-border-soft);
  overflow: hidden;
}

.dev-card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s var(--ease-out);
}

/* Branded earthquake / USGS graphics: bias crop toward the map side */
.dev-card-thumb--map img {
  object-position: 28% center;
}

/* FDA product packaging: never crop labels/UPCs; show full package */
.dev-card-thumb--product {
  background: #0d1119;
}

.dev-card-thumb--product img {
  object-fit: contain;
  padding: 3px;
}

.dev-card:hover .dev-card-thumb img {
  transform: scale(1.06);
}

@keyframes stripIn {
  from { opacity: 0; transform: translateX(42px); }
}

.dev-card:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-card);
  transform: translateY(-2px);
  color: inherit;
}

.dev-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dev-card-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.dev-card-title {
  font-family: var(--font-heading);
  font-size: 0.895rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dev-card-foot {
  margin-top: auto;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Live (flagship) cards in the strip */
.dev-card--live {
  width: 316px;
  border-color: rgba(239, 68, 68, 0.32);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.07), rgba(9, 14, 23, 0.4));
}

.dev-card--live:hover { border-color: rgba(239, 68, 68, 0.55); }

.dev-card--live .dev-card-foot { color: #F1A0A0; font-weight: 600; }

.dev-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  width: 100%;
  border: 1px dashed var(--color-border-hover);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
}

.dev-empty-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.dev-empty-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}

.dev-empty-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════
   POST MEDIA (shared media component)
   ═══════════════════════════════════════════════════ */

.pm-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 10%, #0D1524, #070B13);
  border: 1px solid var(--color-border-soft);
}

.pm-media img,
.pm-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-media img { transition: transform 0.7s var(--ease-out); }

a:hover .pm-media img,
article:hover .pm-media img { transform: scale(1.03); }

/* Broken media fallback */
.pm-media.pm-broken img,
.pm-media.pm-broken video { display: none; }

.pm-media.pm-broken::after {
  content: 'Media unavailable';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════
   TOP STORIES
   ═══════════════════════════════════════════════════ */

.stories {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 6vh, 4.25rem) 0 clamp(2rem, 5vh, 3rem);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
}

.filter-chips:empty { display: none; }

.filter-chip {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.38rem 0.85rem;
  transition: all var(--duration-fast) var(--ease-out);
}

.filter-chip:hover { color: var(--color-text); border-color: var(--color-border-hover); }

.filter-chip.is-active {
  color: #fff;
  background: rgba(62, 141, 243, 0.16);
  border-color: rgba(62, 141, 243, 0.5);
}

.stories-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

/* Card entrance on data load */
.feed-in {
  animation: cardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
}

/* Lead story: large, media dominant */
.lead-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-panel);
  overflow: hidden;
  color: inherit;
  transition: border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.lead-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-3px);
  color: inherit;
}

.lead-card .pm-media {
  aspect-ratio: 16 / 9.8;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border-soft);
}

.lead-body { padding: 1.15rem 1.3rem 1.3rem; }

.lead-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.lead-title {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #F5F7FA;
  margin-bottom: 0.6rem;
}

.lead-card:hover .lead-title { color: #fff; }

.lead-excerpt {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.card-meta .meta-sep { opacity: 0.5; }

/* Secondary stories: media cells, 2x2 on desktop */
.stories-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-content: start;
}

.stories-more {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.stories-more:empty { display: none; }

.story-cell {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.story-cell-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: inherit;
}

.story-cell-link:hover { color: inherit; }

.lead-link {
  display: block;
  color: inherit;
}

.lead-link:hover { color: inherit; }

.story-cell-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.story-cell-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-cell:hover .story-cell-title { color: #fff; }

.story-cell .card-meta { font-size: 0.7rem; }

.stories-foot {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Skeletons */
.lead-skeleton .ls-media {
  aspect-ratio: 16 / 9.8;
  border-radius: 14px;
  margin-bottom: 1rem;
}

.ls-media, .ls-line, .cell-skeleton, .wire-skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,0.045) 40%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.045) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 10px;
}

.ls-line { height: 22px; margin-bottom: 0.6rem; }
.ls-line.short { width: 55%; }
.cell-skeleton { aspect-ratio: 16 / 12; }
.wire-skeleton { height: 44px; }

/* Feed failure / empty states */
.feed-state {
  border: 1px dashed var(--color-border-hover);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  grid-column: 1 / -1;
}

.feed-state-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}

.feed-state-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}

.feed-state .btn { margin-top: 0.2rem; }

/* ═══════════════════════════════════════════════════
   THE WIRE
   ═══════════════════════════════════════════════════ */

.wire-band {
  padding: clamp(2.5rem, 6vh, 4rem) 0;
  border-top: 1px solid var(--color-border-soft);
}

.band-title-sm { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

.wire-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2.5rem;
  row-gap: 0;
}

.wire-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid var(--color-border-soft);
  color: inherit;
  border-radius: 4px;
}

.wire-item:hover { background: rgba(255, 255, 255, 0.025); color: inherit; }

.wire-time {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.wire-body { min-width: 0; }

.wire-headline {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wire-item:hover .wire-headline { color: #fff; }

.wire-cat {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 0.28rem;
}

.wire-cat--live { color: #F87171; }
.wire-cat--warning { color: #E9C551; }

/* ═══════════════════════════════════════════════════
   APP ECOSYSTEM
   ═══════════════════════════════════════════════════ */

.app {
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  background:
    radial-gradient(60% 90% at 85% 20%, rgba(62, 141, 243, 0.07), transparent 60%),
    linear-gradient(180deg, var(--color-bg), #060A12 55%, var(--color-bg));
  border-top: 1px solid var(--color-border-soft);
  /* No overflow clip: the flashlight beam extends past the section top */
  overflow-x: clip;
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.app-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.7rem 0;
}

.app-feature {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 54ch;
}

.app-feature strong { color: var(--color-text); font-weight: 600; }

.app-feature-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(62, 141, 243, 0.3);
  background: rgba(62, 141, 243, 0.09);
  color: #8FBCF7;
  margin-top: 0.1rem;
}

.app-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}

.app-status-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Phone stage - hyper-real iPhone 16 Pro Max */
.app-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
}

.stage-scene {
  position: relative;
  perspective: 1700px;
}

/* Ground shadow anchoring the phone in space */
.stage-scene::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 12%;
  bottom: -32px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(52% 58% at 46% 50%, rgba(0, 0, 0, 0.62), transparent 72%);
  filter: blur(16px);
}

/* Case body */
.stage-phone {
  position: relative;
  width: min(320px, 84vw);
  border-radius: 58px;
  padding: 8px;
  background:
    radial-gradient(120% 90% at 18% 6%, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(152deg, #2B2E35 0%, #191B20 34%, #0B0C10 72%, #1E2127 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.16),
    inset 0 -2px 3px rgba(0, 0, 0, 0.7),
    inset 2px 0 2px rgba(255, 255, 255, 0.04),
    26px 44px 80px rgba(0, 0, 0, 0.6),
    9px 14px 30px rgba(0, 0, 0, 0.48),
    0 0 110px rgba(62, 141, 243, 0.07);
  transform: rotateY(-8deg) rotateX(2.4deg);
}

/* Case-covered side buttons */
.phone-btn {
  position: absolute;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #383C44, #101216 78%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.55);
}

.phone-btn-action  { left: -3.5px; top: 15.5%; height: 24px; }
.phone-btn-volup   { left: -3.5px; top: 23.5%; height: 42px; }
.phone-btn-voldown { left: -3.5px; top: 31.5%; height: 42px; }

.phone-btn-power,
.phone-btn-camctl {
  background: linear-gradient(270deg, #383C44, #101216 78%);
}

.phone-btn-power  { right: -3.5px; top: 26%; height: 64px; }
.phone-btn-camctl { right: -3.5px; top: 58%; height: 30px; }

/* Titanium frame */
.phone-frame {
  border-radius: 50px;
  padding: 3px;
  background:
    linear-gradient(158deg,
      #A7ACB6 0%, #62666F 10%, #43474F 24%, #888D97 42%,
      #34383F 58%, #8E939D 76%, #515660 90%, #23262C 100%);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.85);
}

/* Display */
.stage-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1320 / 2868;
  border-radius: 47px;
  border: 5px solid #000;
  background: linear-gradient(180deg, #01030A 0%, #050B16 46%, #020408 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.screen-wallpaper {
  position: absolute;
  z-index: 0;
  top: 24%;
  left: 50%;
  width: 205%;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.98;
  filter: brightness(1.3) saturate(1.12);
  pointer-events: none;
}

.screen-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(1, 3, 8, 0.55) 0%, rgba(1, 3, 8, 0.05) 20%,
      rgba(1, 3, 8, 0.02) 40%, rgba(2, 4, 9, 0.5) 74%,
      rgba(1, 3, 7, 0.78) 100%);
  pointer-events: none;
}

/* Glass reflection */
.stage-screen::after {
  content: '';
  position: absolute;
  z-index: 7;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.025) 22%,
      transparent 36%, transparent 74%, rgba(255, 255, 255, 0.03) 100%);
  pointer-events: none;
}

/* Status bar */
.screen-statusbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.8rem 1.3rem 0;
  min-height: 2.1rem;
}

.stage-location {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.94);
  margin: 0.14rem 0 0;
  max-width: 34%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statusbar-icons {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  color: rgba(255, 255, 255, 0.95);
}

.sb-icon { display: block; }

.stage-battery {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.95);
}

.stage-battery-icon { display: block; }

#stage-battery-fill { transition: width 0.35s ease; }

.stage-battery-level {
  position: absolute;
  top: 50%;
  left: 0;
  width: 23px;
  transform: translateY(-50%);
  text-align: center;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #05080F;
}

.stage-battery--charging #stage-battery-fill { fill: #30D158; }

.stage-battery--illustrative #stage-battery-fill { fill: rgba(255, 255, 255, 0.92); }

/* Dynamic Island */
.stage-island {
  position: absolute;
  z-index: 4;
  top: 0.78rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.32rem;
  width: 94px;
  height: 26px;
  padding: 0 23px 0 10px;
  border-radius: var(--radius-full);
  background: #000;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.6),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.island-lens {
  position: absolute;
  top: 50%;
  right: 5.5px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1E2C47 0%, #0A1120 44%, #030509 78%);
  box-shadow:
    inset 0 0 2px rgba(96, 145, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.85);
}

.island-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-live);
  animation: livePulse 2.4s ease-out infinite;
}

.island-text {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #F87171;
}

.island-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
}

.island-wave i {
  width: 2px;
  border-radius: 1px;
  background: rgba(248, 113, 113, 0.85);
}

.island-wave i:nth-child(1) { height: 4px; }
.island-wave i:nth-child(2) { height: 8px; }
.island-wave i:nth-child(3) { height: 6px; }

/* Lock-screen clock: date above, oversized time (iOS 16+) */
.screen-clock {
  position: relative;
  z-index: 2;
  margin-top: 1.35rem;
}

.stage-date {
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 0.1rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.stage-time {
  font-size: 4.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-align: center;
  color: rgba(255, 255, 255, 0.96);
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* Live weather readout (Open-Meteo + optional NWS alert card) */
.stage-weather {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  margin: 0.55rem auto 0;
  padding: 0.2rem 0.35rem;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.stage-weather-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
}

.stage-weather-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-weather-icon[data-weather="clear"] svg circle,
.stage-weather-icon[data-weather="partly-cloudy"] svg circle {
  animation: stageSunPulse 5.5s ease-in-out infinite;
}

.stage-weather-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.stage-weather-temp {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stage-weather-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.2;
}

.stage-weather-fx {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage-sun-glow {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.16) 0%, rgba(250, 204, 21, 0.04) 42%, transparent 72%);
  animation: stageSunGlow 7s ease-in-out infinite;
}

.stage-fog-layer {
  position: absolute;
  inset: auto -10% 18% -10%;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(203, 213, 225, 0.12) 38%, rgba(148, 163, 184, 0.16) 100%);
  filter: blur(10px);
  animation: stageFogDrift 12s ease-in-out infinite;
}

.stage-fog-layer--back {
  inset: auto -18% 10% -18%;
  height: 46%;
  opacity: 0.55;
  animation-duration: 16s;
  animation-direction: reverse;
}

.stage-rain-drop {
  position: absolute;
  top: -8%;
  left: calc((var(--i) * 7.1%) + 2%);
  width: 1px;
  height: 14%;
  background: linear-gradient(180deg, transparent, rgba(125, 211, 252, 0.55), transparent);
  opacity: 0;
  transform: rotate(12deg);
  animation: stageRainFall 1.35s linear infinite;
  animation-delay: calc(var(--i) * 0.11s);
}

.stage-rain-drop--heavy {
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(186, 230, 253, 0.72), transparent);
  animation-duration: 0.95s;
}

.stage-snow-flake {
  position: absolute;
  top: -4%;
  left: calc((var(--i) * 5.6%) + 1%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  opacity: 0;
  animation: stageSnowFall 4.8s linear infinite;
  animation-delay: calc(var(--i) * 0.24s);
}

.stage-lightning-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: stageLightning 7.5s ease-out infinite;
}

.stage-screen[data-weather="cloudy"] .screen-shade,
.stage-screen[data-weather="rain"] .screen-shade,
.stage-screen[data-weather="drizzle"] .screen-shade,
.stage-screen[data-weather="snow"] .screen-shade,
.stage-screen[data-weather="thunderstorm"] .screen-shade,
.stage-screen[data-weather="fog"] .screen-shade {
  background:
    linear-gradient(180deg,
      rgba(1, 3, 8, 0.62) 0%, rgba(1, 3, 8, 0.08) 20%,
      rgba(1, 3, 8, 0.06) 40%, rgba(2, 4, 9, 0.58) 74%,
      rgba(1, 3, 7, 0.82) 100%);
}

.stage-card-weather {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(28, 30, 24, 0.68);
}

.stage-card-weather[data-severity="extreme"],
.stage-card-weather[data-severity="severe"] {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(32, 22, 24, 0.72);
}

.stage-weather-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5.5px;
  background: rgba(251, 191, 36, 0.14);
  color: #FBBF24;
}

.stage-weather-alert-icon svg {
  width: 14px;
  height: 14px;
}

@keyframes stageSunPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.92; }
}

@keyframes stageSunGlow {
  0%, 100% { opacity: 0.72; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@keyframes stageFogDrift {
  0%, 100% { transform: translateX(-2%); opacity: 0.65; }
  50% { transform: translateX(3%); opacity: 0.9; }
}

@keyframes stageRainFall {
  0% { opacity: 0; transform: translateY(-10%) rotate(12deg); }
  15% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(520%) rotate(12deg); }
}

@keyframes stageSnowFall {
  0% { opacity: 0; transform: translateY(-8%) translateX(0); }
  20% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(520%) translateX(8px); }
}

@keyframes stageLightning {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.55; }
  94% { opacity: 0; }
  95% { opacity: 0.35; }
  96% { opacity: 0; }
}

.stage-weather-fx--static .stage-rain-drop,
.stage-weather-fx--static .stage-snow-flake,
.stage-weather-fx--static .stage-lightning-flash,
.stage-weather-fx--static .stage-sun-glow,
.stage-weather-fx--static .stage-fog-layer,
.stage-weather-fx--static .stage-weather-icon svg circle {
  animation: none !important;
}

/* Notification stack pinned above the dock */
.stage-cards {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 0.55rem;
}

.stage-card {
  border-radius: 21px;
  background: rgba(28, 32, 41, 0.6);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.36);
  padding: 0.72rem 0.85rem;
  margin-bottom: 0.5rem;
}

.stage-card:last-child { margin-bottom: 0; }

.stage-card-la {
  background: rgba(24, 27, 36, 0.74);
  border-color: rgba(239, 68, 68, 0.28);
}

/* Notification stack: cards rise in when stage is revealed */
[data-reveal="phone"] .stage-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="phone"].revealed .stage-card { opacity: 1; transform: none; }

[data-reveal="phone"].revealed .stage-card:nth-child(2) { transition-delay: 0.25s; }
[data-reveal="phone"].revealed .stage-card:nth-child(3) { transition-delay: 0.5s; }

.stage-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.42rem;
}

.stage-card-head img { border-radius: 5.5px; }

.stage-card-head span:nth-child(2) {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  flex: 1;
}

.stage-live {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 3px;
  padding: 0.12rem 0.32rem;
}

.stage-when { font-size: 0.66rem; color: rgba(255, 255, 255, 0.45); }

.stage-card-title {
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 0.22rem;
}

.stage-card-text {
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

.stage-track {
  height: 3.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: 0.55rem;
  overflow: hidden;
}

.stage-track i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #EF4444, #F97316);
}

.stage-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.4rem;
}

/* Flashlight / camera dock */
.screen-dock {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1.6rem 0;
}

.dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  color: #fff;
  background: rgba(50, 55, 66, 0.52);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

.dock-btn-flashlight {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.dock-btn-flashlight:active { transform: scale(0.9); }

/* Torch on: iOS solid-white button state */
.torch-on .dock-btn-flashlight {
  background: #fff;
  color: #0B0D12;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* ── Flashlight: volumetric beam from the rear LED ── */

/* One smooth cone: conic gradient peaking at the beam axis, faded with
   distance by a mask so it dies out before the section above. */
.torch-beam {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 96.5%;
  width: 400px;
  height: 290px;
  margin-left: -200px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(3px) rotate(6deg) scaleY(0.45);
  transform-origin: 50% 100%;
  transition: opacity 0.28s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background:
    /* angular falloff: hot axis blending smoothly to the cone edges */
    conic-gradient(from -26deg at 50% 100%,
      transparent 0deg,
      rgba(205, 226, 255, 0.05) 12deg,
      rgba(226, 240, 255, 0.22) 21deg,
      rgba(248, 252, 255, 0.5) 26deg,
      rgba(226, 240, 255, 0.22) 31deg,
      rgba(205, 226, 255, 0.05) 40deg,
      transparent 52deg),
    /* light pooling near the lens */
    radial-gradient(46% 34% at 50% 100%,
      rgba(222, 237, 255, 0.28) 0%,
      rgba(210, 229, 255, 0.08) 55%,
      transparent 78%);
  filter: blur(7px);
  -webkit-mask-image: linear-gradient(to top,
    #000 0%, rgba(0, 0, 0, 0.85) 34%, rgba(0, 0, 0, 0.38) 60%, transparent 82%);
  mask-image: linear-gradient(to top,
    #000 0%, rgba(0, 0, 0, 0.85) 34%, rgba(0, 0, 0, 0.38) 60%, transparent 82%);
}

/* LED flare at the origin */
.torch-beam::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 74px;
  height: 30px;
  margin-left: -37px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(230, 242, 255, 0.5) 55%,
    transparent 100%);
  filter: blur(4px);
}

.stage-scene.torch-on .torch-beam {
  opacity: 1;
  transform: translateX(3px) rotate(6deg) scaleY(1);
  animation: torchIgnite 0.45s ease-out;
}

/* LED strike flicker on power-on */
@keyframes torchIgnite {
  0% { opacity: 0; }
  18% { opacity: 0.92; }
  30% { opacity: 0.5; }
  48% { opacity: 1; }
  62% { opacity: 0.8; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-scene.torch-on .torch-beam {
    animation: none;
    transform: translateX(3px) rotate(6deg) scaleY(1);
  }
}

/* Light wrapping the phone: titanium rim catch + top spill */
.torch-on .phone-frame {
  box-shadow:
    inset 0 0 3px rgba(0, 0, 0, 0.85),
    0 -3px 18px rgba(214, 232, 255, 0.38),
    3px -1px 14px rgba(214, 232, 255, 0.2);
}

/* Faint ambient bounce onto the scene around the phone */
.stage-scene::after {
  content: '';
  position: absolute;
  inset: -10% -18% -6%;
  z-index: -2;
  background:
    radial-gradient(56% 42% at 53% 8%,
      rgba(214, 231, 255, 0.12) 0%,
      rgba(200, 222, 255, 0.045) 46%,
      transparent 72%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.stage-scene.torch-on::after { opacity: 1; }

.screen-swipe {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0.7rem 0 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.screen-home {
  position: relative;
  z-index: 2;
  display: block;
  width: 37%;
  height: 4.5px;
  margin: 0.45rem auto 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
}

.stage-caption {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════
   NOTEWORTHY NEWS AI
   ═══════════════════════════════════════════════════ */

.ai {
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  border-top: 1px solid var(--color-border-soft);
}

.ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.ai-panel {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-panel);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  max-width: 470px;
}

.ai-panel-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
  background: rgba(255, 255, 255, 0.02);
}

.ai-panel-head img { border-radius: 5px; }

.ai-panel-name {
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
}

.ai-panel-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.18rem 0.45rem;
}

.ai-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 1rem 1.2rem;
}

.ai-msg {
  font-size: 0.84rem;
  line-height: 1.5;
  padding: 0.7rem 0.85rem;
  border-radius: 11px;
  max-width: 92%;
}

.ai-msg-user {
  align-self: flex-end;
  background: rgba(62, 141, 243, 0.16);
  border: 1px solid rgba(62, 141, 243, 0.3);
  color: #E4EEFB;
  border-bottom-right-radius: 4px;
}

.ai-msg-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-secondary);
  border-bottom-left-radius: 4px;
}

.ai-msg-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.ai-source {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9CC4F8;
  border: 1px solid rgba(62, 141, 243, 0.3);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
}

.ai-attach,
.ai-voice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-hover);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.ai-voice { border-style: solid; }

.ai-voice-icon { display: inline-flex; color: var(--color-accent); }

.ai-voice-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
  margin-left: auto;
}

.ai-voice-wave i {
  width: 2.5px;
  border-radius: 2px;
  background: rgba(62, 141, 243, 0.75);
}

.ai-voice-wave i:nth-child(1) { height: 5px; }
.ai-voice-wave i:nth-child(2) { height: 10px; }
.ai-voice-wave i:nth-child(3) { height: 7px; }
.ai-voice-wave i:nth-child(4) { height: 12px; }
.ai-voice-wave i:nth-child(5) { height: 6px; }

/* Sequential reveal of chat elements */
[data-reveal="stage"] .ai-panel-body > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="stage"].revealed .ai-panel-body > * { opacity: 1; transform: none; }
[data-reveal="stage"].revealed .ai-panel-body > *:nth-child(2) { transition-delay: 0.3s; }
[data-reveal="stage"].revealed .ai-panel-body > *:nth-child(3) { transition-delay: 0.6s; }
[data-reveal="stage"].revealed .ai-panel-body > *:nth-child(4) { transition-delay: 0.85s; }

.ai-features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 1.5rem 0 1.7rem;
}

.ai-features li {
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  padding-left: 1.4rem;
}

.ai-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-accent);
  opacity: 0.85;
}

.ai-note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════
   HOW WE VERIFY
   ═══════════════════════════════════════════════════ */

.verify {
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  border-top: 1px solid var(--color-border-soft);
  background: linear-gradient(180deg, var(--color-bg), #05070E 50%, var(--color-bg));
}

.verify-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-top: 2.6rem;
  counter-reset: vstep;
}

/* Connecting line that draws across on reveal */
.verify-steps::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 2%;
  width: 96%;
  height: 1px;
  background: linear-gradient(90deg, rgba(226, 192, 92, 0.55), rgba(226, 192, 92, 0.1));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.2s;
}

.verify-steps.revealed::before { transform: scaleX(1); }

.verify-step {
  position: relative;
  padding-top: 2.1rem;
}

.verify-step::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-gold-text);
}

[data-reveal="steps"] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="steps"] > *.revealed { opacity: 1; transform: none; }

.verify-num {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--color-gold-text);
  display: block;
  margin-bottom: 0.5rem;
}

.verify-name {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 0.45rem;
}

.verify-text {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.verify-foot {
  display: flex;
  justify-content: center;
  margin-top: 2.6rem;
}

/* ═══════════════════════════════════════════════════
   MEDIA LITERACY LAB
   ═══════════════════════════════════════════════════ */

.lab {
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  border-top: 1px solid var(--color-border-soft);
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.lab-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-panel);
  padding: 1.25rem 1.2rem 1.1rem;
  color: inherit;
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
}

.lab-card:hover {
  border-color: rgba(62, 141, 243, 0.4);
  background: var(--color-bg-card);
  transform: translateY(-3px);
  color: inherit;
}

.lab-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-secondary);
  margin-bottom: 0.35rem;
  transition: color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}

.lab-card:hover .lab-card-icon { color: #8FBCF7; border-color: rgba(62, 141, 243, 0.35); }

.lab-card-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--color-text);
}

.lab-card-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  flex: 1;
}

.lab-card-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
  transition: color var(--duration-fast) var(--ease-out);
}

.lab-card:hover .lab-card-go { color: var(--color-accent); }

/* ═══════════════════════════════════════════════════
   WEEKLY BRIEF
   ═══════════════════════════════════════════════════ */

.brief {
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  border-top: 1px solid var(--color-border-soft);
  background:
    radial-gradient(50% 80% at 15% 30%, rgba(62, 141, 243, 0.05), transparent 60%),
    var(--color-bg);
  overflow: clip;
}

.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.7rem;
  max-width: 430px;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.newsletter-input::placeholder { color: var(--color-text-muted); }

.newsletter-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  background: rgba(255, 255, 255, 0.06);
}

.newsletter-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.8rem;
}

.newsletter-hint.is-success { color: #6EE7A0; }
.newsletter-hint.is-error { color: #F49B9B; }

/* Email preview card */
.mail-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-panel);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  max-width: 470px;
  margin-left: auto;
}

.mail-meta {
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--color-border-soft);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mail-meta-row {
  display: flex;
  gap: 0.7rem;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  min-width: 0;
}

.mail-meta-row > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-meta-label {
  width: 46px;
  flex: 0 0 auto;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--color-text-muted);
  padding-top: 0.1em;
}

.mail-subject { font-weight: 600; color: var(--color-text); }

.mail-body { padding: 1.15rem 1.15rem 1.3rem; }

.mail-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.mail-brand img { border-radius: 6px; }

.mail-brand-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}

.mail-brand-tag { font-size: 0.68rem; color: var(--color-text-muted); }

.mail-text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: 0.7rem;
}

.mail-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.85rem 0 1rem;
}

.mail-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
  border-radius: 5px;
}

.mail-chip-green  { background: rgba(34, 197, 94, 0.12);  border: 1px solid rgba(34, 197, 94, 0.3);  color: #6EE7A0; }
.mail-chip-yellow { background: rgba(234, 179, 8, 0.12);  border: 1px solid rgba(234, 179, 8, 0.3);  color: #E9C551; }
.mail-chip-blue   { background: rgba(62, 141, 243, 0.12); border: 1px solid rgba(62, 141, 243, 0.3); color: #93C0F7; }
.mail-chip-red    { background: rgba(239, 68, 68, 0.12);  border: 1px solid rgba(239, 68, 68, 0.3);  color: #F87171; }

.mail-alert {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.mail-alert-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
}

.mail-alert-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
}

.mail-alert-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}

.mail-alert-sub { font-size: 0.68rem; color: var(--color-text-muted); }

.mail-alert-map {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-top: 1px solid var(--color-border-soft);
}

.mail-sign {
  font-size: 0.8125rem;
  color: var(--color-text);
  line-height: 1.5;
}

.mail-sign span { font-size: 0.72rem; color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════
   MISSION
   ═══════════════════════════════════════════════════ */

.mission {
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  border-top: 1px solid var(--color-border-soft);
}

.mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.mission-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

.mission-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 6, 11, 0.55));
}

.mission-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission-text {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-top: 1.2rem;
  max-width: 54ch;
}

.mission-sign {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-text);
  margin-top: 1.6rem;
  line-height: 1.5;
}

.mission-sign span {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--color-border-soft);
  background: #030509;
  padding: clamp(2.5rem, 6vh, 4rem) 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.6rem;
}

.footer-brand { max-width: 240px; }

.footer-tag {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: 0.9rem;
}

.footer-col-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-list a {
  font-size: 0.8425rem;
  color: var(--color-text-secondary);
}

.footer-list a:hover { color: var(--color-text); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.footer-motto { font-style: italic; font-family: var(--font-body); }

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL VARIANTS
   ═══════════════════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed { opacity: 1; transform: none; }

[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="rise"] { transform: translateY(52px) scale(0.965); }
[data-reveal="phone"] { transform: translateY(60px) rotate(1.2deg); }
[data-reveal="stage"] { transform: translateY(34px); }

[data-reveal="stagger"],
[data-reveal="steps"] {
  opacity: 1;
  transform: none;
  transition: none;
}

[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="stagger"] > *.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal] > *,
  [data-reveal="phone"] .stage-card,
  [data-reveal="stage"] .ai-panel-body > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dev-card, .feed-in { animation: none; }
  .live-dot, .island-dot { animation: none; }
  .stage-weather-icon svg circle,
  .stage-rain-drop,
  .stage-snow-flake,
  .stage-lightning-flash,
  .stage-sun-glow,
  .stage-fog-layer { animation: none !important; }
}

/* ═══════════════════════════════════════════════════
   SCROLL TOP + AUDIO VISUALIZER
   ═══════════════════════════════════════════════════ */

.scroll-top {
  position: fixed;
  bottom: 1.4rem;
  left: 1.4rem;
  z-index: var(--z-elevated);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 16, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
}

.scroll-top[hidden] { display: none; }

.scroll-top.visible { opacity: 1; transform: translateY(0); }

.scroll-top:hover { color: var(--color-text); border-color: var(--color-accent); }

.scroll-top:active { transform: scale(0.92); }

.audio-visualizer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 48px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.audio-visualizer.active { opacity: 0.85; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stories-more { grid-template-columns: repeat(3, 1fr); }
  .wire-columns { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

@media (max-width: 959px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 2.5rem);
  }

  .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }

  .hero-story { max-width: 640px; }

  .hero-planet {
    width: 1300px;
    left: calc(50% - 400px);
    top: -1074px;
    translate: 0 calc(var(--hp) * 280px);
  }

  .app-grid, .ai-grid, .brief-grid, .mission-grid { grid-template-columns: 1fr; }

  .ai-stage { order: 2; }
  .ai-panel { max-width: 100%; }

  .mail-card { margin-left: 0; max-width: 560px; }

  .stories-grid { grid-template-columns: 1fr; }

  .stories-more { grid-template-columns: 1fr 1fr; }

  .verify-steps {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 560px;
  }

  .verify-steps::before {
    top: 2%;
    left: 4px;
    width: 1px;
    height: 96%;
    background: linear-gradient(180deg, rgba(226, 192, 92, 0.55), rgba(226, 192, 92, 0.1));
    transform: scaleY(0);
    transform-origin: top center;
  }

  .verify-steps.revealed::before { transform: scaleY(1); }

  .verify-step {
    padding: 0 0 1.6rem 1.9rem;
    max-width: 52ch;
  }

  .verify-step::before { left: -0.5px; top: 4px; }

  .lab-grid { grid-template-columns: 1fr 1fr; }

  .band-sub-right { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 719px) {
  .hero {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 2rem;
  }

  .hero-planet {
    width: 900px;
    left: calc(50% - 450px);
    top: -756px;
    translate: 0 calc(var(--hp) * 130px);
  }

  .planet-surface {
    background-image: url('/v2/assets/earth-disc-sm.webp?v=5');
    transform: rotate(calc(163deg + var(--hp) * 26deg + var(--spin)));
  }

  .hero-veil {
    background:
      linear-gradient(180deg, rgba(4, 6, 11, 0.66) 0%, rgba(4, 6, 11, 0.34) 32%, rgba(4, 6, 11, 0.5) 62%, var(--color-bg) 99%);
  }

  .hero-trust { color: rgba(235, 238, 244, 0.66); margin-bottom: 1.6rem; }

  .hero-title { font-size: clamp(2.35rem, 11vw, 3rem); }

  .hero-cta { flex-direction: column; align-items: stretch; }

  .hero-cta .btn { width: 100%; padding: 1rem 1.5rem; }

  .hero-app-teaser { display: flex; }

  .hero-app-teaser-text { white-space: normal; font-size: 0.75rem; }

  .nav-live-chip { padding: 0.3rem 0.55rem; }
  .nav-live-chip-count { display: none; }

  .band-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.5rem; }

  .stories { padding: 2.5rem 0 2rem; }

  .stories-secondary { grid-template-columns: 1fr; gap: 1.25rem; }

  .stories-more { grid-template-columns: 1fr; gap: 1.25rem; }

  .wire-columns { grid-template-columns: 1fr; }

  .lead-body { padding: 1rem 1.05rem 1.1rem; }

  .hero-story-body { padding: 0.95rem 1.05rem 1.05rem; }

  .app, .ai, .verify, .lab, .brief, .mission { padding: 3.25rem 0; }

  .lab-grid { grid-template-columns: 1fr; }

  .newsletter-form { flex-direction: column; max-width: none; }

  .newsletter-form .btn { width: 100%; padding: 1rem 1.5rem; }

  .newsletter-input { padding: 1rem; font-size: 1rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

  .dev-card { width: 246px; }
  .dev-card--live { width: 288px; }
}

/* [hidden] must always win over component display rules */
[hidden] { display: none !important; }

@media (max-width: 959px) {
  .dev-arrows { display: none !important; }
}