/* Nova Play Cafe — базовые и доменные компоненты дизайн-системы (components.md, domain.md),
   все состояния: обычное · наведение (мышь) · нажатие · фокус · неактивное (с причиной) · загрузка · пусто · ошибка · длинный текст.
   Нажатие — --scale-press за --dur-press; наведение — --dur-hover; фокус — base.css. */

/* ============ Кнопки (WW .lp-btn) ============ */
/* главная: hot-pink пилюля, глагол + цена; одна на область */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: var(--control-md); padding: 0 20px; border: 0; border-radius: var(--radius-pill);
  background: var(--brand-strong); color: #fff; font: 800 var(--t-btn-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; /* 16 px белым — только на brand-strong (4.68:1) */
  box-shadow: var(--shadow-pill); transition: var(--t-press), var(--t-hover); -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.pill__l { overflow: hidden; text-overflow: ellipsis; }
.pill--lg { min-height: var(--control-lg); font-size: var(--t-btn-lg); background: var(--brand); } /* 19 px / 800 — крупный текст, brand 3.56:1 допустим */
/* маленькая: белый текст ≤ 18 px только на brand-strong (4.68:1) */
.pill--sm { width: auto; min-height: var(--control-md); padding: 0 22px; font-size: var(--t-btn-md); background: var(--brand-strong); box-shadow: none; }
@media (hover: hover) { .pill:hover:not(:disabled) { background: var(--brand-2); } .pill--lg:hover:not(:disabled) { background: var(--brand-strong); } }
.pill:active:not(:disabled) { transform: scale(var(--scale-press)); background: var(--brand-2); box-shadow: none; }
.pill:disabled { background: var(--pill-disabled); color: var(--plum-meta); box-shadow: none; }
.pill .heart { margin: 0 2px; }
.pill:disabled:not(.is-loading) .heart { display: none; }
.cta-speed:has(.pill:disabled:not(.is-loading)) .speed { visibility: hidden; }
/* загрузка: ширина та же, подпись в DOM, вертушка */
.pill .spin, .ghost .spin { display: none; }
.is-loading .pill__l, .is-loading > .heart { opacity: 0; } /* подпись остаётся для экранного диктора */
.is-loading .spin { display: block; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; }
.pill.is-loading:disabled { background: var(--brand-strong); color: #fff; box-shadow: var(--shadow-pill); }
.pill--lg.is-loading:disabled { background: var(--brand); }
/* «линии скорости» и сердечки — только у главной пилюли первого экрана и итога */
.cta-speed { display: flex; align-items: center; gap: 10px; width: 100%; }
.cta-speed .pill { flex: 1; }

/* вторичная (ghost): белая, кольцо 2 px */
.ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: var(--control-md); padding: 0 18px; border: 0; border-radius: var(--radius-pill);
  background: var(--paper); color: var(--brand-2); font: 800 var(--t-btn-md)/1.15 var(--font-body); text-decoration: none; text-align: center;
  box-shadow: inset 0 0 0 2px var(--ring-pink); transition: var(--t-press), var(--t-hover), box-shadow var(--dur-hover) var(--ease-out);
}
.ghost .ic { width: 20px; height: 20px; }
.ghost--sm { width: auto; min-height: var(--control-sm); font-size: var(--t-btn-sm); padding: 0 16px; }
@media (hover: hover) { .ghost:hover:not(:disabled) { background: var(--pink-2); } }
.ghost:active:not(:disabled) { transform: scale(var(--scale-press)); box-shadow: inset 0 0 0 2px var(--brand-2); background: var(--paper); }
.ghost:disabled { color: var(--ring-mute); box-shadow: inset 0 0 0 2px var(--ring-soft); }
/* опасное: белая + текст err, всегда через подтверждение */
.ghost--danger { color: var(--err); box-shadow: inset 0 0 0 2px var(--err-tint); }
@media (hover: hover) { .ghost--danger:hover:not(:disabled) { background: var(--err-tint); } }
.ghost--danger:active:not(:disabled) { box-shadow: inset 0 0 0 2px var(--err); }
.ghost.is-loading { color: transparent; }
.ghost.is-loading .spin { color: var(--err); }

