:root {
  /* Палитра Iskra (Design/Brand/README.md). Текстовые оттенки проверены на контраст ≥ 4,5:1. */
  --navy: #142238; --orange: #F58A45; --emerald: #159A7C; --milk: #FFF8EF; --graphite: #202631; --gold: #E9BA68;
  --emerald-text: #0E7A62; --orange-text: #AE5320; --gold-text: #8A6418;
  --bg: var(--milk); --bg-alt: #F8EEE1; --card: #FFFFFF; --line: #EADFCF;
  --text: var(--graphite); --muted: #565C68; --on-navy: #FFF8EF; --on-navy-muted: #C9D1DE;
  --radius: 18px; --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", "SF Arabic", Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font); }
img { max-width: 100%; height: auto; }
a { color: var(--orange-text); text-underline-offset: 3px; }
a:hover { color: #8E4218; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .final :focus-visible { outline-color: var(--orange); }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; background: var(--navy); color: var(--on-navy); padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { inset-block-start: 12px; }
.wrap { inline-size: min(100% - 40px, var(--max)); margin-inline: auto; }
.wrap--narrow { inline-size: min(100% - 40px, 760px); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
/* Телефон: длинное слово в заголовке («Конфиденциальность», «Datenschutzerklärung») не помещалось по ширине, и страница
   прокручивалась вбок. Заголовок обычных страниц на телефоне чуть меньше; если слово всё равно не влезает, оно переносится. */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 480px) { h1 { font-size: clamp(1.6rem, 8.4vw, 2.3rem); } }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; margin-block-start: 1.4em; }
p { margin: 0 0 1em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }

.top { position: sticky; inset-block-start: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 20px; min-block-size: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.brand img { display: block; block-size: 32px; inline-size: auto; }
.nav { display: flex; gap: 4px 16px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: .9rem; padding: 6px 2px; }
.nav a:hover { color: var(--text); }
.top__end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.lang { position: relative; }
.lang summary { cursor: pointer; list-style: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; background: var(--card); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: "▾"; margin-inline-start: 8px; color: var(--muted); }
.lang ul { position: absolute; inset-inline-end: 0; margin: 8px 0 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; min-inline-size: 170px; box-shadow: 0 18px 40px rgb(20 34 56 / .16); z-index: 30; }
.lang a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--text); text-decoration: none; }
.lang a:hover, .lang a[aria-current] { background: var(--line); }

