/* Page-specific layout: nav, hero, sections, terminal frame, finding cards, faq, footer. */

/* ── Nav ────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 88px;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  z-index: 50;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.scrolled { border-bottom-color: var(--color-border); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Logo is now tightly cropped (1024x193 transparent PNG). No margin trickery needed. */
.nav__logo img {
  height: 44px;
  width: auto;
  display: block;
}
.nav__cta { display: flex; align-items: center; gap: 12px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: calc(88px + clamp(36px, 6vw, 72px));
  padding-bottom: clamp(56px, 7vw, 96px);
  min-height: 78dvh;
  display: flex;
  align-items: center;
  border-top: none !important;
  overflow: hidden;
  background: var(--color-bg);
}

/* Cinematic video background ── stacked behind content via positive z-index */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero > .container { position: relative; z-index: 3; }
.hero__grid-bg { z-index: 2; }
.hero__bg-mask { z-index: 1; }
.hero::before { z-index: 2; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;                              /* visible ambient texture */
  /* Soft blur softens the busy wireframe so foreground copy stays readable
     without needing a card. The 1.04 scale compensates for blur edge clipping. */
  filter: saturate(0.9) contrast(1.1) brightness(1.05) blur(5px);
  transform: scale(1.04);
}
/* Three-layer mask, all baked into the video bg (no visible card on top):
   1. Strong radial dimmer in the LEFT-CENTER where the hero copy lives — fully
      black at the copy zone, fading transparent toward the right where the
      video shines through clean.
   2. Soft vignette around the edges so the section doesn't feel boxy.
   3. Vertical fade into page bg at top + bottom for a seamless section blend. */
.hero__bg-mask {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 28% 55%,
      rgba(10,10,10,0.92) 0%,
      rgba(10,10,10,0.78) 25%,
      rgba(10,10,10,0.45) 55%,
      rgba(10,10,10,0.10) 85%,
      rgba(10,10,10,0) 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%,
      rgba(10,10,10,0) 60%,
      rgba(10,10,10,0.4) 100%),
    linear-gradient(180deg,
      var(--color-bg) 0%,
      rgba(10,10,10,0) 14%,
      rgba(10,10,10,0) 78%,
      var(--color-bg) 100%);
}

/* Mobile: keep the video — now ~1MB compressed it's reasonable on cellular.
   The mask shifts to a centered radial dimmer so copy reads against the
   smaller frame. */
@media (max-width: 768px) {
  .hero__bg-mask {
    background:
      radial-gradient(ellipse 110% 70% at 50% 55%,
        rgba(10,10,10,0.85) 0%,
        rgba(10,10,10,0.65) 35%,
        rgba(10,10,10,0.25) 75%,
        rgba(10,10,10,0) 100%),
      linear-gradient(180deg,
        var(--color-bg) 0%,
        rgba(10,10,10,0) 14%,
        rgba(10,10,10,0) 80%,
        var(--color-bg) 100%);
  }
  /* Slightly stronger blur on mobile so the busy wireframe doesn't fight tighter type */
  .hero__video { filter: saturate(0.9) contrast(1.1) brightness(1.05) blur(7px); }
}

/* Suppress the video for users who explicitly opt into reduced data (Chrome's
   Lite-mode / Safari Low Data). Cellular users can save the ~1MB payload. */
@media (prefers-reduced-data: reduce) {
  .hero__video { display: none; }
}

