/* Web City: лендинг = экран входа (index.html #welcome). Владелец 22.09: «по кнопке „Тест-драйв“ открывается тот самый прототип,
   лендинг прямо туда, и там человек авторизуется; не надо двух лендингов». Лучшее из прежней страницы сайта testdrive.html перенесено сюда.
   Экраны по одному смыслу (на ≥ 1024 каждый занимает окно под шапкой):
     1. арт Максима в стиле GTA на всё окно (на телефоне портрет сверху), вывеска Web City, HUD, «Бесплатно · было 5 990 ₽», одна Primary «Войти через Telegram»;
     2. «Не уроки, а миссии»: заголовок по центру, под ним широкий кадр (ролик из настоящих кадров приложения);
     3. «Три миссии»: выбор миссии как в игре, слева список, справа кадр выбранной;
     4. «Правила игры»: четыре крупных знака, как HUD;
     5. «Куратор живой»: кадр анкеты слева, текст справа;
     6. вопросы: заголовок слева, пять вопросов справа;
     7. старт: кнопка входа ещё раз по центру, за текстом тихий «фон движа» (field.js).
   Визуал: UI-кит сайта на графите. От GTA только намёки: вывеска, HUD (кулак, жизни, таймер, звёзды розыска), список миссий. Один акцент (лайм) на экран.
   Воздух по ширине: поля --side (24–112 px), контейнер до 1320 px. Движение (landing.js) при prefers-reduced-motion стоит. */

/* 2K: окно шире 1920 — шапка и лендинг масштабируются целиком (--lz ставит landing.js: ширина/1920, но раскладка не ниже 1000 px по высоте),
   как сайт (css/main.css, --z). Единицы окна внутри зума умножаются, поэтому здесь они всегда делятся на --lz */
body:is([data-view="welcome"], [data-view="about"]) :is(.td-nav, .td-welcome) { zoom: var(--lz, 1); }
.td-welcome { --side: clamp(24px, calc(6vw / var(--lz, 1)), 112px); --wrap: 1320px; position: relative; }
.td-wrap { width: min(100% - 2 * var(--side), var(--wrap)); margin-inline: auto; }

/* ---------- Шапка над лендингом: прозрачная на первом экране, после прокрутки графит с размытием ---------- */
body:is([data-view="welcome"], [data-view="about"]) .td-nav { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .3s, border-color .3s; }
body:is([data-view="welcome"], [data-view="about"]) .td-nav.is-solid { background: rgba(11, 11, 12, .86); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body:is([data-view="welcome"], [data-view="about"]) .td-nav__line { display: none; }
/* на первом экране большая вывеска уже есть: в шапке только буква A, вывеска появляется после прокрутки */
body[data-view="welcome"] .td-nav:not(.is-solid) .td-brand__city { opacity: 0; }
.td-brand__city { transition: opacity .3s; }
/* «Войти» в шапке: вторичная, появляется, когда главная кнопка первого экрана ушла из вида. В режиме «Про тест-драйв» — «К миссиям», видна всегда */
.td-nav__login { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(11, 11, 12, .3); color: #fff; font: 600 14.5px/1 var(--font); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: opacity .25s, visibility .25s, background-color .2s, border-color .2s; }
.td-nav__login:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.td-nav__login svg { width: 16px; height: 16px; color: var(--cobalt); }
body[data-view="welcome"] .td-nav:not(.is-cta-off) .td-nav__login { opacity: 0; visibility: hidden; }

/* ================= 1. Первый экран: арт на всё окно, текст слева поверх затемнения, HUD справа сверху ================= */
.td-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: max(620px, calc(100svh / var(--lz, 1))); margin-top: calc(-1 * var(--hdr)); padding: calc(var(--hdr) + 48px) 0 96px; background: #24142C; }
.td-hero__art { position: absolute; inset: 0; z-index: -2; }
.td-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 28%; }
/* затемнение слева под текст и снизу (переход в графит страницы); закат и Максим справа остаются яркими */
.td-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(11, 11, 12, .9) 0%, rgba(11, 11, 12, .76) 28%, rgba(11, 11, 12, .36) 48%, rgba(11, 11, 12, 0) 64%),
  linear-gradient(0deg, #0B0B0C 0%, rgba(11, 11, 12, .6) 12%, rgba(11, 11, 12, 0) 34%),
  linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 16%); }
