/* Homepage first screen on phones (25 Oct 2026). Loads last.
   Growth: about 3 of 90 boost visits went past the homepage. On a phone the
   nav wrapped to 155 px and the hero was a full 100svh below it, so "Play IQ
   free" sat under the fold on every phone. The nav now takes one row of
   links, and the hero fills the screen under the sticky nav
   (--a-nav-h, measured in index.html), so the button is on the first screen.
   Gate: scripts/home-first-screen-cta-gate.mjs. */
@media (max-width: 760px) {
  body.astra-v2 .a-nav nav { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0 2px; }
  body.astra-v2 .a-nav nav a { font-size: 12px; padding-inline: 2px; white-space: nowrap; }
  .astra-v2 .a-nav .jotdown-new-badge { margin-left: 4px; }
  body.astra-v2 .lights { height: calc(100svh - var(--a-nav-h, 112px)); min-height: 0; --opening-composition-lift: 0px; }
  body.astra-v2 .lights-line { text-wrap: balance; }
}
@media (max-width: 360px) {
  body.astra-v2 .a-nav nav a { font-size: 10.5px; padding-inline: 1px; }
  body.astra-v2 .a-nav .jotdown-new-badge { margin-left: 2px; padding-inline: 4px; }
  body.astra-v2 .lights-action .btn[data-play-free] { font-size: 16px; }
}
@media (max-width: 760px) and (max-height: 740px) and (orientation: portrait) {
  body.astra-v2 .lights-inner { inset: 0 0 132px; }
  body.astra-v2 .lights-lockup img { width: max(210px, min(56vw, 30svh)); }
  body.astra-v2 .lights-rule { margin-bottom: 12px; }
  body.astra-v2 .lights-tagline { font-size: clamp(44px, 12vw, 58px); }
  body.astra-v2 .lights-line { margin-top: 10px; }
}
/* The shortest phones (iPhone SE first generation): the eyebrow line gives way
   so the lockup, tagline and button never touch, as in landscape. */
@media (max-width: 760px) and (max-height: 600px) and (orientation: portrait) {
  body.astra-v2 .lights-line { display: none; }
  body.astra-v2 .lights-lockup img { width: 170px; }
}