/* TGI — лендинг (index.html). Поверх tokens.css → tgi.css → base.css.
   Композиция как в айдентике: плоские блоки Бумага / Графит / Фиолетовый, огромный знак, обрезанный краем. */

:root { --pad: var(--space-4); --header-h: 68px; }
@media (min-width: 720px) { :root { --pad: var(--space-6); } }

section[id], #try { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
/* Открытое окно блокирует прокрутку; ширину исчезнувшей полосы прокрутки landing.js возвращает отступом — страница не прыгает. */
html.is-dialog-open { overflow: hidden; padding-right: var(--scrollbar-w, 0px); }

/* Пока главная кнопка первого экрана видна, кнопка в шапке — второстепенная: одно фиолетовое действие на экран.
   landing.js ставит .is-past-hero, когда #try ушёл из виду. */
.site-header:not(.is-past-hero) .site-nav .tgi-btn--primary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.site-header:not(.is-past-hero) .site-nav .tgi-btn--primary:hover { background: transparent; border-color: var(--ink); }
/* Цель нажатия ≥44px (§3): кнопка шапки — главное действие вернувшегося («Мой кабинет») и нового («Попробовать»). */
.site-nav [data-header-cta] { min-height: 44px; }
.section-head .t-lead { margin-top: var(--space-1); }
main > .section { padding-block: var(--space-8); }
@media (min-width: 960px) { main > .section { padding-block: var(--space-9); } }

/* ── Первый экран ─────────────────────────────────────────
   Фиолетовая плита уходит за правый край окна; знак внутри неё всегда целиком по высоте
   и обрезан только правым краем окна. Размеры знака — от размеров плиты (container query units),
   поэтому композиция одна и та же от 360 до 2560 px. */
.hero { position: relative; overflow: hidden; overflow: clip; padding-block: var(--space-5) var(--space-6); }
.hero__grid { display: grid; gap: var(--space-7); }
.hero__copy { container-type: inline-size; display: grid; gap: var(--space-5); align-content: center; justify-items: start; }
/* Вернувшийся посетитель: компактная плашка над заголовком со ссылкой в кабинет. */
.hero__back { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); max-width: 100%; padding: 6px 6px 6px 16px; }
.hero__back > svg { flex: none; }
.hero__back-text { flex: 1 1 14em; min-width: 0; padding-block: 5px; font-weight: 500; }
.hero__back-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 12px;
  border-radius: var(--radius-s); color: var(--violet-text); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease;
}
.hero__back-link:hover { background: color-mix(in srgb, var(--violet) 14%, transparent); }
.hero__back-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hero__back-link svg { width: 18px; height: 18px; }
.hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); text-transform: none; letter-spacing: .04em; font-size: 13px; }
.hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--violet); }

