/* Contact Support — betaces-contact-us-page (1440) / -mobile (390). */

/* ── 02-help-intro ────────────────────────────────────────────────────── */
.help-intro {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-40);
  padding: var(--section-pad-y-sm) var(--container-pad);
  background: var(--color-cream);
}
.help-intro__left { width: 640px; flex: none; display: grid; gap: 28px; }
.help-intro__badge { display: grid; gap: var(--space-12); }
.help-intro__h {
  font-size: 80px; font-weight: 700; line-height: 76px; letter-spacing: var(--ls-h1);
  text-transform: uppercase; color: var(--color-ink);
}
.help-intro__lede { font-size: var(--fs-body); line-height: 22px; color: var(--color-muted); }
.help-intro__links { display: flex; flex-wrap: wrap; gap: var(--space-32); }

/* Drawn 412px tall next to a 374px text column, which is what sets the section. */
.channels {
  width: 480px; flex: none; display: grid; gap: var(--space-24); align-content: start;
  min-height: 412px;
  padding: var(--space-32); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.channels__label { font-size: var(--fs-meta); font-weight: 800; line-height: 16px; color: var(--color-brand); }
.channels__grid { display: grid; gap: var(--space-12); }
.channels__grid li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: 700; line-height: 19px;
  color: var(--color-ink);
}
.channels__state { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-brand); }
.channels__help { display: grid; gap: var(--space-4); }
.channels__help-label { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.channels__phone {
  font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; line-height: 30px;
  color: var(--color-ink); text-decoration: none;
}
.channels__email { font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-brand); }
.channels__note { font-size: var(--fs-meta); line-height: 16px; color: var(--color-muted); }

/* ── 03-main-help-workspace ───────────────────────────────────────────── */
.contact-workspace {
  display: flex; align-items: flex-start; gap: var(--space-80);
  padding: 100px var(--container-pad);
  background: var(--color-cream-2);
}
.contact-form { flex: 1; min-width: 0; display: grid; gap: var(--space-40); }
.contact-form__head { display: grid; gap: var(--space-12); }
.contact-form__h {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 52px;
  text-transform: uppercase; color: var(--color-ink);
}
.contact-form__lede { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-muted); }

/* Экран после отправки: форма прячется, на её месте — подтверждение и куда идти
   дальше. Ширину держим по колонке формы, поэтому блок тоже сетка. */
.contact-done { display: grid; gap: var(--space-16); align-content: start; }
.contact-done__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24); margin-top: var(--space-8); }
.contact-form__req { font-size: var(--fs-meta); font-weight: 700; line-height: 16px; color: var(--color-brand); }
.contact-form__group { display: grid; gap: var(--space-20); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }
.contact-form .field input,
.contact-form .field select { height: 60px; padding: 14px var(--space-16); background: var(--color-cream); border-color: transparent; }
.contact-form .field textarea { min-height: 220px; padding: var(--space-16); background: var(--color-cream); border-color: transparent; }
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus { border-color: var(--color-brand); }
.contact-form__submit { display: flex; align-items: center; gap: var(--space-16); }

.attach {
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-16) var(--space-24); background: var(--color-cream); border-radius: var(--radius-sm);
}
.attach input { flex: 1; min-width: 0; font-size: var(--fs-ui); }
.attach__hint { font-size: var(--fs-label); line-height: 14.3px; color: var(--color-muted); }

.support-sidebar {
  width: 380px; flex: none; display: grid; gap: var(--space-24); align-content: start;
  min-height: 574px;
  padding: var(--space-32); background: var(--color-cream); border-radius: var(--radius-sm);
}
.support-sidebar__h {
  font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; line-height: 30px;
  text-transform: uppercase; color: var(--color-ink);
}
.support-sidebar__group { display: grid; gap: var(--space-8); }
.support-sidebar__label { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.support-sidebar__title { font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700; line-height: 24px; color: var(--color-ink); }
.support-sidebar__phone {
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; line-height: 43px;
  color: var(--color-brand); text-decoration: none;
}
.support-sidebar__note { font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* The mobile frame makes the channels panel and the sidebar full-bleed sections
     of their own, so the wrappers stop padding and each block pads itself. */
  .help-intro { flex-direction: column; gap: 0; padding: 0; }
  .help-intro__left { width: auto; gap: var(--space-16); padding: var(--space-32) var(--container-pad-mobile); }
  .help-intro__h { font-size: 40px; line-height: 40px; }
  .help-intro__lede { font-size: var(--fs-ui); line-height: 20px; }
  .help-intro__links { gap: var(--space-16); }
  .channels {
    width: auto; min-height: 0; gap: var(--space-16); border-radius: 0; box-shadow: none;
    padding: var(--space-24) var(--container-pad-mobile); background: var(--color-cream-2);
  }
  .channels__grid li { font-size: var(--fs-ui); line-height: 18px; }
  .channels__phone { font-size: var(--fs-title); line-height: 27px; }

  .contact-workspace { flex-direction: column; gap: 0; padding: 0; }
  .contact-form { gap: var(--space-24); padding: var(--space-32) var(--container-pad-mobile); }
  .contact-form__h { font-size: 36px; line-height: 38px; }
  .contact-form__row { grid-template-columns: 1fr; gap: var(--space-16); }
  .contact-form .field input, .contact-form .field select { height: 52px; }
  .contact-form .field textarea { min-height: 160px; }
  .contact-form__submit { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .attach { flex-direction: column; align-items: stretch; gap: var(--space-8); padding: var(--space-16); }
  .support-sidebar {
    width: auto; min-height: 0; gap: var(--space-16); border-radius: 0;
    padding: var(--space-32) var(--container-pad-mobile);
  }
  .support-sidebar__phone { font-size: var(--fs-h6); line-height: 30px; }
}