/* Внешний контур в стиле J «Один день в эфире»: главная, подборки, цены, журнал.
   Макет — svoiefir.pen, фреймы «A · Внешний / …». Цвета и размеры повторяют переменные макета.
   Всё лежит под классами .j-…: кабинет и вход (static/site/site.css) этих правил не видят.
   Секция с классом .j-night берёт ночные значения тех же переменных — как тема «ночь» в макете. */

:root {
  --j-bg: #F2EFE9; --j-surface: #FBFAF6; --j-paper: #E9E5DC; --j-ink: #191613; --j-muted: #615C54; --j-line: #DAD5CA;
  --j-accent: #C8401A; --j-accent-soft: #F6E2DA; --j-on-accent: #FFF9F6; --j-glow: #F08A3C; --j-halo: #F08A3CAA;
  --j-gold: #C9A765; --j-gold-soft: #E9D9B4; --j-cream: #F3EEE4; --j-cream-muted: #F3EEE4B8; --j-cream-line: #F3EEE466; --j-cream-faint: #F3EEE480;
  --j-dark: #151210; --j-dark-2: #2A2520; --j-dark-muted: #A9A297; --j-night: #0D0B09; --j-hair: #FFFFFF1F; --j-glass: #FFFFFF12;
  --j-panel-ink: #453A27; --j-panel-edge: #8F8263;
  --j-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --j-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --j-ease: cubic-bezier(.16, 1, .3, 1);
  /* сетка макета: слева рейка времени, справа такое же поле; при ширине больше 1440 страница стоит по центру */
  --j-rail: 120px;
  --j-edge: max(0px, (100vw - 1440px) / 2);
  /* тема: день */
  --t-ink: var(--j-ink); --t-muted: var(--j-muted); --t-line: var(--j-line); --t-strong: var(--j-ink); --t-surface: var(--j-surface);
  --t-btn: var(--j-ink); --t-btn-text: var(--j-surface); --t-link: #19161366; --t-lamp: var(--j-accent); --t-cap: var(--j-muted);
}
.j-night {
  --t-ink: var(--j-cream); --t-muted: var(--j-cream-muted); --t-line: var(--j-hair); --t-strong: var(--j-cream-line); --t-surface: #1F1B17;
  --t-btn: var(--j-cream); --t-btn-text: var(--j-ink); --t-link: var(--j-cream-line); --t-lamp: var(--j-glow); --t-cap: var(--j-gold);
}
.j-night.j-night { color: var(--j-cream); }
@media (max-width: 1279px) { :root { --j-rail: 72px; } }
@media (max-width: 899px) { :root { --j-rail: 20px; } }
@media (min-width: 600px) and (max-width: 899px) { :root { --j-rail: 40px; } }

body:has(.j-page) { background: var(--j-bg); }
.j-page, .j-header, .j-footer, .j-strip, .j-tabbar { color-scheme: light; font: 400 17px/1.5 var(--j-sans); color: var(--t-ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.j-page { overflow-x: clip; }
.j-wrap { width: min(1200px, 100% - 2 * var(--j-rail)); margin-inline: auto; }
.j-ico { width: 20px; height: 20px; flex: none; fill: currentColor; }
.j-mono { font-family: var(--j-mono); font-weight: 500; }

/* ── шапка ─────────────────────────────────────────────────────────────── */
.j-header { position: relative; z-index: 6; background: var(--j-bg); border-bottom: 1px solid var(--j-line); }
.j-header--over { position: absolute; inset: 0 0 auto; background: none; border-bottom: 0; }
.j-header__in { width: min(1200px, 100% - 2 * var(--j-rail)); margin-inline: auto; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.j-logo { display: block; flex: none; }
.j-logo img { display: block; width: 129px; height: 30px; }
.j-header__left { display: flex; align-items: center; gap: 40px; min-width: 0; }
/* девиз объясняет солнце и луну на рейке; меню отодвинуто от него вправо, чтобы левая часть не была перегружена */
.j-motto { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 12px/16px var(--j-mono); color: var(--j-muted); white-space: nowrap; }
.j-motto i { width: 28px; height: 1px; background: var(--j-ink); }
.j-motto .j-ico { width: 15px; height: 15px; color: var(--j-ink); }
.j-motto .j-ico:first-child { color: var(--j-accent); }
.j-nav { display: flex; gap: 32px; margin-left: 72px; font-size: 15px; font-weight: 500; }
.j-nav a { color: var(--j-ink); text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid transparent; transition: border-color .2s var(--j-ease); }
.j-nav a:hover, .j-nav a[aria-current="page"] { border-bottom-color: var(--j-ink); }
.j-header__act { display: flex; align-items: center; gap: 20px; }
.j-header__login.j-header__login { color: var(--j-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.j-header__login:hover { text-decoration: underline; text-underline-offset: 5px; }
.j-days.j-days { display: flex; align-items: center; gap: 8px; color: var(--j-ink); font: 500 12.5px/16px var(--j-mono); text-decoration: none; white-space: nowrap; }
.j-days::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--j-accent); box-shadow: 0 0 10px var(--j-halo); }
.j-days.j-days.is-soon { color: var(--j-accent); }
.j-acc.j-acc { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 20px; border-left: 1px solid var(--j-line); color: var(--j-ink); font: 500 14px/18px var(--j-sans); text-decoration: none; }
.j-acc__ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--j-line); border-radius: 50%; }
.j-acc__ico .j-ico { width: 15px; height: 15px; }
.j-acc__who { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-acc:hover .j-acc__ico { border-color: var(--j-ink); }
.j-logo--soon img { animation: j-blink 2.4s ease-in-out infinite; }
@keyframes j-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .j-logo--soon img { animation: none; opacity: .7; } }
@media (max-width: 1279px) { .j-motto { display: none; } .j-nav { margin-left: 8px; } }
@media (max-width: 1439px) { .j-header__in:has(.j-acc) .j-motto { display: none; } .j-header__in:has(.j-acc) .j-nav { margin-left: 8px; } }

/* ── кнопки, ссылки, мелкие детали ─────────────────────────────────────── */
/* удвоенный класс — чтобы цвет ссылки-кнопки был сильнее правила «.site a» из site.css */
.j-btn.j-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px;
  background: var(--t-btn); color: var(--t-btn-text); font: 600 16px/1 var(--j-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--j-ease), opacity .2s var(--j-ease), background-color .2s var(--j-ease); }
.j-btn:hover { opacity: .88; }
.j-btn:active { transform: scale(.98); }
.j-btn[disabled], .j-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.j-btn.j-btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.j-btn.j-btn--cream { background: var(--j-cream); color: var(--j-ink); }
.j-btn.j-btn--line { background: none; border-color: var(--j-cream-line); color: var(--j-cream); }
.j-btn.j-btn--line:hover { opacity: 1; border-color: var(--j-cream); }
.j-header .j-btn.j-btn { color: #fff; }
.j-link.j-link { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid var(--t-link); color: var(--t-ink); font: 600 16px/1.25 var(--j-sans); text-decoration: none; transition: border-color .2s var(--j-ease); }
.j-link:hover { border-bottom-color: var(--t-ink); }
.j-eyebrow, .j-cap { margin: 0; font: 600 12px/15px var(--j-sans); letter-spacing: 2.2px; text-transform: uppercase; color: var(--t-cap); }
.j-eyebrow { display: flex; align-items: center; gap: 10px; }
.j-eyebrow::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--j-muted); }
.j-night .j-eyebrow::before { background: var(--j-glow); box-shadow: 0 0 10px var(--j-halo); }
.j-cap { font-size: 11px; line-height: 14px; letter-spacing: 1.8px; }
.j-play { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%; background: var(--j-accent); color: var(--j-on-accent); cursor: pointer; transition: transform .2s var(--j-ease); }
.j-play:hover { transform: scale(1.05); }
.j-play[disabled] { opacity: .45; cursor: default; transform: none; }
.j-play--lg { width: 56px; height: 56px; }
.j-play .j-ico { width: 22px; height: 22px; }
.j-ico--pause, [data-playing="1"] > .j-ico--play, .is-playing > .j-ico--play { display: none; }
[data-playing="1"] > .j-ico--pause, .is-playing > .j-ico--pause { display: block; }
.j-onair { display: flex; align-items: center; gap: 7px; font: 600 10.5px/13px var(--j-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--j-accent); }
.j-onair::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.j-page {
  /* заголовки: первая строка плотная, остальные лёгкие и приглушённые */
  .j-h1, .j-h2 { margin: 0; font-weight: 600; text-wrap: balance; color: var(--t-ink); }
  .j-h1 { font-size: clamp(36px, 5.84vw, 84px); line-height: 1.03; letter-spacing: -.04em; }
  .j-h2 { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.0393em; }
  .j-h1 span, .j-h2 span { display: block; font-weight: 300; color: var(--t-muted); }
  .j-night .j-h1 span, .j-night .j-h2 span { color: var(--j-gold-soft); }
  .j-lead { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.5; color: var(--t-muted); }
  .j-head { display: grid; gap: 22px; }
  .j-sec { padding-block: 120px; background: var(--j-bg); }
  .j-sec > .j-wrap { display: grid; gap: 64px; }
  .j-sec--paper { background: var(--j-paper); }
  .j-sec--gold { background: var(--j-gold-soft); }
  .j-sec--eve { background: var(--j-dark-2); }
  .j-sec--late { background: var(--j-dark); }
  input.j-input { width: 100%; height: 52px; min-height: 0; padding: 0 18px; border: 1px solid var(--j-line); border-radius: 8px; background: var(--j-surface); color: var(--j-ink); font: 400 15px/1 var(--j-sans); }
  input.j-input::placeholder { color: var(--j-muted); }
  input.j-input:focus { outline: 0; border-color: var(--j-ink); box-shadow: none; }
  .j-log { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; color: var(--j-cream); }
  .j-log::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--j-glow); box-shadow: 0 0 12px var(--j-halo); }
  .j-chip { height: 36px; padding: 0 16px; border: 1px solid var(--j-line); border-radius: 999px; background: var(--j-surface); color: var(--j-ink); font: 500 14px/1 var(--j-sans); white-space: nowrap; cursor: pointer; }
  .j-chip.is-on { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-surface); }
  .j-round { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--j-line); border-radius: 50%; background: var(--j-surface); color: var(--j-ink); cursor: pointer; transition: transform .2s var(--j-ease); }
  .j-round:hover { transform: scale(1.08); }
  .j-round .j-ico { width: 14px; height: 14px; }
  .j-tag { padding: 4px 9px; border: 1px solid var(--j-ink); border-radius: 999px; font: 600 10px/13px var(--j-sans); letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; }
}

