/* ==========================================================================
   Аккаунт: вход, регистрация, восстановление пароля, страница-сообщение,
   отписка из письма, «как прошла покупка». Макеты холста 2 — account/*.
   Префиксы: ac- общее, su- регистрация, rs- пароль, am- сообщение,
   un- отписка, fu- followup. Цвета — только токены (тёмная тема сама).
   ========================================================================== */

.ac { padding-block: var(--sp-32) var(--sp-64); }
.ac--signup { padding-top: var(--sp-48); }
.ac--reset { padding-top: var(--sp-48); }
.ac--unsub { padding-block: var(--sp-64) 72px; }
.ac--followup { padding-block: 44px var(--sp-64); }

/* --- Тёплая сцена с котом и карточкой (вход, пароль) ----------------------- */
.ac-stage {
  border-radius: var(--r-32); padding: var(--sp-40) var(--sp-16) 56px;
  background-color: var(--warm-bg); background-image: var(--dots); background-size: var(--dots-size);
  display: flex; justify-content: center;
}
.ac-col { width: 480px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.ac-cat { margin-bottom: -42px; position: relative; z-index: 0; animation: ac-cat .6s var(--ease-out) .35s both; }
.ac-peek { display: block; }
.ac-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: ac-blink 3.2s var(--ease-std) infinite; }
@keyframes ac-cat { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ac-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.ac-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--brand-text);
}
.ac-back svg { transition: transform var(--dur-hover) var(--ease-std); }
.ac-back:hover svg { transform: translateX(-3px); }

/* Карточка с фирменной жёсткой рамкой (вход) */
.ac-card {
  position: relative; z-index: 1; width: 100%; box-sizing: border-box; overflow: hidden;
  border: 2px solid var(--text); border-radius: var(--r-22); background: var(--surface); box-shadow: var(--sh-hard);
}
.ac-card.is-shake { animation: vg-rise .5s var(--ease-out) .28s both, ac-shake .28s var(--ease-std) .9s 1; }
@keyframes ac-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.ac-card__head {
  display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-28) var(--sp-32);
  border-bottom: 1px solid var(--line-soft); background: var(--surface-quiet);
}
.ac-card__titles { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; flex-grow: 1; }
.ac-card__eyebrow { font-size: 14px; font-weight: 600; color: var(--text-3); }
.ac-card__h {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.15;
  letter-spacing: var(--ls-h1); color: var(--text); outline: none;
}
.ac-card__sub, .ac-card__cat { display: none; }
.ac-card__body { padding: var(--sp-28) var(--sp-32) var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-20); }

.ac-tile {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--r-14); background: var(--brand); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.ac-tile--soft { background: var(--brand-bg); color: var(--brand-text); }

.ac-return {
  margin: 0; align-self: flex-start; display: flex; align-items: center; gap: var(--sp-8); min-height: 32px;
  padding: 6px var(--sp-12); box-sizing: border-box; border-radius: var(--r-16);
  background: var(--brand-bg); color: var(--brand-on-bg); font-size: 14px; font-weight: 600; line-height: 1.4;
}
.ac-return svg { color: var(--brand-text); flex-shrink: 0; }
.ac-intro { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* --- Поля ------------------------------------------------------------------- */
.ac-form { margin: 0; display: flex; flex-direction: column; gap: 18px; position: relative; }
.ac-field { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.ac-label { font-size: 15px; font-weight: 600; color: var(--text); }
.ac-input {
  display: flex; align-items: center; gap: var(--sp-10); height: 52px; box-sizing: border-box;
  padding: 0 var(--sp-14); border: 1.5px solid var(--input-border); border-radius: var(--r-12); background: var(--surface);
  transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
.ac-input:hover { border-color: var(--text-3); }
.ac-input > svg { color: var(--text-3); flex-shrink: 0; }
.ac-input input {
  flex-grow: 1; min-width: 0; height: 46px; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 16px; color: var(--text);
}
.ac-input input::placeholder { color: var(--placeholder); }
.ac-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-bg); }
.ac-input input:focus-visible { outline: none; }
.ac-input--pw { padding-right: var(--sp-4); }
.ac-input.is-invalid { border: 2px solid var(--risk); padding-left: 13px; }
.ac-input.is-invalid > svg { color: var(--risk); }
.ac-input.is-invalid:focus-within { box-shadow: 0 0 0 4px var(--risk-bg); }
.ac-input--hard { height: 56px; border: 2px solid var(--text); box-shadow: var(--sh-hard); }
.ac-input--hard input { font-size: 17px; }
.ac-input--hard:hover { border-color: var(--text); }
.ac-input--hard:focus-within { border-color: var(--brand); box-shadow: 0 6px 0 var(--brand); }
.ac-input--hard.is-invalid { border-color: var(--risk); box-shadow: 0 6px 0 var(--risk); padding-left: 14px; }

.ac-eye {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--r-8);
  background: transparent; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color var(--dur-hover) var(--ease-std);
}
.ac-eye:hover { background: var(--surface-2); }
.ac-eye .ac-eye__off, .ac-eye[aria-pressed="true"] .ac-eye__on { display: none; }
.ac-eye[aria-pressed="true"] .ac-eye__off { display: flex; }
.ac-eye__on, .ac-eye__off { display: flex; }
.ac-eye--text { width: auto; min-width: 44px; padding: 0 var(--sp-12); border-radius: var(--r-10); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; }
.ac-eye--text:hover { background: var(--surface-3); }

