.about__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:end}
.about__state{margin:22px 0 0;font-size:clamp(20px,1.9vw,28px);line-height:1.35;color:var(--ink-2);max-width:34ch}
.about__state b{color:var(--ink);background:var(--y-soft);padding:0 .15em;border-radius:4px}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:clamp(32px,4vw,56px)}
.ben{border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;min-height:280px;
    background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.ben h3{margin:0;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.5vw,38px);line-height:.95}
.ben p{margin:0;color:var(--ink-2);max-width:40ch}
.ben i{font-style:normal;align-self:flex-start;padding:5px 11px;border-radius:99px;background:var(--y-soft);font-size:13px;font-weight:700}
.ben--a{grid-column:span 4;background:var(--y);box-shadow:none;flex-direction:row;align-items:stretch;gap:24px}
.ben--a>div{display:flex;flex-direction:column;gap:12px;flex:1}
.ben--a i{background:#fff}
.ben--b{grid-column:span 2;background:var(--ink);color:#fff;box-shadow:none}
.ben--b p{color:rgba(255,255,255,.72)}
.ben--b i{background:rgba(255,193,0,.18);color:var(--y)}
.ben--c{grid-column:span 3}
.ben--d{grid-column:span 3}
.ben .grow{margin-top:auto}
.about__win{position:relative;aspect-ratio:4/3;border-radius:44px;padding:7px;
    background:linear-gradient(128deg,#fff,#f6f6f5 35%,#fff 50%,#f8f8f7);box-shadow:inset 0 0 0 1px rgba(20,18,18,.1)}
/* поясок + надсечка выреза */
.about__win video{display:block;width:100%;height:100%;object-fit:cover;border-radius:37px;background:#2c2a28;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.about__win::after{content:"";position:absolute;inset:7px;border-radius:37px;pointer-events:none;
    box-shadow:inset 0 6px 14px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.25)}
/* глубина: вырез, а не картинка */
.h2__w{position:relative;display:inline-block}
/* стикер справа от «Создаём», по центру строки */
/* аккуратно: ровно, без поворота, симметричные поля, ровный жёлтый, мягкая смола (#resin, не крупная) */
.stat{position:absolute;left:calc(100% + 20px);top:50%;transform:translateY(-50%);padding:5px;border-radius:999px;background:#fbfbfa;
    box-shadow:0 0 0 1px rgba(20,18,18,.12);white-space:nowrap;text-transform:none;letter-spacing:0;font-family:var(--font-body)}
.stat__in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 20px;border-radius:999px;
    background:linear-gradient(180deg,#ffcc1f,#FFC100);filter:url(#resin)}
.stat b{font-family:var(--font-head);font-weight:800;font-size:clamp(24px,2.2vw,30px);line-height:.9;color:var(--ink)}
.stat span{font-size:10.5px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.about__state b{background:none;padding:0}
@media(min-width:561px){
  /* шире 560 бейдж в строке, а не absolute: на 1024–1440 он закрывал слово «мерч» */
  .stat{position:relative;display:inline-block;vertical-align:middle;left:auto;top:auto;transform:none;margin:0 .1em 0 .35em}
}
/* текст под заголовком легче: один абзац обычным кеглем, второй — мелкой сноской (цифра и так вынесена стикером) */
#about .about__state{font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:44ch}
#about .lead{font-size:15px;color:var(--muted);max-width:52ch;margin-top:14px}
#about .lead b{color:var(--muted);font-weight:500}
#about .ben{position:relative;box-shadow:0 0 0 7px #fbfbfa,0 0 0 8px rgba(20,18,18,.12);border-radius:30px}
#about .ben h3{text-wrap:balance}
#about .ben .grow{margin-top:0}
/* текст сразу под заголовком, одинаковый отступ во всех карточках (gap 12px) */
#about .ben i{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(20,18,18,.08)}
#about .ben--a{background:var(--y)}
#about .ben__ph{flex:0 0 42%;min-width:0;width:42%;object-fit:cover;border-radius:20px;box-shadow:0 0 0 5px #fbfbfa}
#about .ben--b{background:#ff4f8b;color:#fff}
#about .ben--b p{color:rgba(255,255,255,.88)}
#about .ben--c{background:#1f6b45;color:#fff;border-radius:48px}
#about .ben--c p{color:rgba(255,255,255,.85)}
#about .ben--d{background:#3b6cff;color:#fff}
#about .ben--d p{color:rgba(255,255,255,.88)}
#about .bento{gap:26px;margin-top:clamp(48px,5vw,72px)}
@media(max-width:900px){
  .about__top{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .ben{grid-column:auto!important;min-height:0}
  .ben--a{flex-direction:column}
}
@media(max-width:560px){
  /* .rail__nav{display:flex} ниже по коду перебивал скрытие — на тач-экране листают свайпом */
  #about .h2__w{display:block;width:fit-content;margin-bottom:10px}
  /* «Создаём» — отдельной строкой, справа от него бейдж; отступ — бейдж выше строки */
  /* карточки выгод — лентой со свайпом (было 4 карточки столбиком ≈1000px); следующая выглядывает справа */
  #about .bento{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:18px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;
      margin-inline:-18px;padding:9px 18px 12px;scroll-padding-inline:18px;scrollbar-width:none;overscroll-behavior-x:contain}
  #about .bento::-webkit-scrollbar{display:none}
  #about .ben{scroll-snap-align:start}
  /* overflow-y:hidden — карточки въезжают снизу (.rv translateY), лента без него скроллилась и по вертикали */
  #about .ben__ph{flex:none;width:100%;height:96px;margin-top:auto;border-radius:16px}
  /* фото в жёлтой карточке — полосой внизу (42% по высоте вылезало за карточку) */
  .stat{left:calc(100% + 10px);padding:4px;width:max-content}
  /* бейдж мельче; max-content — иначе ширину режет узкое «Создаём» */
  .stat__in{padding:7px 16px;gap:2px}
  .stat b{font-size:20px}
  .stat span{font-size:8.5px}
}