/* ── рейка времени: линия, солнце, луна и часы закреплены в окне ─────────── */
.j-sky { position: fixed; top: 0; bottom: 0; left: var(--j-edge); width: var(--j-rail); z-index: 5; pointer-events: none; }
.j-sky__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgb(140 130 115 / .38);
  -webkit-mask-image: linear-gradient(#000 0 var(--gap-a, 0px), transparent var(--gap-a, 0px) var(--gap-b, 0px), #000 var(--gap-b, 0px));
          mask-image: linear-gradient(#000 0 var(--gap-a, 0px), transparent var(--gap-a, 0px) var(--gap-b, 0px), #000 var(--gap-b, 0px)); }
.j-sky__orb { position: absolute; left: 50%; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.j-sky__orb > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); max-width: none; }
.j-sky__halo { width: 2.6em; height: 2.6em; border-radius: 50%; font-size: var(--d, 28px); background: radial-gradient(closest-side, var(--glow, #F08A3C) 0, transparent 100%); opacity: .34; }
.j-sky__orb .j-ico { display: block; width: var(--d, 28px); height: var(--d, 28px); color: var(--tone, var(--j-accent)); }
/* луна днём цвета текста, как в девизе; над ночной секцией светлеет и получает свечение */
.j-sky__moon { --tone: var(--j-ink); --glow: #FFF6E0; }
.j-sky__moon.is-night { --tone: #FFF6E0; }
.j-sky__moon .j-ico { transition: color .35s; }
.j-sky__moon .j-sky__halo { opacity: 0; transition: opacity .35s; }
.j-sky__moon.is-night .j-sky__halo { opacity: var(--shine, .3); }
.j-sky__clock { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); font: 500 12px/16px var(--j-mono); white-space: nowrap; color: var(--j-ink); transition: color .35s; will-change: transform; }
.j-sky__clock.is-night { color: var(--j-cream); }

.j-page {
  /* ── 08:00. Первый экран ───────────────────────────────────────────────── */
  .j-hero { position: relative; background: var(--j-bg) var(--photo) center / cover no-repeat; }
  .j-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(to bottom, #F2EFE9CC 0, #F2EFE900 14%, #F2EFE900 62%, #F2EFE9F2 88%, #F2EFE9 100%),
    linear-gradient(to left, #F2EFE900 0, #F2EFE900 30%, #F2EFE9D9 58%, #F2EFE9F5 100%); }
  .j-hero__in { position: relative; display: flex; flex-direction: column; min-height: 960px; padding: 132px 0 63px; }
  .j-hero .j-h1 { margin: 15px 0 0 -4px; }
  .j-hero__lead { max-width: 560px; margin-top: 23px; }
  .j-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
  .j-hero__note { margin: 14px 0 0; font-size: 13.5px; line-height: 17px; color: var(--j-muted); }
  .j-hero__spacer { flex: 1; min-height: 33px; }
  .j-hint { display: flex; align-items: center; gap: 8px; align-self: flex-end; height: 30px; margin: 0 0 14px; padding: 0 12px; border-radius: 999px; background: #0D0B09B8; color: var(--j-cream); font: 600 11px/14px var(--j-sans); letter-spacing: 1.2px; text-transform: uppercase; }
  .j-hint .j-ico { width: 14px; height: 14px; }

  .j-player { display: flex; align-items: center; gap: 28px; min-height: 96px; padding: 0 28px 0 20px; border: 1px solid var(--j-line); border-radius: 20px; background: #FBFAF6EB;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 16px 40px #19161326; }
  .j-player__track { display: grid; gap: 3px; width: 170px; flex: none; min-width: 0; }
  .j-player__track b { font: 600 18px/23px var(--j-sans); letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .j-player__track > span:last-child { font-size: 13px; line-height: 17px; color: var(--j-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .j-player__run { flex: 1; display: grid; gap: 10px; align-self: stretch; align-content: center; padding-inline: 28px; border-inline: 1px solid var(--j-line); margin-block: 24px; }
  .j-player__meta { display: flex; justify-content: space-between; font: 500 11.5px/15px var(--j-mono); text-transform: uppercase; }
  .j-player__meta span:last-child { font-weight: 400; color: var(--j-muted); }
  .j-player__line, .j-strip__line { height: 3px; border-radius: 2px; background: var(--j-line); overflow: hidden; }
  .j-player__line i, .j-strip__line i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--j-accent); }
  .j-player__genre { display: grid; gap: 5px; flex: none; }
  .j-player__genre label { font: 600 10.5px/13px var(--j-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--j-muted); }
  .j-select { position: relative; display: flex; align-items: center; }
  .j-select select { appearance: none; min-height: 0; padding: 0 22px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--j-ink); font: 600 16px/20px var(--j-sans); cursor: pointer; }
  .j-select select:focus-visible { outline: 2px solid var(--j-ink); outline-offset: 4px; border-radius: 4px; }
  .j-select .j-ico { position: absolute; right: 0; width: 14px; height: 14px; color: var(--j-muted); pointer-events: none; }
  .j-player__chips { display: none; }

  .j-facts { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin: 46px 0 0; padding: 18px 0 0; border-top: 1px solid var(--j-line); list-style: none; }
  .j-facts li { display: flex; align-items: center; gap: 10px; font: 500 15px/20px var(--j-sans); }

  /* ── 11:00. Программа подборок ─────────────────────────────────────────── */
  .j-prog { --now: 460px; --link: 60px; --row: 0; }
  .j-prog__head, .j-prog__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--link) var(--now); }
  .j-prog__head { align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--j-ink); }
  .j-prog__cols { display: grid; grid-template-columns: 36px minmax(0, 1fr) 160px 36px; column-gap: 20px; }
  .j-prog__air { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .j-prog__count { font-size: 12px; line-height: 16px; color: var(--j-muted); }
  .j-prog__list { margin: 0; padding: 0; list-style: none; }
  .j-prog__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 160px 36px; column-gap: 20px; align-items: center; height: 76px; border-bottom: 1px solid var(--j-line); }
  .j-prog__row:last-child { border-bottom: 0; }
  .j-prog__row.is-on { border-bottom-color: var(--j-ink); }
  .j-prog__n { font-size: 13px; color: var(--j-muted); }
  .j-prog__row.is-on .j-prog__n { color: var(--j-ink); }
  .j-prog__name { display: flex; align-items: center; gap: 16px; min-width: 0; color: var(--j-ink); text-decoration: none; font: 500 24px/31px var(--j-sans); letter-spacing: -.6px; }
  .j-prog__name img { width: 64px; height: 44px; flex: none; border-radius: 3px; object-fit: cover; }
  .j-prog__name > span:not(.j-tag) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .j-prog__name:hover > span:not(.j-tag) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .j-prog__row.is-on .j-prog__name { font-weight: 600; }
  .j-prog__row:not(.is-on) .j-tag { display: none; }
  .j-prog__genres { font-size: 15px; line-height: 19px; color: var(--j-muted); }
  .j-prog__row.is-on .j-prog__genres { color: var(--j-ink); }
  .j-prog__row.is-on .j-round { border-color: var(--j-accent); background: var(--j-accent); color: var(--j-on-accent); }
  .j-prog__link { position: relative; }
  .j-prog__link::before { content: ""; position: absolute; left: 10px; right: 0; top: calc(var(--row) * 76px + 38px); height: 1px; background: var(--j-ink); transition: top .35s var(--j-ease); }
  .j-prog__now { display: flex; flex-direction: column; margin: 0; min-height: 0; }
  .j-prog__now img { flex: 1; width: 100%; min-height: 0; height: 100px; object-fit: cover; }
  .j-prog__line { height: 2px; background: var(--j-line); }
  .j-prog__line i { display: block; width: 0; height: 100%; background: var(--j-ink); }
  .j-prog__now figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0 20px; }
  .j-prog__now figcaption div { display: grid; gap: 4px; min-width: 0; }
  .j-prog__now b { font: 600 20px/26px var(--j-sans); letter-spacing: -.3px; }
  .j-prog__now figcaption div span { font-size: 14px; line-height: 18px; color: var(--j-muted); }
  .j-prog__now .j-mono { padding-top: 5px; font-size: 14px; line-height: 18px; white-space: nowrap; }
  .j-prog__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--j-ink); font-size: 14px; }

  /* ── 14:00. Документы: образец сертификата с выносками ─────────────────── */
  .j-docs__top { display: flex; align-items: flex-end; gap: 60px; }
  .j-docs__top .j-head { flex: 1; }
  .j-docs__text { width: 440px; flex: none; margin: 0; font-size: 17px; line-height: 1.55; }
  .j-docs__show, .j-try { display: grid; grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr); }
  .j-sec > .j-wrap > .j-try { margin-top: -8px; }
  .j-cert { grid-column: 2; grid-row: 1; height: 720px; padding: 12px; border: 1px solid var(--j-line); border-radius: 3px; background: var(--j-surface); box-shadow: 0 20px 50px #19161318; }
  .j-cert__in { display: flex; flex-direction: column; height: 100%; padding: 30px 36px 28px; border: 1px solid var(--j-line); }
  .j-cert__top { display: flex; align-items: center; justify-content: space-between; }
  .j-cert__brand { display: flex; align-items: center; gap: 9px; font: 600 18px/23px var(--j-sans); letter-spacing: -.3px; }
  .j-cert__brand::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--j-ink); border-radius: 50%; }
  .j-cert__stamp { padding: 5px 10px; border: 1px solid var(--j-muted); border-radius: 3px; font: 600 11px/14px var(--j-sans); letter-spacing: 2.6px; text-transform: uppercase; color: var(--j-muted); }
  .j-cert__title { position: relative; display: grid; gap: 12px; padding: 72px 0 44px; }
  .j-cert__title b { font: 600 48px/50px var(--j-sans); letter-spacing: -1.9px; }
  .j-cert__title .j-mono { font-size: 16px; line-height: 21px; }
  .j-cert__fields { margin: 0; }
  .j-cert__fields > div { padding: 20px 0; border-top: 1px solid var(--j-line); }
  .j-cert__fields dt { position: relative; margin-bottom: 6px; font: 600 10px/13px var(--j-sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--j-muted); }
  .j-cert__fields dd { margin: 0; font: 500 18px/23px var(--j-sans); overflow-wrap: break-word; }
  .j-cert__fields .j-cert__main { padding: 22px 0 26px; border-block: 1px solid var(--j-ink); }
  .j-cert__main dt { margin-bottom: 8px; color: var(--j-ink); }
  .j-cert__main dd { font: 600 26px/1.15 var(--j-sans); letter-spacing: -.7px; }
  .j-cert__fields .j-cert__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 0; border-bottom: 1px solid var(--j-line); }
  .j-cert__pair > div { min-width: 0; }
  .j-cert__pair dd { font-size: 17px; line-height: 22px; }
  .j-cert__pair .j-cert__muted { font-weight: 400; color: var(--j-muted); }
  .j-cert__check { position: relative; margin: auto 0 0; font-size: 13px; line-height: 17px; color: var(--j-muted); }
  .j-cert__check .j-mono { margin-left: 4px; color: var(--j-ink); }
  .j-mark { display: none; }
  .j-docs__points { display: contents; }
  .j-docs__points li { position: relative; grid-row: 1; align-self: start; display: grid; gap: 8px; }
  .j-docs__points li > .j-mono { font-size: 13px; line-height: 17px; color: var(--j-muted); }
  .j-docs__points h3 { margin: 0; font: 600 20px/1.2 var(--j-sans); letter-spacing: -.3px; }
  .j-docs__points p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--j-muted); }
  .j-docs__points li::before { content: ""; position: absolute; top: -18px; height: 1px; background: var(--j-ink); }
  .j-docs__points li::after { content: ""; position: absolute; top: -23px; width: 10px; height: 10px; border: 1.5px solid var(--j-ink); border-radius: 50%; background: var(--j-surface); }
  .j-docs__p1 { grid-column: 1; margin-top: 423px; padding-right: 60px; }
  .j-docs__p1::before { left: 0; right: -25px; }
  .j-docs__p1::after { right: -35px; }
  .j-docs__p2, .j-docs__p3 { grid-column: 3; padding-left: 40px; }
  .j-docs__p2 { margin-top: 229px; }
  .j-docs__p2::before { left: -295px; right: 0; }
  .j-docs__p2::after { left: -305px; }
  .j-docs__p3 { margin-top: 528px; }
  .j-docs__p3::before { top: auto !important; bottom: -19px; left: -135px; right: 0; }
  .j-docs__p3::after { top: auto !important; bottom: -24px; left: -145px; }
  .j-try { align-items: center; }
  .j-try p { max-width: 300px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--j-muted); }
  .j-try__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ── 16:30. Как это работает ───────────────────────────────────────────── */
  .j-how__top { display: flex; align-items: flex-end; gap: 64px; }
  .j-how__top .j-head { flex: 1; }
  .j-how__gear { width: 380px; flex: none; padding-bottom: 6px; }
  .j-how__gear p { margin: 0; }
  .j-how__icons { display: flex; gap: 16px; margin-bottom: 16px !important; }
  .j-how__icons .j-ico { width: 22px; height: 22px; }
  .j-how__gear b { display: block; font-weight: 500; }
  .j-how__gear span { color: var(--j-muted); }
  .j-steps { display: flex; margin: 0; padding: 0; list-style: none; }
  .j-steps li { position: relative; min-width: 0; }
  .j-steps li:nth-child(1) { flex: 4; } .j-steps li:nth-child(2) { flex: 5; } .j-steps li:nth-child(3) { flex: 6; }
  .j-steps__n { display: block; height: 130px; margin-left: -11px; font: 200 144px/.9 var(--j-mono); color: var(--j-panel-ink); }
  .j-steps h3 { position: relative; margin: 0; padding: 44px 56px 0 0; font: 600 24px/1.2 var(--j-sans); letter-spacing: -.4px; }
  .j-steps p { margin: 12px 0 0; padding-right: 56px; font-size: 16px; line-height: 1.5; color: var(--j-muted); }
  /* шкала с делениями: линия, короткие деления через 20 px, длинные через 100 px, первая риска и лампа */
  .j-steps h3::before { content: ""; position: absolute; inset: 0 0 auto; height: 16px; border-top: 1px solid var(--j-panel-edge); background:
    linear-gradient(var(--j-ink), var(--j-ink)) 5px 0 / 1px 16px no-repeat,
    repeating-linear-gradient(90deg, var(--j-panel-edge) 0 1px, transparent 1px 100px) 5px 0 / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--j-panel-edge) 0 1px, transparent 1px 20px) 5px 0 / 100% 5px no-repeat; }
  .j-steps li:last-child h3::before { border-top: 2px solid var(--j-ink); }
  .j-steps h3::after { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border: 1.5px solid var(--j-ink); border-radius: 50%; background: var(--j-gold-soft); }

  /* ── 18:30. Переход день–ночь с призывом ───────────────────────────────── */
  .j-dusk { position: relative; background: var(--j-dark-2) var(--photo) center / cover no-repeat; }
  .j-dusk::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(to bottom, #E9D9B4 0, #E9D9B480 7%, #E9D9B400 24%, #2A252000 60%, #2A2520CC 86%, #2A2520 100%),
    linear-gradient(to left, #2A252000 0, #2A252000 36%, #2A2520B8 64%, #2A2520EB 100%); }
  .j-dusk__in { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: 60px 0 77px; }
  .j-dusk__photo { display: none; }
  .j-dusk__cta { display: grid; justify-items: start; gap: 24px; max-width: 640px; }
  .j-dusk__cta p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--j-cream); }
  .j-dusk__cta .j-btn { margin-top: 4px; }
  .j-dusk .j-log { margin-top: auto; padding-top: 35px; }

  /* ── 21:00. Вопросы ────────────────────────────────────────────────────── */
  .j-faq__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .j-faq__range { padding-bottom: 5px; font-size: 13px; letter-spacing: .6px; color: var(--j-dark-muted); }
  .j-faq { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column; column-gap: 48px; counter-reset: faq; border-bottom: 1px solid var(--t-line); }
  .j-faq details { padding: 26px 0; border-top: 1px solid var(--t-line); counter-increment: faq; }
  .j-faq details[open] { padding-bottom: 34px; border-top-color: var(--j-gold); }
  .j-faq summary { display: grid; grid-template-columns: 76px minmax(0, 1fr) 48px; align-items: start; list-style: none; cursor: pointer; font: 500 20px/1.3 var(--j-sans); letter-spacing: -.3px; color: var(--j-cream); }
  .j-faq summary::-webkit-details-marker { display: none; }
  .j-faq details[open] summary { font-weight: 600; }
  .j-faq summary::before { content: counter(faq, decimal-leading-zero); padding: 5px 0 0 20px; font: 500 13px/17px var(--j-mono); letter-spacing: 0; color: var(--j-dark-muted);
    background: radial-gradient(circle at 4px 13px, #F3EEE426 0 4px, transparent 4.5px); }
  .j-faq details[open] summary::before { color: var(--j-gold); background: radial-gradient(circle at 4px 13px, var(--j-glow) 0 4px, #F08A3C55 4.5px, transparent 9px); }
  .j-faq summary::after { content: ""; justify-self: end; width: 18px; height: 18px; margin-top: 4px; background:
    linear-gradient(var(--j-dark-muted), var(--j-dark-muted)) center / 14px 1.5px no-repeat, linear-gradient(var(--j-dark-muted), var(--j-dark-muted)) center / 1.5px 14px no-repeat; }
  .j-faq details[open] summary::after { background: linear-gradient(var(--j-gold), var(--j-gold)) center / 14px 1.5px no-repeat; }
  .j-faq summary:focus-visible { outline: 2px solid var(--j-gold); outline-offset: 6px; border-radius: 4px; }
  .j-faq details p { max-width: 452px; margin: 14px 0 0 76px; font-size: 17px; line-height: 1.55; color: var(--j-cream-muted); }

  /* ── 23:00. Призыв ─────────────────────────────────────────────────────── */
  .j-close { position: relative; background: var(--j-night) var(--photo) center / cover no-repeat; }
  .j-close::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(to right, #0D0B09F0 0, #0D0B09A6 7%, #0D0B0900 17%, #0D0B0900 100%),
    linear-gradient(to bottom, #151210 0, #0D0B09A6 22%, #0D0B0900 50%, #0D0B09A6 80%, #0D0B09 100%),
    radial-gradient(55% 62.5% at 50% 46%, #0D0B09F0 0, #0D0B09A6 55%, #0D0B0900 100%); }
  .j-close__in { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 789px; padding-top: 208px; text-align: center; }
  .j-close__cta { display: grid; justify-items: center; gap: 40px; }
  .j-close__cta p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--j-cream-muted); }
  .j-close__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding-top: 8px; }
  .j-log--center { align-self: stretch; justify-content: center; margin-top: auto; padding: 26px 0; border-block: 1px solid var(--j-hair); font-size: 12px; letter-spacing: .6px; color: var(--j-cream-muted); }
  .j-log--center .j-mono { font-weight: 400; }
  .j-log--center b { font-weight: 500; color: var(--j-gold); }
  .j-close .j-log--center::before { box-shadow: 0 0 10px var(--j-halo); }
}

/* ── цена: прейскурант и расчёт. Блок живёт и на главной, и на /ceny/, поэтому не привязан к .j-page ── */
.j-price {
  /* ── 19:00. Цена ───────────────────────────────────────────────────────── */
  .j-price__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); padding: 32px 0; border-top: 1px solid var(--t-line); }
  .j-price__row > .j-cap { padding-top: 8px; font-size: 12px; letter-spacing: 2.2px; }
  .j-price__tariff { display: grid; gap: 18px; margin: 0; }
  .j-price__tariff div { display: flex; align-items: flex-end; gap: 16px; }
  .j-price__tariff dt { font: 500 22px/28px var(--j-sans); letter-spacing: -.2px; }
  .j-price__tariff div::after { content: ""; order: 1; flex: 1; margin-bottom: 8px; border-bottom: 1px solid var(--t-line); }
  .j-price__tariff dd { order: 2; margin: 0; font-size: 15px; line-height: 22px; color: var(--t-muted); white-space: nowrap; }
  .j-price__tariff dd b { margin-right: 6px; font-size: 22px; line-height: 29px; color: var(--t-ink); }
  .j-price__row:nth-child(2) > .j-cap { padding-top: 14px; }
  .j-calc { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 56px; }
  .j-calc__item { display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--t-muted); }
  .j-calc__range { font-size: 12px; font-weight: 400; color: var(--j-dark-muted); }
  .j-stepper { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px; border: 1px solid var(--t-strong); border-radius: 999px; }
  .j-stepper button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--t-muted); cursor: pointer; }
  .j-stepper button:last-child { background: var(--j-glass); color: var(--t-ink); }
  .j-stepper button:hover { background: var(--j-glass); color: var(--t-ink); }
  .j-stepper .j-ico { width: 14px; height: 14px; }
  .j-stepper input[type=text] { width: 60px; height: 32px; min-height: 0; padding: 0; border: 1px solid var(--t-line); border-radius: 8px; background: none; box-shadow: none; color: var(--t-ink); font: 500 18px/24px var(--j-mono); text-align: center; cursor: text; transition: border-color .2s var(--j-ease); }
  .j-stepper input[type=text]:hover { border-color: var(--t-strong); }
  .j-stepper input[type=text]:focus { outline: 0; border-color: var(--t-ink); box-shadow: none; }
  .j-seg { display: flex; padding: 4px; border: 1px solid var(--t-strong); border-radius: 999px; }
  .j-seg label { position: relative; cursor: pointer; }
  .j-seg input { position: absolute; opacity: 0; pointer-events: none; }
  .j-seg label > span { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px; border-radius: 999px; font: 500 15px/19px var(--j-sans); color: var(--t-muted); }
  .j-seg label > span::before { content: ""; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--j-cream-faint); border-radius: 50%; }
  .j-seg small { font-size: 13px; color: var(--j-gold); }
  .j-seg input:checked + span { background: var(--j-glass); color: var(--t-ink); font-weight: 600; }
  .j-seg input:checked + span::before { border: 0; background: var(--j-glow); box-shadow: 0 0 10px var(--j-halo); }
  .j-seg input:focus-visible + span { outline: 2px solid var(--t-ink); outline-offset: 2px; }
  #quote { margin-top: 44px; }
  .j-quote { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
  .j-quote__sum { display: flex; align-items: flex-end; gap: 22px; margin: 0; }
  .j-quote__sum b { font-size: clamp(72px, 10.6vw, 152px); font-weight: 300; line-height: .9; letter-spacing: -.02em; word-spacing: -.4em; white-space: nowrap; }
  .j-quote__sum span { padding-bottom: 8px; font: 500 24px/31px var(--j-sans); color: var(--t-muted); white-space: nowrap; }
  .j-quote__cmp { width: 280px; margin: 0 0 10px; }
  .j-quote__cmp div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--t-line); }
  .j-quote__cmp dt { font-size: 18px; line-height: 24px; }
  .j-quote__cmp dd { margin: 0; font-size: 14px; line-height: 18px; color: var(--t-muted); }
  .j-quote__cmp .is-dim dt { color: var(--j-dark-muted); }
  .j-price__note { margin: 20px 0 8px; font-size: 14px; line-height: 18px; color: var(--j-dark-muted); }
  .j-price__note .j-mono { font-size: 13px; font-weight: 400; color: var(--t-muted); }
  .j-price__row--incl { padding: 0; }
  .j-price__row--incl > .j-cap { padding-top: 21px; }
  .j-price__incl { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
  .j-price__incl ol { width: min(560px, 100%); margin: 0; padding: 0; list-style: none; counter-reset: incl; }
  .j-price__incl li { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--t-line); font-size: 17px; line-height: 22px; counter-increment: incl; }
  .j-price__incl li::before { content: counter(incl, decimal-leading-zero); font: 400 12px/16px var(--j-mono); color: var(--j-cream-faint); }

}