.ac-hint { font-size: 14px; line-height: 1.45; color: var(--text-3); }
.ac-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--risk); }
.ac-err svg { flex-shrink: 0; margin-top: 2px; }
.ac-err[hidden] { display: none; }
.ac-open { animation: ac-open .24s var(--ease-std) both; }
@keyframes ac-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.ac-meter { display: flex; align-items: center; gap: var(--sp-10); }
.ac-meter[hidden] { display: none; }
.ac-meter__track { flex-grow: 1; height: 6px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.ac-meter__bar { display: block; width: 0; height: 6px; border-radius: 6px; background: var(--warn); transition: width .24s var(--ease-std), background-color .24s var(--ease-std); }
.ac-meter__t { font-size: 14px; font-weight: 600; color: var(--warn-text-2); white-space: nowrap; }
.ac-meter.is-ok .ac-meter__bar { background: var(--brand); }
.ac-meter.is-ok .ac-meter__t { color: var(--brand-text); }
.ac-meter--seg { flex-direction: column; align-items: stretch; gap: var(--sp-8); margin-top: 6px; }
.ac-meter__segs { display: flex; gap: var(--sp-4); }
.ac-meter__segs > span { flex: 1 1 0; height: 6px; border-radius: 6px; background: var(--line); transition: background-color .12s var(--ease-std); }
.ac-meter--seg.is-short .ac-meter__segs > .is-on { background: var(--risk); }
.ac-meter--seg.is-ok .ac-meter__segs > .is-on { background: var(--brand); }
.ac-meter--seg .ac-meter__t { color: var(--text-3); font-weight: 600; }
.ac-meter--seg.is-short .ac-meter__t { color: var(--risk); }

/* --- Сообщения об ошибке и блокировке --------------------------------------- */
.ac-alert {
  display: flex; align-items: flex-start; gap: var(--sp-10); padding: var(--sp-12) var(--sp-14);
  border-radius: var(--r-12); background: var(--risk-bg); border-left: 4px solid var(--risk); color: var(--text);
}
.ac-alert > svg { color: var(--risk); flex-shrink: 0; margin-top: 1px; }
.ac-alert__body { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ac-alert__t { font-size: 15px; font-weight: 600; line-height: 1.45; }
.ac-alert__t b { color: var(--risk); }
.ac-alert__d { font-size: 14px; line-height: 1.45; }
.ac-alert__link, .ac-alert__links a {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  font-size: 15px; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.ac-alert__links { display: flex; gap: var(--sp-16); }
.ac-alert__links a { color: var(--brand-text); font-weight: 600; min-height: 44px; }
.ac-alert--warn { background: var(--warn-bg); border-left-color: var(--warn-text-2); color: var(--warn-text); }
.ac-alert--warn > svg { color: var(--warn-text-2); }
.ac-alert--box { border-left: 0; border: 1px solid var(--risk-border); padding: var(--sp-14) var(--sp-16); }
.ac-alert--box .ac-alert__t { font-weight: 400; }

/* --- Кнопки ----------------------------------------------------------------- */
.ac-submit, .ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); box-sizing: border-box;
  border: 0; border-radius: var(--r-12); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-std);
}
.ac-submit { width: 100%; height: 52px; background: var(--brand); color: var(--on-accent); font-size: 17px; }
.ac-submit--lg { height: 56px; gap: var(--sp-10); }
.ac-submit:hover { background: var(--brand-hover); color: var(--on-accent); }
.ac-submit:active, .ac-btn:active { transform: scale(.98); }
.ac-submit svg { transition: transform var(--dur-hover) var(--ease-std); }
.ac-submit:hover svg { transform: translateX(3px); }
.ac-submit.is-busy, .ac-submit[aria-busy="true"] { cursor: progress; background: var(--brand); gap: var(--sp-10); }
.ac-spin {
  width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; animation: vg-spin .8s linear infinite;
}
.ac-submit[disabled] { background: var(--line); color: var(--text-3); cursor: not-allowed; }
.ac-submit[disabled]:hover svg { transform: none; }
.ac-submit__go, .ac-submit.is-unlocked .ac-submit__lock { display: none; }
.ac-submit.is-unlocked .ac-submit__go, .ac-submit__lock { display: inline-flex; align-items: center; gap: var(--sp-8); }
.ac-submit-wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.ac-submit__cap { font-size: 13px; color: var(--text-3); text-align: center; }
.ac-submit__cap[hidden] { display: none; }

.ac-btn { height: 48px; padding: 0 22px; font-size: 16px; }
.ac-btn--lg { height: 52px; padding: 0 var(--sp-32); font-size: 17px; }
.ac-btn--primary { background: var(--brand); color: var(--on-accent); }
.ac-btn--primary:hover { background: var(--brand-hover); color: var(--on-accent); }
.ac-btn--sec { background: var(--surface); color: var(--text); border: 1px solid var(--line); font-weight: 600; }
.ac-btn--sec:hover { background: var(--surface-2); border-color: var(--line-field); color: var(--text); }
.ac-btn--dark { background: var(--text); color: var(--bg); font-weight: 600; }
.ac-btn--dark:hover { background: var(--dark-hover); color: var(--dark-hover-text); }

.ac-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--brand-text); }
.ac-link:hover { color: var(--link-hover); }
.ac-link--back svg { transition: transform var(--dur-hover) var(--ease-std); }
.ac-link--back:hover svg { transform: translateX(-3px); }
.ac-forgot { display: flex; justify-content: flex-end; margin-top: -8px; font-size: 15px; }
.ac-rule { height: 1px; background: var(--line-soft); }
.ac-alt {
  margin: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  font-size: 15px; color: var(--text-2);
}
.ac-pill {
  display: inline-flex; align-items: center; gap: var(--sp-8); align-self: flex-start; height: 32px; padding: 0 var(--sp-12);
  border-radius: var(--r-32); background: var(--brand-bg); color: var(--brand-text); font-size: 14px; font-weight: 600;
}
.ac-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.ac-privacy {
  margin: 0; display: flex; align-items: flex-start; gap: var(--sp-10); padding: var(--sp-12) var(--sp-14);
  border-radius: var(--r-12); background: var(--surface-quiet); border: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.45; color: var(--text-2);
}
.ac-privacy svg { color: var(--brand-text); flex-shrink: 0; }
.ac-privacy b { color: var(--text); font-weight: 600; }
.ac-nudge { animation: ac-nudge 2.4s var(--ease-std) 1s 2; }
@keyframes ac-nudge { 0%, 60%, 100% { transform: none; } 75% { transform: translateX(2px); } }