/* текстовая (escape hatch): raspberry с подчёркиванием, цель 44 */
.txtb { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--control-sm); padding: 0 4px; color: var(--brand-2); font-weight: 700; font-size: var(--t-body); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-align: center; transition: var(--t-hover); }
@media (hover: hover) { .txtb:hover { color: #A8053F; } }
.txtb:active { opacity: .8; }
.txtb:disabled { color: var(--ring-mute); text-decoration: none; }
/* ссылка в тексте */
.link, .lnk { color: var(--brand-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: var(--t-hover); }
.lnk { display: inline; font-size: inherit; line-height: inherit; position: relative; }
.lnk::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) { .link:hover, .lnk:hover { color: #A8053F; } }
.link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--control-sm); }
.link .ic { width: 18px; height: 18px; }
.link--sm { font-size: var(--t-small); }
p .link, li .link, .acc__b .link, .totalcard__note .link, .notice .link, .proof__line .link { display: inline; min-height: 0; position: relative; }
p .link::after, .acc__b .link::after, .totalcard__note .link::after, .notice .link::after, .proof__line .link::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.demo-link { display: inline-flex; align-items: center; min-height: var(--control-sm); font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
@media (hover: hover) { .demo-link:hover { color: var(--ink); } }

/* кнопка-значок: 44, белая/cream */
.icb { display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm); border-radius: 50%; background: var(--cream); color: var(--ink); flex: none; transition: var(--t-press), var(--t-hover); }
.icb .ic { width: 20px; height: 20px; }
.icb--ring { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--pink-2); color: var(--brand-2); }
.icb--pink { background: var(--cream); color: var(--ink); }
@media (hover: hover) { .icb:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--ring-pink); } }
.icb:active:not(:disabled) { transform: scale(.92); background: var(--pink-2); }
.icb:disabled { color: var(--ring-mute); box-shadow: inset 0 0 0 1.5px var(--ring-soft); background: var(--paper); }
.icb-ph { width: var(--control-sm); height: var(--control-sm); flex: none; }

