/* ============================================================
   mobile.css — phone & small-tablet polish. Loaded last so it
   overrides. Structural grid-collapsing already lives in the
   other files; this handles type scale, spacing, and the bits
   that need phone-specific attention.
   ============================================================ */

/* ---------- Tablet / small laptop (≤ 860px) ---------- */
@media (max-width: 860px) {
  /* Right/left-aligned section heads read better centered when stacked. */
  .section__head--right,
  .section__head--right .section__lead {
    text-align: center;
    margin-inline: auto;
  }

  /* When a media figure is set to appear first, keep image above text. */
  .grid-order-first { order: -1; }

  /* Demo: video on top, tabs as a wrapping row underneath. */
  .demo .container { max-width: 720px; }
  .demo__tabs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ---------- Phone (≤ 640px) ---------- */
@media (max-width: 640px) {
  :root {
    /* tighter page gutter on phones */
    --gutter: 18px;
  }

  /* Keep the one-section-per-screen feel on phones too: every section is a
     full viewport tall and vertically centers its content. Tall content
     sections (commands) use min-height so they still grow and scroll. */
  .snap,
  .snap.section {
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
    padding-block: clamp(48px, 10vw, 80px);
  }
  /* the one genuinely tall section grows from the top instead of centering */
  .snap.section.commands {
    align-items: start;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Type scale down a touch for comfortable reading. */
  .hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .hero__sub { font-size: 1.05rem; }
  .section__title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
  .pitch__pun { font-size: clamp(1.6rem, 8vw, 2.1rem); }

  /* Hero video + chips */
  .hero__video { width: clamp(150px, 46vw, 230px); }
  .hero__chips { gap: 8px; }
  .hero__chips li { font-size: 0.85rem; padding: 6px 12px; }

  /* CTAs stack full-width and are easy to tap. */
  .hero__cta { width: 100%; flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  /* Meet Lyre: art smaller, single column already handled. */
  .pitch__video { width: clamp(130px, 40vw, 190px); }
  .pitch__beats li, .local__points li, .trust-list li,
  .safe-steps li { font-size: 0.98rem; }

  /* Command dictionary card: let the run-command wrap instead of scroll. */
  .cmd-list li { padding: 12px 12px; }
  .cmd-list__run { font-size: 0.76rem; white-space: normal; }
  .commands__quote,
  .local__reassure { font-size: 1.2rem; }
  .commands__safe { font-size: 1.02rem; }
  .power-chip { font-size: 0.84rem; padding: 8px 13px; }

  /* Steps: comfortable stacked layout, a bit more gap. */
  .steps { gap: 34px; }
  .step__droplet { width: clamp(120px, 40vw, 150px); }
  .step h4 { font-size: 1.35rem; }

  /* Personas / trust art sizing. */
  .persona__art { width: clamp(130px, 42vw, 175px); }
  .trust__art img { max-width: 260px; }
  .local__art img { max-width: 300px; }

  /* --- Demo tabs: compact single-line pills (no big cards) --- */
  .demo__tabs { gap: 8px; }
  .demo__tab {
    display: inline-flex;               /* drop the 2-row grid */
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
  }
  .demo__tab-n { font-size: 0.72rem; }
  .demo__tab-t { font-size: 0.9rem; font-weight: 600; }
  .demo__tab-d { display: none; }       /* hide descriptions on phones */
  .demo__tab:hover { transform: none; } /* no sideways nudge on touch */

  /* --- Demo speaker caption: a slim bottom strip that never covers the
         video. Caps to two lines with ellipsis; sits flush at the bottom. --- */
  .speaker {
    left: 8px; right: 8px;
    bottom: 8px;
    transform: translateY(6px);         /* override the -50% centering */
    max-width: none;
    border-radius: 12px;
    padding: 7px 12px;
    gap: 8px;
  }
  .speaker.is-visible { transform: translateY(0); }
  .speaker__wave { display: none; }     /* save horizontal room for text */
  .speaker__text {
    font-size: 0.78rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;              /* never grow past 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Section heads: pull the big bottom margins in. */
  .section__head { margin-bottom: clamp(24px, 7vw, 40px); }

  /* Footer stacks (Juno-style footer already handles this at 640px). */
}

/* ---------- Small phone (≤ 400px) ---------- */
@media (max-width: 400px) {
  .hero__title { font-size: clamp(2rem, 12vw, 2.6rem); }
  .demo__tab-d { display: none; } /* keep tab labels compact */
  .power-chips { gap: 8px; }
}