.hero__title { display: grid; gap: .22em; color: var(--ink); }
.hero__heavy {
  font: 800 clamp(40px, 12.4vw, 92px)/.9 var(--font-display); letter-spacing: -.045em;
  font-size: clamp(40px, 13.2cqi, 92px);
}
.hero__thin {
  font: 300 clamp(24px, 7vw, 40px)/1.1 var(--font-display); letter-spacing: -.025em;
  font-size: clamp(24px, 7.6cqi, 40px);
}
.hero__lead { max-width: 33em; color: var(--ink-muted); }
.hero__actions { display: grid; gap: var(--space-3); width: 100%; }
.hero__actions .tgi-btn { padding-inline: 20px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font: 500 13px/18px var(--font-sans); letter-spacing: .01em; color: var(--ink-muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 14px; height: 14px; flex: none; color: var(--success); }

/* Телефон: плита, под ней — карточка, заходящая на плиту снизу. Знак — в верхней правой части плиты,
   выше карточки, так что диагональный разрез виден целиком. */
.hero__art { --overlap: 52px; position: relative; display: grid; margin-right: calc(-1 * var(--pad)); }
.hero__slab { position: relative; height: clamp(276px, 82vw, 350px); border-radius: var(--radius-xl) 0 0 var(--radius-xl); container-type: size; }
.hero__slab > .tgi-mark {
  --mh: calc(100cqh - var(--overlap) - 44px);            /* высота знака: сверху 22px, снизу 22px до карточки */
  max-width: none; width: calc(var(--mh) * .981); height: auto;
  top: 22px; left: calc(100cqw - var(--mh) * .981 * .8); right: auto; bottom: auto;   /* правая пятая часть уходит за край окна */
}
/* Карточка продукта — иллюстрация того, что человек получит в кабинете. Не интерактивна. */
.hero-card {
  position: relative; z-index: 1; max-width: 400px; margin: calc(-1 * var(--overlap)) calc(var(--pad) + var(--space-4)) 0 var(--space-4);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-l);
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-raised);
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.hero-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.hero-card__label { font: 700 15px/1.2 var(--font-display); letter-spacing: -.01em; }
.hero-card__link { padding: 4px; }
.hero-card__link .tgi-link__value { display: block; padding: 0 10px; line-height: 38px; font-size: 13px; color: var(--ink-muted); }
.hero-card__note { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
@media (max-width: 439px) { .hero-card__scheme { display: none; } }
@media (max-width: 399px) { .hero-card__link .tgi-btn svg { display: none; } .hero-card__link .tgi-btn { padding-inline: 12px; } }

@media (min-width: 480px) {
  .hero__actions { display: flex; flex-wrap: wrap; width: auto; }
}
/* Планшет: карточка внутри плиты слева снизу, знак — справа, целиком по высоте. */
@media (min-width: 560px) {
  .hero__art { display: block; height: clamp(300px, 50vw, 420px); }
  .hero__slab { position: absolute; inset: 0; height: auto; }
  .hero__slab > .tgi-mark { --mh: 76cqh; top: 12cqh; left: calc(100cqw - var(--mh) * .981 * .8); }
  .hero-card { position: absolute; left: var(--space-6); bottom: var(--space-6); width: min(400px, 60%); margin: 0; padding: var(--space-5); }
}

@media (min-width: 1024px) {
  .hero { padding-block: 0 var(--space-6); }
  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: var(--space-8);
    min-height: clamp(600px, calc(100svh - var(--header-h) - var(--space-6)), 820px);
  }
  .hero__copy { padding-block: var(--space-7) var(--space-8); gap: var(--space-5); }
  .hero__heavy { font-size: clamp(40px, 15.2cqi, 104px); }
  .hero__thin { font-size: clamp(24px, 6.1cqi, 40px); }
  .hero__art {
    height: auto;
    margin-right: calc(-1 * ((100vw - min(100vw, 1264px)) / 2 + var(--pad)));
  }
  /* Плита прилегает к шапке и уходит за правый край окна: открыт только левый нижний угол — скругление знака.
     Знак: 84 % высоты плиты, но не шире плиты; левый край не ближе 56px к краю плиты, правые ~12 % — за краем окна. */
  .hero__slab { border-radius: 0 0 0 clamp(96px, 9vw, 150px); }
  .hero__slab > .tgi-mark {
    --mw: min(82cqh, 100cqw + 16px);
    width: var(--mw); top: 12cqh; left: max(56px, 100cqw - var(--mw) * .88);
  }
  .hero-card { left: calc(-1 * var(--space-7)); right: auto; bottom: var(--space-8); width: min(400px, 78%); }
}

/* ── Как это работает ─────────────────────────────────── */
.how__list { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.how__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-2);
  align-content: start; padding-top: var(--space-5); border-top: 1.5px solid var(--ink);
}
.how__num {
  grid-row: 1 / span 2; min-width: .62em;
  font: 300 72px/.78 var(--font-display); letter-spacing: -.05em; color: var(--violet); font-variant-numeric: tabular-nums;
}
.how__title { font: 700 20px/1.25 var(--font-display); letter-spacing: -.01em; }
.how__text { color: var(--ink-muted); max-width: 30em; }
@media (min-width: 880px) {
  .how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .how__step { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding-top: var(--space-6); }
  .how__num { grid-row: auto; font-size: 128px; margin-bottom: var(--space-4); }
}

/* ── Почему TGI: модульная сетка блоков ───────────────── */
.why__grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.why-block {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-l);
  background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.why-block__icon { width: 28px; height: 28px; color: var(--violet-text); margin-bottom: var(--space-2); }
