/* Phone layout (max 479px, Webflow's phone breakpoint).
   Keeps every component of Elias's design; only positions and sizes change,
   for readability on a 390 px screen. Loaded after webflow.css. Desktop and
   tablet are untouched. */
@media screen and (max-width: 479px) {

  /* ---- Denser type on phone (Antoine, 2026-10-13): more content per
     screen, everywhere but the hero. Sizes follow platform guidance: body
     14 px (Material 3 minimum for body text; this monospace face reads
     larger than its size), secondary 13 px, nothing under 11 px (Apple),
     form fields 16 px (below that iOS zooms in on focus). ---- */
  body { font-size: 0.875rem; line-height: 1.45; }
  p { line-height: 1.45; }

  /* Section titles 32 -> 26 px; step / feature titles 32 -> 20 px so they
     read as sub-titles under them. */
  h2,
  .form_heading,
  .faq_heading,
  .footer_title { font-size: 1.625rem; line-height: 0.95; }
  .offbit_span, .offbit_span-2 { font-size: inherit; line-height: inherit; }
  .feature-item_title,
  .timeline_step-heading { font-size: 1.25rem; line-height: 1; }
  .tracker-info_title { font-size: 1.25rem; }
  .media_item-title { font-size: 1.125rem; line-height: 1.05; }

  /* FAQ questions 20 -> 16 px; testimonial roles and article dates 13 px. */
  .faq_item-q { font-size: 1rem; line-height: 1.3; }
  .testi-item_subtitle,
  .media_item-header { font-size: 0.8125rem; }

  /* Form fields stay at 16 px (iOS zoom). */
  .input, .textarea { font-size: 16px; }

  /* Spacing scaled to the denser type: Webflow kept 4 to 10 rem gaps. */
  .padding-section-large { padding-top: 3rem; padding-bottom: 3rem; }
  .padding-global.padding-section-large.is-timeline { padding-top: 4rem; padding-bottom: calc(3rem + (3 * var(--pixels-simple-width))); }
  .padding-global.padding-section-app { padding-top: 5rem; padding-bottom: 5rem; }
  .padding-global.padding-section-app.is-feature { padding-bottom: 6rem; }
  .testi_grid-wrap { margin-top: 2.5rem; margin-bottom: 2.5rem; }
  .hiw_grid { margin-top: 2.5rem; }
  .exp_heading-wrap { margin-bottom: 1.5rem; }
  /* Process timeline: a 100vh sticky box built for the desktop scroll
     sequence. On a phone the steps simply stack (the script does not pin
     there), so the fixed box was shorter than its steps and the last one
     ran under the pixel band. It now follows its content. */
  .exp_sticky-wrap { height: auto; position: relative; }
  /* Its row (gradient line + steps) was one screen tall (100vh), shorter
     than the five steps: the row now grows with them, the line follows. */
  .exp_timeline-wrap { height: auto; }
  .exp_timeline-wrap { gap: 2.5rem; }
  /* Around the pixel bands Webflow keeps 8 rem of air plus the band itself
     (3 rows of squares). On a phone the air drops to 3 rem; the band's own
     height stays reserved, so the squares never cover content. */
  .padding-global.padding-section-large.is-pixels-top { padding-top: calc(3rem + (3 * var(--pixels-simple-width))); }
  .padding-global.padding-section-large.is-aqua { padding-bottom: calc(3rem + (6 * var(--pixels-height))); }
  .padding-global.padding-section-large.is-hiw {
    padding-top: calc(3rem + (3 * var(--pixels-simple-width)));
    padding-bottom: calc(3rem + (3 * var(--pixels-simple-width)));
  }
  .section.is-aqua { margin-top: 4rem; }
  .padding-global.padding-section-about { padding-top: 3rem; }
  .media_inner { margin-top: 2.5rem; }
  /* Footer: fixed 14:30 shape on a phone (836 px), the brand gradient
     filling what the links leave. 14:22 keeps the gradient fully visible
     with less empty height; the gap between its two columns 10 -> 2.5 rem. */
  .footer { aspect-ratio: 14 / 22; padding-top: 4rem; }
  .footer_top-part { gap: 2.5rem; }

  /* Hero tracker boxes are placed for the desktop photo: on a phone they sit
     beyond the right edge (x 431-611 on a 390 px screen) and are never seen.
     Chromium clips them (overflow: clip on the page wrappers), but iPhone
     browsers can still widen the page to 611 px, leaving content out of
     reach. Their own box (the full hero, holding only them and the partner
     logos) now clips them. Their position is set inline by the hero script,
     so it is left alone. */
  .trackers_wrap { overflow: hidden; }
  /* The hero photos are zoomed (115 %) and spill ~30 px past both sides,
     with the same effect. Cut the sides only: the photos also extend above
     and below the layer on purpose, which clip-path leaves untouched. */
  .hero_absolute { clip-path: inset(-100vh 0 -100vh 0); }

  /* How it works: image and text sat side by side, leaving the text a
     134-200 px column, right-aligned on two steps. Each step now stacks:
     image on top (16:10), then the title and the text at full width. */
  .hiw_item-line,
  .hiw_item-line.is-first,
  .hiw_item-line.is-second,
  .hiw_item-line.is-third,
  .hiw_item-line.is-fourth {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    margin-top: 3rem;
  }
  .hiw_item-line.is-first { margin-top: 2rem; }
  .hiw_item-line .hiw_item-img-wrap {
    order: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .hiw_item-line .hiw_item-heading,
  .hiw_item-line .hiw_item-heading.is-second,
  .hiw_item-line .hiw_item-heading.is-third,
  .hiw_item-line .hiw_item-heading.is-fourth {
    order: 1;
    width: 100%;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .hiw-item_p { max-width: none; }

  /* Media, news and awards: six 400 px cards in one column made this section
     about 2,000 px tall. Each group is now a horizontal row to swipe, with
     the next card peeking in so the gesture is obvious. */
  .media_items,
  .media_items-2 {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* bleed to both screen edges, cards still start at the page margin */
    width: calc(100% + 2.5rem);
    max-width: none;
    margin-inline: -1.25rem;
    padding: 0 1.25rem 0.5rem;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  /* The second group ("See more") had its own rule: width 100%, overflow
     hidden, centred. Same row behaviour, its top spacing kept. Its panel is
     clipped by the open / close animation (inline overflow hidden), so the
     panel itself spans the screen and the row fits inside it. */
  .media-see-more {
    width: calc(100% + 2.5rem);
    max-width: none;
    margin-inline: -1.25rem;
  }
  .media_items-2.is-second {
    width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    align-items: stretch;
    justify-content: flex-start;
  }
  .media_items::-webkit-scrollbar,
  .media_items-2::-webkit-scrollbar { display: none; }
  .media_item,
  .media_item-2 {
    flex: 0 0 80%;
    width: 80%;
    max-width: 80%;
    margin: 0;
    scroll-snap-align: start;
  }
  /* Card titles were 32 px in a 250 px card: words broke mid-word. */
  .media_item-title { font-size: 1.375rem; line-height: 1.05; }

  /* Testimonials: the role under each name was 12 px. On narrow phones
     (320 px) the name / role block could not shrink and pushed the line
     past the screen: let it wrap. */
  .testi-item_subtitle { font-size: 0.875rem; line-height: 1.3; }
  .testi-item_line > .div-block-4 { min-width: 0; }
  .testi-item_line > .div-block-4 * { min-width: 0; overflow-wrap: anywhere; }
  .testi_grid-wrap > .w-dyn-list { width: 100%; min-width: 0; }

  /* Footer links: 24 px tall, under the 44 px minimum for a finger. */
  .footer_link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}