/* SPDX-FileCopyrightText: 2026 Projex Labs <opensource@projexlabs.com>
   SPDX-License-Identifier: LicenseRef-PolyForm-Perimeter-1.0.0

   Phones and tablets (#4511). The design is served as built; this sheet
   tailors it for small screens and touch, and only there. Every rule sits
   inside the one query below, so a desktop with a mouse never matches it
   and renders exactly what the design draws (test/mobile.test.ts holds
   that line). Colours, type and spacing come from the design's own tokens. */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  /* ---- Touch: a tap is not a hover ----------------------------------------- */
  @media (hover: none) {
    .btn:hover,
    .store:hover,
    .fwd:hover,
    .signin:hover,
    .three .item.glass:hover,
    .card:hover,
    .fig:hover,
    .spec:hover,
    .go3 li:hover,
    .way:hover,
    .tcard:hover {
      transform: none;
    }
    .tcard.on {
      transform: none;
    }
    .glass:hover::before {
      opacity: 0;
    }
    /* Snapping a full screen at a time fights a finger's fling */
    html {
      scroll-snap-type: y proximity;
    }
    .page {
      scroll-snap-stop: normal;
    }
  }

  /* ---- Tap targets: 44px or more ------------------------------------------- */
  .seg a {
    min-height: 44px;
  }
  .bill button,
  .pickplan button {
    min-height: 44px;
  }
  .step button {
    width: 44px;
    height: 44px;
  }
  .lockup > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .tick::before {
    inset: -10px -19px;
  }
  .dots {
    gap: 0;
  }
  .dots a {
    width: 44px;
    height: 44px;
  }

  /* ---- Type that a phone can read ------------------------------------------ */
  .store small,
  .ptag,
  .phow b,
  .mini.ask {
    font-size: 12px;
  }
  .proof .tag {
    font-size: 12px;
  }
  .flow .who {
    font-size: 12px;
  }
  .tool {
    font-size: 12px;
  }

  /* ---- The header leaves while you read, and comes back when you scroll up -- */
  .top {
    transition:
      transform 0.35s var(--ease),
      background 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }
  .top.m-away {
    transform: translateY(-100%);
  }
  .top.m-away .seg,
  .top.m-away .btn {
    pointer-events: none;
  }

  /* ---- Screens that are not snapped flow at their own height ---------------- */
  /* mock.js snaps and scales a screen only at 900px wide and 560px tall or more */
  @media (max-width: 899.98px), (max-height: 559.98px) {
    .page {
      min-height: 0;
      justify-content: flex-start;
      padding: clamp(56px, 9vw, 88px) 0 clamp(56px, 9vw, 80px);
      scroll-margin-top: calc(var(--header) - 8px);
    }
    .page.hero {
      min-height: 100svh;
      justify-content: center;
      padding-top: calc(var(--header) + 16px);
      padding-bottom: 40px;
    }
    .page.photo.everything,
    .page.photo.closing {
      min-height: 92svh;
    }
    .page.last {
      padding-bottom: 0;
    }
    .page.last .fit {
      padding-bottom: 40px;
    }
    .fwd {
      margin-top: 32px;
    }
    .head {
      margin-bottom: 28px;
    }
    .relay {
      margin: 28px 0 40px;
    }
    .reveal {
      --i: 0;
    }

    /* Who runs on it: no leaning toward a pointer a phone does not have */
    .pin {
      transform: none;
      will-change: auto;
    }

    /* The outcome chain: two by two, every name whole */
    .chain {
      justify-content: space-between;
      row-gap: 18px;
    }
    .node {
      flex: 0 0 calc(50% - 6px);
    }
    .node b {
      white-space: normal;
    }

    /* Draw your line: whole tool names, two to a row, and a tap picks the line */
    .fence-track {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 8px;
      cursor: pointer;
      touch-action: pan-y;
    }
    .tool {
      margin: 0 4px;
      padding: 11px 8px;
      font-size: 13px;
      white-space: normal;
      overflow-wrap: anywhere;
      min-height: 44px;
      display: grid;
      place-items: center;
    }
    .fence-top {
      flex-wrap: wrap;
    }

    /* Under the hood: one fact to a row on a phone */
    .specs {
      grid-template-columns: minmax(0, 1fr);
    }
    .spec dd small {
      font-size: 14px;
    }

    /* Go beyond: the rising star keeps clear of the words above it */
    .page.finale .fit {
      gap: 24px;
    }
    .hz {
      margin-top: 64px;
    }
    .hz .star {
      width: 58px;
      right: 10%;
    }

    /* Pricing: the live-connector picture reads on one line, its note below */
    .flow .row {
      grid-template-columns: 4.6em auto minmax(28px, 1fr) auto;
      row-gap: 4px;
    }
    .flow .note {
      grid-column: 2 / -1;
    }
    .cshead {
      padding: 2px 2px 0;
    }
    .pickplan {
      align-self: stretch;
    }
    .pickplan button {
      flex: 1 1 auto;
    }
    .ent {
      flex-direction: column;
      align-items: flex-start;
    }

    /* Footer: the links wrap under the lockup instead of crowding it */
    .foot .wrap {
      gap: 4px 22px;
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .lockup {
      flex-wrap: wrap;
      width: 100%;
    }
  }

  /* ---- Tablets held upright: use the width ---------------------------------- */
  @media (min-width: 600px) and (max-width: 899.98px) {
    .node {
      flex: 1 1 0;
    }
    .fence-track {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .specs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tri-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tcard {
      flex-direction: column;
      align-items: flex-start;
    }
    .gains {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ---- Phones ---------------------------------------------------------------- */
  @media (max-width: 599.98px) {
    h1.display {
      font-size: clamp(46px, 13.4vw, 60px);
    }
    .hero .lede {
      font-size: 17px;
    }
    .stores {
      gap: 10px;
    }
    .store {
      min-height: 56px;
    }
    .everything h2.display {
      font-size: clamp(38px, 11vw, 50px);
    }
    .pricing h1.display,
    .pricing h2.display {
      font-size: clamp(36px, 10.4vw, 46px);
    }
    .reel {
      padding: 18px 16px;
    }
    .rn {
      font-size: clamp(64px, 20vw, 88px);
    }
    .fig .big {
      font-size: clamp(52px, 16vw, 72px);
    }
    .core {
      padding: 16px 16px 8px;
    }
    /* The feature ticks become a row under the card, each one a finger wide */
    .ticks {
      position: static;
      translate: none;
      flex-direction: row;
      justify-content: center;
      gap: 0;
      margin-top: 4px;
    }
    .tick {
      width: 6px;
      height: 6px;
      margin: 19px 12px;
    }
    .tick.cur {
      width: 24px;
      height: 6px;
    }
    .tick::before {
      inset: -19px -12px;
    }
    .feat .say h3 {
      font-size: 27px;
    }
    .feat .say p {
      font-size: 15.5px;
    }
    .tcard {
      padding: 14px;
      gap: 14px;
    }
    .viz {
      flex-basis: 72px;
      height: 72px;
      border-radius: 18px;
    }
    .way .art {
      height: 96px;
    }
    .plan,
    .addon,
    .total {
      padding: 18px 16px;
    }
    .whatlive {
      padding: 14px;
    }
    .rail .pill {
      padding: 7px 16px 7px 7px;
    }
  }

  /* ---- Docs: the table of contents folds into one bar above the text -------- */
  @media (max-width: 900px) {
    .dgrid .toc {
      display: flex;
      position: sticky;
      top: 64px;
      z-index: 9;
      max-height: none;
      overflow: visible;
      margin: 0 -24px 18px;
      padding: 0 24px;
      background: var(--ink);
      border-bottom: 1px solid var(--line);
    }
    .dgrid .toc p {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
      margin: 0;
      cursor: pointer;
    }
    .dgrid .toc p::after {
      content: '';
      width: 9px;
      height: 9px;
      margin-right: 4px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-3px);
      transition: transform 0.3s ease;
    }
    .dgrid .toc.m-open p::after {
      transform: rotate(-135deg) translateY(-3px);
    }
    .dgrid .toc a {
      display: none;
    }
    .dgrid .toc.m-open {
      max-height: 70vh;
      overflow: auto;
      padding-bottom: 12px;
    }
    .dgrid .toc.m-open a {
      display: flex;
      align-items: center;
      min-height: 44px;
    }
    html:has(.dgrid) {
      scroll-padding-top: 124px;
    }
    .doc code {
      overflow-wrap: anywhere;
    }
    .doc pre code {
      overflow-wrap: normal;
    }
    .dlinks a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 6px;
    }
    .dtop .brand {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
  }
}