/*
 * Phones (and tablets held upright): the same film, composed for portrait. The statement sits big in the top
 * third, the device is the hero of the middle, the segmented control waits at the bottom in the thumb's reach,
 * and the chapters show as a slim row of progress bars along the top. The switch matches main.js's phoneish():
 * narrower than 700 px, or narrower than 900 px and at least 1.15 times as tall as wide. Desktop never sees any
 * of this. Lengths come from --ui-h (the small viewport: never under the browser bar) and the safe areas.
 */

/* desktop and everywhere: what only a phone shows */
.stmt-chips, .seg .lb-short { display: none; }

@media (max-width: 699.98px), (max-width: 899.98px) and (max-aspect-ratio: 20/23) {
  :root {
    --st: env(safe-area-inset-top, 0px);
    --sb: env(safe-area-inset-bottom, 0px);
    --pad: clamp(16px, 5vw, 32px);
    --nav-h: 46px;
    --ui: var(--ui-h, 100svh);
  }
  html { -webkit-text-size-adjust: 100%; }

  /* the film's screen is the large viewport and stays put while the browser bar comes and goes */
  .stage { bottom: auto; height: var(--film-h, 100lvh); }

  /* the nav: Pixello's mark, Qiv, and the status — slim, under the notch */
  .nav { height: calc(var(--nav-h) + var(--st)); padding: var(--st) var(--pad) 0; gap: 12px; }
  .nav-mark { font-size: 0; gap: 0; }
  .nav-mark .nav-logo { width: 18px; height: 18px; }
  .nav-app { padding-left: 13px; gap: 8px; font-size: 15px; }
  .nav-app img { width: 24px; height: 24px; border-radius: 6px; }
  .nav-soon { font-size: 12.5px; gap: 7px; }
  .nav-soon i { width: 7px; height: 7px; }

  /* the chapters: a row of slim bars along the top edge, each filling as you read it */
  .rail { left: var(--pad); right: var(--pad); top: calc(var(--st) + var(--nav-h) - 2px); bottom: auto; transform: none; padding: 0; gap: 4px; border-radius: 0; }
  .rail button { flex: 1 1 0; height: 3px; padding: 0; font-size: 0; border-radius: 2px; background: rgba(var(--rail-ink, 242, 236, 224), 0.2); overflow: hidden; }
  .rail button i { top: 0; height: 100%; border-radius: 2px; opacity: 1; }

  /* a chapter's words: name, statement, then the control at the bottom of the small viewport */
  .ch {
    top: calc(var(--st) + var(--nav-h) + 18px); bottom: auto; left: var(--pad); right: var(--pad); width: auto;
    height: calc(var(--ui) - var(--st) - var(--nav-h) - 18px - max(var(--sb), 14px) - 12px);
    justify-content: flex-start; align-items: center; text-align: center; gap: 8px;
  }
  .ch[data-side="right"] { left: var(--pad); right: var(--pad); }
  .ch-head img, .ch-head span { display: none; }
  .ch-head b { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc, var(--mint)); }
  .ch-stmts { height: var(--stmts-h, 120px); }
  .stmt h2 { margin: 0 auto; max-width: 16ch; font-size: clamp(29px, min(8.6vw, 4.6vh), 46px); line-height: 1; letter-spacing: -0.035em; }
  .stmt ul { display: none; }
  .stmt-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .stmt-chips i { font-style: normal; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 620; color: var(--ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
  .seg { margin-top: auto; --sh: 36px; --sp: 12px; --segf: 13.5px; }
  .seg button:hover { color: var(--ink-2); }
  .seg .lb-long { display: none; }
  .seg .lb-short { display: inline; }
  .ch-get { display: none; }

  /* the opening: the lockup and the headline in the top third; the promise waits for a wider screen */
  .hero-words { top: calc(var(--st) + var(--nav-h) + 22px); padding: 0 var(--pad); }
  .hero-lockup img { width: 40px; height: 40px; }
  .hero-lockup b { font-size: 15px; }
  .hero-lockup small { font-size: 12.5px; }
  .hero-h1 { margin-top: 14px; font-size: clamp(30px, min(9vw, 4.9vh), 50px); line-height: 0.98; text-wrap: balance; }
  .hero-side { display: none; }
  .hero-cue { bottom: calc(max(var(--sb), 12px) + 8px); }

  /* the close: the line at the top, the footer at the bottom, the icon between */
  .close { padding: 0 var(--pad); height: var(--ui); bottom: auto; }
  .close-top { margin-top: calc(var(--st) + var(--nav-h) + 26px); gap: 12px; }
  .close h2 { font-size: clamp(30px, min(9vw, 4.9vh), 50px); }
  .close-sub { font-size: 14.5px; max-width: 30ch; }
  .close-sub b { display: block; }
  .foot { flex-direction: column; gap: 8px; padding: 14px 0 calc(max(var(--sb), 12px) + 6px); font-size: 11.5px; text-align: center; }
  .foot nav { justify-content: center; gap: 6px 14px; }
  .foot > span:first-child { display: none; }
}

/* tablets held upright: the same composition with room to breathe */
@media (min-width: 700px) and (max-width: 899.98px) and (max-aspect-ratio: 20/23) {
  :root { --nav-h: 56px; --pad: 48px; }
  .stmt h2 { max-width: 18ch; }
  .nav-mark { font-size: 15px; gap: 9px; }
  .rail { left: 48px; right: 48px; }
}

/* phones on their side: the desktop composition, tightened to a short screen */
@media (max-height: 500px) and (min-width: 700px) {
  .nav { height: 48px; }
  .ch { top: 50px; bottom: 34px; gap: 8px; }
  .ch-head img { width: 30px; height: 30px; }
  .ch-head b { font-size: 14px; }
  .ch-head span { font-size: 12px; }
  .stmt h2 { font-size: clamp(22px, 6.2vh, 30px); margin-bottom: 0; }
  .stmt ul { display: none; }
  .seg { --sh: 30px; --segf: 12px; }
  .ch-get { display: none; }
  .rail { bottom: 8px; gap: 12px; padding: 4px 10px; }
  .rail button { font-size: 10.5px; }
  .hero-words { top: 52px; }
  .hero-lockup { display: none; }
  .hero-h1 { font-size: clamp(24px, 7vh, 34px); margin-top: 0; }
  .hero-side { top: 58%; gap: 8px; }
  .hero-for, .hero-side .soon { display: none; }
  .hero-sub { font-size: 13px; }
  .close-top { margin-top: 56px; gap: 8px; }
  .close h2 { font-size: clamp(24px, 7vh, 34px); }
  .close-sub { display: none; }
  .foot { padding: 8px 0 10px; font-size: 11px; }
}