/* Страницы возможностей apex (спека 2026-09-24-apex-feature-pages-design.md).
   Токены — apex-tokens.css, кнопки — .axh-btn-* (apex.css), заголовок секции —
   .axh-h2 + .axh-section-head (apex.css). Брейкпоинты: 1024 и 640 (как у FW). */

.axf-s{padding-block:var(--axh-section-space);background:var(--axh-page-bg);color:var(--axh-ink)}
.axf-s--grey{background:var(--axh-photo-surface)}
.axf-s--ink{background:var(--axh-dark);color:var(--axh-cream)}
.axf-s .axh-h2>span{display:block;color:var(--axh-muted);font-weight:450}
.axf-s--ink .axh-h2>span,.axf-s--ink .axh-section-aside{color:var(--axh-muted-dark)}

.axf-display{margin:0;font-family:var(--axh-font);font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.04em;font-weight:640;text-wrap:balance}
.axf-eyebrow{margin:0 0 16px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--axh-muted)}
.axf-lead{margin:20px 0 0;max-width:46ch;font-size:18px;line-height:1.6;color:var(--axh-muted)}
.axf-s--ink .axf-eyebrow,.axf-s--ink .axf-lead{color:var(--axh-muted-dark)}
.axf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.axf-note{margin:16px 0 0;font-size:14px;color:var(--axh-muted)}
.axf-media{display:block;width:100%;height:auto;border-radius:0;background:var(--axh-photo-surface)}

/* hero */
.axf-hero{padding-block:clamp(40px,6vw,88px) var(--axh-section-space)}
.axf-hero__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center}
.axf-hero__media{overflow:hidden;border-radius:0}

/* split_row: картинка первой в DOM, на десктопе у --reverse уходит вправо */
.axf-split__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.axf-split--reverse .axf-split__media{order:2}
.axf-split__media img{aspect-ratio:3/2;object-fit:cover}
/* Сдвиг картинки split при прокрутке — чистый scroll-driven CSS, без JS.
   Браузеры без animation-timeline (Firefox) — без эффекта. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .axf-split__media{overflow:hidden;border-radius:0}
    .axf-split__media img{scale:1.08;animation:axf-split-drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes axf-split-drift{from{translate:0 -4%}to{translate:0 4%}}
  }
}
.axf-split__body{max-width:46ch;font-size:17px;line-height:1.65;color:var(--axh-muted)}
.axf-split__body p,.axf-split__body ul{margin:16px 0 0}
.axf-split__body ul{padding-left:1.1em}
.axf-s--ink .axf-split__body{color:var(--axh-muted-dark)}
.ds .axf-split__body a{text-decoration:underline;text-underline-offset:3px}

/* cta_band */
.axf-band__inner{display:flex;align-items:center;justify-content:space-between;gap:32px}
.axf-band .axf-lead{margin-top:12px}

/* showcase: 1 крупная + 2×2. Сетка с фиксированной пропорцией 2:1 — картинки
   заполняют ячейки (object-fit:cover), а не диктуют высоту строк. */
.axf-showcase__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;aspect-ratio:2/1}
.axf-showcase__grid>img{width:100%;height:100%;object-fit:cover}
.axf-showcase__grid>img:first-child{grid-row:span 2}

/* steps */
.axf-steps__title{margin-bottom:48px}
.axf-steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.axf-steps__item img{aspect-ratio:4/3;object-fit:cover}
.axf-steps__num{display:block;margin:24px 0 8px;font-size:14px;color:var(--axh-muted)}
.axf-steps__item h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.axf-steps__item p{margin:10px 0 0;line-height:1.6;color:var(--axh-muted)}
.axf-s--ink .axf-steps__num,.axf-s--ink .axf-steps__item p{color:var(--axh-muted-dark)}

/* closer */
.axf-closer .axf-display{max-width:14ch}

/* shops_wall: бесконечная лента = список дважды + translateX(-50%).
   Отступ — margin-right у карточки, не gap: иначе половина трека короче на полгэпа и лента дёргается. */
.axf-wall{overflow:hidden}
.axf-wall__rows{display:grid;gap:16px}
.axf-wall__track{display:flex;width:max-content;animation:axf-marquee 40s linear infinite}
.axf-wall__track--rev{animation-direction:reverse}
.axf-wall__track:hover{animation-play-state:paused}
.axf-wall__row:focus-within .axf-wall__track{animation-play-state:paused}
.axf-wall__row:focus-visible{outline:2px solid var(--axh-blue);outline-offset:4px}
.axf-wall__card{flex:0 0 auto;width:clamp(260px,28vw,480px);aspect-ratio:16/10;margin-right:16px;overflow:hidden;background:var(--axh-cream);box-shadow:0 1px 2px rgba(16,17,13,.06),0 8px 24px rgba(16,17,13,.08)}
.axf-wall__card img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes axf-marquee{to{transform:translateX(-50%)}}

@media (max-width:1024px){
  .axf-hero__grid,.axf-split__grid{gap:40px}
}
@media (max-width:640px){
  .axf-hero__grid,.axf-split__grid{grid-template-columns:1fr}
  .axf-split--reverse .axf-split__media{order:0}
  .axf-showcase__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto}
  .axf-showcase__grid>img{aspect-ratio:1}
  .axf-showcase__grid>img:first-child{grid-row:auto;grid-column:1 / -1;aspect-ratio:4/5}
  .axf-steps__list{grid-template-columns:1fr;gap:40px}
  .axf-band__inner{flex-direction:column;align-items:flex-start}
  .axf-lead{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .axf-wall__track{animation:none}
  .axf-wall__row{overflow-x:auto}
  .axf-wall__card[aria-hidden]{display:none}
  .axf-split__media img{animation:none;scale:1;translate:none}
}