/* ── подвал ─────────────────────────────────────────────────────────────── */
.j-footer { background: var(--j-night); color: var(--j-cream); }
.j-footer__in { width: min(1200px, 100% - 2 * var(--j-rail)); margin-inline: auto; padding: 80px 0 40px; }
.j-footer__top { display: flex; gap: 48px; }
.j-footer__brand { flex: 1; display: grid; gap: 18px; align-content: start; }
.j-footer__brand p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--j-cream-muted); }
.j-footer .j-logo img { width: 155px; height: 36px; }
.j-footer__col { width: 264px; }
.j-footer__col--wide { width: 360px; }
.j-footer h2 { margin: 0 0 22px; font: 600 12px/15px var(--j-sans); letter-spacing: 2.2px; text-transform: uppercase; color: var(--j-gold); }
.j-footer ol { margin: 0; padding: 0; list-style: none; counter-reset: f; border-bottom: 1px solid var(--j-hair); }
.j-footer li { counter-increment: f; border-top: 1px solid var(--j-hair); }
.j-footer li a { display: flex; align-items: center; gap: 16px; padding: 13px 0; color: var(--j-cream); font: 500 15px/19px var(--j-sans); text-decoration: none; }
.j-footer li a::before { content: counter(f, decimal-leading-zero); font: 400 12px/16px var(--j-mono); color: var(--j-cream-faint); }
.j-footer li a::after { content: "→"; margin-left: auto; font: 400 14px/1 var(--j-mono); color: var(--j-cream-faint); transition: transform .2s var(--j-ease), color .2s; }
.j-footer li a:hover::after { transform: translateX(3px); color: var(--j-cream); }
.j-footer__low { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 88px; font: 400 12px/16px var(--j-mono); letter-spacing: .4px; color: var(--j-cream-faint); }
.j-footer__low a { color: inherit; }

