/* Index - швейцарский типографский индекс. Бумага, графит, одна кобальтовая метка. Токены темы на .app */
.app {
  --bg: #e8e9e4; --ink: #0f100e; --mute: #62655e; --line: #c4c7be; --acc: #2b3ff0;
  --o-bg: var(--bg); --o-fg: var(--ink); --o-mute: var(--mute); --o-line: var(--line);
  --o-acc: var(--acc); --o-accfg: #fff; --o-surf: #dfe0da;
  --f-d: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --f-b: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --f-m: 'Martian Mono', ui-monospace, Menlo, monospace;
  /* сетка: поле, верх/низ, строка шапки, межколонник, колонки - общие для главной, кейса и панели */
  --m: clamp(16px, 2.5cqw, 40px);
  --pt: clamp(14px, 2.4cqh, 24px);
  --pb: var(--pt);
  --hd: 44px;
  /* базовая линия шапки: логотип 21px сидит на pt + 18px; текст 13px/1 догоняет её сдвигом на 7px */
  --hb: 7px;
  --gap: clamp(20px, 3cqw, 56px);
  --cols: minmax(0, 1.18fr) minmax(0, 1fr);
  /* шкала 1.2 от 15px: 10.5 метки, 13 интерфейс, 14-15 текст, 18 лид, 22 акцент; заголовки индекса - от экрана */
  --t-xs: 10.5px; --t-ui: 13px; --t-s: 14px; --t-b: 15px; --t-l: 18px; --t-xl: 22px;
  --t-idx: clamp(28px, min(6.4cqh, 3.8cqw), 84px);
  --trk: -0.045em;
  --e-out: cubic-bezier(.2, .7, .2, 1); --e-io: cubic-bezier(.7, 0, .2, 1);
  --o-rad: 0px; --o-tw: 800; --o-tls: var(--trk); --o-tt: none; --o-ts: normal; --o-tsz: var(--t-idx); --o-tlh: .95;
  background: var(--bg); color: var(--ink); font-family: var(--f-b);
}
html, body { background: #e8e9e4; color: #0f100e; color-scheme: light; }
.app ::selection { background: var(--acc); color: #fff; }
.app button { -webkit-tap-highlight-color: transparent; }

/* моно-метка: один стиль на все подписи, номера и счётчики */
.v1-what, .v1-n, .v1-m, .v1-tag,
.app .d-eyebrow, .app .d-count, .app .d-set-h, .app .d-set-d, .app .d-meta dt, .app .d-story h3, .app .d-block h3,
.app .i-sh, .app .i-k, .app .i-plan-s small, .app .i-plan-p small, .app .i-steps li::before {
  font: 400 var(--t-xs)/1.3 var(--f-m); letter-spacing: .05em; text-transform: uppercase; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* ---------- главная ---------- */
.v1 {
  /* запас под подпись окна (метка, до трёх-четырёх строк, кнопка): нужен, когда окно упирается в высоту - вертикальные ролики */
  --cap: clamp(96px, calc(170px - 5cqw), 120px);
  position: absolute; inset: 0; display: grid;
  grid-template-columns: var(--cols); grid-template-rows: var(--hd) minmax(0, 1fr); column-gap: var(--gap);
  padding: var(--pt) var(--m) var(--pb);
}
.v1-top { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 20px; min-width: 0; }
.v1-logo { font: 800 21px/1 var(--f-d); letter-spacing: var(--trk); white-space: nowrap; }
.v1-logo span { color: var(--acc); }
.v1-what { margin: 0; color: var(--ink); white-space: nowrap; }
.v1-nav { margin-left: auto; display: flex; align-items: baseline; gap: 26px; }
.v1-nav button { padding: 10px 0; margin: -10px 0; font: 600 var(--t-b)/1 var(--f-b); transition: color .15s var(--e-out); }
/* главная кнопка студии: графит, стрелка, кобальт при наведении - тот же объект, что "Open case" */
.app .nav-cta {
  align-self: center; gap: 12px; min-height: 40px; margin: -10px 0; padding: 0 16px; border-radius: 0;
  background: var(--ink); color: var(--bg); font: 600 var(--t-b)/1 var(--f-b);
  transition: background-color .15s var(--e-out), color .15s var(--e-out);
}
.app .nav-cta span { transition: transform .25s var(--e-out); }
/* широкий экран: шапка ложится на сетку - логотип над списком, описание над окном, навигация у правого поля */
@container app (min-width: 1280px) and (orientation: landscape) {
  .v1-top { display: grid; grid-template-columns: subgrid; gap: normal; align-items: baseline; }
  .v1-logo { grid-column: 1; }
  .v1-what { grid-column: 2; grid-row: 1; }
  .v1-nav { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* список: метка чтения стоит на 36% высоты (index.js); высота подобрана так, чтобы эта линия
   совпала с горизонтальной осью окна превью, а видимой осталась только строка сетки */
.v1-listw {
  --nc: 64px;
  --vis: calc(100cqh - var(--pt) - var(--pb) - var(--hd));
  --fade: clamp(40px, 11cqh, 110px);
  position: relative; overflow: hidden; min-height: 0; align-self: start;
  height: calc((var(--vis) - var(--cap)) / .72);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--fade), #000 calc(var(--vis) - var(--fade)), transparent var(--vis));
  mask-image: linear-gradient(transparent, #000 var(--fade), #000 calc(var(--vis) - var(--fade)), transparent var(--vis));
}
/* метка - кобальтовая каретка перед заголовком, ровно в высоту прописной */
.v1-rail {
  position: absolute; z-index: 1; left: calc(var(--nc) - 15px); top: 36%;
  width: 3px; height: calc(var(--t-idx) * .703);
  transform: translateY(calc(-50% - var(--t-idx) * .042));
  background: var(--acc);
}
.v1-list { list-style: none; margin: 0; padding: 0; will-change: transform; }
.v1-row { display: grid; grid-template-columns: var(--nc) minmax(0, 1fr) auto; align-items: baseline; width: 100%; padding: calc(var(--t-idx) * .06) 0; }
.v1-n { line-height: 1; }
.v1-t { font: 800 var(--t-idx)/1 var(--f-d); letter-spacing: var(--trk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .1em; transition: color .2s var(--e-out); }
.v1-m { text-align: right; white-space: nowrap; padding-left: 24px; }
.v1-m i { display: block; font-style: normal; }
.v1-row.is-on .v1-n { color: var(--ink); }
/* строка, которую сейчас показывает окно (наведение или клик), но список до неё ещё не доехал.
   Класс is-shown ставит show() в index.js, а не :hover - строки, проезжающие под неподвижным курсором, не вспыхивают */
.v1-row.is-shown:not(.is-on) { opacity: 1 !important; }
.v1-row.is-shown:not(.is-on) .v1-t { color: var(--acc); }

/* окно превью: левый край - линия колонки, по вертикали центр на оси списка.
   Подпись висит под окном и равна ему по ширине: окно, метка, текст и кнопка - один объект, который меняет формат */
.v1-view { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0; }
.v1-box { position: relative; min-height: 0; margin-bottom: var(--cap); display: grid; place-items: center start; }
.v1-frame { position: relative; background: #000; cursor: pointer; transition: width .75s var(--e-io), height .75s var(--e-io); }
.v1-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--e-out); }
.v1-layer.is-in { opacity: 1; }
/* лёгкий наезд внутри кадра: .mf сама обрезает, окну не нужен overflow */
.v1-layer > img, .v1-layer > video { transform: scale(1.04); transition: transform 1.2s var(--e-out), opacity .35s ease; }
.v1-layer.is-in > img, .v1-layer.is-in > video { transform: none; }
.v1-tag { position: absolute; left: 0; top: calc(100% + 14px); white-space: nowrap; pointer-events: none; }
.v1-cap {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start;
  pointer-events: none; cursor: auto;
}
.v1-line { margin: 0; padding-top: 21px; max-width: 50ch; font-size: var(--t-s); line-height: 1.45; text-wrap: pretty; pointer-events: auto; cursor: pointer; }
.v1-open {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px;
  font: 600 var(--t-ui)/1 var(--f-b); background: var(--ink); color: var(--bg); white-space: nowrap;
  transition: background-color .15s var(--e-out), color .15s var(--e-out);
}
.v1-open span { transition: transform .25s var(--e-out); }
/* наведение только там, где есть мышь: на телефоне после тапа ничего не залипает в кобальте */
@media (hover: hover) {
  /* наведение - только подсказка, что строка кликабельна; превью меняют клик, стрелки и скролл */
  .v1-listw:not(.is-moving) .v1-row:hover { opacity: 1 !important; }
  .v1-listw:not(.is-moving) .v1-row:hover .v1-t, .v1-listw:not(.is-moving) .v1-row:hover .v1-n { color: var(--acc); }
  .v1-nav button:hover { color: var(--acc); }
  .app .nav-cta:hover { filter: none; background: var(--acc); color: #fff; }
  .app .nav-cta:hover span { transform: translateX(3px); }
  .v1-open:hover, .v1-frame:has(.v1-layer:hover, .v1-line:hover) .v1-open { background: var(--acc); color: #fff; }
  .v1-open:hover span, .v1-frame:has(.v1-layer:hover, .v1-line:hover) .v1-open span { transform: translateX(3px); }
}

/* места в сетке заданы явно: шоурил лежит поверх списка и окна, а не выталкивает их в новую строку */
.v1-listw { grid-row: 2; grid-column: 1; }
.v1-view { grid-row: 2; grid-column: 2; }

/* ---------- первый экран: шоурил ---------- */
.v1-intro {
  --ip: 0;
  grid-row: 2 / -1; grid-column: 1 / -1; position: relative; z-index: 6; overflow: hidden;
  background: #0f100e; color: #fff;
  clip-path: inset(0 0 calc(var(--ip) * 100%) 0);
}
.v1-intro.is-off { visibility: hidden; }
.v1-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transform: translateY(calc(var(--ip) * -8%)); }
.v1-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,9,.72), rgba(10,11,9,.18) 55%, transparent), linear-gradient(0deg, rgba(10,11,9,.55), transparent 45%); pointer-events: none; }
.v1-intro-c {
  position: absolute; z-index: 1; left: clamp(20px, 3cqw, 48px); right: clamp(20px, 3cqw, 48px); bottom: clamp(20px, 4cqh, 48px);
  display: grid; gap: 18px; justify-items: start; opacity: calc(1 - var(--ip) * 2.2);
}
.v1-intro-h { margin: 0; font: 800 clamp(44px, min(10cqh, 7cqw), 132px)/.9 var(--f-d); letter-spacing: -.05em; text-wrap: balance; }
.v1-intro-p { margin: 0; max-width: 46ch; font-size: var(--t-b); line-height: 1.45; color: rgba(255,255,255,.84); text-wrap: pretty; }
.v1-intro-b { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.v1-intro .nav-cta { margin: 0; min-height: 48px; padding: 0 20px; background: #fff; color: var(--ink); }
.v1-intro-go { font: 600 var(--t-b)/1 var(--f-b); color: #fff; padding: 12px 0; }
.v1-intro-go span { display: inline-block; margin-left: 6px; transition: transform .25s var(--e-out); }
@media (hover: hover) {
  .v1-intro .nav-cta:hover { background: var(--acc); color: #fff; }
  .v1-intro-go:hover span { transform: translateY(3px); }
}

@container app (max-width: 1600px) {
  .v1-m { display: none; }
  .v1-row { grid-template-columns: var(--nc) minmax(0, 1fr); }
}

/* телефон и портретный планшет: шапка в две строки (кто и что - сразу), список сверху, под ним окно с подписью;
   окно по центру своей зоны, как на десктопе: у 16:9 воздух делится поровну, а не копится одной дырой */
@container app (max-width: 760px) or (orientation: portrait) {
  .v1 {
    --cap: 122px;
    --t-idx: clamp(24px, 7.2cqw, 40px);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, .44fr) minmax(0, 1fr); row-gap: 10px;
  }
  .v1-top { flex-wrap: wrap; row-gap: 8px; }
  /* телефон: в шапке логотип, Info (вся панель) и главная кнопка - в одну строку */
  .v1-nav [data-info="studio"]:not(.nav-more), .v1-nav [data-info="pricing"] { display: none; }
  .v1-nav .nav-more { display: inline-block; }
  .v1-listw { grid-row: 2; grid-column: 1; }
  .v1-view { grid-row: 3; grid-column: 1; }
  .v1-nav { gap: 16px; }
  .v1-nav button { font-size: var(--t-ui); }
  .app .nav-cta { min-height: 36px; padding: 0 12px; font-size: var(--t-ui); }
  .v1-intro-c { gap: 14px; }
  .v1-what { order: 3; flex-basis: 100%; }
  .v1-listw {
    --nc: 38px;
    height: auto; align-self: stretch;
    -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  }
  .v1-rail { left: calc(var(--nc) - 11px); width: 2px; }
  .v1-row { grid-template-columns: var(--nc) minmax(0, 1fr); }
  .v1-m { display: none; }
  .v1-tag { top: calc(100% + 12px + 15px); }
  /* на телефоне подпись во всю ширину: кнопка всегда у правого поля, под большим пальцем, и не налезает на метку у узкого 9:16 */
  .v1-cap { top: calc(100% + 12px); right: auto; width: calc(100cqw - 2 * var(--m)); }
  .v1-line { grid-row: 2; grid-column: 1 / -1; padding-top: 12px; font-size: var(--t-ui); }
  .v1-open { grid-row: 1; grid-column: 2; }
}
/* низкий телефон: описание уступает место ролику */
@container app (max-width: 760px) and (max-height: 700px) {
  .v1 { --cap: 58px; grid-template-rows: auto minmax(0, .36fr) minmax(0, 1fr); }
  .v1-line { display: none; }
}

/* ---------- страница кейса: один экран, CTA всегда внизу ---------- */
.app .detail { font-size: var(--t-b); line-height: 1.55; }
.app .d-in {
  --dpad: var(--m); --cta: 88px; --sp: clamp(84px, 12cqh, 132px);
  /* высота ролика считается здесь, чтобы ширину колонки для вертикального ролика можно было вывести из неё */
  --hh: calc(100cqh - var(--pt) - var(--hd) - var(--cta) - 24px);
  padding: 0 var(--m);
}
.app .d-top {
  height: calc(var(--pt) + var(--hd)); padding-block: calc(var(--pt) + var(--hb)) 0; align-items: baseline; gap: 20px;
  background: var(--bg);
}
.app .d-back {
  padding: 12px 0; margin: -12px 0; border: 0; border-radius: 0;
  font: 600 var(--t-b)/1 var(--f-b); letter-spacing: 0; text-transform: none; transition: color .15s var(--e-out);
}
.app .d-back span { display: inline-block; margin-right: 4px; transition: transform .25s var(--e-out); }
.app .d-back:hover { background: none; color: var(--acc); }
.app .d-back:hover span { transform: translateX(-3px); }
.app .d-count { margin-left: auto; line-height: 1; }
@container app (min-width: 1280px) {
  /* та же сетка, что на главной: счётчик на линии текстовой колонки */
  .app .d-top { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); }
  .app .d-back { grid-column: 1; justify-self: start; }
  .app .d-count { grid-column: 2; grid-row: 1; margin: 0; justify-self: start; }
  .app .d-pn { grid-column: 2; grid-row: 1; justify-self: end; }
}
.app .d-pn { gap: 0; margin: -16px -10px -16px 0; }
/* стрелки крупнее текста, поэтому коробка поднята: базовая линия шапки не должна съезжать */
.app .d-pn button { display: block; width: 40px; height: auto; padding: 12px 0; text-align: center; border: 0; border-radius: 0; font: 600 17px/1 var(--f-b); transition: color .15s var(--e-out); }
.app .d-pn button:hover { background: none; color: var(--acc); }

.app .d-grid { grid-template-columns: var(--cols); gap: var(--gap); padding-bottom: 24px; }
.app .d-media { top: calc(var(--pt) + var(--hd)); gap: 22px; }
/* ролик занимает всю высоту между шапкой и CTA */
.app .d-hero { --hh: inherit; margin-inline: 0; }
@container app (min-width: 821px) {
  /* полоска фильмов: подпись 11 + 12, кадр, 10 + имя 16 + 4 + метка 14, прокрутка 10 */
  .app .d-in:has(.d-set) { --hh: calc(100cqh - var(--pt) - var(--hd) - var(--cta) - 24px - 22px - var(--sp) - 82px); }
  /* вертикальный ролик: колонка ровно в ширину ролика, текст забирает остальное, пустоты между ними нет */
  .app .d-in.is-tall { --sp: clamp(72px, 9.5cqh, 104px); --tw: min(calc(var(--hh) * var(--ar)), 46cqw); }
  .app .d-in.is-tall .d-grid { grid-template-columns: var(--tw) minmax(0, 1fr); }
  .app .d-in.is-tall .d-hero { width: var(--tw); }
  .app .d-in.is-tall .d-set-row { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
}
@container app (min-width: 1280px) {
  /* счётчик и стрелки встают на линию текста; CTA - вопрос слева, кнопки справа */
  .app .d-in.is-tall .d-top { grid-template-columns: var(--tw) minmax(0, 1fr); }
  .app .d-in.is-tall .d-cta { display: flex; }
}

.app .d-text { gap: 24px; }
.app .d-head { gap: 0; }
.app .d-eyebrow { margin: -3px 0 14px; } /* прописные моно встают на верхний край ролика */
.app .d-title { margin-bottom: 14px; }
.app .d-lede { font-size: var(--t-l); line-height: 1.42; max-width: 34em; }

/* мета одной строкой, подпись над значением, без лишних линеек */
.app .d-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.app .d-meta > div { padding: 11px 12px 11px 0; gap: 6px; border: 0; }
.app .d-meta dd { font-size: var(--t-s); font-weight: 600; line-height: 1.3; font-variant-numeric: normal; }
/* история - три колонки одной высоты строки, читается без прокрутки */
.app .d-story { gap: 20px; }
.app .d-story section { gap: 8px; }
.app .d-story h3 { margin: 0; }
.app .d-story p { font-size: 13.5px; line-height: 1.5; max-width: 36em; }
.app .d-text { --lab: clamp(84px, 7.5cqw, 112px); }
.app .d-facts { border-top: 0; }
.app .d-facts > div { grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: 20px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.app .d-facts > div:first-child { border-top: 1px solid var(--line); }
.app .d-facts dd { font-size: var(--t-s); line-height: 1.45; }

/* CTA-плашка во всю ширину: вопрос слева, действия справа */
.app .d-cta { background: var(--bg); border-top: 1px solid var(--ink); gap: 12px 28px; }
.app .d-cta-q { font: 800 var(--t-xl)/1.15 var(--f-d); letter-spacing: -.025em; text-transform: none; }
.app .d-cta-s { color: var(--mute); font-size: var(--t-ui); }
.app .d-cta-b { gap: 22px; }
.app .d-btn {
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 0; background: var(--ink); color: var(--bg);
  font: 600 var(--t-b)/1 var(--f-b); transition: background-color .15s var(--e-out), color .15s var(--e-out);
}
.app .d-btn:hover { filter: none; background: var(--acc); color: #fff; }
/* главная кнопка устроена как "Open case": графит, стрелка, кобальт при наведении */
.app .d-btn:not(.d-btn-g) { gap: 12px; }
.app .d-btn:not(.d-btn-g)::after { content: "\2192"; transition: transform .25s var(--e-out); }
.app .d-btn:not(.d-btn-g):hover::after { transform: translateX(3px); }
.app .d-btn-g { min-height: 0; padding: 12px 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line); }
.app .d-btn-g:hover { background: none; color: var(--acc); text-decoration-color: currentColor; }
@container app (min-width: 1280px) {
  /* CTA на сетке: вопрос над роликом, кнопки в правой колонке */
  .app .d-cta { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); }
}

/* полоска фильмов: без рамок, выбранный отмечен кобальтовой чертой - той же меткой, что на главной */
.app .d-set-h { margin: 0 0 12px; }
.app .d-set-row { gap: 12px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.app .d-set-it { gap: 0; text-align: left; }
.app .d-set-it .mf { height: var(--sp); margin-bottom: 10px; border-radius: 0; outline: 0; }
.app .d-set-it .mf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--e-out); }
.app .d-set-it.is-on .mf { outline: 0; }
.app .d-set-it.is-on .mf::after { transform: none; }
.app .d-set-l { font: 600 var(--t-ui)/1.2 var(--f-b); }
.app .d-set-it.is-on .d-set-l { color: var(--ink); }
.app .d-set-d { margin-top: 4px; }

@container app (max-width: 1100px) {
  .app .d-story p { font-size: var(--t-s); }
}
@container app (max-width: 820px) {
  .app .d-grid { grid-template-columns: minmax(0, 1fr); }
  .app .d-media { position: static; }
  .app .d-hero { --hh: 64cqh; }
  .app .d-lede { font-size: 17px; }
  .app .d-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app .d-meta > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@container app (max-width: 600px) {
  /* CTA-плашка в одну строку: вопрос слева, кнопка справа */
  .app .d-in { --cta: 68px; }
  .app .d-cta { flex-wrap: nowrap; gap: 14px; }
  .app .d-cta-q { font-size: 15px; line-height: 1.2; }
  .app .d-cta .d-btn { min-height: 44px; padding: 0 14px; white-space: nowrap; }
  .app .d-text { gap: 28px; }
  .app .d-title { font-size: clamp(32px, 9cqw, 44px); }
  .app .d-facts > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .app .d-cta { padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .app .d-cta-b .d-btn-g { display: none; }
  .app .i-foot { flex-wrap: nowrap; gap: 14px; }
  .app .i-foot-q, .app .i-foot-l { display: none; }
  .app .i-foot .d-btn { flex: 1; white-space: nowrap; }
}

/* ---------- плеер: акцент тот же кобальт, без теней ---------- */
.app .pl { --pl-acc: var(--acc); --pl-accfg: #fff; --pl-fg: #f4f4f0; --pl-r: 0px; }
.app .pl-pill { box-shadow: none; padding: 12px 15px 12px 13px; font-size: 11px; letter-spacing: .07em; }
.app .pl-tip { background: rgba(15, 16, 14, .9); }
@media (hover: hover) {
  .app .pl:not(.is-sound):hover .pl-pill { transform: none; }
  .app .pl-pill:hover { background: #fff; color: var(--ink); }
}

/* ---------- инфо-панель ---------- */
.app .i-back { background: rgba(15, 16, 14, .34); }
.app .i-panel { border-left: 0; font-size: var(--t-b); --k: 188px; }
/* панель ровно накрывает правую колонку сетки: её текст встаёт на ту же вертикаль, что окно превью и текст кейса */
@container app (min-width: 761px) and (orientation: landscape) {
  .app .i-panel { width: max(calc((100cqw - 2 * var(--m) - var(--gap)) / 2.18 + 2 * var(--m)), min(900px, 58cqw)); }
}
.app .i-top { height: calc(var(--pt) + var(--hd)); padding: calc(var(--pt) + var(--hb)) var(--m) 0; align-items: baseline; gap: 24px; border-bottom: 1px solid var(--line); }
.app .i-tabs { gap: 26px; }
.app .i-tabs button, .app .i-close {
  padding: 12px 0; margin: -12px 0; border: 0; border-radius: 0; background: none;
  font: 600 var(--t-b)/1 var(--f-b); letter-spacing: 0; text-transform: none; color: var(--mute);
  transition: color .15s var(--e-out);
}
.app .i-tabs button:hover { color: var(--ink); }
.app .i-tabs button[aria-selected="true"] { background: none; color: var(--ink); text-decoration: underline 2px var(--acc); text-underline-offset: 8px; }
.app .i-close { margin-left: auto; color: var(--ink); }
.app .i-close:hover { background: none; color: var(--acc); }
.app .i-body { padding: 28px var(--m) 22px; }
.app .i-pane { gap: 20px; }
.app .i-h { font-size: clamp(32px, 3.6cqw, 52px); line-height: .95; }
.app .i-lede { font-size: var(--t-l); line-height: 1.45; max-width: 32em; margin-bottom: 12px; }
.app .i-sh { margin: 18px 0 -4px; }
/* две колонки на вкладке Studio */
.app .i-cols { gap: 0 32px; margin-top: 4px; }
.app .i-cols > div { gap: 14px; }
.app .i-cols .i-sh { margin: 6px 0 -2px; }
.app .i-cols .i-crew > div { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 6px 0; }
.app .i-cols .i-crew dd { font-size: 13px; line-height: 1.4; }
.app .i-cols .i-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 1px 0; padding: 6px 0; }
.app .i-cols .i-steps li::before { grid-row: span 2; }
.app .i-cols .i-steps b, .app .i-cols .i-steps span { grid-column: 2; }
.app .i-cols .i-steps span { font-size: 13px; line-height: 1.4; }
.app .i-cols .i-svc { grid-template-columns: minmax(0, 1fr); gap: 4px; }
/* у каждого тарифа своя кнопка: увидел цену - сразу написал */
.app .i-plan-go { margin-top: 6px; font: 600 var(--t-ui)/1 var(--f-b); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line); }
.app .i-plan.is-hot .i-plan-go { text-decoration-color: var(--acc); }
.app .i-plan-go:hover { color: var(--acc); text-decoration-color: currentColor; }
/* футер панели: вопрос и главная кнопка на любой вкладке */
.app .i-foot { padding: 16px var(--m) calc(16px + env(safe-area-inset-bottom, 0px)); gap: 12px 24px; border-top: 1px solid var(--ink); background: var(--bg); }
.app .i-foot-q { font: 800 var(--t-xl)/1.15 var(--f-d); letter-spacing: -.025em; text-transform: none; }
.app .i-foot .d-btn { min-height: 48px; }
.app .i-foot-l { font-size: var(--t-ui); color: var(--mute); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line); }
.app .i-foot-l:hover { color: var(--acc); text-decoration-color: currentColor; }
/* таблицы панели: одна колонка ключей --k на всё - состав, процесс, контакты */
.app .i-crew > div { grid-template-columns: var(--k) minmax(0, 1fr); gap: 0 20px; padding: 11px 0; align-items: baseline; }
.app .i-crew dt { font-size: var(--t-s); font-weight: 600; line-height: 1.4; }
.app .i-crew dd { font-size: var(--t-s); line-height: 1.5; }
.app .i-steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.app .i-steps li {
  grid-template-columns: 28px calc(var(--k) - 48px) minmax(0, 1fr); gap: 0 20px; align-items: baseline;
  padding: 11px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--line);
}
.app .i-steps li::before { grid-column: 1; }
.app .i-steps b { font-size: var(--t-s); font-weight: 600; line-height: 1.4; }
.app .i-steps span { color: var(--mute); font-size: var(--t-s); line-height: 1.5; }
.app .i-svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.app .i-svc li { padding: 0; border: 0; border-radius: 0; font-size: var(--t-s); line-height: 1.5; }
.app .i-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin-top: 4px; }
.app .i-plan { gap: 10px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.app .i-plan.is-hot { padding-top: 14px; background: none; color: var(--ink); border-top: 3px solid var(--acc); }
.app .i-plan-s { font: 800 44px/.9 var(--f-d); letter-spacing: var(--trk); font-variant-numeric: normal; gap: 8px; }
.app .i-plan-s small, .app .i-plan-p small { opacity: 1; }
.app .i-plan-p { font: 600 var(--t-xl)/1 var(--f-b); letter-spacing: -.01em; font-variant-numeric: normal; }
.app .i-plan-n { font-size: var(--t-s); line-height: 1.45; opacity: 1; color: var(--mute); }
.app .i-row { gap: 8px 20px; padding: 14px 0; align-items: baseline; }
.app .i-k { width: var(--k); }
.app .i-val { font-size: var(--t-l); }
.app .i-act {
  padding: 12px 0; margin: -12px 0; border: 0; border-radius: 0;
  font: 600 var(--t-ui)/1 var(--f-b); letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line);
  transition: color .15s var(--e-out);
}
.app .i-act:hover { background: none; color: var(--acc); text-decoration-color: currentColor; }
@container app (max-width: 600px) {
  .app .i-tabs { gap: 20px; }
  .app .i-body { padding-top: 32px; }
  .app .i-crew > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .app .i-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 0; }
  .app .i-steps span { grid-column: 2; }
  .app .i-svc { grid-template-columns: minmax(0, 1fr); }
  .app .i-plans { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .app .i-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .app .i-plan-s { grid-row: span 2; }
  .app .i-k { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .v1-layer > img, .v1-layer > video { transform: none; }
}