/* Вход через Яндекс / VK (хуки .auth-providers, .auth-provider[data-provider], .auth-providers-note) */
.auth-providers { display: flex; flex-direction: column; gap: var(--sp-10); }
.auth-providers__or { margin: 0 0 2px; display: flex; align-items: center; gap: var(--sp-12); font-size: 14px; color: var(--text-3); }
.auth-providers__or::before, .auth-providers__or::after { content: ""; flex-grow: 1; height: 1px; background: var(--line-soft); }
.auth-provider {
  display: flex; align-items: center; gap: var(--sp-10); height: 48px; padding: 0 var(--sp-16); box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-12); background: var(--surface); color: var(--text);
  font-size: 16px; font-weight: 600; transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.auth-provider:hover { background: var(--surface-2); border-color: var(--line-field); color: var(--text); }
.auth-provider > svg { margin-left: auto; color: var(--text-3); }
.auth-provider__mark {
  width: 28px; height: 28px; border-radius: var(--r-8); background: var(--surface-3); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.auth-providers-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.auth-providers-note a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }

/* --- Регистрация --------------------------------------------------------------- */
.su { display: flex; gap: var(--sp-40); align-items: flex-start; }
.su-why { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-24); padding-top: var(--sp-8); }
.su-h1 {
  margin: 0; outline: none; font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.14;
  letter-spacing: var(--ls-h1); color: var(--text);
}
.su-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-20); }
.su-list li { display: flex; gap: var(--sp-16); align-items: flex-start; }
.su-ic {
  width: 48px; height: 48px; border-radius: var(--r-14); background: var(--brand-bg); color: var(--brand-text);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.su-long { font-size: 17px; line-height: 1.5; color: var(--text-2); padding-top: 11px; }
.su-long b { color: var(--text); font-weight: 700; }
.su-short { display: none; }
.su-free {
  margin: 0; padding-top: var(--sp-20); border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; gap: var(--sp-8); font-size: 15px; line-height: 1.45; color: var(--text-3);
}
.su-free svg { flex-shrink: 0; }
.su-free--m { display: none; }
.su-card {
  flex-grow: 1; min-width: 0; display: flex; overflow: hidden;
  border-radius: var(--r-22); border: 2px solid var(--text); background: var(--surface); box-shadow: var(--sh-hard);
}
.su-after {
  width: 330px; flex-shrink: 0; box-sizing: border-box; padding: 36px var(--sp-28);
  background-color: var(--warm-bg); background-image: var(--dots); background-size: var(--dots-size);
  display: flex; flex-direction: column; gap: 22px;
}
.su-after__h { margin: 0; font-size: 13px; font-weight: 700; color: var(--warm-on-bg); letter-spacing: .04em; text-transform: uppercase; }
.su-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.su-steps li { display: flex; gap: var(--sp-12); align-items: flex-start; }
.su-steps li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.su-steps b { font-size: 15px; font-weight: 700; color: var(--text); }
.su-steps b + span { font-size: 14px; line-height: 1.45; color: var(--warm-dark); }
.su-step-ic {
  width: 36px; height: 36px; border-radius: var(--r-12); background: var(--surface); border: 1px solid var(--warm-dots);
  color: var(--warm-big); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box;
}
.su-note {
  margin: 0; display: flex; gap: var(--sp-10); align-items: flex-start; padding: var(--sp-14); border-radius: var(--r-14);
  background: var(--surface); font-size: 14px; line-height: 1.45; color: var(--text-2);
}
.su-note svg { color: var(--brand-text); flex-shrink: 0; }
.su-cat { margin-top: auto; display: flex; justify-content: center; margin-bottom: -36px; }
.su-cat .ac-peek { animation: su-peek .6s var(--ease-out) .5s both; }
@keyframes su-peek { from { transform: translateY(18px); } to { transform: none; } }
.su-form-col { flex-grow: 1; min-width: 0; padding: 36px var(--sp-40) var(--sp-32); display: flex; flex-direction: column; gap: 22px; }
.su-form-col .ac-form { gap: var(--sp-20); }
.su-h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: var(--ls-display); }

.su-nick { gap: 6px; }
.su-nick__btn {
  align-self: flex-start; min-height: 44px; padding: 0 var(--sp-14) 0 var(--sp-10); border-radius: var(--r-10);
  border: 1px dashed var(--field-border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: var(--sp-8); cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-std);
}
.su-nick__btn:hover { border-color: var(--text); }
.su-nick__btn svg { color: var(--brand-text); }
.su-nick__btn span { font-weight: 500; color: var(--text-3); }
.su-nick__box { display: flex; flex-direction: column; gap: var(--sp-8); }
.js .su-nick:not(.is-open) .su-nick__box, .js .su-nick.is-open .su-nick__btn, html:not(.js) .su-nick__btn { display: none; }