.td-hero__hud { position: absolute; z-index: 2; flex-direction: row; top: calc((var(--hdr) - 44px) / 2); right: var(--gut); /* HUD в углу экрана, в строке шапки: как в игре, мимо лица на арте */ height: 44px; padding: 0 16px; background: rgba(12, 12, 14, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.td-hero__hud .td-fist { color: rgba(255, 255, 255, .82); }
.td-hero__hud .td-heart { width: 17px; height: 16px; }
.td-hero__hud .td-hud__clock { min-width: 8ch; font-size: 14px; color: rgba(255, 255, 255, .92); }
.td-hero__hud .td-hud__sep { background: rgba(255, 255, 255, .22); }
.td-hero__hud .td-star { stroke: rgba(255, 255, 255, .72); }
.td-hero__copy { width: min(100% - 2 * var(--side), var(--wrap)); margin-inline: auto; display: grid; justify-items: start; }
.td-hero__copy > * { max-width: 620px; }
.td-hero__sign { --s: 2.7; margin: 0 0 30px 4px; }
.td-hero__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.td-free { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--paper-1); color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.td-free i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px rgba(19, 20, 23, .55); }
.td-hero__was { font-size: 15px; color: rgba(255, 255, 255, .62); }
.td-hero__was s { color: rgba(255, 255, 255, .82); text-decoration-thickness: 1.5px; }
.td-hero__title { margin-top: 22px; max-width: 12.5em; font-size: clamp(40px, calc(3.9vw / var(--lz, 1)), 72px); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.td-hero__lead { margin-top: 22px; max-width: 31em; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.td-hero__cta { margin-top: 34px; display: grid; justify-items: start; gap: 14px; }
.td-hero__fine { max-width: 30em; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .62); }
.td-hero__fine b { font-weight: 600; color: #fff; }
.td-login-error { margin-top: 14px; font-size: 14px; line-height: 20px; color: #FF8A85; }
.td-hero__more { position: absolute; left: 50%; bottom: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; transform: translateX(-50%); color: rgba(255, 255, 255, .62); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s; }
.td-hero__more:hover { color: #fff; }
.td-hero__more svg { width: 16px; height: 16px; animation: td-nudge 2.4s ease-in-out infinite; }
@keyframes td-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }

/* ================= Экраны ================= */
.td-sec { position: relative; padding-block: clamp(80px, calc(11vh / var(--lz, 1)), 150px); scroll-margin-top: var(--hdr); }
.td-sec__title { font-size: clamp(36px, calc(3.3vw / var(--lz, 1)), 60px); line-height: 1.06; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.td-sec__text { margin-top: 20px; max-width: 34em; font-size: 18px; line-height: 28px; letter-spacing: -.008em; color: var(--muted-2); text-wrap: pretty; }
.td-sec__text b { font-weight: 600; color: #fff; }
.td-sec__head--center { max-width: 860px; margin-inline: auto; text-align: center; }
.td-sec__head--center .td-sec__text { margin-inline: auto; }
.td-sec a:not([class]) { color: #fff; text-decoration: underline; text-decoration-color: rgba(199, 255, 46, .6); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.td-sec a:not([class]):hover { text-decoration-color: var(--lime); }

/* Кадр приложения: экран 1280×800 целиком; в ролике кадры сменяются затуханием */
.td-shot { position: relative; margin: 0; min-width: 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--canvas); box-shadow: 0 48px 96px -48px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); }
.td-shot__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.td-shot__slide.is-on { opacity: 1; }
.td-shot__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* 2. Не уроки, а миссии: широкий кадр под заголовком, по высоте окна */
.td-sec--game .td-sec__text { max-width: 44em; }
.td-sec--game .td-shot { width: min(100%, 1120px, max(560px, calc((100svh / var(--lz, 1) - var(--hdr) - 400px) * 1.6))); margin: clamp(32px, calc(4.5vh / var(--lz, 1)), 52px) auto 0; }

/* 3. Три миссии: список как в игре (выбранная строка белая, у закрытых замок), справа текст и кадр */
.td-ms { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); column-gap: clamp(48px, calc(6vw / var(--lz, 1)), 120px); align-items: center; }
.td-ms__side { grid-column: 1; grid-row: 1; }
.td-ms__panel { grid-column: 2; grid-row: 1; min-width: 0; }
.td-ms__panel:not([hidden]) { animation: td-ms-in .45s var(--ease) both; }
@keyframes td-ms-in { from { opacity: 0; transform: translateY(8px); } }
.td-ms__list { margin-top: 36px; padding: 6px; border-radius: 16px; background: #0F1012; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.td-ms__tab { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px; border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, .5); text-align: left; cursor: pointer; transition: background-color .25s, color .25s; }
.td-ms__tab + .td-ms__tab { margin-top: 2px; }
.td-ms__tab:hover { background: rgba(255, 255, 255, .05); }
.td-ms__tab[aria-selected="true"] { background: #fff; color: var(--ink-2); }
.td-ms__tab:focus-visible { outline-offset: 2px; }
.td-ms__no { flex: none; width: 24px; font: 500 13px/1 var(--mono); color: inherit; }
.td-ms__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-ms__t b { font-size: 16.5px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .82); }
.td-ms__t small { font-size: 13.5px; line-height: 18px; }
.td-ms__tab[aria-selected="true"] .td-ms__t b { color: var(--ink); }
.td-ms__lock { flex: none; width: 14px; height: 14px; }
.td-ms__lock svg { width: 14px; height: 14px; }
/* сами по очереди: под выбранной строкой тонкая линия отсчёта (landing.js ставит data-auto, пока экран виден и человек не выбрал сам) */
.td-ms[data-auto] .td-ms__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 54px; right: 16px; bottom: 7px; height: 2px; border-radius: 2px; background: rgba(19, 20, 23, .2); transform-origin: 0 50%; animation: td-ms-run 6s linear both; }
@keyframes td-ms-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.td-ms__text { max-width: 40em; font-size: 17px; line-height: 26px; color: var(--muted-2); text-wrap: pretty; }
.td-ms__panel .td-shot { width: min(100%, max(520px, calc((100svh / var(--lz, 1) - var(--hdr) - 290px) * 1.6))); margin-top: 24px; }

/* 4. Правила игры */
.td-rule-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, calc(3vw / var(--lz, 1)), 56px); margin-top: clamp(48px, calc(7vh / var(--lz, 1)), 88px); }
.td-rule { display: grid; align-content: start; gap: 12px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.td-rule__glyph { display: flex; align-items: center; gap: 8px; height: 56px; margin-bottom: 12px; color: #fff; }
.td-rule__glyph--hearts .td-heart { width: 44px; height: 40px; }
.td-rule__glyph--clock { font: 500 44px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.td-rule__glyph--word { gap: 10px; width: max-content; padding: 0 20px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.td-rule__glyph--word svg { width: 20px; height: 20px; margin-right: 6px; color: var(--lime); }
.td-rule__glyph--word i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.td-rule__glyph--caches { color: var(--paper-3); }
.td-rule__glyph--caches svg { width: 48px; height: 40px; }
.td-rule__name { font-size: clamp(22px, calc(1.6vw / var(--lz, 1)), 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.td-rule__text { font-size: 16px; line-height: 24px; color: var(--muted-2); }

/* 5. Куратор: кадр слева, текст справа */
.td-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, calc(6vw / var(--lz, 1)), 120px); align-items: center; }
.td-split--flip .td-shot { order: -1; }
.td-split__copy { max-width: 540px; }

/* 6. Вопросы */
.td-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, calc(6vw / var(--lz, 1)), 120px); align-items: start; }
.td-faq__ask { margin-top: 20px; max-width: 22em; font-size: 16px; line-height: 24px; color: var(--muted-2); }
.td-faq__list { border-top: 1px solid rgba(255, 255, 255, .14); }
.td-faq__item { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.td-faq__item summary { position: relative; display: flex; align-items: center; min-height: 76px; padding: 18px 56px 18px 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; list-style: none; cursor: pointer; }
.td-faq__item summary::-webkit-details-marker { display: none; }
.td-faq__item summary::before, .td-faq__item summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .3s; }
.td-faq__item summary::after { transform: rotate(90deg); }
.td-faq__item[open] summary::after { transform: rotate(0); opacity: 0; }
.td-faq__item summary:hover { color: var(--lime-3); }
.td-faq__item summary:focus-visible { outline-offset: -2px; }
.td-faq__item p { max-width: 38em; padding: 0 56px 24px 0; font-size: 17px; line-height: 27px; color: var(--muted-2); }
.td-faq__item[open] p { animation: td-ms-in .35s var(--ease) both; }

/* 7. Старт: по центру, за текстом «фон движа» (field.js, карточки мимо текста) */
.td-sec--start { overflow: hidden; }
.td-start__field { position: absolute; inset: 0; z-index: 0; }
.td-start { position: relative; z-index: 1; display: grid; justify-items: center; width: min(100% - 2 * var(--side), 760px); text-align: center; }
.td-start__sign { --s: 2.2; margin: 0 0 28px 12px; }
.td-start__title { max-width: 14em; }
.td-start__text { max-width: 30em; }
.td-start__cta { margin-top: 36px; display: grid; justify-items: center; gap: 18px; }
.td-start__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .72); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.td-start__more:hover { color: #fff; text-decoration-color: #fff; }

/* Подвал */
.td-foot { border-top: 1px solid var(--line); padding: 20px 0 28px; font-size: 14px; line-height: 20px; color: var(--muted); }
.td-foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.td-foot__in span { margin-right: auto; }
.td-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted-2); text-decoration: none; }
.td-foot a:hover { color: #fff; }

/* ---------- Компьютер: каждый экран занимает окно под шапкой, следующий снизу не выглядывает ---------- */
@media (min-width: 1024px) {
  .td-sec { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh / var(--lz, 1) - var(--hdr)); }
  .td-sec--game { padding-block: clamp(48px, calc(7vh / var(--lz, 1)), 96px); }
  .td-sec > .td-wrap { width: min(100% - 2 * var(--side), var(--wrap)); }
  .td-sec > .td-start { width: min(100% - 2 * var(--side), 760px); }
}

/* ---------- Невысокое окно ноутбука (1536×730, 1280×720): первый экран целиком помещается, текст плотнее ---------- */
@media (min-width: 1024px) and (max-height: 880px) {
  .td-hero { padding: calc(var(--hdr) + 20px) 0 64px; }
  .td-hero__sign { --s: 2; margin-bottom: 18px; }
  .td-hero__title { margin-top: 16px; font-size: min(clamp(40px, calc(3.9vw / var(--lz, 1)), 72px), calc(7.2vh / var(--lz, 1))); }
  .td-hero__lead { margin-top: 14px; font-size: 17px; line-height: 26px; }
  .td-hero__cta { margin-top: 24px; gap: 10px; }
  .td-hero__more { bottom: 8px; }
}

/* ---------- 1024–1279 ---------- */
@media (max-width: 1279px) {
  .td-hero__copy > * { max-width: 540px; }
  .td-hero__sign { --s: 2.2; margin-bottom: 22px; }
  .td-hero__lead, .td-sec__text { font-size: 17px; line-height: 26px; }
  .td-ms { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); column-gap: 48px; }
  .td-rule-list { gap: 28px; }
  .td-rule { padding-top: 24px; gap: 10px; }
  .td-rule__glyph { height: 44px; margin-bottom: 8px; }
  .td-rule__glyph--hearts .td-heart { width: 34px; height: 31px; }
  .td-rule__glyph--clock { font-size: 34px; }
  .td-rule__glyph--word { padding: 0 14px; gap: 7px; }
  .td-rule__glyph--word i { width: 7px; height: 7px; }
  .td-rule__glyph--caches svg { width: 38px; height: 32px; }
  .td-rule__text { font-size: 15px; line-height: 22px; }
  .td-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
}

/* ---------- Планшет 768–1023: колонки в одну, кадры во всю ширину ---------- */
@media (max-width: 1023px) {
  .td-hero { min-height: max(620px, calc(88svh / var(--lz, 1))); }
  .td-hero::before { background:
    linear-gradient(90deg, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .72) 45%, rgba(11, 11, 12, .2) 75%),
    linear-gradient(0deg, #0B0B0C 0%, rgba(11, 11, 12, 0) 30%); }
  .td-ms, .td-split, .td-faq { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .td-ms__side, .td-ms__panel { grid-column: 1; grid-row: auto; }
  .td-ms__list { margin-top: 28px; }
  .td-ms__panel .td-shot, .td-sec--game .td-shot { width: 100%; }
  .td-split--flip .td-shot { order: 0; }
  .td-split__copy { max-width: 640px; }
  .td-rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

/* ---------- Телефон (< 768): портрет Максима сверху, текст под ним; кадры — снимки телефона в рамке ---------- */
@media (max-width: 767px) {
  .td-welcome { --side: 20px; }
  body[data-view="welcome"] .td-nav:not(.is-solid) .td-brand__city { opacity: 1; }
  .td-nav__login { height: 40px; padding: 0 12px; font-size: 14px; }
  .td-hero { display: block; min-height: 0; padding: 0 0 12px; background: var(--canvas); }
  .td-hero::before { content: none; }
  .td-hero__art { position: relative; inset: auto; z-index: 0; display: block; aspect-ratio: 4 / 4.7; }
  .td-hero__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 12, .5) 0%, rgba(11, 11, 12, 0) 16%, rgba(11, 11, 12, 0) 50%, rgba(11, 11, 12, .75) 80%, #0B0B0C 100%); }
  .td-hero__img { position: absolute; inset: 0; object-position: 50% 18%; }
  .td-hero__hud { top: calc((var(--hdr) - 34px) / 2); right: 12px; gap: 8px; height: 34px; padding: 0 10px; }
  .td-hero__hud .td-fist, .td-hero__hud .td-hud__sep { display: none; }
  .td-hero__hud .td-heart { width: 13px; height: 12px; }
  .td-hero__hud .td-star { width: 12px; height: 12px; }
  .td-hero__hud .td-hud__clock { min-width: 0; font-size: 12px; }
  .td-hero__hud .td-wanted { display: inline-flex; }
  .td-hero__copy { position: relative; z-index: 1; margin-top: -76px; }
  .td-hero__sign { --s: 1.9; margin: 0 0 22px 2px; }
  .td-free { height: 32px; font-size: 14px; padding: 0 14px 0 12px; }
  .td-hero__was { font-size: 14px; }
  .td-hero__title { margin-top: 18px; font-size: 34px; line-height: 1.08; }
  .td-hero__lead { margin-top: 14px; font-size: 16px; line-height: 24px; }
  .td-hero__cta { margin-top: 24px; width: 100%; }
  .td-hero__cta .btn, .td-start__cta .btn { width: 100%; justify-content: space-between; }
  .td-hero__more { display: none; }

  .td-sec { padding-block: 72px; }
  .td-sec + .td-sec { border-top: 1px solid var(--line); }
  .td-sec__title { font-size: 30px; line-height: 1.1; }
  .td-sec__text, .td-ms__text { font-size: 16px; line-height: 24px; }
  .td-sec__text { margin-top: 14px; }
  .td-sec__head--center { text-align: left; }
  .td-sec__head--center .td-sec__text { margin-inline: 0; }
  /* снимок телефона в рамке */
  .td-shot, .td-sec--game .td-shot, .td-ms__panel .td-shot { justify-self: center; width: min(272px, calc(74vw / var(--lz, 1))); margin-inline: auto; aspect-ratio: 780 / 1688; border-radius: 36px; box-shadow: 0 0 0 7px #1B1C20, 0 0 0 8px rgba(255, 255, 255, .12), 0 40px 70px -30px rgba(0, 0, 0, .95); }
  .td-sec--game .td-shot { margin-top: 36px; }
  .td-ms__panel .td-shot { margin-top: 28px; }
  .td-ms__tab { min-height: 64px; padding: 10px 12px; gap: 12px; }
  .td-ms[data-auto] .td-ms__tab[aria-selected="true"]::after { left: 48px; right: 12px; }
  .td-ms__t b { font-size: 15.5px; line-height: 21px; }
  .td-ms__t small { font-size: 13px; }
  .td-split { row-gap: 32px; }

  .td-rule-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .td-rule { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; padding: 20px 0; }
  .td-rule__glyph { grid-row: 1 / span 2; height: auto; margin: 0; gap: 4px; }
  .td-rule__glyph--hearts .td-heart { width: 28px; height: 26px; }
  .td-rule__glyph--clock { font-size: 22px; }
  .td-rule__glyph--word { gap: 5px; height: 40px; padding: 0 12px; border-radius: 11px; }
  .td-rule__glyph--word svg { width: 16px; height: 16px; margin-right: 2px; }
  .td-rule__glyph--word i { width: 6px; height: 6px; }
  .td-rule__glyph--word i:nth-of-type(n + 5) { display: none; }
  .td-rule__glyph--caches svg { width: 30px; height: 26px; }
  .td-rule__name { font-size: 20px; }
  .td-rule__text { font-size: 15px; line-height: 22px; }

  .td-faq { row-gap: 24px; }
  .td-faq__item summary { min-height: 64px; padding: 16px 44px 16px 0; font-size: 17px; line-height: 24px; }
  .td-faq__item summary::before, .td-faq__item summary::after { right: 6px; }
  .td-faq__item p { padding: 0 0 20px; font-size: 15.5px; line-height: 24px; }

  .td-start { text-align: left; justify-items: start; }
  .td-start__sign { --s: 1.8; margin: 0 0 22px 2px; }
  .td-start__cta { width: 100%; justify-items: stretch; margin-top: 28px; }
  .td-start__more { justify-content: center; }
  .td-foot__in { flex-direction: column; align-items: flex-start; gap: 0; }
  .td-foot__in span { margin: 0 0 6px; }
}

/* Касание: строчные ссылки в тексте (куратор, курс) — зона нажатия 44 px без сдвига строки */
@media (pointer: coarse), (max-width: 767px) {
  .td-faq__ask a, .td-faq__item p a, .td-ms__text a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ---------- Меньше движения: кадры не сменяются, миссии не листаются сами, без подъёмов ---------- */
@media (prefers-reduced-motion: reduce) {
  .td-shot__slide, .td-brand__city, .td-nav__login { transition: none; }
  .td-hero__more svg, .td-ms__panel:not([hidden]), .td-faq__item[open] p { animation: none; }
}