/* Лендинг Polymedia Experience Day (/experience/).
   Вёрстка по макету Figma er4ZboPS2lImbh6fT9AsZk (десктоп 1920), выгрузка и спецификация —
   design-handoff/experience/SPEC.md. Координаты в комментариях — из макета (px от левого края
   и от верха секции). От 1440 px страница — этот холст, масштабированный целиком (--xp-zoom,
   см. скрипт в <head>); ниже 1440 — адаптивная раскладка в потоке, блок «Адаптив» в конце файла. */

/* Шрифт макета — Formular (коммерческий, файлов в проекте нет). Если он установлен в системе,
   браузер возьмёт его по имени; иначе — Onest (OFL), близкий по пропорциям гротеск.
   Чтобы подключить Formular: положить woff2 в fonts/ и добавить @font-face с этим именем. */
@font-face {
  font-family: 'XP Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'XP Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'XP Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'XP Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --xp-font: Formular, 'XP Onest', system-ui, sans-serif;
  --xp-ui: 'XP Inter', Inter, system-ui, sans-serif;
  --bg0: #020812;
  --bg1: #071529;
  --bg2: #0a2139;
  --cyan: #7ee9ff;
  --cyan2: #8fecff;
  --light: #dcf5ff;
  --pass: #e5f7ff;
  --steel: #4d7b9f;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg0); -webkit-text-size-adjust: 100%; }
body.xp-body {
  margin: 0;
  background: var(--bg0);
  color: #fff;
  font-family: var(--xp-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.xp {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  zoom: var(--xp-zoom, 1);
}
/* Сброс — через :where(), с нулевой специфичностью: иначе «.xp button» (0,1,1) перебивает
   компонентные классы вроде .xp-btn (0,1,0) */
:where(.xp) :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; padding: 0; }
:where(.xp) :where(ul, ol) { list-style: none; }
:where(.xp) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
}
:where(.xp) img { display: block; }
:where(.xp) a { color: inherit; text-decoration: none; }
:where(.xp) :where(b, strong) { font-weight: 700; }
.xp-c { color: var(--cyan); }
.xp-up { text-transform: uppercase; }
.xp :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Секции во всю ширину окна, даже если оно шире 1920 */
.xp > section, .xp > .xp-ticker {
  position: relative;
  box-shadow: 0 0 0 100vmax var(--sec-bg, var(--bg0));
  clip-path: inset(0 -100vmax);
  background: var(--sec-bg, var(--bg0));
}

/* Кнопка «Регистрация +» (формы пока не подключены — кнопки без действия) */
.xp-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  width: 359px;
  height: 83px;
  padding: 0 26px;
  background: var(--cyan);
  color: #000;
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
  white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.xp-btn:hover { background: #a9f1ff; }

/* ============================== Хиро (0–989) ============================== */
.xp-hero { height: 989px; overflow: hidden; }
.xp-scene { position: absolute; inset: 0; }
.xp-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.xp-hero[data-mode="museum"] .xp-stage--museum,
.xp-hero[data-mode="theatre"] .xp-stage--theatre {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s var(--ease), visibility 0s;
}
.xp-layer {
  position: absolute;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  user-select: none;
}
.xp-layer.is-on { opacity: 1; }
.xp-stage--museum .xp-layer { left: 0; top: 85px; width: 1920px; height: 836px; }
.xp-layer--t-base { left: 0; top: 20px; width: 1920px; height: 893px; object-fit: cover; }
.xp-layer--people { left: 897px; top: 440px; width: 351px; height: 348px; }
.xp-layer--kinetic { left: 950px; top: 138px; width: 446px; height: 672px; }
.xp-layer--t-proj { left: 0; top: 46px; width: 1920px; height: 867px; }
.xp-stage__fade-l {
  position: absolute; left: 0; top: 0; width: 1183px; height: 989px;
  background: linear-gradient(to right, var(--bg0) 34%, rgba(2, 8, 18, 0) 100%);
}
.xp-stage__fade-r {
  position: absolute; right: 0; top: 0; width: 256px; height: 989px;
  background: linear-gradient(to left, var(--bg0), rgba(2, 8, 18, 0));
}
.xp-hero__title-bg {
  position: absolute; left: 0; top: 138px; width: 910px; height: 273px;
  background: linear-gradient(to right, #051120 79%, rgba(5, 17, 32, 0) 100%);
}
.xp-hero__bottom-fade {
  position: absolute; left: 0; top: 685px; width: 1920px; height: 236px;
  background: linear-gradient(to bottom, rgba(2, 8, 18, 0), var(--bg0));
}

/* Шапка (своя, не шаблона сайта): 1920×97. В макете слева 42 px, но логотип тогда выпадает
   влево из общей линии контента (71 px) — по просьбе заказчика выровнен по ней. */
.xp-head {
  position: absolute;
  left: 0; top: 0;
  width: 1920px; height: 97px;
  padding: 20px 66px 20px 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg0);
  z-index: 2;
}
.xp-head__right, .xp-head__nav { display: flex; align-items: center; gap: 40px; }
.xp-head__burger { display: none; }
.xp-head__nav a, .xp-head__reg {
  font-weight: 500;
  font-size: 32px;
  line-height: 39px;
  color: #fff;
  transition: color .2s var(--ease);
}
.xp-head__nav a:hover { color: var(--cyan); }
.xp-head__reg { height: 57px; padding: 0 17px; border: 1px solid var(--cyan); }
.xp-head__reg:hover { background: rgba(126, 233, 255, .1); }

.xp-hero__title {
  position: absolute; left: 71px; top: 153px;
  font-weight: 700; font-size: 64px; line-height: 78px;
}

/* Переключатель «Музеи x Театры» (71,432) 427×70 */
.xp-switch {
  position: absolute; left: 71px; top: 432px;
  width: 427px; height: 70px;
  border-radius: 84px;
  background: #0d1c2f;
  font-weight: 700; font-size: 38.4px; line-height: 47px;
}
.xp-switch__thumb {
  position: absolute; left: 5px; top: 5px;
  width: 192px; height: 60px;
  border-radius: 104px;
  background: #fff;
  transition: transform .45s var(--ease);
}
.xp-switch__opt, .xp-switch__x {
  position: absolute; top: 11px;
  color: #fff;
  transition: color .45s var(--ease), left .45s var(--ease);
}
.xp-switch__opt::before {           /* зона клика — во всю половину переключателя */
  content: ''; position: absolute; top: -11px; bottom: -12px; left: -33px; right: -33px;
}
.xp-switch__opt--museum { left: 38px; }
.xp-switch__opt--theatre { left: 254px; }
.xp-switch__x { left: 211px; pointer-events: none; }
.xp-hero[data-mode="museum"] .xp-switch__opt--museum,
.xp-hero[data-mode="theatre"] .xp-switch__opt--theatre { color: #050813; }
.xp-hero[data-mode="theatre"] .xp-switch__thumb { transform: translateX(225px); }
.xp-hero[data-mode="theatre"] .xp-switch__x { left: 190px; }

.xp-hero__reg { left: 68px; top: 712px; }

.xp-hero__facts { position: absolute; left: 0; top: 878px; }
.xp-fact { position: absolute; top: 0; white-space: nowrap; }
.xp-fact--when { left: 71px; }
.xp-fact--time { left: 544px; }
.xp-fact--place { left: 1052px; }
.xp-fact dt { font-weight: 500; font-size: 24px; line-height: 29px; }
.xp-fact dd { margin-top: 6px; font-weight: 700; font-size: 32px; line-height: 39px; }

/* Пульт (1455,158) 399×542 */
.xp-console {
  position: absolute; left: 1455px; top: 158px;
  width: 399px; height: 542px;
  border: 1.15px solid transparent;
  background:
    linear-gradient(var(--bg0), var(--bg0)) padding-box,
    linear-gradient(160deg, #7ee9ff 0%, #050f20 47%, #7ee9ff 100%) border-box;
  font-family: var(--xp-ui);
}
.xp-console__title {
  position: absolute; left: 32px; top: 26px;
  font-size: 22.95px; line-height: 27px; color: #fff;
}
.xp-console__dot {
  position: absolute; left: 363px; top: 35px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan);
  animation: xp-blink 2.4s ease-in-out infinite;
}
@keyframes xp-blink { 50% { opacity: .35; } }
.xp-console__set {
  position: absolute; left: 32px; top: 93px;
  display: none;
  flex-direction: column;
  gap: 24.3px;
}
.xp-hero[data-mode="museum"] .xp-console__set--museum,
.xp-hero[data-mode="theatre"] .xp-console__set--theatre { display: flex; }
.xp-tgl {
  position: relative;
  width: 333px; height: 62px;
  border: 1.15px solid #1f3f53;
  background: var(--bg0);
  transition: border-color .2s var(--ease);
}
.xp-tgl:hover { border-color: #2f5f7a; }
.xp-tgl span {
  position: absolute; left: 14px; top: 14px;
  font-weight: 500; font-size: 27.54px; line-height: 32px; color: #fff;
}
.xp-tgl i {
  position: absolute; right: 16px; top: 19px;
  font-style: normal; font-size: 18.36px; line-height: 21px;
  color: #1f3f53;
  transition: color .2s var(--ease);
}
.xp-tgl i::before { content: 'выкл'; }
.xp-tgl[aria-pressed="true"] i { color: var(--cyan); }
.xp-tgl[aria-pressed="true"] i::before { content: 'вкл'; }
.xp-console__mode {
  position: absolute; top: 479px;
  font-size: 20px; line-height: 24px;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.xp-console__mode--museum { left: 118px; }
.xp-console__mode--theatre { left: 223px; }
.xp-hero[data-mode="museum"] .xp-console__mode--museum { color: #61b6cb; }
.xp-hero[data-mode="museum"] .xp-console__mode--theatre { color: #fff; opacity: .3; }
.xp-hero[data-mode="theatre"] .xp-console__mode--theatre { color: var(--cyan); }
.xp-hero[data-mode="theatre"] .xp-console__mode--museum { color: #4d5259; }
.xp-console__mode:hover { opacity: 1 !important; }

/* ============================== Бегущая строка (989–1051) ============================== */
.xp-ticker {
  --sec-bg: var(--cyan);
  height: 62px;
  overflow: hidden;
  color: #000;
}
.xp-ticker__track {
  display: flex;
  width: max-content;
  padding-left: 22px;
  animation: xp-ticker 60s linear infinite;
}
.xp-ticker__half {
  display: flex;
  align-items: center;
  gap: 35px;
  padding-right: 35px;
  height: 62px;
  font-weight: 700; font-size: 24px; line-height: 29px;
  text-transform: uppercase;
  white-space: nowrap;
}
.xp-star { width: 35px; height: 35px; flex: none; fill: none; stroke: #000; stroke-width: 2.46; }
@keyframes xp-ticker { to { transform: translateX(-50%); } }

/* ============================== Что вы узнаете (1051–1540) ============================== */
.xp-learn { --sec-bg: var(--light); height: 489px; color: var(--bg0); }
.xp-learn__kicker { position: absolute; left: 71px; top: 51px; font-weight: 500; font-size: 32px; line-height: 39px; }
.xp-learn__title {
  position: absolute; left: 71px; top: 117px;
  font-weight: 700; font-size: 64px; line-height: 78px;
}
.xp-learn__title span { color: var(--steel); }
.xp-learn__text {
  position: absolute; left: 1019px; top: 141px;
  font-size: 24px; line-height: 29px;
}
.xp-stats { position: absolute; left: 0; top: 274px; }
.xp-stat { position: absolute; top: 0; display: flex; gap: 24px; color: var(--bg1); white-space: nowrap; }
.xp-stat--1 { left: 1019px; }
.xp-stat--2 { left: 1276px; color: var(--bg0); }
.xp-stat--3 { left: 1489px; gap: 19px; color: var(--bg0); }
.xp-stat b { font-size: 64px; line-height: 78px; }
.xp-stat span { margin-top: 19px; font-weight: 700; font-size: 16px; line-height: 20px; }

/* ============================== Мы покажем (1540–3037) ============================== */
.xp-show { --sec-bg: var(--bg1); height: 1497px; }
.xp-show__title {
  position: absolute; left: 71px; top: 64px;
  font-weight: 700; font-size: 64px; line-height: 78px;
}
.xp-show__list { position: absolute; left: 0; top: 242px; width: 1920px; }
.xp-show__row { position: relative; height: 206px; }
.xp-show__row:not(:last-child)::after {
  content: ''; position: absolute; left: 71px; bottom: -1.23px;
  width: 1760px; height: 2.46px; background: var(--steel);
}
.xp-show__row img { position: absolute; }
.xp-show__row > p, .xp-show__row > div {
  position: absolute; left: 306px;
  font-size: 32px; line-height: 39px;
}
.xp-show__row--1 img { left: 21px; top: 8px; width: 285px; height: 190px; }
.xp-show__row--1 > p { top: 70px; }
.xp-show__row--2 img { left: 33px; top: 16px; width: 273px; height: 182px; }
.xp-show__row--2 > p { top: 68px; }
.xp-show__row--3 img { left: 29px; top: 16px; width: 269px; height: 179px; }
.xp-show__row--3 > p { top: 67px; }
.xp-show__row--4 img { left: 39px; top: 16px; width: 259px; height: 172px; }
.xp-show__row--4 > div { top: 39px; }
.xp-show__row--5 img { left: 48px; top: 18px; width: 231px; height: 186px; }
.xp-show__row--5 > p { top: 60px; }
.xp-tags { display: flex; gap: 24px; margin-top: 29px; }
.xp-tags li {
  display: flex; align-items: center;
  height: 59px;
  padding: 4px 24px 9px 23px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  white-space: nowrap;
}
.xp-show__reg { left: 781px; top: 1330px; }

/* ============================== Для кого (3037–4081) ============================== */
.xp-who { height: 1044px; }
.xp-who__title {
  position: absolute; left: 71px; top: 60px;
  font-weight: 700; font-size: 64px; line-height: 78px;
}
.xp-who__plates { position: absolute; left: 71px; top: 182px; display: flex; flex-direction: column; gap: 24px; }
/* Плашка 890×228 со срезанными углами (вектор 25:274) */
.xp-plate {
  position: relative;
  display: block;
  width: 890px; height: 228px;
  background: var(--bg2);
  color: #fff;
  clip-path: polygon(18.5px 0, 871.5px 0, 890px 18.5px, 890px 206.5px, 869px 227.5px, 21px 227.5px, 0 206.5px, 0 18.5px);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.xp-plate:hover { background: #0f2c4a; }
.xp-plate.is-active { background: var(--cyan2); color: #0a2139; }
.xp-plate__label {
  position: absolute; left: 62px; top: 21px;
  font-size: 24px; line-height: 29px;
}
.xp-plate::after {                 /* пунктир 767 px, dash 5/5 */
  content: ''; position: absolute; left: 62px; top: 64px;
  width: 767px; height: 1px;
  background: repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 10px);
}
.xp-plate__name {
  position: absolute; left: 67px; top: 80px;
  font-weight: 500; font-size: 96px; line-height: 117px;
}
/* Значок: «+» у свёрнутой, «×» у выбранной */
.xp-plate__icon {
  position: absolute; left: 811px; top: 27px;
  width: 16px; height: 16px;
  transition: transform .35s var(--ease);
}
.xp-plate__icon::before, .xp-plate__icon::after {
  content: ''; position: absolute; left: -3.3px; top: 6px;
  width: 22.6px; height: 4px; background: currentColor;
}
.xp-plate__icon::after { transform: rotate(90deg); }
.xp-plate.is-active .xp-plate__icon { transform: rotate(45deg); }

/* «Пропуск» справа (1042,3219) 789×732 (вектор 25:282) */
.xp-pass {
  position: absolute; left: 1042px; top: 182px;
  width: 789px; height: 732px;
  background: var(--pass);
  color: #0a2139;
  clip-path: polygon(19.44px 0, 770.94px 0, 789.44px 18.5px, 788.5px 711px, 767.5px 732px, 21px 732px, 0 711px, .94px 18.5px);
}
.xp-pass::before, .xp-pass::after {
  content: ''; position: absolute; left: 12px; width: 767px; height: 1px;
  background: repeating-linear-gradient(to right, #0a2139 0 5px, transparent 5px 10px);
}
.xp-pass::before { top: 64px; }
.xp-pass::after { top: 669px; }
.xp-pass__event {
  position: absolute; left: 53px; top: 22px;
  font-size: 24px; line-height: 27px; text-transform: uppercase;
}
.xp-pass__date { position: absolute; right: 51px; top: 23px; font-size: 20px; line-height: 27px; }
.xp-pass__body {
  position: absolute; left: 53px; top: 147px; width: 700px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.xp-pass__body.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s var(--ease) .05s, transform .35s var(--ease) .05s, visibility 0s;
}
.xp-pass__body h3 { font-weight: 500; font-size: 64px; line-height: 74px; }
.xp-pass__body ul { position: absolute; left: 0; top: 180px; display: flex; flex-direction: column; gap: 47px; }
.xp-pass__body li { font-weight: 500; font-size: 24px; line-height: 29px; }
.xp-pass__reg {
  position: absolute; right: 39px; top: 687px;
  font-size: 24px; line-height: 27px; text-transform: uppercase;
}
.xp-pass__reg:hover { color: #2a6f8f; }

/* ============================== Программа (4081–5566) ============================== */
.xp-prog { --sec-bg: var(--light); min-height: 1485px; color: var(--bg0); padding: 290px 89px 80px 71px; }
.xp-prog__title { position: absolute; left: 71px; top: 58px; font-weight: 700; font-size: 64px; line-height: 78px; }
.xp-prog__pdf {
  position: absolute; left: 71px; top: 143px;
  font-weight: 500; font-size: 32px; line-height: 39px; color: #567e96;
  transition: color .2s var(--ease);
}
.xp-prog__when { position: absolute; right: 89px; top: 82px; font-weight: 500; font-size: 32px; line-height: 39px; }
.xp-prog__tabs { position: absolute; left: 71px; top: 211px; display: flex; gap: 14px; }
.xp-prog__tabs button {
  width: 140px; height: 47px;
  border: 1px solid #9ebed1;
  border-radius: 123px;
  text-align: center;
  font-weight: 500; font-size: 16px; line-height: 20px;
  color: #000;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.xp-prog__tabs button:hover { border-color: var(--bg0); }
.xp-prog__tabs button.is-active { background: var(--bg0); border-color: var(--bg0); color: var(--cyan); }
.xp-prog__list { border-top: 1px solid #9ebed1; }
.xp-slot { border-bottom: 1px solid #9ebed1; transition: background-color .3s var(--ease); }
.xp-slot[hidden] { display: none; }
.xp-slot.is-open { background: #fff; }
.xp-slot__head {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 108px;
  color: #315c79;
}
.xp-slot__time {
  position: absolute; left: 51px; top: 44px;
  font-weight: 500; font-size: 20px; line-height: 24px;
}
.xp-slot__main { display: flex; flex-direction: column; margin-left: 304px; max-width: 1060px; }
.xp-slot__cat {
  margin-left: 4px;
  font-weight: 500; font-size: 14px; line-height: 17px;
  text-transform: uppercase;
  opacity: .78;
}
.xp-slot__name {
  margin-top: 9px;
  font-weight: 700; font-size: 24px; line-height: 29px;
  color: var(--bg0); opacity: .78;
}
.xp-slot__who {
  position: absolute; right: 83px; top: 44px;
  font-weight: 500; font-size: 20px; line-height: 24px;
  opacity: .78;
  white-space: nowrap;
}
/* «+» / «×» 11×11, обводка 2.06 (группа повёрнута на 45° в макете) */
.xp-slot__icon {
  position: absolute; left: 1709px; top: 49px;
  width: 15px; height: 15px;
  transition: transform .3s var(--ease);
}
.xp-slot__icon::before, .xp-slot__icon::after {
  content: ''; position: absolute; left: 0; top: 6.5px; width: 15px; height: 2.06px; background: #315c79;
}
.xp-slot__icon::after { transform: rotate(90deg); }
.xp-slot.is-open .xp-slot__icon { transform: rotate(45deg); }
.xp-slot__head:hover .xp-slot__name { opacity: 1; }
.xp-slot__more {
  display: none;
  margin: -14px 0 0 304px;
  padding-bottom: 38px;
  font-weight: 500; font-size: 20px; line-height: 24px;
  color: #315c79; opacity: .78;
}
.xp-slot.is-open .xp-slot__more { display: block; animation: xp-fade .35s var(--ease); }
@keyframes xp-fade { from { opacity: 0; transform: translateY(-4px); } }

/* ============================== Спикеры (5566–6470) ============================== */
.xp-spk { --sec-bg: var(--bg1); height: 904px; }
.xp-spk__title {
  position: absolute; left: 71px; top: 79px;
  font-weight: 700; font-size: 64px; line-height: 78px; color: var(--cyan);
}
.xp-mixer {
  position: absolute; left: 72px; top: 192px;
  width: 1775px; height: 659px;
  background: var(--bg0);
}
.xp-mixer::before, .xp-mixer::after {
  content: ''; position: absolute; left: 31px; width: 1704px; height: 2px; background: var(--bg2);
}
.xp-mixer::before { top: 73px; }
.xp-mixer::after { top: 452px; }
.xp-mixer__brand { position: absolute; left: 30px; top: 24px; font-size: 20px; line-height: 24px; text-transform: uppercase; }
.xp-mixer__hint { position: absolute; right: 36px; top: 24px; font-size: 20px; line-height: 24px; }
.xp-mixer__cols {
  position: absolute; left: 30px; top: 92px;
  width: 1705px; height: 343px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.xp-ch { position: relative; height: 343px; transition: background-color .3s var(--ease); }
.xp-ch:hover { background: rgba(10, 33, 57, .5); }
.xp-ch.is-active { background: var(--bg2); }
/* Фото 139×140 в кольце 151×152 цвета --bg0 (кольцо — box-shadow, чтобы углы
   квадратного кадра не проступали между фото и кольцом) */
.xp-ch img {
  position: absolute; left: 50%; top: 30px;
  width: 139px; height: 140px;
  margin-left: -69.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--bg0);
}
.xp-ch > span {
  position: absolute; left: 0; right: 0; top: 187px;
  text-align: center;
  font-weight: 700; font-size: 24px; line-height: 29px;
}
/* Фейдер 43×63: пять рисок, стойка 7×63 и ручка 35×16 */
.xp-fader {
  position: absolute; left: 50%; top: 256px;
  width: 43px; height: 63px;
  margin-left: -21.5px;
}
.xp-fader::before {
  content: ''; position: absolute; inset: 0;
  opacity: .3;
  background:
    linear-gradient(#fff, #fff) 18px 0 / 7px 63px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 3px, #fff 3px 4px, transparent 4px 14px) 0 0 / 43px 63px no-repeat;
}
.xp-fader::after {
  content: ''; position: absolute; left: 19px; top: 1px; width: 5px; height: 61px;
  background: #161616; opacity: .3;
}
.xp-fader i {
  position: absolute; left: 4px; top: 37px;
  width: 35px; height: 16px;
  background: #3b5265;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  z-index: 1;
  transition: top .45s var(--ease), background-color .45s var(--ease);
}
.xp-ch.is-active .xp-fader i { top: 10px; background: var(--cyan); }
.xp-mixer__info { transition: opacity .25s var(--ease); }
.xp-mixer__info.is-swapping { opacity: 0; }
.xp-mixer__name { position: absolute; left: 36px; top: 484px; font-weight: 700; font-size: 36px; line-height: 44px; color: var(--cyan); }
.xp-mixer__role { position: absolute; left: 36px; top: 541px; width: 600px; font-size: 24px; line-height: 29px; }
.xp-mixer__time { position: absolute; left: 814px; top: 499px; font-weight: 500; font-size: 24px; line-height: 29px; color: var(--cyan); }
.xp-mixer__topic { position: absolute; left: 814px; top: 541px; width: 900px; font-weight: 500; font-size: 32px; line-height: 38px; }

/* ============================== Демо-зоны (6470–7383) ============================== */

/* ============================== Почему стоит прийти (7383–8436) ============================== */
.xp-why { --sec-bg: var(--bg1); height: 1053px; }
.xp-why__title { position: absolute; left: 71px; top: 85px; font-weight: 700; font-size: 64px; line-height: 78px; }
.xp-why__tabs {
  position: absolute; left: 71px; top: 213px;
  width: 1765px; height: 138px;
  display: flex;
}
.xp-why__tabs::before {            /* сетка: линии сверху/снизу и между вкладками, op .6 */
  content: ''; position: absolute; inset: -1.23px 0;
  opacity: .6;
  pointer-events: none;
  background:
    linear-gradient(var(--steel), var(--steel)) 0 0 / 100% 2.46px no-repeat,
    linear-gradient(var(--steel), var(--steel)) 0 100% / 100% 2.46px no-repeat,
    linear-gradient(var(--steel), var(--steel)) 440px 0 / 2.46px 100% no-repeat,
    linear-gradient(var(--steel), var(--steel)) 882px 0 / 2.46px 100% no-repeat,
    linear-gradient(var(--steel), var(--steel)) 1323px 0 / 2.46px 100% no-repeat;
}
.xp-why__tabs button { position: relative; flex: 0 0 441px; height: 138px; color: #fff; }
.xp-why__tabs small {
  position: absolute; left: 26px; top: 28px;
  font-size: 24px; line-height: 29px; color: var(--cyan);
}
.xp-why__tabs button {
  display: flex; align-items: flex-start;   /* кнопка иначе центрирует текст по вертикали */
  font-size: 28px; line-height: 34px;
  padding: 74px 0 0 22px;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.xp-why__tabs button i {
  position: absolute; left: 391px; top: 61px;
  width: 17px; height: 17px;
  opacity: .6;
  transform: rotate(0deg);
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.xp-why__tabs button i::before, .xp-why__tabs button i::after {
  content: ''; position: absolute; left: -3px; top: 6.8px; width: 23px; height: 3.38px; background: #838a94;
  transition: background-color .3s var(--ease);
}
.xp-why__tabs button i::after { transform: rotate(90deg); }
.xp-why__tabs button.is-next { color: rgba(255, 255, 255, .5); }
.xp-why__tabs button.is-next small { opacity: .5; }
/* В макете отступы внутри вкладок чуть разные — повторяем как есть */
.xp-why__tabs button:nth-child(2) { padding-left: 29px; }
.xp-why__tabs button:nth-child(2) small { left: 33px; }
.xp-why__tabs button:nth-child(3) { padding-left: 25px; }
.xp-why__tabs button:nth-child(3) small { left: 29px; }
.xp-why__tabs button:nth-child(4) { padding-left: 31px; }
.xp-why__tabs button:nth-child(4) small { left: 35px; }
.xp-why__tabs button.is-past { color: #838a94; }
.xp-why__tabs button.is-past small { color: #437f94; }
.xp-why__tabs button.is-active i { opacity: 1; transform: rotate(45deg); }
.xp-why__tabs button.is-active i::before, .xp-why__tabs button.is-active i::after { background: var(--cyan); }
.xp-why__tabs button:hover { color: #fff; }
.xp-why__bar {
  position: absolute; left: 1px; top: 131px;
  width: 440px; height: 8px;
  background: var(--cyan);
  transform: translateX(calc(var(--why, 0) * 441px));
  transition: transform .45s var(--ease);
}
.xp-why__pane {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1053px;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
/* панель на всю секцию лежит поверх вкладок — клики принимает только её содержимое */
.xp-why__pane.is-active > * { pointer-events: auto; }
.xp-why__pane.is-active { opacity: 1; visibility: visible; transition: opacity .35s var(--ease) .05s, visibility 0s; }
.xp-why__pane h3 {
  position: absolute; left: 71px; top: 425px;
  font-weight: 700; font-size: 86px; line-height: 105px;
}
.xp-why__p1 { position: absolute; left: 78px; top: 688px; font-size: 32px; line-height: 39px; }
.xp-why__leave { position: absolute; left: 71px; top: 660px; font-size: 28px; line-height: 34px; color: #a3b8ca; }
.xp-gains {
  position: absolute; left: 71px; top: 713px;
  display: grid;
  grid-template-columns: 559px 559px 559px;
  column-gap: 50px;
}
.xp-gains li:nth-child(3) { margin-left: -12px; }
.xp-gains li { position: relative; }
.xp-gains li::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1.23px; height: 2.46px;
  background: var(--steel); opacity: .6;
}
.xp-gains strong {
  display: flex; align-items: center;
  height: 117px; margin-top: 17px;
  font-weight: 400; font-size: 96px; line-height: 117px;
  color: var(--cyan2);
}
.xp-gains__arrow { width: 72px; height: 72px; fill: none; stroke: var(--cyan2); stroke-width: 4.5; }
.xp-gains p { margin-top: 25px; font-size: 24px; line-height: 29px; color: #a3b8ca; }

/* ============================== Финал (8436–9457) ============================== */
.xp-final { height: 1021px; overflow: hidden; }
.xp-final__glow {
  position: absolute; left: 377px; top: 324px;
  width: 1839px; height: 411px;
  border-radius: 50%;
  background: #133952;
  filter: blur(288px);
  pointer-events: none;
}
.xp-final__title {
  position: absolute; left: 71px; top: 98px;
  font-weight: 700; font-size: 86px; line-height: 105px;
}
.xp-final__reg { left: 78px; top: 460px; }
.xp-final__pdf {
  position: absolute; left: 78px; top: 571px;
  font-weight: 500; font-size: 32px; line-height: 39px; color: #567e96;
  transition: color .2s var(--ease);
}
/* Билет 499×648, повёрнут на 5.5° против часовой; полукруглые вырезы по бокам */
.xp-ticket {
  position: absolute; left: 1124px; top: 120px;
  width: 499px; height: 648px;
  transform-origin: 0 0;
  transform: rotate(-5.5deg);
  background: var(--pass);
  color: #050f20;
  -webkit-mask:
    radial-gradient(circle 20.5px at 0 387px, transparent 97%, #000 100%),
    radial-gradient(circle 20.5px at 100% 387px, transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 20.5px at 0 387px, transparent 97%, #000 100%) intersect,
    radial-gradient(circle 20.5px at 100% 387px, transparent 97%, #000 100%);
}
.xp-ticket > span { position: absolute; left: 43px; white-space: nowrap; }
.xp-ticket__brand { top: 30px; font-weight: 700; font-size: 16.8px; line-height: 21px; }
.xp-ticket__ed {
  left: auto !important; right: 23px; top: 29px;
  font-weight: 500; font-size: 16.8px; line-height: 21px;
  text-transform: uppercase; color: #212c3c; opacity: .77;
}
.xp-ticket__date { left: 38px !important; top: 137px; font-weight: 700; font-size: 107.6px; line-height: 134px; }
.xp-ticket__year { top: 272px; font-weight: 500; font-size: 31.4px; line-height: 39px; color: #557d96; }
.xp-ticket__dash {
  top: 346px; width: 414px; height: 1.12px;
  background: repeating-linear-gradient(to right, #0a2139 0 5.6px, transparent 5.6px 11.2px);
}
.xp-ticket__what { top: 378px; font-weight: 700; font-size: 31.4px; line-height: 39px; }
.xp-ticket__place, .xp-ticket__time {
  font-weight: 700; font-size: 22.4px; line-height: 28px;
  text-transform: uppercase; color: #97adc4;
}
.xp-ticket__place { top: 449px; }
.xp-ticket__time { top: 491px; }
.xp-ticket__note { top: 568px; font-size: 12.3px; line-height: 15px; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .xp-ticker__track, .xp-console__dot { animation: none; }
  .xp *, .xp *::before, .xp *::after { transition-duration: 0s !important; }
}

/* ============================== Адаптив ==============================
   Брейкпоинты (desktop-first, базовые стили выше — холст 1920):
   ≤1439 laptop — всё в потоке (flex/grid), zoom = 1; ≤1023 tablet; ≤767 mobile; ≤389 small mobile.
   Правило: position: absolute ниже 1440 остаётся только у декора (слои сцены, свечение, детали
   фейдера и билета). Переносы <br class="xp-br"> из макета видны только от 1440, xp-br-m — кроме mobile. */

/* Sticky-полоса и форма лежат вне .xp, чтобы на них не действовал zoom */
.xp-sticky { display: none; }

.xp-reg {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--bg1);
  color: #fff;
  font-family: var(--xp-font);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.xp-reg::backdrop { background: rgba(2, 8, 18, .72); }
.xp-reg[open] { animation: xp-fade .3s var(--ease); }
.xp-reg__form { display: flex; flex-direction: column; gap: 14px; padding: 24px 28px 28px; }
.xp-reg__handle { display: none; }
.xp-reg__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.xp-reg__title { margin: 0; font-weight: 700; font-size: 30px; line-height: 36px; }
.xp-reg__close {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -12px;
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
}
.xp-reg__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.xp-reg__sub { margin: -6px 0 4px; font-size: 15px; line-height: 20px; color: #a3b8ca; }
.xp-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 18px; color: #a3b8ca; }
.xp-field input {
  height: 52px;
  padding: 0 14px;
  border: 1px solid #1f3f53;
  border-radius: 0;
  background: var(--bg0);
  color: #fff;
  font: 400 17px/1 var(--xp-font);   /* ≥16 px — iOS не зумит поле при фокусе */
  transition: border-color .2s var(--ease);
}
.xp-field input:focus { outline: none; border-color: var(--cyan); }
.xp-field input::placeholder { color: #5d7a90; }
.xp-check { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 17px; color: #a3b8ca; cursor: pointer; }
.xp-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--cyan); }
.xp-reg__note { margin: 0; font-size: 14px; line-height: 18px; color: #ff9a9a; }
.xp-reg__fields { display: flex; flex-direction: column; gap: inherit; }
.xp-reg__fields[hidden], .xp-reg__done[hidden] { display: none; }
.xp-field input.is-invalid { border-color: #ff7a7a; }
/* Галочки согласий (ПДн и реклама) — над кнопкой отправки */
.xp-reg__consents { display: flex; flex-direction: column; gap: 10px; }
.xp-check a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.xp-check a:hover { color: #a9f1ff; }
.xp-check input.is-invalid { outline: 2px solid #ff7a7a; outline-offset: 2px; }
.xp-reg__submit:disabled { cursor: wait; opacity: .7; }
/* Экран после успешной регистрации */
.xp-reg__done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0 4px; outline: none; }
.xp-reg__done-ico { width: 48px; height: 48px; fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.xp-reg__done-title { margin: 4px 0 0; font-weight: 700; font-size: 28px; line-height: 34px; }
.xp-reg__done-text { margin: 0; font-size: 17px; line-height: 24px; color: #d4e2ee; }
.xp-reg__done .xp-reg__submit { margin-top: 8px; }
.xp-reg__submit {
  display: flex; align-items: center;
  height: 56px; padding: 0 20px;
  border: 0; background: var(--cyan); color: #000;
  font: 700 20px var(--xp-font);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.xp-reg__submit:hover { background: #a9f1ff; }
.xp-reg :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
html.xp-locked { overflow: hidden; }

@media (max-width: 1439px) {
  .xp {
    --pad: 40px;
    width: auto;
    zoom: 1;
    overflow-x: clip;
  }
  .xp br.xp-br { display: none; }
  .xp-hero, .xp-learn, .xp-show, .xp-who, .xp-spk, .xp-why, .xp-final { height: auto; }

  /* Общая кнопка «Регистрация +» */
  .xp-btn {
    position: relative; left: auto; top: auto;
    width: 260px; height: 60px;
    padding: 0 22px;
    font-size: 26px; line-height: 32px;
  }

  /* ---------- Хиро ---------- */
  .xp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "head    head"
      "title   console"
      "switch  console"
      "name    console"
      "reg     console"
      "facts   facts";
    align-items: start;
    column-gap: 40px;
    padding: 0 var(--pad) 56px;
  }
  .xp-hero__title-bg, .xp-hero__bottom-fade, .xp-stage__fade-l, .xp-stage__fade-r { display: none; }

  /* Сцена — фон справа; рамка слоёв сохраняет пропорции макета (1920×901 — зона слоёв y 20…921) */
  .xp-scene { inset: 72px 0 0 0; overflow: hidden; pointer-events: none; }
  .xp-scene::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(to right, var(--bg0) 30%, rgba(2, 8, 18, 0) 72%),
      linear-gradient(to bottom, rgba(2, 8, 18, 0) 55%, var(--bg0) 100%);
  }
  /* Центр сцены (витрина / сцена театра) — по центру окна, как в макете; лишнее справа обрезается */
  .xp-stage { inset: auto; top: 0; right: -10%; width: 120%; aspect-ratio: 1920 / 901; }
  .xp-stage--museum .xp-layer { left: 0; top: 7.214%; width: 100%; height: 92.786%; }
  .xp-stage--theatre .xp-layer--t-base { left: 0; top: 0; width: 100%; height: 99.112%; }
  .xp-stage--theatre .xp-layer--people { left: 46.719%; top: 46.615%; width: 18.281%; height: 38.624%; }
  .xp-stage--theatre .xp-layer--kinetic { left: 49.479%; top: 13.097%; width: 23.229%; height: 74.584%; }
  .xp-stage--theatre .xp-layer--t-proj { left: 0; top: 2.886%; width: 100%; height: 96.226%; }

  .xp-head {
    grid-area: head;
    position: relative;
    width: auto; height: 72px;
    margin: 0 calc(-1 * var(--pad));
    padding: 0 var(--pad);
    z-index: 3;
  }
  .xp-head__logo img { width: 110px; height: auto; }
  .xp-head__right { gap: 28px; }
  .xp-head__nav { gap: 28px; }
  .xp-head__nav a, .xp-head__reg { font-size: 20px; line-height: 24px; }
  .xp-head__reg { height: 48px; padding: 0 16px; }

  .xp-hero__title { grid-area: title; position: relative; left: auto; top: auto; margin-top: 56px; font-size: 44px; line-height: 52px; }

  .xp-switch {
    grid-area: switch;
    position: relative; left: auto; top: auto;
    justify-self: start;
    display: inline-flex; align-items: center;
    width: auto; height: 56px;
    margin-top: 32px;
    padding: 4px;
    font-size: 24px; line-height: 28px;
  }
  .xp-switch__thumb, .xp-switch__opt::before { display: none; }
  .xp-switch__opt, .xp-switch__x { position: static; }
  .xp-switch__opt { height: 48px; padding: 0 24px; border-radius: 48px; transition: color .3s var(--ease), background-color .3s var(--ease); }
  .xp-switch__x { padding: 0 6px; }
  .xp-hero[data-mode="museum"] .xp-switch__opt--museum,
  .xp-hero[data-mode="theatre"] .xp-switch__opt--theatre { background: #fff; }

  .xp-hero__reg { grid-area: reg; position: relative; margin-top: 28px; }

  .xp-hero__facts {
    grid-area: facts;
    position: relative; left: auto; top: auto;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
    margin-top: 56px;
  }
  .xp-fact { position: static; white-space: normal; }
  .xp-fact dt { font-size: 20px; line-height: 24px; }
  .xp-fact dd { font-size: 26px; line-height: 32px; }

  .xp-console {
    grid-area: console;
    position: relative; left: auto; top: auto;
    width: auto; height: auto;
    margin-top: 56px;
    padding: 24px 20px 12px;
    display: flex; flex-direction: column; gap: 20px;
  }
  .xp-console__title { position: static; padding-right: 24px; font-size: 20px; line-height: 24px; }
  .xp-console__dot { left: auto; right: 20px; top: 32px; }
  .xp-console__set { position: static; gap: 12px; }
  .xp-tgl { width: 100%; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; text-align: left; }
  .xp-hero .xp-tgl span, .xp-hero .xp-tgl i { position: static; }
  .xp-hero .xp-tgl span { font-size: 22px; line-height: 26px; }
  .xp-hero .xp-tgl i { font-size: 16px; line-height: 20px; }
  .xp-console__modes { display: flex; justify-content: center; gap: 8px; }
  .xp-console__mode { position: static; height: 44px; padding: 0 12px; font-size: 18px; }

  /* ---------- Бегущая строка ---------- */
  .xp-ticker { height: 52px; }
  .xp-ticker__half { height: 52px; gap: 28px; padding-right: 28px; font-size: 20px; line-height: 24px; }
  .xp-star { width: 28px; height: 28px; }

  /* ---------- Что вы узнаете ---------- */
  .xp-learn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "kicker kicker" "title text" "title stats";
    align-items: start;
    gap: 20px 48px;
    padding: 72px var(--pad);
  }
  .xp-learn__kicker, .xp-learn__title, .xp-learn__text, .xp-stats { position: static; }
  .xp-learn__kicker { grid-area: kicker; font-size: 24px; line-height: 30px; }
  .xp-learn__title { grid-area: title; font-size: 44px; line-height: 52px; }
  .xp-learn__text { grid-area: text; font-size: 20px; line-height: 28px; }
  .xp-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
  .xp-stat { position: static; flex-direction: column; gap: 4px; white-space: normal; }   /* в полколонки цифра и подпись в ряд не помещаются */
  .xp-stat b { font-size: 52px; line-height: 60px; }
  .xp-stat span { margin-top: 0; font-size: 15px; line-height: 19px; }

  /* ---------- Мы покажем ---------- */
  .xp-show { display: flex; flex-direction: column; padding: 72px var(--pad); }
  .xp-show__title { position: static; font-size: 44px; line-height: 52px; }
  .xp-show__list { position: static; width: auto; margin-top: 32px; }
  .xp-show__row {
    height: auto;
    display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center;
    padding: 20px 0;
  }
  .xp-show__row:not(:last-child) { border-bottom: 2.46px solid var(--steel); }
  .xp-show__row:not(:last-child)::after { display: none; }
  .xp-show .xp-show__row img { position: static; width: 100%; height: auto; }
  .xp-show .xp-show__row > p, .xp-show .xp-show__row > div { position: static; font-size: 24px; line-height: 32px; }
  .xp-tags { flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .xp-tags li { height: auto; min-height: 44px; padding: 4px 16px 6px; font-size: 20px; line-height: 26px; white-space: normal; }
  .xp-show__reg { align-self: center; margin-top: 48px; }

  /* ---------- Для кого ---------- */
  .xp-who {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "title title" "plates pass";
    align-items: start;
    gap: 32px 40px;
    padding: 72px var(--pad);
  }
  .xp-who__title { grid-area: title; position: static; font-size: 44px; line-height: 52px; }
  .xp-who__plates { grid-area: plates; position: static; gap: 16px; }
  .xp-plate {
    width: auto; height: auto;
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px 28px 24px;
    text-align: left;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  }
  .xp-plate__label { position: static; order: 0; padding-right: 32px; font-size: 20px; line-height: 24px; }
  .xp-plate::after { position: static; order: 1; width: auto; }
  .xp-plate__name { position: static; order: 2; font-size: 64px; line-height: 72px; }
  .xp-plate__icon { left: auto; right: 28px; top: 24px; }

  .xp-pass {
    grid-area: pass;
    position: relative; left: auto; top: auto;
    width: auto; height: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start;
    padding: 22px 32px 0;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  }
  .xp-pass::before, .xp-pass::after { display: none; }
  .xp-pass__event, .xp-pass__date, .xp-pass__reg {
    position: static;
    background: repeating-linear-gradient(to right, #0a2139 0 5px, transparent 5px 10px) left bottom / 100% 1px no-repeat;
  }
  .xp-pass__event { padding-bottom: 18px; font-size: 20px; line-height: 24px; }
  .xp-pass__date { padding: 0 0 18px 16px; text-align: right; font-size: 18px; line-height: 24px; }
  /* Все три панели в одной ячейке: высота билета не скачет при переключении */
  .xp-pass__body { position: relative; left: auto; top: auto; width: auto; grid-column: 1 / -1; grid-row: 2; padding: 40px 0 36px; }
  .xp-pass__body h3 { font-size: 56px; line-height: 56px; }
  .xp-who .xp-pass__body ul { position: static; margin-top: 32px; gap: 24px; }
  .xp-pass__body li { font-size: 22px; line-height: 28px; }
  .xp-pass__reg {
    grid-column: 1 / -1; grid-row: 3;
    min-height: 60px;
    text-align: right;
    font-size: 20px; line-height: 24px;
    background-position: left top;
  }

  /* ---------- Программа ---------- */
  .xp-prog {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title when" "pdf pdf" "tabs tabs" "list list";
    align-items: end;
    padding: 72px var(--pad);
  }
  .xp-prog__title, .xp-prog__pdf, .xp-prog__when, .xp-prog__tabs { position: static; }
  .xp-prog__title { grid-area: title; font-size: 44px; line-height: 52px; }
  .xp-prog__when { grid-area: when; padding-bottom: 6px; font-size: 22px; line-height: 28px; }
  .xp-prog__pdf { grid-area: pdf; justify-self: start; margin-top: 12px; font-size: 22px; line-height: 28px; color: #3f6a84; }
  .xp-prog__tabs { grid-area: tabs; margin-top: 28px; gap: 12px; }
  .xp-prog__tabs button { height: 44px; }
  .xp-prog__list { grid-area: list; margin-top: 28px; }
  .xp-slot__head {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 220px 44px;
    grid-template-areas: "time main who icon";
    align-items: start;
    column-gap: 20px;
    min-height: 0;
    padding: 22px 0;
  }
  .xp-slot__time { grid-area: time; position: static; font-size: 18px; line-height: 24px; }
  .xp-slot__main { grid-area: main; margin-left: 0; max-width: none; }
  .xp-slot__cat { margin-left: 0; font-size: 13px; line-height: 16px; }
  .xp-slot__name { margin-top: 6px; font-size: 22px; line-height: 28px; }
  .xp-slot__who { grid-area: who; position: static; text-align: right; white-space: normal; font-size: 18px; line-height: 24px; }
  .xp-slot__icon { grid-area: icon; position: relative; left: auto; top: auto; justify-self: center; margin-top: 4px; }
  .xp-slot__more { margin: -8px 0 0 170px; padding-bottom: 24px; font-size: 18px; line-height: 24px; }

  /* ---------- Спикеры ---------- */
  .xp-spk { display: flex; flex-direction: column; gap: 32px; padding: 72px var(--pad); }
  .xp-spk__title { position: static; font-size: 44px; line-height: 52px; }
  .xp-mixer {
    position: static;
    width: auto; height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand hint" "cols cols" "info info";
    padding: 0 24px 28px;
  }
  .xp-mixer::before, .xp-mixer::after { display: none; }
  .xp-mixer__brand, .xp-mixer__hint {
    position: static;
    display: flex; align-items: center;
    height: 64px;
    border-bottom: 2px solid var(--bg2);
    font-size: 18px;
  }
  .xp-mixer__brand { grid-area: brand; }
  .xp-mixer__hint { grid-area: hint; justify-content: flex-end; padding-left: 16px; }
  .xp-mixer__cols {
    grid-area: cols;
    position: static;
    width: auto; height: auto;
    padding: 12px 0;
    border-bottom: 2px solid var(--bg2);
  }
  .xp-ch { height: 280px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; }
  .xp-mixer .xp-ch img { position: static; flex: none; width: 96px; height: 96px; margin: 0; }
  .xp-mixer .xp-ch > span { position: static; font-size: 18px; line-height: 22px; }
  .xp-fader { position: relative; left: auto; top: auto; flex: none; margin: 0; }
  .xp-mixer__info {
    grid-area: info;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "name time" "role topic";
    gap: 10px 40px;
    padding-top: 28px;
  }
  .xp-mixer__name, .xp-mixer__role, .xp-mixer__time, .xp-mixer__topic { position: static; width: auto; }
  .xp-mixer__name { grid-area: name; font-size: 30px; line-height: 36px; }
  .xp-mixer__role { grid-area: role; font-size: 20px; line-height: 26px; }
  .xp-mixer__time { grid-area: time; align-self: end; font-size: 20px; line-height: 26px; }
  .xp-mixer__topic { grid-area: topic; font-size: 26px; line-height: 32px; }

  /* ---------- Почему стоит прийти ---------- */
  .xp-why { display: grid; grid-template-columns: minmax(0, 1fr); padding: 72px var(--pad); }
  .xp-why__title { position: static; font-size: 44px; line-height: 52px; }
  .xp-why__tabs {
    position: relative; left: auto; top: auto;
    width: auto; height: auto;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 32px;
    border-top: 2.46px solid rgba(77, 123, 159, .6);
    border-bottom: 2.46px solid rgba(77, 123, 159, .6);
  }
  .xp-why__tabs::before { display: none; }
  .xp-why .xp-why__tabs button {
    height: 120px;
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
    padding: 20px 52px 20px 18px;
    font-size: 22px; line-height: 26px;
    text-align: left;
  }
  .xp-why .xp-why__tabs button:not(:nth-child(4)) { border-right: 2.46px solid rgba(77, 123, 159, .6); }
  .xp-why .xp-why__tabs button small { position: static; font-size: 18px; line-height: 22px; }
  .xp-why__tabs button i { left: auto; right: 20px; top: 24px; }
  .xp-why__bar { left: 0; top: auto; bottom: -2.46px; width: 25%; height: 6px; transform: translateX(calc(var(--why, 0) * 100%)); }
  /* Все панели в одной ячейке: высота секции не скачет при переключении вкладок */
  .xp-why__pane { position: relative; left: auto; top: auto; width: auto; height: auto; grid-row: 3; grid-column: 1; padding-top: 48px; }
  .xp-why .xp-why__pane h3 { position: static; font-size: 64px; line-height: 76px; }
  .xp-why__p1, .xp-why__leave { position: static; }
  .xp-why__p1 { max-width: 820px; margin-top: 28px; font-size: 24px; line-height: 34px; }
  .xp-why__leave { margin-top: 24px; text-align: left; font-size: 22px; line-height: 28px; }
  .xp-gains { position: static; margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .xp-gains li:nth-child(3) { margin-left: 0; }
  .xp-gains strong { height: auto; margin-top: 16px; font-size: 72px; line-height: 88px; }
  .xp-gains__arrow { width: 56px; height: 56px; }
  .xp-gains p { margin-top: 12px; font-size: 20px; line-height: 26px; }

  /* ---------- Финал ---------- */
  .xp-final {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title ticket" "reg ticket" "pdf ticket" ". ticket";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    gap: 28px 40px;
    padding: 88px var(--pad) 104px;
  }
  .xp-final__glow { left: 20%; top: 35%; width: 110%; height: 320px; filter: blur(160px); }
  .xp-final__title { grid-area: title; position: relative; left: auto; top: auto; font-size: 64px; line-height: 76px; }
  .xp-final__reg { grid-area: reg; position: relative; }
  .xp-final__pdf { grid-area: pdf; position: relative; left: auto; top: auto; justify-self: start; font-size: 22px; line-height: 28px; }
  /* Билет масштабируется zoom (меняет и место в раскладке), поворот — transform вокруг центра */
  .xp-ticket {
    grid-area: ticket;
    position: relative; left: auto; top: auto;
    margin: 24px 24px 0 0;
    zoom: .76;
    transform-origin: 50% 50%;
  }
}

@media (max-width: 1023px) {
  .xp { --pad: 32px; }
  .xp-btn { height: 56px; font-size: 24px; line-height: 30px; }

  /* Шапка: лого · «Регистрация +» · бургер; ссылки — выпадающим меню */
  .xp-head { padding-right: calc(var(--pad) - 12px); }
  .xp-head__logo img { width: 96px; }
  .xp-head__right { gap: 12px; }
  .xp-head__reg { font-size: 18px; }
  .xp-head__burger { display: block; position: relative; width: 48px; height: 48px; color: #fff; }
  .xp-head__burger i, .xp-head__burger i::before, .xp-head__burger i::after {
    position: absolute; left: 12px; width: 24px; height: 2px; background: currentColor;
    transition: transform .25s var(--ease), background-color .25s var(--ease);
  }
  .xp-head__burger i { top: 23px; }
  .xp-head__burger i::before, .xp-head__burger i::after { content: ''; left: 0; }
  .xp-head__burger i::before { top: -7px; }
  .xp-head__burger i::after { top: 7px; }
  .xp-head__burger[aria-expanded="true"] i { background: transparent; }
  .xp-head__burger[aria-expanded="true"] i::before { transform: translateY(7px) rotate(45deg); }
  .xp-head__burger[aria-expanded="true"] i::after { transform: translateY(-7px) rotate(-45deg); }
  .xp-head__nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 var(--pad) 12px;
    background: var(--bg0);
    border-bottom: 1px solid #1f3f53;
  }
  .xp-head.is-open .xp-head__nav { display: flex; }
  .xp-head__nav a { display: flex; align-items: center; min-height: 56px; border-top: 1px solid var(--bg2); font-size: 20px; }

  /* Хиро: одна колонка, сцена фоном справа, пульт под фактами */
  .xp-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "title" "switch" "name" "reg" "facts" "console";
    padding-bottom: 40px;
  }
  .xp-scene::after {
    background:
      linear-gradient(to right, var(--bg0) 32%, rgba(2, 8, 18, 0) 80%),
      linear-gradient(to bottom, rgba(2, 8, 18, 0) 50%, var(--bg0) 92%);
  }
  .xp-stage { right: -30%; width: 160%; }
  .xp-hero__title { margin-top: 32px; font-size: 40px; line-height: 48px; }
  .xp-switch { margin-top: 28px; }
  .xp-hero__facts { margin-top: 48px; gap: 20px; }
  .xp-fact dt { font-size: 16px; line-height: 20px; }
  .xp-fact dd { font-size: 22px; line-height: 27px; }
  .xp-console {
    margin-top: 32px;
    padding: 12px 20px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title modes" "set set";
    align-items: center;
    gap: 12px 16px;
  }
  .xp-console__title { grid-area: title; padding-right: 0; }
  .xp-console__dot { display: none; }
  .xp-console__set { grid-area: set; display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .xp-hero[data-mode="museum"] .xp-console__set--museum,
  .xp-hero[data-mode="theatre"] .xp-console__set--theatre { display: grid; }
  .xp-tgl { height: 52px; padding: 0 12px; }
  .xp-hero .xp-tgl span { font-size: 15px; line-height: 18px; }
  .xp-hero .xp-tgl i { font-size: 12px; line-height: 16px; }
  .xp-console__modes { grid-area: modes; gap: 0; }
  .xp-console__mode { font-size: 16px; }

  .xp-ticker { height: 52px; }
  .xp-ticker__half { height: 52px; font-size: 18px; line-height: 22px; }

  .xp-learn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "text" "stats"; gap: 20px; padding: 64px var(--pad); }
  .xp-learn__kicker { font-size: 22px; line-height: 27px; }
  .xp-learn__title { font-size: 40px; line-height: 48px; }
  .xp-learn__text { max-width: 640px; font-size: 19px; line-height: 27px; }
  .xp-stat { flex-direction: row; gap: 14px; }
  .xp-stat span { margin-top: 12px; }

  .xp-show { padding: 64px var(--pad); }
  .xp-show__title { font-size: 40px; line-height: 48px; }
  .xp-show__row { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 16px 0; }
  .xp-show .xp-show__row > p, .xp-show .xp-show__row > div { font-size: 20px; line-height: 28px; }
  .xp-tags { gap: 8px; margin-top: 12px; }
  .xp-tags li { min-height: 40px; padding: 4px 14px 5px; font-size: 17px; line-height: 22px; }
  .xp-show__reg { margin-top: 40px; }

  /* Для кого: плашки — три таба в ряд над билетом */
  .xp-who { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "plates" "pass"; gap: 28px; padding: 64px var(--pad); }
  .xp-who__title { font-size: 40px; line-height: 48px; }
  .xp-who__plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .xp-plate { gap: 10px; padding: 16px 18px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
  .xp-plate__label { padding-right: 24px; font-size: 15px; line-height: 19px; }
  .xp-plate__name { font-size: 40px; line-height: 48px; }
  .xp-plate__icon { right: 18px; top: 18px; transform: scale(.75); }
  .xp-plate.is-active .xp-plate__icon { transform: scale(.75) rotate(45deg); }
  .xp-pass__event { font-size: 18px; line-height: 22px; }
  .xp-pass__date { font-size: 16px; line-height: 22px; }
  .xp-pass__body h3 { font-size: 48px; line-height: 46px; }
  .xp-who .xp-pass__body ul { gap: 22px; }
  .xp-pass__body li { font-size: 20px; line-height: 25px; }
  .xp-pass__reg { font-size: 18px; }

  /* Программа: время слева, спикер под названием */
  .xp-prog { padding: 64px var(--pad); }
  .xp-prog__title { font-size: 40px; line-height: 48px; }
  .xp-prog__when { font-size: 20px; line-height: 24px; }
  .xp-prog__pdf { font-size: 20px; line-height: 24px; }
  .xp-prog__tabs { margin-top: 24px; }
  .xp-slot__head {
    grid-template-columns: 136px minmax(0, 1fr) 44px;
    grid-template-areas: "time main icon" "time who icon";
    column-gap: 12px;
    padding: 20px 0;
  }
  .xp-slot__name { font-size: 20px; line-height: 25px; }
  .xp-slot__who { margin-top: 6px; text-align: left; font-size: 16px; line-height: 20px; }
  .xp-slot__more { margin-left: 148px; padding-bottom: 20px; font-size: 17px; line-height: 23px; }

  .xp-spk { gap: 28px; padding: 64px var(--pad); }
  .xp-spk__title { font-size: 40px; line-height: 48px; }
  .xp-mixer { padding: 0 16px 24px; }
  .xp-mixer__brand, .xp-mixer__hint { height: 56px; font-size: 15px; }
  .xp-ch { height: 236px; gap: 12px; padding-top: 18px; }
  .xp-mixer .xp-ch img { width: 68px; height: 68px; box-shadow: 0 0 0 4px var(--bg0); }
  .xp-mixer .xp-ch > span { font-size: 14px; line-height: 17px; }
  .xp-mixer__info { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px 32px; padding-top: 24px; }
  .xp-mixer__name { font-size: 26px; line-height: 32px; }
  .xp-mixer__role { font-size: 18px; line-height: 23px; }
  .xp-mixer__time { font-size: 18px; line-height: 22px; }
  .xp-mixer__topic { font-size: 22px; line-height: 28px; }

  .xp-why { padding: 64px var(--pad); }
  .xp-why__title { font-size: 40px; line-height: 48px; }
  .xp-why .xp-why__tabs button { height: 112px; padding: 18px 40px 18px 14px; font-size: 19px; line-height: 23px; }
  .xp-why .xp-why__tabs button small { font-size: 16px; line-height: 20px; }
  .xp-why__tabs button i { right: 14px; top: 20px; transform: scale(.8); }
  .xp-why__tabs button.is-active i { transform: scale(.8) rotate(45deg); }
  .xp-why__pane { padding-top: 40px; }
  .xp-why .xp-why__pane h3 { font-size: 48px; line-height: 56px; }
  .xp-why__p1 { font-size: 21px; line-height: 30px; }
  .xp-why__leave { font-size: 20px; line-height: 26px; }
  .xp-gains { column-gap: 24px; }
  .xp-gains strong { font-size: 56px; line-height: 68px; }
  .xp-gains__arrow { width: 44px; height: 44px; }
  .xp-gains p { font-size: 18px; line-height: 24px; }

  .xp-final { gap: 28px 24px; padding: 72px var(--pad) 96px; }
  .xp-final__title { font-size: 48px; line-height: 56px; }
  .xp-final__pdf { font-size: 20px; line-height: 24px; }
  .xp-ticket { margin: 20px 8px 0 0; zoom: .6; }
}

@media (max-width: 767px) {
  .xp { --pad: 20px; }
  .xp br.xp-br-m { display: none; }
  .xp-btn { width: 100%; height: 56px; padding: 0 20px; font-size: 20px; line-height: 24px; }

  .xp-head { height: 56px; padding-right: 8px; }
  .xp-head__logo img { width: 74px; }
  .xp-head__reg { display: none; }   /* на mobile CTA — в хиро и в sticky-полосе */
  .xp-head__nav { padding-bottom: 8px; }

  /* Хиро (вариант B): заголовок → название → CTA → факты, ниже сцена с пультом */
  .xp-hero {
    grid-template-areas: "head" "title" "name" "reg" "facts" "switch" "scene" "console";
    padding-bottom: 32px;
  }
  .xp-scene {
    grid-area: scene;
    position: relative; inset: auto;
    margin: 12px calc(-1 * var(--pad)) 0;
    aspect-ratio: 390 / 220;
  }
  .xp-scene::after { display: none; }
  .xp-stage { top: 50%; right: -15%; width: 130%; transform: translateY(-50%); }
  .xp-hero__title { margin-top: 16px; font-size: 30px; line-height: 36px; }
  .xp-hero__reg { margin-top: 20px; }
  .xp-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 20px; }
  .xp-fact--place { grid-column: 1 / -1; }
  .xp-fact dt { font-size: 13px; line-height: 16px; }
  .xp-fact dd { margin-top: 4px; font-size: 17px; line-height: 21px; }
  .xp-switch { margin-top: 28px; height: 48px; font-size: 20px; line-height: 24px; }
  .xp-switch__opt { height: 40px; padding: 0 20px; border-radius: 40px; }

  /* Пульт: заголовок и лента тумблеров с горизонтальной прокруткой внутри блока */
  .xp-console {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "set";
    gap: 10px;
  }
  .xp-console__title { font-size: 15px; line-height: 20px; }
  .xp-console__modes { display: none; }   /* сценарий уже переключается «Музеи x Театры» над сценой */
  .xp-hero[data-mode="museum"] .xp-console__set--museum,
  .xp-hero[data-mode="theatre"] .xp-console__set--theatre { display: flex; }
  .xp-console__set {
    flex-direction: row; gap: 8px;
    margin: 0 calc(-1 * var(--pad));
    padding: 0 var(--pad);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--pad);
    scrollbar-width: none;
  }
  .xp-console__set::-webkit-scrollbar { display: none; }
  .xp-tgl { flex: none; width: auto; height: 48px; gap: 10px; padding: 0 14px; scroll-snap-align: start; }
  .xp-hero .xp-tgl span { font-size: 15px; }

  .xp-ticker, .xp-ticker__half { height: 44px; }
  .xp-ticker__track { padding-left: 16px; }
  .xp-ticker__half { gap: 20px; padding-right: 20px; font-size: 16px; line-height: 20px; }
  .xp-star { width: 24px; height: 24px; stroke-width: 2.6; }

  .xp-learn { gap: 14px; padding: 48px var(--pad); }
  .xp-learn__kicker { font-size: 17px; line-height: 21px; }
  .xp-learn__title { font-size: 28px; line-height: 34px; }
  .xp-learn__text { font-size: 17px; line-height: 25px; }
  .xp-stats { gap: 12px; margin-top: 8px; }
  .xp-stat { flex-direction: column; gap: 4px; }
  .xp-stat b { font-size: 36px; line-height: 42px; }
  .xp-stat span { margin-top: 0; font-size: 13px; line-height: 16px; }

  .xp-show { padding: 48px var(--pad); }
  .xp-show__title { font-size: 28px; line-height: 34px; }
  .xp-show__list { margin-top: 20px; }
  .xp-show__row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .xp-show__row--4 { align-items: start; }
  .xp-show .xp-show__row > p, .xp-show .xp-show__row > div { font-size: 17px; line-height: 23px; }
  .xp-tags { gap: 6px; margin-top: 10px; }
  .xp-tags li { min-height: 32px; padding: 3px 10px 4px; font-size: 14px; line-height: 18px; }
  .xp-show__reg { margin-top: 28px; }

  /* Для кого (вариант A): сегменты-табы + билет */
  .xp-who { gap: 20px; padding: 48px var(--pad); }
  .xp-who__title { font-size: 28px; line-height: 34px; }
  .xp-who__plates { gap: 8px; }
  .xp-plate {
    min-height: 64px;
    justify-content: center;
    padding: 8px 12px;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  }
  .xp-plate__label, .xp-plate__icon, .xp-plate::after { display: none; }
  .xp-plate__name { font-size: 24px; line-height: 28px; }
  .xp-pass { padding: 18px 20px 0; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
  .xp-pass__event, .xp-pass__date { padding-bottom: 14px; font-size: 13px; line-height: 16px; }
  .xp-pass__body { padding: 24px 0 24px; }
  .xp-pass__body h3 { font-size: 34px; line-height: 34px; }
  .xp-who .xp-pass__body ul { margin-top: 20px; gap: 16px; }
  .xp-pass__body li { font-size: 17px; line-height: 22px; }
  .xp-pass__reg { min-height: 52px; font-size: 16px; }

  /* Программа: строки-карточки */
  .xp-prog { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "when" "pdf" "tabs" "list"; padding: 48px var(--pad); }
  .xp-prog__title { font-size: 28px; line-height: 34px; }
  .xp-prog__when { margin-top: 8px; padding-bottom: 0; font-size: 16px; line-height: 20px; }
  .xp-prog__pdf { margin-top: 8px; font-size: 16px; line-height: 20px; }
  .xp-prog__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .xp-prog__tabs button { width: auto; font-size: 15px; }
  .xp-prog__list { margin-top: 20px; }
  .xp-slot__head {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: "time icon" "main icon" "who icon";
    column-gap: 8px;
    padding: 14px 0;
  }
  .xp-slot__time { font-size: 14px; line-height: 18px; }
  .xp-slot__main { margin-top: 4px; }
  .xp-slot__cat { font-size: 12px; line-height: 15px; }
  .xp-slot__name { margin-top: 4px; font-size: 17px; line-height: 22px; }
  .xp-slot__who { margin-top: 5px; font-size: 14px; line-height: 18px; }
  .xp-slot__icon { margin-top: 14px; }
  .xp-slot__more { margin: -4px 52px 0 0; padding-bottom: 16px; font-size: 15px; line-height: 20px; }

  /* Спикеры: микшер во всю ширину, каналы — лента со scroll-snap */
  .xp-spk { gap: 20px; padding: 48px var(--pad); }
  .xp-spk__title { font-size: 28px; line-height: 34px; }
  .xp-mixer { margin: 0 calc(-1 * var(--pad)); padding: 0 0 20px; }
  .xp-mixer__brand, .xp-mixer__hint { height: 48px; font-size: 12px; line-height: 15px; }
  .xp-mixer__brand { padding-left: var(--pad); }
  .xp-mixer__hint { padding-right: var(--pad); }
  .xp-mixer__cols {
    display: flex;
    padding: 12px var(--pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad);
    scrollbar-width: none;
  }
  .xp-mixer__cols::-webkit-scrollbar { display: none; }
  .xp-ch { flex: 0 0 104px; height: 232px; padding-top: 16px; scroll-snap-align: start; }
  .xp-mixer .xp-ch img { width: 72px; height: 72px; }
  .xp-mixer__info { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "role" "time" "topic"; gap: 8px; padding: 20px var(--pad) 0; }
  .xp-mixer__name { font-size: 22px; line-height: 27px; }
  .xp-mixer__role { font-size: 16px; line-height: 21px; }
  .xp-mixer__time { margin-top: 8px; font-size: 16px; line-height: 20px; }
  .xp-mixer__topic { font-size: 19px; line-height: 24px; }

  /* Почему стоит прийти (вариант A): аккордеон — вкладки и панели чередуются через order */
  .xp-why { display: flex; flex-direction: column; padding: 48px var(--pad); }
  .xp-why__title { margin-bottom: 24px; font-size: 28px; line-height: 34px; }
  .xp-why__tabs { display: contents; }
  .xp-why__bar { display: none; }
  .xp-why .xp-why__tabs button {
    position: relative;
    flex: none;
    width: 100%; height: 72px;
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px;
    padding: 0 52px 0 4px;
    border-top: 2px solid rgba(77, 123, 159, .6);
    border-right: 0;
    font-size: 20px; line-height: 24px;
  }
  .xp-why .xp-why__tabs button.is-active { box-shadow: inset 0 -4px 0 var(--cyan); }
  .xp-why .xp-why__tabs button small { font-size: 15px; line-height: 20px; }
  .xp-why__tabs button i, .xp-why__tabs button.is-active i { right: 8px; top: 27px; transform: none; }
  .xp-why__tabs button.is-active i { transform: rotate(45deg); }
  .xp-why__tabs button:nth-child(1) { order: 1; }
  .xp-why__tabs button:nth-child(2) { order: 3; }
  .xp-why__tabs button:nth-child(3) { order: 5; }
  .xp-why__tabs button:nth-child(4) { order: 7; }
  .xp-why__pane[data-why-panel="0"] { order: 2; }
  .xp-why__pane[data-why-panel="1"] { order: 4; }
  .xp-why__pane[data-why-panel="2"] { order: 6; }
  .xp-why__pane[data-why-panel="3"] { order: 8; }
  .xp-why::after { content: ''; order: 9; border-top: 2px solid rgba(77, 123, 159, .6); }
  .xp-why__pane { display: none; padding: 20px 4px 28px; }
  .xp-why__pane.is-active { display: block; }
  .xp-why .xp-why__pane h3 { font-size: 34px; line-height: 40px; }
  .xp-why__p1 { margin-top: 16px; font-size: 17px; line-height: 24px; }
  .xp-why__leave { margin-top: 16px; font-size: 16px; line-height: 21px; }
  .xp-gains { grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin-top: 12px; }
  .xp-gains strong { margin-top: 10px; font-size: 44px; line-height: 52px; }
  .xp-gains__arrow { width: 36px; height: 36px; }
  .xp-gains p { margin-top: 6px; font-size: 16px; line-height: 21px; }

  /* Финал: одна колонка, билет под кнопками */
  .xp-final {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "reg" "pdf" "ticket";
    grid-template-rows: none;
    gap: 20px;
    padding: 56px var(--pad) 72px;
  }
  .xp-final__glow { left: -30%; top: 45%; width: 160%; height: 280px; filter: blur(110px); }
  .xp-final__title { font-size: 34px; line-height: 40px; }
  .xp-final__reg { margin-top: 8px; }
  .xp-final__pdf { font-size: 17px; line-height: 22px; }
  .xp-ticket { justify-self: center; margin: 24px 0 0; zoom: .58; }

  /* Sticky-полоса регистрации */
  .xp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 20px;
    background: var(--bg0);
    border-top: 1px solid #1f3f53;
    color: #fff;
    transform: translateY(110%);
    transition: transform .3s var(--ease);
  }
  .xp-sticky.is-shown { transform: none; }
  .xp-sticky__info { flex: 1; margin: 0; font-weight: 500; font-size: 14px; line-height: 18px; }
  .xp-sticky__info span { color: #a3b8ca; }
  .xp-sticky__btn {
    height: 48px; padding: 0 18px;
    border: 0; background: var(--cyan); color: #000;
    font: 700 17px var(--xp-font);
    cursor: pointer;
  }

  /* Форма — шторка снизу */
  .xp-reg { width: 100%; max-height: 92dvh; margin: auto 0 0; }
  .xp-reg[open] { animation: xp-sheet .35s var(--ease); }
  .xp-reg__form { gap: 12px; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); }
  .xp-reg__handle { display: block; align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--steel); }
  .xp-reg__title { font-size: 26px; line-height: 32px; }
  .xp-reg__sub { font-size: 14px; line-height: 18px; }
}
@keyframes xp-sheet { from { transform: translateY(40%); opacity: 0; } }

@media (max-width: 389px) {
  .xp { --pad: 16px; }
  .xp-btn { height: 52px; font-size: 18px; }
  .xp-hero__title { font-size: 26px; line-height: 32px; }
  .xp-hero__facts { grid-template-columns: minmax(0, 1fr); }
  .xp-switch { font-size: 18px; }
  .xp-switch__opt { padding: 0 16px; }
  .xp-learn__title, .xp-show__title, .xp-who__title, .xp-prog__title, .xp-spk__title, .xp-why__title { font-size: 24px; line-height: 30px; }
  .xp-stat b { font-size: 32px; line-height: 38px; }
  .xp-show__row { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .xp-plate__name { font-size: 20px; line-height: 24px; }
  .xp-pass { padding: 16px 16px 0; }
  .xp-pass__body h3 { font-size: 30px; line-height: 30px; }
  .xp-pass__body li { font-size: 16px; line-height: 21px; }
  .xp-prog__tabs button { font-size: 14px; }
  .xp-why .xp-why__pane h3 { font-size: 30px; line-height: 36px; }
  .xp-final__title { font-size: 30px; line-height: 36px; }
  .xp-ticket { zoom: .52; }
  .xp-sticky { padding-left: 16px; }
  .xp-sticky__btn { padding: 0 14px; font-size: 16px; }
}

/* ============================== Хиро: правки по устройствам (2026-10-04) ==============================
   Горизонтальные планшеты и ноутбуки — хиро ровно в экран, пульт и кнопки компактнее.
   Вертикальные планшеты — хиро на 100% высоты, сцена в потоке и растягивается, витрина видна целиком.
   Телефон — два экрана: 1-й (заголовок, факты, «Регистрация +») на фоне арки с проекцией, 2-й — переключатель,
   интерактивная сцена (по умолчанию музей, как на ПК) и пульт в две колонки. */
.xp-hero__bg { display: none; }

@media (max-width: 1439px) and (orientation: landscape) {
  .xp-hero {
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas:
      "head    head"
      "title   console"
      "switch  console"
      "name    console"
      "reg     console"
      ".       console"
      "facts   facts";
    grid-template-rows: auto auto auto auto auto 1fr auto;
    padding-bottom: clamp(20px, 4svh, 48px);
  }
  .xp-head { height: 64px; }
  .xp-head__nav a, .xp-head__reg { font-size: 18px; line-height: 22px; }
  .xp-head__reg { height: 44px; padding: 0 14px; }
  .xp-scene { inset: 64px 0 0 0; }
  .xp-scene::after {
    background:
      linear-gradient(to right, var(--bg0) 22%, rgba(2, 8, 18, 0) 50%),
      linear-gradient(to bottom, rgba(2, 8, 18, 0) 62%, var(--bg0) 100%);
  }
  /* Сцена на всю высоту хиро, витрина — между текстом и пультом */
  .xp-stage { inset: auto; top: 0; left: 56%; right: auto; width: auto; height: 92%; transform: translateX(-60%); }

  .xp-hero__title { margin-top: clamp(16px, 4svh, 48px); font-size: clamp(30px, 5.2svh, 44px); line-height: 1.18; }
  .xp-switch { margin-top: clamp(14px, 3svh, 32px); height: 48px; padding: 4px; font-size: 20px; line-height: 24px; }
  .xp-switch__opt { height: 40px; padding: 0 20px; border-radius: 40px; }
  .xp-hero__reg { width: auto; height: 52px; margin-top: clamp(14px, 3svh, 28px); padding: 0 20px; font-size: 22px; line-height: 26px; justify-self: start; }
  .xp-hero__facts { margin-top: clamp(16px, 3svh, 40px); }
  .xp-fact dt { font-size: 15px; line-height: 19px; }
  .xp-fact dd { margin-top: 4px; font-size: 20px; line-height: 25px; }

  .xp-console { margin-top: clamp(16px, 4svh, 48px); padding: 16px 16px 10px; gap: 14px; }
  .xp-console__title { font-size: 17px; line-height: 21px; }
  .xp-console__dot { right: 16px; top: 23px; }
  .xp-console__set { gap: 8px; }
  .xp-tgl { height: 44px; padding: 0 12px; }
  .xp-hero .xp-tgl span { font-size: 18px; line-height: 22px; }
  .xp-hero .xp-tgl i { font-size: 14px; line-height: 18px; }
  .xp-console__mode { height: 36px; font-size: 15px; }
}

@media (min-width: 768px) and (max-width: 1439px) and (orientation: portrait) {
  .xp-hero {
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head    head"
      "title   title"
      "name    reg"
      "facts   facts"
      "scene   scene"
      "console console";
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: 24px;
    padding-bottom: 28px;
  }
  .xp-hero__title { margin-top: 28px; font-size: 38px; line-height: 44px; }
  .xp-hero__reg { grid-area: reg; align-self: end; justify-self: end; width: auto; height: 56px; margin-top: 24px; padding: 0 22px; font-size: 22px; }
  .xp-hero__facts { margin-top: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .xp-fact dt { font-size: 16px; line-height: 20px; }
  .xp-fact dd { margin-top: 4px; font-size: 22px; line-height: 27px; }

  /* Сцена — в потоке, занимает всё оставшееся место; витрина/сцена театра по центру */
  .xp-scene {
    grid-area: scene;
    position: relative; inset: auto;
    align-self: stretch;
    min-height: 380px;
    margin: 24px calc(-1 * var(--pad)) 0;
  }
  .xp-scene::after {
    background: linear-gradient(to bottom, var(--bg0), rgba(2, 8, 18, 0) 12%, rgba(2, 8, 18, 0) 88%, var(--bg0));
  }
  .xp-stage { inset: auto; top: 50%; left: 50%; right: auto; width: auto; height: 118%; transform: translate(-60%, -53%); }
  /* Переключатель сценария — поверх сцены, в её левом верхнем углу */
  .xp-switch { grid-area: scene; align-self: start; justify-self: start; z-index: 2; margin-top: 40px; }

  /* Пульт — строка из четырёх тумблеров под сценой (как на планшете) */
  .xp-console {
    margin-top: 12px;
    padding: 12px 20px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title modes" "set set";
    align-items: center;
    gap: 12px 16px;
  }
  .xp-console__title { grid-area: title; padding-right: 0; font-size: 18px; line-height: 22px; }
  .xp-console__dot { display: none; }
  .xp-console__set { grid-area: set; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .xp-hero[data-mode="museum"] .xp-console__set--museum,
  .xp-hero[data-mode="theatre"] .xp-console__set--theatre { display: grid; }
  .xp-tgl { height: 52px; padding: 0 12px; }
  .xp-hero .xp-tgl span { font-size: 16px; line-height: 19px; }
  .xp-hero .xp-tgl i { font-size: 13px; line-height: 16px; }
  .xp-console__modes { grid-area: modes; gap: 0; }
  .xp-console__mode { height: 40px; font-size: 16px; }
}

@media (max-width: 767px) {
  .xp-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "title" "name" "gap" "facts" "reg" "switch" "scene" "console";
    /* «gap» (1fr) забирает всё, что остаётся до высоты экрана: фон 1-го экрана растянут на 100svh */
    grid-template-rows: auto auto auto 1fr auto auto auto auto auto;
    padding-bottom: 28px;
  }
  /* 1-й экран: фон — арка с проекцией (img/mobile-fon-*, tools/build_experience_images.py).
     AVIF через image-set; первая строка — запасная для браузеров без image-set с type(). */
  .xp-hero__bg {
    display: block;
    grid-row: 1 / 7; grid-column: 1;
    min-height: 100svh;
    margin: 0 calc(-1 * var(--pad));
    background:
      linear-gradient(to bottom, var(--bg0) 14%, rgba(2, 8, 18, .55) 30%, rgba(2, 8, 18, 0) 42%, rgba(2, 8, 18, 0) 66%, var(--bg0) 90%),
      url(img/mobile-fon-1024.webp) 50% 50% / cover no-repeat var(--bg0);
    background:
      linear-gradient(to bottom, var(--bg0) 14%, rgba(2, 8, 18, .55) 30%, rgba(2, 8, 18, 0) 42%, rgba(2, 8, 18, 0) 66%, var(--bg0) 90%),
      image-set(url(img/mobile-fon-1024.avif) type("image/avif"), url(img/mobile-fon-1024.webp) type("image/webp")) 50% 50% / cover no-repeat var(--bg0);
    pointer-events: none;
  }
  .xp-hero__title, .xp-hero__facts, .xp-hero__reg { z-index: 1; }
  .xp-hero__facts { margin-top: 0; }
  .xp-hero__reg { margin: 20px 0 28px; }

  /* 2-й экран: переключатель → сцена → пульт */
  .xp-switch { margin-top: 32px; justify-self: start; }
  .xp-scene {
    aspect-ratio: auto;
    height: max(300px, calc(100svh - 290px));
    margin: 16px calc(-1 * var(--pad)) 0;
  }
  .xp-scene::after {
    display: block;
    background: linear-gradient(to bottom, var(--bg0), rgba(2, 8, 18, 0) 10%, rgba(2, 8, 18, 0) 90%, var(--bg0));
  }
  .xp-stage { top: 50%; left: 50%; right: auto; width: auto; height: 110%; transform: translate(-60%, -52%); }

  /* Пульт — две колонки, все четыре тумблера видны сразу */
  .xp-console { margin-top: 16px; }
  .xp-hero[data-mode="museum"] .xp-console__set--museum,
  .xp-hero[data-mode="theatre"] .xp-console__set--theatre { display: grid; }
  .xp-console__set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0; padding: 0;
    overflow: visible;
  }
  .xp-tgl { width: 100%; height: 48px; justify-content: space-between; }
}

/* Программа: раскрытая строка на планшетах и телефонах — белым до краёв экрана */
@media (max-width: 1023px), (max-width: 1439px) and (orientation: portrait), (max-width: 1439px) and (pointer: coarse) {
  .xp-slot.is-open { box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
}

@media (prefers-reduced-motion: reduce) {
  .xp-sticky, .xp-reg[open] { transition: none; animation: none; }
}

/* ============================== Правки mobile (2026-10-05) ==============================
   Типографика: H2 — 26/30, H3 — 20/30 (в «Почему стоит прийти» — 24/30), наборный текст 17 → 16 и 19 → 18.
   Кнопки «Регистрация +» и сегменты «Для кого» — по центру, «+» в программе — по верху справа.
   «Почему стоит прийти»: без линий в пунктах 02 и 03, у аккордеона нет правой рамки и полосы под активной вкладкой. Планшет и десктоп не меняются. */

@media (max-width: 767px) {
  .xp-learn__title, .xp-show__title, .xp-who__title, .xp-prog__title, .xp-spk__title, .xp-demo__title, .xp-why__title,
  .xp-final__title { font-size: 26px; line-height: 30px; }

  .xp-pass__body h3 { font-size: 20px; line-height: 30px; }
  .xp-why .xp-why__pane h3 { font-size: 24px; line-height: 30px; }

  .xp-btn { justify-content: center; }
  .xp-plate { align-items: center; }
  .xp-slot__icon { align-self: start; justify-self: end; margin-top: 2px; }

  .xp-fact dd,
  .xp-learn__kicker,
  .xp-learn__text,
  .xp-show .xp-show__row > p, .xp-show .xp-show__row > div,
  .xp-pass__body li,
  .xp-slot__name,
  .xp-why__p1 { font-size: 16px; }
  .xp-mixer__topic { font-size: 18px; }

  /* Почему стоит прийти */
  .xp-why .xp-why__tabs button:not(:nth-child(4)) { border-right: 0; }
  .xp-why .xp-why__tabs button.is-active { box-shadow: none; }
  .xp-gains li::before { display: none; }

  /* Переключатель «Музеи x Театры» над сценой — по центру */
  .xp-switch { justify-self: center; }
}

/* Десктоп, сценарий «Театр»: кадрирование базы сцены (тумблер «Экран» выкл) по макетам хиро.
   В макете база крупнее, чем cover в 1920×893: задник 132–740, край сцены 844 по y, правый портал 1735 по x —
   так линия пола совпадает с экраном, и люди стоят на сцене, а не у края. Остальные слои — как в SPEC. */
@media (min-width: 1440px) {
  .xp-stage--theatre .xp-layer--t-base:not([data-layer]) { left: -79px; top: -195px; width: 2381px; height: 1340px; }
}

/* Спикеры на mobile (2026-10-06): карточки друг под другом вместо микшера — лента каналов уходила
   за край экрана. Разметка .xp-spk__stack в index.html, тексты — копия SPEAKERS из experience.js. */
.xp-spk__stack { display: none; }

@media (max-width: 767px) {
  .xp-mixer { display: none; }
  .xp-spk__stack { display: flex; flex-direction: column; gap: 12px; }
  .xp-spk__item {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px;
    padding: 16px; background: var(--bg2);
  }
  .xp-spk__item img { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
  .xp-spk__who { align-self: center; }
  .xp-spk__name { font-weight: 700; font-size: 18px; line-height: 23px; color: var(--cyan); }
  .xp-spk__role { margin-top: 4px; font-size: 14px; line-height: 19px; }
  .xp-spk__time, .xp-spk__topic { grid-column: 1 / -1; }
  .xp-spk__time { margin-top: 16px; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--cyan); }
  .xp-spk__topic { margin-top: 6px; font-weight: 500; font-size: 18px; line-height: 24px; }
}

/* ============================== Демо-зоны: карточки-перевёртыши (2026-10-07) ==============================
   Три карточки вместо семи станций. Лицо — номер, иконка, название; оборот — фото, описание,
   «Регистрация +» и «↺». Переворачиваются при наведении мыши, на сенсорных экранах — касанием
   (класс .is-flipped ставит experience.js); «↺» нужна только для касания и при мыши скрыта.
   Обе стороны в одной ячейке grid, поэтому высота карточки — по большей из сторон, без
   фиксированных размеров. Поворот — rotateY у .xp-flip__inner. Под карточками — подпись. */
.xp-demo { height: auto; padding: 88px 84px 112px 71px; }
.xp-demo__head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
.xp-demo__title { font-weight: 700; font-size: 64px; line-height: 78px; }
.xp-demo__lead { text-align: right; font-size: 28px; line-height: 34px; color: #bababa; }
.xp-flips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.xp-flip { perspective: 2400px; }
.xp-flip__inner {
  display: grid; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
.xp-flip.is-flipped .xp-flip__inner { transform: rotateY(180deg); }
/* Невидимую сторону прячет visibility, переключаемая на середине поворота (.35 из .7 с):
   одного backface-visibility мало — Safari показывает изнанку зеркально, если в ней есть картинка. */
.xp-flip__face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--bg2);
  box-shadow: inset 0 0 0 2px rgba(77, 123, 159, .45);
  transition: visibility 0s linear .35s;
}
.xp-flip__face--back, .xp-flip.is-flipped .xp-flip__face--front { visibility: hidden; }
.xp-flip.is-flipped .xp-flip__face--back { visibility: visible; }
.xp-flip__hit {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; height: 100%; min-height: 560px;
  padding: 40px;
  text-align: left; color: #fff;
}
.xp-flip__hit:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.xp-flip__num { position: absolute; right: 40px; top: 40px; font-size: 24px; line-height: 29px; color: var(--steel); }
.xp-flip__icon {
  flex: none; width: 180px; height: 180px;
  fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.xp-flip__name { margin-top: auto; font-weight: 700; font-size: 44px; line-height: 52px; }
.xp-flip__face--back {
  display: flex; flex-direction: column;
  padding: 20px 20px 24px;
  transform: rotateY(180deg);
}
.xp-flip__face--back img { display: block; width: 100%; height: auto; aspect-ratio: 854 / 457; object-fit: cover; }
.xp-flip__desc { margin-top: 20px; font-size: 24px; line-height: 31px; }
.xp-flip__actions { display: flex; gap: 12px; margin-top: auto; padding-top: 24px; }
.xp-flip__reg {
  flex: 1; height: 64px; padding: 0 24px;
  background: var(--cyan); color: #000;
  text-align: left; font-weight: 700; font-size: 28px; line-height: 34px;
  transition: background-color .2s var(--ease);
}
.xp-flip__reg:hover { background: #a9f1ff; }
.xp-flip__undo {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border: 2px solid var(--steel); color: #fff;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.xp-flip__undo svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.xp-flip__undo:hover { border-color: var(--cyan); color: var(--cyan); }
.xp-flip__reg:focus-visible, .xp-flip__undo:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.xp-demo__note { max-width: 1240px; margin-top: 56px; font-size: 32px; line-height: 42px; }

/* Мышь: карточка поворачивается наведением, «↺» не нужна. Оборот по клику не закрывается (см. JS). */
@media (hover: hover) and (pointer: fine) {
  .xp-flip__undo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-flip__inner, .xp-flip__face { transition: none; }
}

@media (max-width: 1439px) {
  .xp-demo { padding: 72px var(--pad); }
  .xp-demo__title { font-size: 44px; line-height: 52px; }
  .xp-demo__lead { font-size: 20px; line-height: 26px; }
  .xp-flips { gap: 24px; margin-top: 40px; }
  .xp-flip__hit { min-height: 400px; padding: 28px; }
  .xp-flip__num { right: 28px; top: 28px; font-size: 18px; line-height: 22px; }
  .xp-flip__icon { width: 120px; height: 120px; }
  .xp-flip__name { font-size: 30px; line-height: 36px; }
  .xp-flip__face--back { padding: 14px 14px 18px; }
  .xp-flip__desc { margin-top: 14px; font-size: 18px; line-height: 24px; }
  .xp-flip__actions { gap: 10px; padding-top: 16px; }
  .xp-flip__reg { height: 52px; padding: 0 18px; font-size: 20px; line-height: 24px; }
  .xp-flip__undo { width: 52px; height: 52px; }
  .xp-flip__undo svg { width: 20px; height: 20px; }
  .xp-demo__note { max-width: 900px; margin-top: 40px; font-size: 24px; line-height: 32px; }
}

@media (max-width: 1023px) {
  .xp-demo { padding: 64px var(--pad); }
  .xp-demo__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .xp-demo__title { font-size: 40px; line-height: 48px; }
  .xp-demo__lead { text-align: left; }
  .xp-flips { gap: 16px; margin-top: 28px; }
  .xp-flip__hit { min-height: 320px; padding: 20px; }
  .xp-flip__num { right: 20px; top: 20px; font-size: 15px; line-height: 18px; }
  .xp-flip__icon { width: 88px; height: 88px; }
  .xp-flip__name { font-size: 22px; line-height: 27px; }
  .xp-flip__face--back { padding: 10px 10px 14px; }
  .xp-flip__desc { margin-top: 10px; font-size: 15px; line-height: 20px; }
  .xp-flip__actions { gap: 8px; padding-top: 12px; }
  .xp-flip__reg { height: 44px; padding: 0 14px; font-size: 16px; line-height: 20px; }
  .xp-flip__undo { width: 44px; height: 44px; }
  .xp-flip__undo svg { width: 18px; height: 18px; }
  .xp-demo__note { margin-top: 32px; font-size: 20px; line-height: 28px; }
}

@media (max-width: 767px) {
  .xp-demo { padding: 48px var(--pad); }
  .xp-demo__title { font-size: 26px; line-height: 30px; }
  .xp-demo__lead { font-size: 16px; line-height: 21px; }
  .xp-flips { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
  .xp-flip__hit { min-height: 0; }
  .xp-flip__icon { width: 80px; height: 80px; }
  .xp-flip__name { font-size: 22px; line-height: 28px; }
  .xp-flip__desc { font-size: 16px; line-height: 23px; }
  .xp-flip__reg { height: 52px; font-size: 18px; line-height: 22px; }
  .xp-flip__undo { width: 52px; height: 52px; }
  .xp-demo__note { margin-top: 24px; font-size: 18px; line-height: 25px; }
}

@media (max-width: 389px) {
  .xp-demo__title { font-size: 24px; line-height: 30px; }
}

/* ============================== Правки 2026-10-07: название, программа, демо-зоны на телефоне ==============================
   Название в хиро — одним блоком: «Polymedia Experience Day» (строка в фирменном написании) и «для
   профессионалов культуры и искусства» в h1 вместо заголовка и отдельной строки с названием. На ПК
   «Регистрация +» поднята на место убранной строки. В программе у спикеров — должности (колонка
   справа в потоке строки, а не абсолютом: высота строки растёт под две-три строки подписи). */
.xp-hero__brand { display: block; text-transform: uppercase; }
/* Только холст ПК: кнопка на месте убранной строки (ниже 1440 она в потоке); строка с названием —
   кеглем прежней строки названия, иначе в 64 px она заходит за плашку на табличку витрины */
@media (min-width: 1440px) {
  .xp-hero__reg { top: 556px; }
  .xp-hero__brand { font-size: 53.38px; line-height: 70px; }
}

.xp-slot__who--spk { white-space: normal; }
.xp-slot__who--spk b { display: block; font-weight: 500; }
.xp-slot__who--spk small { display: block; margin-top: 4px; font-size: 16px; line-height: 20px; opacity: .85; }

/* Заголовок на обороте карточки демо-зоны — только для телефона */
.xp-flip__title { display: none; }

@media (max-width: 1439px) {
  .xp-slot__who--spk small { font-size: 15px; line-height: 19px; }
}
@media (max-width: 767px) {
  .xp-slot__who--spk small { font-size: 13px; line-height: 17px; }

  /* Демо-зоны: карточки сразу открыты — фото, заголовок, текст; без иконок, переворота и кнопок */
  .xp-flip { perspective: none; }
  .xp-flip .xp-flip__inner { display: block; transform: none; transition: none; }
  .xp-flip__face--front, .xp-flip__actions { display: none; }
  .xp-flip .xp-flip__face--back { visibility: visible; transform: none; padding: 10px 10px 16px; }
  .xp-flip__title { display: block; margin-top: 14px; font-weight: 700; font-size: 20px; line-height: 26px; }
  .xp-flip__desc { margin-top: 6px; }
}
/* ============================== Правки 2026-10-07 (2): телефон ==============================
   «Experience Day» в названии — всегда второй строкой (иначе на широких телефонах переносится
   одно «Day»); в программе — отступ между темой доклада и докладчиком. */
@media (max-width: 767px) {
  .xp-hero__brand-2 { display: block; }
  .xp-slot__who { margin-top: 12px; }
  .xp-slot__who--spk small { margin-top: 3px; }
}
/* ============================== Программа: ровные отступы в раскрытых строках (2026-10-08) ==============================
   Описание (.xp-slot__more) стоит под шапкой строки, а высоту шапки раньше задавали то название, то
   колонка докладчика (с должностью — две-три строки): отступ до описания гулял от −7 до 65 px.
   Теперь шапка выровнена по верху с одинаковыми полями, колонка докладчика на ПК — абсолютом справа
   (в 108 px строки умещается), ниже 1440 докладчик — под названием. Отступ до описания: 20 / 16 / 14 / 12 px. */
@media (min-width: 1440px) {
  .xp-slot__head { align-items: flex-start; padding: 26px 0; }
  .xp-slot__who--spk { position: absolute; right: 83px; top: 26px; width: 430px; text-align: right; }
  .xp-slot__more { margin-top: -2px; max-width: calc(304px + 1060px); }
}
@media (max-width: 1439px) {
  .xp-slot__head {
    grid-template-columns: 150px minmax(0, 1fr) 44px;
    grid-template-areas: "time main icon" "time who icon";
  }
  .xp-slot__who { margin-top: 10px; text-align: left; }
  .xp-slot__more { margin-top: -3px; }
}
@media (max-width: 1023px) {
  .xp-slot__head { grid-template-columns: 136px minmax(0, 1fr) 44px; }
  .xp-slot__who { margin-top: 8px; }
  .xp-slot__more { margin-top: -3px; }
}
@media (max-width: 767px) {
  .xp-slot__head { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "time icon" "main icon" "who icon"; }
  .xp-slot__who { margin-top: 12px; }
  .xp-slot__more { margin-top: 2px; }
}
/* Скачать программу (PDF в бакете, files.polymedia.ru) — ссылки активны с 2026-10-08 */
.xp-prog__pdf:hover, .xp-final__pdf:hover { color: var(--bg0); }
.xp-final__pdf:hover { color: var(--cyan); }