/* Homepage: phone and tablet layout (up to 860px). Desktop stays unchanged.
   Reason: --s scales everything down to 62 % below 1440px, which makes images and
   spacing too small on phones. Here they get fixed, phone-friendly sizes. */
@media (max-width:860px){

  /* Hero: full screen height, larger logo and tagline */
  .hero__view.pin__stage{min-height:100svh}
  .hero__stage{padding-top:76px}
  .hero__logo{width:min(60vw,250px)}
  .hero__tag{width:min(55vw,228px);margin-top:12px}
  .hero__copy{margin-top:26px}
  .hero__copy h1{font-size:clamp(28px,9.3vw,40px)}

  /* One partner: full-width image, large swipeable film strip */
  #one-partner .notes{gap:32px}
  #one-partner .notes__margin .media{width:100%;aspect-ratio:1.15}
  #one-partner .film{scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding-bottom:40px}
  #one-partner .film__track{height:min(68vw,440px);gap:14px}
  #one-partner .film__track>figure{scroll-snap-align:start}
  #one-partner .film__track .w-335{width:min(70vw,420px)}
  #one-partner .film__track .w-453{width:min(78vw,480px)}
  #one-partner .film__track .w-690{width:min(86vw,560px)}
  #one-partner .film__track figcaption{bottom:-26px}

  /* Pillars: image, then title and text per area (instead of 4 images, then 4 texts) */
  #pillars .pin__stage{display:flex;flex-direction:column}
  #pillars .wipe{display:contents}
  #pillars .pin__rail{display:none}
  #pillars .wipe__layer{margin:0}
  #pillars .wipe__layer img{aspect-ratio:4/3;height:auto}
  #pillars .wipe__layer:nth-child(1){order:1}
  #pillars .wipe__layer:nth-child(2){order:3}
  #pillars .wipe__layer:nth-child(3){order:5}
  #pillars .wipe__layer:nth-child(4){order:7}
  #pillars .pin__stage>.pin__step:nth-child(3){order:2}
  #pillars .pin__stage>.pin__step:nth-child(4){order:4}
  #pillars .pin__stage>.pin__step:nth-child(5){order:6}
  #pillars .pin__stage>.pin__step:nth-child(6){order:8}
  #pillars .pin__step{margin:0 auto;padding:26px 0 52px}
  #pillars .pin__step .g3{display:flex;flex-direction:column;gap:14px}
  #pillars .pin__step .t-h2{order:-1;font-size:clamp(40px,13vw,64px);line-height:1}
  html[lang="ru"] #pillars .pin__step .t-h2{font-size:clamp(30px,10vw,64px)}
  #pillars .pin__step .t-lead{font-size:17px;line-height:1.45;letter-spacing:0}

  /* Who: buttons share the width */
  #who .btn-row{gap:12px}
  #who .btn-row .btn{flex:1 1 140px;min-width:0;height:52px;padding-inline:12px}

  /* Cycle: image above the text, larger */
  #cycle .stair{padding-top:8px}
  #cycle .step{margin-top:44px;gap:18px}
  #cycle .step__fig{order:-1;aspect-ratio:4/3;max-width:none}

  /* Four areas: taller tiles, larger tap targets */
  #fields .cell{min-height:clamp(300px,84vw,380px);padding:22px}
  #fields .cell--type{min-height:0;gap:28px;padding:28px 22px}
  #fields .cell__go{width:38px;height:38px;right:18px;top:18px}
  #fields .cell__go svg{width:12px;height:12px}

  /* Founder: readable quote instead of 7 lines of giant type */
  #founder .quote--solo blockquote p{font-size:clamp(28px,8.4vw,40px);line-height:1.12}
  #founder .quote__foot{gap:18px;margin-top:40px}

  /* Next: headline fits, image before the text, full-width buttons */
  #next .wall__h{font-size:clamp(40px,12.5vw,64px);line-height:1.04;letter-spacing:-.02em}
  #next .wall__fig{grid-column:1/-1;grid-row:2;margin:24px 0 0;aspect-ratio:4/3}
  #next .wall__row{grid-row:3;margin-top:28px}
  #next .wall__ctas{align-items:stretch}
  #next .wall__ctas .btn{width:100%;min-height:52px}
}

/* Tablet portrait: wide images flatter so they do not fill the whole screen */
@media (min-width:641px) and (max-width:860px){
  #one-partner .notes__margin .media,
  #cycle .step__fig,
  #next .wall__fig{aspect-ratio:1.6}
}
@media (min-width:861px){
  html[lang="ru"] #next .wall__h{font-size:calc(112px * var(--s));line-height:calc(118px * var(--s))}
}