/* DustDOG — секции 2.0–2.9 и адаптив */

/* ---------- слои страницы ---------- */
.scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.scene-on .scene-canvas { opacity: 1; }

/* main/footer без z-index: позиционированы и идут в DOM после canvas — рисуются поверх него,
   но не создают стековый контекст, поэтому mix-blend-mode: multiply у снимков видит фон страницы */
main, .site-footer { position: relative; }
section { position: relative; }
main > section:focus { outline: none; }
main:focus { outline: none; }

.section-pad { padding-block: var(--s-10); }

/* ---------- 2.0 Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled {
  background: rgba(244,242,237,.92);
  border-bottom-color: rgba(220,217,209,.8);
  box-shadow: 0 8px 24px rgba(15,15,15,.05);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: rgba(244,242,237,.62);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}
/* шапка поверх тёмных секций (#how, #key, подвал) */
.site-header.is-scrolled.is-dark {
  background: rgba(15,15,15,.82);
  border-bottom-color: rgba(44,44,44,.9);
  box-shadow: none;
  color: var(--ink-on-dark);
}
.site-header.is-dark .logo { color: var(--ink-on-dark); }
.site-header.is-dark .dd-cell:not(.dd-cell--accent) { fill: var(--ink-on-dark); }
.site-header.is-dark .nav-link { color: var(--ink-on-dark-2); }
.site-header.is-dark .nav-link:hover,
.site-header.is-dark .nav-link.is-active { color: var(--ink-on-dark); }
.site-header.is-dark .header-tag { color: var(--ink-on-dark-2); border-color: var(--line-dark); }
.site-header.is-dark .menu-toggle { border-color: var(--ink-on-dark-2); color: var(--ink-on-dark); }
.site-header.is-dark :focus-visible { outline-color: var(--ink-on-dark); }
.site-header.is-dark .nav-list .nav-link { color: var(--ink-2); }
.site-header.is-dark .nav-list .nav-link:hover { color: var(--ink); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled.is-dark { background: rgba(15,15,15,.68); }
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.logo-svg { width: 24px; height: 24px; flex: none; overflow: visible; }
.brand__word b, .logo-word b { color: var(--accent); font-weight: 900; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.main-nav { position: relative; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 36px);
}
.nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.nav-link:hover,
.nav-link.is-active { color: var(--ink); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

.menu-toggle { display: none; }
.header-tag {
  flex: none;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink-2);
}

/* ---------- 2.1 Hero ---------- */
.hero {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: var(--s-7) var(--s-9);
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
.hero-text {
  grid-column: 1 / span 6;
  grid-row: 1;
  position: relative;
  z-index: 3;
}
.hero-text .label { margin-bottom: var(--s-6); }
.hero .h1 { font-size: clamp(44px, 5.4vw, 104px); }
.hero .h1 .line { display: block; white-space: nowrap; }
.hero-lead { margin-top: var(--s-6); max-width: 25em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-6); }
.hero-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-5);
  color: var(--ink-2);
}
.hero-note .i { width: 18px; height: 18px; }
.hero-note span { flex: 1 1 220px; }

.hero-visual {
  grid-column: 6 / span 7;
  grid-row: 1;
  position: relative;
  aspect-ratio: 4 / 3;
  width: calc(100% + var(--gutter) + max(0px, (100vw - var(--container)) / 2) * .6);
  max-width: none;
}

/* статичный фолбэк кода (hero и final) */
.static-art {
  position: absolute;
  inset: 0;
  transition: opacity .4s ease;
}
.static-svg {
  position: absolute;
  inset: 6% 4% 8%;
  width: 92%;
  height: 86%;
}
.static-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* фон снимка светло-серый, не вырезан */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.img-missing > img,
.static-img.is-missing { display: none; }
.static-art:not(.img-missing) .static-svg { visibility: hidden; }
.no-js .static-art .static-svg { visibility: visible; }
.no-js .static-img { z-index: 1; }
.scene-on .static-art { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }

/* оранжевая «тень-плашка» под кодом (видна, когда работает 3D-сцена) */
.code-plate {
  position: absolute;
  left: 18%; right: 6%;
  bottom: 2%;
  height: 22%;
  background: radial-gradient(closest-side, rgba(255,74,28,.55), rgba(255,74,28,.18) 60%, rgba(255,74,28,0));
  filter: blur(14px);
  z-index: -1; /* под canvas (z 0): main без z-index, так что плашка уходит в корневой стековый контекст */
  opacity: 0;
  transition: opacity .6s ease .2s;
}
.scene-on .code-plate { opacity: .8; }