/* ============ Значки статуса (WW .lp-badge): слово + знак ============ */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; vertical-align: middle; }
.badge .ic { width: 15px; height: 15px; }
.badge--ok { background: var(--ok-tint); color: var(--ok); }
.badge--warn { background: var(--warn-tint); color: var(--warn); }
.badge--err { background: var(--err-tint); color: var(--err); }
.badge--gold { background: var(--gold); color: var(--ink); font-weight: 800; }
.badge--mute { background: var(--cream); color: var(--ink-soft); }
.badge--ink { background: var(--ink); color: #fff; }

/* ============ Счётчик − n + (WW .lp-counter): число и итог меняются в тот же кадр ============ */
.ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.ctr { width: var(--control-sm); height: var(--control-sm); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper); color: var(--brand-2); box-shadow: inset 0 0 0 2px var(--ring-pink); flex: none; transition: var(--t-press), var(--t-hover); touch-action: manipulation; }
.ctr .ic { width: 20px; height: 20px; }
.ctr--plus { background: var(--pink-1); box-shadow: none; }
@media (hover: hover) { .ctr:hover:not(:disabled):not([aria-disabled=true]) { box-shadow: inset 0 0 0 2px var(--brand-2); } .ctr--plus:hover:not(:disabled):not([aria-disabled=true]) { background: var(--brand); color: #fff; box-shadow: none; } }
.ctr:active:not(:disabled):not([aria-disabled=true]) { transform: scale(.92); }
.ctr:disabled, .ctr[aria-disabled=true] { color: var(--ring-mute); box-shadow: inset 0 0 0 2px #F3E1EA; background: var(--paper); cursor: not-allowed; }
.ctr[aria-disabled=true]:active { transform: none; }
.val { min-width: 24px; text-align: center; font: 800 var(--t-counter)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.val.zero { color: var(--ink-mute); }

/* строки списка (WW .lp-singles) */
.r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.r:last-child { border-bottom: 0; }
.r__t { min-width: 0; display: grid; gap: 2px; }
.r__t b { font-weight: 700; font-size: 16px; line-height: 22px; }
.r__t > span { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.r__t .r__why { color: var(--brand-2); font-weight: 700; }
.r--box { background: var(--paper); border-radius: var(--radius-row); padding: 12px 12px 12px 16px; border: 0; }

/* ============ Поля (WW checkout) ============ */
.fld { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; }
.fld__l { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ink); }
.fld__l small { font-weight: 500; font-size: 14px; color: var(--ink-soft); }
.fld__hint { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fld input, .fld select, .fld textarea {
  display: block; width: 100%; height: var(--control-md); padding: 0 14px; border: 0; border-radius: var(--radius-input);
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ring-field); font: 500 var(--t-input)/22px var(--font-body); color: var(--ink);
  caret-color: var(--brand-2); -webkit-appearance: none; appearance: none; transition: box-shadow var(--dur-hover) var(--ease-out);
}
.fld textarea { height: auto; min-height: 88px; padding: 14px; resize: vertical; }
.fld input[type=date] { padding-right: 10px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-mute); opacity: 1; }
@media (hover: hover) { .fld input:hover, .fld textarea:hover { box-shadow: inset 0 0 0 1.5px var(--ring-pink); } }
.fld input:focus, .fld textarea:focus { box-shadow: inset 0 0 0 2px var(--brand-2), 0 0 0 2px var(--paper), 0 0 0 4px var(--brand-2); outline: none; }
.fld input:disabled { background: var(--cream); color: var(--ink-mute); box-shadow: none; }
.fld.err input, .fld.err textarea { box-shadow: inset 0 0 0 2px var(--err); }
.fld.err input:focus { box-shadow: inset 0 0 0 2px var(--err), 0 0 0 2px var(--paper), 0 0 0 4px var(--brand-2); }
.ferr { display: flex; gap: 6px; align-items: flex-start; font-style: normal; font-size: 14px; line-height: 20px; color: var(--ink); }
.ferr .ic { width: 16px; height: 16px; color: var(--err); margin-top: 2px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
/* сводка ошибок формы (Form summary) */
.errsum { background: var(--err-tint); border-radius: var(--radius-inset); padding: 10px 12px; margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--ink); }
.errsum b { display: block; color: var(--err); font-weight: 700; }

/* флажок 24, радиус 8; отмечен — brand-2 + белая галочка в тот же кадр */
.choice { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; margin: 12px 0 4px; cursor: pointer; position: relative; }
.choice input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.cb { width: 24px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--ring-mute); background: var(--paper); flex: none; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: var(--t-press); }
.cb .ic { width: 16px; height: 16px; }
.choice input:checked + .cb { background: var(--brand-2); box-shadow: none; color: #fff; }
.choice input:focus-visible + .cb { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice:active .cb { transform: scale(.92); }
@media (hover: hover) { .choice:hover .cb { box-shadow: inset 0 0 0 2px var(--brand-2); } .choice:hover input:checked + .cb { box-shadow: none; } }
.choice.err .cb { box-shadow: inset 0 0 0 2px var(--err); }

/* выбор-карточка (способ оплаты): рамка 2 px всегда, без сдвига */
.paymeth { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.paymeth legend { margin-bottom: 8px; }
.pm { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--control-md); border: 2px solid var(--ring-field); border-radius: var(--radius-row); padding: 8px 12px; background: var(--paper); cursor: pointer; transition: border-color var(--dur-hover) var(--ease-out), var(--t-press); }
.pm input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pm .rd { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ring-mute); flex: none; }
.pm__g { width: 22px; height: 22px; flex: none; color: var(--ink); }
.pm span { display: flex; flex-direction: column; line-height: 1.2; }
.pm b { font-weight: 700; font-size: 16px; }
.pm small { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
@media (hover: hover) { .pm:hover { border-color: var(--ring-pink); } }
.pm:active { transform: scale(var(--scale-press)); }
.pm:has(input:checked) { border-color: var(--brand-2); }
.pm:has(input:checked) .rd { box-shadow: inset 0 0 0 6px var(--brand-2); }
.pm:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* сегменты 2–3 (кол-во детей на празднике) */
.segf legend { margin-bottom: 8px; }
.seg { display: flex; background: var(--pink-2); border-radius: var(--radius-pill); padding: 4px; gap: 2px; margin-bottom: 12px; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: var(--control-sm); border-radius: var(--radius-pill); font-weight: 700; color: var(--ink); font-size: 14px; }
.seg input:checked + span { background: var(--paper); color: var(--brand-2); box-shadow: 0 0 0 1.5px var(--ring-pink); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ============ Список «что входит» — диски галочек ============ */
.incl { display: flex; flex-direction: column; gap: 7px; margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 700; }
.incl li { display: flex; align-items: center; gap: 8px; }
.chk { width: 20px; height: 20px; border-radius: 50%; background: var(--pink-2); color: var(--brand-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chk .ic { width: 11px; height: 11px; stroke-width: 3; }
.incl--lg { font-size: 16px; line-height: 22px; gap: 10px; }
/* «Не входит» — вложенный блок */
.ni { background: var(--cream); border-radius: var(--radius-inset); padding: 10px 12px; margin: 0 0 14px; font-size: 14px; line-height: 20px; }
.ni b { display: block; font-size: 14px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-2); margin-bottom: 2px; }

/* полоска дней недели (move 8): дни плана raspberry, понедельник зачёркнут */
.week { display: flex; gap: 3px; margin: 8px 0 10px; }
.week span { flex: 1 1 0; text-align: center; border-radius: var(--radius-cell); padding: 5px 0 4px; font-size: 12px; line-height: 16px; font-weight: 800; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ring-soft); color: var(--ink-soft); }
.week .on { background: var(--brand-2); color: #fff; box-shadow: none; }
.week .closed { background: var(--closed-fill); color: var(--closed-ink); box-shadow: none; text-decoration: line-through; }

/* ============ Итог (Order summary): табличные цифры, справа ============ */
.sum { display: grid; }
.sum li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.sum li b { font-weight: 700; white-space: nowrap; }
.sum li small { color: var(--ink-soft); }
.sum__t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--divider); margin-top: 6px; padding-top: 12px; font-weight: 800; font-size: 16px; }
.sum__t .disp { font-size: 30px; line-height: 30px; color: var(--ink); letter-spacing: 0; }
.sum__note { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin-top: 6px; }

/* ============ Плашка (Notice): warn / info ============ */
.notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; border-radius: var(--radius-row); padding: 10px 12px; margin: 0 0 12px; font-size: 14px; line-height: 20px; }
.notice p { flex: 1 1 220px; }
.notice--warn { background: var(--warn-tint); }
.notice--warn b { color: var(--warn); }
.notice .link { font-size: 14px; }

/* пустое состояние */
.calempty, .revempty { background: var(--paper); border-radius: var(--radius-row); padding: 16px; text-align: center; }
.calempty b, .revempty b { display: block; font-size: 16px; line-height: 22px; }
.calempty p, .revempty p { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin-top: 4px; }

/* ============ Уведомление ============ */
.toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-toast); width: max-content; max-width: min(92vw, 440px); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 14px 18px; border-radius: var(--radius-row); font-size: 14px; font-weight: 700; line-height: 20px; box-shadow: var(--shadow-toast); }
body.has-bar .toast { bottom: calc(var(--cta-h) + 12px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body.has-bar .toast { bottom: 24px; } }
.toast.in { animation: np-toast-in var(--dur-toast-in) var(--ease-out); }
.toast.out { animation: np-toast-out var(--dur-toast-out) var(--ease-out) forwards; }
@keyframes np-toast-in { from { opacity: 0; transform: translate(-50%, 100%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes np-toast-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 100%); } }

/* ============ Загрузка ============ */
.spin { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: np-spin var(--dur-light) linear infinite; }
.ghost .spin { border-color: rgba(181, 16, 42, .25); border-top-color: var(--err); }
.spin--lg { width: 40px; height: 40px; border-color: var(--pink-2); border-top-color: var(--brand-2); }
@keyframes np-spin { to { transform: rotate(360deg); } }
html[data-motion=reduce] .spin { animation: kb-skeleton var(--dur-skeleton) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .spin { animation: kb-skeleton var(--dur-skeleton) ease-in-out infinite; } }
.sk { background: var(--pink-2); border-radius: var(--radius-cell); animation: kb-skeleton var(--dur-skeleton) ease-in-out infinite; }

/* ============ QR ============ */
.qr { width: var(--qr); height: var(--qr); border-radius: var(--radius-inset); background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 0 0 1.5px var(--pink-2); padding: 5px; }
.qr svg { width: 100%; height: 100%; fill: var(--ink); }
.qr .sk { width: 100%; height: 100%; }
button.qr { cursor: zoom-in; transition: var(--t-press); }
button.qr:active { transform: scale(.92); }
@media (hover: hover) { button.qr:hover { box-shadow: inset 0 0 0 2px var(--ring-pink); } }

/* ============ Вкладки: линия 2 px brand-2, содержимое без анимации ============ */
.tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--pink-2); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { min-height: var(--control-sm); padding: 10px 12px 8px; font-weight: 700; font-size: 16px; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1.5px; white-space: nowrap; transition: border-color var(--dur-tabs) var(--ease-standard), color var(--dur-hover) var(--ease-out); }
@media (hover: hover) { .tabs button:hover { color: var(--ink); } }
.tabs [aria-selected=true] { color: var(--brand-2); border-bottom-color: var(--brand-2); }

/* ============ Вопросы (WW .lp-faq details/summary): + → −, без поворота ============ */
.acc details { background: var(--paper); border-radius: var(--radius-row); padding: 0 16px; margin-bottom: 8px; box-shadow: inset 0 0 0 1.5px var(--pink-2); transition: var(--t-hover); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 52px; padding: 14px 0; font-weight: 700; font-size: 16px; line-height: 22px; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc__g { color: var(--brand-2); flex: none; margin-top: 1px; }
.acc__g .ic:last-child, details[open] .acc__g .ic:first-child { display: none; }
details[open] .acc__g .ic:last-child { display: block; }
@media (hover: hover) { .acc details:hover { box-shadow: inset 0 0 0 1.5px var(--ring-pink); } }
.acc summary:active { background: var(--cream); }
.acc__b { padding: 0 0 14px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }

/* ============ Слои: шторка (телефон) / окно по центру / панель справа ============ */
.ov { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 32px; }
.scrim { position: absolute; inset: 0; background: rgb(var(--scrim-layer) / var(--scrim-modal)); animation: kb-fade-in var(--dur-scrim) var(--ease-out); }
.panel { position: relative; width: 100%; max-width: 520px; max-height: calc(var(--lp-vh) - 64px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--paper); border-radius: var(--radius-modal); padding: 22px 24px 24px; box-shadow: var(--shadow); outline: none; animation: kb-modal-in var(--dur-modal) var(--ease-out); }
.ov--small .panel { max-width: 440px; }
.ov--mid .panel { max-width: 860px; }
.ov--plan .panel { max-width: 720px; }
.ov--co .panel { max-width: 800px; }
.ov--sign .panel { max-width: 960px; }
.ov.out { pointer-events: none; }
.ov.out .scrim { animation: kb-fade-out var(--dur-modal-out) var(--ease-out) forwards; }
.ov.out .panel { animation: kb-modal-out var(--dur-modal-out) var(--ease-out) forwards; }
.ov.noanim .panel, .ov.noanim .scrim { animation: none; }
/* обязательный слой не закрывается: покачивание на --shift-modal + подсказка */
.ov.nudge .panel { animation: np-nudge var(--dur-banner) var(--ease-out); }
@keyframes np-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(calc(var(--shift-modal) * -1)); } 60% { transform: translateX(calc(var(--shift-modal) * .6)); } 85% { transform: translateX(calc(var(--shift-modal) * -.25)); } }
.grab { display: none; }
/* шапка шторки/окна: заголовок + × */
.sh-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.sh-h__t { display: block; font: 800 20px/26px var(--font-body); color: var(--ink); }
.panel > .sh-h__t { margin-bottom: 8px; }

