/* ============================================================================
   Community — the 393 frame.  Figma 774:121927 "Mobile" (393 x 8326).

   The phone frame is not a reflow of the desktop one: it restates the type
   ramp, re-lays the hero CTAs and stat strip, and turns the six-card grid into
   a horizontal rail. Every value below is read out of that frame's nodes, so
   this file is the mobile design, not a set of derived breakpoints. It loads
   last and only bites at <= 720.

   Band map, with each band's drawn height:
     774:121928 hero        1337
     774:121987 six reasons  882   (header 392x317, then a 345-wide card rail)
     774:122100 streams      801
     774:122124 voices      2086   (the shared stories band)
     774:142711 numbers      624
     774:142732 final       2596
   ========================================================================= */

@media (max-width: 720px) {

  /* ---- 774:121928 — hero ----------------------------------------------- */
  .afxch { min-height: 1337px; padding-bottom: 0; }
  /* 774:121972 / 121943 — the phone draws the bar at 56 and then a 377x64 nav
     pill inset 8, so content opens at 128 rather than the desktop's 125. */
  .afxch .afx-nav { width: calc(100% - 16px); max-width: 377px; height: 64px; margin: 8px auto 0; }
  /* DECLARED DEVIATION — 774:121929 paints the hero photo through a rotated
     imageTransform, and the crop that falls out of it lands on a featureless
     part of the plate rather than the droplets the frame renders. The desktop
     crop covers instead: same artwork, same orientation as the reference
     render, a different slice of it. Worth revisiting with the raw asset. */
  .afxch__bg { top: 56px; height: 1281px; background: url('/assets/figma/comm-hero-bg.webp') center / cover no-repeat; min-width: 393px; }
  .afxch__page { padding: 0 24px; }

  /* 774:121934 at (24,188): the nav pill ends at 128, so 60 of margin */
  .afxch__row { width: 100%; margin: 60px 0 0; gap: 0; }
  /* 774:121937 — 345x174, SF Pro 510 / 64 / 57.6px / ls -1.92px */
  .afxch__h1 {
    width: 100%; margin-top: 16px;
    font-size: 64px; line-height: 57.6px; letter-spacing: -1.92px;
  }
  /* 774:121938 — 345x135 at y 423; the headline ends at 399, so 24 of gap */
  .afxch__lead { width: 100%; margin-top: 24px; font-size: 18px; line-height: 27px; letter-spacing: -.36px; }
  /* 774:121939 / 121941 — both full width, stacked, 12 apart, at y 582 */
  .afxch__ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin-top: 24px; }
  .afxch__ctas .afx-btn-lime, .afxch__ctas .afx-btn-ghost { width: 100%; }

  /* 774:121979 / 121981 / 121983 / 121985 — four cards at y 753 / 831 / 909 /
     987, so a 78 pitch on a 68-tall card: 10 of gap. Two sit at x24 and two
     are indented to x89. The drawn reading order puts Samir third, which is
     not the desktop paint order, hence the explicit `order`. */
  /* the ghost CTA ends at 705 and the first card is drawn at 753, so 48. */
  .afxch__chat {
    position: static; width: auto; height: auto; margin: 48px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .afxch__msg { position: static; width: auto; min-width: 0; max-width: 100%; }
  .afxch__text { white-space: normal; }
  .afxch__msg--a { order: 1; margin-left: 0; }
  .afxch__msg--b { order: 2; margin-left: 65px; }
  .afxch__msg--c { order: 3; margin-left: 0; }
  .afxch__msg--d { order: 4; margin-left: 65px; }

  /* 774:121956 — 345x213 at y 1101. The last card ends at 1055, so 46. */
  .afxch__stats { flex-direction: column; align-items: stretch; gap: 33px; width: 100%; margin: 46px 0 0; }
  .afxch__stat { width: auto; gap: 12px; }
  .afxch__rule { width: 100%; }
  /* 774:121961 — Saans 600 / 20 / 30px, not the desktop 32/48 */
  .afxch__value { font-size: 20px; line-height: 30px; }

  /* ---- 774:121987 — six reasons ---------------------------------------- */
  .afxw { min-height: 882px; }
  .afxw__inner { padding: 100px 24px 0; }
  .afxw__head { width: 344px; max-width: 100%; gap: 20px; }
  /* 774:122016 / 122017 — SF Pro 510 / 52 / 52px / ls -1.56px, three lines */
  .afxw__title span { font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  /* 774:122018 — 296x96, 16/24 */
  .afxw__sub { width: 296px; max-width: 100%; }

  /* 774:122019 — a 345-wide window on six 320-wide cards, 16 apart. The rows
     collapse so the six cards become the scroller's own children. */
  .afxw__rows {
    display: flex; flex-direction: row; gap: 16px;
    height: auto; margin: 40px 0 0; width: auto;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .afxw__rows::-webkit-scrollbar { display: none; }
  .afxw__row { display: contents; }
  .afxw__card { width: 320px; flex: 0 0 320px; scroll-snap-align: start; }
  /* 774:122033 — 272 wide, and the drawn block heights change on the phone */
  .afxw__row--a .afxw__copy { min-height: 120px; }
  .afxw__row--b .afxw__copy, .afxw__row--c .afxw__copy { min-height: 144px; }
  .afxw__stage { display: none; }

  /* ---- 774:122100 — streams -------------------------------------------- */
  .afxs { min-height: 801px; }
  .afxs__inner { flex-direction: column; align-items: center; padding: 100px 24px 0; gap: 0; }
  .afxs__head { width: 344px; max-width: 100%; align-items: center; text-align: center; gap: 12px; }
  .afxs__eyebrow { align-self: center; }
  /* 774:122120 / 122121 — 52/52, centred */
  .afxs__title { align-items: center; text-align: center; }
  .afxs__title span { font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  /* 774:122122 — 271x56 at y 289, i.e. 40 below the 249-tall header block */
  .afxs__cta { margin-top: 40px; width: auto; }
  .afxs__cta .afx-btn-lime { width: auto; }
  /* 774:122104 — the photo is 837.5x542.3 at (-325, 289): drawn much wider
     than the frame and cropped hard left. */
  /* position is restated because the 1180 breakpoint in atlas-comm-streams.css
     puts the photo back in flow; at 393 it is absolute again. */
  .afxs__shot {
    position: absolute; margin-top: 0;
    top: 289px; height: 542px; left: -325px; right: auto; width: 838px; min-width: 0;
  }

  /* ---- 774:142711 — the numbers strip ---------------------------------- */
  /* four 345x107 rows at y 0 / 139 / 278 / 417, so a 32 gap, and the band
     opens flush against the band above it. */
  .afxq { min-height: 624px; padding: 0 24px 100px; }
  .afxq__inner { flex-direction: column; gap: 32px; }
  .afxq__stat { flex: none; gap: 12px; }
  /* 774:142716 — SF Pro 510 / 58 / 58px / ls -1.74px */
  .afxq__value { font-size: 58px; line-height: 58px; letter-spacing: -1.74px; }

  /* ---- 774:142732 — final ---------------------------------------------- */
  .afxf--comm .afxf__bg { background-image: url('/assets/figma/comm-final-bg-m.webp'); min-width: 393px; height: 779px; }
  /* 774:142750 — 394x425 at y 100. atlas-final.css carries a desktop
     margin-top of 120 that its own 760 breakpoint does not clear, and a 40px
     gutter where the phone frame draws 24 — at 40 the headline wraps to three
     lines and the band gains 52. */
  .afxf--comm .afxf__inner { margin-top: 100px; padding: 0 24px; }
  /* 774:142754 -> 142756: eyebrow 33, then 12, then the headline at 145 */
  .afxf--comm .afxf__head { gap: 12px; }
  /* 774:142765 — the proof row is drawn at 656, i.e. 131 below the column */
  .afxf--comm .afxf__proof { margin: 131px 0 0; padding: 0 24px; }
  /* 774:142779 — the footer is 377 wide at x8, and sits 41 below the proof */
  .afxf--comm .afxf__footer { margin-top: 41px; }
  .afxf--comm .afxft { margin: 0 8px; }
  /* 774:142756 / 142757 — 52/52, both lines wrap freely at this width */
  .afxf--comm .afxf__h2 { font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  /* 774:142758 — 338x105 */
  .afxf--comm .afxf__body { font-size: 16px; line-height: 21.12px; letter-spacing: -.32px; }
  /* 774:142766 / 142771 / 142775 — the proof row stacks, 32 apart, centred */
  .afxf--comm .afxf__proof { flex-direction: column; align-items: center; gap: 18px; }
}