.code-caption {
  position: absolute;
  right: 8%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-m);
  background: rgba(244,242,237,.8);
  font-size: var(--t-small);
  z-index: 3;
}
.code-caption .mono { font-weight: 500; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  z-index: 3;
  padding: 4px 8px;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--ink-3-deco), transparent);
  transform-origin: top;
  animation: hint 2.4s var(--ease-io) infinite;
}
@keyframes hint {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- 2.2 Слои ---------- */
.layers { --tb: 1; }
.layers-sticky {
  padding-block: var(--s-9);
}
.layers-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
.layers-text { grid-column: 1 / span 5; position: relative; z-index: 3; }
.layers-text .label { margin-bottom: var(--s-5); }
.layers-desc { margin-top: var(--s-5); }

.layers-stage {
  grid-column: 6 / span 7;
  position: relative;
}
.layers-anchor { position: absolute; inset: 0; pointer-events: none; }
.layer-stack { display: grid; gap: 14px; }

.layer-card {
  position: relative;
  color: var(--ink);
}
.layer-face {
  position: relative;
  padding: 20px 22px;
}
.layer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.layer-head .badge { margin-left: auto; }
.layer-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.layer-data {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.glass-accent .layer-data,
.glass-accent .layer-title { color: #fff; }
.glass-accent .badge-demo { background: rgba(255,255,255,.92); color: var(--accent-ink); }
.glass-accent { background: var(--accent-cta); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-accent { background: rgba(196,50,14,.94); } /* белый мелкий текст ≥ 4.5:1 (при .86 было ≈ 4:1) */
}

.callouts { display: none; }

/* десктоп: pinned-секция и стеклянные слои в 3D */
@media (min-width: 768px) {
  .layers { height: 200vh; }
  .no-js .layers { height: auto; }
  .layers-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-block: var(--header-h) var(--s-5);
  }
  .no-js .layers-sticky { position: relative; height: auto; padding-block: var(--s-10); }
  .layers-grid { width: 100%; }

  /* Геометрия стопки согласована со сценой (scene.js: FILL.layers .56, разнос слоёв = .5 × код):
     шаг слоёв --zs = .28 × высота сцены — ровно как разнос кубиков, ширина карточки ≈ ширина кода.
     Якорь сцены (.layers-anchor) стоит в 3D-центре стопки, поэтому каждый слой кубиков — под своим стеклом. */
  .layers-stage {
    --stage-h: min(72vh, 640px, 60vw);
    --zs: calc(var(--stage-h) * .28);
    /* разнос верхнего слоя (L = 3) — по нему центр стопки кубиков уходит вверх (scene.js: mesh.position.z) */
    --x3: clamp(0, (var(--tb) - .39) / .45, 1);
    --s3: calc(var(--x3) * var(--x3) * (3 - 2 * var(--x3)));
    --spread: calc(.18 + var(--tb) * .82);
    height: var(--stage-h);
    perspective: 175vh; /* ≈ дистанция камеры сцены (fov 32°) в CSS px */
    perspective-origin: 40% 50%;
  }
  .layers-anchor {
    position: absolute;
    left: 40%;
    top: calc(84% - var(--zs) * 1.5 * .819 * var(--s3));
    width: var(--stage-h);
    height: var(--stage-h);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .layer-stack {
    position: absolute;
    left: 40%;
    top: 84%;
    width: calc(var(--stage-h) * .64);
    display: block;
    transform-style: preserve-3d;
    transform: translateX(-50%) rotateX(55deg) rotateZ(-30deg);
  }
  .layer-card {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    /* разнос стекла повторяет разнос «своего» слоя кубиков: t = (t_B − .15 − L·.08) / .45, плавная кривая */
    --x: clamp(0, (var(--tb) - .15 - var(--z) * .08) / .45, 1);
    --split: calc(var(--x) * var(--x) * (3 - 2 * var(--x)));
    /* +3px — без z-fighting у сложенных стёкол; --lift — подъём при наведении/выборе (переход через @property) */
    transform: translate3d(0, -50%, calc(var(--z) * var(--split) * var(--zs) + var(--z) * 3px + var(--lift)));
    will-change: transform;
  }
  .layer-face { padding: 18px 20px; }
  .layer-card.glass:not(.glass-accent) { background: rgba(255,255,255,.8); }
  .layer-card[data-layer="3"] { --z: 3; }
  .layer-card[data-layer="2"] { --z: 2; }
  .layer-card[data-layer="1"] { --z: 1; }
  .layer-card[data-layer="0"] { --z: 0; }
  .layer-title { font-size: 19px; }
  .layer-data { font-size: 15px; }
  /* при работающей 3D-сцене карточки проявляются на t_B 0.4 → 0.8 */
  .scene-on .layer-card {
    --appear: clamp(0, (var(--tb) - .4 - var(--i) * .03) * 5, 1);
    opacity: calc(var(--appear) * var(--dim));
    translate: 0 calc((1 - var(--appear)) * 24px);
  }

  .callouts {
    display: grid;
    position: absolute;
    right: 0;
    /* выноски — напротив центров стёкол: тот же шаг, что у стопки (проекция --zs) */
    top: calc(84% - var(--zs) * var(--spread) * 1.29);
    transform: translateY(-50%);
    width: 22%;
    gap: calc(var(--zs) * var(--spread) * .86 - 20px);
  }
  .callouts li {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .callout-line {
    flex: 1 1 auto;
    height: 1px;
    min-width: 24px;
    background: var(--ink-3-deco);
    position: relative;
    transform-origin: left;
    transform: scaleX(var(--cl, 1));
    transition: transform .3s var(--ease-out);
  }
  .callout-line::before {
    content: "";
    position: absolute;
    right: -3px; top: -3px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink);
  }
  .callouts .label { transition: opacity .3s ease .3s; color: var(--ink); }
  .dd-ready .layers:not(.callouts-in) .callout-line { --cl: 0; }
  .dd-ready .layers:not(.callouts-in) .callouts .label { opacity: 0; transition-delay: 0s; }

  /* панель подробностей — слева под текстом, стопка справа на обе строки */
  .layers-grid { grid-template-rows: auto auto; row-gap: var(--s-5); }
  .layers-text { grid-row: 1; align-self: end; }
  .layer-details { grid-row: 2; align-self: start; }
  .layers-stage { grid-row: 1 / span 2; align-self: center; }
  .layer-card { opacity: var(--dim); }
  .js .layers.has-open .layer-hint { display: none; }
}

/* ---------- 2.2a Слои: плашки нажимаются (js/main.js — initLayerCards) ---------- */
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dim  { syntax: '<number>'; inherits: false; initial-value: 1; }
.layer-card {
  --lift: 0px;
  --dim: 1;
  transition: --lift .28s var(--ease-out), --dim .28s ease, box-shadow .2s ease, border-color .2s ease;
}
.layer-toggle {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
/* вся «лицевая» часть плашки — зона нажатия кнопки */
.layer-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-l);
}
.layer-toggle:focus-visible { outline: none; }
.layer-toggle:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 3px; }

/* маркер «+» → «×» */
.layer-plus {
  position: relative;
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--ink-2);
  transition: transform .25s var(--ease-out), background-color .2s, color .2s, border-color .2s;
}
.layer-plus::before,
.layer-plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 1.5px;
  margin: -.75px 0 0 -5px;
  background: currentColor;
  border-radius: 1px;
}
.layer-plus::after { transform: rotate(90deg); }
.glass-accent .layer-plus { color: #fff; }
.layer-card.is-open .layer-plus { transform: rotate(45deg); background: var(--accent-cta); border-color: var(--accent-cta); color: #fff; }
.glass-accent.is-open .layer-plus { background: #fff; border-color: #fff; color: var(--accent-ink); }

/* наведение (только точный указатель) и выбор */
@media (hover: hover) and (pointer: fine) {
  .layers:not(.is-locked) .layer-card:hover {
    --lift: 14px;
    border-color: var(--accent);
    box-shadow: 0 0 0 1.5px var(--accent), 0 18px 44px var(--accent-glow);
  }
  .layers:not(.is-locked) .layer-card:hover .layer-plus { color: var(--accent-ink); }
  .layers:not(.is-locked) .layer-card.glass-accent:hover { box-shadow: 0 0 0 2px var(--ink), 0 18px 44px var(--accent-glow); }
  .layers:not(.is-locked) .layer-card.glass-accent:hover .layer-plus { color: #fff; }
}
.layer-card.is-focus { --lift: 14px; }
.layer-card.is-open {
  --lift: 14px;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 18px 44px var(--accent-glow);
}
.layer-card.glass-accent.is-open { box-shadow: 0 0 0 2px var(--ink), 0 18px 44px var(--accent-glow); }
.layer-stack.has-active .layer-card:not(.is-active) { --dim: .5; }
/* пока стёкла не разъехались (pinned, t_B мал) — нажимать нечего: карточки прозрачны и сложены */
.layers.is-locked .layer-card { pointer-events: none; }

/* выноски справа: подсветка подписи выбранного слоя */
.callouts li .label { transition: color .2s, opacity .3s ease .3s; }
.callouts li.is-hl .label { color: var(--accent-ink); }
.callouts li.is-hl .callout-line { background: var(--accent); }
.callouts li.is-hl .callout-line::before { background: var(--accent); }

/* подсказка */
.layer-hint { display: none; }
.js .layer-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-5);
  color: var(--ink-2);
  transition: opacity .2s ease;
}
.layer-hint-plus {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-ink);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
}

/* панель подробностей */
.layer-details {
  grid-column: 1 / span 5;
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.details-inline .layer-details { display: none; }
/* стёкла сложены и прозрачны (скролл вверх) — выбор сохраняется, панель прячется до разъезда */
.layer-details { transition: opacity .25s ease, visibility 0s linear 0s; }
.layers.is-locked .layer-details { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.layer-detail {
  position: relative;
  min-width: 0;
  padding: 18px 22px 18px 24px;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: 0 18px 44px rgba(15,15,15,.08);
}
.layer-detail::before {
  content: "";
  position: absolute;
  left: -1px; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.motion-ok .layer-detail { animation: ld-in .32s var(--ease-out) both; }
@keyframes ld-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ld-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.ld-step { color: var(--accent-ink); }
.ld-title {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.ld-list { margin-top: 10px; }
.ld-list > div {
  display: grid;
  grid-template-columns: minmax(84px, 30%) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ld-list dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
  padding-top: 2px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ld-list dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ld-list dd.mono { font-size: 14px; }
.ld-list .badge { white-space: normal; }
.ld-note {
  margin-top: 10px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
}

/* панель внутри плашки (телефон: аккордеон прямо под плашкой) */
.layer-card .layer-detail {
  margin: 0 22px 18px;
  padding: 4px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.layer-card .layer-detail::before { display: none; }
.layer-card .ld-head { display: none; }
.layer-card .ld-title { margin-top: 4px; font-size: 15px; }
.glass-accent .layer-detail .ld-title,
.glass-accent .layer-detail dd { color: #fff; }
.glass-accent .layer-detail dt,
.glass-accent .layer-detail .ld-note { color: rgba(255,255,255,.88); }
.glass-accent .ld-list > div { border-top-color: rgba(255,255,255,.35); }

/* ---------- 2.3 Как это работает ---------- */
.on-dark {
  background: var(--bg-ink);
  color: var(--ink-on-dark);
}
.how { padding-block: var(--s-10); }
.how-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-8) 24px;
}
.how-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}
.how-head .label { grid-column: 1 / -1; }
.how-head .h2 { grid-column: 1 / span 7; }
.how-desc { grid-column: 8 / span 5; max-width: 40ch; }

.steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}
.step { position: relative; }
.step-num { display: block; color: var(--accent); margin-bottom: var(--s-4); }
.step-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-m);
  background: var(--bg-ink-2);
  color: var(--ink-on-dark);
  position: relative;
  z-index: 1;
}
.step-icon .i { width: 26px; height: 26px; }
.step-icon-accent { border-color: var(--accent); color: var(--accent); }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--t-label) * 1.4 + var(--s-4) + 28px);
  left: 68px;
  right: -12px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(255,74,28,.35));
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--t-label) * 1.4 + var(--s-4) + 28px - 4px);
  right: -12px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  transform: rotate(45deg);
  opacity: .6;
}
.step-title {
  margin-top: var(--s-5);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.step-text {
  margin-top: var(--s-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-on-dark-2);
}

.receipt-wrap {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
.receipt-card {
  grid-column: 1 / span 8;
  position: relative;
  z-index: 2;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-l);
  border: 1px solid var(--accent);
  background: rgba(26,26,26,.94);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 6px rgba(255,74,28,.08);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .receipt-card {
    background: rgba(26,26,26,.7);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}
.receipt-card .label-row { color: var(--accent); margin-bottom: var(--s-4); }
.receipt-card .h3 { font-size: clamp(24px, 2.4vw, 34px); }
.receipt-text { margin-top: var(--s-4); color: var(--ink-on-dark-2); max-width: 58ch; }
.receipt-lines {
  display: grid;
  gap: 6px;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px dashed var(--line-dark);
  font-size: 14px;
  color: var(--ink-on-dark);
}

.art { position: relative; margin: 0; }
.art.img-missing { display: none; }
.art-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.receipt-art {
  grid-column: 9 / span 4;
  justify-self: center;
  width: min(100%, 240px);
  transform: rotate(6deg);
}
.receipt-art {
  background: #F2F2F0;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.receipt-art img { max-height: 420px; width: auto; margin-inline: auto; }
.receipt-art .art-overlay {
  left: 50%;
  top: 44%;
  transform: translateX(-50%) rotate(-6deg);
  white-space: nowrap;
  font-size: 10.5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  color: var(--ink);
  background: rgba(255,255,255,.85);
  padding: 4px 6px;
  border-radius: 4px;
}

/* ---------- 2.4 Что проверяем ---------- */
.check { padding-block: var(--s-10); }
.check-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-7) 24px;
  align-items: start;
}
.check-head {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.check-desc { margin-top: var(--s-5); }

.shard {
  --sq: 18px;
  position: relative;
  width: calc(var(--sq) * 9 + 8 * 2px);
  aspect-ratio: 1;
  margin-top: var(--s-7);
  margin-left: 8px;
}
.shard-grid {
  display: grid;
  grid-template-columns: repeat(9, var(--sq));
  grid-auto-rows: var(--sq);
  gap: 2px;
  transition: opacity .4s ease, transform .3s var(--ease-out);
}
.sq { display: block; border-radius: 2px; }
.sq.on { background: var(--ink); box-shadow: inset 0 -2px 0 rgba(255,255,255,.08); }
/* по умолчанию (без JS, reduced-motion) — уже «отколот» */
.sq.bad {
  background: var(--err);
  transform: translate(14px, 22px) rotate(35deg) scale(.92);
  box-shadow: 0 6px 12px rgba(196,67,58,.35);
}
.dd-ready.motion-ok .shard:not(.is-played) .sq.bad {
  background: var(--ink);
  transform: none;
  box-shadow: none;
}
.dd-ready.motion-ok .shard .sq.bad {
  transition: background-color .3s var(--ease-io) .4s,
              transform .6s cubic-bezier(.32, 0, .67, 0) .7s,
              box-shadow .3s ease .4s;
}
.dd-ready.motion-ok .shard.is-played .shard-grid {
  transform: translateY(-3px);
  transition-delay: 1.3s;
}
.scene-on .shard-grid { opacity: 0; }

.label-art {
  width: clamp(180px, 22vw, 320px);
  margin-top: var(--s-6);
  transform: rotate(-8deg);
}
/* multiply здесь не срабатывает (sticky .check-head и rotate — свои стековые контексты), и светлый фон
   снимка читался как прямоугольник; края растворяются маской */
.label-art img {
  width: 100%;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 11%, #000 91%, transparent 98%), linear-gradient(to bottom, transparent 2%, #000 12%, #000 91%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 2%, #000 11%, #000 91%, transparent 98%), linear-gradient(to bottom, transparent 2%, #000 12%, #000 91%, transparent 98%);
  mask-composite: intersect;
}
.label-art .art-overlay {
  left: 12%;
  bottom: 14%;
  font-size: 12px;
}
.label-art .art-overlay .mono {
  background: rgba(255,255,255,.88);
  padding: 2px 6px;
  border-radius: 4px;
}

.check-list-wrap { grid-column: 6 / span 7; }
.reasons { display: grid; gap: 12px; }
.reason {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 20px 24px;
}
.reason-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.reason-icon .i { width: 20px; height: 20px; }
.tone-err   { background: var(--err-soft);   color: var(--err-ink); }
.tone-muted { background: var(--muted-soft); color: var(--muted-ink); }
.tone-warn  { background: var(--warn-soft);  color: var(--warn-ink); }
.tone-ok    { background: var(--ok-soft);    color: var(--ok-ink); }
.reason-title { font-size: 19px; font-weight: 600; line-height: 1.3; }
.reason-text { margin-top: 4px; font-size: var(--t-small); color: var(--ink-2); }
.reason .badge { margin-top: 8px; }
.reason.is-pulse { animation: pulse-err 1.2s ease-out; border-color: var(--err); }
@keyframes pulse-err {
  0%   { box-shadow: 0 0 0 0 rgba(196,67,58,.0); }
  25%  { box-shadow: 0 0 0 4px rgba(196,67,58,.35); }
  100% { box-shadow: 0 0 0 0 rgba(196,67,58,0); }
}

.check-summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--s-5);
  color: var(--ink-2);
}
.check-summary .i { width: 22px; height: 22px; color: var(--ok-ink); margin-top: 1px; }