/* панель справа 46 % — читалка на компьютере, затемнение --scrim-light, оплата видна */
.ov--side { justify-content: flex-end; padding: 0; }
.ov--side .scrim { background: rgb(var(--scrim-layer) / var(--scrim-light)); }
.ov--side .panel { width: 46%; max-width: 620px; min-width: 420px; height: 100%; max-height: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; animation: np-side-in var(--dur-sheet) var(--ease-drawer); }
.ov--side.out .panel { animation: np-side-out var(--dur-sheet-out) var(--ease-drawer) forwards; }
.ov--side.out .scrim { animation-duration: var(--dur-sheet-out); }
@keyframes np-side-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes np-side-out { from { transform: none; } to { transform: translateX(100%); } }

/* телефон: шторки снизу */
html.is-sheet .ov { align-items: flex-end; padding: 0; }
html.is-sheet .scrim { background: rgb(var(--scrim-layer) / var(--scrim-sheet)); }
html.is-sheet .panel { width: 100%; min-width: 0; max-width: var(--maxw); height: auto; max-height: calc(var(--lp-vh) * .92); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 6px var(--gutter) calc(16px + env(safe-area-inset-bottom)); animation: kb-sheet-in var(--dur-sheet) var(--ease-drawer); }
html.is-sheet .ov.out .panel { animation: kb-sheet-out var(--dur-sheet-out) var(--ease-drawer) forwards; }
html.is-sheet .ov.out .scrim { animation-duration: var(--dur-sheet-out); }
html.is-sheet .ov.noanim .panel, html.is-sheet .ov.noanim .scrim { animation: none; }
html.is-sheet .ov.nudge .panel { animation: np-nudge-y var(--dur-banner) var(--ease-out); }
@keyframes np-nudge-y { 0%, 100% { transform: none; } 30% { transform: translateX(calc(var(--shift-modal) * -1)); } 65% { transform: translateX(calc(var(--shift-modal) * .6)); } }
html.is-sheet .grab { display: block; position: relative; width: 44px; height: 5px; border-radius: 3px; background: var(--pink-2); margin: 4px auto 12px; cursor: grab; touch-action: none; }
html.is-sheet .grab::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 160px; height: 40px; }
/* окна-подтверждения и подпись на телефоне — окно по центру/во весь экран, не шторка */
html.is-sheet .ov--confirm { align-items: center; padding: 14px; }
html.is-sheet .ov--confirm .panel { border-radius: var(--radius-modal); padding: 18px; animation: kb-modal-in var(--dur-modal) var(--ease-out); }
html.is-sheet .ov--confirm.out .panel { animation: kb-modal-out var(--dur-modal-out) var(--ease-out) forwards; }

