/* Mobile layer — home. 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 home rules in any other mobile file. */

/* ========================================================================
   PHONE / SMALL TABLET (<= 768px)
   The home page is rebuilt here, not merely reflowed:
   - the hero's live desktop-app demo is replaced by a static before/after still
     (the iframe is never even fetched — see AppCutout),
   - the toolset bento becomes one swipeable card rail (the desktop anchor's
     decorative style-name hill is dropped, nothing replaces it),
   - the "what we provide" scroll-expand panel collapses to its plain card,
   - every home section drops from 96px of vertical padding to 48px.
   ==================================================================== */
@media (max-width: 768px) {
  /* ----- Section rhythm ------------------------------------------------
     96px of section padding costs a third of a phone screen per seam. Halve it,
     for the home sections only (other pages own their own mobile layer). */
  .hero { padding-top: var(--space-8); padding-bottom: var(--space-10); }
  .compare,
  .toolset,
  .calc,
  .faq { padding-block: var(--space-12); }
  .provide { padding-block: var(--space-12); }
  .section.section--flush { padding-top: 0; padding-bottom: var(--space-12); margin-top: calc(-1 * var(--space-6)); }
  .cta { padding-top: var(--space-10); padding-bottom: var(--space-16); }

  /* ----- Hero ----------------------------------------------------------
     The display type is sized for a 1440px canvas; at 390px it eats the fold.
     Step it down one rung and pull the lead + demo up under it. */
  .hero__title { font-size: var(--text-5xl); max-width: none; }
  .hero__sub { margin-top: var(--space-5); gap: var(--space-4); }
  .hero__sub .lead { font-size: var(--text-base); }

  /* ----- Hero demo -> static before/after still ------------------------
     The embedded app is a desktop UI (sidebar, project rail, versions panel);
     at phone width it is illegible, so the frame is dropped entirely and a
     still carries the "see it work" proof. AppCutout withholds the iframe's src
     below this breakpoint, so hiding the frame costs nothing to load. */
  .app-cutout-wrap { margin-top: var(--space-8); }
  .app-cutout,
  .app-cutout__trace { display: none; }

  /* Beats the [hidden] attribute the markup ships with, so the still needs no
     desktop rule at all to stay out of the way there. */
  .app-still[hidden] { display: grid; }
  .app-still { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .app-still__pane {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-sunken);
    box-shadow: var(--shadow-sm);
  }
  .app-still__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  /* The compare carousel's label language: a light chip on the before, an
     inverted chip on the after. Matched height, size and weight so the pair
     reads as one set. */
  .app-still__label {
    position: absolute;
    left: var(--space-2);
    bottom: var(--space-2);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--space-6);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
  }
  .app-still__label--after { background: var(--color-text-primary); color: var(--color-text-inverse); }

  /* ----- Compare carousel ---------------------------------------------
     One full-width slide, no peeks. The wipe drag stays on .ba, whose
     touch-action: pan-y still lets a vertical swipe scroll the page. */
  .compare__head { margin-bottom: var(--space-5); gap: var(--space-3); }
  .compare__title { font-size: var(--text-3xl); }
  .compare__note { position: static; transform: none; max-width: none; font-size: var(--text-sm); }
  .compare__viewport { -webkit-mask-image: none; mask-image: none; }
  .compare__slide { flex-basis: 100%; }
  .compare__foot { margin-top: var(--space-4); gap: var(--space-3); }
  .compare__controls { width: 100%; justify-content: space-between; gap: var(--space-4); }
  /* An 8px dot is not a touch target, but padding + background-clip is the WRONG
     way to grow it: border-radius resolves against the PADDED box, so clipping the
     background to the content box squares off the corners and balloons the active
     dot into a blob. Leave the painted dot exactly as designed and extend only the
     HIT AREA with an invisible ::after. Gap is widened so the hit areas tile
     (8px dot + 24px gap = 32px pitch) instead of overlapping onto each other. */
  .compare__dots { gap: var(--space-6); }
  .compare__dot { position: relative; }
  .compare__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-8);
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* The arrows are already 44px; size the wipe handle to match. */
  .ba__handle { width: 44px; height: 44px; }
  .compare__arrow,
  .compare__dot,
  .ba__handle { -webkit-user-select: none; user-select: none; }

  /* ----- Toolset -------------------------------------------------------
     The worst offender by far: five stacked cards (each with a 3:2 image) and
     a free-tools band ran ~3,600px. It becomes ONE horizontally swipeable rail
     of those same five cards, reachable sideways instead of downward.
     Scrollbars stay hidden. */
  .toolset__title { font-size: var(--text-3xl); }
  .toolset__intro { font-size: var(--text-base); max-width: none; margin: var(--space-3) 0 var(--space-6); }

  .toolset__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Centre-snapped rail. It goes FULL-BLEED (out of the container gutters) for
       two reasons: the first card can otherwise never reach the centre (there is
       no scroll room to its left), and a % card width would fight the % padding
       (both resolve against different boxes). In viewport units the maths is
       exact: 12 + 76 + 12 = 100vw, so a snapped card sits dead centre with its
       neighbours peeking in equally from both screen edges. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 12vw;
    grid-auto-columns: 76vw;
    grid-auto-rows: auto;
    gap: var(--space-3);
    overflow-x: auto;
    /* Horizontal ONLY. Without this, setting overflow-x:auto makes the other axis
       compute to auto too, so the rail could also scroll vertically inside itself.
       A vertical swipe still scrolls the PAGE (the gesture bubbles up). */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .toolset__grid::-webkit-scrollbar { width: 0; height: 0; }

  .toolset__cell,
  .toolset__cell--anchor { grid-column: auto; grid-row: auto; padding: var(--space-4); scroll-snap-align: center; }
  /* One image ratio across the rail, so every card in the row reads as a peer. */
  .toolset__media,
  .toolset__cell--anchor .toolset__media { aspect-ratio: 16 / 10; margin-bottom: var(--space-3); }
  .toolset__name,
  .toolset__cell--anchor .toolset__name { font-size: var(--text-base); margin-bottom: var(--space-1); }
  .toolset__desc { font-size: var(--text-sm); }

  /* The anchor's style-name hill is a desktop indulgence: rail cards are small,
     so on phones it goes away and nothing stands in for it. */
  .toolset__cell--anchor .toolset__hill { display: none; }

  .toolset__free { padding: var(--space-4); }
  .toolset__free-title { font-size: var(--text-base); }
  .toolset__free-desc { font-size: var(--text-sm); }

  /* ----- Every plan includes (word wheel) ------------------------------
     The rotating word is an inline-block whose width JS measures and whose
     overflow is clipped, so the headline has to be small enough that the longest
     word ("interior touch-up") still fits on one line inside the container —
     otherwise it would be cut off mid-word. --text-3xl is the safe rung at
     390px. The four cards go two-up, so they cost two rows instead of four. */
  .plan-includes { margin-top: var(--space-10); padding-top: var(--space-10); }
  .plan-includes__title { font-size: var(--text-3xl); white-space: normal; }
  .plan-includes__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
  .plan-card__stage { height: var(--space-24); }
  .plan-card__body { padding: var(--space-4); }
  .plan-card__title { font-size: var(--text-base); line-height: var(--leading-snug); }
  .plan-card__desc { font-size: var(--text-xs); margin-top: var(--space-1); }

  /* ----- What we provide ----------------------------------------------
     provide.js already refuses the scroll-expand below 721px, but a 768px-wide
     landscape phone can still arm it. Force the plain card either way, and trim
     its very generous inner padding. */
  .provide,
  .provide.is-scroll { height: auto; padding-block: var(--space-12); }
  .provide.is-scroll .provide__stage { position: static; height: auto; display: block; overflow: visible; }
  .provide.is-scroll .provide__box {
    display: block;
    width: calc(100% - var(--space-6) * 2);
    max-width: none;
    min-height: 0;
    margin-inline: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    clip-path: none;
  }
  .provide__inner { padding: var(--space-8) var(--space-6); }
  .provide__title { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
  .provide__body p { font-size: var(--text-base); margin-top: var(--space-4); }

  /* ----- Calculator ----------------------------------------------------
     Single column, every control sized for a thumb: the segmented pairs go
     full-width, the number fields go full-width (their 180px flex basis used to
     squeeze two per row), and the result panel loses its oversized figure. */
  .calc__head { margin-bottom: var(--space-6); }
  .calc__title { font-size: var(--text-3xl); }
  .calc__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "inputs" "result" "note" "cta";
    gap: var(--space-6);
  }
  .calc__group { margin-bottom: var(--space-6); }
  .calc .seg { display: flex; width: 100%; }
  .calc .seg__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    -webkit-user-select: none;
    user-select: none;
  }
  .calc__fields { gap: var(--space-3); }
  .calc__fields .field { flex: 1 1 100%; min-width: 0; }
  .calc__fields .field input { width: 100%; min-width: 0; min-height: 44px; }
  .calc__services { gap: var(--space-2); }
  .calc .chip {
    box-sizing: border-box;
    min-height: var(--space-10);
    -webkit-user-select: none;
    user-select: none;
  }
  .calc__result { padding: var(--space-5); gap: var(--space-4); }
  .calc__big { font-size: var(--text-4xl); }
  .calc__ours-price,
  .calc__save-amt { font-size: var(--text-xl); }
  .calc__breakeven { font-size: var(--text-sm); padding-top: var(--space-4); }
  .calc__data-link { justify-self: start; }

  /* ----- FAQ -----------------------------------------------------------
     Stacked, with a 44px trigger row. */
  .faq__grid { gap: var(--space-6); }
  .faq__title { font-size: var(--text-3xl); }
  .faq__sub { font-size: var(--text-sm); max-width: none; margin-top: var(--space-2); }
  .faq__list { margin-top: 0; }
  .faq__expand { position: static; transform: none; display: block; width: fit-content; margin: 0 0 var(--space-3) auto; }
  .faq__trigger { min-height: 44px; padding-block: var(--space-4); gap: var(--space-4); }
  .faq__q-text { font-size: var(--text-base); }
  .faq__answer-inner p { font-size: var(--text-sm); padding-bottom: var(--space-4); }

  /* ----- Closing CTA ---------------------------------------------------
     150px of tail padding is a whole thumb-scroll of nothing. */
  .cta__inner { gap: var(--space-5); }
  .cta__title { font-size: var(--text-4xl); }

  /* ----- Alignment + divider tweaks ------------------------------------ */
  /* .hero__sub is a space-between flex row on desktop, so the philosophy link
     sits right. On a phone it WRAPS to its own line and falls back to the start
     edge; margin-left:auto pushes it back to the right. Same story for the
     calculator's data link, whose grid `justify-self:end` is lost once the grid
     collapses to one column. */
  .hero__feature { margin-left: auto; }
  .calc__data-link { justify-self: end; margin-left: auto; }
  /* Drop the hairline above the FAQ list (it reads as a stray rule under the
     subheading on a phone). Spacing is untouched: the margin-top stays, only the
     border is removed. The per-item separators still come from .faq__item. */
  .faq__list { border-top: 0; }

  /* ----- Plan-includes: privacy glyph ----------------------------------- */
  /* The lock's outermost breathing ring expands past the card at phone width and
     gets clipped by its edge. Scale the whole glyph group (rings + lock together,
     so the animation stays coherent) so the fully-expanded ring still fits. */
  .pi-viz--privacy { transform: scale(0.78); }
}

/* ========================================================================
   NARROW PHONES (<= 480px)
   ==================================================================== */
@media (max-width: 480px) {
  /* Wider cards, so a card is comfortable to read while the next one still
     peeks in far enough to say "there is more sideways". */
  .toolset__grid { grid-auto-columns: 80vw; padding-inline: 10vw; }
  /* Five dots and two arrows on one line: tighten the gap (and the hit area with
     it) so the row still fits, without touching the painted dot. */
  .compare__dots { gap: var(--space-5); }
  .compare__dot::after { width: var(--space-6); }
}