/* desktop.css — Option B: responsive widening for laptop/desktop screens.
   ADDITIVE ONLY: every rule lives inside a min-width:960px media query, so
   rendering below 960px (phones, portrait tablets) is byte-for-byte unchanged.
   Selectors are prefixed with `html` so they outrank the pages' inline <style>
   blocks (which load after this file) without touching them.
   To reverse: remove the <link rel="stylesheet" href="desktop.css" /> lines
   from the pages (or delete this file) and redeploy. See DESIGN.md.
   Not linked on login.html (a fixed-width poster, intentional) or index.html. */

@media (min-width: 960px) {
  /* ── shell: one wider, comfortable column ── */
  html .phone { max-width: 700px; margin: 32px auto; min-height: calc(100vh - 64px); }
  html .top { padding: 16px 28px 14px; }
  html .menu { right: 26px; }
  html .body { padding: 24px 28px 56px; scrollbar-width: none; }
  html .body::-webkit-scrollbar { width: 0; height: 0; }
  html .actionbar { padding: 16px 28px 22px; }
  html h1.page { font-size: 32px; }
  html .sheet { width: min(540px, 92vw); }

  /* hero block re-anchored to the wider gutters (Calm Courier: greige, not full-bleed yellow) */
  html .hero { margin: -24px -28px 0; padding-left: 32px; padding-right: 32px; }
  html .count-hero { margin: -6px 0 0; }

  /* ── home — two-tone light greeting scales up as one display block ── */
  html .hero h2 { font-size: 38px; max-width: 480px; }
  html .hero .greet { font-size: 38px; }
  html #inflight { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  html #inflight .flight { margin-bottom: 0; }

  /* ── order flow ── */
  html .steps { padding: 14px 28px 0; }
  html .count-hero .n { font-size: 68px; }
  html #audience-map { height: 300px; }
  html .lsheet { padding: 28px 30px 20px; font-size: 14.5px; }
  html .a4page { --pw: min(80vw, 520px); }

  /* ── history: four stats in one row ── */
  html .hstat { flex: 1 1 22%; }

  /* ── why-our-data ── */
  html .hero h1 { font-size: 38px; max-width: 500px; }
}