.table-block {
  margin-top: var(--s-7);
  padding: 20px 24px 8px;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}

/* ---------- 2.5 Ключ — у вас ---------- */
.key { padding-block: var(--s-10); overflow: hidden; }
.key-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-7) 24px;
  align-items: center;
}
.key-text { grid-column: 1 / span 6; }
.key-text .label { margin-bottom: var(--s-5); }
.on-dark .key-sub { color: var(--accent); }
.key-sub {
  margin-top: var(--s-5);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--accent);
}
.facts { margin-top: var(--s-6); display: grid; gap: 14px; max-width: 52ch; }
.facts li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-on-dark);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 18px;
  height: 2px; /* 1.5px на дробных позициях сглаживался в серый — тире выглядели разными */
  background: var(--accent);
}
.key-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  color: var(--ink-on-dark-2);
  max-width: 60ch;
}
.key-note .i { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-on-dark-2); }

.token-figure {
  grid-column: 7 / span 6;
  position: relative;
  margin: 0;
  padding-block: 44px;
}
.token-art {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  /* usb-token.webp — снимок на светлом фоне; PNG с альфой весит 1,6 МБ (бюджет растра ≤ 900 КБ),
     поэтому токен показан «студийной карточкой» на тёмной секции, без градиентов */
  background: #FFFFFF;
  border-radius: var(--r-l);
  box-shadow: 0 40px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
}
.token-art.img-missing { background: var(--bg-ink-2); box-shadow: none; }
.token-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6% 4%;
  mix-blend-mode: multiply;
}
.token-css { display: none; position: absolute; inset: 0; }
.token-art.img-missing .token-css { display: block; }
.tc-body {
  position: absolute;
  left: 22%; top: 34%;
  width: 52%; height: 30%;
  border-radius: 18px 28px 28px 18px;
  background: linear-gradient(160deg, #2a2a2a, #111 60%, #0a0a0a);
  border: 1px solid #3a3a3a;
  transform: rotate(-24deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.tc-plug {
  position: absolute;
  left: 70%; top: 26%;
  width: 16%; height: 18%;
  border-radius: 3px;
  background: linear-gradient(180deg, #c9c9c6, #8d8c88);
  transform: rotate(-24deg);
}
.tc-glow {
  position: absolute;
  left: 38%; top: 42%;
  width: 18%; height: 10%;
  border-radius: 6px;
  background: var(--accent);
  filter: blur(10px);
  opacity: .55;
  transform: rotate(-24deg);
}

.token-callouts { display: contents; }
.tcl {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tcl .label { color: var(--ink-on-dark); }
.tcl-line {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--ink-on-dark-2);
  position: relative;
}
.tcl-line::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.tcl-1 { left: 0; top: 6px; }
.tcl-1 .tcl-line { order: 2; }
.tcl-1 .tcl-line::after { right: -3px; }
.tcl-2 { right: 0; top: 6px; }
.tcl-2 .tcl-line::after { left: -3px; }
.tcl-3 { right: 0; bottom: 6px; }
.tcl-3 .tcl-line::after { left: -3px; }

/* ---------- 2.6 Журнал ---------- */
.journal { padding-block: var(--s-10); }
.journal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-7) 24px;
  align-items: start;
}
.journal-head { grid-column: 1 / span 5; }
.journal-desc { margin-top: var(--s-5); }
.journal-head > .label { margin-bottom: var(--s-5); }

.app-window {
  grid-column: 6 / span 7;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: 0 30px 70px rgba(15,15,15,.10);
  overflow: hidden;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--bg-ink);
  color: var(--ink-on-dark);
}
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-dark); display: block; }
.win-dots i:first-child { background: var(--accent); }
.logo-word-sm { font-size: 15px; }
.win-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--line);
  background: #FAF9F6;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.win-tabs::-webkit-scrollbar { display: none; }