.su-consent { display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-14) var(--sp-4) var(--sp-4); border-radius: var(--r-12); background: var(--surface-quiet); border: 1px solid var(--line-soft); }
.su-consent.is-invalid { border-color: var(--risk-border); background: var(--risk-bg); }
.su-consent__row { display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: var(--sp-12); }
.su-cb { display: flex; align-items: flex-start; gap: var(--sp-4); cursor: pointer; }
.su-cb__hit { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.su-cb__hit input { position: absolute; inset: 0; margin: 0; opacity: 0; width: 44px; height: 44px; cursor: pointer; }
.su-cb__box {
  width: 24px; height: 24px; box-sizing: border-box; border-radius: 7px; border: 2px solid var(--text-3); background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: transparent;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.su-cb:hover .su-cb__box { border-color: var(--text); }
.su-cb__hit input:checked + .su-cb__box { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.su-cb__hit input:focus-visible + .su-cb__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.su-consent.is-invalid .su-cb__box { border-color: var(--risk); }
.su-cb__t { padding: 11px 0; font-size: 15px; line-height: 22px; color: var(--text); }
.su-policy {
  margin-left: 48px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600;
  color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.su-consent__err { padding: 0 0 var(--sp-10) 48px; }

/* --- Восстановление пароля ------------------------------------------------------ */
.rs-head { width: 560px; max-width: 100%; margin: 0 auto var(--sp-40); display: flex; flex-direction: column; align-items: center; gap: var(--sp-28); text-align: center; }
.rs-steps { position: relative; width: 480px; max-width: 100%; }
.rs-steps__track { position: absolute; left: 16.66%; right: 16.66%; top: 13px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rs-steps__fill { display: block; height: 100%; background: var(--brand); transform-origin: left center; animation: rs-fill .6s var(--ease-std) .3s both; }
@keyframes rs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rs-steps ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-step { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); min-width: 0; z-index: 1; }
.rs-step__dot {
  width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 2px solid var(--field-border);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-3);
}
.rs-step__l { font-size: 14px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.rs-step.is-current .rs-step__dot { background: var(--brand); border-color: var(--brand); color: #FFFFFF; box-shadow: 0 0 0 4px var(--brand-bg); }
.rs-step.is-current .rs-step__l { font-weight: 700; color: var(--text); }
.rs-step.is-done .rs-step__dot { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.rs-step.is-done .rs-step__l { font-weight: 600; color: var(--brand-on-bg); }
.rs-step.is-bad .rs-step__dot { background: var(--risk); border-color: var(--risk); color: #FFFFFF; }
.rs-step.is-bad .rs-step__l { font-weight: 600; color: var(--risk); }
.rs-titles { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.rs-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.rs-h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.14; letter-spacing: var(--ls-h1); color: var(--text); }
.rs-lead { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

.ac-sheet {
  position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding: var(--sp-32);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-22); box-shadow: var(--sh-float);
  display: flex; flex-direction: column; gap: 18px;
}
.ac-sheet__head { display: flex; align-items: center; gap: var(--sp-14); }
.ac-sheet__titles { display: flex; flex-direction: column; gap: 2px; }
.ac-sheet__titles b { font-size: 17px; font-weight: 700; color: var(--text); }
.ac-sheet__titles span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.rs-key { transform-origin: 8px 15px; animation: rs-key 3s var(--ease-std) 1s 2; }
@keyframes rs-key { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-14deg); } 94% { transform: rotate(8deg); } }
.rs-send { display: flex; }
.ac-submit:hover .rs-send svg { transform: translate(2px, -2px); }
.rs-float { animation: rs-float 3s var(--ease-std) 1s 2; }
@keyframes rs-float { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
.rs-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-10); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.rs-tips li { display: flex; gap: var(--sp-10); align-items: flex-start; }
.rs-tips svg { color: var(--text-3); flex-shrink: 0; }
.rs-actions { display: flex; gap: var(--sp-12); }
.rs-actions .ac-btn { flex: 1 1 0; font-size: 15px; padding: 0 var(--sp-12); }

.rs-new { display: flex; gap: var(--sp-64); align-items: flex-start; justify-content: center; }
.rs-new__form { width: 480px; flex-shrink: 0; gap: var(--sp-24); }
.rs-new__form .ac-input--hard { height: 60px; border-radius: var(--r-14); padding-right: 6px; }
.rs-new__form .ac-input--hard input { font-size: 18px; }
.rs-shake { animation: vg-rise .5s var(--ease-out) .35s both, rs-shake .42s var(--ease-std) .9s both; }
@keyframes rs-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.rs-after {
  width: 440px; flex-shrink: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: var(--sp-32);
  border-radius: var(--r-22); background-color: var(--warm-bg); background-image: var(--dots); background-size: var(--dots-size);
}
.rs-after__h { display: flex; align-items: center; gap: var(--sp-8); font-size: 14px; font-weight: 700; color: var(--warm-on-bg); }
.rs-after__h svg { color: var(--warm-big); }
.rs-after ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-16); }
.rs-after li { display: flex; gap: var(--sp-14); align-items: flex-start; }
.rs-after li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.rs-after b { font-size: 17px; font-weight: 700; color: var(--text); }
.rs-after b + span { font-size: 14px; line-height: 1.45; color: var(--warm-dark); }
.rs-after__ic {
  width: 40px; height: 40px; border-radius: var(--r-12); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--warm-big);
}
.rs-after__ic.is-warm { background: var(--warm-accent); color: #FFFFFF; }

.rs-dead { width: 560px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-20); }
.rs-dead__box {
  display: flex; flex-direction: column; gap: 18px; padding: var(--sp-24); border-radius: var(--r-18);
  background: var(--risk-bg); border: 1px solid var(--risk-border);
}
.rs-dead__box p { margin: 0; display: flex; gap: var(--sp-12); align-items: flex-start; font-size: 17px; line-height: 1.5; color: var(--text); }
.rs-dead__box p svg { color: var(--risk); flex-shrink: 0; margin-top: 2px; }
.rs-dead__box b { color: var(--risk); }
.rs-dead__box .ac-btn { align-self: flex-start; }
.rs-dead__note { margin: 0; display: flex; align-items: center; gap: var(--sp-8); font-size: 14px; line-height: 1.45; color: var(--text-2); }
.rs-dead__note svg { color: var(--text-3); flex-shrink: 0; }

/* --- Страница-сообщение ------------------------------------------------------------ */
.ac--message { padding: 0; }
.am { width: min(1200px, 100%); margin: 0 auto; padding: 96px var(--gutter) 112px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.am-badge {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg); color: var(--brand-text);
}
.am--mail .am-badge { background: var(--warm-bg); color: var(--warm-big); }
.am--wait .am-badge { background: var(--warn-bg); color: var(--warn-text-2); }
.am--bad .am-badge { background: var(--risk-bg); color: var(--risk); }
.am-text { width: 560px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-14); text-align: center; }
.am-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--sp-12); border-radius: 30px; font-size: 14px; font-weight: 600; background: var(--warm-bg); color: var(--warm-on-bg); }
.am--wait .am-pill { background: var(--warn-bg); color: var(--warn-text); }
.am--bad .am-pill { background: var(--risk-bg); color: var(--risk); }
.am-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.14; letter-spacing: var(--ls-h1); color: var(--text); text-wrap: balance; }
.am-p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.am-mail { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.am-hint { margin: 0; max-width: 480px; font-size: 15px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.am-act { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-10); padding-top: var(--sp-8); }
.am-cap { flex-basis: 100%; }
.captcha-box:empty { display: none; }
.am-act form { margin: 0; display: flex; }
.am-btn, .am-btn2 {
  height: 48px; padding: 0 var(--sp-28); box-sizing: border-box; border-radius: var(--r-12); display: inline-flex; align-items: center;
  justify-content: center; gap: var(--sp-10); white-space: nowrap; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-std);
}
.am-btn { background: var(--brand); color: var(--on-accent); border: 0; }
.am-btn:hover { background: var(--brand-hover); color: var(--on-accent); }
.am-btn2 { background: var(--surface); color: var(--text); border: 1px solid var(--line); font-size: 16px; font-weight: 600; padding: 0 22px; }
.am-btn2:hover { border-color: var(--field-border); background: var(--surface-quiet); color: var(--text); }
.am-btn:active, .am-btn2:active { transform: scale(.98); }
.am-arr { transition: transform var(--dur-hover) var(--ease-std); }
.am-btn:hover .am-arr, .am-btn:focus-visible .am-arr { transform: translateX(4px); }
.am-cap { font-size: 14px; line-height: 1.4; color: var(--text-3); text-align: center; }
.am-pop { animation: am-pop .5s var(--ease-out) .1s both; }
@keyframes am-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
.am-ring { stroke-dasharray: 1; animation: am-draw .6s var(--ease-std) .25s both; }
.am-tick { stroke-dasharray: 1; animation: am-draw .4s var(--ease-std) .75s both; }
@keyframes am-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.am-flap { animation: am-flap .6s var(--ease-out) .35s both; }
@keyframes am-flap { 0%, 40% { transform: translateY(-3px); } 70% { transform: translateY(1px); } 100% { transform: none; } }
.am-hand { transform-origin: 12px 12px; animation: am-hand .7s var(--ease-out) .3s both; }
@keyframes am-hand { from { transform: rotate(-120deg); } to { transform: none; } }
.am-shake { animation: am-shake .36s var(--ease-std) .6s both; }
@keyframes am-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.am-rise { animation: vg-rise .5s var(--ease-out) both; }
.am-d1 { animation-delay: .28s; } .am-d2 { animation-delay: .35s; } .am-d3 { animation-delay: .42s; }