/* ── полоса плеера у низа окна ──────────────────────────────────────────── */
/* тёмная, на всю ширину, на всех страницах; на первом экране главной скрыта (j.js) */
.j-strip { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; gap: 22px; height: 88px; padding: 0 max(24px, var(--j-edge) + 24px) 0 max(20px, var(--j-edge) + 20px);
  border-top: 1px solid var(--j-hair); background: var(--j-night); color: var(--j-cream); transition: transform .45s var(--j-ease), opacity .3s; }
.j-strip[hidden] { display: flex; opacity: 0; pointer-events: none; transform: translateY(110%); }
.j-strip__track { display: grid; gap: 3px; width: 214px; flex: none; min-width: 0; }
.j-strip__track .j-onair { color: var(--j-gold); }
.j-strip__track .j-onair::before { background: var(--j-glow); }
.j-strip__track b { font: 600 16px/20px var(--j-sans); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-strip__track > span:last-child { font-size: 12.5px; line-height: 16px; color: var(--j-cream-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-strip__btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid var(--j-hair); border-radius: 50%; background: none; color: var(--j-cream); cursor: pointer; transition: border-color .2s var(--j-ease); }
.j-strip__btn[hidden], .j-strip__cta[hidden] { display: none; }
.j-strip__btn:hover { border-color: var(--j-cream-line); }
.j-strip__btn .j-ico { width: 16px; height: 16px; }
.j-strip__run { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 11.5px; line-height: 15px; }
.j-strip__run span:last-child { font-weight: 400; color: var(--j-cream-muted); }
.j-strip__line { flex: 1; height: 3px; border-radius: 2px; background: #F3EEE426; overflow: hidden; }
.j-strip__line i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--j-glow); }
body:has([data-j-strip]) .j-footer__in { padding-bottom: 128px; }

/* нижнее меню — только на телефоне */
.j-tabbar { display: none; }

/* панель бесплатного режима из base.html на внешних страницах не показываем: ею управляет полоса выше */
body:has(.j-page) .free-player { display: none; }
body:has(.j-page) .dialog { border-radius: 20px; background: var(--j-surface); color: var(--j-ink); font-family: var(--j-sans); }
body:has(.j-page) .dialog h2 { font: 600 26px/1.15 var(--j-sans); letter-spacing: -.6px; }
body:has(.j-page) .dialog p { color: var(--j-muted); }
body:has(.j-page) :is(.dialog, .cookie) .btn { font-family: var(--j-sans); }
body:has(.j-page) :is(.dialog, .cookie) .btn-primary { background: var(--j-ink); color: var(--j-surface); }
body:has(.j-page) :is(.dialog, .cookie) .btn-ghost { border-color: var(--j-line); color: var(--j-ink); }
body:has(.j-page) .cookie { border-color: var(--j-line); background: var(--j-surface); color: var(--j-ink); font-family: var(--j-sans); }

/* ── средние экраны: без выносок у сертификата, программа уже ───────────── */
@media (max-width: 1279px) {
  .j-page {
    .j-prog { --now: 360px; --link: 40px; }
    .j-prog__row, .j-prog__cols { grid-template-columns: 36px minmax(0, 1fr) 36px; }
    .j-prog__genres { display: none; }
    .j-docs__top, .j-how__top { flex-direction: column; align-items: stretch; gap: 28px; }
    .j-docs__text, .j-how__gear { width: auto; max-width: 640px; }
    .j-docs__show { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-items: start; }
    .j-cert { grid-column: 1; height: auto; min-height: 640px; }
    .j-mark { position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--j-ink); color: var(--j-surface); font: 500 9px/1 var(--j-mono); font-style: normal; transform: translateY(-50%); }
    .j-cert__title .j-mark { top: auto; bottom: 44px; transform: none; }
    .j-docs__points { display: grid; gap: 28px; grid-column: 2; margin: 0; padding: 0; list-style: none; }
    .j-docs__points li { grid-column: auto; grid-row: auto; margin: 0; padding: 0 0 0 34px; }
    .j-docs__points li::before, .j-docs__points li::after { display: none; }
    .j-docs__points li > .j-mono { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--j-ink); color: var(--j-surface); font-size: 9px; }
    .j-try { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 16px 40px; }
    .j-try p { grid-column: 2; grid-row: 1; }
    .j-try__fields { grid-column: 1; grid-row: 1; }
    .j-price__row { grid-template-columns: 150px minmax(0, 1fr); }
  }
  .j-nav { gap: 22px; }
}