.win-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  white-space: nowrap;
}
.win-tab .i { width: 18px; height: 18px; }
.win-tab.is-active {
  background: var(--bg-paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: inset 0 2px 0 var(--accent), 0 1px 0 var(--bg-paper);
}
.win-body { padding: 18px 18px 8px; overflow-x: auto; }
.demo-table .num { text-align: right; }

.features {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.feature { padding: 24px; }
.feature > .i { color: var(--accent-ink); }
.feature-title { margin-top: var(--s-4); font-size: 18px; font-weight: 600; line-height: 1.3; }
.feature-text { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }

/* ---------- 2.7 Что нужно ---------- */
.reqs { padding-block: var(--s-9); border-top: 1px solid var(--line); }
.reqs .label { margin-bottom: var(--s-4); }
.h2-sm { font-size: calc(var(--t-h3) * 1.4); line-height: 1; }
.reqs-list {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.req { padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.req > .i { width: 28px; height: 28px; }
.req-title { margin-top: var(--s-4); font-size: 18px; font-weight: 600; line-height: 1.3; }
.req-text { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }

/* ---------- 2.8 Финал ---------- */
.final { padding-bottom: var(--s-9); }
.final::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--s-9);
  background: linear-gradient(rgba(15,15,15,0), var(--bg-ink));
  pointer-events: none;
}
.final-sticky {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--s-8) var(--s-7);
  text-align: center;
}
.final-visual {
  position: relative;
  width: min(92vw, 620px, 62vh);
  aspect-ratio: 4 / 3;
}
.final-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--s-5);
}
.final-text { margin-top: var(--s-5); max-width: 36em; color: var(--ink-2); }
.final-content .btn { margin-top: var(--s-6); }
.dd-ready.motion-ok .final-content {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s var(--ease-out);
}
.dd-ready.motion-ok .final.text-in .final-content { opacity: 1; transform: none; }

