/* =========================================================
   MapSpective · responsive pass
   Loaded last. Phones (≤560), tablets (561–1100), wide screens (≥1600),
   short landscape phones.
   ========================================================= */

/* ---------- wide screens: every section shares one content width ---------- */
.hero > *,
.cta > * { width: 100%; max-width: 96rem; margin-left: auto; margin-right: auto; }

/* ---------- signup: never squeeze the email field ---------- */
.signup__row { flex-wrap: wrap; }
.signup__input { min-width: min(100%, 15rem); }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .hero__title { font-size: clamp(2.8rem, 6.4vw, 4.6rem); }
}
@media (min-width: 700px) and (max-width: 960px) {
  /* three features still fit side by side on a tablet */
  .features { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .feature, .feature:first-child { padding: 0 1.1rem; }
  .feature:first-child { padding-left: 0; }
  .feature + .feature { border-top: 0; border-left: 1px solid var(--line); padding-top: 0; }
  .feature p { font-size: 1rem; }
}

/* step tabs: one compact row instead of a tall 2-column block */
@media (max-width: 900px) {
  .flow__tabs { grid-template-columns: repeat(5, 1fr); }
  .ftab, .ftab + .ftab { padding: 0.9rem 0.5rem 0.9rem 0; }
  .ftab__title { font-size: 1rem; }
}

/* ---------- phones ---------- */
@media (max-width: 560px) {
  /* stacked form: column flex must not collapse the input's height */
  .signup__row { flex-direction: column; flex-wrap: nowrap; }
  .signup__input { flex: none; width: 100%; height: 3.6rem; }
  .btn { height: 3.6rem; }

  /* header */
  .hero__bar { gap: 1rem; }
  .logo__mark { width: 2.3rem; }
  .logo__word { font-size: 1.45rem; }
  .status { gap: 0.55rem; font-size: 0.68rem; letter-spacing: 0.12em; white-space: nowrap; }
  .status__dot { width: 0.6rem; height: 0.6rem; }

  /* tabs: numbers + progress only; the caption above already names the step */
  .ftab__title { display: none; }
  .ftab__num { font-size: 0.85rem; }
  .ftab.is-active .ftab__num { color: var(--fg); }

  /* log + marquee */
  .flow-log__body { min-height: 8rem; padding: 0.9rem; font-size: 0.74rem; }
  .flow-log__bar span { font-size: 0.7rem; }
  .pill { font-size: 0.8rem; padding: 0.55rem 0.95rem; }

  /* demo: packets show only their badge so they fit the narrow columns */
  .dpacket span { display: none; }
  .dpacket { padding: 0.3rem; }
  .demo-flow__head { font-size: 0.7rem; }

  /* band */
  .band__facts { font-size: 0.78rem; }
  .band__facts b { font-size: 1.15rem; }

  /* sections breathe less on small screens */
  .flow, .demo, .cta { padding-top: 3.5rem; }
  .demo { padding-bottom: 3.5rem; }
}
@media (max-width: 360px) {
  .status { font-size: 0.6rem; letter-spacing: 0.08em; }
  .logo__word { font-size: 1.3rem; }
  .flow-hud__title { font-size: 1.8rem; }
}

/* ---------- short landscape phones: keep the 3D stage on one screen ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .flow3d { height: max(320px, 88vh); }
  .is-3d .flow-hud { bottom: 0.8rem; }
  .flow-hud__sub { display: none; }
  .hero { min-height: auto; }
}

/* taller 3D stage on tablets/phones so the scene isn't a thin letterbox */
@media (max-width: 900px) {
  .flow3d { height: clamp(420px, 82vw, 620px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .flow3d { height: max(320px, 88vh); }
}

/* headline wraps to more lines on narrow screens: give descenders room (y in "you" vs "click?") */
@media (max-width: 700px) {
  .hero__title { line-height: 1.08; letter-spacing: -0.05em; }
  .hero__title .line { padding-bottom: 0.2em; margin-bottom: -0.12em; }
}