/* ── телефон ─────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .j-header__in { height: 56px; }
  .j-header .j-logo img { width: 103px; height: 24px; }
  .j-nav, .j-header__login { display: none; }
  .j-header .j-btn--sm { height: 36px; padding: 0 14px; }

  .j-sky { left: 0; width: 40px; }
  .j-sky__line { display: none; }
  .j-sky__orb { left: 10px; }
  .j-sky__halo { width: 2.2em; height: 2.2em; }
  .j-sky__clock { left: 3px; font-size: 10.5px; line-height: 14px; letter-spacing: .04em; writing-mode: vertical-rl; }

  .j-page {
    .j-lead { font-size: 16px; }
    .j-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .j-head { gap: 16px; }
    .j-sec { padding-block: 64px; }
    .j-sec > .j-wrap { gap: 32px; }

    .j-hero { background-position: 62% 50%; }
    .j-hero::before { background: linear-gradient(to bottom, #F2EFE9F7 0, #F2EFE9F0 56%, #F2EFE980 67%, #F2EFE900 77%, #F2EFE900 88%, #F2EFE9D9 97%, #F2EFE9 100%); }
    .j-hero__in { min-height: max(768px, 100svh - 76px); padding: 84px 0 12px; }
    .j-hero .j-eyebrow { font-size: 10.5px; align-items: flex-start; }
    .j-hero .j-eyebrow::before { margin-top: 3px; }
    .j-hero .j-h1 { margin: 20px 0 0; font-size: min(36px, 9.2vw); line-height: 1.06; letter-spacing: -.039em; text-wrap: wrap; }
    .j-hero__lead { margin-top: 20px; }
    .j-hero__act { flex-direction: column; gap: 16px; margin-top: 20px; }
    .j-hero__act .j-btn { width: 100%; padding: 0 14px; font-size: min(16px, 4.1vw); }
    .j-hero__act .j-btn .j-ico { display: none; }
    .j-hero__act .j-link { font-size: 15px; padding-bottom: 4px; }
    .j-hero__note { margin-top: 20px; font-size: 13px; text-align: center; }
    .j-hint { margin: 0 8px 14px 0; }
    .j-player { flex-wrap: wrap; gap: 12px 14px; min-height: 0; margin-inline: -8px; padding: 14px 16px 14px 14px; border-radius: 20px; }
    .j-play--lg { width: 48px; height: 48px; }
    .j-play--lg .j-ico { width: 18px; height: 18px; }
    .j-player__track { flex: 1; width: auto; }
    .j-player__track b { font-size: 16px; line-height: 20px; }
    .j-player__track > span:last-child { font-size: 12.5px; }
    .j-player__run { flex: none; order: 3; width: 100%; margin: 0; padding: 0; border: 0; }
    .j-player__meta { position: absolute; right: 16px; top: 22px; display: grid; justify-items: end; gap: 7px; font-size: 10.5px; }
    .j-player__meta span:last-child { font-size: 11px; }
    .j-player__genre { display: none; }
    .j-player__chips { order: 4; display: flex; gap: 6px; width: 100%; padding-top: 2px; overflow-x: auto; scrollbar-width: none; }
    .j-player__chips .j-chip { height: 32px; padding: 0 11px; font-size: 13px; font-weight: 600; }
    .j-facts { display: block; margin: 0 calc(-1 * var(--j-rail)); padding: 16px var(--j-rail) 0; border-top: 0; background: var(--j-bg); }
    .j-hero__in { padding-bottom: 0; }
    .j-facts li { gap: 12px; min-height: 52px; border-bottom: 1px solid var(--j-line); }

    .j-prog__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
    .j-prog__head > span { display: none; }
    .j-prog__cols { grid-template-columns: 22px auto; column-gap: 12px; }
    .j-prog__cols > :nth-child(n + 3) { display: none; }
    .j-prog__body { display: block; }
    .j-prog__link { display: none; }
    .j-prog__row { grid-template-columns: 22px minmax(0, 1fr) 36px; column-gap: 12px; height: auto; min-height: 68px; padding: 12px 0; }
    .j-prog__row:last-child { border-bottom: 1px solid var(--j-line); }
    .j-prog__name { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 12px; font-size: 17px; line-height: 22px; letter-spacing: -.3px; }
    .j-prog__name img { grid-row: span 2; width: 48px; height: 36px; align-self: center; }
    .j-prog__name .j-tag { justify-self: start; padding: 2px 7px; font-size: 9px; }
    .j-prog__now { margin-top: 0; }
    .j-prog__now img { flex: none; height: 232px; }
    .j-prog__foot { align-items: flex-start; flex-direction: column; padding-top: 20px; font-size: 13px; line-height: 1.6; }

    .j-docs__top, .j-how__top { gap: 20px; }
    .j-docs__text { font-size: 16px; }
    .j-docs__show, .j-try { display: block; margin-top: 0; }
    .j-cert { min-height: 0; padding: 8px; }
    .j-cert__in { padding: 20px 20px 18px; }
    .j-cert__title { padding: 40px 0 26px; }
    .j-cert__title b { font-size: 34px; line-height: 38px; letter-spacing: -1.2px; }
    .j-cert__title .j-mark { bottom: 26px; }
    .j-cert__main dd { font-size: 20px; }
    .j-cert__pair dd { font-size: 15px; line-height: 20px; overflow-wrap: break-word; }
    .j-prog__list > .j-prog__now { border-bottom: 1px solid var(--j-ink); }
    .j-cert__check { margin-top: 32px; }
    .j-docs__points { margin-top: 8px; gap: 0; }
    .j-docs__points li { padding: 18px 0 18px 34px; border-bottom: 1px solid var(--j-line); }
    .j-docs__points li > .j-mono { top: 21px; }
    .j-docs__points h3 { font-size: 17px; }
    .j-try p { max-width: none; margin-bottom: 16px; }
    .j-try__fields { grid-template-columns: 1fr; gap: 10px; }
    .j-sec > .j-wrap > .j-try { margin-top: 0; }

    .j-steps { display: block; }
    .j-steps li + li { margin-top: 36px; }
    .j-steps__n { height: 80px; margin-left: -6px; font-size: 88px; }
    .j-steps h3 { padding: 36px 0 0; font-size: 20px; }
    .j-steps p { padding-right: 0; }

    .j-dusk { background: var(--j-dark-2); }
    .j-dusk::before { display: none; }
    .j-dusk__in { width: 100%; min-height: 0; padding: 0 0 28px; gap: 28px; }
    .j-dusk__photo { display: block; height: 330px; background: var(--photo) 30% center / cover no-repeat; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
    .j-dusk__photo::before { content: ""; display: block; height: 100%; background: linear-gradient(to bottom, #E9D9B4 0, #E9D9B480 7%, #E9D9B400 24%); }
    .j-dusk__cta, .j-dusk .j-log { margin-inline: var(--j-rail); }
    .j-dusk__cta { gap: 16px; margin-top: -84px; position: relative; }
    .j-dusk__cta p { font-size: 16px; color: var(--j-cream-muted); }
    .j-dusk__cta .j-btn { width: 100%; margin-top: 8px; }
    .j-dusk .j-log { margin-top: 0; padding-top: 0; font-size: 12px; }

    .j-price__row { display: block; padding: 24px 0; }
    .j-price__row > .j-cap { display: block; padding: 0 0 16px !important; }
    .j-price__tariff dt { font-size: 17px; line-height: 22px; }
    .j-price__tariff dd b { font-size: 17px; line-height: 22px; }
    .j-price__tariff dd { font-size: 13px; }
    .j-calc { display: grid; gap: 16px; }
    .j-calc__item { justify-content: space-between; }
    .j-calc__item > span:first-child { margin-right: auto; }
    .j-calc__range { display: none; }
    #quote { margin-top: 32px; }
    .j-quote { display: block; }
    .j-quote__sum { gap: 12px; }
    .j-quote__sum b { font-size: 72px; }
    .j-quote__sum span { font-size: 17px; line-height: 22px; padding-bottom: 6px; }
    .j-quote__cmp { width: auto; margin: 28px 0 0; }
    .j-price__row--incl { padding-top: 24px; }
    .j-price__incl { display: block; }
    .j-price__incl li { padding: 14px 0; font-size: 15px; }
    .j-price__incl .j-btn { width: 100%; margin-top: 28px; }

    .j-faq__range { font-size: 12px; }
    .j-faq { display: block; }
    .j-faq details { padding: 20px 0; }
    .j-faq details[open] { padding-bottom: 24px; }
    .j-faq summary { grid-template-columns: 44px minmax(0, 1fr) 28px; font-size: 16px; }
    .j-faq summary::before { padding-top: 2px; background-position: 0 -3px; }
    .j-faq details p { margin-left: 44px; font-size: 15px; }

    .j-close { background-position: 60% center; }
    .j-close::before { background: linear-gradient(to bottom, #151210 0, #0D0B09A6 20%, #0D0B0980 50%, #0D0B09A6 80%, #0D0B09 100%); }
    .j-close__in { min-height: 760px; padding: 40px 0 28px; justify-content: space-between; }
    .j-close__cta { gap: 28px; margin-block: auto; }
    .j-close .j-h1 { font-size: 36px; line-height: 1.08; letter-spacing: -1.3px; }
    .j-close__cta p { font-size: 16px; }
    .j-close__btns { display: grid; gap: 12px; width: 100%; padding: 0; }
    .j-log--center { margin-top: 0; padding: 22px 0; }
  }

  .j-footer__in { padding: 48px 0 calc(28px + 140px); }
  .j-footer__top { display: grid; gap: 40px; }
  .j-footer .j-logo img { width: 129px; height: 30px; }
  .j-footer__brand p { font-size: 16px; }
  .j-footer__col, .j-footer__col--wide { width: auto; }
  .j-footer__low { display: grid; margin-top: 40px; font-size: 11px; }


  .j-strip { inset: auto 0 76px; height: 64px; gap: 10px; padding: 0 10px 0 12px; border: 0; background: #FBFAF6F2; color: var(--j-ink); box-shadow: 0 -8px 28px #1916131F; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .j-strip[hidden] { transform: translateY(140%); }
  .j-strip .j-play { width: 40px; height: 40px; }
  .j-strip .j-play .j-ico { width: 15px; height: 15px; }
  .j-strip__track { flex: 1; width: auto; gap: 2px; }
  .j-strip__track .j-onair { display: none; }
  .j-strip__track b { font-size: 14.5px; line-height: 19px; }
  .j-strip__track > span:last-child { font-size: 12px; line-height: 15px; color: var(--j-muted); }
  .j-strip__btn { border: 0; color: var(--j-ink); }
  .j-strip__run { position: absolute; inset: 0 0 auto; display: block; }
  .j-strip__run span { display: none; }
  .j-strip__line { height: 2px; border-radius: 0; background: var(--j-line); }
  .j-strip__line i { background: var(--j-accent); }
  .j-strip__cta.j-strip__cta { display: none; }
  .j-strip.is-night { background: #1F1B17F2; color: var(--j-cream); box-shadow: 0 -8px 28px #00000059; }
  .j-strip.is-night .j-strip__track > span:last-child { color: var(--j-cream-muted); }
  .j-strip.is-night .j-strip__btn { color: var(--j-cream); }
  .j-strip.is-night .j-strip__line { background: #F3EEE426; }
  .j-strip.is-night .j-strip__line i { background: var(--j-glow); }
  body:has([data-j-strip]) .j-footer__in { padding-bottom: calc(28px + 140px); }
  .j-acc__who { display: none; }
  .j-acc.j-acc { padding-left: 0; border-left: 0; }
  .j-days.j-days { font-size: 11.5px; }
  .j-tabbar { position: fixed; inset: auto 0 0; z-index: 31; display: flex; align-items: center; height: 76px; padding: 0 8px env(safe-area-inset-bottom); border-top: 1px solid var(--j-line); background: var(--j-surface); }
  .j-tabbar a { flex: 1; display: grid; justify-items: center; gap: 6px; color: var(--j-muted); font: 500 11px/14px var(--j-sans); text-decoration: none; }
  .j-tabbar .j-ico { width: 22px; height: 22px; }
  .j-tabbar a[aria-current="page"] { color: var(--j-ink); font-weight: 600; }
  /* на тёмных секциях полоса плеера и меню темнеют вместе со страницей */
  .j-tabbar.is-night { border-top-color: var(--j-hair); background: #1F1B17; }
  .j-tabbar.is-night a { color: var(--j-dark-muted); }
  .j-tabbar.is-night a[aria-current="page"] { color: var(--j-cream); }
  body:has(.j-page) .cookie { bottom: 88px; }
}