.why-block__title { font: 700 clamp(20px, 2vw, 24px)/1.22 var(--font-display); letter-spacing: -.015em; }
.why-block__text { color: var(--ink-muted); max-width: 34em; }

.why-block--ink { background: var(--block-ink); color: var(--on-block-ink); box-shadow: none; }
.why-block--ink .why-block__text { color: rgba(245,244,240,.72); }
.why-block--violet { background: var(--violet); color: var(--on-violet); box-shadow: none; }
.why-block--violet .why-block__text { color: var(--on-violet); font-weight: 500; }
.why-block--tint { background: var(--violet-soft); box-shadow: none; }
.why-block--tint .why-block__text { color: var(--ink); }

/* 5 стран: цифра — голос логотипа (800), слово — тонкий (300), бумагой по фиолетовому. */
.why-block__title--big { display: flex; align-items: baseline; gap: .12em; color: var(--paper); font-size: inherit; line-height: .8; }
.why-num { font: 800 clamp(120px, 16vw, 200px)/.78 var(--font-display); letter-spacing: -.06em; }
.why-num__word { font: 300 clamp(40px, 5vw, 64px)/1 var(--font-display); letter-spacing: -.03em; }

.why-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding: var(--space-3) 0 0; list-style: none; }
.why-tags li { padding: 6px 12px; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1px rgba(245,244,240,.32); font: 500 14px/20px var(--font-sans); }

/* Диагональ знака — четыре скошенные черты, как на обложке айдентики. Единственный такой акцент на экране. */
.why-block__slashes { position: absolute; top: var(--space-5); right: var(--space-5); display: flex; gap: 10px; }
.why-block__slashes i { display: block; width: 9px; height: 40px; border-radius: 2px; background: var(--violet); transform: skewX(-36deg); }
.why-block--ink .why-block__title { padding-right: 96px; }

/* Схема маршрута: от устройства две ветки — российские сайты напрямую, остальное через TGI.
   Ветка всегда заканчивается подписью справа от неё; на узком экране ветка короткая, а узел TGI — только знак. */
