/* Mobile layer — pages. Loaded AFTER site.css so these rules override the desktop
   design. Everything here lives behind a mobile media query; desktop is never
   affected. Use design tokens only (no hardcoded values). Owned by one zone so
   parallel work never collides: do not put pages rules in any other mobile file. */

/* Scope: the secondary marketing pages (pricing, our model, about, contact).
   Horizontal gutters are left alone on purpose (the container owns them), so these
   pages stay aligned with the header, the footer, and each other. What changes
   here is vertical rhythm, type scale, grid collapse, and tap targets.
   Tap targets: 44px is the minimum comfortable touch size, so every control gets
   an explicit min-height plus border-box sizing (padding never shrinks the box). */

@media (max-width: 768px) {
  /* ----- Shared: section rhythm --------------------------------------------
     96px of section padding is a desktop measure. On a phone it reads as dead
     space, so both .section pages drop to 48px. Scoped to these two pages, so the
     home page and the app chrome keep their own rules. */
  .section.pricing,
  .section.contact { padding-block: var(--space-12); }

  /* ==========================================================================
     Pricing
     ========================================================================== */
  .pricing__title { font-size: var(--text-4xl); }
  .pricing__lead { margin-top: var(--space-4); font-size: var(--text-base); }

  /* One column, tight and even: the four tiers now read as a vertical list. */
  .pricing__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-10);
  }
  .pricing-card { padding: var(--space-5); }

  /* "Best value" is absolutely positioned and half-hangs off the card's top edge
     on desktop. In a stacked column that badge either clips or crowds the card
     above it, so on mobile it joins the flow as the card's first line: a pill
     above the tier name, never overlapping anything. */
  .pricing-card__badge {
    position: static;
    transform: none;
    align-self: flex-start;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin: 0 0 var(--space-3);
    border-radius: var(--radius-pill);
  }

  .pricing-card__name { font-size: var(--text-base); }

  /* Price row: the struck-through anchor ($2,400+ / $360) and the amount sit on
     one baseline and wrap as a unit when they run out of room, so the period
     ("one time", "a year") drops to its own line instead of squeezing the amount.
     Nothing overflows the card. */
  .pricing-card__price {
    margin-top: var(--space-3);
    gap: var(--space-1) var(--space-2);
  }
  .pricing-card__was {
    margin-right: 0;
    font-size: var(--text-sm);
  }
  .pricing-card__amount {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
  }

  .pricing-card__cap { margin-top: var(--space-3); font-size: var(--text-sm); }
  .pricing-card__blurb { margin: var(--space-3) 0 var(--space-5); }

  /* Every CTA state (the live button, "your current plan", and the muted
     "included" pill) resolves to the same full-width, 44px-tall pill, so the
     column keeps one silhouette whatever plan the reader is on. */
  .pricing-card__cta,
  .pricing-card__cta--current,
  .pricing-card__cta--included {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-radius: var(--radius-pill);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* The two dashed, non-actionable states keep their muted weight but pick up the
     button's size, so they read as a state rather than a shrunken button. */
  .pricing-card__cta--current,
  .pricing-card__cta--included { font-weight: var(--weight-medium); }

  /* The 300-image note under the grid, plus its "Get in touch" text button. */
  .pricing .plan-includes__note {
    margin-top: var(--space-8);
    justify-content: center;
    text-align: center;
    line-height: var(--leading-normal);
  }
  .pricing .plan-includes__contact {
    box-sizing: border-box;
    min-height: 44px;
    padding: var(--space-2);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ==========================================================================
     Our model
     ========================================================================== */
  .model-head__inner { padding-block: var(--space-10) var(--space-8); }
  .model-head h1 { font-size: var(--text-4xl); }
  .model-head .lead {
    max-width: none;
    margin-top: var(--space-3);
    font-size: var(--text-base);
  }
  /* The five-item mono metadata row wraps into a ragged stack as a flex row. Two
     even columns keep the pairs aligned and legible. */
  .model-page .meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-6);
    font-size: var(--text-xs);
  }

  .doc { padding-block: var(--space-8) var(--space-10); }

  /* On this page: the desktop sticky rail is hidden below 880px. Bring it back as
     a wrapped row of chips at the top of the article, where a phone reader can
     actually use it. Same-row pills share a min-height, a size, and a weight, so
     they line up whatever the label length. */
  .model-page .toc {
    display: flex;
    position: static;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-divider);
    line-height: var(--leading-normal);
  }
  .model-page .toc .toc__label {
    width: 100%;
    margin: 0 0 var(--space-1);
    padding-bottom: 0;
    border-bottom: 0;
    line-height: var(--leading-normal);
  }
  .model-page .toc a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }
  .model-page .toc a.active {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  /* A tapped chip must land its section below the sticky header, not under it. */
  .model-page [id] { scroll-margin-top: var(--space-16); }

  .doc section { padding: var(--space-10) 0; }
  .model-page .eyebrow { margin-bottom: var(--space-2); }
  .doc h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
  .doc p { font-size: var(--text-base); max-width: none; }
  .doc .caps-note { max-width: none; }

  /* The mono pipeline diagram is one long fixed line: it cannot wrap without
     losing its meaning, so it stays a scrollable strip, chromeless (no visible
     scrollbar) and set at the smallest mono step. */
  .doc .pipe {
    padding: var(--space-4);
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .doc .pipe::-webkit-scrollbar { width: 0; height: 0; }

  /* Capabilities: the 220px term column is already collapsed below 880px, so this
     tightens the rows and gives the term real presence, and each pair reads as a
     labelled block rather than a squashed table row. */
  .doc .caps > div { padding: var(--space-4) 0; gap: var(--space-1); }
  .doc .caps dt { font-size: var(--text-base); }
  .doc .caps dd { font-size: var(--text-base); line-height: var(--leading-normal); }

  .doc .compound { max-width: none; }
  .doc .compound li { padding: var(--space-4) 0; }
  .doc .limits { max-width: none; }
  .doc .limits li { padding: var(--space-4) 0; }

  /* Specs table: on desktop this is a two-column grid (a 180px mono term column
     against the definition). At 390px that column eats half the width and every
     value wraps to three lines. Restructure it into stacked label-over-value rows
     with one hairline per row: the mono term becomes a small caption, the value
     sits full width under it, and the row's border-top does the separating. It is
     the same stacked-row pattern the page already uses for capabilities and
     limitations, so the whole article reads as one system. */
  .doc .spec {
    display: block;
    margin-top: var(--space-5);
  }
  .doc .spec dt {
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--color-divider);
    font-size: var(--text-xs);
  }
  .doc .spec dd {
    padding: var(--space-1) 0 var(--space-4);
    border-top: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  .doc .log { padding-left: var(--space-5); }
  .doc .log-entry p:last-child { max-width: none; }

  /* Closing CTA: the pair stacks and the primary goes full width. */
  .doc .model-close__links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }
  .model-close__links .btn-primary {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding-block: var(--space-3);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .model-close__req {
    box-sizing: border-box;
    min-height: 44px;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
  }

  /* ==========================================================================
     About: pure prose, so this is measure, scale, and rhythm only.
     ========================================================================== */
  .about { padding-block: var(--space-12); }
  .about__title { font-size: var(--text-4xl); }
  .about__p {
    max-width: none;
    margin-top: var(--space-5);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  /* ==========================================================================
     Contact
     ========================================================================== */
  .contact__grid { gap: var(--space-8); }
  .contact__title { font-size: var(--text-4xl); }
  .contact__lead {
    max-width: none;
    margin-top: var(--space-4);
    font-size: var(--text-base);
  }
  .contact__detail { margin-top: var(--space-6); }
  /* A long address must never push the page sideways. */
  .contact__email {
    font-size: var(--text-base);
    overflow-wrap: anywhere;
  }
  .contact__reply { margin-top: var(--space-4); }

  /* The form is the page on a phone: full width, generous fields, one column. */
  .contact__form {
    max-width: none;
    margin-top: var(--space-2);
    gap: var(--space-4);
  }
  /* font-size is 16px (--text-base) on every control: anything smaller makes iOS
     Safari zoom the page on focus. min-height keeps each field a comfortable tap
     target, and border-box means the padding never shrinks it. Focus stays on the
     single recolored border from site.css, so there is never a second ring. */
  .contact__form .field input,
  .contact__form .field select,
  .contact__form .field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
  }
  .contact__form .field textarea {
    min-height: 140px;
    line-height: var(--leading-normal);
  }
  /* The reason select keeps its custom chevron (the native arrow is suppressed in
     site.css); reserve its room so a long option label never runs under it. */
  .contact__form .field select {
    padding-right: calc(var(--space-4) + 1.15em + var(--space-2));
    background-position: right var(--space-4) center;
  }
  .contact__submit {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin-top: var(--space-1);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .contact__form .form__status { line-height: var(--leading-normal); }

  /* ----- our-model: kill the TOC, and stop the page overflowing ---------- */
  /* The "on this page" chip rail costs a screenful and just repeats the section
     headings directly below it. Drop it on phones. */
  .model-page .toc { display: none; }

  /* THE overflow bug: the page scrolled sideways by 188px. .doc-body is a grid
     child, and a grid/flex child defaults to min-width:auto (= min-content). The
     wide <pre class="pipe"> ASCII diagram therefore set a ~554px min-content floor
     that the column could not shrink below, dragging EVERY sibling (headings,
     prose, the TOC) out past the screen edge. min-width:0 lets the column shrink
     to the viewport; the <pre> alone then scrolls inside itself, chromeless.
     Text now wraps and the page grows downward instead of sideways. */
  .doc,
  .doc-body { min-width: 0; }
  .doc-body,
  .doc-body > *,
  .doc section,
  .doc section > * { max-width: 100%; min-width: 0; }
  .doc .pipe { max-width: 100%; }
  /* Long unbroken tokens (urls, model ids) must not re-open the overflow. */
  .doc p,
  .doc li,
  .doc dd,
  .doc dt { overflow-wrap: anywhere; }
}

/* ----- Narrow phones (480px and below) ------------------------------------
   Only where the 768px sizing still crowds: the pricing cards and the mono blocks. */
@media (max-width: 480px) {
  .pricing__grid { gap: var(--space-3); }
  .pricing-card { padding: var(--space-4); }
  .pricing-card__blurb { margin-bottom: var(--space-4); }

  .model-page .meta { gap: var(--space-3) var(--space-4); }
  .model-page .toc a { padding-inline: var(--space-3); }
  .doc h2 { font-size: var(--text-xl); }
  .doc .log { padding-left: var(--space-4); }
}