/* Note: we intentionally do NOT hide the hero video under prefers-reduced-motion.
   Windows defaults Settings→Ease of Access→Display→"Show animations" OFF for many
   users, which hides anything keyed to reduced-motion. Our hero clip is a slow,
   muted, ambient drift — not the kind of motion the reduced-motion preference is
   designed to suppress. */

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 80% -10%,
      color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 60%),
    radial-gradient(600px 400px at -10% 110%,
      color-mix(in srgb, #FFFFFF 4%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* asymmetric / left-aligned per design rules */
  gap: 22px;
  max-width: 640px;
  /* No visible plate — each text element gets a subtle dark halo via text-shadow
     and the readability is reinforced by a heavier gradient dimmer on the video
     mask (see .hero__bg-mask below). */
}
/* Dark halo on EVERY hero text element — eyebrow, headline, sub, pills, form
   placeholder, button, trust microcopy, waitlist. Triple-layered shadow so
   the copy stays sharp against the busy ambient video, no visible card. */
.hero .eyebrow,
.hero .hero__h1,
.hero .hero__sub,
.hero .hero__sub strong,
.hero .status-pill,
.hero .email-form input[type="email"],
.hero .email-form input[type="email"]::placeholder,
.hero .trust-microcopy,
.hero .hero__waitlist,
.hero .hero__waitlist .num {
  text-shadow:
    0 0 24px rgba(0,0,0,0.9),
    0 2px 14px rgba(0,0,0,0.85),
    0 1px 2px rgba(0,0,0,0.95);
}
/* The pills + form input also get a soft drop-shadow on the box itself so
   they don't dissolve into the video. The submit button is intentionally
   left at its default styling (no halo, no extra shadow). */
.hero .status-pill,
.hero .email-form input[type="email"] {
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.hero__h1 {
  font-family: var(--font-mono);                  /* Geist Mono — matches the $_vybesafe wordmark */
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 500;
  letter-spacing: -0.045em;                       /* mono needs tighter tracking */
  line-height: 1.02;
  color: var(--color-text);
  max-width: 18ch;
  margin: 0;
}
.hero__sub { color: var(--color-text-muted); font-size: 18px; max-width: 58ch; }
.hero__sub strong { color: var(--color-text); font-weight: 500; }

.hero__waitlist {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.hero__waitlist .num { color: var(--color-accent); font-weight: 600; }
.hero__waitlist .avatars {
  display: inline-flex;
  align-items: center;
}
.avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 2px solid var(--color-bg);
  margin-left: -8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  background: var(--color-surface);
}
.avatar:first-child { margin-left: 0; }

/* .hero__asset removed — hero is now logo-typography led, no boxed product image */

/* Subtle grid background overlay on hero */
.hero__grid-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}

/* Hero status pills (replaces the old CLI command line) */
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -4px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.7);
  border: 1px solid var(--color-border-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.status-pill__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* ── Demo section (See it in action) ───────────────────────────────── */
.demo { background: var(--color-bg); }
.demo__head {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 56ch;
  margin-bottom: 56px;
}
.demo__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.demo__sub { color: var(--color-text-muted); font-size: 17px; max-width: 56ch; }

.demo__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}
.demo__frames {
  position: absolute;
  inset: 0;
}
.demo__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
}
.demo__frame.is-active { opacity: 1; }
.demo__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--color-bg);
}
.demo__caption {
  position: absolute;
  left: 24px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(10,10,10,0.78);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--color-border-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
}
.demo__step {
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent);
}
.demo__caption-text { letter-spacing: -0.005em; }
.demo__progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.06);
}
.demo__progress-bar {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width 80ms linear;
}

/* Compatibility strip */
.compat {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.compat__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.compat__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.compat__list li {
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.compat__list li:hover {
  border-color: rgba(125, 255, 180, 0.3);
  color: var(--color-text);
}

@media (max-width: 700px) {
  .demo__head { margin-bottom: 32px; }
}

/* ── Problem strip ──────────────────────────────────────────────────── */
.problem {
  text-align: left;
}
.problem__statement {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 500;
  max-width: 30ch;
  color: var(--color-text);
}
.problem__statement em {
  font-style: normal;
  color: var(--color-text-muted);
}

/* ── Hacker stories preview strip ──────────────────────────────────── */
.stories-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.stories-strip__head h2 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.015em; }
.stories-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.story-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration: none;
}
.story-card:hover {
  border-color: var(--color-border-2);
  transform: translateY(-2px);
  opacity: 1;
}
.story-card__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.story-card__target { color: var(--color-accent); }
.story-card__title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}
.story-card__lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
.story-card__lead code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.story-card__catch {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.story-card__catch-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}
.story-card__catch code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text);
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border-2);
}