.route { display: grid; margin-top: auto; padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-m); background: var(--surface-sunken); }
.route__src { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px 8px 10px; border-radius: var(--radius-s); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px/20px var(--font-sans); }
.route__src svg { width: 18px; height: 18px; }
.route__rows { display: grid; margin-left: 19px; }
.route__row {
  --elbow: calc(50% + 1px);
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "track dst";
  align-items: center; gap: var(--space-2); min-height: 68px; padding: var(--space-2) 0 0 18px;
}
/* Ствол и изгиб ветки. Последняя ветка ствол не продолжает. */
.route__row::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: var(--elbow); border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); border-bottom-left-radius: 12px; }
.route__row:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--line-strong); }
.route__track { grid-area: track; display: flex; align-items: center; gap: 6px; min-width: 0; height: 28px; }
.route__line { flex: 1; min-width: 8px; height: 2px; background: var(--line-strong); }
.route__row--tgi .route__line { background: var(--violet); }
.route__row--tgi::before { border-color: var(--violet); }
.route__dst { grid-area: dst; display: grid; gap: 2px; }
.route__dst b { font: 700 14px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.route__dst small { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.route__row--tgi .route__dst small { color: var(--violet-text); font-weight: 600; }
.route__node-text { display: none; }
@media (min-width: 480px) {
  .route__row { grid-template-columns: minmax(120px, 1fr) minmax(0, 13em); gap: var(--space-3); min-height: 72px; padding-top: 0; }
  .route__track { gap: 8px; }
  .route__dst b { font-size: 16px; }
  .route__node-text { display: inline; }
}
.route__node {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 7px; border-radius: var(--radius-s);
  background: var(--violet); color: var(--on-violet); font: 800 12px/1 var(--font-display); letter-spacing: .02em;
}
.route__node .tgi-mark { width: 14px; height: auto; color: var(--on-violet); }
@media (min-width: 480px) { .route__node { padding: 6px 10px 6px 8px; } }

@media (min-width: 720px) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .why-block { padding: var(--space-6); border-radius: var(--radius-xl); }
  .why-block--route, .why-block--tint { grid-column: 1 / -1; }
  .why-block--violet { justify-content: space-between; }
}
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .why-block--route { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .why-block--ink { grid-column: 8 / span 5; grid-row: 1; }
  .why-block--violet { grid-column: 8 / span 5; grid-row: 2; }
  .why-block:nth-child(4) { grid-column: 1 / span 4; }
  .why-block:nth-child(5) { grid-column: 5 / span 4; }
  .why-block--tint { grid-column: 9 / span 4; }
  .why-block--route .why-block__title { font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -.025em; max-width: 11em; }
  .why-block--route .why-block__text { font-size: 18px; line-height: 28px; }
  .route { padding: var(--space-6); }
  .route__row { min-height: 88px; grid-template-columns: minmax(120px, 1fr) minmax(0, 15em); gap: var(--space-4); }
  .route__dst b { font-size: 18px; }
}

/* Тёмная тема: нейтральные блоки — контуром, чтобы графитовый и фиолетовый читались как сплошные плиты. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .why-block:not(.why-block--ink):not(.why-block--violet):not(.why-block--tint),
  :root:not([data-theme="light"]) .route { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  :root:not([data-theme="light"]) .tgi-plan--featured { box-shadow: inset 0 0 0 2px var(--violet), var(--shadow-raised); }
}
:root[data-theme="dark"] .why-block:not(.why-block--ink):not(.why-block--violet):not(.why-block--tint),
:root[data-theme="dark"] .route { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .tgi-plan--featured { box-shadow: inset 0 0 0 2px var(--violet), var(--shadow-raised); }

/* ── Тарифы ───────────────────────────────────────────── */
.plans__grid { display: grid; gap: var(--space-4); }
.plan .tgi-plan__list { margin-bottom: var(--space-2); }
.tgi-plan__per { font-variant-numeric: tabular-nums; }
.plan__badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.plan__best { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tgi-plan--featured .plan__best { color: var(--on-block-ink); box-shadow: inset 0 0 0 1px rgba(245,244,240,.45); }
@media (min-width: 640px) and (max-width: 1079px) {
  .plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); row-gap: var(--space-3); align-items: start; }
  .plan > .tgi-plan__head, .plan > .tgi-plan__price { grid-column: 1; }
  .plan > .tgi-plan__list { grid-column: 2; grid-row: 1; margin: 0; }
  .plan > .tgi-btn { grid-column: 2; grid-row: 2; align-self: end; }
}
@media (min-width: 1080px) {
  .plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}
.plans__trial {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-4); padding: var(--space-5); border-radius: var(--radius-l);
  background: var(--violet-soft); color: var(--ink);
}
.plans__trial strong { font-weight: 700; }
@media (min-width: 720px) { .plans__trial { padding: var(--space-5) var(--space-6); } }

/* ── Вопросы ──────────────────────────────────────────── */
/* Порядок в разметке — заголовок, вопросы, карточка «Остались вопросы?»: фокус идёт так же, как видно глазами. */
.faq__grid { display: grid; gap: var(--space-6); }
.faq__head { margin-bottom: 0; }
.faq__help { display: grid; gap: var(--space-2); max-width: 26em; padding: var(--space-5); border-radius: var(--radius-l); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.faq__help-title { font: 700 17px/1.3 var(--font-display); color: var(--ink); }
.faq__list .tgi-faq__body { padding-right: 0; }
.faq__list .tgi-faq__body a { color: var(--violet-text); }
@media (min-width: 720px) { .faq__list .tgi-faq__body { padding-right: 48px; } }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: var(--space-8); row-gap: var(--space-6); }
  .faq__head { grid-column: 1; grid-row: 1; }
  .faq__list { grid-column: 2; grid-row: 1 / span 2; }
  .faq__help { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

/* ── Итоговый призыв ──────────────────────────────────── */
.final__block {
  position: relative; overflow: hidden; display: grid;
  padding: var(--space-7) var(--space-5) var(--space-9); border-radius: var(--radius-xl);
  background: var(--block-ink); color: var(--on-block-ink);
}
.final__copy { position: relative; z-index: 1; display: grid; gap: var(--space-5); justify-items: start; }
.final__title { display: grid; gap: .12em; font: 800 clamp(36px, 6.4vw, 80px)/.95 var(--font-display); letter-spacing: -.04em; }
.final__title .t-thin { font-size: .66em; letter-spacing: -.025em; }
.final__text { max-width: 30em; color: rgba(245,244,240,.72); }
.final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.final__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-block-ink); font-weight: 600; }
.final__slashes { position: absolute; right: -8px; bottom: -14px; display: flex; gap: 14px; }
.final__slashes i { display: block; width: 22px; height: 96px; border-radius: 4px; background: var(--violet); transform: skewX(-36deg); }
@media (min-width: 720px) {
  .final__block { padding: var(--space-8); }
  .final__copy { max-width: 66%; }
  .final__title { font-size: clamp(36px, 5.4vw, 80px); }
  .final__slashes { right: var(--space-6); bottom: -12px; gap: 18px; }
  .final__slashes i { width: 28px; height: 150px; }
}
@media (min-width: 1100px) {
  .final__slashes { right: var(--space-9); bottom: auto; top: 50%; transform: translateY(-50%); gap: 34px; }
  .final__slashes i { width: 52px; height: 300px; border-radius: 6px; }
}