@media (min-width: 768px) {
  .scene-on .final { height: 220vh; }
  .scene-on .final-sticky { position: sticky; top: 0; height: 100vh; min-height: 0; }
}

/* ---------- 2.9 Подвал ---------- */
.site-footer { padding-block: var(--s-8) var(--s-7); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-6) 24px;
}
.footer-brand { grid-column: 1 / span 6; }
.logo-dark { color: var(--ink-on-dark); }
.footer-line { margin-top: var(--s-4); color: var(--ink-on-dark-2); max-width: 44ch; }
.footer-nav { grid-column: 8 / span 5; }
.footer-nav ul { display: grid; gap: 10px; }
.footer-nav a {
  color: var(--ink-on-dark);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.footer-nav a:hover { border-bottom-color: var(--accent); }
.footer-demo {
  grid-column: 1 / -1;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  color: var(--ink-on-dark-2);
  font-size: 13px;
}
.footer-copy { grid-column: 1 / -1; color: var(--ink-on-dark-2); }

/* ---------- появление при прокрутке (только с JS и без reduced-motion) ---------- */
.dd-ready.motion-ok .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.dd-ready.motion-ok .reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   Адаптив
   ========================================================= */
@media (min-width: 768px) and (max-width: 1100px) {
  /* узкая сцена слоёв: стёкла короче, иначе соседнее стекло закрывает заголовок нижнего */
  .layer-face { padding: 12px 14px; }
  .layer-head { gap: 6px 8px; }
  .layer-plus { width: 22px; height: 22px; }
  .ld-list > div { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 6px 0; }
  .ld-list dd { font-size: 14px; }
  .ld-list dd.mono { font-size: 13px; }
  .ld-note { font-size: 13px; }
  .layer-detail { padding: 14px 16px 14px 18px; }
}
/* узкий или невысокий десктоп: открытая панель заменяет абзац описания, чтобы всё влезало в pinned-экран */
@media (min-width: 768px) and (max-width: 1100px), (min-width: 768px) and (max-height: 820px) {
  .js .layers.has-open .layers-desc { display: none; }
  .layer-head .i { width: 18px; height: 18px; }
  .layer-title { font-size: 15px; }
  .layer-data { font-size: 12.5px; margin-top: 6px; line-height: 1.4; }
}
@media (max-width: 1100px) {
  /* планшет: метка «Приложение для Windows» не помещается рядом с меню — меню рвалось в 3 строки */
  .header-tag { display: none; }
  .nav-link { white-space: nowrap; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-7); }
  .step:nth-child(3)::after, .step:nth-child(3)::before { display: none; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reqs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reason { grid-template-columns: 40px minmax(0, 1fr); }
  .reason .badge { grid-column: 2; justify-self: start; margin-top: 0; }
}

@media (max-width: 960px) {
  .journal-head, .app-window { grid-column: 1 / -1; }
  .key-text, .token-figure { grid-column: 1 / -1; }
  .token-figure { order: -1; }
  .how-head .h2, .how-desc { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .check-head, .check-list-wrap { grid-column: 1 / -1; }
  .check-head { position: static; }
  .label-art { display: none; }
}

@media (max-width: 767px) {
  .section-pad, .how, .check, .key, .journal { padding-block: var(--s-8); }
  .reqs { padding-block: var(--s-8); }

  /* шапка */
  .header-tag { display: none; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-m);
    background: transparent;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
  }
  .menu-toggle .i { width: 20px; height: 20px; }
  .menu-toggle .i-close { display: none; }
  .menu-toggle[aria-expanded="true"] .i-close { display: block; }
  .menu-toggle[aria-expanded="true"] .i-open { display: none; }
  .nav-list {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(calc(100vw - 32px), 300px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: var(--bg-paper);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: 0 24px 60px rgba(15,15,15,.16);
  }
  .js .nav-list { display: none; }
  .js .nav-list.is-open { display: flex; }
  .no-js .menu-toggle { display: none; }
  .no-js .nav-list { position: static; width: auto; flex-direction: row; flex-wrap: wrap; padding: 0; border: 0; box-shadow: none; background: none; gap: 4px 14px; }
  .no-js .site-header { height: auto; position: relative; }
  .nav-list .nav-link {
    display: block;
    padding: 14px 14px;
    border-radius: var(--r-m);
    font-size: 16px;
  }
  .nav-list .nav-link::after { display: none; }
  .nav-list .nav-link:hover { background: var(--muted-soft); }

  /* hero: canvas сверху, текст под ним */
  .hero { min-height: 0; padding-block: var(--s-4) var(--s-8); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .hero-text, .hero-visual { grid-column: 1; grid-row: auto; }
  .hero-visual {
    order: -1;
    width: 100%;
    height: max(52vw, 260px);
    aspect-ratio: auto;
  }
  .hero .h1 { font-size: clamp(40px, 11.5vw, 72px); }
  .hero-text .label { margin-bottom: var(--s-5); }
  .hero-lead { margin-top: var(--s-5); }
  .hero-cta .btn { width: 100%; }
  .code-caption { right: 0; bottom: 0; }
  .scroll-hint { display: none; }

  /* слои: без pin, стопкой */
  .layers-sticky { padding-block: var(--s-8); }
  .layers-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .layers-text, .layers-stage, .layer-details { grid-column: 1; }
  .layer-stack { gap: 12px; perspective: 900px; }
  .layer-card.is-open { transform: none; }
  .layer-face { padding: 16px 18px; }
  .layer-card .layer-detail { margin: 0 18px 16px; }
  .layer-plus { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; }
  .js .layer-head { padding-right: 34px; }
  .layer-card {
    transform: rotateX(14deg);
    transform-origin: 50% 100%;
  }
  .layer-head .badge { margin-left: 0; }
  .dd-ready.motion-ok .layer-card {
    opacity: 0;
    translate: 0 24px;
    transition: opacity .5s ease, translate .6s var(--ease-out);
    transition-delay: calc(var(--i) * 120ms);
  }
  .dd-ready.motion-ok .layers.is-in .layer-card { opacity: 1; translate: 0 0; }

  /* шаги: вертикальный список с линией слева */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 18px;
    padding-bottom: var(--s-6);
  }
  .step-num { grid-column: 2; margin-bottom: 4px; }
  .step-icon { grid-column: 1; grid-row: 1 / span 3; }
  .step-title, .step-text { grid-column: 2; }
  .step-title { margin-top: 0; }
  .step:not(:last-child)::after, .step:nth-child(3)::after {
    display: block;
    top: 60px; bottom: 4px;
    left: 28px; right: auto;
    width: 1px; height: auto;
    background: linear-gradient(var(--accent), rgba(255,74,28,.2));
  }
  .step:last-child::after { display: none; }
  .step::before, .step:nth-child(3)::before { display: none; }

  .receipt-card { grid-column: 1 / -1; }
  .receipt-art { display: none; }

  /* проверка */
  .shard { --sq: 14px; margin-top: var(--s-6); }
  .reason { padding: 18px; gap: 12px 14px; }
  .reason-title { font-size: 17px; }
  .table-block { padding: 16px; }

  /* таблицы → карточки */
  .demo-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .demo-table, .demo-table tbody, .demo-table tr, .demo-table td { display: block; width: 100%; }
  .demo-table caption { display: block; }
  .demo-table tr {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--bg-paper);
  }
  .demo-table td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    gap: 10px;
    height: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .demo-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 2px;
  }
  .demo-table .num { text-align: left; }
  .table-block { background: transparent; border: 0; padding: 0; }
  .win-body { padding: 12px; overflow: visible; }
  .win-body .demo-table tr { background: #FAF9F6; }

  /* ключ */
  .token-figure { padding-block: 0; }
  .token-art { max-width: 100%; }
  .token-callouts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--s-4);
  }
  .tcl {
    position: static;
    padding: 6px 10px;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-s);
  }
  .tcl-line { display: none; }

  /* журнал */
  .features { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .win-tab { padding: 10px; }
  .win-tab .i { display: none; }

  /* требования */
  .reqs-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }

  /* финал */
  .final-visual { width: 100%; }
  .final-content .btn { width: 100%; }
  .btn { padding: 16px 20px; }

  .footer-brand, .footer-nav { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .win-tabs { padding-inline: 8px; }
  .win-tab { font-size: 13px; padding: 9px 8px; }
}

/* ---------- reduced motion: финальные состояния, без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-line { animation: none; transform: none; }
  .layers { height: auto !important; }
  .layers-sticky { position: relative !important; height: auto !important; padding-block: var(--s-10) !important; }
  .layers-stage { --spread: 1 !important; }
  .layer-card { opacity: 1 !important; translate: 0 0 !important; transition: none !important; }
  .layer-plus, .layer-hint, .callouts li .label { transition: none !important; }
  .layer-detail { animation: none !important; }
  .final { height: auto !important; }
  .final-sticky { position: relative !important; height: auto !important; min-height: 0 !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .layers-sticky { padding-block: var(--s-8) !important; }
}

/* Личный кабинет: в шапке справа на широком экране, пунктом меню — на узком */
.header-cabinet { text-decoration: none; cursor: pointer; }
.header-cabinet:hover, .header-cabinet:focus-visible { color: var(--ink, inherit); border-color: currentColor; }
.nav-cabinet { display: none; }
@media (max-width: 1100px) { .nav-cabinet { display: list-item; } }