@media (max-width: 900px) {
  .stories-strip__grid { grid-template-columns: 1fr; }
}

/* ── Zigzag what-it-does ────────────────────────────────────────────── */
.zigzag { display: grid; gap: clamp(64px, 8vw, 120px); }
.zigzag__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.zigzag__row--reverse > .zigzag__copy { order: 2; }
.zigzag__copy { display: flex; flex-direction: column; gap: 16px; }
.zigzag__copy h2 { max-width: 14ch; }
.zigzag__copy p { color: var(--color-text-muted); }
.zigzag__copy .features {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
}
.zigzag__copy .features li {
  padding-left: 20px;
  position: relative;
}
.zigzag__copy .features li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--color-text-dim);
}
.zigzag__asset {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-2);
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
}
.zigzag__asset img { width: 100%; height: 100%; object-fit: cover; }

/* ── The Flow (vertical step layout, image-first) ───────────────────── */
.flow__head {
  max-width: 28ch;
  margin-bottom: 96px;
  display: flex; flex-direction: column; gap: 12px;
}
.flow__head h2 { max-width: 16ch; }
.flow__head p  { color: var(--color-text-muted); max-width: 52ch; }

.flow__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  position: relative;
}

/* Each step is a horizontal row: small index column on the left, big image+copy on the right.
   A subtle vertical line runs down the index column connecting all steps. */
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding: 56px 0;
  border-top: 1px solid var(--color-border);
}
.flow__step:first-child { border-top: 0; padding-top: 0; }
.flow__step:last-child { padding-bottom: 0; }

/* Index column with the number + connecting line */
.flow__index {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
}
.flow__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text);
  letter-spacing: var(--tracking-eyebrow);
  background: var(--color-bg);
  padding-right: 8px;
  z-index: 1;
}
.flow__index::before {
  content: "";
  position: absolute;
  left: 9px; top: 24px; bottom: -56px;
  width: 1px;
  background: linear-gradient(to bottom, var(--color-border) 0%, var(--color-border) 80%, transparent 100%);
}
.flow__step:last-child .flow__index::before { display: none; }

/* Body — image takes priority, copy sits beneath OR alongside */
.flow__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.flow__shot {
  position: relative;
  background: transparent;
  border-radius: var(--radius);
  overflow: visible;
}
.flow__shot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px -25px rgba(0,0,0,0.5);
}

.flow__copy { display: flex; flex-direction: column; gap: 12px; }
.flow__title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-text);
  line-height: 1.2;
}
.flow__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
}
.flow__desc code {
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--color-border-2);
  font-size: 0.92em;
  font-family: var(--font-mono);
}

/* Reverse alternating rows so the eye zig-zags down the page */
.flow__step:nth-child(even) .flow__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.flow__step:nth-child(even) .flow__shot { order: 2; }
.flow__step:nth-child(even) .flow__copy { order: 1; }

/* Mobile collapse */
@media (max-width: 900px) {
  .flow__step { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 40px 0; }
  .flow__index::before { left: 7px; }
  .flow__body { grid-template-columns: 1fr; gap: 20px; }
  .flow__step:nth-child(even) .flow__body { grid-template-columns: 1fr; }
  .flow__step:nth-child(even) .flow__shot { order: 0; }
  .flow__step:nth-child(even) .flow__copy { order: 1; }
}