/* --- Отписка ---------------------------------------------------------------------- */
.un { display: flex; gap: 60px; align-items: center; }
.un-text { width: 540px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-24); }
.un-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 30px; padding: 0 var(--sp-12); border-radius: 30px;
  background: var(--warm-bg); color: var(--warm-on-bg); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.un-chip--ok { background: var(--brand-bg); color: var(--brand-on-bg); }
.un-titles { display: flex; flex-direction: column; gap: var(--sp-14); }
.un-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.14; letter-spacing: var(--ls-h1); color: var(--text); text-wrap: balance; }
.un-p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.un-p b { color: var(--text); font-weight: 600; }
.un-acts { display: flex; flex-direction: column; gap: var(--sp-14); align-items: flex-start; }
.un-acts form { margin: 0; }
.un-more p, .un-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.un-link { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px; font-size: 15px; font-weight: 600; color: var(--brand-text); }
.un-link:hover { color: var(--link-hover); }
.un-go { transition: transform var(--dur-hover) var(--ease-std); }
.un-link:hover .un-go { transform: translateX(3px); }
.un-all { display: flex; flex-direction: column; gap: 2px; }
.un-ghost {
  height: 44px; padding: 0 var(--sp-10); margin-left: -10px; border: 0; border-radius: var(--r-10); background: transparent;
  color: var(--text-2); font: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-8); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std);
}
.un-ghost:hover { background: var(--surface-2); color: var(--text); }
.un-all__note { font-size: 14px; line-height: 1.45; color: var(--text-3); }
.un-panel {
  flex-grow: 1; min-width: 0; height: 440px; position: relative; overflow: hidden; border-radius: var(--r-32);
  background-color: var(--warm-bg); background-image: var(--dots); background-size: var(--dots-size);
}
.u-panel { animation: un-panel .6s var(--ease-out) .3s both; }
@keyframes un-panel { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.un-cat { position: absolute; left: 40px; bottom: -6px; }
.un-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: ac-blink 4s linear 1.2s infinite both; }
.un-minus { stroke-dasharray: 24; animation: un-minus .35s var(--ease-std) .9s both; }
@keyframes un-minus { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.un-cat-tick { stroke-dasharray: 40; animation: un-minus2 .4s var(--ease-std) .9s both; }
@keyframes un-minus2 { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.un-cat-bell { transform-box: fill-box; transform-origin: 50% 10%; animation: un-ring 1s var(--ease-std) .8s both; }
.un-wave { transform-box: fill-box; transform-origin: 50% 50%; animation: un-wave .7s var(--ease-out) .95s both; }
.un-wave-r { animation-delay: 1.05s; }
@keyframes un-wave { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.un-card {
  position: absolute; top: 40px; right: 36px; width: 300px; box-sizing: border-box; padding: 18px var(--sp-20);
  background: var(--surface); border-radius: var(--r-20); box-shadow: var(--sh-float);
  display: flex; flex-direction: column; gap: var(--sp-12); transform: rotate(2deg);
  animation: un-tilt .6s var(--ease-out) .55s both;
}
@keyframes un-tilt { from { opacity: 0; transform: translateY(14px) rotate(0); } to { opacity: 1; transform: rotate(2deg); } }
.un-card__kind { display: flex; align-items: center; gap: var(--sp-8); font-size: 13px; font-weight: 600; color: var(--text-3); }
.un-card__subj { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.un-card__st { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--sp-12); border-radius: 30px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.un-card__st--on, .un-card__st--back { background: var(--brand-bg); color: var(--brand-on-bg); }
.un-card__st--off { background: var(--surface-3); color: var(--text-2); }
.un-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--trust-good); }
.un-bell { transform-box: fill-box; transform-origin: 50% 10%; animation: un-ring .9s var(--ease-std) .9s both; }
@keyframes un-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } }

.un-dead { width: 560px; max-width: 100%; margin: 0 auto; padding-block: var(--sp-32); display: flex; flex-direction: column; align-items: center; gap: var(--sp-28); text-align: center; }
.un-dead__ic { width: 96px; height: 96px; border-radius: var(--r-24, 24px); display: flex; align-items: center; justify-content: center; background: var(--warm-bg); color: var(--warm-big); }
.un-dead__ic--gone { background: var(--surface-2); color: var(--text-2); }
.un-dead__t { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); }
.un-dead__act { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.un-dead__act p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-3); }

