/* =========================================================
   Новичкам / Как начать играть — макет Figma, node 138:872,
   1920 × 6215. Размеры точны при ширине окна 1920px.

   Всё общее берём из styles.css: токены, .container, .section,
   .d-160/.d-64, .btn, .round-btn, .contacts__manager*.
   Здесь — только то, чего в общих стилях нет (префикс beg-).
   ========================================================= */

/* Левый край лент совпадает с краем .container на любой ширине:
   260px при 1920, 24/16px на узких экранах. */
.beg-page{--beg-edge:max(var(--gutter), calc((100% - var(--container)) / 2))}

/* ---------- Типографика макета, которой нет в styles.css ---------- */
.beg-d-120,.beg-d-96,.beg-d-32{
  font-family:var(--font-display);font-weight:400;line-height:.9;
  overflow-wrap:break-word;
}
.beg-d-120{font-size:120px;letter-spacing:-2.4px}
.beg-d-96 {font-size:96px; letter-spacing:-1.92px}
.beg-d-32 {font-size:32px; letter-spacing:-.64px;line-height:1}

/*
 * Абзацы макета — белый 65% с прозрачностью слоя 80%. Складываем заранее
 * в одно значение (.52), чтобы не городить вложенные opacity.
 */
.beg-lead{font-size:16px;line-height:1.3;color:rgba(255,255,255,.52)}
.beg-note{font-size:16px;line-height:1.3;color:var(--text-body);opacity:.8}

/* ---------- Герой ---------- */
.beg-hero{padding-top:110px}
.beg-hero__grid{
  display:grid;grid-template-columns:minmax(0,803fr) minmax(0,565fr);
  gap:32px;align-items:center;
}
.beg-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:228px}
.beg-hero__text{display:flex;flex-direction:column;gap:56px}
.beg-hero__lead{max-width:407px}
.beg-hero__cta{letter-spacing:-1.1px}
.beg-hero__photo{width:100%;height:752px;object-fit:cover;border-radius:100px}

/* ---------- Шапка секции с заголовком и стрелками ---------- */
.beg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
/* text-wrap:balance — в макете у этих заголовков стоит text-balance, именно он
   даёт перенос «…дилеры / бесплатно учат…», а не ширина текстового блока. */
.beg-head__title{min-width:0;text-wrap:balance}
.beg-head--lessons .beg-head__title{max-width:1101px}
.beg-head--steps   .beg-head__title{max-width:1178px}
.beg-head__nav{display:flex;align-items:center;gap:16px;flex:none}

/* ---------- Горизонтальные ленты ---------- */
.beg-rail{
  display:flex;gap:32px;margin:0;
  padding-inline:var(--beg-edge);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:var(--beg-edge);
  scrollbar-width:none;-ms-overflow-style:none;
}
.beg-rail::-webkit-scrollbar{display:none}
.beg-rail:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.beg-rail > *{scroll-snap-align:start}
.beg-rail--lessons{margin-top:72px}
.beg-rail--steps{margin-top:96px}

/* Доли от ширины контейнера: 923/1400 и 445.333/1400 — как в макете. */
.beg-lesson{flex:0 0 65.93%;display:flex;flex-direction:column;gap:32px}
.beg-lesson img{
  width:100%;height:504px;object-fit:cover;
  border:1px solid rgba(255,255,255,.04);border-radius:36px;
}

.beg-step{flex:0 0 31.81%;display:flex;flex-direction:column;gap:32px}
.beg-step img{width:100%;height:462px;object-fit:cover;border-radius:36px}
.beg-step__text{display:flex;flex-direction:column;gap:16px}