/* ── Окна: оплата и пробный период ─────────────────────── */
.dlg {
  width: min(560px, calc(100% - 2 * var(--space-4))); max-width: none; max-height: calc(100dvh - 2 * var(--space-4));
  margin: auto; padding: 0; border: 0; border-radius: var(--radius-l);
  background: var(--surface-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-raised);
  overflow: hidden; overscroll-behavior: contain;
}
.dlg[open] { display: flex; flex-direction: column; animation: dlg-in .2s ease-out; }
.dlg::backdrop { background: rgba(11,12,18,.62); }
.dlg--fallback { position: fixed; inset: 0; z-index: 100; box-shadow: 0 0 0 100vmax rgba(11,12,18,.62); }
.dlg__panel {
  display: grid; gap: var(--space-5); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}
/* Окно оплаты: содержимое прокручивается, а кнопка «Оплатить» с ошибкой над ней всегда видна внизу.
   Так же устроен шаг «Сохрани код доступа» (.dlg__step) — кнопка «Перейти к оплате» всегда видна. */
.dlg__form, .dlg__step { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dlg__form > .dlg__panel, .dlg__step > .dlg__panel { flex: 1 1 auto; min-height: 0; padding-bottom: var(--space-4); }
.dlg__foot { flex: none; display: grid; gap: var(--space-3); padding: 0 var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); background: var(--surface-raised); }
.dlg.is-scrollable .dlg__foot { padding-top: var(--space-3); box-shadow: 0 -1px 0 var(--line); }
.dlg__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: calc(-1 * var(--space-2)); }
.dlg__title { font: 800 26px/1.1 var(--font-display); letter-spacing: -.025em; }
.dlg__title:focus { outline: none; }
.dlg__close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px;
  border: 0; border-radius: var(--radius-m); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .16s ease;
}
.dlg__close:hover { background: var(--surface-sunken); }
.dlg__close svg { width: 22px; height: 22px; }
.dlg__legend { margin: 0 0 var(--space-2); padding: 0; font: 600 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.dlg__plans { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.dlg__row .tgi-seg { width: 100%; }
.dlg__mode label { padding-block: 8px; text-align: center; line-height: 1.25; }
.dlg__terms, .dlg__note { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.dlg__note { margin-top: calc(-1 * var(--space-3)); }
.dlg__error:empty { display: none; }
.dlg__error { padding: 12px 16px; border-radius: var(--radius-m); background: var(--danger-soft); color: var(--ink); font: 400 15px/22px var(--font-sans); }
.dlg__error::before { content: "Ошибка. "; font-weight: 700; color: var(--danger); }

/* Строка о приглашении друга — мелко, с линейной иконкой подарка. */
.dlg__ref { display: flex; align-items: flex-start; gap: 10px; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.dlg__ref svg { width: 20px; height: 20px; flex: none; color: var(--violet-text); }
.dlg--buy .dlg__ref { margin-top: calc(-1 * var(--space-2)); }

/* Шаг «Сохрани код доступа»: код — главный элемент, крупно моноширинным, в утопленном поле как у ссылки подписки. */
.code__lead { margin-top: calc(-1 * var(--space-2)); color: var(--ink-muted); font: 400 16px/24px var(--font-sans); }
.code-box {
  display: grid; gap: var(--space-2); justify-items: center;
  padding: var(--space-4) var(--space-4) var(--space-3); border-radius: calc(var(--radius-m) + 6px);
  background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line);
}
.code-box__label { margin: 0; }
.code-box__value {
  width: 100%; min-width: 0; padding: 4px 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font: 700 clamp(22px, 7vw, 30px)/1.2 var(--font-mono); letter-spacing: .06em; text-align: center; font-variant-numeric: tabular-nums;
  -webkit-user-select: all; user-select: all; outline: none;
}
.code-box__value:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.code-box__copy .code-box__ok { display: none; }
.code-box__copy.is-done .code-box__i { display: none; }
.code-box__copy.is-done .code-box__ok { display: block; }
.code__notice b { font-weight: 600; white-space: nowrap; }

/* Выбор тарифа в окне — строка: точка выбора, название, скидка, цена. Выбор — фиолетовое кольцо, фокус — кольцо цвета текста. */
.dlg .pick { background: var(--surface); }
@media (hover: none) { .dlg .pick:hover:not(:has(input:checked)) { box-shadow: inset 0 0 0 1px var(--line); } }
.dlg .pick:has(input:focus-visible) { outline-color: var(--ink); outline-offset: 3px; }
.pick { flex-direction: row; align-items: center; gap: var(--space-3); padding: 14px 16px; border-radius: 18px; }
.pick__dot { width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow .16s ease; }
.pick:has(input:checked) .pick__dot, .pick.tgi-plan--selected .pick__dot { box-shadow: inset 0 0 0 7px var(--violet); }
.pick__main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pick__name { font: 700 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.pick__per { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.pick__badge { flex: none; }
.pick__amount { flex: none; min-width: 4.4em; text-align: right; font: 800 20px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 400px) { .dlg__plans { gap: 6px; } .pick { gap: 10px; padding: 10px 14px; } .pick__amount { font-size: 18px; min-width: 0; } .pick__badge { padding: 3px 7px; } }

/* Пробный период */
.dlg--trial { width: min(440px, calc(100% - 2 * var(--space-4))); }
.trial { display: grid; gap: var(--space-4); }
.trial__bar { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface-sunken); }
.trial__bar span { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; border-radius: 3px; background: var(--violet); transform: skewX(-36deg); animation: trial-run 1.2s cubic-bezier(.5,0,.5,1) infinite; }
.trial:not([data-trial-state="work"]):not([data-trial-state="check"]) .trial__bar { display: none; }
/* Строка об акцепте — там, где из окна можно запустить пробный период. */
.trial:not([data-trial-state="work"]):not([data-trial-state="error"]):not([data-trial-state="cab"]) .trial__terms { display: none; }
.trial__lead { font: 700 20px/1.3 var(--font-display); letter-spacing: -.01em; }
.trial__text { margin-top: var(--space-1); color: var(--ink-muted); }
.trial__text:empty { display: none; }
.trial__actions { display: grid; gap: var(--space-2); }
.trial__actions:empty { display: none; }
/* У кого уже есть подписка или кто уже переходит в кабинет — строка о приглашении не нужна. */
.trial[data-trial-state="has"] .trial__ref, .trial[data-trial-state="done"] .trial__ref { display: none; }
.trial[data-trial-state="error"] .trial__lead, .trial[data-trial-state="used"] .trial__lead { font: 600 17px/1.45 var(--font-sans); letter-spacing: 0; }

@keyframes dlg-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes trial-run { from { left: -30%; } to { left: 110%; } }

@media (max-width: 559px) {
  /* На телефоне окна — во всю ширину, прижаты к низу экрана и прокручиваются. */
  .dlg, .dlg--trial { width: 100%; max-width: 100%; max-height: calc(100dvh - var(--space-3)); margin: auto 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .dlg__panel, .dlg__foot { padding-inline: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .dlg[open] { animation: none; }
  .trial__bar span { left: 0; width: 100%; opacity: .45; transform: none; animation: none; }
}