/* ── один контур: «Музыка», страница жанра, цены ────────────────────────── */
.j-page {
  .j-h1--page { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.0393em; }
  .j-music, .j-genrepage { padding-block: 56px 96px; }
  .j-music > .j-wrap, .j-genrepage > .j-wrap { gap: 48px; }
  .j-btn.j-btn--ghost { background: none; border-color: var(--t-strong); color: var(--t-ink); }
  .j-btn [class~="j-ico"] { width: 16px; height: 16px; }
  .j-btn.j-btn.is-playing { background: none; border-color: var(--t-strong); color: var(--t-ink); }
  button.j-link { padding: 0 0 5px; border-width: 0 0 1px; border-style: solid; background: none; cursor: pointer; }
  a.j-chip { display: inline-flex; align-items: center; text-decoration: none; }

  .j-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 16px 20px 16px 24px; border: 1px solid var(--j-line); border-radius: 12px; background: var(--j-surface); }
  .j-notice p { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; line-height: 20px; }
  .j-notice p::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--j-accent); box-shadow: 0 0 10px var(--j-halo); }

  .j-genres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 24px; }
  .j-genre { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .j-genre__cover.j-genre__cover { position: relative; display: block; aspect-ratio: 588 / 280; background: var(--j-paper) var(--cover, none) center / cover no-repeat; overflow: hidden; }
  .j-genre__on { position: absolute; top: 14px; left: 14px; display: none; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 999px; background: #0D0B09B8; color: var(--j-cream); font: 600 10px/13px var(--j-sans); letter-spacing: 1.4px; text-transform: uppercase; }
  .j-genre__on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--j-glow); }
  .j-genre.is-on .j-genre__on { display: flex; }
  .j-genre__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--j-ink); }
  .j-genre__n { font-size: 12px; color: var(--j-muted); }
  .j-genre__head h2 { margin: 0; font: 600 32px/1.1 var(--j-sans); letter-spacing: -.03em; }
  .j-genre__vol { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--j-muted); white-space: nowrap; }
  .j-genre__note { margin: 0; font-size: 15px; line-height: 22px; color: var(--j-muted); }
  .j-genre__act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

  .j-genrepage__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 56px; align-items: end; }
  .j-genrepage__text { display: grid; gap: 18px; justify-items: start; }
  .j-crumbs { display: flex; gap: 10px; margin: 0 0 6px; font: 400 12px/16px var(--j-mono); color: var(--j-muted); }
  .j-crumbs a { color: inherit; text-decoration: none; }
  .j-crumbs a:hover { color: var(--j-ink); }
  .j-genrepage__act { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 10px; }
  .j-genrepage__cover { aspect-ratio: 380 / 214; background: var(--j-paper) var(--cover) center / cover no-repeat; }
  .j-tracks { display: grid; }
  .j-tracks__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 20px; }
  .j-tracks__head h2 { margin: 0; font: 600 28px/1.2 var(--j-sans); letter-spacing: -.02em; }
  .j-tracks__head span { font-size: 12px; font-weight: 400; color: var(--j-muted); }
  .j-tracks__cols, .j-track { display: grid; grid-template-columns: 36px minmax(0, 1fr) 124px 52px 124px 56px 36px; gap: 20px; align-items: center; }
  .j-tracks__cols { padding-bottom: 12px; border-bottom: 1px solid var(--j-ink); }
  .j-tracks__list { margin: 0; padding: 0; list-style: none; counter-reset: track; }
  .j-track { height: 64px; border-bottom: 1px solid var(--j-line); counter-increment: track; font-size: 14px; }
  .j-track::before { content: counter(track, decimal-leading-zero); font: 500 12px/16px var(--j-mono); color: var(--j-muted); }
  .j-track__title { font: 500 17px/22px var(--j-sans); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .j-track__mood, .j-track__vocal { color: var(--j-muted); }
  .j-track__bpm, .j-track__dur { font-size: 12.5px; font-weight: 400; color: var(--j-muted); }
  .j-track:has(.is-current) .j-track__title { color: var(--j-accent); }
  .j-track .j-round.is-current { border-color: var(--j-accent); background: var(--j-accent); color: var(--j-on-accent); }
  .j-tracks__more { display: flex; justify-content: flex-end; padding-top: 20px; }
  .j-fits { display: grid; gap: 14px; }
  .j-fits__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .j-prose { max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--j-muted); }

  .j-pricepage { padding-block: 72px 96px; }
  .j-pricepage > .j-wrap { gap: 48px; }
  .j-testnote { margin: 0; font: 500 13px/18px var(--j-mono); color: var(--j-gold); }
  .j-get__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: end; }
  .j-get__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin: 0; padding: 0; list-style: none; counter-reset: get; }
  .j-get__list li { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--j-ink); counter-increment: get; }
  .j-get__list li::before { content: counter(get, decimal-leading-zero); font: 500 12px/16px var(--j-mono); color: var(--j-muted); }
  .j-get__list h3 { margin: 0; font: 600 20px/1.25 var(--j-sans); letter-spacing: -.02em; }
  .j-get__list p { margin: 0; font-size: 15px; line-height: 22px; color: var(--j-muted); }
}
@media (max-width: 899px) {
  .j-page {
    .j-music, .j-genrepage { padding-block: 32px 56px; }
    .j-music > .j-wrap, .j-genrepage > .j-wrap, .j-pricepage > .j-wrap { gap: 32px; }
    .j-genres { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .j-genre__head h2 { font-size: 26px; }
    .j-genrepage__top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .j-genrepage__cover { order: -1; aspect-ratio: 350 / 180; }
    .j-genrepage__act .j-btn { flex: 1; }
    .j-tracks__cols { display: none; }
    .j-tracks__list { border-top: 1px solid var(--j-ink); }
    .j-track { grid-template-columns: 26px minmax(0, 1fr) auto 36px; gap: 12px; height: 60px; }
    .j-track__mood, .j-track__bpm, .j-track__vocal { display: none; }
    .j-track__title { font-size: 15.5px; }
    .j-pricepage { padding-block: 40px 56px; }
    .j-get__top, .j-get__list { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ── вход и оформление (зона B макета): служебная шапка, формы, шаги оформления, результат оплаты ───────────── */
/* Каркас — templates/web/j_gate.html. Меню сайта, полосы плеера и нижнего меню на этих страницах нет. */
.j-gate__act { gap: 14px; }
.j-gate__q { font-size: 15px; line-height: 20px; color: var(--j-muted); }
.j-gate__mail { font-size: 13px; font-weight: 400; color: var(--j-muted); }
.j-gate__act form { display: flex; margin: 0 0 0 10px; }
.j-gate__out { padding: 0; border: 0; background: none; color: var(--j-ink); font: 500 15px/20px var(--j-sans); cursor: pointer; }
.j-gate__out:hover { text-decoration: underline; text-underline-offset: 5px; }
.j-link.j-link.j-link--sm { padding-bottom: 4px; font-size: 15px; line-height: 20px; }
.j-page.j-gate { display: flex; flex-direction: column; min-height: calc(100vh - 73px); min-height: calc(100dvh - 73px); background: var(--j-bg); }
.j-page {
  .j-h1--gate { font-size: 46px; line-height: 1.05; letter-spacing: -.04em; }
  .j-h1--flow { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.0393em; }
  .j-eyebrow.is-on::before { background: var(--j-accent); box-shadow: 0 0 10px var(--j-halo); }
  .j-eyebrow.is-accent { color: var(--j-accent); }
  .j-btn.j-btn--wide { width: 100%; }
  .j-gate__msgs { display: grid; gap: 10px; }

  /* форма слева, фото справа на всю высоту окна */
  .j-auth { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .j-auth__form { order: 1; display: grid; align-content: start; gap: 26px; padding: 52px 120px 48px max(var(--j-rail), (100vw - 1200px) / 2); }
  .j-auth--plain .j-auth__form { padding-top: 72px; gap: 28px; }
  .j-auth__form > * { width: 100%; max-width: 480px; }
  .j-auth__photo { order: 2; display: flex; align-items: flex-end; min-height: 520px; padding: 32px; background: var(--j-dark) var(--photo) center / cover no-repeat; }
  .j-plate { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin: 0; padding: 0 12px; border-radius: 999px; background: #0D0B09B8; color: var(--j-cream); font-size: 11.5px; line-height: 1; white-space: nowrap; }
  .j-plate::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--j-glow); box-shadow: 0 0 8px var(--j-halo); }
  .j-auth .j-head { gap: 20px; }
  .j-auth .j-lead { font-size: 16px; }

  /* поля, галочки, сообщения */
  .j-form { display: grid; gap: 26px; }
  .j-form__fields { display: grid; gap: 18px; }
  .j-field { display: grid; gap: 8px; min-width: 0; }
  .j-field__in { position: relative; display: block; }
  .j-field :is(input:not([type=checkbox], [type=radio]), select, textarea) { width: 100%; height: 52px; min-height: 0; padding: 0 18px; border: 1px solid var(--j-line); border-radius: 8px;
    background-color: var(--j-surface); color: var(--j-ink); font: 400 15px/1.2 var(--j-sans); box-shadow: none; }
  .j-field :is(input:not([type=checkbox], [type=radio]), select, textarea):focus { outline: 0; border-color: var(--j-ink); box-shadow: none; }
  .j-field.is-error :is(input:not([type=checkbox], [type=radio]), select, textarea) { border-color: var(--j-accent); }
  .j-field select { -webkit-appearance: none; appearance: none; padding-right: 44px; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%23615C54' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; }
  .j-field__in:has(.j-field__eye) input { padding-right: 52px; }
  .j-field__eye { position: absolute; inset: 0 6px 0 auto; display: grid; place-items: center; width: 40px; padding: 0; border: 0; background: none; color: var(--j-muted); cursor: pointer; }
  .j-field__eye .j-ico { width: 16px; height: 16px; }
  .j-field__eye:hover, .j-field__eye[aria-pressed="true"] { color: var(--j-ink); }
  .j-field__hint { font-size: 13px; line-height: 1.45; color: var(--j-muted); }
  .j-field__err { font-size: 13px; line-height: 1.45; color: var(--j-accent); }
  .j-checks { display: grid; gap: 12px; }
  .j-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; cursor: pointer; }
  .j-check input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--j-muted); border-radius: 4px; background: none; cursor: pointer; }
  .j-check input:checked { border-color: var(--j-ink);
    background: var(--j-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23FBFAF6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .j-check input:focus-visible, .j-radio input:focus-visible { outline: 2px solid var(--j-ink); outline-offset: 2px; }
  .j-check a, .j-radio a, .j-flow__actnote a { color: inherit; text-underline-offset: 3px; }
  .j-alert { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border: 1px solid var(--j-line); border-radius: 8px; background: var(--j-surface); font-size: 14px; line-height: 1.4; }
  .j-alert--error { border-color: var(--j-accent); background: var(--j-accent-soft); }
  .j-alert .j-ico { width: 18px; height: 18px; color: var(--j-accent); }
  .j-form__forgot { margin: -4px 0 0; text-align: right; }
  .j-form__alt { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 14px; color: var(--j-muted); }
  .j-form__alt--sm { display: none; }
  .j-form__note { position: relative; margin: 6px 0 0; padding: 20px 0 0 18px; border-top: 1px solid var(--j-line); font-size: 13px; line-height: 1.45; color: var(--j-muted); }
  .j-form__note::before { content: ""; position: absolute; left: 0; top: 26px; box-sizing: border-box; width: 8px; height: 8px; border: 1.5px solid var(--j-muted); border-radius: 50%; }
  .j-form__acts { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
  .j-form__hint { margin: 0; font-size: 13px; color: var(--j-muted); }

  /* шаги оформления */
  .j-flow { flex: 1; padding-block: 40px 96px; }
  .j-flow > .j-wrap { display: grid; gap: 40px; }
  .j-flowsteps { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--j-muted); }
  .j-flowsteps li, .j-flowsteps a { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
  .j-flowsteps a { color: inherit; text-decoration: none; }
  .j-flowsteps a:hover { color: var(--j-ink); }
  .j-flowsteps li::before { content: ""; box-sizing: border-box; width: 8px; height: 8px; margin-right: 8px; border: 1.5px solid var(--j-muted); border-radius: 50%; }
  .j-flowsteps li.is-done::before { border: 0; background: var(--j-ink); }
  .j-flowsteps li[aria-current] { color: var(--j-ink); font-weight: 600; }
  .j-flowsteps li[aria-current]::before { border: 0; background: var(--j-accent); box-shadow: 0 0 10px var(--j-halo); }
  .j-flowsteps li:not(:last-child)::after { content: ""; width: 72px; height: 1px; margin-left: 4px; background: var(--j-line); }
  .j-flowsteps li.is-done::after { background: var(--j-ink); }
  .j-flowsteps .j-mono { font-size: 12px; font-weight: 400; color: var(--j-muted); }
  .j-skip { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; padding: 32px; border-radius: 8px; background: var(--j-gold-soft); }
  .j-skip h2 { margin: 0 0 8px; font: 600 30px/1.15 var(--j-sans); letter-spacing: -.03em; }
  .j-skip p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--j-panel-ink); }
  .j-flow__grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 440px); justify-content: space-between; gap: 40px 64px; align-items: start; }
  .j-flow__main { display: grid; min-width: 0; }
  .j-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px 24px; padding: 30px 0 34px; border-top: 1px solid var(--j-line); }
  .j-row > .j-cap { margin: 0; padding-top: 6px; font: 600 11px/14px var(--j-sans); letter-spacing: 1.8px; }
  .j-row__body { display: grid; gap: 16px; justify-items: start; min-width: 0; }
  .j-row__body > * { max-width: 100%; }
  .j-row__body--inline { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
  .j-ask__q { margin: 0 0 6px; font: 600 20px/1.25 var(--j-sans); letter-spacing: -.02em; }
  .j-ask__hint, .j-row__lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--j-muted); }
  .j-row__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--j-muted); }
  .j-row__aside { font-size: 14px; color: var(--j-muted); }
  .j-qty { display: flex; align-items: center; gap: 20px; }
  .j-qty__range { font-size: 12px; font-weight: 400; color: var(--j-muted); }
  /* счётчик и переключатель периода на светлом фоне; их тёмные собратья объявлены внутри .j-price */
  .j-stepper--light { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px; border: 1px solid var(--j-line); border-radius: 999px; background: var(--j-surface); }
  .j-stepper--light button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--j-line); border-radius: 50%; background: none; color: var(--j-ink); cursor: pointer; }
  .j-stepper--light button:hover { background: var(--j-paper); }
  .j-stepper--light button:last-child, .j-stepper--light button:last-child:hover { border-color: var(--j-ink); background: var(--j-ink); color: var(--j-surface); }
  .j-stepper--light .j-ico { width: 14px; height: 14px; }
  .j-stepper--light input[type=text] { width: 96px; height: 44px; min-height: 0; padding: 0; border: 1px solid var(--j-line); border-radius: 8px; background: var(--j-surface); box-shadow: none;
    color: var(--j-ink); font: 400 26px/32px var(--j-mono); text-align: center; }
  .j-stepper--light input[type=text]:focus { outline: 0; border-color: var(--j-ink); box-shadow: none; }
  .j-places { display: grid; width: 100%; }
  .j-place { position: relative; display: grid; gap: 16px; min-width: 0; margin: 0; padding: 22px 0 26px; border: 0; border-top: 1px solid var(--j-line); border-radius: 0; background: none; }
  .j-place legend { float: left; display: flex; align-items: baseline; gap: 14px; width: 100%; margin: 0 0 2px; padding: 0; font: 600 17px/1.3 var(--j-sans); }
  .j-place legend .j-mono { font-size: 12px; font-weight: 400; color: var(--j-muted); }
  .j-place__pair { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
  .j-place__del { position: absolute; top: 22px; right: 0; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--t-link); background: none; color: var(--j-ink); font: 600 14px/18px var(--j-sans); cursor: pointer; }
  .j-place__del input { position: absolute; opacity: 0; pointer-events: none; }
  .j-place__del .is-on, .j-place__del:has(input:checked) .is-off { display: none; }
  .j-place__del:has(input:checked) .is-on { display: inline; }
  .j-place:has(.j-place__del input:checked) > :is(.j-place__pair, .j-field) { opacity: .35; }
  .j-places__add { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 6px; }
  .j-places__why { font-size: 13px; color: var(--j-muted); }
  .j-flow__act { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--j-ink); }
  .j-flow__actnote { font-size: 13px; line-height: 1.45; color: var(--j-muted); }
  .j-flow__side { display: grid; gap: 32px; min-width: 0; }
  .j-sheet { padding: 28px 28px 20px; border: 1px solid var(--j-line); border-radius: 4px; background: var(--j-surface); }
  .j-sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--j-ink); }
  .j-sheet__head .j-mono { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--j-muted); }
  .j-sheet__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--j-line); font-size: 14px; line-height: 18px; color: var(--j-muted); }
  .j-sheet__row b { font-size: 14px; font-weight: 500; color: var(--j-ink); white-space: nowrap; }
  .j-sheet__row.is-accent b { color: var(--j-accent); }
  .j-sheet__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 0 6px; font-size: 14px; color: var(--j-muted); }
  .j-sheet__total b { font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -1px; color: var(--j-ink); white-space: nowrap; }
  .j-sheet__note { margin: 14px 0 6px; font-size: 13px; line-height: 1.45; color: var(--j-muted); }
  .j-why p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
  .j-why .j-why__note { font-size: 13px; color: var(--j-muted); }
  .j-why .j-cap, .j-lic .j-cap { margin: 0; font: 600 11px/14px var(--j-sans); letter-spacing: 1.8px; }
  .j-lic ol { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--j-line); }
  .j-lic li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--j-line); }
  .j-lic li .j-mono { padding-top: 3px; font-size: 12px; font-weight: 400; color: var(--j-muted); }
  .j-lic li b { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; }
  .j-lic li div span { font-size: 14px; color: var(--j-muted); }
  .j-lic p { margin: 14px 0 0; font-size: 13px; color: var(--j-muted); }
  .j-radio { display: flex; align-items: flex-start; gap: 14px; margin: 0; cursor: pointer; }
  .j-radio input, .j-radio > i { -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--j-muted); border-radius: 50%; background: none; }
  .j-radio input { cursor: pointer; }
  .j-radio input:checked { border-color: var(--j-ink); background: radial-gradient(circle, var(--j-accent) 0 4px, transparent 4.5px); }
  .j-radio b { display: block; font: 500 17px/1.3 var(--j-sans); }
  .j-radio input:checked + span b { font-weight: 600; }
  .j-radio small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--j-muted); }
  .j-radio--off { cursor: default; }
  .j-radio--off b { color: var(--j-muted); }
  .j-seg--light { display: flex; padding: 4px; border: 1px solid var(--j-line); border-radius: 999px; background: var(--j-surface); }
  .j-seg--light label { position: relative; cursor: pointer; }
  .j-seg--light input { position: absolute; opacity: 0; pointer-events: none; }
  .j-seg--light label > span { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 20px; border-radius: 999px; font: 500 15px/19px var(--j-sans); color: var(--j-muted); }
  .j-seg--light small { font-size: 13px; color: var(--j-muted); }
  .j-seg--light input:checked + span { background: var(--j-ink); color: var(--j-surface); font-weight: 600; }
  .j-seg--light input:checked + span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--j-glow); box-shadow: 0 0 10px var(--j-halo); }
  .j-seg--light input:checked + span small { color: var(--j-gold-soft); }
  .j-seg--light input:focus-visible + span { outline: 2px solid var(--j-ink); outline-offset: 2px; }

  /* результат оплаты */
  .j-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px 80px; align-items: center; padding-block: 56px 24px; }
  .j-result__msg { display: grid; gap: 28px; justify-items: start; }
  .j-wait { width: 320px; max-width: 100%; height: 3px; overflow: hidden; background: var(--j-line); }
  .j-wait i { display: block; width: 40%; height: 100%; background: var(--j-accent); animation: j-wait 1.6s ease-in-out infinite; }
  .j-gatefoot { border-top: 1px solid var(--j-line); }
  .j-gatefoot .j-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; padding-block: 28px; font-size: 13px; color: var(--j-muted); }
  .j-gatefoot .j-mono { font-size: 12px; font-weight: 400; }
  .j-gatefoot nav { display: flex; gap: 12px 28px; flex-wrap: wrap; }
  .j-gatefoot a { color: inherit; text-decoration: none; }
  .j-gatefoot a:hover { color: var(--j-ink); }
}
@keyframes j-wait { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .j-wait i { animation: none; width: 100%; opacity: .5; } }
@media (max-width: 1279px) {
  .j-page {
    .j-auth__form { padding-right: 56px; }
    .j-flow__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }
    .j-row { grid-template-columns: 130px minmax(0, 1fr); }
  }
}
@media (max-width: 899px) {
  .j-gate__q, .j-gate__mail { display: none; }
  .j-gate__out { font-size: 14px; }
  .j-page.j-gate { min-height: calc(100vh - 57px); min-height: calc(100dvh - 57px); }
  .j-page {
    .j-h1--gate { font-size: 32px; line-height: 1.06; letter-spacing: -1.2px; }
    .j-auth { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .j-auth__photo { order: 0; min-height: 0; height: 168px; padding: 16px; }
    .j-auth--plain .j-auth__photo { display: none; }
    .j-auth__form, .j-auth--plain .j-auth__form { padding: 28px var(--j-rail) 32px; gap: 24px; }
    .j-auth--plain .j-auth__form { padding-top: 36px; }
    .j-auth__form > * { max-width: none; }
    .j-auth .j-lead { font-size: 15px; }
    .j-form { gap: 24px; }
    .j-form__fields { gap: 16px; }
    .j-form__alt--sm { display: flex; }
    .j-form__acts { flex-direction: column; align-items: flex-start; gap: 18px; }
    .j-form__acts .j-btn { width: 100%; }
    .j-flow { padding-block: 24px 0; }
    .j-flow > .j-wrap { gap: 26px; }
    .j-flowsteps { gap: 10px; font-size: 13px; }
    .j-flowsteps li::before { margin-right: 0; }
    .j-flowsteps li:not(:last-child)::after { width: 28px; margin-left: 0; }
    .j-skip { padding: 20px; }
    .j-skip h2 { font-size: 22px; }
    .j-skip p { font-size: 15px; }
    .j-skip .j-btn { width: 100%; }
    /* одна колонка: разделы, лист и адреса, под ними кнопка в панели у низа экрана */
    .j-flow__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .j-flow__main { display: contents; }
    .j-row { order: 1; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0 26px; }
    .j-row > .j-cap { padding-top: 0; }
    .j-place__pair { grid-template-columns: minmax(0, 1fr); }
    .j-flow__side { order: 2; gap: 26px; margin-block: 4px 28px; }
    .j-sheet { padding: 24px 22px 18px; }
    .j-sheet__total b { font-size: 34px; }
    .j-flow__act { order: 3; position: sticky; bottom: 0; z-index: 3; flex-direction: column; align-items: stretch; gap: 14px; margin-inline: calc(-1 * var(--j-rail)); padding: 16px var(--j-rail) calc(16px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--j-line); background: var(--j-surface); text-align: center; }
    .j-flow__act .j-link { align-self: center; }
    .j-flow__actnote--info { display: none; }
    .j-result { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 12px 40px; }
    .j-result__msg { gap: 24px; }
    .j-result .j-btn { width: 100%; }
    .j-gatefoot .j-wrap { flex-direction: column-reverse; align-items: flex-start; gap: 14px; padding-block: 22px 26px; }
    .j-gatefoot nav { flex-direction: column; gap: 10px; }
    /* первый экран главной: в кадре стойка и бариста, а не середина зала */
    .j-hero { background-position: 78% center; }
  }
}