/* ---------- Частые вопросы ---------- */
.beg-faq{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:96px;align-items:start;
}
.beg-faq__title{grid-column:1;grid-row:1;white-space:nowrap}
.beg-faq__note{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.beg-faq__note .beg-note{max-width:369px}
.beg-faq__list{grid-column:2;grid-row:2}

.beg-faq__item{border-bottom:1px solid var(--hairline)}
.beg-faq__item:first-child{border-top:1px solid var(--hairline)}
.beg-faq__q{
  display:flex;align-items:flex-start;gap:24px;
  padding-block:48px;cursor:pointer;list-style:none;
  font-weight:600;font-size:20px;line-height:1.29;
  color:var(--white);opacity:.8;transition:opacity .2s ease;
}
.beg-faq__q::-webkit-details-marker{display:none}
.beg-faq__q:hover{opacity:1}
.beg-faq__q > span{flex:1}
.beg-faq__chevron{width:24px;height:24px;flex:none;margin-top:2px;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.beg-faq__item[open] .beg-faq__chevron{transform:rotate(180deg)}
.beg-faq__a > p{
  margin-top:-28px;padding-bottom:48px;
  font-size:16px;line-height:1.3;color:var(--text-body);opacity:.8;
}

/* ---------- Карточка менеджера (поверх .contacts__manager) ---------- */
.beg-manager{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.04)}
.beg-manager:hover{background:rgba(255,255,255,.1)}
.beg-manager .contacts__manager-photo{object-position:bottom}
.beg-manager .contacts__manager-channel{color:var(--text-body)}
.beg-manager--light{background:var(--white)}
.beg-manager--light:hover{background:#ececec}
.beg-manager--light .contacts__manager-name{color:#000}
.beg-manager--light .contacts__manager-channel{color:#3c3c3c}

/* ---------- Блок «Напишите менеджеру» ---------- */
.beg-join{
  margin-top:var(--section-gap);padding-top:180px;
  border-radius:240px 240px 0 0;overflow:hidden;
  background-image:linear-gradient(180deg,
    rgba(254,254,254,.04) 0%, rgba(254,254,254,.027) 12.5%, rgba(254,254,254,.021) 18.75%,
    rgba(255,255,255,.013) 31.25%, rgba(255,255,255,.007) 43.75%, rgba(255,255,255,.003) 56.25%,
    rgba(255,255,255,.001) 75%, rgba(255,255,255,0) 87.5%);
}
.beg-join__content{display:flex;flex-direction:column;align-items:center;gap:44px;text-align:center}
.beg-join__title{width:100%;text-wrap:balance}
.beg-join__sub{max-width:700px;font-size:18px;line-height:1.3;color:var(--text-muted)}
.beg-join__actions{display:flex;align-items:center;gap:24px}
/* В макете кнопка — не плотный серый .btn--grey, а белый с прозрачностью 12%. */
.beg-join__btn{background:rgba(255,255,255,.12)}
.beg-join__btn:hover{background:rgba(255,255,255,.18)}

/* ---------- Лента фотографий ---------- */
.beg-team{
  --beg-card-w:361.91px;--beg-card-h:523.48px;
  display:flex;justify-content:center;align-items:center;
  margin-top:120px;
}
.beg-team__card{
  flex:none;width:var(--beg-card-w);height:var(--beg-card-h);padding:6px;
  border:.808px solid rgba(255,255,255,.04);border-radius:30px;
  background:rgba(255,255,255,.04);
}
/* −72px перекрытия в макете считались от повёрнутых боксов; у CSS-поворота
   габарит не меняется, поэтому вычитаем на ширину прироста меньше. */
.beg-team__card + .beg-team__card{margin-left:calc(var(--beg-card-w) * -.1246)}
.beg-team__card:nth-child(odd){transform:rotate(-3deg)}
.beg-team__card:nth-child(even){transform:rotate(3deg)}
.beg-team__card img{width:100%;height:100%;object-fit:cover;border-radius:24px}

/* Футер в макете прижат к ленте, общий отступ 305px здесь не нужен. */
.beg-page .footer{padding-top:120px}

/* =========================================================
   Адаптив — макет зафиксирован на 1920px, ниже плавно сжимается
   ========================================================= */
@media (max-width:1520px){
  .beg-d-120{font-size:100px;letter-spacing:-2px}
  .beg-d-96{font-size:80px;letter-spacing:-1.6px}
  .beg-d-32{font-size:28px;letter-spacing:-.56px}
  .beg-hero{padding-top:88px}
  .beg-hero__copy{gap:160px}
  .beg-hero__photo{height:660px;border-radius:80px}
  .beg-lesson img{height:440px;border-radius:32px}
  .beg-step img{height:400px;border-radius:32px}
  .beg-join{padding-top:140px;border-radius:180px 180px 0 0}
  .beg-team{--beg-card-w:300px;--beg-card-h:434px;margin-top:100px}
}

@media (max-width:1180px){
  .beg-d-120{font-size:72px;letter-spacing:-1.4px}
  .beg-d-96{font-size:60px;letter-spacing:-1.2px}
  .beg-hero{padding-top:64px}
  .beg-hero__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .beg-hero__copy{gap:56px}
  .beg-hero__text{gap:32px}
  .beg-hero__photo{height:520px;border-radius:56px}
  .beg-head{align-items:flex-start;flex-direction:column;gap:32px}
  .beg-rail--lessons{margin-top:48px}
  .beg-rail--steps{margin-top:56px}
  .beg-lesson{flex-basis:88%}
  .beg-lesson img{height:360px}
  .beg-step{flex-basis:46%}
  .beg-step img{height:340px}
  .beg-faq{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .beg-faq__title{grid-column:1;grid-row:1;white-space:normal}
  .beg-faq__note{grid-column:1;grid-row:2}
  .beg-faq__list{grid-column:1;grid-row:3}
  .beg-join{padding-top:112px;border-radius:120px 120px 0 0}
  .beg-join__content{gap:32px}
  .beg-team{--beg-card-w:232px;--beg-card-h:336px;margin-top:80px}
  .beg-page .footer{padding-top:96px}
}

@media (max-width:760px){
  .beg-d-120{font-size:44px;letter-spacing:-.9px}
  .beg-d-96{font-size:38px;letter-spacing:-.76px}
  .beg-d-32{font-size:24px;letter-spacing:-.48px}
  .beg-lead,.beg-note{font-size:15px;line-height:1.45}
  .beg-hero{padding-top:32px}
  .beg-hero__grid{gap:32px}
  .beg-hero__copy{gap:32px}
  .beg-hero__text{gap:20px}
  .beg-hero__lead{max-width:none}
  .beg-hero__cta{width:100%}
  .beg-hero__photo{height:400px;border-radius:32px}
  .beg-head{gap:24px}
  .beg-head__nav{gap:12px}
  .beg-rail{gap:16px}
  .beg-rail--lessons,.beg-rail--steps{margin-top:32px}
  .beg-lesson,.beg-step{gap:20px;flex-basis:100%}
  .beg-lesson img{height:220px;border-radius:24px}
  .beg-step img{height:300px;border-radius:24px}
  .beg-step__text{gap:12px}
  .beg-faq{row-gap:36px}
  .beg-faq__note{gap:20px}
  .beg-faq__q{gap:16px;padding-block:28px;font-size:17px}
  .beg-faq__a > p{margin-top:-14px;padding-bottom:28px}
  .beg-join{margin-top:var(--section-gap);padding-top:64px;border-radius:40px 40px 0 0}
  .beg-join__content{gap:24px}
  .beg-join__sub{font-size:15px}
  .beg-join__actions{align-items:stretch;flex-direction:column;gap:16px}
  .beg-join__actions .beg-manager{align-self:center}
  .beg-team{--beg-card-w:150px;--beg-card-h:217px;margin-top:56px}
  .beg-team__card{padding:4px;border-radius:16px}
  .beg-team__card img{border-radius:13px}
  .beg-page .footer{padding-top:72px}
}

@media (prefers-reduced-motion:reduce){
  .beg-faq__chevron{transition:none}
  .beg-rail{scroll-behavior:auto}
}