/* ── Why local-first ───────────────────────────────────────────────── */
.local-first__head {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 64px;
  max-width: 28ch;
}
.local-first__diagram {
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  margin-bottom: 48px;
  aspect-ratio: 16 / 9;
}
.local-first__diagram img { width: 100%; height: 100%; object-fit: cover; }
.local-first__bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.local-first__bullet {
  display: flex; flex-direction: column; gap: 8px;
}
.local-first__bullet h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.local-first__bullet p {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ── Lead magnet ───────────────────────────────────────────────────── */
.leadmagnet__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.leadmagnet__cover {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
}
.leadmagnet__cover img { width: 100%; height: 100%; object-fit: cover; }
.leadmagnet__copy { display: flex; flex-direction: column; gap: 20px; }
.leadmagnet__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq__head { margin-bottom: 48px; max-width: 28ch; }
.faq__list { border-top: 1px solid var(--color-border); }
.faq__item {
  border-bottom: 1px solid var(--color-border);
}
.faq__q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-family: var(--font-display);
}
.faq__q:hover { color: var(--color-text); opacity: 0.85; }
.faq__q .icon {
  width: 12px; height: 12px;
  position: relative;
  flex-shrink: 0;
  margin-left: 24px;
}
.faq__q .icon::before, .faq__q .icon::after {
  content: ""; position: absolute;
  background: var(--color-text-muted);
  transition: transform var(--dur) var(--ease);
}
.faq__q .icon::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.faq__q .icon::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.faq__item[open] .faq__q .icon::after { transform: translateX(-50%) rotate(90deg); }
.faq__a {
  padding: 0 0 24px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 70ch;
}
.faq__a code { background: var(--color-surface); padding: 1px 6px; border-radius: 3px; }

/* ── Final CTA band ────────────────────────────────────────────────── */
.cta-band {
  text-align: left;
  position: relative;
  overflow: hidden;
}
.cta-band__inner {
  display: grid; gap: 32px;
  max-width: 720px;
}
.cta-band h2 { max-width: 18ch; }
.cta-band__urgency {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-dim);
  letter-spacing: -0.005em;
}
.cta-band__urgency strong { color: var(--color-text); font-weight: 500; }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--color-border);
  padding: 48px 0 64px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
}
.footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
}
.footer__nav {
  display: flex; gap: 24px;
  list-style: none; padding: 0; margin: 0;
}
.footer__nav a:hover { color: var(--color-text); opacity: 1; }
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__brand img { height: 18px; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero__inner { gap: 22px; }
  .zigzag__row { grid-template-columns: 1fr; }
  .zigzag__row--reverse > .zigzag__copy { order: 0; }
  .zigzag__row--reverse > .zigzag__asset { order: 1; }
  .leadmagnet__inner { grid-template-columns: 1fr; }
  .leadmagnet__cover { max-width: 320px; }
  .local-first__bullets { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Mobile pass ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav: shrink logo + height, hide non-essential ghost links so the primary
     CTA always fits. */
  .nav { height: 64px; }
  .nav__logo img { height: 32px; }
  .nav__cta .btn--ghost { display: none; }
  .nav__cta .btn--primary { padding: 0 12px; height: 38px; font-size: 13px; }
  html { scroll-padding-top: 80px; }

  /* Hero: tighter type, smaller pills, single-column form, content centered. */
  .hero { padding-top: calc(64px + 32px); padding-bottom: 56px; min-height: auto; }
  .hero__inner { max-width: 100%; gap: 18px; }
  .hero__h1  { font-size: clamp(34px, 9vw, 48px); letter-spacing: -0.02em; }
  .hero__sub { font-size: 15px; }
  .status-pill { height: 26px; padding: 0 10px; font-size: 11px; }
  .hero__waitlist { font-size: 11px; flex-wrap: wrap; }

  /* Demo: caption can overflow on phone — let it wrap and shrink. */
  .demo__caption {
    left: 12px; bottom: 14px;
    padding: 8px 12px;
    font-size: 12px;
    max-width: calc(100% - 24px);
  }
  .demo__step { font-size: 10px; }

  /* Compat: tighter pills, allow them to wrap into more rows */
  .compat__list li { padding: 7px 11px; font-size: 12px; }

  /* Footer stacks */
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__nav { gap: 16px; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  /* Phone-narrow tweaks */
  .nav__logo img { height: 28px; }
  .hero__h1  { font-size: clamp(30px, 10vw, 40px); }
  .container { padding-left: 18px; padding-right: 18px; }
}