/* --- Как прошла покупка --------------------------------------------------------------- */
.fu { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-40); align-items: start; }
.fu-main { display: flex; flex-direction: column; gap: var(--sp-32); min-width: 0; }
.fu-head { display: flex; flex-direction: column; gap: var(--sp-14); }
.fu-date { margin: 0; display: flex; align-items: center; gap: var(--sp-8); font-size: 15px; font-weight: 600; color: var(--text-3); }
.fu-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.14; letter-spacing: var(--ls-h1); color: var(--text); text-wrap: balance; }
.fu-offer { margin: 0; display: flex; gap: var(--sp-10); align-items: flex-start; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.fu-offer svg { color: var(--brand-text); flex-shrink: 0; margin-top: 3px; }
.fu-form { margin: 0; display: flex; flex-direction: column; gap: var(--sp-28); padding: var(--sp-32); border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface); }
.fu-again { margin: 0; display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-10) var(--sp-14); border-radius: var(--r-12); background: var(--surface-2); font-size: 15px; color: var(--text-2); }
.fu-again--preset { align-items: flex-start; background: var(--brand-bg); color: var(--brand-on-bg); }
.fu-again--preset svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-text); }
.fu-q { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.fu-q__l { padding: 0; margin: 0 0 var(--sp-16); display: flex; align-items: center; gap: var(--sp-12); font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--text); }
.fu-q__ic { width: 40px; height: 40px; border-radius: var(--r-12); background: var(--surface-2); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fu-q__ic--good { background: var(--brand-bg); color: var(--brand-text); }
.fu-code {
  display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: var(--r-8); box-sizing: border-box;
  font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; font-size: 14px;
  background: var(--surface-2); border: 1px dashed var(--field-border); color: var(--text); vertical-align: 2px;
}
.fu-code--warm { background: var(--warm-bg); color: var(--warm-on-bg); border-color: var(--cat); font-size: 16px; }
.fu-segs { display: flex; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-14); background: var(--surface-3); }
.fu-seg {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-10);
  min-height: 52px; padding: 0 var(--sp-12); box-sizing: border-box; border-radius: 11px; background: transparent; border: 2px solid transparent;
  font-weight: 600; font-size: 15px; color: var(--text); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.fu-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fu-seg:not(.is-on):not(:has(input:checked)):hover { background: var(--surface); border-color: var(--line-field); }
.fu-seg:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fu-seg.is-on, .fu-seg:has(input:checked) { background: var(--surface); border-color: var(--text); box-shadow: 0 1px 2px rgba(22,24,29,.08); font-weight: 700; }
.fu-seg__dot {
  width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--field-border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fu-seg__dot--good { color: var(--brand-text); } .fu-seg__dot--bad { color: var(--risk); }
.fu-seg__dot--warn { color: var(--warn-text-2); } .fu-seg__dot--muted { color: var(--text-3); }
.fu-seg.is-on .fu-seg__dot, .fu-seg:has(input:checked) .fu-seg__dot { border: 0; color: #FFFFFF; animation: fu-pop .4s var(--ease-out) both; }
.fu-seg.is-on .fu-seg__dot--good, .fu-seg:has(input:checked) .fu-seg__dot--good { background: var(--brand); }
.fu-seg.is-on .fu-seg__dot--bad, .fu-seg:has(input:checked) .fu-seg__dot--bad { background: var(--risk); }
.fu-seg.is-on .fu-seg__dot--warn, .fu-seg:has(input:checked) .fu-seg__dot--warn { background: var(--warn-strong); }
.fu-seg.is-on .fu-seg__dot--muted, .fu-seg:has(input:checked) .fu-seg__dot--muted { background: var(--text-3); }
@keyframes fu-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.fu-q__why { margin: 0; display: flex; align-items: center; gap: var(--sp-8); font-size: 14px; line-height: 1.45; color: var(--text-3); }
.fu-q__why svg { color: var(--brand-text); flex-shrink: 0; }
.fu-submit { display: flex; align-items: center; gap: var(--sp-24); }
.fu-submit p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.fu-side {
  align-self: stretch; min-height: 560px; position: relative; overflow: hidden; border-radius: var(--r-32);
  background-color: var(--warm-bg); background-image: var(--dots); background-size: var(--dots-size);
}
.fu-side__card {
  position: absolute; top: 26px; left: 26px; right: 26px; padding: var(--sp-20); box-sizing: border-box; border-radius: var(--r-20);
  background: var(--surface); box-shadow: var(--sh-float); display: flex; flex-direction: column; gap: var(--sp-14);
}
.fu-side__h { display: flex; align-items: center; gap: var(--sp-12); }
.fu-side__h h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.fu-side__card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.fu-side__tilt {
  position: absolute; right: 24px; bottom: 286px; width: 220px; padding: var(--sp-14) var(--sp-16); box-sizing: border-box; border-radius: var(--r-18);
  background: var(--surface); box-shadow: var(--sh-float); display: flex; flex-direction: column; gap: 6px; transform: rotate(-2deg);
  animation: fu-tilt .6s var(--ease-out) .42s both;
}
.fu-side__tilt span:first-child { display: flex; align-items: center; gap: var(--sp-8); font-size: 14px; font-weight: 700; }
.fu-side__tilt span:first-child svg { color: var(--warm-big); }
.fu-side__tilt span + span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
@keyframes fu-tilt { from { opacity: 0; transform: translateY(14px) rotate(0); } to { opacity: 1; transform: rotate(-2deg); } }
.fu-cat { position: absolute; left: 50%; bottom: -8px; margin-left: -118px; }

.fu-done { display: flex; flex-direction: column; gap: 36px; }
.fu-done__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-20); }
.fu-done__ic { width: 72px; height: 72px; border-radius: var(--r-22); background: var(--brand-bg); color: var(--brand-text); display: flex; align-items: center; justify-content: center; }
.fu-ring { stroke-dasharray: 54; animation: fu-ring .5s var(--ease-std) .35s both; }
.fu-tick { stroke-dasharray: 14; animation: fu-tick .35s var(--ease-std) .8s both; }
@keyframes fu-ring { from { stroke-dashoffset: 54; } to { stroke-dashoffset: 0; } }
@keyframes fu-tick { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
.fu-done__t { display: flex; flex-direction: column; gap: var(--sp-12); }
.fu-lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.fu-small { margin: 0; display: flex; align-items: center; gap: var(--sp-8); font-size: 14px; color: var(--text-3); }
.fu-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); }
.fu-card {
  display: flex; flex-direction: column; gap: 18px; padding: 26px var(--sp-28); box-sizing: border-box; border-radius: var(--r-20);
  background: var(--surface-2); border: 2px solid var(--surface-2); color: var(--text);
  transition: transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
a.fu-card:hover { transform: translateY(-2px); box-shadow: var(--sh-card-hover); color: var(--text); }
.fu-card--main { background: var(--surface); border-color: var(--brand); }
.fu-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.fu-card__kind { display: flex; align-items: center; gap: var(--sp-10); font-size: 13px; font-weight: 700; color: var(--brand-text); letter-spacing: .06em; text-transform: uppercase; }
.fu-card__kind--muted { color: var(--text-2); }
.fu-card__badge-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.fu-card__badge { height: 30px; padding: 0 var(--sp-10); border-radius: 30px; background: var(--brand-bg); color: var(--brand-on-bg); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fu-card__badge svg { color: var(--brand-text); }
.fu-card__badge--plain { background: var(--surface); color: var(--text-2); }
.fu-plus { opacity: 0; position: absolute; left: 50%; top: -22px; margin-left: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; animation: fu-plus 1.1s var(--ease-std) .9s both; }
@keyframes fu-plus { 0% { opacity: 0; transform: translateY(-14px); } 25% { opacity: 1; transform: translateY(-6px); } 70% { opacity: 1; transform: translateY(12px) scale(.7); } 100% { opacity: 0; transform: translateY(18px) scale(.5); } }
.fu-bump { animation: fu-bump .45s var(--ease-out) 1.65s both; }
@keyframes fu-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.1); } 70% { transform: scale(.97); } }
.fu-card__main { display: flex; flex-direction: column; gap: var(--sp-8); }
.fu-card__title { font-size: 21px; font-weight: 700; line-height: 1.3; }
.fu-card__meta { display: flex; align-items: center; gap: var(--sp-10); font-size: 14px; color: var(--text-2); }
.fu-card__meta .fu-code { height: auto; padding: 2px var(--sp-8); }
.fu-card__p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.fu-card__btn {
  margin-top: auto; height: 48px; border-radius: var(--r-12); background: var(--brand); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-10); font-size: 16px; font-weight: 700;
}
.fu-card__btn--sec { background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 600; }
a.fu-card__btn--sec:hover { border-color: var(--field-border); color: var(--text); }
.fu-card:hover .fu-nudge { animation: fu-nudge .6s var(--ease-std) infinite; }
@keyframes fu-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* ======================================================================
   Промежуточная ширина 768–1199
   ====================================================================== */