/* «меньше движения»: только проявление --dur-reduced, без сдвигов и масштабов */
html[data-motion=reduce] .ov .panel, html[data-motion=reduce].is-sheet .ov .panel { animation: kb-fade-in var(--dur-reduced) linear; }
html[data-motion=reduce] .ov.out .panel, html[data-motion=reduce].is-sheet .ov.out .panel { animation: kb-fade-out var(--dur-reduced) linear forwards; }
html[data-motion=reduce] .ov.noanim .panel { animation: none; }
html[data-motion=reduce] .ov.nudge .panel { animation: none; }
html[data-motion=reduce] .toast.in { animation: kb-fade-in var(--dur-reduced) linear; }
html[data-motion=reduce] .toast.out { animation: kb-fade-out var(--dur-reduced) linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .ov .panel, html.is-sheet .ov .panel { animation: kb-fade-in var(--dur-reduced) linear; }
  .ov.out .panel, html.is-sheet .ov.out .panel { animation: kb-fade-out var(--dur-reduced) linear forwards; }
  .ov.nudge .panel, html.is-sheet .ov.nudge .panel { animation: none; }
  .toast.in { animation: kb-fade-in var(--dur-reduced) linear; } .toast.out { animation: kb-fade-out var(--dur-reduced) linear forwards; }
}

