/* Every breakpoint, in one place, loaded last.
 *
 * A media query wins by coming later in the cascade, not by specificity — so the
 * overrides live here rather than beside the rules they override.
 */

@media (max-width: 880px) { .rail { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
  @media (min-width: 760px) { #hero-head { min-height: 2.15em; } #hero-sub { min-height: 3.1em; } }
  @media (prefers-reduced-motion: reduce) { .hero h1 span, #hero-sub { transition: none; } }
  @media (max-width: 820px) { .foot-top { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
  @media (max-width: 520px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 880px) { .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 460px) { .proofs { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 880px) { .clip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .clip-row > :nth-child(n+4) { display: none; } }
  @media (max-width: 520px) { .clip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clip-row > :nth-child(n+3) { display: none; } }
  @media (max-width: 880px) { .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 880px) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 480px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 880px) { .win-panes { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 880px) { .flow { grid-template-columns: minmax(0, 1fr); } .flow-arrow { justify-self: start; transform: rotate(90deg); } }
  @media (max-width: 900px) { .maker { grid-template-columns: minmax(0, 1fr); } .maker .flow-arrow { transform: rotate(90deg); justify-self: start; } }
  @media (max-width: 760px) { .task { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 880px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .who { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 700px) { .thumbs { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 520px) { .phone { width: 100%; max-width: 230px; } }
  @media (max-width: 880px) { .path { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 880px) { .addons { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) {
    .playhead { animation: none; }
    .seg, .frame-art { transition: none; }
  }
  /* on a phone the section anchors cost three rows of chrome before the page starts; the sections
     are a scroll away regardless, so the small screen keeps only the pages and the call to action */
  @media (max-width: 760px) {
    .masthead { gap: 10px; padding-block: 14px; }
    .nav { gap: 14px; font-size: 14px; width: 100%; }
    .nav-extra { display: none; }
    .nav .btn-primary { margin-left: auto; padding: 9px 14px; font-size: 14px; }
  }
  @media (max-width: 880px) { .jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 460px) { .jump { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 880px) { .sol { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
  @media (max-width: 760px) {
    .masthead { gap: 10px; padding-block: 13px; flex-wrap: nowrap; }
    .nav-toggle { display: flex; margin-left: auto; position: relative; z-index: 80; }  /* stays above the drawer, so it closes it */
    .nav {
      position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(310px, 86vw); z-index: 70;
      background: var(--raised); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0,0,0,.35);
      display: grid; grid-auto-rows: max-content; align-content: start; gap: 0;
      padding: 72px 20px 26px; overflow-y: auto; font-size: 16px;
      /* Closed, the panel stays inside the viewport and is clipped away instead of being pushed
         out of it. A translated element still occupies layout, which made the document 310px
         wider than the screen and let the page drag sideways on a phone. */
      clip-path: inset(0 0 0 100%);
      transition: clip-path .26s ease, visibility .26s;
      visibility: hidden;
    }
    .nav.open { clip-path: inset(0); visibility: visible; }
    .nav > a, .nav .menu-btn { padding: 12px 2px; border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; justify-content: flex-start; display: block; }
    .nav .menu-wrap { display: block; width: 100%; }
    .nav .menu-btn i, .nav .menu-btn svg { display: none; }
    .nav-extra { display: block; }          /* the drawer has room for the section links again */
    .nav-sep { display: none; }
    .menu-panel { display: none !important; }  /* no mega-menu in a drawer: the trigger goes to the page */
    .nav .btn-primary { margin-top: 16px; justify-content: center; border-bottom: 0; }
  }
  @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .nav { transition: none; } }
  /* Older engines without clip-path animation still get the slide, and the root clip below keeps
     that from widening the page. */
  @supports not (clip-path: inset(0 0 0 100%)) {
    @media (max-width: 760px) {
      .nav { transform: translateX(100%); transition: transform .26s ease; }
      .nav.open { transform: none; }
    }
  }
  @media (max-width: 880px) {
    /* a 9:16 preview at full phone width is taller than the screen */
    .pane .frame { max-width: 186px; margin-inline: auto; width: 100%; }
  }
  @media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 880px) { .paddons { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
  @media (max-width: 720px) { .plat-row { justify-content: flex-start; gap: 7px; } .plat-frame { width: 104px; height: 174px; } }
  @media (max-width: 480px) { .plat-frame { width: 92px; height: 154px; } }
  @media (prefers-reduced-motion: reduce) { .plat-badge { transition: none; } }
  @media (prefers-reduced-motion: reduce) { .demo.running .demo-scan { animation: none; opacity: 0; } }
  @media (max-width: 820px) { .demo-out { grid-template-columns: minmax(0, 1fr); max-width: 420px; } }
  @media (prefers-reduced-motion: reduce) { .demo-out figure { animation: none; opacity: 1; transform: none; } }
  @media (max-width: 560px) { .pick-list li { padding: 12px 10px; } }
  @media (prefers-reduced-motion: reduce) { .pick-caret { transition: none; } }
  @media (max-width: 760px) { html { scroll-padding-top: 130px; } [id] { scroll-margin-top: 130px; } }
  @media (max-width: 900px) { .menu-panel.open { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .menu-panel.open { grid-template-columns: minmax(0, 1fr); max-height: 72vh; overflow-y: auto; } }
  @media (max-width: 900px) { .menu-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 14px; } }
  @media (max-width: 760px) { .paylanes { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 520px) { .volume .btn { width: 100%; justify-content: center; } }
  @media (max-width: 880px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }