/* Phone fixes, bottom half of the page: Atrium → footer. Every rule inside the media query. */
@media (max-width:900px){

  /* ── shared: small labels up to 11px+, headings wrap evenly ── */
  section.s3[data-s3="atrium"] .eyebrow,#send .eyebrow,#trail .eyebrow,#also .eyebrow,#steps .eyebrow,#contact .eyebrow{font-size:11px;letter-spacing:.06em}
  section.s3[data-s3="atrium"] ~ section .frame .bar,#send .frame .bar,#trail .frame .bar{font-size:11.5px;z-index:2}
  #send .src,#trail .src{font-size:11px}
  section.s3[data-s3="atrium"] h2 .line,#send h2 .line,#trail h2 .line,#contact h2 .line{text-wrap:balance}

  /* ── Atrium ── */
  section.s3[data-s3="atrium"]{padding-top:96px}
  section.s3[data-s3="atrium"] .s3-head p{font-size:15px;line-height:1.45}
  #atrium-cards .at5-hd > span{font-size:11px}
  #atrium-cards .card3 .stamp{font-size:11px;letter-spacing:.12em}
  #atrium-cards .runway .tag{font-size:11px;letter-spacing:.06em}
  #atrium-cards .ac-view .ac-note{font-size:11px;margin:12px 76px 0 0;text-align:left}
  /* replay / pause buttons: same look, 40px+ touch area */
  #atrium-cards .ac-chat-replay::after,#atrium-cards .ac-toggle::after,#atrium-cards .ac-replay::after{content:"";position:absolute;inset:-7px}
  #desk .desk__top .draft{font-size:11px}
  /* the three dark sections end without a long empty tail */
  section.s3[data-s3="atrium"] ~ section[data-nav="deep"]:last-of-type{padding-bottom:72px !important}

  /* ── #send / #trail ── */
  #send,#trail{padding:88px 0 72px}
  /* stat tiles share the row evenly, labels readable */
  #send .tiles,#trail .tiles{flex-wrap:nowrap;gap:8px}
  #send .tiles .stat,#trail .tiles .stat{flex:1 1 0;width:auto;height:auto;min-width:0;min-height:104px;padding:14px 12px 13px;border-radius:20px;gap:16px}
  #send .tiles .stat .v,#trail .tiles .stat .v{font-size:22px}
  #send .tiles .stat .l,#trail .tiles .stat .l{font-size:11px;letter-spacing:.04em;line-height:1.3}

  /* ── #also: the heading stays put; the six cards swipe under it, the next one peeking in ── */
  #also .strip__pin{padding:72px 0 60px}
  /* no padding on the scroller: the side gutters are real grid columns (::before and .strip__end), so the sticky
     heading measures from the screen edge in every browser */
  #also .strip__track{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
    grid-template-columns:calc(var(--gut) - 12px) repeat(6,84vw) calc(var(--gut) - 12px);gap:26px 12px;
    padding:0 0 4px;align-items:stretch;will-change:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  #also .strip__track::-webkit-scrollbar{display:none}
  #also .strip__track::before{content:"";grid-row:2}
  #also .strip__intro{grid-row:1;grid-column:1 / -1;position:sticky;left:var(--gut);margin-left:var(--gut);
    width:calc(100vw - 2 * var(--gut));padding-right:0;display:block;scroll-snap-align:none}
  #also .strip__intro h2{margin:16px 0 0}
  #also .strip__intro h2 .it{display:block}
  #also .strip__track > .panel{grid-row:2;width:auto;scroll-snap-align:start;scroll-margin-left:var(--gut)}
  #also .strip__end{grid-row:2;scroll-snap-align:none}
  #also .panel .shot{height:auto;aspect-ratio:16 / 10}
  #also .panel .k{font-size:11.5px;line-height:1.4}
  #also .panel .k span:last-child{text-align:right}
  #also .panel h3{font-size:21px;margin-bottom:0}
  #also .more p{font-size:14.5px;line-height:1.5;margin:10px 6px 0}

  /* ── #steps ── */
  #steps{padding:88px 0 56px}
  /* “From first conversation” on one line */
  #steps .how__side h2{font-size:min(36px,8vw)}

  /* ── contact + footer: 40px+ tap targets ── */
  #contact .btn{height:46px}
  footer .columns h6{font-size:11px;margin-bottom:8px}
  footer .columns a{padding:11px 0}
  footer .bottom{margin-top:48px;align-items:center;gap:6px 20px}
  footer .bottom a{display:inline-block;padding:13px 0;font-size:13px}
}

/* phones only (not tablets, where the full screenshots are already legible) */
@media (max-width:600px){
  /* phone mock a little larger so its feed can be read */
  #atrium-cards .card3.b .at5-pgp{scale:1.2;margin-top:34px;margin-bottom:34px}

  /* ── product screenshots: zoom into the part worth reading (same idea as the walk figures).
        width = zoom, margin-left/top/bottom = what is cropped away, all as % of the frame width ── */
  #fanAtrium .frame img[src$="home-feed-1440.png"]{width:200%;max-width:none;margin:-10.6% 0 -16.7% -47.2%}
  #fanAtrium .frame img[src$="people-directory-1440.png"]{width:194.6%;max-width:none;margin:-10.5% 0 -23% -44.6%}
  #send .frame img[src$="teacher-dashboard-1440.png"]{width:271.7%;max-width:none;margin:-11.7% 0 -63.8% -41.1%}
  #send .frame img[src$="teacher-input-form-1440.png"]{width:257.1%;max-width:none;margin:-11.1% 0 -80.4% -38.9%}
  #send .frame img[src$="wave2-round-robin-tracker-1440.png"]{width:257.1%;max-width:none;margin:-38.9% 0 -48.2% -60.7%}
  #send .frame img[src$="senco-dashboard-1440.png"]{width:232.3%;max-width:none;margin:-10% 0 -43.5% -54.2%}
  #trail .frame img[src$="people-directory-1440.png"]{width:200%;max-width:none;margin:-10.8% 0 -41.7% -36.4%}
  #trail .frame img[src$="person-profile-dossier-1440.png"]{width:182.3%;max-width:none;margin:-9.9% 0 -45.6% -36.7%}
}