@media (max-width: 1199px) {
  .su { flex-direction: column; }
  .su-why { width: auto; max-width: 720px; }
  .su-card { width: 100%; }
  .su-after { width: 300px; }
  .un { gap: var(--sp-32); }
  .un-text { width: auto; flex: 1 1 0; }
  .un-panel { flex: 1 1 0; }
  .un-card { width: 260px; right: 20px; }
  .fu { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-24); }
  .fu-segs { flex-direction: column; }
  .fu-seg { justify-content: flex-start; }
  .rs-new { flex-direction: column; align-items: center; gap: var(--sp-32); }
  .rs-new__form, .rs-after { width: 520px; max-width: 100%; }
}

/* ======================================================================
   Телефон < 768
   ====================================================================== */
@media (max-width: 767px) {
  .ac { padding-block: var(--sp-4) 44px; }
  .ac--signup, .ac--reset { padding-top: var(--sp-20); }
  .ac--unsub, .ac--followup { padding-block: var(--sp-16) var(--sp-40); }

  /* вход: без тёплой сцены, кот — в шапке карточки */
  .ac--login .ac-stage { background: none; padding: 0; border-radius: 0; animation: none; }
  .ac--login .ac-cat { display: none; }
  .ac--login .ac-col { width: 100%; }
  .ac--login .ac-card { animation: ac-card .56s var(--ease-out) both; }
  @keyframes ac-card { from { opacity: 0; transform: translateY(16px); box-shadow: 0 0 0 var(--text); } to { opacity: 1; transform: none; box-shadow: var(--sh-hard); } }
  .ac-card__head {
    position: relative; align-items: flex-end; gap: var(--sp-12); padding: var(--sp-20) 18px 18px; border-bottom: 2px solid var(--text);
    background-color: var(--warm-bg); background-image: var(--dots); background-size: var(--dots-size);
  }
  .ac-card__head .ac-tile { position: absolute; top: var(--sp-20); left: 18px; width: 44px; height: 44px; }
  .ac-card__titles { padding-top: 56px; }
  .ac-card__eyebrow { display: none; }
  .ac-card__h { font-size: 24px; line-height: 1.2; }
  .ac-card__sub { display: block; font-size: 15px; line-height: 1.45; color: var(--warm-dark); }
  .ac-card__cat { display: block; flex-shrink: 0; margin: 0 -8px -18px 0; }
  .ac-card__body { padding: var(--sp-20) 18px var(--sp-16); gap: var(--sp-16); }
  .ac-return { align-self: stretch; align-items: flex-start; border-radius: var(--r-12); padding: var(--sp-10) var(--sp-12); line-height: 1.45; }
  .ac-return svg { margin-top: 2px; }
  .ac--login .ac-intro { display: none; }
  .ac--login .ac-form { gap: var(--sp-16); }
  .ac--login .ac-forgot { order: 10; justify-content: center; margin-top: -4px; }
  .ac--login .ac-rule { display: none; }
  .ac--login .ac-alt { margin-top: -12px; }

  /* регистрация */
  .su { gap: var(--sp-20); }
  .su-why { gap: var(--sp-12); padding-top: 0; }
  .su-h1 { font-size: 28px; line-height: 1.15; }
  .su-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); margin-top: var(--sp-8); }
  .su-list li { flex-direction: column; gap: var(--sp-8); padding: var(--sp-12); border-radius: var(--r-14); background: var(--surface-2); min-width: 0; }
  .su-ic { width: 36px; height: 36px; border-radius: var(--r-12); background: var(--surface); }
  .su-ic svg { width: 20px; height: 20px; }
  .su-long, .su-why .su-free { display: none; }
  .su-free--m { display: flex; border-top: 0; padding-top: 0; font-size: 14px; }
  .su-short { display: flex; flex-direction: column; gap: 2px; }
  .su-short b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
  .su-short span { font-size: 13px; line-height: 1.35; color: var(--text-3); }
  .su-card { flex-direction: column; border: 0; box-shadow: none; border-radius: 0; overflow: visible; gap: var(--sp-20); background: transparent; }
  .su-after { width: auto; padding: var(--sp-12) var(--sp-10); border-radius: var(--r-16); gap: 0; }
  .su-after__h, .su-note, .su-cat, .su-steps b + span { display: none; }
  .su-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .su-steps li { flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
  .su-step-ic { width: 32px; height: 32px; border-radius: var(--r-10); }
  .su-steps b { font-size: 13px; line-height: 1.3; font-weight: 600; }
  .su-form-col { padding: 0; gap: 0; }
  .su-h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .su-policy { margin-left: 48px; }

  /* пароль */
  .rs-head { gap: 22px; margin-bottom: var(--sp-28); }
  .rs-titles { gap: var(--sp-10); }
  .rs-eyebrow { font-size: 13px; }
  .rs-h1 { font-size: 30px; line-height: 1.15; }
  .rs-lead { font-size: 16px; }
  .ac--reset .ac-stage { border-radius: var(--r-24, 24px); padding: var(--sp-16) var(--sp-10) var(--sp-10); }
  .ac--reset .ac-col { width: 100%; gap: 0; }
  .ac--reset .ac-cat { margin-bottom: -26px; }
  .ac--reset .ac-cat .ac-peek { width: 120px; height: 90px; }
  .ac-sheet { padding: var(--sp-20) var(--sp-16); border-radius: var(--r-20); }
  .rs-actions { flex-direction: column; }
  .rs-new__form, .rs-after { width: 100%; }
  .rs-after { padding: var(--sp-20); }

  /* сообщение */
  .ac--message { display: flex; flex-direction: column; }
  .am {
    min-height: calc(100vh - 57px); min-height: calc(100svh - 57px); padding: var(--sp-40) var(--sp-16) calc(24px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between; gap: var(--sp-32);
  }
  .am-badge { width: 80px; height: 80px; margin-top: auto; }
  .am-badge svg { width: 44px; height: 44px; }
  .am-text { gap: var(--sp-12); margin-bottom: auto; }
  .am-h { font-size: 28px; line-height: 1.15; }
  .am-p { font-size: 16px; }
  .am-hint { font-size: 14px; }
  .am-act { align-self: stretch; align-items: stretch; flex-direction: column; flex-wrap: nowrap; }
  .am-act form, .am-btn, .am-btn2 { width: 100%; }
  .am-btn { height: 52px; }

  /* отписка */
  .un { flex-direction: column-reverse; align-items: stretch; gap: var(--sp-24); }
  .un-text { width: auto; gap: var(--sp-20); }
  .un-h { font-size: 30px; line-height: 1.15; }
  .un-p { font-size: 16px; }
  .un-panel { height: 180px; flex: none; border-radius: var(--r-22); }
  .un-cat { width: 128px; height: auto; left: 16px; }
  .un-card { width: 200px; top: 16px; right: 14px; padding: var(--sp-12) var(--sp-14); gap: var(--sp-8); border-radius: var(--r-16); }
  .un-card__subj { font-size: 14px; }
  .un-acts, .un-acts form, .un-acts .ac-btn { align-items: stretch; width: 100%; }
  .un-dead { padding-top: var(--sp-28); }
  .un-dead__ic { width: 80px; height: 80px; }
  .un-dead__act, .un-dead__act .ac-btn { align-self: stretch; width: 100%; }

  /* followup */
  .fu { grid-template-columns: minmax(0, 1fr); }
  .fu-side { display: none; }
  .fu-main { gap: var(--sp-28); }
  .fu-h { font-size: 28px; line-height: 1.15; }
  .fu-offer { font-size: 16px; }
  .fu-form { padding: 0; border: 0; border-radius: 0; gap: var(--sp-28); }
  .fu-q__l { font-size: 18px; margin-bottom: 6px; }
  .fu-q__ic { width: 36px; height: 36px; }
  .fu-segs { flex-direction: column; }
  .fu-seg { justify-content: flex-start; min-height: 52px; }
  .fu-submit {
    position: sticky; bottom: 0; z-index: 10; margin: 0 calc(-1 * var(--sp-16)); padding: var(--sp-12) var(--sp-16) calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(22,24,29,.08); flex-direction: column; align-items: stretch; gap: var(--sp-8);
  }
  .fu-submit .ac-btn { width: 100%; }
  .fu-submit p { text-align: center; }
  .fu-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .fu-card { padding: var(--sp-20); }
  .fu-done { gap: var(--sp-28); }
  .fu-done__ic { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-cat, .ac-blink, .ac-card, .ac-card.is-shake, .su-cat .ac-peek, .rs-key, .rs-float, .rs-shake, .rs-steps__fill,
  .am-pop, .am-ring, .am-tick, .am-flap, .am-hand, .am-shake, .am-rise, .u-panel, .un-card, .un-bell, .fu-tilt, .fu-side__tilt,
  .fu-plus, .fu-bump, .un-blink, .un-minus, .un-cat-tick, .un-cat-bell, .un-wave, .fu-ring, .fu-tick, .fu-seg__dot, .ac-open, .ac-nudge { animation: none !important; }
  .am-ring, .am-tick, .fu-ring, .fu-tick { stroke-dasharray: none; }
  .fu-plus { display: none; }
}