.btn { display: inline-block; padding: 13px 24px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-weight: 650; cursor: pointer; font-size: 1rem; font-family: inherit; }
.btn--primary { background: var(--orange); border-color: var(--orange); color: var(--graphite); display: inline-grid; justify-items: center; line-height: 1.25; }
.btn--primary:hover { background: #FF9C5C; color: var(--graphite); }
.btn--primary small { font-size: .78rem; font-weight: 600; opacity: .85; }
.btn--ghost { background: transparent; border-color: color-mix(in srgb, currentColor 45%, transparent); color: inherit; }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
.btn--small { padding: 8px 16px; font-size: .92rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.hero { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 80px); color: var(--on-navy); background: radial-gradient(900px 480px at 85% 0%, #24406A, transparent 70%), var(--navy); }
.hero h1 { color: var(--on-navy); }
/* Первый экран: текст сверху, настоящий кадр Mac-версии — крупно под ним (окно Mac широкое). */
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.hero__text { max-inline-size: 58rem; }
.hero__fine { max-inline-size: 58rem; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
.eyebrow { color: var(--on-navy-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-block-end: 14px; }
[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.lead { font-size: 1.2rem; color: var(--on-navy); opacity: .92; max-inline-size: 36em; }
.hero__cta { display: flex; align-items: center; gap: 14px 14px; flex-wrap: wrap; margin-block: 26px 12px; }
.hero__note { margin: 0 0 14px; color: var(--on-navy); font-weight: 600; }
.hero__small { color: var(--on-navy-muted); font-size: .94rem; margin-block-end: .6em; max-inline-size: 38em; }
.hero .shot figcaption, .hero .shot__note { color: var(--on-navy-muted); }
.hero .shot__open img { border-color: #2C3F5E; box-shadow: 0 30px 70px rgb(0 0 0 / .45); }
.final .hero__note { color: var(--on-navy); }

.block { padding-block: clamp(48px, 7vw, 96px); }
.block--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.intro { color: var(--muted); font-size: 1.1rem; max-inline-size: 40em; margin-block-end: 2em; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.step h3 { margin: 6px 0 4px; font-size: 1.15rem; }
.step__n { inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--emerald-text); color: #FFFFFF; display: grid; place-items: center; font-weight: 800; }
.step .shot { margin-block-start: auto; }
.feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: 28px; }
.feature--flip .feature__text { order: 2; }
.feature__text p { color: #3F4552; }

.shot { margin: 0; }
.shot figcaption, .shot__note { color: var(--muted); font-size: .88rem; margin-block-start: 8px; display: block; }
.shot__open { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; }
.shot__open img { display: block; inline-size: 100%; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgb(20 34 56 / .18); }
.window { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; box-shadow: 0 24px 60px rgb(20 34 56 / .14); color: var(--text); }
.window__bar { display: flex; gap: 7px; padding: 11px 14px; background: #F3EADF; border-block-end: 1px solid var(--line); }
.window__bar i { inline-size: 11px; block-size: 11px; border-radius: 50%; background: #D9CCBA; }
.window__body { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 28px; min-block-size: 200px; }
.window__body img { inline-size: 120px; block-size: auto; opacity: .95; }
.hero .shot--pending .window__body { min-block-size: 320px; padding: 36px; }
.hero .shot--pending .window__body img { inline-size: 170px; }
.window__body p { margin: 0; display: grid; gap: 4px; color: var(--muted); font-size: .92rem; }
.window__body strong { color: var(--text); }

.spark-states { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.spark-state { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; }
.spark-state img { inline-size: min(100%, 220px); }
.spark-state h4 { margin: 8px 0 4px; font-size: 1.15rem; }
.spark-state p { color: var(--muted); margin: 0; }
.spark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding-inline-start: 28px; position: relative; margin-block-end: .6em; }
.ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--emerald-text); font-weight: 800; }
.looks { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.looks img { border-radius: 14px; border: 1px solid var(--line); background: var(--navy); max-block-size: 220px; inline-size: auto; }

.devices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.device { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; border-block-start: 4px solid var(--line); }
.device--go { border-block-start-color: var(--emerald); }
.device--wait { border-block-start-color: #B9AE9E; }
.device h3 { margin-block-start: 0; }
.device__status { font-weight: 700; color: var(--text); }
.device--go .device__status { color: var(--emerald-text); }
.note { color: var(--muted); margin-block-start: 22px; }

.beta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.beta ul, .beta ol { padding-inline-start: 22px; }
.beta li { margin-block-end: .5em; }
.join { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: sticky; inset-block-start: 88px; }
.join h3 { margin-block-start: 0; }
.field { display: grid; gap: 6px; margin-block-end: 16px; }
.field label { font-weight: 600; }
.field input, .field select { padding: 12px 14px; border-radius: 12px; border: 1px solid #CFC2AE; background: #FFFFFF; color: var(--text); font: inherit; }
.field input[disabled], .field select[disabled] { opacity: .55; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-block-end: 18px; }
.check input { inline-size: 20px; block-size: 20px; margin-block-start: 4px; accent-color: var(--emerald-text); }
.join__status { margin: 14px 0 0; color: var(--muted); min-block-size: 1.6em; }
.join__status[data-state="error"] { color: #B3261E; }
.join__status[data-state="ok"] { color: var(--emerald-text); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 22px; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; overflow-wrap: anywhere; }
.draft { background: #FFF1D9; border: 1px solid var(--gold); padding: 12px 16px; border-radius: 12px; color: #5C4512; }

.qa { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-block-end: 12px; padding: 4px 20px; }
.qa summary { cursor: pointer; padding: 16px 0; font-weight: 650; list-style-position: outside; }
.qa p { color: #3F4552; padding-block-end: 8px; }
.final { padding-block: clamp(40px, 6vw, 80px); color: var(--on-navy); background: radial-gradient(700px 300px at 50% 0%, #24406A, transparent 70%), var(--navy); }
.final h2 { color: var(--on-navy); }
.final__in { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; justify-items: start; }
.final__img { inline-size: clamp(120px, 18vw, 200px); }
.foot { border-block-start: 1px solid var(--line); padding-block: 40px; color: var(--muted); font-size: .95rem; }
.foot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--text); text-decoration: none; } .foot a:hover { color: var(--orange-text); }
.foot a[aria-current] { color: var(--orange-text); }
.foot__lang > span { display: block; margin-block-end: 8px; }
.foot__fine { margin-block-start: 28px; font-size: .85rem; }

.lightbox { border: 0; background: var(--navy); color: var(--on-navy); border-radius: 12px; padding: 0; max-inline-size: 96vw; max-block-size: 94vh; overflow: hidden; }
.lightbox::backdrop { background: rgb(20 34 56 / .9); }
.lightbox__controls { display: flex; justify-content: end; gap: 8px; padding: 6px; }
.lightbox__controls button { min-block-size: 40px; min-inline-size: 40px; border: 0; border-radius: 8px; padding-inline: 10px; cursor: pointer; color: var(--graphite); background: var(--orange); }
.lightbox__zoom[aria-pressed="true"] { background: var(--milk); }
.lightbox__close { font-size: 1.5rem; }
.lightbox__viewport { max-inline-size: 96vw; max-block-size: calc(94vh - 52px); overflow: auto; }
.lightbox img { display: block; max-inline-size: 96vw; max-block-size: calc(94vh - 52px); inline-size: auto; block-size: auto; margin-inline: auto; }
.lightbox--actual img { max-inline-size: none; max-block-size: none; margin-inline: 0; }

.chooser { display: grid; place-items: center; min-block-size: 100vh; }
.chooser__box { text-align: center; padding: 32px; }
.chooser__box ul { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chooser__note { color: var(--muted); font-size: .9rem; }

/* Меню разделов уступало место вкладкам продуктов на экранах уже 1320px. Пока вкладок нет (AdBlocker скрыт), меню видно
   до 1000px, иначе на обычном ноутбуке «Новости» и «Конкурс» в шапке не показывались бы. */
@media (max-width: 1120px) { .top:has(.product-tabs) .nav { display: none; } }
/* На телефоне кнопка из шапки не дублирует кнопку первого экрана: шапка — в одну строку. */
@media (max-width: 560px) { .top__end .btn { display: none; } .top__in { flex-wrap: nowrap; } }
@media (max-width: 880px) {
  .hero__in, .feature, .beta, .foot__cols { grid-template-columns: 1fr; }
  .feature--flip .feature__text { order: 0; }
  .join { position: static; }
  .nav { display: none; }
  .final__in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
/* Iskra: product-led landing and access keys. */
.selling-hero {overflow:hidden;background:radial-gradient(ellipse at 50% 70%,#28466d,transparent 65%),#101e32;padding-bottom:56px}
.selling-hero .hero__text {text-align:center;margin:auto;max-inline-size:850px;padding-block:30px}
.selling-hero h1 {font-size:clamp(2.6rem,6.4vw,5.3rem);letter-spacing:-.055em;text-wrap:balance;line-height:1.03}
.selling-hero .lead {margin:24px auto;max-inline-size:650px;color:#d7dfeb}
.selling-hero .hero__cta {justify-content:center}.selling-hero .hero__small {margin-inline:auto}
.product-stage {margin:30px auto 0;max-inline-size:1040px;scroll-margin-top:140px}
.product-stage img {display:block;width:100%;height:auto;border-radius:16px;border:1px solid #4b5c72;box-shadow:0 32px 95px #0007}
.product-stage figcaption {text-align:center;font-size:12px;color:#becbdc;margin-top:18px}
.block .eyebrow {color:var(--orange-text)}.block {padding-block:90px}
.journey {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:42px}
.step-number {font-size:40px;font-weight:750;color:var(--orange-text);letter-spacing:-.05em}
.journey h3 {margin-top:18px}.journey p {color:var(--muted)}
.companion {background:#eee7da}.companion__in {display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:30px}
.companion__cast {display:flex;align-items:center}.companion__cast img {width:33.333%;filter:drop-shadow(0 18px 12px #14223812)}
.prices {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:38px 0 24px}
.price {padding:26px 20px;background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column}
.price--best {background:var(--navy);color:var(--milk);border:2px solid var(--orange);box-shadow:0 16px 45px #14223818}
.price--best .eyebrow {color:var(--gold)}.price .eyebrow {font-size:12px;min-height:18px}
.price h3 {margin-top:8px}.price__amount {font-size:48px;font-weight:750;line-height:1.2;margin:14px 0 4px;text-align:start}
.price__save {font-size:14px}.price .btn {margin-top:auto;text-align:center;padding-inline:12px}
.free-pill {display:inline-block;border:1px solid var(--line);padding:9px 16px;border-radius:999px}
.account-grid {display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;margin-top:35px}
.key-card {background:white;border:1px solid var(--line);border-radius:22px;padding:30px;min-width:0}
#key-login {display:grid;gap:12px;margin-top:24px}#access-key {width:100%;padding:14px;font:inherit;border:1px solid #a4a8b0;border-radius:10px}
#key-value {display:block;overflow-wrap:anywhere;background:#f0f3f7;color:#142238;padding:20px;margin-block:20px;font:600 18px ui-monospace,monospace;border-radius:12px}
.key-card .btn {margin-block:5px}.key-card .note {margin-top:22px;font-size:13px}#account-message {margin-top:16px}
[hidden] {display:none!important}
@media(max-width:1000px){.top nav{display:none}.prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.block{padding-block:56px}.journey,.companion__in,.account-grid{grid-template-columns:1fr}.prices{gap:10px}.price{padding:20px 12px}.price__amount{font-size:38px}.top__end{gap:6px}.top__end .btn{font-size:12px;padding:9px 12px}.lang summary{padding:8px;font-size:12px}.selling-hero h1{letter-spacing:-.035em}.key-card{padding:22px}.hero__cta .btn{width:100%}.companion__cast{max-width:440px;margin:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:640px){.top__end .btn{display:inline-block}.top__in{gap:10px}.top__end{flex-wrap:wrap}}
/* Кнопка входа в шапке (scripts/build.mjs): длинная подпись («Войти по ключу») и короткая («Войти»). Короткая — там, где длинная
   не помещается: у немецкой и французской версий на любом телефоне, у остальных на самых узких. Вошедшему по ключу
   src/scripts/site.js пишет на кнопке «Ваш доступ». */
.top__login-short { display: none; }
@media (max-width: 480px) { .top__login--wide .top__login-long { display: none; } .top__login--wide .top__login-short { display: inline; } }
@media (max-width: 360px) { .top__login-long { display: none; } .top__login-short { display: inline; } }
/* Телефон: шапка в две строки занимала восьмую часть экрана и была на нём всегда. Теперь при прокрутке вниз она уезжает,
   при прокрутке вверх возвращается (src/scripts/site.js ставит .top--away). */
@media (max-width: 640px) { .top { transition: transform .22s ease; } .top--away { transform: translateY(-100%); } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .top { transition: none; } }
/* Самые узкие телефоны (320): подпись кнопки в карточке цены не помещалась в две колонки. */
@media (max-width: 360px) { .price .btn { padding-inline: 4px; font-size: .84rem; } }
#payment-method {font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;margin:12px;max-width:100%}
#crypto-confirm {display:grid;gap:12px}#transaction-hash {font:inherit;min-width:0;width:100%;padding:12px}

.platform-picker { margin-block: 24px; }
.platform-picker__title { font-weight: 700; margin-block-end: 10px; }
.platform-picker__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.platform-picker details { border: 1px solid var(--line); border-radius: 14px; text-align: start; }
.platform-picker summary { padding: 12px 16px; cursor: pointer; font-weight: 700; }
.platform-picker details p { padding-inline: 16px; font-size: .94rem; }
.selling-hero .platform-picker { max-inline-size: 620px; margin-inline: auto; }
.selling-hero .platform-picker details { background: #142238; border-color: #617087; }
.selling-hero .platform-picker a:not(.btn) { color: #ffb889; }
/* Кнопка скачивания для Mac и сведения о сборке под ней. */
.platform-picker .platform-picker__download { margin-block-start: 4px; }
.platform-picker .platform-picker__facts { font-size: .86rem; color: var(--muted); margin-block: 0; }
.platform-picker .platform-picker__note { font-size: .86rem; color: var(--muted); padding-block-end: 4px; }
.selling-hero .platform-picker__facts, .selling-hero .platform-picker__note { color: var(--on-navy-muted); }
@media (max-width: 480px) { .platform-picker__options { grid-template-columns: 1fr; } }

/* ===== Главная: настоящие экраны приложения (iPad, iPhone 18 Pro Max, iPhone Duo) ===== */
.stage { margin: 34px auto 0; max-inline-size: 1060px; }
/* Телефон стоит у нижнего угла iPad и не наезжает на подпись: рамка выше iPad на 12% ширины. */
.stage__frame { position: relative; padding-block-end: 12%; }
.stage .shot__open { border-radius: 22px; }
.stage .stage__main img { border-radius: 22px; border: 1px solid #33476A; box-shadow: 0 34px 100px rgb(0 0 0 / .5); }
.stage .stage__phone { position: absolute; inset-inline-end: -1.5%; inset-block-end: 0; inline-size: 22%; border-radius: 30px; }
.stage .stage__phone img { border-radius: 30px; border: 1px solid #3A5078; box-shadow: 0 26px 70px rgb(0 0 0 / .6); }
.stage figcaption { text-align: center; font-size: .82rem; color: var(--on-navy-muted); margin-block-start: 18px; max-inline-size: 46rem; margin-inline: auto; }

.showcase { padding-block: clamp(56px, 8vw, 104px); }
.showcase--alt { background: var(--bg-alt); }
.showcase__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.showcase--flip .showcase__text { order: 2; }
.showcase__text h2 { margin-block-end: .4em; }
.showcase__text .intro { color: var(--muted); font-size: 1.06rem; }
.showcase__media { margin: 0; }
.showcase__media .shot__open img { border-radius: 18px; border: 1px solid #D8CCBA; box-shadow: 0 28px 64px rgb(20 34 56 / .24); }
.showcase__media--phone { max-inline-size: 330px; justify-self: center; inline-size: 100%; }
/* Широкий раздел (таблица за месяц): текст сверху в две колонки, снимок во всю ширину под ним — галочки видно без увеличения. */
.showcase--wide .showcase__in { grid-template-columns: 1fr; gap: clamp(24px, 3.5vw, 44px); }
.showcase--wide .showcase__text { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 72px); align-items: start; }
.showcase--wide .showcase__text .eyebrow, .showcase--wide .showcase__text h2 { grid-column: 1 / -1; }
.showcase--wide .showcase__text .ticks { margin-block: .2em 0; }
.showcase--wide .showcase__text .intro { margin: 0; }
.showcase__media--phone .shot__open, .showcase__media--phone .shot__open img { border-radius: 34px; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-inline-start: 34px; }
.ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; inset-block-start: .18em; inline-size: 22px; block-size: 22px; border-radius: 7px; background: var(--emerald); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; line-height: 1; }

.gallery { background: var(--navy); color: var(--on-navy); }
.gallery h2 { color: var(--on-navy); }
.gallery .intro { color: var(--on-navy-muted); max-inline-size: 46rem; }
/* Карточки по форме устройства одной высоты: iPad и Duo — широкие (4:3), iPhone — узкая и высокая. */
.gallery__row { --gh: min(390px, 62vw); display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 10px 22px; margin-block-start: 26px; scrollbar-color: #3A5078 transparent; }
.gallery__item { flex: 0 0 auto; inline-size: calc(var(--gh) * 4 / 3); margin: 0; scroll-snap-align: start; display: grid; align-content: start; gap: 12px; }
.gallery__item--phone { inline-size: calc(var(--gh) * .6); }
.gallery__item .shot__open { block-size: var(--gh); border-radius: 16px; }
.gallery__item .shot__open img { block-size: 100%; inline-size: 100%; object-fit: contain; object-position: center; border-radius: 16px; border: 1px solid #33476A; box-shadow: 0 18px 44px rgb(0 0 0 / .35); }
.gallery__item figcaption { font-size: .92rem; color: var(--on-navy-muted); }

.spark-note { padding-block: clamp(44px, 6vw, 72px); }
.spark-note__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; max-inline-size: 860px; }
.spark-note__in img { inline-size: clamp(96px, 13vw, 150px); filter: drop-shadow(0 16px 12px rgb(20 34 56 / .12)); }
.spark-note__in h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.spark-note__in .intro { color: var(--muted); margin: 0; }
.final__in--solo { grid-template-columns: 1fr; text-align: center; justify-items: center; }

@media (max-width: 860px) {
  .showcase__in { grid-template-columns: 1fr; }
  .showcase--wide .showcase__text { display: block; }
  .showcase--wide .showcase__text .ticks { margin-block-start: 22px; }
  .showcase--flip .showcase__text { order: 0; }
  .showcase__media--phone { max-inline-size: 300px; }
  .stage .stage__phone { inline-size: 27%; inset-inline-end: 0; }
  .gallery__row { grid-auto-columns: minmax(240px, 78%); }
}
@media (max-width: 520px) {
  .spark-note__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .stage .stage__phone { inline-size: 30%; }
}

.screenshot-gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.screenshot-gallery article { min-inline-size: 0; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg); }
.screenshot-gallery h3 { margin-block-start: 0; }
.screenshot-gallery .shot { margin: 0; }
@media (max-width: 700px) { .screenshot-gallery { grid-template-columns: minmax(0, 1fr); } }

/* Согласие на пиксель Meta: плашка внизу экрана; «Разрешить» и «Отказаться» одинаково заметны. */
.foot__link { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: start; }
.foot__link:hover { color: var(--orange-text); }

/* Информация и поддержка (/<язык>/support/) */
.info h2 { margin-block: 44px 14px; }
.info .intro { margin-block-end: 0; }
.info .facts { margin-block-end: 10px; font-size: 1.05rem; }
.info__docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

/* Условия доступа и строка о согласии у оплаты */
.terms h2 { margin-block: 36px 10px; font-size: 1.3rem; }
.terms .intro { margin-block-start: 6px; }
.pay-consent { margin-block: 18px 6px; max-inline-size: 760px; }

/* Новости (/<язык>/changelog/): переключатель ленты продукта и карточки записей (scripts/news.mjs). */
.news .intro { margin-block-end: 0; }
.news__feeds { border: 0; padding: 0; margin: 26px 0 0; min-inline-size: 0; }
.news__feeds legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Переключатель — те же «таблетки», что у вкладок продуктов в шапке. На узком экране они переносятся на вторую строку. */
.news__pills { display: flex; flex-wrap: wrap; gap: 4px; inline-size: fit-content; max-inline-size: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.news__pills input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.news__pills label { display: block; padding: 8px 18px; border-radius: 999px; color: var(--muted); font-size: .95rem; font-weight: 650; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.news__pills label:hover { color: var(--text); background: var(--bg-alt); }
.news__pills input:checked + label { background: var(--navy); color: var(--on-navy); }
.news__pills input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; }
.news__list { display: grid; gap: 16px; margin-block-start: 22px; }
.news__card { padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.news__card--soon { background: var(--bg-alt); }
.news__card h2 { margin: 12px 0 4px; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.news__tag { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.news__tag img { border-radius: 6px; }
.news__date { margin: 0; color: var(--muted); font-size: .92rem; }
.news__card .ticks { margin-block-start: 16px; }
/* Выбрана лента одного продукта: остальные записи скрыты. То же делает src/scripts/site.js для браузеров без :has(). */
.news:has(#feed-iskra:checked) [data-feed]:not([data-feed="iskra"]),
.news:has(#feed-adblocker:checked) [data-feed]:not([data-feed="adblocker"]),
.news:has(#feed-volumemixer:checked) [data-feed]:not([data-feed="volumemixer"]) { display: none; }
/* Телефон: переключатель во всю ширину, кнопки в два ровных столбца. */
@media (max-width: 520px) {
  .news__pills { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; }
  .news__pills label { text-align: center; padding-inline: 10px; }
  .news__card { padding: 18px 18px 20px; }
}
/* Смена страны в App Store (/ru/region/): шаги со скриншотами */
.region-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; }
.region-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 22px; }
.region-step h3 { margin: 0 0 6px; }
.region-step p { margin: 0 0 14px; }
.region-step__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 14px; justify-content: center; }
.region-step__shots--one { grid-template-columns: minmax(0, 300px); }
.region-step__shots img { display: block; inline-size: 100%; block-size: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 14px 34px rgb(20 34 56 / .12); }
.region-step .btn { margin-block-start: 16px; }

/* AdBlocker и «Продукты Iskra» (scripts/adblocker.mjs) */
.product-tabs ul{display:flex;gap:4px;list-style:none;margin:0;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.product-tabs a{display:block;padding:6px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:650;white-space:nowrap}
.product-tabs a:hover{color:var(--text);background:var(--bg-alt)}
.product-tabs a[aria-current]{background:var(--navy);color:var(--on-navy)}
.top nav.product-tabs{display:block}
/* Телефон: первая строка — логотип, язык и вход (как раньше), вторая — вкладки продуктов во всю ширину. */
@media(max-width:760px){
  .top__in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px}
  .top__in>.brand{grid-row:1;grid-column:1}
  .top__in>.top__end{grid-row:1;grid-column:2;justify-self:end;flex-wrap:nowrap;margin:0}
  .top__in>.product-tabs{grid-row:2;grid-column:1/-1}
  .product-tabs ul{overflow-x:auto;scrollbar-width:none}
  .product-tabs ul::-webkit-scrollbar{display:none}
  .product-tabs li{flex:1 0 auto}
  .product-tabs a{text-align:center;padding-inline:10px}
  .top__end{min-inline-size:0;max-inline-size:100%}
  .top__end .lang{flex:none}
  .top__end .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;flex:0 1 auto}
}
@media(max-width:400px){.top .brand img{block-size:26px}.top__end{gap:6px}}

.ab-hero{color:var(--on-navy);padding-block:clamp(40px,6vw,88px);background:radial-gradient(900px 520px at 85% 10%,#2a4a73,transparent 65%),#101e32;overflow:hidden}
.ab-hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.ab-hero__icon{display:block;border-radius:22px;margin-block-end:22px;box-shadow:0 18px 40px rgb(0 0 0 / .35)}
.ab-hero h1{color:var(--on-navy);font-size:clamp(2.6rem,5.6vw,4.6rem);letter-spacing:-.04em;line-height:1.03;text-wrap:balance}
.ab-hero .lead{color:#d7dfeb;margin-block-end:18px}
.ab-hero__trial{display:inline-block;margin:0 0 6px;padding:6px 14px;border-radius:999px;background:rgb(233 186 104 / .14);border:1px solid rgb(233 186 104 / .35);color:var(--gold);font-weight:650;font-size:.92rem}
.ab-hero .note{color:var(--on-navy-muted);margin:0}
[dir="rtl"] .ab-hero h1{letter-spacing:0}
@media(max-width:900px){.ab-hero__in{grid-template-columns:1fr}.ab-mock{max-inline-size:460px;margin-inline:auto;inline-size:100%}}
@media(max-width:600px){.ab-hero .ab-mock{padding-block-end:0}.ab-mock>.ab-mock__pop{position:relative;inset:auto;margin:-34px 0 0;margin-inline-start:auto;inline-size:88%}}

.ab-mock{position:relative;padding-block-end:48px}
@media(min-width:901px){.ab-mock__window{margin-inline-end:14%}}
.ab-mock__window{background:#F7F2EA;border-radius:16px;box-shadow:0 30px 70px rgb(0 0 0 / .45);overflow:hidden;border:1px solid #2C3F5E}
.ab-mock__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#E9E1D5}
.ab-mock__bar>span{inline-size:10px;block-size:10px;border-radius:50%;background:#D0C6B8}
.ab-mock__url{margin:0 auto;padding:3px 22px;border-radius:8px;background:#fff;color:#565C68;font-size:.75rem;line-height:1.5}
.ab-mock__page{padding:18px 18px 26px;display:grid;gap:10px}
.ab-mock__line{display:block;block-size:10px;border-radius:5px;background:#E2D8CA}
.ab-mock__line--title{block-size:16px;inline-size:72%;background:#D7CBBA}
.ab-mock__line--short{inline-size:58%}
.ab-mock__ad{display:flex;align-items:center;justify-content:flex-start;padding-inline:14px;gap:8px;block-size:58px;border:1.5px dashed #C9BBA8;border-radius:10px;color:#746A5D;font-size:.8rem;font-weight:650}
.ab-mock__pop{position:absolute;inset-inline-end:0;inset-block-end:0;inline-size:min(290px,66%);display:grid;gap:8px;background:#F5F6FA;color:var(--graphite);border-radius:16px;padding:12px;box-shadow:0 24px 60px rgb(0 0 0 / .4);border:1px solid #D9DCE6;font-size:.82rem;line-height:1.3}
.ab-mock__head{display:flex;align-items:center;gap:10px;padding:2px 4px}
.ab-mock__head img{border-radius:9px}
.ab-mock__pop b{display:block;font-weight:650}
.ab-mock__pop small{display:block;color:#6B6F7B;font-size:.72rem}
.ab-mock__card{display:block;background:#fff;border-radius:11px;overflow:hidden}
.ab-mock__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px}
.ab-mock__row+.ab-mock__row{border-top:1px solid #ECEDF2}
.ab-mock__toggle{flex:none;position:relative;inline-size:32px;block-size:19px;border-radius:10px;background:#4F46E5}
.ab-mock__toggle::after{content:"";position:absolute;inset-block-start:2px;inset-inline-end:2px;inline-size:15px;block-size:15px;border-radius:50%;background:#fff}
.ab-mock__badge{flex:none;padding:2px 8px;border-radius:999px;background:#4F46E5;color:#fff;font-size:.68rem;font-weight:650}
.ab-mock__foot{display:block;text-align:center;color:#6B6F7B;font-size:.7rem}

.ab-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.ab-feature{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;transition:transform .15s,box-shadow .15s}
.ab-feature:hover{transform:translateY(-2px);box-shadow:0 14px 34px #1422381a}
.ab-feature__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:16px}
.ab-feature__icon{display:grid;place-items:center;inline-size:50px;block-size:50px;border-radius:15px;background:var(--bg-alt);color:var(--navy)}
.ab-feature--premium .ab-feature__icon{background:var(--navy);color:var(--gold)}
.ab-feature h3{margin:0 0 6px}
.ab-feature p{color:#3F4552;margin:0}
.ab-badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--card)}
.ab-badge--premium{background:rgb(233 186 104 / .18);border-color:rgb(233 186 104 / .7);color:var(--gold-text)}
@media(max-width:980px){.ab-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ab-features{grid-template-columns:1fr}}

.ab-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:8px 0 0}
.ab-plan{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px}
.ab-plan--premium{background:var(--navy);color:var(--on-navy);border-color:var(--navy);box-shadow:0 16px 45px #14223818}
.ab-plan h3{margin:0 0 16px;font-size:1.3rem}
.ab-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ab-plan li{display:flex;gap:10px;align-items:flex-start}
.ab-plan li::before{content:"✓";flex:none;inline-size:22px;block-size:22px;margin-block-start:2px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;background:var(--bg-alt);color:var(--emerald-text)}
.ab-plan--premium li::before{background:rgb(233 186 104 / .2);color:var(--gold)}
.ab-plan__trial{margin:18px 0 0;color:var(--gold);font-weight:650}
@media(max-width:700px){.ab-compare{grid-template-columns:1fr}}

.ab-final__icon{inline-size:clamp(96px,12vw,140px);border-radius:30px;box-shadow:0 18px 40px rgb(0 0 0 / .35)}
.final .hero__cta{margin-block-end:0}
.final p{color:#d7dfeb}

.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.product-card img{border-radius:16px}
.product-card .btn{margin-top:auto}

/* AdBlocker check page (/<lang>/adblocker/test/): the status and the test ads drawn by the page (scripts/adblocker.mjs). */
.ab-test-link{margin-block-start:18px;font-weight:600}
.ab-test{padding-block-end:120px}
.ab-test__status{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--card);margin-block:8px 28px}
.ab-test__status b{display:block;font-size:1.15rem;line-height:1.3}
.ab-test__status p{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.ab-test__status p:empty{display:none}
.ab-test__icon{flex:none;inline-size:34px;block-size:34px;border-radius:50%;display:grid;place-items:center;background:#E3E6EC;font-weight:800;line-height:1}
.ab-test__icon::before{content:"…";color:var(--muted)}
.ab-test__status[data-state="ok"]{background:#E8F6F1;border-color:#9ED8C6}
.ab-test__status[data-state="ok"] b{color:var(--emerald-text)}
.ab-test__status[data-state="ok"] .ab-test__icon{background:var(--emerald)}
.ab-test__status[data-state="ok"] .ab-test__icon::before{content:"✓";color:#fff}
.ab-test__status[data-state="visible"]{background:#FFF1E6;border-color:#F7B98E}
.ab-test__status[data-state="visible"] b{color:var(--orange-text)}
.ab-test__status[data-state="visible"] .ab-test__icon{background:var(--orange)}
.ab-test__status[data-state="visible"] .ab-test__icon::before{content:"!";color:#fff}
.ab-test__article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4vw,32px);margin-block-end:24px}
.ab-test__article h2{font-size:clamp(1.5rem,3vw,2rem)}
.ab-test__ad{position:relative;display:grid;gap:4px;justify-items:center;text-align:center;margin-block:0 22px;padding:18px 16px;border-radius:14px;color:#fff;overflow:hidden}
.ab-test__ad[hidden]{display:none}
.ab-test__ad small{position:absolute;inset-block-start:6px;inset-inline-end:10px;font-size:.65rem;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.ab-test__ad b{font-size:1.45rem;line-height:1.1}
.ab-test__ad em{font-style:normal;font-weight:800;margin-block-start:6px;padding:8px 20px;border-radius:999px;background:#FFE14D;color:#1B1B1B}
.ab-test__ad--sale{background:linear-gradient(135deg,#FF2E63,#FF9A3C);padding-block:22px}
.ab-test__ad--prize{background:linear-gradient(160deg,#5B2EFF,#1FA2FF);padding-block:28px}
.ab-test__gift{font-size:2.6rem;line-height:1}
.ab-test__ad--native{grid-template-columns:76px 1fr;justify-items:start;text-align:start;align-items:center;gap:14px;background:#F4F1EC;color:var(--text);border:1px solid var(--line)}
.ab-test__ad--native small{position:static;display:block;color:var(--muted);opacity:1;text-transform:none;letter-spacing:0;font-size:.75rem}
.ab-test__ad--native b{font-size:1.02rem;line-height:1.3}
.ab-test__thumb{inline-size:76px;block-size:76px;border-radius:10px;background:linear-gradient(135deg,#F9D423,#FF4E50)}
.ab-test__ad--sticky{position:fixed;inset-inline:10px;inset-block-end:calc(10px + env(safe-area-inset-bottom));z-index:30;max-inline-size:620px;margin:0 auto;grid-template-columns:1fr auto auto;justify-items:start;text-align:start;align-items:center;gap:10px;padding:12px 12px 12px 16px;background:#14171F;box-shadow:0 10px 30px rgb(0 0 0 / .35)}
.ab-test__ad--sticky span{font-weight:700;font-size:.92rem;line-height:1.3}
.ab-test h1{margin-block-end:.4em}
.ab-test__ad--sticky em{margin:0;padding:7px 14px;background:#2BD576;color:#062312}
.ab-test__close{appearance:none;border:0;background:transparent;color:#9AA3B2;font-size:1.5rem;line-height:1;padding:2px 6px;cursor:pointer}

/* AdBlocker page: screens from the App Store cards (scripts/adblocker.mjs, shotsGallery). Phones: a strip that scrolls sideways. */
.ab-shots__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-block-start:28px}
.ab-shots__item{margin:0}
.ab-shots__item img{display:block;inline-size:100%;block-size:auto;border-radius:clamp(14px,1.6vw,20px);box-shadow:0 18px 40px rgb(16 30 50 / .22);background:#101e32}
@media(max-width:820px){
  .ab-shots__strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(64vw,280px);overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:16px;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
  .ab-shots__strip::-webkit-scrollbar{display:none}
  .ab-shots__item{scroll-snap-align:start}
}

/* Test page: a made-up film in a player (drawn in CSS) and a pre-roll test ad over it (scripts/adblocker.mjs, adblockerTest). */
.ab-test__meta{margin:-6px 0 14px;color:var(--muted);font-size:.95rem}
.ab-test__player{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-block:0 22px;background:#0F2238;box-shadow:0 10px 26px rgb(16 30 50 / .18)}
.ab-test__film{position:absolute;inset:0;background:radial-gradient(circle at 70% 56%,#FFE0A0 0 6.5%,rgb(255 224 160 / 0) 7%),linear-gradient(180deg,#27355F 0%,#7C4E78 30%,#D9785F 50%,#F4A85C 58%,#1C3452 58.5%,#0E2036 100%)}
.ab-test__film::before{content:"";position:absolute;left:0;right:0;bottom:41.5%;height:20%;background:#1A2944;clip-path:polygon(0 100%,0 58%,10% 34%,22% 62%,36% 22%,50% 56%,63% 30%,78% 64%,90% 38%,100% 60%,100% 100%)}
.ab-test__film::after{content:"";position:absolute;left:67%;top:59%;width:6%;height:24%;background:linear-gradient(180deg,rgb(255 224 160 / .6),rgb(255 224 160 / 0))}
.ab-test__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgb(255 255 255 / .92);box-shadow:0 8px 24px rgb(0 0 0 / .35);z-index:1}
.ab-test__play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #1B1F2A}
.ab-test__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(0deg,rgb(0 0 0 / .6),rgb(0 0 0 / 0));color:#fff;font-size:.8rem;direction:ltr;z-index:1}
.ab-test__progress{flex:1;height:4px;border-radius:2px;background:rgb(255 255 255 / .35)}
.ab-test__ad--video{position:absolute;inset:0;margin:0;border-radius:0;align-content:center;z-index:2;background:radial-gradient(circle at 30% 20%,#FF6A3D 0,rgb(255 106 61 / 0) 55%),linear-gradient(135deg,#7B2FF7,#F107A3)}
.ab-test__ad--video small{inset-block-start:12px;inset-inline-start:12px;inset-inline-end:auto;padding:4px 10px;border-radius:6px;background:rgb(0 0 0 / .45);font-size:.72rem;letter-spacing:.02em;text-transform:none;opacity:1}
.ab-test__ad--video b{font-size:clamp(1.3rem,4.6vw,2rem)}
.ab-test__ad--video::after{content:"";position:absolute;left:0;bottom:0;width:32%;height:4px;background:#FFD400}
.ab-test__skip{position:absolute;inset-block-end:16px;inset-inline-end:12px;font-style:normal;font-size:.82rem;font-weight:600;padding:7px 12px;border-radius:8px;background:rgb(0 0 0 / .55);color:#fff}
@media(max-width:480px){.ab-test__ad--video{padding:8px 12px;gap:2px}.ab-test__ad--video b{font-size:1.05rem}.ab-test__ad--video span{font-size:.78rem}.ab-test__ad--video em{margin-block-start:4px;padding:4px 12px;font-size:.8rem}.ab-test__ad--video small{inset-block-start:8px;inset-inline-start:8px;padding:2px 7px;font-size:.62rem}.ab-test__skip{inset-block-end:10px;inset-inline-end:8px;font-size:.62rem;padding:4px 7px}.ab-test__play{width:48px;height:48px}.ab-test__play::after{border-width:9px 0 9px 15px}.ab-test__bar{padding:6px 10px;font-size:.68rem}}

/* AdBlocker page: two blurred frames from a real movie site, before and after (scripts/adblocker.mjs, shotsGallery). */
.ab-real{margin-block-start:clamp(36px,5vw,60px)}
.ab-real h3{margin:0 0 16px;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.ab-real__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.ab-real__item{position:relative;margin:0}
.ab-real__item img{display:block;inline-size:100%;block-size:auto;border-radius:14px;background:#000;box-shadow:0 14px 32px rgb(16 30 50 / .22)}
.ab-real__item figcaption{margin-block-start:10px;font-weight:600;line-height:1.4}
.ab-real__tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:1;padding:5px 12px;border-radius:999px;color:#fff;font-size:.85rem;font-weight:700;box-shadow:0 4px 12px rgb(0 0 0 / .3)}
.ab-real__tag--off{background:#CC3D29}
.ab-real__tag--on{background:#0D7F5E}
@media(max-width:640px){.ab-real__pair{grid-template-columns:1fr}}
/* Плашка согласия на Метрику (src/scripts/metrika.js): посетителям из ЕС, ЕЭЗ, Великобритании и Швейцарии. */
.consent{position:fixed;inset-inline:12px;inset-block-end:12px;z-index:80;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;max-width:900px;margin-inline:auto;padding:14px 18px;border-radius:16px;background:#101a2c;color:#fff;box-shadow:0 12px 40px rgb(0 0 0 / .35);font-size:.92rem;line-height:1.45}
.consent p{margin:0;flex:1 1 320px}
.consent a{color:#ffb37a}
.consent__buttons{display:flex;gap:10px;flex:0 0 auto}
.consent .btn{min-height:40px;padding:8px 18px;border:0;background:#fff;color:#101a2c;font-size:.92rem}

/* Конкурс (/ru/contest/, scripts/contest.mjs): тёмно-синий праздничный первый блок, отсчёт, цветные карточки.
   Картинки — JPEG на сплошном фоне блока (первая — на #142238, остальные — на белом): фон вокруг них должен быть тем же цветом. */
.contest-hero { position: relative; color: var(--on-navy); background: var(--navy); padding-block: clamp(28px, 5vw, 64px) clamp(36px, 5vw, 72px); overflow: hidden; }
.contest-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 6px; background: linear-gradient(90deg, #F58A45, #FFD34E, #1DB58F, #5BB8FF, #9B7BFF, #FF7AA8, #F58A45); }
.contest-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.contest-hero h1 { color: var(--on-navy); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 6px 0 14px; }
.contest-hero .eyebrow { color: var(--gold); }
.contest-hero__lead { color: var(--on-navy-muted); font-size: 1.12rem; max-inline-size: 34em; margin: 0 0 22px; }
.contest-hero__art { inline-size: 100%; block-size: auto; display: block; }
.contest-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 22px; }
.contest-hero .btn--ghost { color: var(--on-navy); }
.btn--big { padding: 16px 30px; font-size: 1.08rem; }
.countdown { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius); padding: 16px 18px; max-inline-size: 460px; }
.countdown__title { margin: 0 0 10px; font-weight: 700; color: var(--on-navy); }
.countdown__cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown__cells div { background: var(--on-navy); color: var(--navy); border-radius: 14px; padding: 10px 4px 8px; text-align: center; box-shadow: 0 6px 0 rgb(0 0 0 / .18); }
.countdown__cells div:nth-child(1) { border-block-start: 5px solid #F58A45; } .countdown__cells div:nth-child(2) { border-block-start: 5px solid #FFD34E; }
.countdown__cells div:nth-child(3) { border-block-start: 5px solid #1DB58F; } .countdown__cells div:nth-child(4) { border-block-start: 5px solid #FF7AA8; }
.countdown__cells b { display: block; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__cells span { font-size: .8rem; color: var(--muted); }
.countdown__fine { margin: 10px 0 0; color: var(--on-navy-muted); font-size: .9rem; }
.contest-prizes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-block-start: 26px; }
.prize-card { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 3px solid transparent; box-shadow: 0 18px 50px rgb(20 34 56 / .1); }
.prize-card--main { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #9B7BFF, #FF7AA8, #F58A45) border-box; }
.prize-card--usdt { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #1DB58F, #5BB8FF) border-box; }
.prize-card img { display: block; inline-size: 100%; block-size: auto; }
.prize-card div { padding: 4px 22px 22px; }
.prize-card h3 { margin: 0 0 6px; font-size: 1.3rem; }
.prize-card p { margin: 0; color: var(--muted); }
.contest-steps { margin-block-start: 26px; }
.contest-step { position: relative; padding-block-start: 0; overflow: hidden; border-block-start: 6px solid var(--orange); }
.contest-step--2 { border-block-start-color: #5BB8FF; } .contest-step--3 { border-block-start-color: #1DB58F; }
.contest-step__art { display: block; inline-size: calc(100% + 44px); max-inline-size: none; block-size: auto; margin-inline: -22px; }
.contest-step__num { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--navy); background: var(--orange); box-shadow: 0 4px 0 rgb(0 0 0 / .15); }
.contest-step--2 .contest-step__num { background: #5BB8FF; } .contest-step--3 .contest-step__num { background: #1DB58F; }
.contest-step .btn { margin-block-start: auto; align-self: flex-start; }
#how, #entry { scroll-margin-top: 76px; }
.contest-flash { animation: contest-flash 1.6s ease-out; }
@keyframes contest-flash { 0% { box-shadow: inset 0 0 0 6px #FFD34E; } 100% { box-shadow: inset 0 0 0 6px transparent; } }
.contest-entry { position: static; border: 3px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #F58A45, #FFD34E, #1DB58F, #5BB8FF, #9B7BFF, #FF7AA8) border-box; }
.contest-entry__status { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg-alt); color: var(--text); font-weight: 600; min-block-size: 1.6em; }
.contest-entry__status--ok { background: #E3F6EF; color: var(--emerald-text); }
.contest-entry__status--warn { background: #FFF0E3; color: var(--orange-text); }
.contest-entry__login { margin: 14px 0 0; }
.contest-entry__number { font-size: 1.3rem; margin-block-end: 6px; }
.contest-entry__number strong { color: var(--orange-text); font-size: 2.4rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--emerald-text); text-decoration: underline; cursor: pointer; }
.contest-stream__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.contest-stream__art { inline-size: 100%; block-size: auto; border-radius: var(--radius); box-shadow: 0 18px 50px rgb(20 34 56 / .12); background: #fff; }
.contest-stream .btn { margin-block-start: 8px; }
.contest-rules { padding-inline-start: 1.3em; display: grid; gap: 12px; }
@media (max-width: 860px) {
  .contest-hero__in, .contest-stream__in, .contest-prizes__grid { grid-template-columns: 1fr; }
  .contest-hero__art { max-inline-size: 520px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .contest-flash { animation: none; } }
.contest-entry__buy { margin: 0 0 16px; }
/* Полоса конкурса под шапкой русских страниц Iskra (contestPromo): видна и на телефоне, где меню в шапке скрыто. */
.promo { display: block; background: linear-gradient(90deg, #142238, #24406A); color: var(--on-navy); text-decoration: none; border-block-end: 3px solid var(--orange); }
.promo[hidden] { display: none; }
.promo .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; padding-block: 10px; font-size: .95rem; text-align: center; }
.promo b { color: var(--gold); }
.promo__go { font-weight: 700; color: var(--orange); white-space: nowrap; }
.promo:hover .promo__go { text-decoration: underline; }
/* Страницы успеха (scripts/success.mjs): оплата подтверждена, участие оформлено. */
.success__in { text-align: center; }
.success__art { inline-size: 200px; block-size: auto; margin-inline: auto; display: block; }
.success__art--icon { inline-size: 96px; margin-block-end: 14px; }
.success .intro { margin-inline: auto; }
.success__number { font-size: 1.3rem; margin-block-end: 6px; }
.success__number strong { color: var(--orange-text); font-size: 2.6rem; }
.success__next { margin-block: 26px; padding: 24px; border-radius: var(--radius); border: 3px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #F58A45, #FFD34E, #1DB58F, #5BB8FF, #9B7BFF, #FF7AA8) border-box; }
.success__next h2 { margin-block-start: 0; }
.success__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Шаги после оплаты: скачать приложение и вставить ключ. */
/* Шаги стоят по центру, как заголовок страницы и кнопки под ними (по слову владельца, 12.11.2026). */
.success__steps { list-style: none; counter-reset: step; padding: 0; margin-block: 26px; display: grid; gap: 14px; text-align: center; }
.success__steps li { counter-increment: step; padding: 20px 22px; border-radius: var(--radius); background: var(--card); }
.success__steps h2 { margin-block: 0 10px; font-size: 1.25rem; }
.success__steps h2::before { content: counter(step) ". "; color: var(--orange-text); }
.success__steps p { margin-block: 0; margin-inline: auto; max-inline-size: 34em; }
.success__wish { font-size: 1.3rem; font-weight: 700; }
@media (max-width: 600px) { .promo .wrap { font-size: .88rem; padding-block: 8px; gap: 2px 12px; } }
/* Подсказка «Что такое хеш транзакции» под полем хеша (hashHelpBlock). */
.hash-help { margin-block: 16px 0; }
.hash-help__shots { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-block: 8px 16px; }
.hash-help__shots figure { margin: 0; flex: 0 1 260px; }
.hash-help__shots img { display: block; inline-size: 100%; block-size: auto; border-radius: 14px; border: 1px solid var(--line); }
.hash-help__shots figcaption { margin-block-start: 8px; font-size: .9rem; color: var(--muted); text-align: center; }

/* Iskra Volume Mixer (scripts/volumemixer.mjs): снимки экрана Mac — широкие, поэтому свои сетки. */
.vm-hero__shot{text-align:center}
.vm-hero__shot img{display:inline-block;inline-size:100%;max-inline-size:360px;block-size:auto;border-radius:18px;box-shadow:0 22px 50px rgb(0 0 0 / .4)}
.vm-shots__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-block-start:28px}
.vm-shots__item{margin:0}
.vm-shots__item img{display:block;inline-size:100%;block-size:auto;border-radius:14px;border:1px solid var(--line)}
@media(max-width:900px){.vm-shots__grid{grid-template-columns:1fr;max-inline-size:560px;margin-inline:auto}}

/* Блок покупки для продукта без подписки (scripts/volumemixer-shop.mjs, buyCard): слева — что входит, справа — цена и кнопка. */
.buy-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,44px);align-items:center;max-inline-size:860px;margin:38px auto 24px;padding:clamp(22px,4vw,40px);border-radius:28px;background:var(--navy);color:var(--milk);border:2px solid var(--orange);box-shadow:0 22px 60px #14223826;text-align:start}
.buy-card__head{display:flex;align-items:center;gap:16px}
.buy-card__head img{border-radius:16px;box-shadow:0 10px 26px rgb(0 0 0 / .35)}
.buy-card h3{margin:0;font-size:1.5rem;color:inherit}
.buy-card__tag{margin:4px 0 0;color:var(--gold);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.buy-card ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.buy-card li{position:relative;padding-inline-start:30px;line-height:1.4}
.buy-card li::before{content:"✓";position:absolute;inset-inline-start:0;inset-block-start:0;color:var(--gold);font-weight:800}
.buy-card__side{text-align:center;padding:26px 22px;border-radius:22px;background:rgb(255 255 255 / .07);border:1px solid rgb(255 255 255 / .12)}
.buy-card__price{font-size:clamp(48px,7vw,68px);font-weight:780;line-height:1;margin:0}
.buy-card__once{margin:10px 0 20px;opacity:.82}
.buy-card .btn{display:block;inline-size:100%;text-align:center}
.buy-card__note{margin:14px 0 0;font-size:.85rem;opacity:.75}
@media(max-width:760px){.buy-card{grid-template-columns:1fr}}
/* Страница с таким блоком: заголовок раздела, выбор способа оплаты и согласие — по центру, как сам блок. */
.block:has(.buy-card)>.wrap>h2,.block:has(.buy-card)>.wrap>.intro{text-align:center}
.wrap:has(>.buy-card)>label[for="payment-method"]:not([hidden]),.wrap:has(>.buy-card)>.pay-consent:not([hidden]){display:block;text-align:center;margin-inline:auto}
.wrap:has(>.buy-card)>#payment-method:not([hidden]){display:block;margin-inline:auto}
.wrap:has(>.buy-card)>.pay-consent{max-inline-size:640px}
.account-grid~[hidden],.buy-card[hidden]{display:none}
/* После покупки: спасибо и кнопка скачивания. */
.buy-success{max-inline-size:640px;margin:38px auto 24px;padding:clamp(24px,4vw,40px);border-radius:28px;background:var(--card);border:1px solid var(--line);text-align:center}
.buy-success[hidden]{display:none}
.buy-success img{border-radius:18px;box-shadow:0 12px 30px rgb(0 0 0 / .18)}
.buy-success h2{margin:18px 0 8px;text-align:center}
.buy-success .hero__cta{justify-content:center;margin-block-start:20px}
/* Страница доступа продукта, купленного один раз (Volume Mixer), после покупки: src/scripts/account.js ставит .account--owned.
   Одна колонка по центру: сначала «спасибо» с кнопкой скачивания, под ним — сведения о ключе. До покупки страница прежняя. */
.account--owned { display: grid; justify-items: center; text-align: center; }
.account--owned > h1 { margin-block-end: 0; font-size: clamp(2rem, 4.4vw, 3.1rem); }
.account--owned > .buy-success { order: 1; inline-size: 100%; margin-block: 30px 0; box-shadow: 0 18px 50px rgb(20 34 56 / .08); }
.account--owned > .buy-success p { max-inline-size: 30em; margin-inline: auto; color: var(--muted); }
.account--owned > .account-grid { order: 2; display: block; inline-size: 100%; max-inline-size: 640px; margin-block-start: 16px; }
.account--owned .key-card { padding: 26px clamp(20px, 4vw, 34px); border-radius: 28px; }
.account--owned #plan-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1.25rem; }
.account--owned #plan-status::before { content: "✓"; flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--emerald); color: #fff; font-size: 14px; font-weight: 800; }
.account--owned #paid-until { margin: 6px 0 16px; color: var(--muted); }
.account--owned #public-id, .account--owned #device-count { display: inline-block; margin: 0 3px 8px; padding: 6px 14px; border-radius: 999px; background: var(--bg-alt); color: var(--muted); font-size: .86rem; }
.account--owned #access-status .btn { margin: 10px 4px 0; padding: 10px 20px; font-size: .95rem; }
.account--owned .key-card > .note { margin-block: 18px 0; }
@media (max-width: 520px) { .account--owned #plan-status { font-size: 1.08rem; gap: 8px; } }

/* «Как начать»: три шага под кнопками главного экрана и пояснение над кнопкой «Создать ключ». */
.key-guide { max-inline-size: 40em; margin-block: 18px 6px; padding: 16px 20px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); text-align: start; }
.key-guide__title { margin: 0 0 8px; font-weight: 700; }
.key-guide ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 8px; }
.key-guide li { color: var(--on-navy-muted); font-size: .94rem; line-height: 1.45; }
.selling-hero .key-guide { margin-inline: auto; }
.key-intro { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--card-alt, rgb(0 0 0 / .04)); font-size: .95rem; line-height: 1.5; }