/* общие части окон */
.two { display: grid; gap: 0 28px; }
@media (min-width: 768px) { .two--co, .two--plan, .two--party { grid-template-columns: 1fr 1fr; } }
.paybar { margin-top: 14px; }
html.is-sheet .paybar { position: sticky; bottom: 0; z-index: 3; background: var(--paper); margin: 14px calc(-1 * var(--gutter)) calc(-16px - env(safe-area-inset-bottom)); padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--pink-2); }
.paybar__note { font-size: 14px; color: var(--ink-soft); text-align: center; margin-top: 8px; }
.consent { font-size: 14px; line-height: 20px; color: var(--ink); margin: 0 0 10px; }
.trustline { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.trustline .ic { width: 15px; height: 15px; color: var(--ok); }
.demo-sw { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-sm); font-size: 14px; color: var(--ink-mute); cursor: pointer; }
.demo-sw input { width: 16px; height: 16px; accent-color: var(--ink-soft); margin: 0; }
.stack { display: grid; gap: 10px; }
.done { text-align: center; padding: 8px 0 4px; }
.done__t { font: 800 20px/26px var(--font-body); color: var(--ink); margin-bottom: 6px; }
.done__t:focus { outline: none; }
.done .pill, .done .ghost { margin-top: 16px; }
.okmark { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-tint); color: var(--ok); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.okmark .ic { width: 28px; height: 28px; }
/* самые узкие экраны: «линии скорости» и сердечки уступают место подписи (кнопка не сжимает шрифт) */
@media (max-width: 359.98px) { .cta-speed .speed, .pill--lg .heart { display: none; } .pill { padding: 0 14px; } }