@import url("./src/styles/tokens.css");

:root {
  --paper: #f3f0e8;
  --paper-deep: #e9e5da;
  --ink: #0b0c0d;
  --ink-soft: #17191d;
  --graphite: #24272d;
  --muted: #777b83;
  --muted-light: #a8abb1;
  --blue: #315cff;
  --acid: #dfff4f;
  --line-dark: rgba(11, 12, 13, 0.16);
  --line-light: rgba(243, 240, 232, 0.18);
  --stage-progress: 0;
  --open: 0;
  --approach: 0;
  --enter: 0;
  --reveal: 0;
  --iris: 0%;
  --mx: 0deg;
  --my: 0deg;
}

/* July 2026 refinement: clearer scroll story, stronger hierarchy and safer responsive type. */
.desktop-nav {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 34px minmax(170px, 1fr);
  align-items: center;
  gap: 6px;
}

.nav-side {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-side-left { justify-content: flex-end; }
.nav-side-right { justify-content: flex-start; }
.nav-door { margin-inline: 0; }

.signal-thread {
  z-index: 5;
  opacity: .68;
}

.signal-thread circle {
  display: none;
}

.signal-thread path {
  stroke-width: 1.55;
  opacity: .72;
}

.inside-scene { z-index: 11; }

.universe-switcher {
  position: sticky;
  top: 96px;
  z-index: 18;
  overflow: hidden;
  background: rgba(20, 21, 21, .82);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
  backdrop-filter: blur(22px) saturate(135%);
}

.universe-panels {
  display: grid;
  gap: 16vh;
  padding-bottom: 18vh;
}

.universe-panel,
.universe-panel[hidden] {
  position: sticky;
  top: 188px;
  display: grid;
  min-height: min(720px, calc(100svh - 220px));
  opacity: .76;
  transform: scale(.975);
  transform-origin: 50% 10%;
  transition: opacity 320ms ease, transform 500ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease;
}

.universe-panel-system { background: linear-gradient(135deg, rgba(191,255,57,.075), rgba(255,255,255,.018)); }
.universe-panel-practice { background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(191,255,57,.035)); }
.universe-panel.is-active { opacity: 1; transform: none; border-color: rgba(191,255,57,.48); }

.capability-board { margin-top: 18px; }
.capability-widget {
  padding-bottom: 96px;
  opacity: .72;
  transition: opacity 320ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, box-shadow 320ms ease;
}
.capability-widget > strong {
  max-width: 88%;
  margin-top: 38px;
  font-size: clamp(28px, 2.45vw, 42px);
  line-height: 1.01;
  text-wrap: balance;
}
.capability-widget > p { max-width: 74%; }
.capability-widget.is-active,
.capability-widget:hover,
.capability-widget:focus-within {
  opacity: 1;
  transform: translateY(-6px);
  border-color: rgba(191,255,57,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.3), 0 0 0 1px rgba(191,255,57,.08);
}
.acid-widget.is-active { border-color: var(--paper); }
@keyframes industryFlow { to { transform: translateX(-90px); } }
@keyframes orbFloat { to { transform: translateY(-9px); } }

.case-stage-v2 {
  grid-template-columns: minmax(180px,.3fr) minmax(0,900px);
  justify-content: space-between;
  gap: clamp(34px,5vw,80px);
}
.case-reel { gap: 11vh; }
.case-slide {
  top: 126px;
  min-height: 350px;
  padding: clamp(30px,3.5vw,48px);
  gap: 32px;
  border-radius: 32px;
}
.case-slide blockquote { max-width: 760px; font-size: clamp(27px,2.75vw,44px); line-height:1.04; }
.case-person { width:min(100%,560px); }
.case-person > span { width:56px; height:56px; font-size:19px; }
.case-person strong { font-size:16px; }

.roadmap-heading-v2 h2 {
  max-width: 950px;
  font-size: clamp(52px,5.3vw,88px);
  text-wrap: balance;
}

.miro-map { --roadmap-progress:0; }
.miro-map > svg path {
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--roadmap-progress));
  transition:stroke-dashoffset 90ms linear;
}
.map-node { opacity:.58; transform-origin:center; transition:opacity 280ms ease,filter 320ms ease; }
.map-node.is-active { opacity:1; filter:drop-shadow(0 12px 16px rgba(9,10,10,.12)); }

.dropoff-board {
  position:relative;
  grid-template-columns:.92fr 1.08fr 1fr;
  gap:10px;
  margin-top:22px;
  padding:10px;
  border-radius:34px;
  color:var(--paper);
  background:#111212;
  box-shadow:0 30px 80px rgba(9,10,10,.16);
}
.dropoff-board > div { min-height:320px; border-color:rgba(244,244,240,.12); background:rgba(244,244,240,.035); }
.dropoff-title span { color:var(--acid); }
.dropoff-title strong { margin-top:56px; color:var(--paper); font-size:clamp(26px,2.2vw,34px); }
.dropoff-answer { background:var(--acid) !important; color:var(--ink); }
.dropoff-answer span,.dropoff-answer strong { color:var(--ink); }
.dropoff-answer p { color:rgba(9,10,10,.7); font-size:17px; }

.price-grid-v2 { gap:14px; margin-top:64px; }
.price-card-v2 {
  min-height:560px;
  padding:58px 26px 24px;
  overflow:visible;
}
.price-badge-v2 {
  position:absolute;
  top:-24px;
  right:22px;
  left:22px;
  z-index:2;
  display:grid;
  place-items:center;
  min-height:48px;
  color:var(--ink);
  border:1px solid rgba(9,10,10,.18);
  background:var(--paper);
  box-shadow:0 14px 34px rgba(9,10,10,.14);
}
.price-card-acid .price-badge-v2 { color:var(--acid); border-color:var(--ink); background:var(--ink); }
.price-card-v2 h3 { margin:28px 0 0; font-size:clamp(30px,2.35vw,38px); }
.price-advantage { display:grid; gap:12px; min-height:130px; margin-top:30px; }
.price-advantage strong { font-size:clamp(22px,1.65vw,28px); line-height:1.04; letter-spacing:-.035em; text-wrap:balance; }
.price-advantage small { font-size:14px; line-height:1.4; }
.price-value { font-size:clamp(50px,4vw,64px); }
@keyframes passSpin { to { transform:rotate(360deg); } }
@keyframes passHand { to { transform:rotate(360deg); } }

.universe-copy h3,
.proof-heading-v2 h2,
.outcomes-heading-v2 h2,
.pricing-heading-v2 h2,
.trial-copy-v2 h3 { text-wrap:balance; }

@media (max-width: 1180px) {
  .desktop-nav { grid-template-columns:minmax(145px,1fr) 34px minmax(145px,1fr); }
  .desktop-nav a { padding-inline:10px; }
  .universe-panel,.universe-panel[hidden] { top:174px; min-height:min(680px,calc(100svh - 200px)); }
  .capability-widget > strong { max-width:100%; }
  .case-stage-v2 { grid-template-columns:170px minmax(0,1fr); }
  .price-card-v2 { min-height:580px; }
}

@media (max-width: 980px) {
  .universe-switcher { position:relative; top:auto; }
  .universe-panels { gap:18px; padding-bottom:0; }
  .universe-panel,.universe-panel[hidden] { position:relative; top:auto; min-height:0; opacity:1; transform:none; }
  .case-stage-v2 { grid-template-columns:1fr; }
  .dropoff-board { grid-template-columns:1fr 1fr; }
  .dropoff-answer { grid-column:1/-1; min-height:240px !important; }
}

@media (max-width: 680px) {
  .desktop-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
  .nav-side { display:contents; }
  .desktop-nav a { display:grid; place-items:center; padding:11px 4px; text-align:center; }
  .universe-switcher { display:flex; overflow-x:auto; border-radius:18px; scrollbar-width:none; }
  .universe-switcher button { flex:0 0 68%; min-height:56px; border-right:1px solid var(--line-light); border-bottom:0; }
  .capability-widget { padding:24px 20px 88px; opacity:1; }
  .capability-widget > strong { margin-top:30px; font-size:clamp(28px,9vw,38px); }
  .capability-widget > p { max-width:100%; }
  .case-stage-v2 { gap:34px; }
  .case-reel { gap:4vh; }
  .case-slide { top:82px; min-height:390px; padding:28px 20px; border-radius:26px; }
  .case-slide blockquote { font-size:clamp(25px,8vw,34px); }
  .case-person { grid-template-columns:auto 1fr; }
  .roadmap-heading-v2 h2 { font-size:clamp(44px,12vw,60px); }
  .miro-map { min-height:860px; }
  .dropoff-board { grid-template-columns:1fr; padding:7px; border-radius:28px; }
  .dropoff-board > div { min-height:260px; padding:24px; }
  .dropoff-answer { grid-column:auto; }
  .price-grid-v2 { gap:58px; }
  .price-card-v2 { min-height:500px; padding:54px 22px 22px; }
  .price-badge-v2 { right:18px; left:18px; }
  .price-advantage { min-height:116px; }
  .trial-card-v2 { min-height:900px; }
}

@media (prefers-reduced-motion: reduce) {
  .transformation-runner,.miro-map > svg path,.map-cursor { transition:none; }
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  color: var(--ink);
  background: var(--ink);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 5px;
}

::selection {
  color: var(--ink);
  background: var(--acid);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 86px;
  padding: 0 clamp(22px, 3.2vw, 52px);
  color: var(--ink);
  transition: color 280ms ease, background-color 280ms ease;
}

.site-header::after {
  position: absolute;
  right: clamp(22px, 3.2vw, 52px);
  bottom: 0;
  left: clamp(22px, 3.2vw, 52px);
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.14;
  transition: opacity 280ms ease;
}

.site-header.is-dark {
  color: var(--paper);
  background: rgba(11, 12, 13, 0.9);
}

.site-header.is-dark::after {
  opacity: 0.18;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.brand-mark {
  width: 16px;
  height: 31px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 12px;
}

.desktop-nav a,
.header-cta {
  transition: opacity 160ms ease, transform 160ms ease;
}

.desktop-nav a:hover {
  opacity: 0.54;
}

.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.header-cta svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-cta:hover {
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-1px);
}

.site-header.is-dark .header-cta:hover {
  color: var(--ink);
  background: var(--acid);
  border-color: var(--acid);
}

.math-cursor {
  position: fixed;
  inset: 0;
  z-index: 94;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.portal-story {
  position: relative;
  height: 218vh;
  background: var(--paper);
}

.portal-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  background: var(--paper);
}

.room-haze {
  display: none;
}

.paper-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.interior-bg {
  position: absolute;
  inset: -2px;
  z-index: 2;
  overflow: hidden;
  background: var(--ink);
  clip-path: circle(var(--iris) at 52% 51%);
  backface-visibility: hidden;
  transform: translateZ(0);
  /* will-change: clip-path убран: clip-path не композитится ни в Blink, ни в WebKit,
     хинт лишь резервировал слой (14.4 МБ на DPR3) — промоушен уже даёт translateZ(0). */
}

.room-grid {
  position: absolute;
  inset: 22% -20% -42%;
  opacity: calc(0.08 + var(--reveal) * 0.28);
  background-image:
    linear-gradient(rgba(243, 240, 232, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 240, 232, 0.12) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(800px) rotateX(62deg) translateY(calc(18% - var(--reveal) * 8%)) scale(1.2);
  transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent, black 28%, black 72%, transparent);
}

.room-haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
}

.room-haze-one {
  top: 12%;
  left: 52%;
  width: 48vw;
  height: 48vw;
  background: rgba(49, 92, 255, 0.21);
}

.room-haze-two {
  right: 56%;
  bottom: -24%;
  width: 38vw;
  height: 38vw;
  background: rgba(223, 255, 79, 0.08);
}

.hero-shell {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  padding: 84px clamp(24px, 5.2vw, 80px) 24px;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--enter) * 1.42), 1);
  transform: translate3d(calc(var(--approach) * -3vw), calc(var(--approach) * 2vh), 0) scale(calc(1 - var(--approach) * 0.15));
  transform-origin: 28% 50%;
  will-change: transform, opacity;
}

.hero-copy {
  width: min(64vw, 840px);
  pointer-events: auto;
}

.eyebrow,
.section-label,
.inside-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 840px;
  margin: 27px 0 0;
  font-size: clamp(66px, 7.7vw, 126px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.078em;
}

.hero-note {
  max-width: 510px;
  margin: 30px 0 0;
  color: #5e6269;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.018em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 32px;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 52px;
  padding: 0 10px 0 21px;
  border: 0;
  border-radius: 999px;
  color: var(--paper);
  background: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: color 140ms ease-out, background-color 140ms ease-out, transform 160ms ease-out;
}

.button-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--acid);
}

.primary-button:hover {
  color: var(--ink);
  background: var(--acid);
  transform: translateY(-2px);
}

.primary-button:hover .button-icon {
  background: var(--paper);
}

.door-scene {
  position: absolute;
  top: 50%;
  right: clamp(40px, 7vw, 120px);
  z-index: 14;
  width: clamp(220px, 22vw, 420px);
  aspect-ratio: 0.58;
  opacity: clamp(0, calc(1 - var(--reveal) * 1.5), 1);
  transform: translate3d(calc(var(--approach) * -20vw), -48%, 0) scale(calc(1 + var(--approach) * 4.4 + var(--enter) * 0.9)) rotateX(var(--my)) rotateY(var(--mx));
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.door-rig {
  position: absolute;
  inset: 7%;
  perspective: 1300px;
  transform-style: preserve-3d;
}

.door-frame {
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: 5px;
  border-color: rgba(11, 12, 13, clamp(0, calc(1 - var(--enter) * 5), 1));
  background: rgba(49, 92, 255, calc(0.12 + var(--open) * 0.2));
  box-shadow: 0 30px 80px rgba(11, 12, 13, clamp(0, calc(0.13 + var(--open) * 0.16 - var(--enter) * 0.9), 0.29));
  transform-style: preserve-3d;
}

.threshold-light {
  position: absolute;
  inset: 5%;
  background: linear-gradient(135deg, var(--paper), #b9c5ff 48%, var(--blue));
  box-shadow: 0 0 60px rgba(49, 92, 255, calc(var(--open) * 0.6));
  opacity: calc(0.2 + var(--open) * 0.8);
  overflow: hidden;
  transform: translateZ(calc(-40px + var(--enter) * 80px)) scale(calc(1 + var(--enter) * 0.16));
}

.threshold-light::before,
.threshold-light::after {
  position: absolute;
  content: "";
}

.threshold-light::before {
  inset: 7%;
  border: 1px solid rgba(243, 240, 232, 0.42);
  box-shadow:
    0 0 0 18px rgba(49, 92, 255, 0.12),
    0 0 0 44px rgba(49, 92, 255, 0.1),
    inset 0 0 54px rgba(243, 240, 232, 0.34);
  opacity: clamp(0, calc(var(--approach) * 1.8), 1);
  transform: scale(calc(0.92 + var(--enter) * 0.08));
}

.threshold-light::after {
  inset: 20%;
  border-radius: 50%;
  background: rgba(243, 240, 232, 0.78);
  filter: blur(18px);
  opacity: clamp(0, calc(var(--enter) * 1.6), 0.72);
  transform: scale(calc(0.72 + var(--enter) * 0.48));
}

.door-slab {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: rotateY(calc(var(--open) * -78deg));
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
  opacity: clamp(0, calc(1 - var(--enter) * 4), 1);
}

.door-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 9%;
  color: var(--paper);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), transparent 34%),
    var(--ink);
  backface-visibility: hidden;
}

.door-face::before {
  display: none;
}

.door-face::before {
  position: absolute;
  top: 9%;
  right: 8%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 20px rgba(223, 255, 79, 0.9);
  content: "";
}

.door-edge {
  position: absolute;
  top: 0;
  right: -10px;
  width: 10px;
  height: 100%;
  background: #32353a;
  transform: rotateY(90deg);
  transform-origin: left center;
}

.door-depth {
  position: absolute;
  background: #24272b;
  opacity: clamp(0, calc(1 - var(--enter) * 4), 1);
}

.door-depth-left {
  top: 0;
  bottom: 0;
  left: -16px;
  width: 16px;
  transform: rotateY(-90deg);
  transform-origin: right center;
}

.door-depth-top {
  top: -16px;
  right: 0;
  left: 0;
  height: 16px;
  transform: rotateX(90deg);
  transform-origin: bottom center;
}

.door-caption {
  position: absolute;
  right: 0;
  bottom: -22px;
  left: 0;
  margin: 0;
  color: #676a70;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  opacity: clamp(0, calc(1 - var(--approach) * 2), 1);
}

.door-caption span {
  margin-left: 7px;
  color: var(--blue);
}

.inside-scene {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  text-align: center;
  pointer-events: none;
  opacity: var(--reveal);
  transform: translateY(calc((1 - var(--reveal)) * 9vh)) scale(calc(0.88 + var(--reveal) * 0.12));
  will-change: transform, opacity;
}

.inside-kicker {
  color: var(--acid);
}

.inside-scene h2 {
  margin: 22px 0 0;
  font-size: clamp(54px, 7.2vw, 116px);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.072em;
}

.inside-scene h2 span {
  color: #727680;
}

.inside-note {
  margin: 24px 0 0;
  color: var(--muted-light);
  font-size: 15px;
}

.signal-thread {
  position: absolute;
  inset: 0;
  z-index: 13;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: clamp(0, calc(var(--enter) * 1.8), 1);
}

.signal-thread path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--reveal));
}

.signal-thread circle {
  fill: var(--acid);
  stroke: var(--ink);
  stroke-width: 3;
  transform: translateY(calc(var(--reveal) * 720px));
}

.inside-content {
  position: relative;
  z-index: 20;
  color: var(--paper);
  background: var(--ink);
  border-radius: 0 0 64px 64px;
}

.section-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 140px clamp(24px, 5.2vw, 80px);
}

.section-label {
  color: var(--acid);
}

.proof-section {
  position: relative;
  z-index: 12;
  color: var(--paper);
  background: var(--ink);
  border-radius: 64px 64px 0 0;
}

.outcomes-section {
  position: relative;
  z-index: 13;
  color: var(--ink);
  background: var(--paper);
  border-radius: 64px 64px 0 0;
}

.outcomes-heading h2,
.roadmap-heading h2,
.pricing-heading h2,
.faq-heading h2,
.quiz-shell h2 {
  margin: 0;
  font-size: clamp(54px, 6.5vw, 104px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.068em;
}

.outcomes-heading h2 span,
.roadmap-heading h2 span,
.pricing-heading h2 span,
.faq-heading h2 span {
  color: var(--blue);
}

.roadmap-section {
  position: relative;
  z-index: 14;
  color: var(--paper);
  background: var(--blue);
  border-radius: 64px 64px 0 0;
}

.pricing-section {
  position: relative;
  z-index: 15;
  color: var(--paper);
  background: var(--ink);
  border-radius: 64px 64px 0 0;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 70px;
}

.price-card {
  position: relative;
  display: flex;
  min-height: 450px;
  flex-direction: column;
  padding: 28px;
  background: #17191d;
  border: 1px solid rgba(243, 240, 232, 0.13);
  border-radius: 24px;
  isolation: isolate;
}

.price-card::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), rgba(49, 92, 255, 0.24), transparent 42%);
  border-radius: inherit;
  content: "";
  transition: opacity 220ms ease;
}

.price-card > * {
  position: relative;
  z-index: 1;
}

.price-card:hover::after {
  opacity: 1;
}

.price-card h3 {
  margin: 64px 0 0;
  font-size: clamp(30px, 2.8vw, 46px);
  font-weight: 500;
  letter-spacing: -0.055em;
}

.price-card > p {
  margin: 12px 0 0;
  min-height: 38px;
  color: #848992;
  font-size: 10px;
  line-height: 1.4;
}

.price-card > strong {
  margin-top: auto;
  font-size: clamp(42px, 4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.07em;
}

.price-card > strong small {
  font-size: 0.45em;
}

.price-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 12px 0 17px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
}

.price-card > a i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink);
  background: var(--acid);
  border-radius: 50%;
  font-style: normal;
}

.trial-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  margin-top: 90px;
  padding: clamp(38px, 5vw, 72px);
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border-radius: 30px;
}

.trial-button {
  grid-column: 1;
  width: fit-content;
  margin-top: 10px;
}

.faq-section {
  position: relative;
  z-index: 16;
  color: var(--ink);
  background: var(--paper);
  border-radius: 64px 64px 0 0;
}

.faq-shell {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(50px, 8vw, 130px);
  padding-block: clamp(120px, 13vw, 190px);
}

.faq-heading {
  position: sticky;
  top: 130px;
  align-self: start;
}

.faq-heading .section-label {
  color: var(--blue);
}

.faq-heading h2 {
  margin-top: 24px;
  font-size: clamp(50px, 5.8vw, 90px);
}

.faq-list {
  border-top: 1px solid var(--line-dark);
}

.faq-list details {
  border-bottom: 1px solid var(--line-dark);
}

.faq-list summary {
  display: grid;
  grid-template-columns: 34px 1fr 26px;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color: #858991;
  font-size: 9px;
}

.faq-list summary strong {
  font-size: clamp(16px, 1.5vw, 23px);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.faq-list summary i {
  color: var(--blue);
  font-size: 22px;
  font-style: normal;
  transition: transform 180ms ease;
}

.faq-list details[open] summary i {
  transform: rotate(45deg);
}

.faq-list details > p {
  margin: -8px 40px 30px 48px;
  color: #686c73;
  font-size: 14px;
  line-height: 1.6;
}

.quiz-section {
  position: relative;
  z-index: 17;
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  background: var(--blue);
  border-radius: 64px 64px 0 0;
}
.quiz-dialog::after {
  background: radial-gradient(circle at 70% 30%, rgba(191,255,57,.26), transparent 24%), linear-gradient(135deg, transparent 35%, rgba(191,255,57,.07));
}

.quiz-grid {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(243, 240, 232, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 240, 232, 0.26) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(circle at 70% 45%, black, transparent 70%);
}

.quiz-shell {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
}

.quiz-shell .section-label {
  color: var(--acid);
}

.quiz-shell h2 {
  max-width: 1120px;
  margin-top: 30px;
  font-size: clamp(58px, 7.7vw, 120px);
}

.quiz-shell h2 span {
  color: var(--acid);
}

.quiz-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 60px;
}

.quiz-bottom > p {
  width: min(100%, 540px);
  margin: 0;
  color: rgba(243, 240, 232, 0.74);
  font-size: 15px;
  line-height: 1.55;
}

.quiz-button {
  color: var(--ink);
  background: var(--paper);
}

[hidden] {
  display: none !important;
}

body.quiz-open {
  overflow: hidden;
}

.quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
}

.quiz-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 13, 0.78);
  backdrop-filter: blur(18px);
}

.quiz-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(1180px, 100%);
  height: min(820px, calc(100svh - 36px));
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(243, 240, 232, 0.2);
  border-radius: 34px;
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.46);
  animation: quiz-dialog-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes quiz-dialog-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
  }
}

/* 2026-07-30: pre-delivery universe, personal routes and editorial card art. */

@media (min-width: 981px) {
  .club-universe .universe-panels {
    display: block;
    min-height: 1920px;
    padding-bottom: 72vh;
  }

  .club-universe .universe-panel,
  .club-universe .universe-panel[hidden] {
    position: sticky;
    top: clamp(128px, 18vh, 176px);
    z-index: 1;
    height: min(650px, calc(100svh - 152px));
    min-height: min(520px, calc(100svh - 152px));
    max-height: 650px;
    grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
    gap: clamp(24px, 2.4vw, 40px);
    margin-bottom: 25vh;
    padding: clamp(22px, 2vw, 30px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(.988);
  }

  .club-universe .universe-panel.is-active {
    z-index: 3;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .club-universe .universe-panel:last-child {
    margin-bottom: 0;
  }
}

.context-channel-collage {
  position: relative;
  display: block;
  min-height: clamp(260px, 29vw, 430px);
  overflow: hidden;
  border: 1px solid rgba(223, 255, 79, .16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 45%, rgba(223, 255, 79, .11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  isolation: isolate;
}

.context-channel-collage::before {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(223, 255, 79, .14);
  border-radius: 50%;
  content: "";
}

.context-channel-collage .channel-collage-card {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .34);
  border-radius: 18px;
  background: #f3f4f7;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .36);
  transform-style: preserve-3d;
}

.context-channel-collage .channel-collage-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: #f3f4f7;
}

.channel-collage-structure {
  top: 7%;
  right: 31%;
  z-index: 2;
  width: auto;
  height: 88%;
  aspect-ratio: 672 / 1400;
  transform: perspective(1200px) rotateY(-5deg) rotateZ(1.8deg);
}

.channel-collage-events {
  top: 12%;
  left: 8%;
  z-index: 3;
  width: auto;
  height: 76%;
  aspect-ratio: 672 / 1304;
  transform: perspective(1200px) translateZ(30px) rotateY(7deg) rotateZ(-3.2deg);
}

.channel-collage-build {
  top: 5%;
  right: 7%;
  z-index: 1;
  width: auto;
  height: 82%;
  aspect-ratio: 672 / 1344;
  filter: saturate(.92);
  transform: perspective(1200px) rotateY(-9deg) rotateZ(4deg);
}

.channel-collage-meme {
  right: 21%;
  bottom: 6%;
  z-index: 4;
  width: auto;
  height: 64%;
  aspect-ratio: 672 / 1072;
  transform: perspective(1200px) translateZ(46px) rotateY(-4deg) rotateZ(3deg);
}

.universe-panel.is-active .channel-collage-structure {
  animation: contextStructureIn 700ms var(--ease-reveal) both;
}

.universe-panel.is-active .channel-collage-events {
  animation: contextEventsIn 820ms var(--ease-reveal) 80ms both;
}

.universe-panel.is-active .channel-collage-build {
  animation: contextBuildIn 780ms var(--ease-reveal) 130ms both;
}

.universe-panel.is-active .channel-collage-meme {
  animation: contextMemeIn 760ms var(--ease-reveal) 190ms both;
}

@keyframes contextStructureIn {
  from { opacity: 0; transform: perspective(1200px) translate3d(0, 24px, -35px) rotateY(-9deg) rotateZ(4deg); }
}

@keyframes contextEventsIn {
  from { opacity: 0; transform: perspective(1200px) translate3d(-24px, 22px, -20px) rotateY(10deg) rotateZ(-6deg); }
}

@keyframes contextBuildIn {
  from { opacity: 0; transform: perspective(1200px) translate3d(22px, 18px, -48px) rotateY(-12deg) rotateZ(6deg); }
}

@keyframes contextMemeIn {
  from { opacity: 0; transform: perspective(1200px) translate3d(18px, 28px, -22px) rotateY(-8deg) rotateZ(6deg); }
}

.practice-window-body {
  display: block;
  padding: 8px;
}

.practice-team-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 350px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .18);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
  transform: perspective(1400px) rotateY(-1.5deg) translateZ(24px);
}

.practice-team-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.practice-team-scene figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 14px;
  color: var(--paper);
  background: rgba(11, 12, 13, .78);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
}

.practice-team-scene figcaption span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--acid);
  font: 760 9px/1 var(--font-club);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.practice-team-scene figcaption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(223, 255, 79, .11);
}

.practice-team-scene figcaption strong {
  max-width: 29ch;
  font: 720 12px/1.25 var(--font-club);
  text-align: right;
}

.path-selector {
  margin-top: clamp(72px, 8vw, 126px);
  padding: clamp(26px, 4vw, 56px);
  border: 1px solid rgba(11, 12, 13, .13);
  border-radius: clamp(28px, 4vw, 54px);
  background:
    radial-gradient(circle at 86% 0%, rgba(223, 255, 79, .22), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(230, 231, 226, .86));
  box-shadow: 0 35px 90px rgba(11, 12, 13, .12);
}

.path-selector-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .6fr);
  gap: 18px clamp(28px, 6vw, 86px);
  align-items: end;
}

.path-selector-heading .section-label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--accent-on-light);
}

.path-selector-heading h2 {
  margin: 0;
  max-width: 13ch;
  color: var(--ink);
  font: 800 clamp(40px, 5vw, 76px)/.93 var(--font-club);
  letter-spacing: -.065em;
}

.path-selector-heading h2 span {
  color: #767a82;
}

.path-selector-heading > p:last-child {
  max-width: 42ch;
  margin: 0 0 7px;
  color: #61656d;
  font: 520 clamp(16px, 1.25vw, 20px)/1.46 var(--font-club);
}

.path-selector-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(34px, 5vw, 68px);
  padding: 7px;
  border: 1px solid rgba(11, 12, 13, .13);
  border-radius: 24px;
  background: rgba(255, 255, 255, .62);
}

.path-selector-tabs button {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 17px;
  color: #61656d;
  background: transparent;
  font: 720 clamp(11px, .92vw, 14px)/1.2 var(--font-club);
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background 260ms var(--ease-reveal), transform 200ms var(--ease-reveal), box-shadow 260ms ease;
}

.path-selector-tabs button span {
  display: grid;
  flex: 0 0 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(11, 12, 13, .18);
  border-radius: 50%;
  font: 760 9px/1 var(--font-club);
  letter-spacing: .05em;
}

.path-selector-tabs button:hover {
  color: var(--ink);
  transform: translateY(-2px);
}

.path-selector-tabs button.is-active {
  color: var(--ink);
  border-color: rgba(11, 12, 13, .82);
  background: var(--acid);
  box-shadow: 0 11px 28px rgba(116, 139, 15, .18);
}

.path-selector-tabs button.is-active span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.path-selector-tabs button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.path-selector-window {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .15);
  border-radius: 30px;
  color: var(--paper);
  background:
    radial-gradient(circle at 76% 0%, rgba(223, 255, 79, .1), transparent 31%),
    #111312;
  box-shadow: 0 28px 74px rgba(11, 12, 13, .2);
}

/* 2026-08-02, owner review (round 3, item 7): the bar used to be `flex` + `space-between` with
   three children — dots, title, `04 шага`. With the counter deleted, space-between would have
   thrown the title against the right edge. A 1fr/auto/1fr grid keeps the title optically
   centred over the panel with only two children left, and keeps working when the 767px rule
   below hides the title entirely. */
.path-selector-windowbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 48px;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(244, 244, 240, .1);
  color: rgba(244, 244, 240, .54);
  font: 720 9px/1 var(--font-club);
  letter-spacing: .11em;
}

.path-selector-windowbar > span {
  display: flex;
  gap: 6px;
}

.path-selector-windowbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244, 244, 240, .22);
}

.path-selector-windowbar i:first-child {
  background: var(--acid);
}

.path-selector-windowbar > b {
  grid-column: 2;
}

.path-route {
  display: grid;
  min-height: 390px;
  grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  padding: clamp(28px, 4vw, 54px);
}

.path-route[hidden] {
  display: none;
}

/* 2026-08-02, owner review (round 3, item 7): the `NN / НАЗВАНИЕ` kicker was deleted from all
   four routes, so the h3 is the first child now and its 24px top margin was pure dead space. */
.path-route-intro h3 {
  max-width: 12ch;
  margin: 0;
  font: 780 clamp(30px, 3.1vw, 48px)/.98 var(--font-club);
  letter-spacing: -.05em;
}

.path-route-steps {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.path-route-steps::before {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 1px;
  background: linear-gradient(var(--acid), rgba(223, 255, 79, .15));
  content: "";
  transform: scaleY(0);
  transform-origin: top;
}

.path-route.is-drawing .path-route-steps::before {
  transform: scaleY(1);
  transition: transform 900ms var(--ease-reveal) 100ms;
}

.path-route-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 22px;
  opacity: 0;
  transform: translate3d(0, 15px, 0);
}

.path-route-steps li:last-child {
  padding-bottom: 0;
}

.path-route.is-drawing .path-route-steps li {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 560ms var(--ease-reveal);
}

.path-route.is-drawing .path-route-steps li:nth-child(1) { transition-delay: 140ms; }
.path-route.is-drawing .path-route-steps li:nth-child(2) { transition-delay: 280ms; }
.path-route.is-drawing .path-route-steps li:nth-child(3) { transition-delay: 420ms; }
.path-route.is-drawing .path-route-steps li:nth-child(4) { transition-delay: 560ms; }
.path-route.is-drawing .path-route-steps li:nth-child(5) { transition-delay: 700ms; }

.path-route-steps li > i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid rgba(223, 255, 79, .66);
  border-radius: 50%;
  color: var(--acid);
  background: #111312;
  font: 760 9px/1 var(--font-club);
  font-style: normal;
}

.path-route-steps strong {
  display: block;
  margin-bottom: 4px;
  font: 760 clamp(16px, 1.3vw, 20px)/1.15 var(--font-club);
}

.path-route-steps p {
  max-width: 64ch;
  margin: 0;
  color: rgba(244, 244, 240, .58);
  font: 500 clamp(13px, 1vw, 16px)/1.45 var(--font-club);
}

.subscription-rail article {
  background-position: center 34%;
  background-size: cover;
}

/* 2026-08-03: набор артов заменён на новый из Notion («Карточки обновленные перед тарифами»),
   порядок карточек — оттуда же. Салатовая заливка осталась у двух из одиннадцати: «Use-кейсы»
   и «Тест разработок». Выбор не на глаз — замерен тон самих артов: у этих двух зелёный канал
   доминирует над красным и синим на 29 и 17 уровней, у остальных разница в пределах двух.
   Акцент совпадает с картинкой, а не спорит с ней, и приходится на 5-ю и 10-ю позиции. */
.subscription-rail article:nth-child(1) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .82) 60%, var(--paper) 73%), url("assets/membership/art-community-access-v2.webp");
}

.subscription-rail article:nth-child(2) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-fresh-materials-v2.webp");
}

.subscription-rail article:nth-child(3) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-all-courses-v2.webp");
}

.subscription-rail article:nth-child(4) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-club-channel-v2.webp");
}

.subscription-rail article:nth-child(5) {
  color: var(--ink);
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(223, 255, 79, .78) 60%, var(--acid) 73%), url("assets/membership/art-use-cases-v2.webp");
}

.subscription-rail article:nth-child(6) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-community-chat-v2.webp");
}

.subscription-rail article:nth-child(7) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-live-events-v2.webp");
}

.subscription-rail article:nth-child(8) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/practice-ai-room-team-v1.webp");
}

.subscription-rail article:nth-child(9) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-platform-portal-v2.webp");
}

.subscription-rail article:nth-child(10) {
  color: var(--ink);
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(223, 255, 79, .78) 60%, var(--acid) 73%), url("assets/membership/art-dev-tests-v1.webp");
}

.subscription-rail article:nth-child(11) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-income-talk-v1.webp");
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

/* 2026-08-02: the transition used to be declared here, alongside the hidden state, and that
   meant this reveal had never actually run. The observer adds `reveal-pending` and then
   `is-revealed` two frames later; with a transition present in the pending style the element
   spends those two frames animating *into* hiding and the second class immediately reverses
   it. Measured before the fix: opacity stayed at 1.000 for the whole run and zero
   `transitionstart` events fired on any [data-reveal] element.
   The hidden state therefore has to land in a single frame, and only the way back out is
   animated — the transition now lives in the `.is-revealed` rule below. */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translate3d(0, var(--lift-reveal), 0);
  transition: none;
  will-change: opacity, transform;
}

/* 2026-08-02, round 3, item 5: 18px → --lift-reveal (24px). Opacity stays deliberately
   shorter than the transform so the text is readable while the last few pixels of the lift
   are still running — that difference is most of what separates "settles into place" from
   "slides in". Round 4: 520/660 → 640/780ms, paired with the later observer trigger — the
   owner still read the round-3 values as text racing ahead of the page. */
[data-reveal].reveal-pending.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 640ms ease-out,
    transform 780ms var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Headings condense instead of lifting: the line starts wide and closes to its own tracking,
   which reads as the words collapsing towards each other rather than arriving from below.
   Both custom properties are written by script.js at the moment the heading enters view; it
   picks the widest start that provably does not re-wrap the line. */
[data-reveal][data-heading-reveal].reveal-pending {
  opacity: 0;
  transform: none;
  letter-spacing: var(--reveal-track-from);
  transition: none;
  will-change: opacity, letter-spacing;
}

[data-reveal][data-heading-reveal].reveal-pending.is-revealed {
  opacity: 1;
  transform: none;
  letter-spacing: var(--reveal-track-to);
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    letter-spacing var(--duration-reveal-long) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (max-width: 980px) {
  .context-channel-collage {
    min-height: 330px;
  }

  .path-selector-heading {
    grid-template-columns: 1fr;
  }

  .path-selector-heading .section-label {
    grid-column: auto;
  }

  .path-selector-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .path-route {
    grid-template-columns: 1fr;
  }

  .path-route-intro h3 {
    max-width: 20ch;
  }
}

@media (max-width: 767px) {
  .context-channel-collage {
    min-height: 300px;
  }

  .channel-collage-structure {
    right: 30%;
    width: auto;
    height: 86%;
  }

  .channel-collage-events {
    left: 4%;
    width: auto;
    height: 72%;
  }

  .channel-collage-build {
    right: 3%;
    width: auto;
    height: 78%;
  }

  .channel-collage-meme {
    right: 18%;
    width: auto;
    height: 58%;
  }

  .route-stage,
  .practice-window {
    min-height: 330px;
  }

  .practice-team-scene {
    min-height: 260px;
  }

  .practice-team-scene figcaption {
    display: grid;
    gap: 7px;
  }

  .practice-team-scene figcaption strong {
    text-align: left;
  }

  .path-selector {
    margin-top: 54px;
    padding: 22px 16px 16px;
    border-radius: 30px;
  }

  .path-selector-heading h2 {
    font-size: clamp(36px, 11vw, 52px);
  }

  .path-selector-tabs {
    display: flex;
    margin-inline: -2px;
    padding: 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .path-selector-tabs::-webkit-scrollbar {
    display: none;
  }

  .path-selector-tabs button {
    flex: 0 0 min(76vw, 260px);
    min-height: 64px;
    scroll-snap-align: center;
  }

  .path-selector-window {
    border-radius: 24px;
  }

  .path-selector-windowbar b {
    display: none;
  }

  .path-route {
    min-height: 0;
    padding: 24px 18px 28px;
  }

  .path-route-intro h3 {
    margin-top: 0;
    font-size: 31px;
  }

  .path-route-steps {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .universe-panel.is-active .channel-collage-card {
    animation: none;
  }

  .path-route-steps::before,
  .path-route-steps li,
  [data-reveal],
  [data-reveal].reveal-pending,
  [data-reveal].reveal-pending.is-revealed,
  [data-reveal][data-heading-reveal].reveal-pending,
  [data-reveal][data-heading-reveal].reveal-pending.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* The observer never runs under reduced motion, so these states are unreachable; the reset
     is here so that a heading can never be left on an inline px tracking if some future path
     does reach them. */
  [data-reveal][data-heading-reveal].reveal-pending,
  [data-reveal][data-heading-reveal].reveal-pending.is-revealed {
    letter-spacing: var(--reveal-track-to, inherit);
  }
}

/* 2026-07-28: true-perspective portal corridor. */
body.is-portal-flight .math-cursor {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.is-portal-flight .math-cursor {
    opacity: 1;
  }
}

.quiz-dialog::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 36%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 30%, rgba(223, 255, 79, 0.34), transparent 24%),
    linear-gradient(135deg, transparent 35%, rgba(49, 92, 255, 0.08));
  content: "";
}

.quiz-dialog-header,
.quiz-dialog-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: 34px;
}

.quiz-dialog-header {
  min-height: 84px;
  border-bottom: 1px solid var(--line-dark);
}

.quiz-dialog-brand {
  color: var(--ink);
}

.quiz-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  font: 400 27px/1 inherit;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.quiz-close:hover {
  color: var(--paper);
  background: var(--ink);
  transform: rotate(7deg);
}

.quiz-dialog-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(40px, 7vw, 100px);
  padding: clamp(38px, 5vw, 72px) clamp(34px, 6vw, 90px);
  overflow-y: auto;
}

.quiz-dialog-meta .section-label {
  color: var(--blue);
}

.quiz-progress {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.quiz-progress > span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.quiz-progress > i {
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgba(11, 12, 13, 0.12);
}

.quiz-progress > i > b {
  display: block;
  width: 14.285%;
  height: 100%;
  background: var(--blue);
  transform-origin: left;
  transition: width 320ms ease;
}

.quiz-question > p {
  margin: 0;
  color: #858991;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.quiz-question > h2 {
  max-width: 760px;
  margin: 18px 0 0;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.062em;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 44px;
}

.quiz-option {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 30px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 16px;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  font: 500 15px/1.25 inherit;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.quiz-option > span:first-child {
  color: #8a8e95;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.quiz-option > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--ink);
  background: var(--acid);
  border-radius: 50%;
  font-style: normal;
}

.quiz-option:hover,
.quiz-option.is-selected {
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}

.quiz-option:hover > span:first-child,
.quiz-option.is-selected > span:first-child {
  color: rgba(243, 240, 232, 0.68);
}

.quiz-result {
  grid-column: 2;
  align-self: center;
  max-width: 760px;
}

.quiz-result > p:first-child {
  margin: 0;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.quiz-result h2 {
  margin: 18px 0 0;
  font-size: clamp(46px, 5.2vw, 80px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.quiz-result h2 span {
  color: var(--blue);
}

.quiz-result > p:not(:first-child) {
  max-width: 660px;
  margin: 26px 0 0;
  color: #656970;
  font-size: 15px;
  line-height: 1.55;
}

.quiz-result-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 38px;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.quiz-result-list span {
  min-height: 92px;
  padding: 18px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  font-size: 11px;
  line-height: 1.4;
}

.quiz-result-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.quiz-restart {
  min-height: 48px;
  padding: 0 20px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  font: 700 11px/1 inherit;
  cursor: pointer;
}

.quiz-dialog-footer {
  min-height: 72px;
  border-top: 1px solid var(--line-dark);
}

.quiz-dialog-footer > span {
  color: #8a8e95;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.quiz-back {
  padding: 8px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: 700 11px/1 inherit;
  cursor: pointer;
}

.quiz-back:disabled {
  opacity: 0.28;
  cursor: default;
}

.membership {
  position: relative;
  z-index: 18;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}

.site-footer {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  margin: 0 clamp(24px, 5.2vw, 80px);
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

@media (min-width: 1600px) {
  .section-shell {
    width: min(100%, 1680px);
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav {
    display: none;
  }

  .hero-copy {
    width: min(66vw, 680px);
  }

  .hero-copy h1 {
    font-size: clamp(58px, 9.4vw, 96px);
  }

  .door-scene {
    right: 4vw;
    width: clamp(170px, 24vw, 250px);
  }

  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-shell {
    grid-template-columns: 1fr;
  }

  .faq-heading {
    position: static;
  }

  .quiz-dialog-main {
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 42px;
  }

  .quiz-result-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .math-cursor {
    display: none;
  }

  .site-header {
    height: 72px;
    padding-inline: 20px;
  }

  .site-header::after {
    right: 20px;
    left: 20px;
  }

  .brand {
    font-size: 11px;
  }

  .brand-mark {
    width: 13px;
    height: 26px;
  }

  .header-cta {
    min-height: 38px;
    padding: 0 14px;
    font-size: 10px;
  }

  .portal-story {
    height: 225vh;
  }

  .portal-stage {
    min-height: 560px;
  }

  .hero-shell {
    align-items: flex-start;
    padding: 132px 20px 22px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-copy h1 {
    margin-top: 22px;
    font-size: clamp(46px, 14.6vw, 66px);
    line-height: 0.92;
    letter-spacing: -0.066em;
  }

  .hero-note {
    max-width: 320px;
    margin-top: 20px;
    font-size: 14px;
  }

  .hero-actions {
    gap: 16px;
    margin-top: 22px;
  }

  .primary-button {
    min-height: 48px;
    padding-left: 17px;
    font-size: 11px;
  }

  .door-scene {
    top: auto;
    right: 50%;
    bottom: -5%;
    width: 145px;
    transform: translate3d(calc(50% + var(--approach) * -8vw), calc(var(--approach) * -16vh), 0) scale(calc(1 + var(--approach) * 6.3 + var(--enter) * 1.8)) rotateX(var(--my)) rotateY(var(--mx));
  }

  .door-caption {
    display: none;
  }

  .interior-bg {
    clip-path: circle(var(--iris) at 50% 80%);
  }

  .inside-scene {
    justify-content: flex-start;
    padding: 126px 20px 20px;
  }

  .inside-scene h2 {
    margin-top: 18px;
    font-size: clamp(44px, 13.5vw, 62px);
  }

  .inside-note {
    font-size: 13px;
  }

  .signal-thread {
    opacity: 0.5;
  }

  .section-shell {
    padding: 100px 20px;
  }

  .inside-content {
    border-radius: 0 0 36px 36px;
  }

  .proof-section {
    border-radius: 36px 36px 0 0;
  }

  .outcomes-section,
  .roadmap-section,
  .pricing-section,
  .faq-section,
  .quiz-section {
    border-radius: 36px 36px 0 0;
  }

  .outcomes-shell,
  .roadmap-shell,
  .pricing-shell,
  .faq-shell {
    padding-block: 100px;
  }

  .outcomes-heading h2,
  .roadmap-heading h2,
  .pricing-heading h2,
  .faq-heading h2,
  .quiz-shell h2 {
    font-size: clamp(46px, 13.5vw, 64px);
  }

  .price-grid {
    grid-template-columns: 1fr;
    margin-top: 58px;
  }

  .price-card,
  .price-card-featured {
    min-height: 400px;
    transform: none;
  }

  .price-card h3 {
    font-size: 38px;
  }

  .trial-card {
    grid-template-columns: 1fr;
    gap: 54px;
    margin-top: 64px;
    padding: 34px 22px;
    border-radius: 24px;
  }

  .trial-button {
    grid-column: auto;
    width: 100%;
  }

  .faq-shell {
    gap: 62px;
  }

  .faq-heading h2 {
    margin-top: 18px;
  }

  .faq-list summary {
    grid-template-columns: 28px 1fr 24px;
    gap: 10px;
    min-height: 86px;
  }

  .faq-list summary strong {
    font-size: 17px;
  }

  .faq-list details > p {
    margin: -2px 8px 26px 38px;
    font-size: 13px;
  }

  .quiz-shell {
    min-height: 850px;
    padding-block: 104px 72px;
    justify-content: flex-start;
  }

  .quiz-shell h2 {
    margin-top: 24px;
  }

  .quiz-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 40px;
  }

  .quiz-bottom > p {
    font-size: 14px;
  }

  .quiz-button {
    width: 100%;
  }

  .quiz-modal {
    padding: 0;
  }

  .quiz-dialog {
    width: 100%;
    height: 100svh;
    border: 0;
    border-radius: 0;
  }

  .quiz-dialog::after {
    width: 72%;
    opacity: 0.72;
  }

  .quiz-dialog-header,
  .quiz-dialog-footer {
    margin-inline: 20px;
  }

  .quiz-dialog-header {
    min-height: 72px;
  }

  .quiz-close {
    width: 40px;
    height: 40px;
  }

  .quiz-dialog-main {
    display: block;
    padding: 28px 20px 38px;
  }

  .quiz-dialog-meta {
    display: grid;
    grid-template-columns: 1fr 118px;
    align-items: start;
    gap: 20px;
  }

  .quiz-progress {
    margin-top: 0;
  }

  .quiz-question {
    margin-top: 44px;
  }

  .quiz-question > h2 {
    margin-top: 14px;
    font-size: clamp(40px, 11.8vw, 54px);
  }

  .quiz-options {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 30px;
  }

  .quiz-option {
    min-height: 64px;
    border-radius: 14px;
    font-size: 14px;
  }

  .quiz-result {
    margin-top: 42px;
  }

  .quiz-result h2 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .quiz-result > p:not(:first-child) {
    font-size: 13px;
  }

  .quiz-result-list {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .quiz-result-list span {
    min-height: 64px;
  }

  .quiz-result-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quiz-result-actions .primary-button,
  .quiz-restart {
    width: 100%;
  }

  .quiz-dialog-footer {
    min-height: 62px;
  }

  .quiz-dialog-footer > span {
    max-width: 190px;
    text-align: right;
    line-height: 1.35;
  }

  .site-footer {
    margin-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .paper-noise,
  .door-orbit,
  .signal-thread,
  .platform-orbit,
  .platform-thread,
  .math-cursor,
  .journey-guide {
    display: none;
  }

  .portal-story,
  .platform-story {
    height: 135vh;
  }
}

/* ========================================================================== */
/* AI ROOM — FUNDAMENTAL REDESIGN / 2026-07                                   */
/* ========================================================================== */

:root {
  --paper: #f4f4f0;
  --paper-deep: #deded8;
  --ink: #090a0a;
  --ink-soft: #171818;
  --graphite: #282a2a;
  --muted: #757981;
  --muted-light: #adb1b9;
  --blue: #bfff39;
  --acid: #bfff39;
  --acid-deep: #98dc19;
  --silver: #c7cac5;
  --line-dark: rgba(9, 10, 10, 0.16);
  --line-light: rgba(244, 244, 240, 0.18);
}

body {
  background: var(--ink);
}

.site-header {
  height: 82px;
  padding-inline: clamp(18px, 3vw, 48px);
}

.site-header::after {
  opacity: 0;
}

.desktop-nav {
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(9, 10, 10, 0.2);
  border-radius: 999px;
  background: rgba(244, 244, 240, 0.62);
  box-shadow: 0 16px 50px rgba(9, 10, 10, 0.08);
  backdrop-filter: blur(22px) saturate(150%);
}

.desktop-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
}

.desktop-nav a:hover {
  color: var(--paper);
  background: var(--ink);
  opacity: 1;
}

.nav-door {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-inline: 3px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
}

.nav-door svg {
  width: 8px;
  height: 18px;
}

.site-header.is-dark .desktop-nav {
  border-color: rgba(244, 244, 240, 0.2);
  background: rgba(20, 21, 21, 0.72);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
}

.site-header.is-dark .desktop-nav a:hover,
.site-header.is-dark .nav-door {
  color: var(--ink);
  background: var(--acid);
}

.site-header.is-dark {
  background: rgba(9, 10, 10, 0.78);
  backdrop-filter: blur(18px);
}

.header-cta {
  min-height: 44px;
  background: rgba(244, 244, 240, 0.18);
  backdrop-filter: blur(16px);
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 23px;
  border: 1px solid rgba(9, 10, 10, 0.28);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.secondary-button:hover {
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-2px);
}

.hero-shell {
  justify-content: center;
  padding-top: 90px;
  padding-bottom: 14vh;
  transform-origin: 50% 46%;
}

.hero-copy {
  width: min(78vw, 1040px);
  text-align: center;
}

.hero-copy .eyebrow,
.hero-actions,
.hero-proof {
  justify-content: center;
}

.hero-copy h1 {
  max-width: none;
  margin-top: 24px;
  font-size: clamp(62px, 7.4vw, 124px);
  letter-spacing: -0.075em;
}

.hero-note {
  max-width: 670px;
  margin-inline: auto;
}

.hero-actions {
  /* 2026-08-02: was 12px. The hovered primary now scales 1.05 and grows 8.15px toward its
     neighbour, which left a 3.85px slot — measured, not overlapping, but reading as a near
     collision. --space-4 restores a visible 7.85px at the worst moment while keeping the
     resting pair tight. */
  gap: var(--space-4);
}

.door-scene {
  top: 66%;
  right: clamp(28px, 6vw, 100px);
  width: clamp(170px, 17vw, 330px);
}

.room-haze-one {
  background: rgba(191, 255, 57, 0.18);
}

.door-frame {
  background: rgba(191, 255, 57, calc(0.08 + var(--open) * 0.22));
}

.threshold-light {
  background: linear-gradient(135deg, var(--paper), #e3f5bb 48%, var(--acid));
  box-shadow: 0 0 70px rgba(191, 255, 57, calc(var(--open) * 0.62));
}

.threshold-light::before {
  box-shadow: 0 0 0 18px rgba(191, 255, 57, 0.12), 0 0 0 44px rgba(191, 255, 57, 0.08), inset 0 0 54px rgba(244, 244, 240, 0.34);
}

.club-universe {
  position: relative;
  min-height: 100vh;
  padding: clamp(130px, 13vw, 210px) 0 clamp(110px, 11vw, 180px);
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 20%, rgba(191, 255, 57, 0.09), transparent 24%),
    radial-gradient(circle at 10% 78%, rgba(255, 255, 255, 0.06), transparent 22%),
    var(--ink);
}

.club-universe::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(244,244,240,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244,244,240,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  content: "";
}

.universe-shell {
  position: relative;
  z-index: 1;
}

.universe-heading {
  display: grid;
  grid-template-columns: 0.45fr 1.35fr 0.75fr;
  gap: 44px;
  align-items: end;
}

.universe-heading h2,
.proof-heading-v2 h2,
.outcomes-heading-v2 h2,
.roadmap-heading-v2 h2,
.pricing-heading-v2 h2 {
  margin: 0;
  font-size: clamp(54px, 6.5vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.universe-heading h2 span,
.proof-heading-v2 h2 span,
.outcomes-heading-v2 h2 span,
.roadmap-heading-v2 h2 span,
.pricing-heading-v2 h2 span {
  color: var(--acid);
}

.universe-heading > p:last-child,
.proof-heading-v2 > p:last-child,
.outcomes-heading-v2 > p:last-child,
.roadmap-heading-v2 > p:last-child,
.pricing-heading-v2 > p:last-child {
  margin: 0;
  color: var(--muted-light);
  font-size: 17px;
  line-height: 1.55;
}

.universe-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(64px, 7vw, 110px);
  border: 1px solid var(--line-light);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.035);
}

.universe-switcher button {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  border: 0;
  border-right: 1px solid var(--line-light);
  color: var(--muted-light);
  background: transparent;
  font: 700 15px/1 Arial, sans-serif;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.universe-switcher button:last-child { border-right: 0; }
.universe-switcher button span { font: 700 9px/1 ui-monospace, monospace; letter-spacing: 0.16em; }
.universe-switcher button.is-active { color: var(--ink); background: var(--acid); }

.universe-panels {
  position: relative;
  margin-top: 18px;
}

.universe-panel {
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(480px, 1.22fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  min-height: 720px;
  padding: clamp(36px, 5vw, 78px);
  border: 1px solid var(--line-light);
  border-radius: 36px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 40px 100px rgba(0,0,0,0.25);
  animation: panelReveal 540ms cubic-bezier(.2,.8,.2,1) backwards;
}

.universe-panel[hidden] { display: none; }

@keyframes panelReveal {
  from { opacity: 0; transform: translateY(18px) scale(.992); }
  to { opacity: 1; transform: none; }
}

.panel-index {
  margin: 0 0 28px;
  color: var(--acid);
  font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
}

.universe-copy h3 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(42px, 4.3vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.panel-lead {
  max-width: 560px;
  margin: 30px 0 0;
  color: var(--muted-light);
  font-size: 18px;
  line-height: 1.55;
}

.benefit-stack {
  display: grid;
  gap: 14px;
  margin-top: 38px;
}

.benefit-stack > div {
  padding: 20px 22px;
  border: 1px solid var(--line-light);
  border-radius: 20px;
  background: rgba(0,0,0,0.22);
}

.benefit-stack span {
  display: block;
  margin-bottom: 8px;
  color: var(--acid);
  font: 700 9px/1 ui-monospace, monospace;
  letter-spacing: .16em;
}

.benefit-stack strong {
  font-size: 15px;
  line-height: 1.45;
}

.inline-platform-link {
  display: inline-flex;
  margin-top: 34px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--acid);
  color: var(--acid);
  font-size: 14px;
  font-weight: 700;
}

.universe-visual {
  position: relative;
  min-height: 560px;
  perspective: 1400px;
}
@keyframes livePulse { 50% { opacity: .15; transform: scale(1.8); } }

.proof-section {
  padding: clamp(120px, 12vw, 190px) 0;
  color: var(--paper);
  background: #151616;
}

.proof-heading-v2 {
  display: grid;
  grid-template-columns: .38fr 1.45fr .62fr;
  gap: 40px;
  align-items: end;
}

.capability-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: clamp(70px, 7vw, 110px);
}

.capability-widget {
  position: relative;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(244,244,240,.15);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.18);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease;
}
.capability-widget:hover { transform: translateY(-8px) rotateX(2deg); border-color: rgba(191,255,57,.5); }
.capability-widget > span { color: var(--muted-light); font: 700 9px/1 ui-monospace, monospace; letter-spacing: .16em; }
.capability-widget > strong { display: block; max-width: 620px; margin-top: 48px; font-size: clamp(28px, 3vw, 50px); line-height: .98; letter-spacing: -.05em; }
.capability-widget > p { max-width: 540px; margin: 18px 0 0; color: var(--muted-light); font-size: 14px; line-height: 1.45; }
.acid-widget { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.acid-widget > span, .acid-widget > p { color: rgba(9,10,10,.64); }
@keyframes meterBreath { 50% { width: 54%; } }

.outcomes-section {
  padding: clamp(120px, 12vw, 190px) 0 clamp(180px, 18vw, 280px);
  color: var(--paper);
  background: var(--ink);
}

.outcomes-heading-v2 {
  display: grid;
  grid-template-columns: .38fr 1.35fr .68fr;
  gap: 40px;
  align-items: end;
}
.outcomes-heading-v2 h2 span { color: var(--muted-light); }
.outcomes-heading-v2 > p:last-child { color: var(--muted-light); }

.case-stage-v2 {
  display: grid;
  grid-template-columns: minmax(190px,.34fr) minmax(0,1fr);
  gap: clamp(40px,7vw,110px);
  align-items: start;
  margin-top: clamp(90px,10vw,150px);
}

.case-reel {
  position: relative;
  display: grid;
  gap: 18vh;
}

.case-slide {
  position: sticky;
  top: 150px;
  display: flex;
  min-height: 430px;
  padding: clamp(34px,5vw,68px);
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  color: var(--ink);
  border: 1px solid rgba(244,244,240,.16);
  border-radius: 40px;
  background: var(--paper);
  box-shadow: 0 55px 120px rgba(0,0,0,.42), inset 0 1px white;
  backdrop-filter: blur(24px);
}
.case-slide-one { transform: rotate(-.7deg); }
.case-slide-two { transform: rotate(.65deg); background: #dedfd9; }
.case-slide-three { transform: rotate(-.35deg); }

.case-slide blockquote { max-width: 920px; margin: 0 auto; font-size: clamp(34px,4.5vw,70px); font-weight: 700; line-height: .98; letter-spacing: -.055em; text-align: center; }

.case-person { display: grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; width:min(100%,620px); margin-inline:auto; }
.case-person > span { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; color:var(--ink); background:var(--acid); font-size:24px; font-weight:800; }
.case-person small { display:block; margin-bottom:10px; color:#5e626a; font:700 8px/1 ui-monospace,monospace; letter-spacing:.15em; }
.case-person strong { font-size: 18px; }
.case-person > i { padding:10px 13px; border-radius:999px; color:var(--ink); background:var(--acid); font:700 10px/1 ui-monospace,monospace; font-style:normal; }

.roadmap-section {
  padding: clamp(120px, 12vw, 190px) 0;
  color: var(--ink);
  background: #d9dad5;
}

.roadmap-heading-v2 {
  display: grid;
  grid-template-columns: .38fr 1.35fr .68fr;
  gap: 40px;
  align-items: end;
}
.roadmap-heading-v2 h2 span { color: #767a82; }
.roadmap-heading-v2 > p:last-child { color: #5e626a; }

.miro-map {
  position: relative;
  min-height: 720px;
  margin-top: clamp(70px, 8vw, 120px);
  border: 1px solid rgba(9,10,10,.14);
  border-radius: 38px;
  overflow: hidden;
  background-color: #eff0eb;
  background-image: radial-gradient(rgba(9,10,10,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: 0 35px 90px rgba(9,10,10,.1);
}
.miro-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.miro-map > svg path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 8 9; vector-effect: non-scaling-stroke; }
.map-node { position: absolute; width: 230px; min-height: 170px; padding: 22px; border: 1px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 8px 9px 0 rgba(9,10,10,.12); }
.map-node span { color: #686c74; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .15em; }
.map-node strong { display: block; margin-top: 27px; font-size: 24px; line-height: 1.03; letter-spacing: -.04em; }
.map-node small { display: block; margin-top: 16px; color: #686c74; font-size: 11px; }
.map-node-one { top: 54%; left: 3%; transform: rotate(-3deg); }
.map-node-two { top: 10%; left: 27%; transform: rotate(2deg); }
.map-node-three { right: 27%; bottom: 5%; transform: rotate(-2deg); background: var(--acid); }
.map-node-four { top: 17%; right: 3%; transform: rotate(3deg); color: var(--paper); background: var(--ink); }
.map-node-four span, .map-node-four small { color: var(--muted-light); }

.dropoff-board {
  display: grid;
  grid-template-columns: .9fr 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.dropoff-board > div { min-height: 300px; padding: 28px; border: 1px solid rgba(9,10,10,.15); border-radius: 28px; background: rgba(244,244,240,.58); }
.dropoff-title span, .dropoff-answer span { color: #686c74; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .15em; }
.dropoff-title strong { display: block; margin-top: 68px; font-size: 30px; line-height: 1; letter-spacing: -.045em; }
.dropoff-answer { color: var(--paper); background: var(--ink) !important; }
.dropoff-answer span { color: var(--acid); }
.dropoff-answer p { margin: 50px 0 0; color: var(--muted-light); font-size: 16px; line-height: 1.45; }
.dropoff-answer strong { display: block; margin-top: 32px; color: var(--acid); font-size: 15px; line-height: 1.3; }

.pricing-section {
  padding: clamp(120px, 12vw, 190px) 0;
  color: var(--ink);
  background: var(--paper);
}
.pricing-heading-v2 { display: grid; grid-template-columns: .38fr 1.35fr .68fr; gap: 40px; align-items: end; }
.pricing-heading-v2 h2 span { color: #767a82; }
.pricing-heading-v2 > p:last-child { color: #656971; }

.subscription-rail {
  display: flex;
  gap: 9px;
  margin-top: 70px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subscription-rail::-webkit-scrollbar { display: none; }
.subscription-rail article { flex: 0 0 260px; min-height: 145px; padding: 20px; border: 1px solid rgba(9,10,10,.15); border-radius: 24px; background: rgba(255,255,255,.66); box-shadow: inset 0 1px white, 0 18px 40px rgba(9,10,10,.05); backdrop-filter: blur(18px); }
.subscription-rail article > span { display: block; margin-bottom: 24px; color: #767a82; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .14em; }
.subscription-rail article > strong { display: block; margin-bottom: 9px; font-size: 16px; letter-spacing: -.025em; }
.subscription-rail article > small { display: block; color: #656971; font-size: 11px; line-height: 1.45; }
.subscription-rail article > span::before { content: none; }

.price-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.price-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 570px;
  padding: 24px;
  border: 0;
  border-radius: 30px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 28px 70px rgba(9,10,10,.15);
}
.price-card-v2::before { display: none; }
.price-card-acid { color: var(--ink); background: var(--acid); }
.price-badge-v2 { min-height: 44px; padding: 13px 15px; border: 1px solid currentColor; border-radius: 999px; text-align: center; font: 700 9px/1.4 ui-monospace, monospace; letter-spacing: .1em; }
.price-card-v2 h3 { margin: 55px 0 0; font-size: 30px; letter-spacing: -.04em; }
.price-advantage { min-height: 88px; margin: 28px 0 0; color: var(--muted-light); font-size: 18px; line-height: 1.25; }
.price-card-acid .price-advantage { color: rgba(9,10,10,.65); }
.price-advantage strong { color: inherit; font-size: 1.45em; }
.price-advantage s { opacity: .65; }
.price-value { display: block; margin-top: auto; font-size: clamp(48px, 4vw, 70px); line-height: .9; letter-spacing: -.065em; }
.price-value small { font-size: .38em; }
.price-card-v2 > a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; margin-top: 30px; padding: 0 10px 0 18px; border: 1px solid rgba(244,244,240,.25); border-radius: 999px; font-size: 13px; font-weight: 700; }
.price-card-v2 > a i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); background: var(--acid); font-style: normal; }
.price-card-acid > a { border-color: rgba(9,10,10,.26); }
.price-card-acid > a i { color: var(--paper); background: var(--ink); }

.trial-card-v2 {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  min-height: 720px;
  margin-top: 18px;
  padding: clamp(38px, 6vw, 90px);
  border: 0;
  border-radius: 36px;
  color: var(--paper);
  background: #151616;
  overflow: hidden;
}
.trial-copy-v2 h3 { margin: 24px 0 0; font-size: clamp(48px, 5vw, 82px); line-height: .93; letter-spacing: -.06em; }
.trial-copy-v2 h3 span { color: var(--acid); }
.trial-copy-v2 > p:not(.section-label) { max-width: 560px; margin: 28px 0 0; color: var(--muted-light); font-size: 17px; line-height: 1.5; }
.trial-copy-v2 .primary-button { margin-top: 34px; color: var(--ink); background: var(--paper); }
.trial-visual { position: relative; min-height: 530px; }

.faq-section { padding: clamp(120px, 12vw, 190px) 0; background: #d9dad5; }
.faq-shell-v2 { align-items: start; }
.faq-heading > p:last-child { max-width: 430px; color: #656971; font-size: 15px; line-height: 1.5; }
.faq-list details { border-color: rgba(9,10,10,.16); }
.faq-list details[open] { background: rgba(244,244,240,.5); }
.faq-list summary { padding-inline: 18px; }
.faq-list details > p { padding-inline: 82px 20px; }

.quiz-section { min-height: 900px; padding: clamp(120px, 12vw, 190px) 0; }
.quiz-shell-v2 { position: relative; }
.quiz-result-industry { display: inline-flex; width: fit-content; margin: 0 0 18px; padding: 9px 13px; border: 1px solid rgba(191,255,57,.38); border-radius: 999px; color: var(--acid) !important; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.quiz-result-list span::before { content: "→"; }

.membership { background: var(--paper); }
.site-footer > div { display: flex; gap: 24px; }

/* Contrast-safe use of the acid accent: light on dark, ink on acid, dark green on paper. */
:root {
  --accent-on-light: #426000;
  --muted-on-light: #5f635d;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ink);
}
.roadmap-heading-v2 .section-label,
.pricing-heading-v2 .section-label,
.faq-heading .section-label { color: var(--accent-on-light); }

.quiz-section {
  color: var(--paper);
  background: #151616;
}
.quiz-shell .section-label,
.quiz-shell h2 span { color: var(--acid); }
.quiz-bottom > p { color: var(--muted-light); }

.quiz-dialog-meta .section-label,
.quiz-progress > span,
.quiz-result > p:first-child,
.quiz-result h2 span { color: var(--accent-on-light); }
.quiz-option:hover,
.quiz-option.is-selected { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.quiz-option:hover > span:first-child,
.quiz-option.is-selected > span:first-child { color: rgba(9,10,10,.62); }
.quiz-result-industry { color: var(--ink) !important; background: var(--acid); border-color: var(--acid); }
.quiz-question > p,
.quiz-option > span:first-child,
.quiz-dialog-footer > span { color: #656970; }
.roadmap-heading-v2 > p:last-child,
.faq-heading > p:last-child,
.faq-list details > p { color: #595d65; }

@media (min-width: 1600px) {
  .universe-panel { min-height: 820px; }
  .universe-visual { min-height: 650px; }
  .price-card-v2 { min-height: 650px; }
}

@media (max-width: 1180px) {
  .universe-heading,
  .proof-heading-v2,
  .outcomes-heading-v2,
  .roadmap-heading-v2,
  .pricing-heading-v2 { grid-template-columns: .35fr 1.3fr; }
  .universe-heading > p:last-child,
  .proof-heading-v2 > p:last-child,
  .outcomes-heading-v2 > p:last-child,
  .roadmap-heading-v2 > p:last-child,
  .pricing-heading-v2 > p:last-child { grid-column: 2; }
  .universe-panel { grid-template-columns: .85fr 1.15fr; padding: 42px; }
  .capability-board { grid-template-columns: repeat(2,1fr); }
  .price-grid-v2 { grid-template-columns: repeat(2,1fr); }
  .dropoff-board { grid-template-columns: 1fr 1fr; }
  .dropoff-answer { grid-column: 1/-1; min-height: 240px !important; }
}

@media (max-width: 980px) {
  .header-cta span { display: none; }
  .header-cta { width: 44px; padding: 0; justify-content: center; }
  .hero-copy { width: min(92vw,760px); }
  .door-scene { right: 2vw; }
  .universe-heading,
  .proof-heading-v2,
  .outcomes-heading-v2,
  .roadmap-heading-v2,
  .pricing-heading-v2 { grid-template-columns: 1fr; }
  .universe-heading > p:last-child,
  .proof-heading-v2 > p:last-child,
  .outcomes-heading-v2 > p:last-child,
  .roadmap-heading-v2 > p:last-child,
  .pricing-heading-v2 > p:last-child { grid-column: auto; max-width: 680px; }
  .universe-panel { grid-template-columns: 1fr; }
  .universe-visual { min-height: 580px; }
  .case-stage-v2 { grid-template-columns: 1fr; }
  .miro-map { min-height: 980px; }
  .miro-map > svg { display: none; }
  .map-node { width: min(72%,320px); }
  .map-node-one { top: 4%; left: 5%; }.map-node-two { top: 28%; left: 24%; }.map-node-three { right: 8%; bottom: 28%; }.map-node-four { right: 18%; top: auto; bottom: 4%; }
  .trial-card-v2 { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .site-header { height: 68px; padding-inline: 15px; }
  .brand { gap: 8px; font-size: 10px; }
  .brand-mark { width: 11px; height: 24px; }
  .desktop-nav { display: flex; position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 120; justify-content: space-between; padding: 5px; color: var(--paper); border-color: rgba(244,244,240,.18); background: rgba(9,10,10,.88); }
  .desktop-nav a { padding: 11px 9px; font-size: 10px; }
  .nav-door { display: none; }
  .header-cta { display: none; }
  .hero-shell { padding: 72px 18px 24vh; align-items: center; }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: clamp(50px, 15vw, 72px); line-height: .91; }
  .hero-note { margin-top: 20px; font-size: 14px; }
  .hero-actions { flex-direction: column; gap: 9px; margin-top: 22px; }
  .hero-actions > * { width: 100%; max-width: 300px; }
  .hero-actions .primary-button { padding-left: 18px; }
  .door-scene { top: 79%; right: 50%; width: 120px; transform: translate3d(calc(50% + var(--approach) * -8vw), calc(var(--approach) * -16vh), 0) scale(calc(1 + var(--approach) * 6.3 + var(--enter) * 1.8)) rotateX(var(--my)) rotateY(var(--mx)); }
  .club-universe, .proof-section, .outcomes-section, .roadmap-section, .pricing-section, .faq-section, .quiz-section { padding-block: 100px; }
  .universe-heading h2, .proof-heading-v2 h2, .outcomes-heading-v2 h2, .roadmap-heading-v2 h2, .pricing-heading-v2 h2 { font-size: clamp(44px, 13vw, 62px); }
  .universe-switcher { grid-template-columns: 1fr; border-radius: 20px; }
  .universe-switcher button { min-height: 54px; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .universe-switcher button:last-child { border-bottom: 0; }
  .universe-panel { min-height: 0; padding: 26px 20px; border-radius: 26px; }
  .universe-copy h3 { font-size: 39px; }
  .universe-visual { min-height: 390px; }
  .capability-board { grid-template-columns: 1fr; }
  .capability-widget, .capability-widget-large, .capability-widget-wide { grid-column: auto; min-height: 300px; }
  .case-stage-v2 { gap: 50px; margin-top: 70px; }
  .case-reel { gap: 5vh; }
  .case-slide { top: 88px; min-height: 520px; padding: 34px 22px; border-radius: 28px; }
  .case-slide blockquote { font-size: clamp(30px,8.6vw,42px); }
  .case-person { grid-template-columns:auto 1fr; gap:14px; }
  .case-person > span { grid-row:span 2; width:58px; height:58px; }
  .case-person > i { grid-column:2; justify-self:start; }
  .miro-map { min-height: 920px; }
  .map-node { width: 82%; }
  .map-node-one { left: 4%; }.map-node-two { left: 13%; }.map-node-three { right: 4%; }.map-node-four { right: 9%; }
  .dropoff-board { grid-template-columns: 1fr; }
  .dropoff-answer { grid-column: auto; }
  .price-grid-v2 { grid-template-columns: 1fr; }
  .price-card-v2 { min-height: 520px; }
  .trial-card-v2 { min-height: 980px; padding: 34px 20px; }
  .trial-visual { min-height: 610px; }
  .faq-list details > p { padding-inline: 18px; }
  .quiz-bottom { grid-template-columns: 1fr; }
  .quiz-button { width: 100%; }
  .site-footer { padding-bottom: 88px; }
}

/* Final cascade overrides for the July refinement. */
.desktop-nav { display:grid; grid-template-columns:190px 34px 190px; align-items:center; gap:6px; }
.nav-side { display:flex; align-items:center; gap:2px; }
.nav-side-left { justify-content:flex-end; }
.nav-side-right { justify-content:flex-start; }
.nav-door { margin-inline:0; }
.signal-thread { z-index:5; opacity:.68; }
.signal-thread path { stroke-width:1.55; opacity:.72; }
.inside-scene { z-index:11; }

.universe-switcher { position:sticky; top:96px; z-index:18; overflow:hidden; background:rgba(20,21,21,.82); box-shadow:0 18px 60px rgba(0,0,0,.24); backdrop-filter:blur(22px) saturate(135%); }
.universe-panels { display:grid; gap:16vh; padding-bottom:18vh; }
.universe-panel,.universe-panel[hidden] { position:sticky; top:188px; display:grid; min-height:min(720px,calc(100svh - 220px)); opacity:.76; transform:scale(.975); transform-origin:50% 10%; transition:opacity 320ms ease,transform 500ms cubic-bezier(.2,.8,.2,1),border-color 220ms ease; }
.universe-panel-system { background:radial-gradient(circle at 88% 18%,rgba(191,255,57,.11),transparent 34%),linear-gradient(135deg,#151817,#0f1110); }
.universe-panel-practice { background:radial-gradient(circle at 12% 82%,rgba(191,255,57,.09),transparent 38%),linear-gradient(135deg,#141615,#0d0f0e); }
.universe-panel.is-active { opacity:1; transform:none; border-color:rgba(191,255,57,.48); }
.capability-board { margin-top:18px; }
.capability-widget { padding-bottom:96px; opacity:.72; transition:opacity 320ms ease,transform 520ms cubic-bezier(.2,.8,.2,1),border-color 220ms ease,box-shadow 320ms ease; }
.capability-widget > strong { max-width:88%; margin-top:38px; font-size:clamp(28px,2.45vw,42px); line-height:1.01; text-wrap:balance; }
.capability-widget > p { max-width:74%; }
.capability-widget.is-active,.capability-widget:hover,.capability-widget:focus-within { opacity:1; transform:translateY(-6px); border-color:rgba(191,255,57,.62); box-shadow:inset 0 1px rgba(255,255,255,.1),0 30px 80px rgba(0,0,0,.3),0 0 0 1px rgba(191,255,57,.08); }

.case-stage-v2 { grid-template-columns:minmax(180px,.3fr) minmax(0,900px); justify-content:space-between; gap:clamp(34px,5vw,80px); }
.case-reel { gap:11vh; }
.case-slide { top:126px; min-height:350px; padding:clamp(30px,3.5vw,48px); gap:32px; border-radius:32px; }
.case-slide blockquote { max-width:760px; font-size:clamp(27px,2.75vw,44px); line-height:1.04; }
.case-person { width:min(100%,560px); }
.case-person > span { width:56px; height:56px; font-size:19px; }
.case-person strong { font-size:16px; }

.roadmap-heading-v2 h2 { max-width:950px; font-size:clamp(52px,5.3vw,88px); text-wrap:balance; }
.miro-map > svg path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--roadmap-progress)); transition:stroke-dashoffset 90ms linear; }
.map-node { opacity:.58; transform-origin:center; transition:opacity 280ms ease,filter 320ms ease; }
.map-node.is-active { opacity:1; filter:drop-shadow(0 12px 16px rgba(9,10,10,.12)); }

.dropoff-board { position:relative; grid-template-columns:.92fr 1.08fr 1fr; gap:10px; margin-top:22px; padding:10px; border-radius:34px; color:var(--paper); background:#111212; box-shadow:0 30px 80px rgba(9,10,10,.16); }
.dropoff-board > div { min-height:320px; border-color:rgba(244,244,240,.12); background:rgba(244,244,240,.035); }
.dropoff-title span { color:var(--acid); }
.dropoff-title strong { margin-top:56px; color:var(--paper); font-size:clamp(26px,2.2vw,34px); }
.dropoff-answer { background:var(--acid)!important; color:var(--ink); }
.dropoff-answer span,.dropoff-answer strong { color:var(--ink); }
.dropoff-answer p { color:rgba(9,10,10,.7); font-size:17px; }

.price-grid-v2 { gap:14px; margin-top:64px; }
.price-card-v2 { min-height:560px; padding:58px 26px 24px; overflow:visible; }
.price-badge-v2 { position:absolute; top:-24px; right:22px; left:22px; z-index:2; display:grid; place-items:center; min-height:48px; color:var(--ink); border:1px solid rgba(9,10,10,.18); background:var(--paper); box-shadow:0 14px 34px rgba(9,10,10,.14); }
.price-card-acid .price-badge-v2 { color:var(--acid); border-color:var(--ink); background:var(--ink); }
.price-card-v2 h3 { margin:28px 0 0; font-size:clamp(30px,2.35vw,38px); }
.price-advantage { display:grid; gap:12px; min-height:130px; margin-top:30px; }
.price-advantage strong { overflow-wrap:break-word; font-size:clamp(22px,1.65vw,28px); line-height:1.04; letter-spacing:-.035em; text-wrap:balance; }
.price-advantage small { font-size:14px; line-height:1.4; }
.price-value { font-size:clamp(50px,4vw,64px); }

.universe-copy h3,.proof-heading-v2 h2,.outcomes-heading-v2 h2,.pricing-heading-v2 h2,.trial-copy-v2 h3 { text-wrap:balance; }

@media (max-width:1180px) {
  .desktop-nav { grid-template-columns:164px 34px 164px; }
  .desktop-nav a { padding-inline:10px; }
  .universe-panel,.universe-panel[hidden] { top:174px; min-height:min(680px,calc(100svh - 200px)); }
  .capability-widget > strong { max-width:100%; }
  .case-stage-v2 { grid-template-columns:170px minmax(0,1fr); }
  .price-card-v2 { min-height:580px; }
}

@media (max-width:980px) {
  .club-universe { overflow:visible; }
  .universe-switcher { position:relative; top:auto; }
  .universe-panels { gap:18px; padding-bottom:0; }
  .universe-panel,.universe-panel[hidden] { position:relative; top:auto; min-height:0; opacity:1; transform:none; }
  .case-stage-v2 { grid-template-columns:1fr; }
  .dropoff-board { grid-template-columns:1fr 1fr; }
  .dropoff-answer { grid-column:1/-1; min-height:240px!important; }
}

@media (max-width:680px) {
  .desktop-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
  .nav-side { display:contents; }
  .desktop-nav a { display:grid; place-items:center; padding:11px 4px; text-align:center; }
  .universe-switcher { display:flex; overflow-x:auto; border-radius:18px; scrollbar-width:none; }
  .universe-switcher button { flex:0 0 68%; min-height:56px; border-right:1px solid var(--line-light); border-bottom:0; }
  .capability-widget { padding:24px 20px 88px; opacity:1; }
  .capability-widget > strong { margin-top:30px; font-size:clamp(28px,9vw,38px); }
  .capability-widget > p { max-width:100%; }
  .case-stage-v2 { gap:34px; }
  .case-reel { gap:4vh; }
  .case-slide { top:82px; min-height:390px; padding:28px 20px; border-radius:26px; }
  .case-slide blockquote { font-size:clamp(25px,8vw,34px); }
  .roadmap-heading-v2 h2 { font-size:clamp(44px,12vw,60px); }
  .miro-map { min-height:860px; }
  .dropoff-board { grid-template-columns:1fr; padding:7px; border-radius:28px; }
  .dropoff-board > div { min-height:260px; padding:24px; }
  .dropoff-answer { grid-column:auto; }
  .price-grid-v2 { gap:58px; }
  .price-card-v2 { min-height:500px; padding:54px 22px 22px; }
  .price-badge-v2 { right:18px; left:18px; }
  .price-advantage { min-height:116px; }
  .trial-card-v2 { min-height:900px; }
}

/* Scroll-controlled club layers: the labels are progress, not controls. */
.club-universe { overflow:clip; }
.universe-switcher { pointer-events:none; }
.universe-step {
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:7px 14px;
  align-content:center;
  min-height:74px;
  padding:0 24px 12px;
  color:var(--muted-light);
  border-right:1px solid var(--line-light);
  transition:color 220ms ease,background-color 320ms ease;
}
.universe-step:last-child { border-right:0; }
.universe-step > span { align-self:center; color:var(--acid); font:700 9px/1 ui-monospace,monospace; letter-spacing:.16em; }
.universe-step > b { align-self:center; font-size:15px; }
.universe-step > i { position:absolute; right:20px; bottom:12px; left:20px; height:2px; overflow:hidden; border-radius:99px; background:rgba(244,244,240,.12); }
.universe-step > i::after { display:block; width:0; height:100%; border-radius:inherit; background:var(--acid); content:""; transition:width 520ms cubic-bezier(.2,.8,.2,1); }
.universe-step.is-active { color:var(--paper); background:rgba(191,255,57,.07); }
.universe-step.is-active > i::after { width:100%; }
.universe-panels { gap:20vh; padding-bottom:30vh; }
.universe-panel,.universe-panel[hidden] { top:184px; z-index:1; min-height:calc(100svh - 208px); max-height:780px; opacity:1; background:radial-gradient(circle at 82% 18%,rgba(191,255,57,.08),transparent 34%),linear-gradient(135deg,#151716,#0d0f0e); box-shadow:0 48px 120px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08); }
.universe-panel:nth-child(2) { z-index:2; }
.universe-panel:nth-child(3) { z-index:3; }
.universe-panel:not(.is-active) { opacity:1; filter:saturate(.78) brightness(.82); }
.universe-panel.is-active { filter:none; }
.universe-panel-system,.universe-panel-system[hidden] { background:radial-gradient(circle at 88% 18%,rgba(191,255,57,.11),transparent 34%),linear-gradient(135deg,#151817,#0f1110); }
.universe-panel-practice,.universe-panel-practice[hidden] { background:radial-gradient(circle at 12% 82%,rgba(191,255,57,.09),transparent 38%),linear-gradient(135deg,#141615,#0d0f0e); }

/* The route owns its scroll distance, so it always finishes before the next block. */
.transformation-strip { padding-top:0; }
.miro-map-story {
  position:relative;
  height:230vh;
  margin-top:clamp(70px,8vw,120px);
}
.miro-map {
  position:sticky;
  top:96px;
  height:calc(100svh - 118px);
  min-height:620px;
  max-height:820px;
  margin-top:0;
}
.miro-map > svg { z-index:1; overflow:visible; }
.miro-map > svg path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--roadmap-progress)); }
.map-node { z-index:2; }
.map-mascot {
  position:absolute;
  top:var(--map-y,66.176%);
  left:var(--map-x,10.417%);
  z-index:4;
  width:58px;
  height:58px;
  color:var(--ink);
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--map-angle,0deg)) scale(var(--map-scale,.82));
  transform-origin:center;
  filter:drop-shadow(0 9px 8px rgba(9,10,10,.24));
  transition:top 70ms linear,left 70ms linear,transform 90ms linear;
}
.map-mascot > svg { display:block; width:100%; height:100%; }
.map-mascot-body { fill:var(--ink); }
.map-mascot-eye { fill:var(--acid); filter:drop-shadow(0 0 4px rgba(191,255,57,.75)); }
.map-mascot-legs { transform-origin:center; animation:mapMascotRun .42s ease-in-out infinite alternate; }
@keyframes mapMascotRun { to { transform:rotate(-7deg) translateY(-2px); } }

@media (max-width:980px) {
  .club-universe { overflow:hidden; }
  .universe-switcher { position:sticky; top:84px; display:grid; grid-template-columns:repeat(3,1fr); }
  .universe-step { min-height:64px; padding:0 14px 12px; border-right:1px solid var(--line-light); }
  .universe-step > b { font-size:12px; }
  .universe-panels { gap:24px; padding-bottom:0; }
  .universe-panel,.universe-panel[hidden] { position:relative; top:auto; max-height:none; filter:none; }
  .miro-map-story { height:220vh; }
  .miro-map { position:sticky; top:86px; height:calc(100svh - 104px); min-height:680px; }
  .miro-map > svg { display:block; }
}

@media (max-width:680px) {
  .universe-switcher { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .universe-step { min-width:0; padding-inline:8px; }
  .universe-step > span { font-size:7px; }
  .universe-step > b { overflow:hidden; font-size:10px; text-overflow:ellipsis; }
  .universe-step > i { right:8px; left:8px; }
  .miro-map-story { height:240vh; margin-top:60px; }
  .miro-map { top:80px; height:calc(100svh - 96px); min-height:620px; }
  .map-node { width:43%; min-height:132px; padding:14px; border-radius:17px; box-shadow:5px 6px 0 rgba(9,10,10,.1); }
  .map-node span { font-size:7px; }
  .map-node strong { margin-top:17px; font-size:16px; }
  .map-node small { margin-top:10px; font-size:9px; }
  .map-node-one { top:62%; left:2%; }
  .map-node-two { top:8%; left:18%; }
  .map-node-three { right:auto; bottom:8%; left:42%; }
  .map-node-four { top:27%; right:2%; }
  .map-mascot { width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce) {
  .map-mascot-legs { animation:none; }
}

/* Block 03: one coherent path with a real tool dock instead of unrelated widgets. */
.tool-constellation {
  display:grid;
  grid-template-columns:minmax(250px,.48fr) minmax(0,1.52fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  margin-top:clamp(70px,7vw,110px);
  padding:clamp(24px,3vw,40px);
  border:1px solid rgba(244,244,240,.14);
  border-radius:34px;
  background:radial-gradient(circle at 82% 10%,rgba(191,255,57,.09),transparent 31%),linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.2);
}
.tool-constellation-copy > span { color:var(--acid); font:700 9px/1 ui-monospace,monospace; letter-spacing:.16em; }
.tool-constellation-copy > strong { display:block; max-width:430px; margin-top:24px; font-size:clamp(28px,2.5vw,42px); line-height:1; letter-spacing:-.045em; text-wrap:balance; }
.tool-constellation-copy > p { max-width:440px; margin:18px 0 0; color:var(--muted-light); font-size:14px; line-height:1.5; }
.tool-logo-rail { display:grid; grid-template-columns:repeat(9,minmax(72px,1fr)); gap:8px; }
.tool-logo-rail figure {
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  min-width:0;
  min-height:112px;
  margin:0;
  padding:14px 8px 11px;
  overflow:hidden;
  border:1px solid rgba(9,10,10,.12);
  border-radius:20px;
  color:var(--ink);
  background:rgba(244,244,240,.94);
  box-shadow:inset 0 1px white,0 16px 34px rgba(0,0,0,.16);
  transition:transform 320ms cubic-bezier(.2,.8,.2,1),box-shadow 220ms ease;
}
.tool-logo-rail figure:nth-child(even) { transform:translateY(10px); }
.tool-logo-rail figure:hover { z-index:2; transform:translateY(-7px) scale(1.04); box-shadow:0 24px 44px rgba(0,0,0,.28); }
.tool-logo-rail img { display:block; width:38px; height:38px; object-fit:contain; }
.tool-logo-rail figcaption { overflow:hidden; max-width:100%; font:700 8px/1 ui-monospace,monospace; letter-spacing:.04em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.nano-banana-logo::after { position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:50%; background:#ffd84d; content:""; }
.nano-banana-logo > i { position:absolute; top:10px; right:10px; z-index:1; font-size:13px; font-style:normal; }

.capability-journey { grid-template-columns:repeat(3,1fr); gap:12px; }
.capability-journey .capability-phase { grid-column:auto; min-height:430px; padding:30px; opacity:.72; }
.capability-journey .capability-phase > strong { max-width:100%; margin-top:54px; font-size:clamp(31px,2.55vw,44px); }
.capability-journey .capability-phase > p { max-width:100%; font-size:15px; }
.capability-journey .capability-phase.is-active { opacity:1; }

/* Trial: benefits change below the pass and never cover the 60-minute centre. */
.trial-visual { min-height:610px; }
.trial-widget-stack article,
.trial-widget-stack article:nth-child(1),
.trial-widget-stack article:nth-child(2),
.trial-widget-stack article:nth-child(3),
.trial-widget-stack article:nth-child(4),
.trial-widget-stack article:nth-child(5) {
  top:auto!important;
  right:auto!important;
  bottom:0!important;
  left:50%!important;
  width:min(390px,82%);
  min-height:126px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,18px) scale(.94);
}

@media (max-width:1180px) {
  .tool-constellation { grid-template-columns:1fr; }
  .tool-logo-rail { grid-template-columns:repeat(5,1fr); }
  .tool-logo-rail figure:nth-child(even) { transform:none; }
  .capability-journey { grid-template-columns:1fr 1fr; }
  .capability-journey .capability-phase:last-child { grid-column:1/-1; min-height:360px; }
}

@media (max-width:680px) {
  .tool-constellation { padding:22px 18px; border-radius:26px; }
  .tool-logo-rail { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:92px; overflow-x:auto; padding:0 0 18px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .tool-logo-rail figure { min-height:102px; scroll-snap-align:start; }
  .capability-journey { grid-template-columns:1fr; }
  .capability-journey .capability-phase,.capability-journey .capability-phase:last-child { grid-column:auto; min-height:400px; }
  .trial-visual { min-height:620px; }
}

/* Ruslan review: free entry is the primary conversion path. */
.header-cta-free {
  color: var(--ink);
  border-color: rgba(9,10,10,.78);
  background: var(--acid);
  box-shadow: 0 12px 36px rgba(139,197,19,.22);
}
.header-cta-free:hover,
.site-header.is-dark .header-cta-free:hover {
  color: var(--ink);
  background: #cbff56;
  box-shadow: 0 16px 44px rgba(191,255,57,.28);
}
.hero-free-cta {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
  box-shadow: 0 18px 48px rgba(139,197,19,.18);
}
.hero-free-cta:hover {
  color: var(--ink);
  background: #cbff56;
  box-shadow: 0 22px 58px rgba(139,197,19,.28);
}
.hero-actions .secondary-button {
  color: rgba(9,10,10,.72);
  background: rgba(244,244,240,.38);
}
@keyframes courseTabFocus {
  0%,20% { color:var(--ink); background:var(--acid); }
  25%,100% { color:rgba(244,244,240,.52); background:transparent; }
}

/* Five real stories keep the stack varied without changing its rhythm. */
.case-slide-four { transform: rotate(.55deg); background:#cfd3ca; }
.case-slide-five {
  color: var(--ink);
  border-color: rgba(191,255,57,.58);
  background: var(--acid);
  transform: rotate(-.45deg);
}
.case-slide-five .case-person > span,
.case-slide-five .case-person > i { color:var(--paper); background:var(--ink); }
.case-slide-five .case-person small { color:rgba(9,10,10,.58); }

@media (max-width:680px) {
  .case-slide { min-height:440px; }
}

/* 2026-07 responsive rhythm pass: fewer oversized pauses, clearer scroll stories. */
.proof-section,
.outcomes-section,
.roadmap-section,
.pricing-section,
.faq-section,
.quiz-section {
  padding-top: clamp(88px, 7.5vw, 128px);
  padding-bottom: clamp(96px, 8.5vw, 142px);
}
.club-universe { padding-top:clamp(92px,8vw,128px); padding-bottom:72px; }
.outcomes-section { padding-bottom: clamp(130px, 12vw, 190px); }
.proof-heading-v2 h2,
.outcomes-heading-v2 h2,
.roadmap-heading-v2 h2,
.pricing-heading-v2 h2 {
  font-size: clamp(48px, 5.15vw, 84px);
  line-height: .94;
  text-wrap: balance;
}
.case-stage-v2 { margin-top: clamp(52px, 5vw, 78px); }
.tool-constellation,
.capability-board,
.transformation-strip { margin-top: clamp(48px, 5vw, 76px); }
.pricing-section,
.outcomes-section,
.roadmap-section,
.quiz-section,
#prices { scroll-margin-top: 92px; }

/* Block 02: all three layers fit a laptop and remain scroll-controlled on touch. */
.universe-panels { gap: 15vh; padding-bottom: 18vh; }
.universe-panel,
.universe-panel[hidden] {
  min-height: min(680px, calc(100svh - 190px));
  max-height: none;
  padding: clamp(30px, 3.2vw, 48px);
  grid-template-columns: minmax(290px,.72fr) minmax(420px,1.28fr);
  gap: clamp(28px,3.5vw,58px);
}
.universe-copy h3 { font-size: clamp(40px,3.65vw,60px); }
.panel-lead { margin-top:22px; font-size:16px; }
.benefit-stack { gap:8px; margin-top:24px; }
.benefit-stack > div { padding:14px 16px; border-radius:16px; }
.benefit-stack strong { font-size:13px; }
.universe-visual { min-height:500px; }
@keyframes artifactNode { 35% { color:var(--ink); background:var(--acid); transform:translateY(-8px); } 55%,100% { transform:none; } }

/* Reviews: the stack now visibly changes state on every screen size. */
.case-reel { gap:12vh; }
.case-slide {
  --case-rotate:0deg;
  z-index:var(--case-z,1);
  transform:translateY(var(--case-y,0)) scale(var(--case-scale,1)) rotate(var(--case-rotate));
  transform-origin:50% 10%;
  transition:transform 420ms cubic-bezier(.2,.8,.2,1),opacity 260ms ease,filter 260ms ease;
}
.case-slide-one{--case-rotate:-.55deg}.case-slide-two{--case-rotate:.5deg}.case-slide-three{--case-rotate:-.3deg}.case-slide-four{--case-rotate:.45deg}.case-slide-five{--case-rotate:-.4deg}
.case-slide.is-past { --case-y:-12px; --case-scale:.965; opacity:.38; filter:brightness(.72); }
.case-slide.is-current { --case-y:0; --case-scale:1; opacity:1; filter:none; }

/* Subscription contents form a complete bento instead of a clipped rail. */
.subscription-rail {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:clamp(48px,5vw,70px);
  padding:0;
  overflow:visible;
}
.subscription-rail article { position:relative; min-width:0; min-height:136px; padding:18px; overflow:hidden; }
.subscription-rail article:nth-child(2),.subscription-rail article:nth-child(7){ color:var(--ink); border-color:var(--acid); background:var(--acid); }
.subscription-rail article:nth-child(2) small,.subscription-rail article:nth-child(7) small,.subscription-rail article:nth-child(2)>span,.subscription-rail article:nth-child(7)>span{color:rgba(9,10,10,.62)}
.subscription-rail article::after { position:absolute; right:15px; top:13px; color:rgba(9,10,10,.16); font:700 32px/1 ui-monospace,monospace; content:"\2197\FE0E"; }

/* Pricing labels are deliberate tabs, not pale captions. */
.price-grid-v2 { margin-top:52px; }
.price-badge-v2 {
  top:-30px;
  min-height:58px;
  color:var(--ink);
  border:1px solid var(--ink);
  background:var(--acid);
  box-shadow:0 16px 34px rgba(9,10,10,.2);
  font-size:10px;
}
.price-card-acid .price-badge-v2 { color:var(--paper); border-color:var(--paper); background:var(--ink); }
.price-card-v2 .price-advantage strong { color:var(--paper); }
.price-card-acid .price-advantage strong { color:var(--ink); }

/* 2026-08-02, owner review (round 3, item 9): "экономия N ₽" used to inherit the card's muted
   grey at 14px/regular and the owner did not see it at all. It is now the only warm colour on
   the page, at 15px/700. The struck-through old price beside it deliberately stays muted —
   the contrast between the two is what makes the saving read. */
.price-save {
  color: var(--status-highlight);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* --status-highlight is 2.6:1 on the acid card, so that card takes the deeper burnt tone. */
.price-card-acid .price-save {
  color: var(--club-warn-accent-deep);
}

/* Trial: explicit guided sequence, restarted when the visitor reaches it. */
.trial-card-v2 { min-height:680px; margin-top:30px; }
.trial-visual { min-height:590px; }

/* Today-in-Design-inspired moving field of niches with club-specific symbols. */
.quiz-audience-marquee { display:flex; gap:10px; width:100vw; margin-top:72px; margin-left:calc(50% - 50vw); padding-block:8px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent); }
.quiz-audience-track { display:flex; flex:0 0 auto; gap:10px; min-width:max-content; animation:nicheFlow 30s linear infinite; }
.quiz-audience-track span { display:flex; align-items:center; gap:10px; min-height:48px; padding:5px 17px 5px 7px; color:var(--paper); border:1px solid rgba(244,244,240,.18); border-radius:999px; background:rgba(255,255,255,.025); font:700 10px/1 ui-monospace,monospace; }
.quiz-audience-track span:nth-child(4n+1) { color:var(--ink); border-color:var(--acid); background:var(--acid); }
.quiz-audience-track i { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--ink); background:var(--paper); font:700 14px/1 Arial,sans-serif; font-style:normal; }
.quiz-audience-track span:nth-child(4n+1) i { color:var(--paper); background:var(--ink); }
@keyframes nicheFlow { to { transform:translateX(calc(-100% - 10px)); } }

@media (max-width:1180px) {
  .universe-panel,.universe-panel[hidden] { grid-template-columns:minmax(270px,.76fr) minmax(380px,1.24fr); padding:30px; gap:28px; }
  .universe-copy h3 { font-size:clamp(38px,4.4vw,52px); }
  .subscription-rail { grid-template-columns:repeat(3,1fr); }
  .price-grid-v2 { grid-template-columns:repeat(2,1fr); gap:56px 14px; }
}

@media (max-width:980px) {
  .universe-panels { gap:18vh; padding-bottom:18vh; }
  .universe-panel,.universe-panel[hidden] { position:sticky; top:150px; z-index:1; display:grid; grid-template-columns:1fr; gap:18px; min-height:calc(100svh - 166px); padding:24px; overflow:hidden; border-radius:28px; box-shadow:0 42px 90px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.08); }
  .universe-panel:nth-child(2){z-index:2}.universe-panel:nth-child(3){z-index:3}
  .universe-copy h3 { max-width:760px; font-size:clamp(34px,6.2vw,48px); }
  .universe-visual { min-height:340px; }
  .benefit-stack { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:680px) {
  .proof-section,.outcomes-section,.roadmap-section,.pricing-section,.faq-section,.quiz-section { padding-block:82px; }
  .proof-heading-v2 h2,.outcomes-heading-v2 h2,.roadmap-heading-v2 h2,.pricing-heading-v2 h2 { font-size:clamp(40px,11.5vw,54px); }
  .universe-switcher { top:70px; z-index:80; background:#151716; }
  .universe-panels { gap:22vh; padding-bottom:20vh; }
  .universe-panel,.universe-panel[hidden] { top:140px; min-height:calc(100svh - 154px); max-height:none; padding:20px; gap:12px; }
  .universe-copy h3 { font-size:clamp(31px,9.5vw,40px); line-height:.98; }
  .panel-index { margin-bottom:16px; }
  .panel-lead { margin-top:14px; font-size:13px; line-height:1.4; }
  .inline-platform-link { margin-top:16px; font-size:11px; }
  .benefit-stack { gap:6px; margin-top:14px; }
  .benefit-stack>div { padding:10px 12px; }
  .benefit-stack strong { font-size:10px; line-height:1.35; }
  .universe-visual { min-height:280px; }
  .case-stage-v2 { margin-top:44px; }
  .case-reel { gap:18vh; padding-bottom:10vh; }
  .case-slide { position:sticky; top:88px; min-height:min(500px,calc(100svh - 110px)); }
  .case-slide blockquote { font-size:clamp(24px,7.7vw,32px); }
  .subscription-rail { display:flex; gap:10px; margin-right:-20px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .subscription-rail article { flex:0 0 82%; scroll-snap-align:center; }
  .price-grid-v2 { grid-template-columns:1fr; }
  .price-badge-v2 { top:-26px; min-height:52px; }
  .trial-card-v2 { min-height:920px; padding:28px 18px; }
  .quiz-section { min-height:760px; }
  .quiz-audience-marquee { margin-top:52px; }
}

@media (min-width:981px) and (max-height:850px) {
  .universe-panel,.universe-panel[hidden] { min-height:min(540px,calc(100svh - 190px)); padding:24px 30px; }
  .universe-copy h3 { font-size:clamp(38px,3.4vw,48px); }
  .panel-index { margin-bottom:18px; }
  .benefit-stack { margin-top:18px; }
  .universe-visual { min-height:420px; }
  .trial-card-v2 { min-height:630px; padding:28px 60px; }
  .trial-visual { min-height:510px; }
}

.skip-link { position:fixed; top:10px; left:10px; z-index:999; padding:11px 15px; color:var(--ink); border-radius:999px; background:var(--acid); transform:translateY(-160%); transition:transform 160ms ease; }
.skip-link:focus { transform:none; }
a,button,summary,[tabindex] { touch-action:manipulation; -webkit-tap-highlight-color:rgba(191,255,57,.18); }
.price-value,.price-number,.trial-tour-status>b { font-variant-numeric:tabular-nums; }

/* Trial constellation: five things to explore, without repeating the 60-minute promise. */
.trial-card-v2 { grid-template-columns:.82fr 1.18fr; min-height:700px; }
.trial-visual { min-height:610px; }

/* Crisp, real vector symbols replace tiny font glyphs in the quiz marquee. */
.quiz-icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.quiz-audience-track { will-change:transform; backface-visibility:hidden; }
.quiz-audience-track span { min-height:52px; padding:6px 19px 6px 7px; font:700 12px/1 Arial,"Helvetica Neue",sans-serif; letter-spacing:0; -webkit-font-smoothing:antialiased; }
.quiz-audience-track i { width:38px; height:38px; }
.quiz-audience-track i svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.deep-dive-card:first-child.is-open .deep-popover-guides,
.deep-dive-card:first-child:hover .deep-popover-guides,
.deep-dive-card:first-child:focus-visible .deep-popover-guides { transform:none; }

/* Soft hand-off from the grey roadmap canvas to the pricing canvas. */
.roadmap-section { z-index:14; padding-bottom:calc(clamp(96px,8.5vw,142px) + 44px); }
.pricing-section {
  z-index:15;
  margin-top:-44px;
  border-radius:34px 34px 0 0;
  box-shadow:0 -24px 70px rgba(9,10,10,.07);
}

@media (max-width:680px) {
  .roadmap-section { padding-bottom:106px; }
  .pricing-section { margin-top:-26px; border-radius:24px 24px 0 0; }
  .trial-card-v2 { grid-template-columns:1fr; gap:36px; align-items:start; min-height:0; padding:78px 18px 28px; }
  .trial-copy-v2 { width:100%; }
  .trial-visual { width:100%; min-width:0; min-height:600px; }
  .quiz-audience-track span { font-size:11px; }
}

@media (prefers-reduced-motion:reduce) {
  .course-artifact i,.workshop-artifact b,.quiz-audience-track { animation:none; }
  .quiz-audience-marquee { overflow-x:auto; mask-image:none; }
  .quiz-audience-track[aria-hidden="true"] { display:none; }
}

/* 2026-07-28: source-of-truth restoration and premium content pass. */
:root {
  --paper: var(--club-paper);
  --paper-deep: var(--club-paper-deep);
  --ink: var(--club-ink);
  --ink-soft: var(--club-ink-soft);
  --graphite: var(--club-graphite);
  --muted: var(--club-muted);
  --muted-light: var(--club-muted-light);
  --acid: var(--club-acid);
  --line-dark: var(--club-line-dark);
  --line-light: var(--club-line-light);
  --premium-edge: rgba(255,255,255,.54);
  --premium-shadow: var(--shadow-club-product);
}

.hero-copy {
  max-width: min(820px, 61vw);
}

.hero-copy h1 {
  max-width: 900px;
  font-size: clamp(68px, 7.1vw, 122px);
  line-height: .86;
  letter-spacing: -.072em;
}

.hero-note {
  max-width: 650px;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.48;
}

.hero-actions {
  align-items: center;
}

.primary-button,
.secondary-button,
.price-card-v2 > a,
.quiz-join-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* 2026-08-02, owner review (round 3, items 4 + 10): a diagonal white sweep used to live here on
   ::before and be re-purposed further down as a top hairline. Both are gone. This block is kept
   as a marker because deleting it silently would hide the fact that the CTA once had *two*
   competing ::before definitions at the same specificity — the later one won, and anyone who
   removed only the later one would have brought this sweep back to life. */

.door-scene {
  perspective: 1500px;
}

.door-rig {
  /* Было filter: drop-shadow — фильтр заставлял композитор выделять текстуру размером
     с весь риг и гнать по ней гаусс каждый кадр вращения двери (замер 18.08: кадры
     до 1100мс в портальной сцене). box-shadow с теми же параметрами даёт ту же тень
     без render pass. Приём одинаков во всех четырёх объявлениях .door-rig. */
  box-shadow: 0 48px 70px rgba(0,0,0,.34);
}

.door-frame {
  border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 18% 82%, rgba(0,0,0,.32)),
    var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 8px rgba(0,0,0,.22),
    0 0 0 1px rgba(11,12,13,.7),
    0 40px 90px rgba(11,12,13,.36);
}

.door-frame::before,
.door-frame::after {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  content: "";
}

.door-frame::before {
  inset: 9% 12%;
  border: 1px solid rgba(223,255,79,.42);
  box-shadow: 0 0 36px rgba(223,255,79,.22), inset 0 0 34px rgba(223,255,79,.08);
}

.door-frame::after {
  top: 14%;
  right: 16%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow:
    -18px 31px 0 -1px rgba(223,255,79,.75),
    10px 65px 0 -1px rgba(223,255,79,.58),
    -6px 104px 0 -1px rgba(223,255,79,.42),
    0 0 18px var(--acid);
}

.door-face {
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 50%, rgba(223,255,79,.22), transparent 11%),
    linear-gradient(125deg, #151717 0%, #070808 48%, #1d201b 100%);
}

.door-face::before {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(244,244,240,.13);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(244,244,240,.08) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(244,244,240,.05) 50%, transparent 50.3%);
  content: "";
}

.door-core {
  position: absolute;
  top: 48%;
  right: 12%;
  width: 14px;
  height: 14px;
  border: 3px solid var(--acid);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(223,255,79,.1), 0 0 28px rgba(223,255,79,.7);
  transform: translateY(-50%);
}

.capability-livebar > span,
.panel-index,
.section-label {
  font-family: var(--font-club);
  letter-spacing: .04em;
}

.capability-widget > span {
  display: inline-flex;
  padding: 8px 11px;
  border: 1px solid rgba(244,244,240,.14);
  border-radius: var(--radius-full);
  font-family: var(--font-club);
  font-size: 10px;
  letter-spacing: .08em;
}

.case-stage-v2 {
  grid-template-columns: minmax(220px,.34fr) minmax(0,900px);
}

.case-slide {
  isolation: isolate;
  overflow: hidden;
}

/* Кольцо живёт целиком внутри карточки: у .case-slide стоит overflow:hidden, и всё,
   что выходит за край, режется в обрывки дуг — «полоски раздробленные» Руслана 12.08.
   Внешний радиус (круг + 44px теней) обязан помещаться в карточку на 320px. */
.case-slide::after {
  position: absolute;
  right: 56px;
  bottom: 48px;
  z-index: -1;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(11,12,13,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(11,12,13,.035), 0 0 0 44px rgba(11,12,13,.025);
  content: "";
}

.case-person {
  grid-template-columns: auto 1fr;
}

.case-person > img {
  width: 64px;
  height: 64px;
  border: 3px solid var(--acid);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(11,12,13,.18);
}

/* Маркер — фоном, а не text-decoration: подчёркивание iOS рвёт skip-ink'ом и
   на стыках строк полоса «заканчивается, как маркер» (Руслан, скрин 16.08).
   Сплошной цвет фоном даёт ровную полосу в каждой строке переноса;
   box-decoration-break — чтобы полоса не обрывалась на краях фрагментов. */
.case-slide blockquote strong {
  padding: 0 .08em;
  margin: 0 -.08em;
  background-image: linear-gradient(0deg, var(--acid), var(--acid));
  background-repeat: no-repeat;
  background-size: 100% .18em;
  background-position: 0 94%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.map-node {
  box-shadow: 0 18px 46px rgba(11,12,13,.13);
}

.map-mascot {
  z-index: 1;
}

.map-node {
  z-index: 2;
}

.subscription-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  overflow: visible;
}

.subscription-rail article {
  min-height: 250px;
  padding: 150px 20px 20px;
  border-radius: var(--radius-club-panel);
  background-color: rgba(255,255,255,.7);
  background-position: center top;
  background-size: 100% 142px;
  background-repeat: no-repeat;
  background-color: var(--paper);
  background-blend-mode: normal, luminosity;
  transition: transform var(--duration-stage) var(--ease-reveal), box-shadow var(--duration-stage) var(--ease-reveal);
}

.subscription-rail article:nth-child(1) { background-image: linear-gradient(180deg,transparent 64%,rgba(255,255,255,.96)),url("assets/membership/01-community.webp"); }
.subscription-rail article:nth-child(2) { background-image: linear-gradient(180deg,transparent 64%,rgba(223,255,79,.98)),url("assets/membership/02-courses.webp"); }
.subscription-rail article:nth-child(3) { background-image: linear-gradient(180deg,transparent 64%,rgba(255,255,255,.96)),url("assets/membership/03-materials.webp"); }
.subscription-rail article:nth-child(4) { background-image: linear-gradient(180deg,transparent 64%,rgba(255,255,255,.96)),url("assets/membership/04-channel.webp"); }
.subscription-rail article:nth-child(5) { background-image: linear-gradient(180deg,transparent 64%,rgba(255,255,255,.96)),url("assets/membership/05-use-cases.webp"); }
.subscription-rail article:nth-child(6) { background-image: linear-gradient(180deg,transparent 64%,rgba(255,255,255,.96)),url("assets/membership/06-chat.webp"); }
.subscription-rail article:nth-child(7) { background-image: linear-gradient(180deg,transparent 64%,rgba(223,255,79,.98)),url("assets/membership/07-events.webp"); }
.subscription-rail article:nth-child(8) { background-image: linear-gradient(180deg,transparent 64%,rgba(255,255,255,.96)),url("assets/membership/08-workshops.webp"); }
.subscription-rail article:nth-child(9) { background-image: linear-gradient(180deg,transparent 64%,rgba(255,255,255,.96)),url("assets/membership/09-platform.webp"); }

.subscription-rail article:hover,
.subscription-rail article:focus-within {
  z-index: 2;
  transform: translateY(-8px) rotate(-.35deg);
  box-shadow: 0 30px 70px rgba(11,12,13,.16);
}

.subscription-rail article > span {
  display: none;
}

.subscription-rail article::after {
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--acid);
  box-shadow: 0 10px 22px rgba(11,12,13,.18);
  font: 700 17px/1 var(--font-club);
}

.price-grid-v2 {
  gap: 12px;
}

.price-card-v2 {
  min-height: 560px;
  border-radius: var(--radius-club-panel);
  background:
    radial-gradient(circle at 80% 8%, rgba(223,255,79,.12), transparent 26%),
    linear-gradient(150deg, #1d1f1f, #090a0a 68%);
  box-shadow: inset 0 1px rgba(255,255,255,.11), 0 30px 70px rgba(11,12,13,.16);
}

.price-card-acid {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 6%, rgba(255,255,255,.65), transparent 25%),
    var(--acid);
}

.price-card-v2 h3 {
  margin-top: 62px;
}

.price-value {
  font-size: clamp(48px, 4.2vw, 70px);
  letter-spacing: -.075em;
}

.price-card-v2 > a {
  min-height: 62px;
  margin-top: auto;
}

.price-card-v2:not(.price-card-acid) > a {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
}

.faq-shell-v2 {
  gap: clamp(44px, 8vw, 126px);
}

.faq-heading h2 {
  font-size: clamp(52px, 6.3vw, 100px);
  line-height: .92;
}

.faq-list details {
  border-radius: var(--radius-club-control);
  transition: transform var(--duration-base) var(--ease-swift), background var(--duration-base) var(--ease-swift);
}

.faq-list details[open] {
  transform: translateX(-8px);
}

.faq-list summary i {
  color: var(--paper);
  background: var(--ink);
}

.quiz-result-actions {
  flex-wrap: wrap;
}

.quiz-join-link {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(244,244,240,.24);
  border-radius: var(--radius-full);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .hero-copy {
    max-width: 67vw;
  }

  .hero-copy h1 {
    font-size: clamp(66px, 7.3vw, 92px);
  }

  .subscription-rail {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .price-grid-v2 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .hero-copy {
    max-width: min(800px, 80vw);
  }

  .hero-note {
    max-width: 560px;
    margin-inline: auto;
  }

  .door-scene {
    right: -3vw;
    width: 118px;
  }
}

@media (max-width: 980px) {
  .hero-copy {
    max-width: 72vw;
  }

  .hero-copy h1 {
    font-size: clamp(58px, 7.4vw, 76px);
  }

  .door-scene {
    right: -1vw;
  }

  .universe-panel {
    grid-template-columns: 1fr;
  }

  .subscription-rail {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .case-stage-v2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .desktop-nav {
    display: none;
  }

  .header-cta {
    display: inline-flex;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-full);
  }

  .header-cta span {
    font-size: 9px;
  }

  .portal-story {
    min-height: 1180px;
  }

  .portal-stage {
    min-height: 100svh;
  }

  .hero-shell {
    align-items: flex-start;
    padding-top: 118px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(48px, 14vw, 64px);
    line-height: .9;
  }

  .hero-note {
    max-width: 94%;
    font-size: 14px;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .primary-button,
  .hero-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }

  .door-scene {
    top: 82%;
    width: 108px;
  }

  .inside-scene h2 {
    font-size: clamp(38px, 11vw, 56px);
  }

  .universe-switcher {
    position: static;
  }

  .universe-panels {
    gap: 18px;
    padding-bottom: 0;
  }

  .universe-panel,
  .universe-panel[hidden] {
    position: relative;
    top: auto;
    min-height: 0;
    opacity: 1;
    transform: none;
  }

  .case-slide {
    position: relative;
    top: auto;
    min-height: 430px;
    padding: 34px 20px;
  }

  .case-slide,
  .case-slide.is-past,
  .case-slide.is-current {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .case-reel {
    gap: 14px;
    padding-bottom: 0;
  }

  .case-person > img {
    width: 56px;
    height: 56px;
  }

  .miro-map-story {
    height: auto;
    min-height: 0;
    margin-top: 42px;
  }

  .miro-map {
    position: relative;
    top: auto;
    display: grid;
    gap: 12px;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 18px;
  }

  .miro-map > svg,
  .map-mascot {
    display: none;
  }

  .map-node {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 170px;
    transform: none;
  }

  .subscription-rail {
    display: flex;
    gap: 10px;
    margin-right: -20px;
    padding-right: 20px;
    overflow-x: auto;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
  }

  .subscription-rail article {
    flex: 0 0 84%;
    min-height: 250px;
    scroll-snap-align: center;
  }

  .price-grid-v2 {
    grid-template-columns: 1fr;
  }

  .price-card-v2 {
    min-height: 500px;
  }

  .faq-list details[open] {
    transform: none;
  }

  .quiz-result-actions {
    align-items: stretch;
  }

  .quiz-result-actions > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-rail article {
    transition: none;
  }
}

/* 2026-07-28: Notion 25.07 completion pass and responsive corrections. */
[hidden] {
  display: none !important;
}

.site-header {
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(430px, 560px) minmax(210px, auto);
  gap: clamp(12px, 2vw, 34px);
  width: 100%;
  padding-inline: clamp(18px, 3vw, 58px);
}

.brand,
.header-cta,
.desktop-nav {
  min-width: 0;
}

.desktop-nav {
  position: static;
  width: 100%;
  justify-self: center;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
}

.nav-side {
  min-width: 0;
}

.desktop-nav a {
  white-space: nowrap;
}

.header-cta {
  justify-self: end;
  white-space: nowrap;
}

.site-header:not(.is-dark) {
  background: linear-gradient(180deg, rgba(243, 240, 232, .94), rgba(243, 240, 232, .82));
  box-shadow: 0 10px 30px rgba(11, 12, 13, .035);
  backdrop-filter: blur(16px) saturate(115%);
}

.hero-shell {
  justify-content: center;
  text-align: center;
}

.hero-copy {
  width: min(1040px, 79vw);
  max-width: none;
  margin-inline: auto;
  align-items: center;
}

.hero-copy h1 {
  max-width: 1040px;
  margin-inline: auto;
  font-size: clamp(72px, 7vw, 120px);
}

.hero-note {
  margin-inline: auto;
}

.hero-actions {
  justify-content: center;
}

.door-frame::before,
.door-frame::after,
.door-core,
.door-orbit,
.door-glow,
.door-caption {
  display: none;
}

.door-face {
  background: linear-gradient(132deg, #171918 0%, #070808 58%, #151616 100%);
}

.door-face::before {
  inset: 5%;
  border-color: rgba(244, 244, 240, .08);
  background: none;
}

.inside-scene {
  padding: clamp(112px, 14vh, 166px) clamp(32px, 7vw, 112px) 52px;
  text-align: center;
}

.inside-scene h2 {
  max-width: 1120px;
  margin-inline: auto;
}

.inside-note {
  max-width: 620px;
  margin-inline: auto;
}

.capability-board {
  gap: 14px;
  margin-top: clamp(42px, 6vw, 84px);
}

.capability-widget {
  min-height: 390px;
  justify-content: space-between;
}

.capability-widget > strong {
  max-width: 12ch;
  font-size: clamp(32px, 3.1vw, 52px);
  line-height: .96;
}

.outcomes-heading-v2 {
  display: block;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.outcomes-heading-v2 h2 {
  margin-inline: auto;
}

.outcomes-heading-v2 p {
  max-width: 34ch;
  margin-top: 22px;
  margin-inline: auto;
}

.reviews-channel-link {
  display: inline-flex;
  margin-top: 22px;
  padding: 12px 18px;
  border: 1px solid rgba(244, 244, 240, .18);
  border-radius: 999px;
  color: var(--acid);
  font-size: 13px;
  font-weight: 750;
}

.quiz-question > h2,
.quiz-option,
.quiz-option strong {
  color: var(--ink);
}

.quiz-result-list a {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(11, 12, 13, .16);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(11, 12, 13, .045);
  font-size: 13px;
  font-weight: 650;
}

.quiz-result-list a::before {
  color: var(--accent-on-light);
  content: "→";
}

.quiz-result-list a i {
  margin-left: auto;
  color: var(--accent-on-light);
  font-style: normal;
}

.quiz-result .quiz-join-link {
  color: var(--ink);
  border-color: rgba(11, 12, 13, .22);
  background: rgba(11, 12, 13, .045);
}

.case-stage-v2 {
  display: block;
  width: min(920px, 100%);
  margin-inline: auto;
}

.case-reel {
  width: 100%;
}

.case-slide {
  width: 100%;
  margin-inline: auto;
}

.faq-list summary > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(11, 12, 13, .13);
  border-radius: 50%;
  color: var(--muted-on-light);
  font-size: 11px;
  font-weight: 700;
}

.map-node-three::after {
  display: block;
  margin-top: 16px;
  padding: 9px 11px;
  border: 1px solid rgba(11, 12, 13, .12);
  border-radius: 10px;
  color: var(--muted-on-light);
  background: rgba(255, 255, 255, .48);
  font: 700 9px/1.2 var(--font-club);
  letter-spacing: .08em;
  content: "AGENT 01  ·  AGENT 02  ·  MEMORY";
}

.subscription-rail article {
  cursor: default;
}

.community-finale {
  position: relative;
  min-height: max(800px, 100svh);
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 255, 255, 1) 0 22%, rgba(255, 255, 255, .88) 38%, transparent 64%),
    #f5f5f3;
}

.community-finale-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  width: min(660px, 72vw);
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate(-50%, -48%);
}

.community-logo {
  display: grid;
  width: clamp(108px, 10vw, 156px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 22px 60px rgba(11, 12, 13, .18);
}

.community-logo svg {
  width: 34%;
  height: 52%;
}

.community-finale-copy h2 {
  margin: 24px 0 0;
  font-size: clamp(56px, 6.5vw, 102px);
  line-height: .9;
  letter-spacing: -.065em;
}

.community-finale-copy p {
  margin: 16px 0 0;
  color: var(--muted-on-light);
  font-size: clamp(18px, 2vw, 30px);
}

.community-finale-copy > a {
  display: inline-flex;
  min-height: 74px;
  margin-top: 34px;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(24px, 3vw, 44px);
  border: 1px solid rgba(11, 12, 13, .08);
  border-radius: 24px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 20px 52px rgba(11, 12, 13, .11);
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 650;
  transition: transform var(--duration-base) var(--ease-swift), box-shadow var(--duration-base) var(--ease-swift);
}

.community-finale-copy > a:hover,
.community-finale-copy > a:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(11, 12, 13, .16);
}

.community-finale .site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  color: var(--muted-on-light);
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: minmax(126px, auto) minmax(410px, 520px);
  }

  .header-cta {
    display: none;
  }

  .hero-copy {
    width: min(880px, 88vw);
    max-width: none;
  }

  .hero-copy h1 {
    font-size: clamp(66px, 7.7vw, 92px);
  }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
    padding-inline: 18px;
  }

  .desktop-nav {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 2px;
  }

  .desktop-nav a {
    padding-inline: 8px;
    font-size: 10px;
  }

  .hero-copy {
    width: min(760px, 88vw);
    max-width: none;
  }

  .inside-scene h2 {
    font-size: clamp(48px, 7vw, 72px);
  }

  .capability-board {
    grid-template-columns: 1fr;
  }

  .capability-widget {
    min-height: 330px;
  }

  .capability-widget > strong {
    max-width: 18ch;
  }
}

@media (max-width: 767px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    padding-inline: 14px;
  }

  .header-cta {
    display: inline-flex;
  }

  .header-cta span {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .portal-story {
    min-height: 1280px;
  }

  .hero-shell {
    align-items: flex-start;
    padding: 104px 18px 32px;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
  }

  .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(44px, 12.3vw, 62px);
    line-height: .91;
    letter-spacing: -.065em;
  }

  .hero-note {
    max-width: 34ch;
    margin-top: 24px;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .primary-button,
  .hero-actions .secondary-button {
    min-height: 52px;
  }

  .door-scene {
    top: 79%;
    right: 50%;
    width: 92px;
    transform: translate(50%, -50%);
  }

  .inside-scene {
    inset: 0;
    display: flex;
    padding: 92px 18px 28px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    overflow-y: auto;
  }

  .inside-kicker {
    margin: 0;
    font-size: 9px;
  }

  .inside-scene h2 {
    margin: 0;
    font-size: clamp(38px, 10.8vw, 52px);
    line-height: .91;
  }

  .inside-note {
    margin: 4px auto 8px;
    font-size: 13px;
  }

  .universe-panel {
    gap: 24px;
    padding: 24px 16px;
  }

  .universe-visual {
    min-height: 470px;
  }

  .outcomes-heading-v2 h2 {
    font-size: clamp(48px, 12vw, 66px);
  }

  .case-slide {
    min-height: 360px;
  }

  .community-finale {
    min-height: 844px;
  }

  .community-finale-copy {
    width: min(350px, 88vw);
    padding: 24px 12px;
    border-radius: 36px;
    background: rgba(245, 245, 243, .88);
    box-shadow: 0 0 54px 42px rgba(245, 245, 243, .88);
    backdrop-filter: blur(7px);
  }

  .community-logo {
    width: 96px;
  }

  .community-finale-copy h2 {
    margin-top: 20px;
    font-size: clamp(48px, 14vw, 64px);
  }

  .community-finale-copy p {
    max-width: 14ch;
    font-size: 18px;
  }

  .community-finale-copy > a {
    min-height: 62px;
    margin-top: 26px;
    padding-inline: 20px;
    border-radius: 20px;
    font-size: 15px;
  }

  .community-finale .site-footer {
    padding-inline: 16px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-finale-copy > a,
  .feedback-shot,
  .depth-card {
    transition: none;
    transform: none;
  }
}

.membership-carousel {
  position: relative;
  left: 50%;
  width: min(1500px, calc(100vw - 32px));
  margin: clamp(46px,7vw,94px) 0 0;
  overflow: hidden;
  transform: translateX(-50%);
}

.subscription-rail {
  display: flex;
  gap: clamp(12px,1.5vw,22px);
  align-items: flex-start;
  margin: 0;
  padding: 42px max(20px,calc((100% - 470px) / 2)) 88px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 50%;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  perspective: 1300px;
  cursor: grab;
}

.subscription-rail::-webkit-scrollbar {
  display: none;
}

/* 2026-08-10, focus-group fix (issue 03): cursor feedback for the mouse drag-to-pan added
   in script.js (pointerdown/pointermove/pointerup on [data-membership-rail], pointerType
   !== 'touch' only — native touch panning already worked and is untouched, so nothing here
   is gated on prefers-reduced-motion; a cursor swap is not the kind of motion that flag is
   about, and the drag itself must keep working with it on regardless). */
.subscription-rail.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}

.subscription-rail.is-dragging article {
  cursor: grabbing;
}

.subscription-rail article {
  flex: 0 0 clamp(330px,33vw,470px);
  min-height: 360px;
  padding: 224px 28px 28px;
  scroll-snap-align: center;
  border-color: rgba(11,12,13,.15);
  border-radius: 34px;
  background-position: center top;
  background-size: 100% 210px;
  box-shadow: 0 24px 56px rgba(11,12,13,.1);
  opacity: .66;
  cursor: pointer;
  transform: translateY(var(--card-y,96px)) rotate(var(--card-rotate,0deg)) scale(var(--card-scale,.78));
  transform-origin: 50% 15%;
  transition:
    transform 620ms var(--ease-reveal),
    opacity 280ms ease,
    box-shadow 360ms ease,
    border-color 280ms ease;
}

.subscription-rail article::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(125deg,rgba(255,255,255,.58),transparent 34%,rgba(11,12,13,.04));
  content: "";
  pointer-events: none;
}

.subscription-rail article.is-current {
  z-index: 3;
  border-color: rgba(11,12,13,.32);
  box-shadow: 0 38px 90px rgba(11,12,13,.18), 0 0 0 3px rgba(223,255,79,.72);
  opacity: 1;
}

.subscription-rail article:not(.is-current):hover,
.subscription-rail article:not(.is-current):focus-visible {
  opacity: .9;
}

.subscription-rail article > strong {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(23px,2vw,31px);
  line-height: .98;
  letter-spacing: -.045em;
}

.subscription-rail article > small {
  max-width: 32ch;
  font-size: 13px;
  line-height: 1.45;
}

.membership-carousel-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 5;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 16px;
  padding: 6px;
  border: 1px solid rgba(11,12,13,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 40px rgba(11,12,13,.12);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.membership-carousel-controls button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--acid);
  cursor: pointer;
}

.membership-carousel-controls button:disabled {
  opacity: .28;
  cursor: default;
}

.membership-carousel-controls span {
  min-width: 58px;
  color: var(--muted-on-light);
  font: 750 10px/1 var(--font-club);
  letter-spacing: .12em;
  text-align: center;
}

.community-finale {
  background: #f4f6f7;
}

.community-mosaic {
  position: absolute;
  inset: clamp(80px,9vh,102px) 0 clamp(64px,7vh,82px);
  width: 100%;
  height: calc(100% - clamp(144px,16vh,184px));
  object-fit: cover;
  object-position: center;
}

.community-finale-copy {
  padding: 30px 44px 38px;
  border-radius: 42px;
  background: rgba(246,248,249,.82);
  box-shadow: 0 0 72px 52px rgba(246,248,249,.86);
  backdrop-filter: blur(10px);
}

section[id] {
  scroll-margin-top: 96px;
}

.interior-bg {
  inset: 0;
}

@media (max-width: 900px) {

  .membership-carousel {
    width: calc(100% + 32px);
    max-width: none;
  }
}

@media (max-width: 767px) {

  .membership-carousel {
    margin-top: 34px;
  }

  .subscription-rail {
    gap: 10px;
    padding: 28px calc((100% - 82vw) / 2) 78px;
  }

  .subscription-rail article {
    flex-basis: 82vw;
    min-height: 310px;
    padding: 186px 22px 22px;
    border-radius: 28px;
    background-size: 100% 174px;
  }

  .subscription-rail article > strong {
    font-size: 25px;
  }

  .membership-carousel-controls {
    bottom: 8px;
  }

  .community-mosaic {
    inset: 72px 0 66px;
    height: calc(100% - 138px);
    object-fit: cover;
  }

  .community-finale-copy {
    width: min(350px,88vw);
    padding: 24px 12px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-rail article,
  .membership-carousel-controls button,
  .trial-node {
    transition: none;
  }
}

/* 2026-07-28: geometry, scroll story and feedback pass. */
@media (min-width: 768px) {
  .site-header {
    grid-template-columns: 1fr minmax(430px, 560px) 1fr;
  }

  .brand { justify-self: start; }
  .desktop-nav { justify-self: center; }
  .header-cta { justify-self: end; }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .site-header {
    grid-template-columns: 1fr minmax(410px, 520px) 1fr;
  }
}

.portal-story {
  height: 300vh;
}

.portal-stage {
  background:
    radial-gradient(circle at 76% 48%, rgba(223, 255, 79, calc(.04 + var(--approach) * .08)), transparent 28%),
    linear-gradient(115deg, rgba(255,255,255,.66), transparent 38%),
    var(--paper);
}

.portal-stage::before,
.portal-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.portal-stage::before {
  z-index: 0;
  opacity: calc(.18 + var(--approach) * .34);
  background:
    linear-gradient(90deg, transparent 49.94%, rgba(11,12,13,.09) 50%, transparent 50.06%),
    linear-gradient(transparent 49.94%, rgba(11,12,13,.07) 50%, transparent 50.06%);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 70% 48%, #000, transparent 58%);
  transform: perspective(900px) rotateX(calc(56deg - var(--approach) * 34deg)) scale(calc(1.1 + var(--approach) * .24));
  transform-origin: 70% 72%;
}

.portal-stage::after {
  z-index: 4;
  opacity: calc(var(--enter) * .72);
  background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(5,6,6,.78) 82%);
}

.hero-shell {
  padding-bottom: 11vh;
  opacity: clamp(0, calc(1 - var(--approach) * 1.55), 1);
  transform: translate3d(0, calc(var(--approach) * -22px), 0) scale(calc(1 - var(--approach) * .06));
  transform-origin: 50% 45%;
}

.hero-copy {
  width: min(1180px, 82vw);
}

.hero-copy h1 {
  display: grid;
  justify-items: center;
  max-width: 1180px;
  margin: 0 auto;
  font-size: clamp(70px, 7.1vw, 124px);
  line-height: .82;
  letter-spacing: -.073em;
  text-wrap: balance;
}

.hero-line {
  display: block;
  white-space: nowrap;
}

.hero-line-outcome {
  margin-top: .22em;
  font-size: .53em;
  font-weight: 720;
  line-height: .96;
  letter-spacing: -.052em;
}

.hero-note {
  max-width: 760px;
  margin-top: 34px;
}

.hero-free-cta {
  position: relative;
  min-width: 310px;
  justify-content: center;
  padding-inline: 54px;
}

.hero-free-cta .button-icon {
  position: absolute;
  right: 9px;
}

.hero-shell {
  opacity: clamp(0, calc(1 - var(--hero-exit)), 1);
  transform: translate3d(0, calc(var(--hero-exit) * -22px), 0) scale(calc(1 - var(--hero-exit) * .045));
  transform-origin: 50% 46%;
}

.interior-bg {
  clip-path: circle(var(--iris) at var(--door-x, 28%) 52%);
}

.door-scene {
  top: 51%;
  right: clamp(18px, 3vw, 44px);
  width: clamp(210px, 18vw, 338px);
  opacity: clamp(0, calc(1 - var(--reveal) * 1.18 + var(--enter) * .18), 1);
  transform:
    translate3d(calc(var(--approach) * -56vw), calc(-50% - var(--approach) * 2vh), 0)
    scale(calc(.44 + var(--approach) * .75 + var(--enter) * 5.3))
    rotateX(var(--my))
    rotateY(var(--mx));
}

.door-frame::before,
.door-frame::after,
.door-core,
.door-orbit,
.door-glow {
  display: block;
}

.door-caption {
  display: none;
}

.door-rig {
  /* Acid-свечение (второй drop-shadow на --open) здесь не воспроизводится: оно и до
     перевода на box-shadow было мертво — это объявление целиком перебивалось более
     поздним .door-rig на ~6440, а на ≤767 ещё и перф-патчем в хвосте файла. */
  box-shadow: 0 54px 74px rgba(0,0,0,.36);
}

.door-frame {
  border-width: 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 18% 82%, rgba(0,0,0,.36)),
    #0a0b0b;
}

.door-slab {
  transform: rotateY(calc(var(--open) * -88deg));
}

.threshold-light {
  background:
    linear-gradient(135deg, #f7f7f2 0%, #eef7d1 52%, var(--acid) 100%);
  box-shadow: 0 0 calc(18px + var(--open) * 72px) rgba(223,255,79,calc(var(--open) * .42));
}

.inside-scene {
  align-items: flex-end;
  justify-content: center;
  padding: clamp(112px, 14vh, 166px) clamp(34px, 7vw, 112px) 52px 47vw;
  text-align: left;
  opacity: clamp(0, calc(var(--reveal) * 1.7), 1);
  transform: translate3d(calc((1 - var(--reveal)) * 34px), 0, 0) scale(calc(.94 + var(--reveal) * .06));
}

.inside-scene h2,
.inside-note {
  margin-inline: 0;
}

.inside-scene h2 {
  max-width: 790px;
  font-size: clamp(48px, 5.5vw, 92px);
}

.inside-note {
  max-width: 520px;
}

.universe-panels {
  padding-bottom: max(52vh, 440px);
}

.universe-panel,
.universe-panel[hidden] {
  top: 188px;
}

.route-stage {
  display: grid;
  min-height: 500px;
  grid-template-columns: minmax(220px, .82fr) minmax(320px, 1.18fr);
  gap: 18px;
  align-items: center;
  perspective: 1200px;
}

.case-reel {
  padding-bottom: max(55vh, 440px);
}

.case-slide {
  top: max(112px, calc((100svh - 430px) / 2));
  min-height: 430px;
}

.roadmap-heading-v2,
.pricing-heading-v2 {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
}

.map-node {
  display: grid;
  min-height: 190px;
  align-content: center;
  justify-items: center;
  padding: 24px;
  text-align: center;
  opacity: .76;
}

.map-node span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--acid);
  font: 900 11px/1 var(--font-club);
  letter-spacing: .08em;
  box-shadow: 0 9px 18px rgba(11,12,13,.12);
}

.map-node strong {
  margin-top: 20px;
  font-size: clamp(22px, 1.7vw, 28px);
  line-height: 1.02;
}

.map-node small {
  max-width: 26ch;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.35;
}

.map-node.is-active {
  filter: drop-shadow(0 18px 22px rgba(9,10,10,.18));
}

.subscription-rail {
  --membership-card-width: clamp(330px, 33vw, 470px);
  padding-inline: max(20px, calc((100% - var(--membership-card-width)) / 2));
}

.subscription-rail article {
  flex-basis: var(--membership-card-width);
  transform:
    translateY(var(--card-y, 96px))
    translateZ(var(--card-z, 0px))
    rotateY(calc(var(--card-distance, 0) * -4deg))
    rotate(var(--card-rotate, 0deg))
    scale(var(--card-scale, .78));
}

.subscription-rail article.is-current {
  box-shadow:
    0 44px 100px rgba(11,12,13,.2),
    0 0 0 3px rgba(223,255,79,.82),
    inset 0 1px rgba(255,255,255,.7);
}

.price-badge-v2 {
  min-height: 58px;
  padding: 12px 16px;
  font-family: var(--font-club);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .07em;
  text-wrap: balance;
}

.faq-heading .section-label {
  color: #314900;
}

.faq-heading h2 span {
  color: #3a3e46;
}

.faq-list summary {
  grid-template-columns: 44px 1fr 48px;
}

.faq-list summary i {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  color: transparent;
  background: transparent;
  transition: transform 220ms var(--ease-swift);
}

.faq-list summary i::before,
.faq-list summary i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}

.faq-list summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-list details[open] summary i {
  transform: rotate(45deg);
}

@media (max-width: 980px) {
  .universe-panels,
  .case-reel {
    padding-bottom: 0;
  }

  .case-slide {
    top: auto;
    min-height: 0;
  }

  .route-stage {
    min-height: 0;
    grid-template-columns: 1fr 1.15fr;
  }
}

@media (max-width: 767px) {
  .portal-story {
    height: 230vh;
    min-height: 0;
  }

  .hero-shell {
    padding: 108px 18px 30vh;
  }

  .hero-copy h1 {
    display: block;
    font-size: clamp(44px, 12.3vw, 50px);
    line-height: .88;
  }

  .hero-line {
    display: block;
    white-space: normal;
  }

  .hero-line:first-child {
    white-space: nowrap;
  }

  .hero-line-outcome {
    margin-top: .26em;
    font-size: .6em;
    line-height: 1;
  }

  .hero-note {
    margin-top: 22px;
    font-size: 15px;
  }

  .hero-actions {
    display: grid;
    gap: 10px;
  }

  .hero-actions > a,
  .hero-free-cta {
    width: min(100%, 340px);
    min-width: 0;
    margin-inline: auto;
  }

  .door-scene {
    top: auto;
    right: 18px;
    bottom: -24px;
    width: 78px;
    transform:
      translate3d(calc(var(--approach) * -38vw), calc(var(--approach) * -24vh), 0)
      scale(calc(.75 + var(--approach) * .9 + var(--enter) * 4.7));
  }

  .inside-scene {
    align-items: center;
    justify-content: flex-start;
    padding: 118px 18px 28px;
    text-align: center;
  }

  .inside-scene h2 {
    font-size: clamp(42px, 12vw, 62px);
  }

  .inside-note {
    margin-inline: auto;
  }

  .route-stage {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .roadmap-heading-v2,
  .pricing-heading-v2 {
    grid-template-columns: 1fr;
  }

  .map-node {
    width: 86%;
    min-height: 184px;
  }

  .subscription-rail {
    --membership-card-width: 82vw;
    padding-inline: calc((100% - var(--membership-card-width)) / 2);
  }

  .faq-list summary {
    grid-template-columns: 34px 1fr 44px;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-story {
    height: 210vh;
  }

  .portal-stage::before,
  .portal-stage::after {
    transition: none;
  }
}

/* 2026-07-29: editorial channel-and-chat composition for the first universe panel. */
.context-copy-note {
  max-width: 42ch;
  margin: clamp(22px, 3vh, 34px) 0 0;
  color: rgba(244, 244, 240, .58);
  font: 600 clamp(14px, 1.08vw, 17px)/1.48 var(--font-club);
  text-wrap: balance;
}

.context-gallery {
  display: grid;
  min-height: 520px;
  grid-template-columns: 1fr;
  grid-template-rows: 1.08fr .92fr;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 8%, rgba(223, 255, 79, .08), transparent 30%),
    #0e100f;
}

.context-format-row {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(180px, .72fr) minmax(270px, 1.28fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  padding: clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .1);
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(244, 244, 240, .045), rgba(244, 244, 240, .018));
}

.context-format-chat {
  background:
    radial-gradient(circle at 78% 48%, rgba(223, 255, 79, .075), transparent 34%),
    rgba(244, 244, 240, .028);
}

.context-format-copy {
  position: relative;
  z-index: 5;
}

.context-format-copy > span {
  color: var(--acid);
  font: 850 9px/1 var(--font-club);
  letter-spacing: .12em;
}

.context-format-copy h4 {
  margin: 15px 0 0;
  color: var(--paper);
  font: 780 clamp(22px, 2vw, 31px)/.98 var(--font-club);
  letter-spacing: -.045em;
}

.context-format-copy p {
  max-width: 30ch;
  margin: 12px 0 0;
  color: rgba(244, 244, 240, .58);
  font: 580 clamp(12px, .95vw, 15px)/1.4 var(--font-club);
}

.context-channel-collage {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 190px;
  perspective: 1100px;
}

.channel-collage-card {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(244, 244, 240, .24);
  border-radius: 13px;
  background: #f2f3f4;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .42);
  transform-origin: center;
}

.channel-collage-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.context-member-cloud {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 160px;
}

.context-member {
  position: absolute;
  display: block;
  width: clamp(46px, 4.7vw, 66px);
  height: clamp(46px, 4.7vw, 66px);
  object-fit: cover;
  border: 3px solid #0f1110;
  border-radius: 50%;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .38);
}

.context-member-one { top: 4%; left: 38%; }
.context-member-two { top: 14%; left: 60%; }
.context-member-three { top: 38%; left: 20%; }
.context-member-four { top: 55%; left: 55%; }
.context-member-five { top: 46%; left: 76%; }

.context-member-logo {
  top: 34%;
  left: 43%;
  z-index: 3;
  display: grid;
  width: clamp(54px, 5.4vw, 76px);
  height: clamp(54px, 5.4vw, 76px);
  place-items: center;
  color: var(--paper);
  border-color: var(--acid);
  background: #050606;
}

.context-member-logo svg {
  width: 15px;
  height: 30px;
}

.context-message {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--acid);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  font: 760 clamp(9px, .75vw, 11px)/1 var(--font-club);
  white-space: nowrap;
}

.context-message-question {
  top: 2%;
  right: 0;
}

.context-message-answer {
  right: 4%;
  bottom: 0;
}

@media (max-width: 1180px) {
  .context-gallery {
    min-height: 590px;
  }

  .context-format-row {
    grid-template-columns: minmax(160px, .7fr) minmax(230px, 1.3fr);
    padding: 20px;
  }
}

@media (max-width: 980px) {
  .context-gallery {
    min-height: 560px;
  }

  .context-format-copy h4 {
    font-size: clamp(20px, 3.2vw, 26px);
  }
}

@media (max-width: 767px) {
  .context-gallery {
    display: grid;
    min-height: 620px;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 1.08fr .92fr;
    gap: 8px;
    padding: 8px;
    overflow: hidden;
    scroll-snap-type: none;
  }

  .context-format-row {
    grid-template-columns: minmax(110px, .8fr) minmax(150px, 1.2fr);
    gap: 8px;
    padding: 16px 12px;
    border-radius: 18px;
  }

  .context-format-copy > span {
    font-size: 7px;
  }

  .context-format-copy h4 {
    margin-top: 10px;
    font-size: 18px;
  }

  .context-format-copy p {
    margin-top: 9px;
    font-size: 10px;
    line-height: 1.34;
  }

  .context-channel-collage {
    min-height: 230px;
  }

  .context-member-cloud {
    min-height: 190px;
  }

  .context-member {
    width: 44px;
    height: 44px;
  }

  .context-member-logo {
    width: 52px;
    height: 52px;
  }

  .context-message {
    min-height: 26px;
    padding-inline: 9px;
    font-size: 8px;
  }

  .context-message-question {
    top: 0;
    right: -4px;
  }

  .context-message-answer {
    right: -2px;
  }
}

@media (prefers-reduced-motion: no-preference) {

  .universe-panel.is-active .context-member {
    animation: contextMemberIn 520ms var(--ease-reveal) both;
  }

  .universe-panel.is-active .context-member:nth-of-type(2) { animation-delay: 70ms; }
  .universe-panel.is-active .context-member:nth-of-type(3) { animation-delay: 130ms; }
  .universe-panel.is-active .context-member:nth-of-type(4) { animation-delay: 190ms; }
  .universe-panel.is-active .context-member:nth-of-type(5) { animation-delay: 250ms; }
  .universe-panel.is-active .context-member:nth-of-type(6) { animation-delay: 310ms; }
}

@keyframes contextCardSettle {
  from { opacity: 0; transform: translate3d(34px, 20px, -80px) rotateY(-10deg) rotateZ(3deg); }
}

@keyframes contextCardSettleLeft {
  from { opacity: 0; transform: translate3d(-36px, 26px, -50px) rotateY(10deg) rotateZ(-5deg); }
}

@keyframes contextCardSettleEvent {
  from { opacity: 0; transform: translate3d(0, -20px, -60px) rotateZ(2deg); }
}

@keyframes contextMemberIn {
  from { opacity: 0; transform: translateY(14px) scale(.72); }
}

/* 2026-07-28: real product theater for the System scene. */
.platform-theater {
  --platform-index: 0;
  position: relative;
  display: grid;
  align-content: center;
  min-height: 520px;
  gap: 11px;
  padding: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  border: 1px solid rgba(203, 255, 54, .32);
  border-radius: var(--radius-club-panel);
  background:
    radial-gradient(circle at 82% 3%, rgba(203, 255, 54, .12), transparent 31%),
    linear-gradient(155deg, rgba(255, 255, 255, .035), transparent 38%),
    #0a0c0b;
  box-shadow: var(--shadow-club-product);
}

.platform-theater::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000, transparent 62%);
}

.platform-theater > * {
  position: relative;
  z-index: 1;
}

.platform-theater-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(244, 244, 240, .58);
  font: 750 9px/1 var(--font-club);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.platform-theater-topline > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.platform-theater-topline i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 4px rgba(203, 255, 54, .08), 0 0 14px rgba(203, 255, 54, .42);
}

.platform-theater-topline strong {
  color: var(--paper);
  font: inherit;
}

.platform-theater-viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .16);
  border-radius: calc(var(--radius-club-panel) - 7px);
  background: #151816;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: perspective(1100px) rotateX(.4deg);
  transform-origin: center bottom;
}

.platform-browser-bar {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 62px;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(244, 244, 240, .1);
  color: rgba(244, 244, 240, .5);
  background: #0e100f;
  font: 650 8px/1 var(--font-club);
  letter-spacing: .08em;
}

.platform-browser-bar > span {
  display: flex;
  gap: 5px;
}

.platform-browser-bar > span i {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(244, 244, 240, .3);
  border-radius: 50%;
}

.platform-browser-bar b {
  justify-self: center;
  width: min(72%, 260px);
  padding: 6px 14px;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .09);
  border-radius: 99px;
  color: rgba(244, 244, 240, .5);
  background: rgba(255, 255, 255, .025);
  font: inherit;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-browser-bar em {
  justify-self: end;
  color: var(--acid);
  font: 800 7px/1 var(--font-club);
  letter-spacing: .12em;
}

.platform-theater-screens {
  position: relative;
  aspect-ratio: 1913 / 966;
  overflow: hidden;
  background: #1a1d1b;
}

.platform-theater-screens figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.985);
  transition:
    opacity var(--duration-stage) var(--ease-reveal),
    transform var(--duration-stage) var(--ease-reveal);
}

.platform-theater-screens figure.is-active {
  z-index: 1;
  opacity: 1;
  transform: none;
}

.platform-theater-screens img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #1a1d1b;
}

.platform-theater-glint {
  position: absolute;
  top: 36px;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 32%;
  background: linear-gradient(108deg, transparent, rgba(255, 255, 255, .045), transparent);
  pointer-events: none;
  transform: translateX(38%);
}

.platform-theater-controls {
  display: grid;
  /* 4 вкладки с 21.08 (экран «Видео») — одна строка на десктопе */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(244, 244, 240, .12);
  border-radius: calc(var(--radius-club-panel) - 5px);
  background: rgba(255, 255, 255, .025);
}

.platform-theater-controls button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  min-width: 0;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-club-panel) - 11px);
  color: rgba(244, 244, 240, .54);
  background: transparent;
  font-family: var(--font-club);
  text-align: left;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-swift),
    background var(--duration-fast) var(--ease-swift),
    border-color var(--duration-fast) var(--ease-swift),
    transform var(--duration-fast) var(--ease-swift);
}

.platform-theater-controls button:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, .045);
}

.platform-theater-controls button:active {
  transform: scale(.985);
}

.platform-theater-controls button.is-active {
  border-color: var(--acid);
  color: var(--ink);
  background: var(--acid);
  box-shadow: 0 12px 28px rgba(203, 255, 54, .12);
}

.platform-theater-controls button > span {
  grid-row: 1 / 3;
  margin: 2px 9px 0 0;
  font: 800 8px/1 var(--font-club);
  letter-spacing: .08em;
}

.platform-theater-controls button > strong {
  overflow: hidden;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-theater-controls button > small {
  margin-top: 4px;
  overflow: hidden;
  font-size: 8px;
  font-weight: 650;
  line-height: 1.15;
  opacity: .72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-theater-progress {
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(244, 244, 240, .1);
}

.platform-theater-progress i {
  display: block;
  width: calc(100% / 3);
  height: 100%;
  border-radius: inherit;
  background: var(--acid);
  transform: translateX(calc(var(--platform-index) * 100%));
  transition: transform var(--duration-stage) var(--ease-reveal);
}

@media (max-width: 1180px) {
  .platform-theater {
    min-height: 490px;
  }

  .platform-theater-controls button {
    min-height: 68px;
    padding-inline: 9px;
  }

  .platform-theater-controls button > small {
    display: none;
  }
}

@media (max-width: 980px) {
  .platform-theater {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .platform-theater {
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-club-card);
  }

  .platform-theater-topline {
    letter-spacing: .08em;
  }

  .platform-browser-bar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    height: 30px;
    padding-inline: 8px;
  }

  .platform-browser-bar b {
    width: 86%;
    padding-block: 5px;
  }

  .platform-theater-glint {
    top: 30px;
  }

  .platform-theater-controls {
    /* На узких экранах 4 вкладки в строку не читаются — 2x2 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
  }

  .platform-theater-controls button {
    display: flex;
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    border-radius: 10px;
    text-align: center;
  }

  .platform-theater-controls button > span {
    margin: 0;
  }

  .platform-theater-controls button > strong {
    width: 100%;
    font-size: 11px;
  }

  .platform-theater-controls button > small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-theater-screens figure,
  .platform-theater-controls button,
  .platform-theater-progress i {
    transition: none;
  }

  .platform-theater-viewport {
    transform: none;
  }
}

/* 2026-07-28: architectural portal and disciplined context gallery. */
.portal-story {
  height: 340vh;
}

.portal-stage {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .72), transparent 42%),
    linear-gradient(#f5f4ee, #f0efe8);
}

.portal-stage::after {
  z-index: 5;
  opacity: var(--bridge);
  background:
    linear-gradient(110deg, #101211, #171a18 58%, #090a09);
}

.door-scene {
  top: 52%;
  right: auto;
  left: var(--door-x, 28%);
  z-index: 7;
  width: clamp(230px, 18vw, 340px);
  opacity: clamp(0, calc(var(--door-intro) * 1.8), 1);
  transform:
    translate3d(-50%, -50%, 0)
    scale(calc(.72 + var(--approach) * 1.05 + var(--enter) * 4.2));
  transform-origin: 50% 50%;
}

.portal-atmosphere {
  display: none;
}

.portal-corridor {
  display: none;
}

.corridor-ring {
  position: absolute;
  inset: 14% 30%;
  border: 1px solid rgba(203, 255, 54, .2);
  box-shadow:
    inset 0 0 38px rgba(203, 255, 54, .035),
    0 0 34px rgba(203, 255, 54, .025);
  transform-origin: center;
}

.corridor-ring-one {
  transform: scale(calc(1.1 + var(--open) * .42));
}

.corridor-ring-two {
  opacity: .66;
  transform: scale(calc(1.5 + var(--open) * .58));
}

.corridor-ring-three {
  opacity: .32;
  transform: scale(calc(2 + var(--open) * .78));
}

.corridor-floor {
  position: absolute;
  right: 14%;
  bottom: 5%;
  left: 14%;
  height: 31%;
  opacity: calc(.18 + var(--open) * .5);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(203, 255, 54, .22) 50%, transparent 50.3%),
    repeating-linear-gradient(90deg, rgba(244, 244, 240, .07) 0 1px, transparent 1px 18%);
  clip-path: polygon(39% 0, 61% 0, 100% 100%, 0 100%);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: center bottom;
}

.corridor-light {
  position: absolute;
  inset: 8% 37%;
  background: linear-gradient(to bottom, rgba(203, 255, 54, .28), rgba(203, 255, 54, .02));
  filter: blur(24px);
  opacity: calc(var(--open) * .68);
}

.door-rig {
  inset: 5%;
  box-shadow: 0 54px 72px rgba(0, 0, 0, .42);
}

.door-frame {
  overflow: visible;
  border-width: 3px;
  border-color: rgba(244, 244, 240, calc(.34 + var(--enter) * .34));
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 14px 0 0 rgba(8, 10, 9, .94),
    inset -14px 0 0 rgba(8, 10, 9, .94),
    inset 0 14px 0 rgba(8, 10, 9, .94),
    0 0 0 1px rgba(11, 12, 13, .86),
    0 44px 110px rgba(11, 12, 13, .48);
}

.door-frame::before {
  display: none;
}

.door-frame::after {
  display: none;
}

.door-slab {
  opacity: clamp(0, calc(1 - var(--enter) * 1.35), 1);
  transform: rotateY(calc(var(--open) * -94deg));
}

.door-face {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .07), transparent 26%),
    linear-gradient(135deg, #171918, #050606 58%, #151716);
}

.door-core {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(244, 244, 240, .9);
  background: transparent;
  box-shadow: none;
}

.threshold-light {
  inset: 4%;
  opacity: clamp(0, calc(.12 + var(--open) * .7 - var(--enter) * .72), .82);
  background: linear-gradient(145deg, rgba(249, 248, 241, .94), rgba(205, 205, 198, .72) 48%, rgba(35, 37, 35, .82));
  box-shadow: inset 0 0 60px rgba(255, 255, 255, .2);
}

.threshold-light::before,
.threshold-light::after {
  display: none;
}

.door-depth {
  opacity: clamp(.2, calc(1 - var(--enter) * .72), 1);
}

.door-caption {
  bottom: -34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(11, 12, 13, .62);
  opacity: clamp(0, calc(1 - var(--approach) * 2.1), 1);
}

.door-caption span {
  margin: 0;
  color: inherit;
}

.door-caption i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(11, 12, 13, .24);
  border-radius: 50%;
  color: var(--ink);
  font-style: normal;
}

.inside-scene {
  z-index: 12;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: end;
  padding: clamp(106px, 13vh, 148px) clamp(34px, 6vw, 96px) clamp(34px, 6vh, 62px);
  color: var(--paper);
  text-align: left;
  opacity: 1;
  transform: none;
}

.inside-copy {
  position: relative;
  z-index: 3;
  width: min(620px, 47vw);
  margin: 0;
  justify-self: end;
  opacity: clamp(0, calc(var(--bridge) * 1.2 - var(--bridge-out) * 1.5), 1);
  transform: translate3d(calc((1 - var(--bridge)) * 32px - var(--bridge-out) * 24px), 0, 0);
}

.inside-kicker {
  margin: 0;
  color: var(--acid);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.inside-scene h2 {
  max-width: 650px;
  margin: 22px 0 0;
  font-size: clamp(54px, 5.2vw, 88px);
  line-height: .88;
  text-align: left;
}

.inside-scene h2 span {
  color: rgba(244, 244, 240, .46);
}

.inside-note {
  max-width: 540px;
  margin: 22px 0 0;
  color: rgba(244, 244, 240, .58);
  font-size: clamp(13px, 1.1vw, 16px);
  text-align: left;
}

.context-gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  align-items: end;
  gap: 12px;
  min-height: 520px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(203, 255, 54, .3);
  border-radius: var(--radius-club-panel);
  background:
    radial-gradient(circle at 34% 18%, rgba(203, 255, 54, .1), transparent 34%),
    rgba(6, 8, 7, .64);
  box-shadow: var(--shadow-club-product);
}

.context-gallery::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 36%, rgba(255, 255, 255, .035), transparent 64%);
  content: "";
  pointer-events: none;
}

@media (max-width: 980px) {
  .portal-story {
    height: 310vh;
  }

  .inside-copy {
    width: min(760px, 84vw);
    margin-bottom: 176px;
  }

  .context-gallery {
    min-height: 470px;
  }
}

@media (max-width: 767px) {
  .portal-story {
    height: 300vh;
  }

  .portal-stage {
    height: 100svh;
    min-height: 0;
  }

  .door-scene {
    top: 33%;
    left: 50%;
    width: 124px;
    transform:
      translate3d(-50%, -50%, 0)
      scale(calc(.7 + var(--approach) * 1.15 + var(--enter) * 5.2));
  }

  .door-caption {
    display: none;
  }

  .inside-scene {
    align-content: end;
    justify-items: start;
    padding: 88px 18px 38px;
    overflow: hidden;
  }

  .inside-copy {
    width: 100%;
    margin: 0 0 2vh;
    justify-self: start;
  }

  .inside-scene h2 {
    font-size: clamp(36px, 10vw, 44px);
    line-height: .9;
  }

  /* Третий круг 18.08: верхняя и нижняя перекладины рамы возвращены — с прозрачными
     border-top/bottom дверь читалась как «вертикальный паз», а не как дверной проём.
     Боковые тёмные полосы-косяки остаются. */
  .door-frame {
    box-shadow:
      inset 14px 0 0 rgba(8, 10, 9, .94),
      inset -14px 0 0 rgba(8, 10, 9, .94),
      0 44px 110px rgba(11, 12, 13, .42);
  }

  .door-depth-top {
    display: none;
  }

  .context-gallery {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-story {
    height: 180vh;
  }

  .door-scene,
  .door-slab,
  .portal-atmosphere,
  .corridor-ring,
  .inside-scene,
  .inside-room,
  .inside-route-line {
    transition: none;
  }
}

/* 2026-07-28: final responsive geometry for the portal and media pairs. */
@media (min-width: 981px) {

  .route-stage {
    align-items: stretch;
  }
}

@media (max-width: 980px) {
  .universe-panels {
    gap: 22px;
    padding-bottom: 0;
  }

  .universe-panel,
  .universe-panel[hidden] {
    position: relative;
    top: auto;
    min-height: 0;
    overflow: visible;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .site-header {
    grid-template-columns: minmax(112px, 1fr) minmax(380px, 440px) minmax(112px, 1fr);
  }

  .desktop-nav a {
    padding-inline: 7px;
    font-size: 10px;
  }

  .hero-copy {
    width: min(720px, 84vw);
  }

  .hero-copy h1 {
    font-size: clamp(56px, 7.6vw, 64px);
  }

  .inside-copy {
    width: min(410px, 50vw);
  }

  .inside-scene h2 {
    font-size: clamp(46px, 6.2vw, 58px);
  }
}

@media (max-width: 767px) {
  .door-scene {
    right: auto;
    bottom: auto;
  }

  .hero-shell {
    padding-bottom: clamp(180px, 27vh, 240px);
  }

  .context-gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .context-gallery::-webkit-scrollbar {
    display: none;
  }
}

/* 2026-07-28: roadmap, diagnostic flow, membership carousel and trial system. */
.map-node {
  width: clamp(224px, 18vw, 268px);
  min-height: 196px;
  padding: 22px 24px;
  overflow: hidden;
}

.map-node strong {
  max-width: 100%;
  font-size: clamp(19px, 1.48vw, 24px);
  line-height: 1.04;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

.map-node small {
  max-width: 24ch;
  font-size: 12px;
  text-wrap: balance;
}

.dropoff-board {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(360px, 1.08fr) minmax(290px, .92fr);
  gap: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .12);
  border-radius: 42px;
  background: #0d0f0e;
  box-shadow: 0 34px 84px rgba(11, 12, 13, .18);
}

.dropoff-board > div {
  min-height: 350px;
  padding: clamp(28px, 2.8vw, 44px);
  border: 0;
  border-right: 1px solid rgba(244, 244, 240, .11);
  border-radius: 0;
  background: transparent;
}

.dropoff-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dropoff-title span {
  max-width: 24ch;
  color: var(--acid);
  font: 850 13px/1.15 var(--font-club);
  letter-spacing: .035em;
  text-transform: none;
}

.dropoff-title strong {
  max-width: 14ch;
  margin: 34px 0 0;
  color: var(--paper);
  /* Round 4, item 3: 3vw/50px → 2.6vw/44px. The board is capped by the shell at ~1520px, so
     the old 50px ceiling was never proportionate to the column it lived in. */
  font-size: clamp(33px, 2.6vw, 44px);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.dropoff-answer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 0 !important;
  border-radius: 32px !important;
  color: var(--ink);
  background: var(--acid) !important;
}

.dropoff-answer span {
  color: var(--ink);
  font: 850 13px/1 var(--font-club);
  letter-spacing: .12em;
}

.dropoff-answer p {
  max-width: 26ch;
  margin: 34px 0 0;
  color: rgba(11, 12, 13, .72);
  font: 540 clamp(20px, 1.65vw, 27px)/1.28 var(--font-club);
  letter-spacing: -.025em;
}

.dropoff-answer strong {
  max-width: 26ch;
  margin-top: 30px;
  color: var(--ink);
  font: 800 clamp(16px, 1.2vw, 20px)/1.22 var(--font-club);
}

.subscription-rail {
  --membership-card-width: clamp(292px, 27vw, 396px);
  gap: clamp(10px, 1.15vw, 16px);
  padding-top: 32px;
  padding-bottom: 78px;
  scroll-padding-inline: max(20px, calc((100% - var(--membership-card-width)) / 2));
}

.subscription-rail article {
  min-height: 318px;
  padding: 190px 24px 24px;
  border-radius: 30px;
  background-size: 100% 178px;
  scroll-snap-stop: always;
}

.subscription-rail article > strong {
  font-size: clamp(22px, 1.75vw, 28px);
}

.subscription-rail article > small {
  font-size: 12px;
}

@media (max-width: 1180px) {
  .dropoff-board {
    grid-template-columns: 1fr 1fr;
  }

  .dropoff-answer {
    grid-column: 1 / -1;
    min-height: 270px !important;
  }

  .dropoff-answer p {
    max-width: 34ch;
  }
}

@media (max-width: 767px) {
  .map-node {
    width: 82%;
    min-height: 174px;
    padding: 20px;
  }

  .map-node strong {
    font-size: clamp(20px, 5.65vw, 22px);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .dropoff-board {
    grid-template-columns: 1fr;
    padding: 7px;
    border-radius: 30px;
  }

  .dropoff-board > div {
    min-height: 0;
    padding: 26px 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 244, 240, .11);
  }

  .dropoff-title strong {
    margin-top: 54px;
    font-size: 38px;
  }

  .dropoff-answer {
    grid-column: auto;
    min-height: 280px !important;
  }

  .subscription-rail {
    --membership-card-width: min(76vw, 296px);
    padding-inline: max(16px, calc((100% - var(--membership-card-width)) / 2));
  }

  .subscription-rail article {
    flex-basis: var(--membership-card-width);
    min-height: 292px;
    padding: 172px 20px 20px;
    background-size: 100% 160px;
  }
}

/* 2026-07-28: spatial portal passage and compact route map. */
.portal-story {
  height: 365vh;
}

.inside-copy {
  width: min(680px, 49vw);
  perspective: 1100px;
  transform:
    translate3d(
      calc((1 - var(--bridge)) * 32px - var(--text-flight) * 31vw),
      calc(var(--text-flight) * -4vh),
      0
    )
    scale(calc(1 - var(--text-flight) * .3))
    rotateY(calc(var(--text-flight) * -34deg));
  transform-style: preserve-3d;
  transform-origin: 18% 50%;
  opacity: clamp(0, calc(var(--bridge) * 1.25 - var(--arrival) * 1.45), 1);
}

.inside-kicker,
.inside-scene h2,
.inside-note,
.inside-route-map {
  transition: none;
  will-change: transform, opacity;
}

.inside-kicker {
  transform:
    translate3d(
      calc(var(--text-flight) * 5vw),
      calc(var(--text-flight) * -3vh),
      calc(var(--text-flight) * -240px)
    )
    rotateZ(calc(var(--text-flight) * 3deg));
}

.inside-scene h2 {
  max-width: 680px;
  margin-top: clamp(16px, 2.2vh, 24px);
  font-size: clamp(48px, 4.65vw, 76px);
  line-height: .94;
  letter-spacing: -.06em;
  transform:
    translate3d(
      calc(var(--text-flight) * -3vw),
      0,
      calc(var(--text-flight) * -430px)
    )
    rotateZ(calc(var(--text-flight) * -2deg));
  transform-origin: left center;
}

.inside-scene h2 span {
  display: inline-block;
  transform:
    translate3d(
      calc(var(--text-flight) * 8vw),
      calc(var(--text-flight) * 2vh),
      calc(var(--text-flight) * -180px)
    );
}

.inside-note {
  max-width: 460px;
  margin-top: 18px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.35;
  transform:
    translate3d(
      calc(var(--text-flight) * 9vw),
      calc(var(--text-flight) * 3vh),
      calc(var(--text-flight) * -310px)
    );
}

.inside-route-map {
  position: relative;
  display: grid;
  width: min(100%, 610px);
  margin-top: clamp(22px, 3vh, 32px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  transform:
    translate3d(
      calc(var(--text-flight) * 14vw),
      calc(var(--text-flight) * 7vh),
      calc(var(--text-flight) * -540px)
    )
    rotateZ(calc(var(--text-flight) * 4deg));
  transform-origin: left center;
}

.inside-route-map::before {
  position: absolute;
  top: 18px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, var(--acid), rgba(244, 244, 240, .45), var(--acid));
  content: "";
  opacity: clamp(.22, var(--bridge), .78);
  transform: scaleX(var(--bridge));
  transform-origin: left center;
}

.inside-route-map > span {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 0 4px;
  color: rgba(244, 244, 240, .62);
}

.inside-route-map > span > i {
  display: grid;
  width: 36px;
  height: 36px;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid rgba(223, 255, 79, .7);
  border-radius: 50%;
  color: var(--ink);
  background: var(--acid);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
  font: 850 9px/1 var(--font-club);
  letter-spacing: .06em;
}

.inside-route-map > span:nth-child(2) > i {
  color: var(--paper);
  background: #202320;
}

.inside-route-map > span:nth-child(3) > i {
  color: var(--paper);
  background: #101210;
}

.inside-route-map b,
.inside-route-map small {
  display: block;
  min-width: 0;
}

.inside-route-map b {
  align-self: end;
  color: var(--paper);
  font: 780 clamp(12px, 1vw, 15px)/1.05 var(--font-club);
}

.inside-route-map small {
  align-self: start;
  margin-top: 4px;
  color: rgba(244, 244, 240, .48);
  font: 620 clamp(9px, .76vw, 11px)/1.15 var(--font-club);
}

.door-scene {
  opacity: clamp(0, calc(var(--door-intro) * 2 - var(--arrival) * 2), 1);
  transform:
    translate3d(-50%, -50%, 0)
    scale(calc(.72 + var(--approach) * 1.15 + var(--passage) * 3.1));
}

.door-slab {
  opacity: clamp(0, calc(1 - var(--text-flight) * 1.18), 1);
}

.club-universe {
  border-top: 1px solid rgba(244, 244, 240, .13);
  background:
    radial-gradient(ellipse at 50% 0, rgba(223, 255, 79, .11), transparent 28%),
    radial-gradient(circle at 78% 28%, rgba(223, 255, 79, .06), transparent 24%),
    var(--ink);
}

@media (max-width: 980px) {
  .inside-copy {
    width: min(620px, 53vw);
  }

  .inside-route-map {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .inside-route-map::before {
    top: 18px;
    right: auto;
    bottom: 18px;
    left: 22px;
    width: 1px;
    height: auto;
    transform: scaleY(var(--bridge));
    transform-origin: center top;
  }
}

@media (max-width: 767px) {
  .portal-story {
    height: 340vh;
  }

  .inside-scene {
    align-content: end;
    padding: 80px 18px 24px;
  }

  .inside-copy {
    width: 100%;
    transform:
      translate3d(
        0,
        calc(var(--text-flight) * -38vh),
        0
      )
      scale(calc(1 - var(--text-flight) * .42))
      rotateX(calc(var(--text-flight) * 28deg));
    transform-origin: center top;
  }

  .inside-scene h2 {
    margin-top: 14px;
    font-size: clamp(34px, 9.5vw, 40px);
    line-height: .95;
  }

  .inside-scene h2,
  .inside-scene h2 span,
  .inside-kicker,
  .inside-note,
  .inside-route-map {
    transform: none;
  }

  .inside-note {
    margin-top: 12px;
    font-size: 13px;
  }

  .inside-route-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 18px;
  }

  .inside-route-map::before {
    top: 14px;
    right: 12%;
    bottom: auto;
    left: 12%;
    width: auto;
    height: 1px;
    transform: scaleX(var(--bridge));
    transform-origin: left center;
  }

  .inside-route-map > span {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 5px;
    padding: 0;
  }

  .inside-route-map > span > i {
    width: 28px;
    height: 28px;
    font-size: 7px;
  }

  .inside-route-map b {
    font-size: 10px;
  }

  .inside-route-map small {
    margin-top: 2px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .inside-copy,
  .inside-kicker,
  .inside-scene h2,
  .inside-scene h2 span,
  .inside-note,
  .inside-route-map {
    opacity: 1;
    transform: none;
  }
}

/* Final cascade: the passage uses real Z-depth, not scaled poster frames. */
body.is-portal-flight .math-cursor,
body.is-portal-flight .signal-thread {
  opacity: 0;
}

.inside-copy {
  opacity: clamp(0, calc(var(--bridge) * 1.2 - var(--passage) * 2.55), 1);
}

.inside-kicker {
  opacity: clamp(0, calc(1.08 - var(--passage) * 3.1), 1);
}

.inside-scene h2 {
  opacity: clamp(0, calc(1.12 - var(--passage) * 2.48), 1);
}

.inside-note,
.inside-route-map {
  opacity: clamp(0, calc(1.04 - var(--passage) * 2.7), 1);
}

.club-universe {
  margin-top: -18vh;
}

@media (max-width: 767px) {

  .club-universe {
    margin-top: 0;
  }

  .inside-route-map {
    gap: 6px;
  }

  .inside-route-map > span {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 6px;
  }

  .inside-route-map > span > i {
    width: 32px;
    height: 32px;
    font-size: 8px;
  }

  .inside-route-map b {
    font-size: 11px;
  }

  .inside-route-map small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-portal-flight .math-cursor,
  body.is-portal-flight .signal-thread {
    opacity: 1;
  }
}

/* Final context cascade: two editorial rows, never the legacy screenshot rail. */
.context-gallery {
  display: grid;
  min-height: 520px;
  grid-template-columns: 1fr;
  grid-template-rows: 1.08fr .92fr;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  scroll-snap-type: none;
}

@media (max-width: 1180px) {
  .context-gallery {
    min-height: 590px;
  }
}

@media (max-width: 980px) {
  .context-gallery {
    min-height: 560px;
  }
}

@media (max-width: 767px) {
  .context-gallery {
    min-height: 620px;
    grid-template-columns: 1fr;
    grid-template-rows: 1.08fr .92fr;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
    padding: 8px;
    overflow: hidden;
    scroll-snap-type: none;
  }
}

/* 2026-07-29: continuous section hand-offs and the noise-to-route diagnostic. */
.universe-shell,
.proof-shell-v2,
.outcomes-shell-v2,
.roadmap-shell-v2,
.pricing-shell-v2,
.faq-shell-v2,
.quiz-shell-v2 {
  padding-block: 0;
}

.portal-story {
  height: 330vh;
}

.club-universe {
  margin-top: -12vh;
}

.case-reel {
  padding-bottom: 0;
}

.outcomes-section {
  padding-bottom: clamp(56px, 4.5vw, 72px);
}

.miro-map-story {
  height: 185vh;
}

.roadmap-section {
  padding-top: clamp(82px, 6.5vw, 110px);
  padding-bottom: clamp(86px, 7vw, 116px);
}

.pricing-section {
  margin-top: -32px;
}

/* Round 4, item 3: the title column was minmax(260px,.82fr) — at 1280-1450px viewports that
   left ~250px of text box under a 42px font, so the headline wrapped one word per line and sat
   visually edge-to-edge in its frame («текст залезает за рамки»). Wider column + the softer
   font clamp below give it 2-3 words per line with real air at every width. */
.dropoff-board {
  grid-template-columns: minmax(300px, .95fr) minmax(430px, 1.3fr) minmax(290px, .92fr);
  gap: 0;
}

.dropoff-board > div {
  min-height: 390px;
}

.dropoff-flow {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr 1fr;
  align-content: stretch;
  padding: 28px 28px 30px !important;
  overflow: hidden;
  border-right: 1px solid rgba(244, 244, 240, .11) !important;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(223, 255, 79, .055) 50%, transparent 50.2%),
    radial-gradient(circle at 52% 50%, rgba(223, 255, 79, .075), transparent 34%);
  isolation: isolate;
}

.dropoff-flow::before {
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(244, 244, 240, .08);
  border-radius: 22px;
  content: "";
  pointer-events: none;
}

.flow-source {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(44%, 190px);
  align-content: center;
  padding-left: 14px;
  opacity: .35;
  transform: translateX(-18px);
}

.flow-source-one {
  align-self: end;
  padding-bottom: 34px;
}

.flow-source-two {
  align-self: start;
  padding-top: 34px;
}

.flow-source span {
  color: var(--acid);
  font: 800 9px/1 var(--font-club);
  letter-spacing: .12em;
}

.flow-source strong {
  max-width: 17ch;
  margin-top: 8px;
  color: rgba(244, 244, 240, .72);
  font: 700 clamp(14px, 1vw, 17px)/1.16 var(--font-club);
  letter-spacing: -.018em;
}

.flow-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.flow-line {
  fill: none;
  /* 2026-08-02: was .2 — the second branch read as "grey and mute" next to the acid one.
     Still secondary by design (one input is accented, the other supports it), just present. */
  stroke: rgba(244, 244, 240, .34);
  stroke-width: 1.3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.flow-line-one {
  stroke: var(--acid);
}

.flow-particle {
  fill: var(--acid);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(223, 255, 79, .48));
}

.flow-gate {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: 84px;
  height: 116px;
  place-items: center;
  border: 1px solid rgba(244, 244, 240, .35);
  border-radius: 14px;
  color: var(--paper);
  background: #0b0d0c;
  box-shadow: 0 22px 42px rgba(0, 0, 0, .34);
  opacity: .55;
  transform: translate(-50%, -50%) scale(.82);
}

.flow-gate::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(223, 255, 79, .36);
  border-radius: 8px;
  content: "";
}

.flow-gate span {
  align-self: end;
  font: 850 20px/1 var(--font-club);
}

.flow-gate small {
  align-self: start;
  color: var(--acid);
  font: 800 8px/1 var(--font-club);
  letter-spacing: .16em;
}

.flow-gate i {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, var(--acid), transparent);
  opacity: .58;
  transform: scaleY(.2);
}

.flow-route {
  position: absolute;
  top: 50%;
  /* Round 4, item 3: right 18px put the route card ON the decorative inner frame (::before
     sits at inset 24px) — the block visibly crossed the line. 32px keeps the card inside the
     frame with air, and going further right would eat the gate↔route gap at 1280px, which is
     only ~10px even now. Mirrored in the final card layer further down — both must move
     together. */
  right: 32px;
  z-index: 3;
  display: grid;
  width: min(34%, 154px);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
}

.flow-route li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  opacity: 0;
  transform: translateX(16px);
}

.flow-route i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(223, 255, 79, .55);
  border-radius: 50%;
  color: var(--acid);
  font: 800 8px/1 var(--font-club);
  font-style: normal;
}

.flow-route b,
.flow-route small {
  display: block;
}

.flow-route b {
  color: var(--paper);
  font: 750 12px/1.05 var(--font-club);
}

.flow-route small {
  margin-top: 3px;
  color: rgba(244, 244, 240, .46);
  font: 600 9px/1.15 var(--font-club);
}

.dropoff-flow.is-flow-active .flow-source {
  animation: flowSourceIn 520ms var(--ease-reveal) forwards;
}

.dropoff-flow.is-flow-active .flow-source-two {
  animation-delay: 120ms;
}

.dropoff-flow.is-flow-active .flow-line {
  animation: flowLineDraw 920ms var(--ease-reveal) 280ms forwards;
}

.dropoff-flow.is-flow-active .flow-line-two {
  animation-delay: 390ms;
}

.dropoff-flow.is-flow-active .flow-gate {
  animation: flowGateIn 560ms var(--ease-reveal) 700ms forwards;
}

.dropoff-flow.is-flow-active .flow-gate i {
  animation: flowScan 780ms var(--ease-reveal) 1040ms forwards;
}

.dropoff-flow.is-flow-active .flow-particle-one {
  animation: flowParticleOne 900ms var(--ease-reveal) 1120ms forwards;
}

.dropoff-flow.is-flow-active .flow-particle-two {
  animation: flowParticleTwo 900ms var(--ease-reveal) 1260ms forwards;
}

.dropoff-flow.is-flow-active .flow-route li {
  animation: flowRouteIn 440ms var(--ease-reveal) forwards;
}

.dropoff-flow.is-flow-active .flow-route li:nth-child(1) {
  animation-delay: 560ms;
}

.dropoff-flow.is-flow-active .flow-route li:nth-child(2) {
  animation-delay: 700ms;
}

.dropoff-flow.is-flow-active .flow-route li:nth-child(3) {
  animation-delay: 840ms;
}

@keyframes flowSourceIn {
  to { opacity: 1; transform: none; }
}

@keyframes flowLineDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes flowGateIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes flowScan {
  45% { opacity: 1; transform: scaleY(1); }
  to { opacity: .72; transform: translateX(18px) scaleY(.58); }
}

@keyframes flowParticleOne {
  0% { cx: 18; cy: 64; opacity: 0; }
  14%, 80% { opacity: 1; }
  55% { cx: 260; cy: 150; }
  100% { cx: 480; cy: 150; opacity: 0; }
}

@keyframes flowParticleTwo {
  0% { cx: 18; cy: 268; opacity: 0; }
  14%, 76% { opacity: 1; }
  68% { cx: 260; cy: 150; }
  100% { cx: 480; cy: 150; opacity: 0; }
}

@keyframes flowRouteIn {
  to { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  .dropoff-board {
    grid-template-columns: minmax(250px, .82fr) minmax(400px, 1.18fr);
  }

  .dropoff-flow {
    border-right: 0 !important;
  }

  .dropoff-answer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .portal-story {
    height: 300vh;
  }

  .club-universe {
    margin-top: -8vh;
  }

  .miro-map-story {
    height: 175vh;
  }
}

@media (max-width: 767px) {
  .portal-story {
    height: 280vh;
  }

  .club-universe {
    margin-top: 0;
  }

  .case-reel {
    padding-bottom: 0;
  }

  .outcomes-section {
    padding-bottom: 72px;
  }

  .miro-map-story {
    height: 165vh;
  }

  .roadmap-section {
    padding-top: 76px;
    padding-bottom: 88px;
  }

  .pricing-section {
    margin-top: -24px;
  }

  .dropoff-board {
    grid-template-columns: 1fr;
  }

  .dropoff-board > div {
    min-height: 0;
  }

  .dropoff-title strong {
    max-width: 11ch;
    margin-top: 40px;
    font-size: clamp(32px, 9.4vw, 38px);
  }

  .dropoff-flow {
    min-height: 360px !important;
    padding: 18px !important;
    border-bottom: 1px solid rgba(244, 244, 240, .11);
  }

  .dropoff-flow::before {
    inset: 14px;
  }

  .flow-source {
    width: 40%;
    padding-left: 8px;
  }

  .flow-source strong {
    font-size: 12px;
  }

  .flow-gate {
    width: 62px;
    height: 94px;
  }

  .flow-route {
    right: 8px;
    width: 35%;
    gap: 10px;
  }

  .flow-route li {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
  }

  .flow-route i {
    width: 26px;
    height: 26px;
  }

  .flow-route b {
    font-size: 10px;
  }

  .flow-route small {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-story {
    height: 190vh;
  }

  .dropoff-flow .flow-source,
  .dropoff-flow .flow-route li,
  .dropoff-flow .flow-gate {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .dropoff-flow .flow-gate {
    transform: translate(-50%, -50%);
  }

  .dropoff-flow .flow-line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .dropoff-flow .flow-gate i {
    transform: scaleY(.58);
    animation: none;
  }

  .dropoff-flow .flow-particle {
    display: none;
  }
}

/* 2026-07-29: production stabilization — real portal handoff, one-panel theater and editorial media. */
.portal-story {
  z-index: 2;
  height: 280svh;
  background: transparent;
}

.portal-stage {
  z-index: 2;
  opacity: calc(1 - var(--handoff, 0));
  will-change: opacity;
}

.portal-stage::after {
  opacity: var(--bridge);
  background:
    linear-gradient(108deg, #0c0e0d, #151815 58%, #080908);
}

.portal-stage::before {
  opacity: calc(.12 + var(--bridge) * .24);
  mask-image: radial-gradient(circle at var(--door-x, 28%) 52%, #000, transparent 62%);
}

.interior-bg {
  clip-path: circle(var(--iris) at var(--door-x, 28%) 52%);
}

.room-grid {
  opacity: calc(.08 + var(--enter) * .16);
  transform:
    perspective(800px)
    rotateX(62deg)
    translateY(calc(18% - var(--enter) * 8%))
    scale(calc(1.16 + var(--enter) * .18));
}

.door-scene {
  top: 52%;
  left: var(--door-x, 28%);
  opacity: clamp(0, calc(var(--door-intro) * 2 - var(--handoff) * 1.25), 1);
  transform:
    translate3d(-50%, -50%, 0)
    scale(calc(.72 + var(--bridge) * .55 + var(--enter) * 5));
}

.door-slab {
  opacity: clamp(0, calc(1 - var(--enter) * 1.8), 1);
  transform: rotateY(calc(var(--open) * -94deg));
}

.threshold-light {
  opacity: clamp(0, calc(.08 + var(--open) * .66 - var(--enter) * 3.5), .74);
}

.inside-scene {
  align-content: center;
  justify-items: end;
  padding: clamp(106px, 13vh, 148px) clamp(34px, 6vw, 96px) clamp(34px, 6vh, 62px);
}

.inside-copy {
  width: min(650px, 46vw);
  margin: 0;
  opacity: clamp(0, calc(var(--bridge) * 1.3 - var(--bridge-out) * 1.55), 1);
  transform:
    translate3d(
      calc((1 - var(--bridge)) * 32px + var(--bridge-out) * 9vw),
      calc(var(--bridge-out) * -2vh),
      0
    )
    scale(calc(1 - var(--bridge-out) * .12))
    rotateY(calc(var(--bridge-out) * -8deg));
  transform-origin: left center;
}

.inside-kicker,
.inside-scene h2,
.inside-scene h2 span,
.inside-note,
.inside-route-map {
  opacity: 1;
  transform: none;
}

.inside-scene h2 {
  max-width: 680px;
  margin-top: clamp(16px, 2.2vh, 24px);
  font-size: clamp(48px, 4.65vw, 76px);
  line-height: .94;
}

.inside-route-map {
  width: min(100%, 610px);
  margin-top: clamp(20px, 2.8vh, 28px);
}

.club-universe {
  z-index: 1;
  margin-top: -100svh;
}

.universe-panels {
  gap: 24px;
  padding-bottom: 0;
}

.universe-panel,
.universe-panel[hidden] {
  position: relative;
  top: auto;
  z-index: 1;
  min-height: 0;
  max-height: none;
  opacity: 1;
  visibility: visible;
  filter: none;
  pointer-events: auto;
  transform: none;
}

.universe-panel:nth-child(2),
.universe-panel:nth-child(3) {
  z-index: 1;
}

.context-gallery {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.context-channel-collage {
  display: grid;
  height: 100%;
  min-height: 170px;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr);
  gap: 10px;
  align-items: stretch;
}

.channel-collage-card,
.channel-collage-main,
.channel-collage-digest {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-width: 0;
  transform: none;
}

.channel-collage-card img {
  object-fit: contain;
  object-position: center;
  background: #f2f3f4;
}

.route-stage {
  display: block;
  min-width: 0;
  min-height: 460px;
  perspective: 1400px;
}

.practice-window {
  position: relative;
  display: grid;
  min-height: 460px;
  grid-template-rows: 46px minmax(0, 1fr);
  padding: 12px;
  overflow: visible;
  border: 1px solid rgba(244, 244, 240, .15);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 16%, rgba(223, 255, 79, .08), transparent 28%),
    linear-gradient(145deg, #20241f, #0e100f);
  box-shadow:
    0 42px 100px rgba(0, 0, 0, .48),
    inset 0 1px rgba(255, 255, 255, .09);
  transform-style: preserve-3d;
}

.practice-window-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px;
  color: rgba(244, 244, 240, .54);
  font: 760 9px/1 var(--font-club);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.practice-window-bar span,
.practice-window-bar strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.practice-window-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(223, 255, 79, .08);
}

.practice-window-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 8px;
  transform-style: preserve-3d;
}

.dropoff-flow {
  grid-template-columns: minmax(0, 1fr) 176px;
}

/* 2026-08-02: the 176px track above is reserved for the absolutely-positioned .flow-route,
   but nothing told the two sources to stay out of it. Auto-placement put .flow-source-two
   ("СОМНЕНИЕ") into row 1 of that track — top right, underneath the route card, which
   clipped its own text — while its branch still entered the gate from the bottom left. That
   is the "silent grey branch" in the owner's screenshot: the branch was there, its label was
   on the other side of the diagram. Both sources are pinned to column 1 now, one per row,
   centred so each sits beside the branch it names. */
/* Each label sits *above* its own branch. There is no room to route a branch between a label
   and the gate — measured at 1440 the label ends at x=144 and the gate starts at x=148 — so
   the curves have to arc around the labels, and the only side with clearance is the top:
   the acid branch enters at y=84 and the grey one at y=266, both measured over the labels'
   own x-range. Verified 0 crossings from 1200 to 1440. */
.flow-source-one {
  grid-area: 1 / 1;
  align-self: start;
  padding-bottom: 0;
}

.flow-source-two {
  grid-area: 2 / 1;
  align-self: start;
  margin-top: -32px;
  padding-top: 0;
}

.dropoff-flow .flow-source {
  width: min(36%, 160px);
}

.dropoff-flow .flow-source strong {
  max-width: 15ch;
}

/* The 158px inset is deliberate and stays: the viewBox is stretched to the element box, so
   this width is what maps the paths' convergence point (x=260 of 520) onto the gate, where
   the two branches are supposed to merge out of sight behind it. Widening the element to
   100% moved that merge 46px clear of the gate and exposed it.
   The real cause of the acid line "stopping halfway" was the other end: the output segment
   was authored to x=356, which lands at 272px, while the route card starts at 365px. The
   path now runs to 480 instead — see index.html. It finishes a few pixels under the route
   card at every width from 1200 up, and the card paints above it (z-index 3 vs 1). */
/* 2026-08-02, owner review (round 3, item 8): "СОМНЕНИЕ / Что применять именно сейчас?" sat
   almost against the AI ROOM gate. Measured horizontal clearance between the label's ink box
   and the gate's border box, before:

     1200 → -15px   1300 → -4px   1440 → +7px   1600 → +15px   1750 → +18px   1920 → +20px

   i.e. an actual overlap below 1300 and single-digit clearance at the owner's own width. The
   same measurement also found the acid branch passing *through* that label's box at every
   width (7-16 of 220 sampled points inside it).

   Both come from one number: the merge point of the two branches is the SVG's horizontal
   centre, the gate is parked on it, and the SVG was only `100% - 158px` wide, which pulled
   that centre left towards the labels. Widening the SVG by 2 x --flow-gate-shift and moving
   the gate right by exactly --flow-gate-shift keeps the gate over the merge — the constraint
   the previous round's comment warns about — while opening the gap. The branch entry points
   (viewBox x=18) move right by only ~4px, so they still start left of the labels.

   Moving the label instead was tried on paper and does not fit: the gate occupies 116px of a
   ~334px content column, and a two-line label plus 40px of clearance needs 124px of the 109px
   left below it. Widening the diagram is the only move that does not force a re-typeset. */
:root {
  --flow-gate-shift: 58px;
}

.flow-lines {
  z-index: 1;
  width: calc(100% - 158px + var(--flow-gate-shift) * 2);
}

.flow-gate {
  left: calc((100% - 176px) / 2 + var(--flow-gate-shift));
}

.flow-route {
  top: 50%;
  /* Round 4, item 3: 14px sat the card on the inner decorative frame (inset 24px). Keep in
     step with the base .flow-route rule above. */
  right: 32px;
  width: 176px;
  gap: 13px;
  padding: 16px 14px;
  border: 1px solid rgba(244, 244, 240, .1);
  border-radius: 18px;
  background: #111311;
  box-shadow: -18px 0 42px rgba(5, 6, 6, .48);
}

.flow-route li {
  grid-template-columns: 32px minmax(0, 1fr);
}

.flow-route b {
  font-size: 13px;
}

.flow-route small {
  color: rgba(244, 244, 240, .66);
  font-size: 11px;
}

.subscription-rail {
  --membership-card-width: clamp(280px, 24vw, 356px);
}

.subscription-rail article {
  min-height: 300px;
  padding: 176px 22px 22px;
  background-size: 100% 166px;
  transition:
    transform 380ms var(--ease-reveal),
    opacity 220ms ease,
    box-shadow 280ms ease,
    border-color 220ms ease;
}

.subscription-rail article:nth-child(1) { background-image: linear-gradient(180deg, transparent 0 36%, rgba(244, 244, 240, .88) 58%, var(--paper) 72%), url("assets/membership/01-community.webp"); }
.subscription-rail article:nth-child(2) { color: var(--ink); background-image: linear-gradient(180deg, transparent 0 34%, rgba(223, 255, 79, .9) 56%, var(--acid) 70%), url("assets/membership/02-courses.webp"); }
.subscription-rail article:nth-child(3) { background-image: linear-gradient(180deg, transparent 0 36%, rgba(244, 244, 240, .88) 58%, var(--paper) 72%), url("assets/membership/03-materials.webp"); }
.subscription-rail article:nth-child(4) { background-image: linear-gradient(180deg, transparent 0 36%, rgba(244, 244, 240, .88) 58%, var(--paper) 72%), url("assets/membership/04-channel.webp"); }
.subscription-rail article:nth-child(5) { background-image: linear-gradient(180deg, transparent 0 36%, rgba(244, 244, 240, .88) 58%, var(--paper) 72%), url("assets/membership/05-use-cases.webp"); }
.subscription-rail article:nth-child(6) { background-image: linear-gradient(180deg, transparent 0 36%, rgba(244, 244, 240, .88) 58%, var(--paper) 72%), url("assets/membership/06-chat.webp"); }
.subscription-rail article:nth-child(7) { color: var(--ink); background-image: linear-gradient(180deg, transparent 0 34%, rgba(223, 255, 79, .9) 56%, var(--acid) 70%), url("assets/membership/07-events.webp"); }
.subscription-rail article:nth-child(8) { background-image: linear-gradient(180deg, transparent 0 36%, rgba(244, 244, 240, .88) 58%, var(--paper) 72%), url("assets/membership/08-workshops.webp"); }
.subscription-rail article:nth-child(9) { background-image: linear-gradient(180deg, transparent 0 36%, rgba(244, 244, 240, .88) 58%, var(--paper) 72%), url("assets/membership/09-platform.webp"); }

.subscription-rail article > strong,
.subscription-rail article > small {
  position: relative;
  z-index: 2;
}

.trial-card-v2 {
  grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
  min-height: 700px;
}

.trial-visual {
  min-width: 0;
  min-height: 610px;
}

.trial-media-window {
  position: absolute;
  inset: 0;
  display: grid;
  min-width: 0;
  /* 2026-08-02, owner review (round 3, item 11): the third track was the 76px tab rail. With
     the rail deleted it would have been 76px of empty black under the screenshot, so the grid
     is now bar + preview. The window's own height is unchanged, which means the preview grew
     by exactly those 76px — the whole point of the change. */
  grid-template-rows: 48px minmax(0, 1fr);
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .15);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 12%, rgba(223, 255, 79, .08), transparent 32%),
    #0c0e0d;
  box-shadow:
    0 38px 92px rgba(0, 0, 0, .42),
    inset 0 1px rgba(255, 255, 255, .08);
}

.trial-media-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: 10px;
  color: rgba(244, 244, 240, .5);
  font: 760 9px/1 var(--font-club);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.trial-media-bar span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trial-media-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
}

.trial-preview-stack {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 240, .12);
  border-radius: 20px;
  background: #e7e8e9;
}

.trial-preview-stack article {
  position: absolute;
  inset: 0;
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  color: var(--ink);
  background: #e7e8e9;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px) scale(.985);
  transition:
    opacity 180ms ease,
    transform 420ms var(--ease-reveal);
}

.trial-preview-stack article.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.trial-preview-stack img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: #e7e8e9;
}

/* 2026-08-02, owner review (round 3, item 11): one static platform shot. The slide is no longer
   a slide — no absolute stacking, no enter transform, no caption plate — so it just fills the
   preview box. `object-fit: cover / left top` is what the first slide already used, kept so the
   framing of the platform screenshot is identical to what the owner approved. */
.trial-preview-static article {
  position: relative;
  display: block;
  /* Round 4, item 6: without an explicit height the article shrink-wrapped the image's
     intrinsic aspect (~309px of ~536px), and the rest of the stack showed its #e7e8e9
     backdrop — the «странный белый блок» under the platform shot. At 100% the cover-fit
     image owns the whole window. */
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}

.trial-preview-static img {
  object-fit: cover;
  object-position: left top;
}

@media (min-width: 981px) and (min-height: 820px) {
  .universe-panels {
    gap: 22vh;
    padding-bottom: 0;
  }

  .universe-panel,
  .universe-panel[hidden] {
    position: sticky;
    top: 204px;
    z-index: 1;
    height: min(680px, calc(100svh - 220px));
    min-height: min(680px, calc(100svh - 220px));
    max-height: 680px;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    gap: clamp(26px, 2.5vw, 42px);
    padding: 28px 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(.988);
  }

  .universe-panel.is-active {
    z-index: 3;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .context-gallery {
    height: 100%;
    max-height: 624px;
  }
}

@media (min-width: 1600px) and (min-height: 820px) {
  .universe-panel,
  .universe-panel[hidden] {
    grid-template-columns: minmax(430px, .72fr) minmax(0, 1.28fr);
  }
}

/* 2026-08-02, round 4, item 1: this block used to also strip `position: sticky` off
   .universe-switcher. Heights 781-819px then had NO rule putting it back (the short-viewport
   dock below only started at 780), so on the owner's laptop the tabs scrolled away the moment
   the pin began — «исчезают при скролле». The tabs must stay docked at every height ≥981px
   wide: the short-viewport block below now covers ≤819px, and nothing un-sticks them. */
@media (min-width: 981px) and (max-height: 819px) {
  .route-stage,
  .practice-window {
    min-height: 410px;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .practice-window-body {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 10px;
  }
}

@media (max-width: 980px) {
  .portal-story {
    height: 265svh;
  }

  .inside-copy {
    width: min(620px, 58vw);
  }

  .inside-route-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inside-route-map::before {
    top: 18px;
    right: 12%;
    bottom: auto;
    left: 12%;
    width: auto;
    height: 1px;
    transform: scaleX(var(--bridge));
  }

  .universe-panels {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .portal-story {
    height: 250svh;
  }

  .portal-stage {
    height: 100svh;
    min-height: 0;
  }

  .portal-stage::before {
    display: none;
  }

  /* Третий круг 18.08, жалоба Tony «дверь не по центру, дёшево и нелепо».
     Замер: центр двери висел на 33% высоты — на 143px (17% экрана) выше центра
     вьюпорта, под дверью 59% пустого чёрного поля; сама дверь максимум 26% высоты
     экрана. Дверь опущена к центру (45%, чуть выше оптической середины — снизу
     наплывает заголовок следующей секции) и укрупнена 124→168px. Центр радужки
     обязан совпадать с центром двери — двигается той же правкой. */
  .interior-bg {
    clip-path: circle(var(--iris) at 50% 45%);
  }

  .door-scene {
    top: 45%;
    left: 50%;
    width: 168px;
    /* Коэффициент enter 6.4→4.42 после укрупнения двери 124→168px: конечный
       пиксельный размер пролёта тот же, что был до укрупнения (~936px ширины),
       а растровая площадь слоя в полёте на ~45% меньше — лечение жалобы
       «при скроллинге вперед-назад лагает» на живом iPhone (вечер 18.08). */
    transform:
      translate3d(-50%, -50%, 0)
      scale(calc(.7 + var(--bridge) * .45 + var(--enter) * 4.42));
  }

  /* Контактная тень-эллипс под дверью: гасит «дверь висит в пустоте».
     Живёт внутри масштабируемой сцены, статична по форме; при входе в пролёт
     гаснет через opacity (без filter — перф-урок этой же сессии). */
  .door-scene::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 120%;
    height: 14%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent 72%);
    opacity: calc(1 - var(--enter) * 1.4);
    pointer-events: none;
  }

  /* Полотно двери — не плоская одноцветная плита: свет из верхнего левого угла
     сцены и лёгкое затемнение к низу. Только ≤767 — на десктопе жалоб не было. */
  .door-slab {
    background:
      linear-gradient(100deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 34%),
      linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .24) 88%),
      var(--ink);
  }

  .inside-scene {
    align-content: end;
    justify-items: start;
    padding: 82px 18px 30px;
  }

  .inside-copy {
    width: 100%;
    transform:
      translate3d(0, calc(var(--bridge-out) * -18vh), 0)
      scale(calc(1 - var(--bridge-out) * .28));
    transform-origin: center top;
  }

  .inside-scene h2 {
    font-size: clamp(34px, 9.4vw, 40px);
  }

  .inside-route-map {
    gap: 4px;
    margin-top: 18px;
  }

  .club-universe {
    margin-top: -100svh;
  }

  .context-channel-collage {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 6px;
  }

  .route-stage,
  .practice-window {
    min-height: 0;
  }

  .practice-window {
    grid-template-rows: 44px auto;
    padding: 8px;
    border-radius: 22px;
  }

  .practice-window-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 5px;
  }

  .dropoff-flow {
    display: grid;
    min-height: 420px !important;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(170px, 1fr) auto;
  }

  .flow-lines {
    width: 100%;
    height: 55%;
  }

  .flow-gate {
    top: 28%;
    left: 50%;
  }

  .flow-route {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 10px;
    transform: none;
  }

  .flow-route li {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 5px;
  }

  .flow-route small {
    display: none;
  }

  .subscription-rail {
    --membership-card-width: min(74vw, 284px);
  }

  .subscription-rail article {
    min-height: 286px;
    padding: 168px 20px 20px;
    background-size: 100% 158px;
  }

  .trial-card-v2 {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
    padding: 76px 18px 28px;
  }

  .trial-visual {
    min-height: 520px;
  }

  .trial-media-window {
    grid-template-rows: 44px minmax(0, 1fr);
    padding: 8px;
    border-radius: 22px;
  }

  .trial-media-bar strong {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-story {
    height: 190svh;
  }

  .portal-stage,
  .door-scene,
  .inside-copy,
  .subscription-rail article,
  .trial-preview-stack article {
    transition: none;
  }
}

/* 2026-07-29: luminous conversion system and atmospheric hero depth. */
.hero-shell {
  isolation: isolate;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--hero-exit) * 1.35), 1);
  background:
    radial-gradient(ellipse 56% 46% at 50% 42%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .56) 46%, transparent 76%),
    radial-gradient(ellipse 44% 60% at 50% 104%, rgba(208, 214, 196, .22), transparent 72%),
    linear-gradient(90deg, rgba(196, 201, 188, .2), transparent 18% 82%, rgba(196, 201, 188, .2));
  transform: translate3d(0, calc(var(--hero-exit) * -12px), 0) scale(calc(1 + var(--hero-exit) * .035));
  transform-origin: center;
}

.hero-atmosphere::before,
.hero-atmosphere::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero-atmosphere::before {
  opacity: .48;
  background:
    linear-gradient(90deg, transparent 49.92%, rgba(11, 12, 13, .055) 50%, transparent 50.08%),
    linear-gradient(transparent 49.92%, rgba(11, 12, 13, .04) 50%, transparent 50.08%);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 58% 42% at 50% 68%, #000 0 28%, transparent 76%);
  transform: perspective(760px) rotateX(67deg) translateY(49%) scale(1.45);
  transform-origin: 50% 100%;
}

.hero-atmosphere::after {
  inset: clamp(96px, 12vh, 132px) clamp(22px, 5vw, 78px) clamp(24px, 4vh, 48px);
  border: 1px solid rgba(11, 12, 13, .045);
  border-radius: clamp(28px, 4vw, 64px);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .74),
    0 32px 90px rgba(11, 12, 13, .035);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .74), transparent 74%);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-mist {
  position: absolute;
  top: 3%;
  width: clamp(310px, 35vw, 660px);
  height: 92%;
  border-radius: 48%;
  opacity: .72;
  filter: blur(34px);
  transform: translateZ(0);
}

.hero-mist-left {
  left: max(-300px, -16vw);
  background:
    radial-gradient(ellipse at 76% 45%, rgba(213, 218, 206, .62), transparent 55%),
    radial-gradient(ellipse at 38% 82%, rgba(223, 255, 79, .12), transparent 48%);
}

.hero-mist-right {
  right: max(-300px, -16vw);
  background:
    radial-gradient(ellipse at 24% 44%, rgba(204, 210, 198, .64), transparent 56%),
    radial-gradient(ellipse at 54% 18%, rgba(223, 255, 79, .13), transparent 44%);
}

.hero-depth-plane {
  position: absolute;
  right: 15%;
  bottom: -14%;
  left: 15%;
  height: 54%;
  border: 1px solid rgba(11, 12, 13, .055);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, .72), transparent 62%);
  box-shadow:
    0 -26px 90px rgba(255, 255, 255, .84),
    inset 0 18px 80px rgba(188, 196, 177, .14);
  opacity: .72;
  transform: perspective(720px) rotateX(64deg) scale(1.06);
  transform-origin: center bottom;
}

.hero-depth-plane::before,
.hero-depth-plane::after {
  position: absolute;
  border: 1px solid rgba(11, 12, 13, .07);
  border-radius: 50%;
  content: "";
}

.hero-depth-plane::before {
  inset: 13% 8%;
}

.hero-depth-plane::after {
  inset: 28% 20%;
  border-color: rgba(128, 154, 21, .13);
}

.primary-button,
.header-cta,
.price-card-v2 > a,
.community-finale-copy > a {
  --cta-fill-top: #f0ff89;
  --cta-fill-mid: var(--acid);
  --cta-fill-bottom: #b9dc21;
  --cta-ink: var(--ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 56px;
  border: 1px solid rgba(128, 154, 21, .76);
  border-radius: 999px;
  color: var(--cta-ink);
  background:
    linear-gradient(180deg, var(--cta-fill-top) 0%, var(--cta-fill-mid) 52%, var(--cta-fill-bottom) 132%);
  /* 2026-08-02: volume comes from --shadow-cta-crown, a soft top bloom with no zero-offset
     row, plus the body gradient that was already lighter at the top. The previous
     `inset 0 1px 0 rgba(255,255,255,.88)` is gone on purpose — together with the lens it was
     the white stripe the owner reported. The halo is deliberately the restrained one
     (--shadow-cta-halo-acid, alpha .22) rather than --shadow-club-acid-glow (alpha .9),
     which is a neon and was rejected. */
  box-shadow:
    var(--shadow-cta-crown),
    inset 0 -10px 18px rgba(103, 124, 18, .14),
    0 10px 22px rgba(126, 151, 19, .18),
    0 0 0 5px rgba(223, 255, 79, .06),
    var(--shadow-cta-halo-acid);
  text-shadow: 0 1px rgba(255, 255, 255, .26);
  transition:
    color var(--duration-base) ease,
    background-color var(--duration-base) ease,
    border-color var(--duration-base) ease,
    box-shadow 260ms ease,
    transform var(--duration-hover) var(--ease-settle);
}

/* 2026-08-02, owner review round 3 (items 4 + 10). The owner reported the light stripe across
   the top of the CTAs a *second* time, now specifically on hover. Measured at 4x before this
   change, mean row luminance across the first device rows inside the border box:

     hero secondary  hover  rows 10-14: 141 235 235 235 183   body 42   → a +193 plateau
     price acid CTA  hover  rows  7-9 : 235 235 235           body 62   → +173
     hero primary    hover  rows 10-13: 252 255 255 255       body 244  → +11
     nav CTA         hover  rows  8-10: 255 255 255           body 244  → +11
     price CTA       hover  rows  7-9 : 255 255 255           body 244  → +11

   Every one of those is this ::before hairline going from its base opacity to 1 on hover. Last
   round it was dimmed (.76 → .3) and its outer glow removed; that was not enough, because the
   hover state still ramps it to full white. Dimming further would only make it a fainter line
   that still appears on hover, so the element is deleted outright, together with the ::after
   diagonal glint that swept across on the same trigger.

   What carries the volume instead is what already did: --shadow-cta-crown, a top bloom with no
   zero-offset row, and the body gradient. Both are declared *identically* in the base and hover
   states, so the top edge of every CTA is pixel-identical before and after the pointer arrives —
   hover is scale(--scale-cta-hover) on --ease-settle plus a wider halo, and nothing else. */
.primary-button > *,
.header-cta > *,
.price-card-v2 > a > *,
.community-finale-copy > a > * {
  position: relative;
  z-index: 2;
}

.primary-button:hover,
.header-cta:hover,
.price-card-v2 > a:hover,
.community-finale-copy > a:hover {
  color: var(--cta-ink);
  border-color: rgba(110, 132, 13, .92);
  background:
    linear-gradient(180deg, #f6ffb4 0%, #e4ff62 48%, #b4d51d 132%);
  box-shadow:
    var(--shadow-cta-crown),
    inset 0 -12px 22px rgba(88, 107, 10, .16),
    0 16px 34px rgba(118, 143, 13, .25),
    0 0 0 7px rgba(223, 255, 79, .1),
    0 0 42px rgba(223, 255, 79, .18);
  /* Reference hover model: the whole stack scales and nothing inside moves. The old
     `translateY(-2px)` is dropped on purpose — the hero puts both CTAs on one row, and a
     lift shifted the row's optical baseline while a pure scale does not. */
  transform: scale(var(--scale-cta-hover));
}

.primary-button:active,
.header-cta:active,
.price-card-v2 > a:active,
.community-finale-copy > a:active {
  box-shadow:
    inset 0 2px 8px rgba(76, 91, 11, .22),
    0 5px 12px rgba(95, 114, 13, .18);
  transform: translateY(0) scale(.992);
}

.button-icon,
.header-cta svg,
.price-card-v2 > a i,
.community-finale-copy > a span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: var(--paper);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .13), transparent 34%),
    var(--ink);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .14),
    0 7px 14px rgba(11, 12, 13, .2);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--ease-reveal);
}

.header-cta svg {
  padding: 10px;
  stroke: currentColor;
}

.primary-button:hover .button-icon,
.header-cta:hover svg,
.price-card-v2 > a:hover i,
.community-finale-copy > a:hover span {
  color: var(--acid);
  background-color: #080909;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .18),
    0 8px 18px rgba(11, 12, 13, .28),
    0 0 0 4px rgba(11, 12, 13, .06);
  transform: translate3d(2px, -1px, 0);
}

.hero-free-cta {
  min-width: 326px;
  min-height: 62px;
  padding: 0 11px 0 28px;
  font-size: 14px;
  letter-spacing: -.01em;
}

.hero-free-cta .button-icon {
  right: 11px;
  width: 40px;
  height: 40px;
}

.secondary-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 28px;
  /* 2026-08-02: was `rgba(11, 12, 13, .78)`, a dark ring that made the pill end at its own
     silhouette. The reference pill is a light 2px rim around a dark body; here the border
     row and the `inset 0 1px` rim highlight below it together form those 2px. Both sit over
     the flat #1b1d1b cap described in the next comment, so the 2026-07-31 fix still holds:
     the acid radial never reaches either row. */
  border: 1px solid var(--club-rim-light);
  border-radius: 999px;
  color: var(--paper);
  /* 2026-07-31: the leading `linear-gradient` is a 2px neutral cap, and it is the fix for a
     three-way collision on the top edge.

     The rim highlight `inset 0 1px rgba(255,255,255,.12)` paints over every background layer,
     and the acid radial peaks at exactly y=0 — its hottest point sat on the same row. Composited:
     centre (83,90,62) at saturation .311 against (54,56,54) at .036 out by the corners. One 1px
     line swinging .275 in saturation is why the "white" highlight read olive in the middle.

     Capping the top 2px to flat #1b1d1b puts the highlight back over a neutral base, so it
     composites to (54,56,54) across its whole length. The acid wash is untouched from y=7 down,
     which is where it was actually doing the work. */
  background:
    linear-gradient(180deg, #1b1d1b 0 2px, rgba(27, 29, 27, 0) 7px),
    radial-gradient(ellipse at 50% 0%, rgba(223, 255, 79, .17), transparent 42%),
    linear-gradient(180deg, #1b1d1b, #090a0a);
  box-shadow:
    0 9px 22px rgba(11, 12, 13, .14),
    var(--shadow-cta-halo-ink);
  font-size: 13px;
  font-weight: 760;
  transition:
    color var(--duration-base) ease,
    border-color var(--duration-base) ease,
    box-shadow 240ms ease,
    transform var(--duration-hover) var(--ease-settle);
}

/* The reference pill's label is a vertical grey→white gradient, not a flat fill. The
   element itself already owns a background, so the gradient has to live on an inner span —
   the one markup change in this task, made at the single `.secondary-button` in index.html.
   Guarded by @supports: without background-clip the label would render transparent. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .secondary-button > .button-label {
    position: relative;
    z-index: 2;
    background: var(--gradient-cta-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Repeats the base rule verbatim, so it needs the same 2px neutral cap — without it the hero
   button (the one the defect was reported on) keeps the uncapped background and nothing changes. */
.hero-actions .secondary-button {
  color: var(--paper);
  border-color: var(--club-rim-light);
  background:
    linear-gradient(180deg, #1b1d1b 0 2px, rgba(27, 29, 27, 0) 7px),
    radial-gradient(ellipse at 50% 0%, rgba(223, 255, 79, .17), transparent 42%),
    linear-gradient(180deg, #1b1d1b, #090a0a);
  box-shadow:
    0 9px 22px rgba(11, 12, 13, .14),
    var(--shadow-cta-halo-ink);
}

/* 2026-07-31: was `inset: 0 18% auto` with a flat `background: var(--acid)`, i.e. an opaque acid
   bar sharing row y=0 with the rim highlight and hard-stopping at 18%/82%. Two consequences, both
   reported: it replaced the highlight over the middle two thirds rather than accenting it, and its
   ends cut off in open space well short of the corner radius — worse at 390px, where the button is
   wider so 18% is a longer dead run.

   Now: dropped to y=1 so the rim highlight owns y=0 unbroken around the full pill, and the ends
   dissolve instead of stopping. The `box-shadow` glow is gone on purpose — box-shadow follows the
   border box, not the background's alpha, so it would have re-drawn hard rounded ends exactly where
   the gradient fades and undone the fix. The glow now comes from the button's own acid radial,
   which has no ends by construction. */
/* 2026-08-02, owner review round 3: this used to be an acid hairline at y=1, dimmed to .34 last
   round and still ramped to opacity 1 on hover — measured at 4x it went from L=99 to a
   three-device-row plateau at L=235 against a body at L=42. That is the widest of the five
   stripes the owner reported, so the element is gone. The pill's top edge is now the border row
   plus the `inset 0 1px rgba(255,255,255,.12)` rim, which hover leaves untouched. */

.secondary-button:hover {
  /* 2026-08-02, review: `color: #fff` used to be here and was dead — the label is a
     .button-label span with `color: transparent` under the gradient, so nothing consumed it.
     Not replaced with a brighter gradient either: the reference model is that nothing inside
     the pill changes on hover, only the stack scales. */
  /* Was `rgba(11, 12, 13, .94)`, which erased the new light rim on hover. --club-line-light
     is the confirmed paper-tinted line token and reads one step brighter than the rim. */
  border-color: var(--club-line-light);
  /* The rim is repeated at *exactly* the base alpha (.12, not the .16 it used to jump to), so
     the top row does not change value when the pointer arrives. Everything hover adds is below
     and around the pill: a deeper drop shadow, a wider ring, the same ink halo. */
  box-shadow:
    0 14px 30px rgba(11, 12, 13, .2),
    0 0 0 5px rgba(223, 255, 79, .07),
    var(--shadow-cta-halo-ink);
  transform: scale(var(--scale-cta-hover));
}

.secondary-button:active {
  transform: translateY(0) scale(.992);
}

.header-cta {
  min-height: 50px;
  padding: 0 7px 0 21px;
  gap: 12px;
  text-transform: uppercase;
}

.site-header.is-dark .header-cta,
.site-header.is-dark .header-cta:hover {
  color: var(--ink);
  border-color: rgba(128, 154, 21, .76);
  background:
    linear-gradient(180deg, var(--cta-fill-top) 0%, var(--cta-fill-mid) 52%, var(--cta-fill-bottom) 132%);
}

.price-card-v2 > a {
  min-height: 58px;
  padding: 0 9px 0 19px;
  color: var(--ink);
  font-weight: 760;
}

.price-card-acid > a {
  --cta-fill-top: #1d201d;
  --cta-fill-mid: #0c0d0d;
  --cta-fill-bottom: #050606;
  --cta-ink: var(--paper);
  color: var(--paper);
  border-color: rgba(11, 12, 13, .8);
  text-shadow: none;
}

.price-card-acid > a:hover {
  color: var(--paper);
  border-color: #000;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(223, 255, 79, .14), transparent 44%),
    linear-gradient(180deg, #1d201d, #070808);
  /* 2026-08-02: the acid card's CTA is the dark one, and `inset 0 1px rgba(255,255,255,.14)`
     on a near-black body is the most visible stripe of the five. It is dropped; the crown
     inherited from .primary-button is identical in both states, so hover adds no top edge. */
  box-shadow:
    var(--shadow-cta-crown),
    0 16px 34px rgba(11, 12, 13, .22),
    0 0 0 7px rgba(11, 12, 13, .07);
}

.price-card-acid > a i {
  color: var(--ink);
  background: var(--acid);
}

.trial-copy-v2 .primary-button {
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--cta-fill-top) 0%, var(--cta-fill-mid) 52%, var(--cta-fill-bottom) 132%);
}

.community-finale-copy > a {
  gap: 18px;
  min-height: 60px;
  padding: 0 10px 0 25px;
}

.community-finale-copy > a span {
  margin: 0;
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.header-cta:focus-visible,
.price-card-v2 > a:focus-visible,
.community-finale-copy > a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow:
    0 0 0 7px var(--acid),
    0 14px 34px rgba(11, 12, 13, .2);
}

@media (max-width: 980px) {
  .hero-mist {
    width: 58vw;
    opacity: .58;
  }

  .hero-atmosphere::after {
    inset-inline: 18px;
  }
}

@media (max-width: 767px) {
  .hero-atmosphere {
    background:
      radial-gradient(ellipse 86% 40% at 50% 34%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .56) 52%, transparent 82%),
      radial-gradient(ellipse 74% 44% at 50% 95%, rgba(208, 214, 196, .2), transparent 74%),
      var(--paper);
  }

  .hero-atmosphere::before {
    background-size: 62px 62px;
    opacity: .32;
    transform: perspective(620px) rotateX(69deg) translateY(56%) scale(1.65);
  }

  .hero-atmosphere::after {
    inset: 74px 10px 12px;
    border-radius: 28px;
  }

  .hero-mist {
    top: 9%;
    width: 78vw;
    height: 76%;
    filter: blur(26px);
    opacity: .58;
  }

  .hero-mist-left {
    left: -54vw;
  }

  .hero-mist-right {
    right: -54vw;
  }

  .hero-depth-plane {
    right: 4%;
    bottom: -5%;
    left: 4%;
    height: 42%;
    opacity: .78;
    transform: perspective(620px) rotateX(62deg) scale(1.04);
  }

  .hero-actions {
    width: min(100%, 320px);
    grid-template-columns: minmax(0, 300px);
    gap: 10px;
    margin-inline: auto;
    align-items: stretch;
    justify-content: center;
  }

  .hero-actions .primary-button,
  .hero-actions .secondary-button {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 56px;
  }

  .hero-free-cta {
    padding-left: 22px;
    font-size: 13px;
    white-space: nowrap;
  }

  .header-cta {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere,
  .primary-button,
  .secondary-button,
  .header-cta,
  .price-card-v2 > a,
  .community-finale-copy > a,
  .button-icon,
  .header-cta svg,
  .price-card-v2 > a i,
  .community-finale-copy > a span {
    transition: none;
  }

  .primary-button:hover,
  .secondary-button:hover,
  .header-cta:hover,
  .price-card-v2 > a:hover,
  .community-finale-copy > a:hover,
  .primary-button:hover .button-icon,
  .header-cta:hover svg,
  .price-card-v2 > a:hover i,
  .community-finale-copy > a:hover span {
    transform: none;
  }
}

/* Final pre-delivery overrides. Keep this block last in the cascade. */

@media (min-width: 981px) {
  .club-universe .universe-panels {
    display: block;
    min-height: 1920px;
    padding-bottom: 72vh;
  }

  .club-universe .universe-panel,
  .club-universe .universe-panel[hidden] {
    position: sticky;
    top: clamp(128px, 18vh, 176px);
    z-index: 1;
    height: min(650px, calc(100svh - 152px));
    min-height: min(520px, calc(100svh - 152px));
    max-height: 650px;
    grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
    gap: clamp(24px, 2.4vw, 40px);
    margin-bottom: 25vh;
    padding: clamp(22px, 2vw, 30px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(.988);
  }

  .club-universe .universe-panel.is-active {
    z-index: 3;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

/* 2026-08-02, owner review: the "Анонс ближайших событий" card was being sliced through the
   middle of its content and the rearmost card's text showed in the gap underneath.
   Not a media-query problem — this floor was. `.context-format-row` sits inside a fixed
   650px universe panel and gives this cell 237–251px of inner height from 1200px up, while
   this `min-height` demanded 348–430px. The collage overflowed by 97–193px and the row's
   `overflow: hidden` cut the difference, split top and bottom by `align-content: center`.
   Sizing the collage to the height it actually gets means the cards scale with the box and
   the crop goes back to being the designed passepartout instead of a cut across a phone. */
body .context-channel-collage {
  position: relative;
  display: block;
  /* `align-self: stretch` is what gives it a height at all: the row is `align-items: center`
     and this cell's only children are absolutely positioned, so it shrink-wraps to nothing.
     Stretch alone is not enough — the row also carries `align-content: center`, which
     content-sizes the single track to the copy column (131px). The pair of rules below opens
     the track to the row's full inner height, which is the largest the collage can be without
     being cut. */
  align-self: stretch;
  height: auto;
  min-height: 0;
  overflow: hidden;
}


body .context-channel-collage .channel-collage-card {
  position: absolute;
  inset: auto;
  width: auto;
  margin: 0;
}

body .context-channel-collage .channel-collage-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

body .context-channel-collage .channel-collage-structure {
  top: 7%;
  right: 31%;
  z-index: 2;
  width: auto;
  height: 88%;
  aspect-ratio: 672 / 1400;
}

body .context-channel-collage .channel-collage-events {
  top: 12%;
  left: 8%;
  z-index: 3;
  width: auto;
  height: 76%;
  aspect-ratio: 672 / 1304;
}

body .context-channel-collage .channel-collage-build {
  top: 5%;
  right: 7%;
  z-index: 1;
  width: auto;
  height: 82%;
  aspect-ratio: 672 / 1344;
}

body .context-channel-collage .channel-collage-meme {
  right: 21%;
  bottom: 6%;
  z-index: 4;
  width: auto;
  height: 64%;
  aspect-ratio: 672 / 1072;
}

body .practice-window-body {
  display: block;
  padding: 8px;
}

body .practice-team-scene {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 350px;
}

body .practice-team-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subscription-rail article {
  background-position: center 34%;
  background-size: cover;
}

/* 2026-08-03: набор артов заменён на новый из Notion («Карточки обновленные перед тарифами»),
   порядок карточек — оттуда же. Салатовая заливка осталась у двух из одиннадцати: «Use-кейсы»
   и «Тест разработок». Выбор не на глаз — замерен тон самих артов: у этих двух зелёный канал
   доминирует над красным и синим на 29 и 17 уровней, у остальных разница в пределах двух.
   Акцент совпадает с картинкой, а не спорит с ней, и приходится на 5-ю и 10-ю позиции. */
.subscription-rail article:nth-child(1) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .82) 60%, var(--paper) 73%), url("assets/membership/art-community-access-v2.webp");
}

.subscription-rail article:nth-child(2) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-fresh-materials-v2.webp");
}

.subscription-rail article:nth-child(3) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-all-courses-v2.webp");
}

.subscription-rail article:nth-child(4) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-club-channel-v2.webp");
}

.subscription-rail article:nth-child(5) {
  color: var(--ink);
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(223, 255, 79, .78) 60%, var(--acid) 73%), url("assets/membership/art-use-cases-v2.webp");
}

.subscription-rail article:nth-child(6) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-community-chat-v2.webp");
}

.subscription-rail article:nth-child(7) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-live-events-v2.webp");
}

.subscription-rail article:nth-child(8) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/practice-ai-room-team-v1.webp");
}

.subscription-rail article:nth-child(9) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-platform-portal-v2.webp");
}

.subscription-rail article:nth-child(10) {
  color: var(--ink);
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(223, 255, 79, .78) 60%, var(--acid) 73%), url("assets/membership/art-dev-tests-v1.webp");
}

.subscription-rail article:nth-child(11) {
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(244, 244, 240, .84) 60%, var(--paper) 73%), url("assets/membership/art-income-talk-v1.webp");
}

.quiz-question > p {
  color: var(--accent-on-light);
}

.quiz-question > h2,
.quiz-option,
.quiz-option strong {
  color: var(--ink);
}

.quiz-result-list a,
.quiz-result .quiz-join-link {
  color: var(--ink);
  border-color: rgba(11, 12, 13, .22);
  background: rgba(11, 12, 13, .045);
}

.quiz-result-list a::before,
.quiz-result-list a i {
  color: var(--accent-on-light);
}

@media (max-width: 767px) {
  body .context-channel-collage {
    min-height: 300px;
  }

  body .context-channel-collage .channel-collage-structure {
    right: 30%;
    width: auto;
    height: 86%;
  }

  body .context-channel-collage .channel-collage-events {
    left: 4%;
    width: auto;
    height: 72%;
  }

  body .context-channel-collage .channel-collage-build {
    right: 3%;
    width: auto;
    height: 78%;
  }

  body .context-channel-collage .channel-collage-meme {
    right: 18%;
    width: auto;
    height: 58%;
  }

  body .practice-team-scene {
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .universe-panel.is-active .channel-collage-card {
    animation: none;
  }
}

/* Stable three-scene scroll theater. */
.universe-stage {
  display: contents;
}

@media (min-width: 981px) {
  .club-universe .universe-panels {
    position: relative;
    display: block;
    min-height: 340svh;
    padding-bottom: 0;
  }

  .club-universe .universe-stage {
    position: sticky;
    /* Floor 164px, not 128: the docked switcher sits at top 96 and is ~64px tall, so any
       stage top under 160 puts the scene under the tabs (at 18vh that happens on every
       viewport shorter than ~890px). 164 keeps 4px of air at the worst case. */
    top: clamp(164px, 18vh, 176px);
    display: block;
    width: 100%;
    height: min(650px, calc(100svh - 152px));
  }

  .club-universe .universe-stage .universe-panel,
  .club-universe .universe-stage .universe-panel[hidden] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(.988);
    /* Уходящая панель должна успеть отыграть выход: visibility прячется с задержкой
       на длину opacity-транзишена, а не в момент смены класса. */
    transition:
      opacity 320ms ease,
      transform 500ms cubic-bezier(.2, .8, .2, 1),
      border-color 220ms ease,
      visibility 0s linear 320ms;
  }

  /* «Перелистывание»: пройденная панель ждёт СВЕРХУ, будущая — снизу. Без этого обе
     соседки стоят в одной точке и смена читается кросс-фейдом, а не листанием. */
  .club-universe .universe-stage .universe-panel.is-before {
    transform: translate3d(0, -22px, 0) scale(.988);
  }

  .club-universe .universe-stage .universe-panel.is-active {
    z-index: 3;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 320ms ease,
      transform 500ms cubic-bezier(.2, .8, .2, 1),
      border-color 220ms ease,
      visibility 0s linear 0s;
  }
}

@media (min-width: 981px) and (max-height: 819px) {
  .club-universe .universe-switcher {
    position: sticky;
    top: 82px;
  }

  .club-universe .universe-stage {
    top: 164px;
    height: calc(100svh - 176px);
  }

  .club-universe .universe-stage .universe-panel {
    padding: 22px;
  }

  .club-universe .universe-stage .universe-copy h3 {
    font-size: clamp(37px, 3.45vw, 46px);
  }

  .club-universe .universe-stage .benefit-stack {
    gap: 6px;
    margin-top: 14px;
  }

  .club-universe .universe-stage .benefit-stack > div {
    padding: 10px 12px;
  }

  .club-universe .universe-stage .practice-team-scene {
    min-height: 0;
  }
}

/* 2026-07-30: cinematic brand prelude and controlled hero reveal. */
html.has-brand-intro,
html.has-brand-intro body {
  overflow: hidden;
}

html.has-brand-intro.intro-unlocked,
html.has-brand-intro.intro-unlocked body {
  overflow: auto;
}

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  perspective: 1400px;
  isolation: isolate;
}

/* 2026-08-10: занавес держал нажатия ещё ~0.4 с после того, как погас.
   Замер шагом 100 мс (chromium 360x740, webkit 390x844): полотно съезжает с точки кнопки
   на ~1955 мс, а клик доходит только на ~2370 мс — в этом промежутке сверху лежит
   `.brand-intro-depth` с opacity 0, то есть невидимый слой ест нажатия. Трафик идёт
   с рилсов, человек приходит и жмёт сразу — это правдоподобная часть жалоб фокус-группы
   «не срабатывает с первого раза» (C2, C3).

   Первая попытка — снять перехват с контейнера, оставив его только полотну — оказалась
   негодной и откачена: `.brand-intro-sheet` закрывает не весь экран, и на Pixel 7 Pro
   и 3440x1440 нажатие проходило СКВОЗЬ ещё видимый занавес, то есть вслепую. Хуже
   исходной беды.

   Рабочий вариант: пропускаем указатель ровно тогда, когда подложка догорела до нуля —
   по событию окончания её перехода прозрачности, а не по таймеру. Пока занавес виден
   хоть чем-то, он по-прежнему перехватывает всё. Анимация двери и её тайминги не тронуты. */
body.intro-pointer-through .brand-intro {
  pointer-events: none;
}

.brand-intro-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 34% at 50% 54%, rgba(223, 255, 79, .15), transparent 72%),
    linear-gradient(180deg, #f8f7f2, #e7e8e2);
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity 700ms var(--ease-reveal),
    transform 900ms var(--ease-reveal);
}

.brand-intro-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 3vw, 52px);
  background:
    radial-gradient(ellipse 70% 56% at 50% 42%, rgba(255, 255, 255, .98), transparent 76%),
    var(--paper);
  box-shadow: 0 32px 90px rgba(11, 12, 13, .18);
  transform-origin: 50% 0;
  transition:
    transform 920ms cubic-bezier(.72, 0, .18, 1),
    border-radius 800ms var(--ease-reveal),
    filter 700ms var(--ease-reveal);
}

.brand-intro-sheet::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(11, 12, 13, .08);
  border-radius: 0;
  pointer-events: none;
}

.brand-intro-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.3vw, 34px);
  transform: translateY(16px);
}

.brand-intro-mark {
  position: relative;
  display: grid;
  width: clamp(38px, 4vw, 64px);
  height: clamp(76px, 8vw, 128px);
  opacity: 0;
  transform: translate3d(-16px, 0, 0) scale(.84);
  transition:
    opacity 520ms var(--ease-reveal) 120ms,
    transform 760ms var(--ease-reveal) 120ms;
}

.brand-intro-mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-intro-mark-fill {
  fill: var(--ink);
}

.brand-intro-mark-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
}

.brand-intro-mark::after {
  content: "";
  position: absolute;
  top: 19%;
  right: 2%;
  bottom: 19%;
  width: 42%;
  border: 1px solid rgba(255, 255, 255, .82);
  background: var(--paper);
  transform-origin: 0 50%;
  transform: perspective(280px) rotateY(0deg);
  transition: transform 720ms cubic-bezier(.22, .75, .2, 1) 720ms;
}

.brand-intro-name {
  display: grid;
  font-size: clamp(44px, 7vw, 112px);
  font-weight: 780;
  line-height: .78;
  letter-spacing: -.07em;
}

.brand-intro-name > span {
  display: block;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 420ms ease,
    clip-path 820ms var(--ease-reveal),
    transform 820ms var(--ease-reveal);
}

.brand-intro-name > span:first-child {
  transition-delay: 260ms;
}

.brand-intro-name > span:last-child {
  color: rgba(11, 12, 13, .34);
  transition-delay: 420ms;
}

/* 2026-08-02, owner review (round 3, item 1): the `OPENING / 01` badge this styles was removed
   from index.html — the owner read it as a stray label on the hero. The rules below are kept
   rather than deleted only because the comment inside documents the one genuinely undefined
   custom property this file ever had; they match nothing today. Deleting the <span> is safe
   because the badge is `position: absolute` inside the fixed intro curtain, so it contributed
   nothing to the intro's layout or to its timing chain. */
.brand-intro-index {
  position: absolute;
  right: clamp(24px, 3vw, 52px);
  bottom: clamp(22px, 3vw, 44px);
  /* 2026-07-31: was `var(--mono)`, which is declared in neither styles.css nor tokens.css, so
     this one declaration really was dead and the badge inherited Arial. It is the ONLY genuinely
     undefined custom property in the file — --ease-reveal and friends all resolve via the
     `@import` on line 1, verified in the browser. The mono token is named --font-meridian-mono.
     No webfont is loaded for it, so it resolves to a local stack (SF Mono / Consolas / monospace)
     and pulls in nothing remote. */
  font-family: var(--font-meridian-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 420ms ease 760ms,
    transform 620ms var(--ease-reveal) 760ms;
}

body.intro-running .brand-intro-depth {
  opacity: 1;
  transform: scale(1);
}

body.intro-running .brand-intro-mark,
body.intro-running .brand-intro-name > span,
body.intro-running .brand-intro-index {
  opacity: 1;
  transform: none;
}

body.intro-running .brand-intro-name > span {
  clip-path: inset(0 0 0 0);
}

body.intro-running .brand-intro-mark::after {
  transform: perspective(280px) rotateY(-52deg);
}

body.intro-leaving .brand-intro-sheet {
  border-radius: 0 0 clamp(34px, 5vw, 86px) clamp(34px, 5vw, 86px);
  filter: drop-shadow(0 34px 48px rgba(11, 12, 13, .18));
  transform: translate3d(0, -108%, 0) rotateX(-3deg);
}

body.intro-leaving .brand-intro-depth {
  opacity: 0;
  transform: scale(1.08);
}

body.intro-complete .brand-intro {
  visibility: hidden;
  pointer-events: none;
}

html.has-brand-intro .site-header {
  opacity: 0;
  transform: translateY(-12px);
}

html.has-brand-intro .hero-line,
html.has-brand-intro .hero-note,
html.has-brand-intro .hero-actions {
  opacity: 0;
}

html.has-brand-intro .hero-line {
  transform: translate3d(0, 28px, 0);
}

html.has-brand-intro .hero-note,
html.has-brand-intro .hero-actions {
  transform: translate3d(0, 14px, 0);
}

html.has-brand-intro body.intro-revealing .site-header {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms ease 180ms,
    transform 820ms var(--ease-reveal) 180ms;
}

html.has-brand-intro body.intro-revealing .hero-line,
html.has-brand-intro body.intro-revealing .hero-note,
html.has-brand-intro body.intro-revealing .hero-actions {
  opacity: 1;
  transform: none;
  transition:
    opacity 680ms ease,
    transform 900ms var(--ease-reveal);
}

html.has-brand-intro body.intro-revealing .hero-line:nth-child(1) {
  transition-delay: 180ms;
}

html.has-brand-intro body.intro-revealing .hero-line:nth-child(2) {
  transition-delay: 280ms;
}

html.has-brand-intro body.intro-revealing .hero-line:nth-child(3) {
  transition-delay: 380ms;
}

html.has-brand-intro body.intro-revealing .hero-note {
  transition-delay: 500ms;
}

html.has-brand-intro body.intro-revealing .hero-actions {
  transition-delay: 600ms;
}

@media (max-width: 767px) {
  .brand-intro-sheet {
    padding: 20px;
  }

  .brand-intro-sheet::before {
    inset: 8px;
  }

  .brand-intro-lockup {
    align-items: flex-end;
    gap: 14px;
  }

  .brand-intro-name {
    font-size: clamp(52px, 17vw, 76px);
    line-height: .8;
  }

  .brand-intro-mark {
    width: 34px;
    height: 72px;
  }

  .brand-intro-index {
    right: 20px;
    bottom: 18px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-intro-depth,
  .brand-intro-sheet,
  .brand-intro-mark,
  .brand-intro-mark::after,
  .brand-intro-name > span,
  .brand-intro-index,
  html.has-brand-intro .site-header,
  html.has-brand-intro .hero-line,
  html.has-brand-intro .hero-note,
  html.has-brand-intro .hero-actions {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* Motion film stays behind the live HTML and yields before the door takes focus. */
.hero-hand-film {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--hero-exit) * 1.65), .72);
  transform: translate3d(0, calc(var(--hero-exit) * -10px), 0) scale(calc(1 + var(--hero-exit) * .025));
  /* Без transition: opacity здесь — clamp() от var(--hero-exit), которую скролл пишет
     покадрово; каждое новое значение перезапускало бы 360мс-переход. Переход для
     дискретного появления still живёт на img[data-hero-hand-still]. */
  mask-image: linear-gradient(to bottom, transparent 0 11%, #000 30% 89%, transparent 100%);
}

.hero-hand-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 56% 48% at 50% 74%, transparent 0 48%, rgba(244, 243, 238, .28) 72%, rgba(244, 243, 238, .82) 100%),
    linear-gradient(180deg, rgba(244, 243, 238, .62), transparent 27% 78%, rgba(244, 243, 238, .7));
}

/* 2026-07-31: `ai-room-human-ai-frame-v2.webp` replaces the old motion clip here.

   All the compensating geometry this rule used to carry is gone, because the defect it was
   compensating for is gone. The previous asset was a 1920x1080 container whose footage sat
   only in the LEFT 960x1080 — right half flat background, human forearm hard-cut at source
   x=960 (verified by decoding a frame to canvas: content bbox x 0-957, y 591-1077). That is
   why the old rule combined `clip-path: inset(0 50% 0 0)` with `scale(2.02, .96)`: crop away
   the dead half, then stretch the survivor back across the hero — at the cost of ~2.1x of
   horizontal distortion.

   The replacement is a true 16:9 frame (1672x941) whose content spans the full width, 0-99.9%,
   with both forearms bleeding off the left and right edges and the content band confined to
   y 63-92% so the copy above it sits on clean paper. So the rule is now just `cover`: it can
   never distort, it crops symmetrically into arms that already run off-frame, and it needs no
   mask to hide a cut edge because there is no cut edge.

   Selector covers <img> and <video>: this is a still today, but the frame is the master for a
   motion version, and swapping the tag back must not need a CSS change. */
.hero-hand-film :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Грейд saturate(.9) contrast(.98) запечён в сами ассеты (loop-v3.mp4, still-v2.webp):
     CSS-фильтр на живом <video> выбивал его с overlay-пути — каждый декодированный кадр
     шёл через фильтруемую поверхность (аудит 19.08). */
}

/* 2026-08-01: ONE <video>, no masked layers. This replaced a two-layer scheme, and the reason
   the scheme existed is now the reason it had to go.

   It used to be a single still split across two `.hero-hand-layer` divs, each masking away the
   arm it did not own, so the two arms could be translated in independently — a 2.4% crossfade
   centred on the empty paper between the fingertips, with only ~2px of margin either side.

   The asset now performs that entrance itself (`ai-room-hands-loop-v1.mp4`: empty -> arms in ->
   hold -> arms out, 5.46s), so the split has no job left, and keeping it would actively break
   things:

   - Two <video> elements decoding the same file are not frame-locked. Any drift tears the
     picture along the seam — and the seam runs right through the gap between the fingertips,
     the one place the eye is looking.
   - `script.js` binds a single element (`[data-hero-hand-film] video`), so a second one would
     simply never be started.

   What the split bought on exit is already provided one level up: `.hero-hand-film` itself
   fades, lifts and scales on `--hero-exit`.

   KNOWN DEFECT IN THE ASSET, accepted deliberately on 2026-08-01: the band x 801-840 of 1672
   sits 2-5 luma levels darker than the surrounding paper in EVERY frame, including the empty
   ones. It is the one strip the generator left at the source exposure while re-lighting the
   rest of the frame, because the prompt named those coordinates. Composited at the film's .72
   opacity it measures ~3/255. If you ever see a faint vertical seam mid-frame, it is baked into
   the file — do not go looking for a CSS cause. */
.hero-hand-film :is(video, img[data-hero-hand-still]) {
  transform: translate3d(0, 6%, 0);
}

/* 2026-08-03: the still that stands in when the film cannot run (iOS Low Power Mode rejects
   `play()`; see the comment on the <img> in index.html). It is folded into the selector above
   rather than given its own transform so the two can never drift apart — the mobile override at
   the bottom of this file re-aims both in one place.

   Absolute so it overlays the film instead of stacking below it, and it deliberately stays
   BELOW `.hero-hand-film::after`: both are absolutely positioned with no z-index, so DOM order
   decides, and ::after is generated last. That means the fallback gets the same paper wash and
   vignette as the video and reads as the same picture, not as a pasted-in image. */
.hero-hand-film img[data-hero-hand-still] {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-reveal);
}

.hero-hand-film.is-still-shown img[data-hero-hand-still] {
  opacity: 1;
}

/* The entrance used to live here as two `@keyframes` fired by `body.intro-complete`. It is now
   inside the asset, so those rules are gone — but the timing lesson they encoded still applies
   and is now enforced by `syncHeroHandFilm()` in `script.js`, which is the only thing that
   calls `.play()`:

   Playback MUST be keyed to `intro-complete`, not to page load and not to `intro-revealing`.
   The brand-intro curtain covers the hero until ~2.43s. An earlier attempt started ~850ms
   sooner and the whole point was lost — measured, one arm was already 76% home the moment the
   curtain lifted, so the viewer saw a pop rather than an entrance. Plain `autoplay` on the
   element would reintroduce exactly that bug, which is why the markup does NOT carry it.

   Nor does the markup carry `loop`. The clip ends on an empty frame by design: the arms make
   the gesture once, on first open, the way the reference does, and then leave the copy alone.
   Looping it would be the constant ambient motion AGENTS.md rules out.

   `syncHeroHandFilm()` also covers the cases the old CSS could not: it holds playback while
   the tab is hidden or the hero is scrolled out of view, refuses to start below 980px, and
   refuses under `prefers-reduced-motion`. Fails safe on a deep link: with no intro at all,
   `intro-complete` is set immediately and the clip simply plays. */

/* Exit stays tied to `--hero-exit`, the scroll driver the hero already uses — the film fades,
   lifts and scales as the door takes focus. That now happens on `.hero-hand-film` alone; there
   are no per-arm transforms left to compose with it. */

.hero-shell {
  z-index: 8;
}

/* Round 4b: the film used to be display:none here — the mobile hero ended in ~500px of
   blank paper. The v2 asset is 208 KB, so the phone now gets the hands as a bottom band:
   the 16:9 frame cover-crops to the centre where the hands actually meet. */
@media (max-width: 980px) {
  .hero-hand-film {
    top: auto;
    bottom: 0;
    height: min(44vh, 360px);
    mask-image: linear-gradient(to bottom, transparent 0 5%, #000 24% 86%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hand-film {
    display: none;
  }
}

/* 2026-07-30: mobile navigation. Below 768px the desktop rail is hidden, so the
   four sections need their own reachable entry point instead of scroll only. */
.nav-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms var(--ease-swift, ease), border-color 200ms var(--ease-swift, ease);
}

.nav-toggle i {
  display: block;
  width: 15px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 220ms var(--ease-settle, ease), opacity 160ms linear;
}

.nav-toggle:hover {
  background: rgba(11, 12, 13, .06);
}

.site-header.is-dark .nav-toggle:hover {
  background: rgba(243, 240, 232, .1);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

body.nav-open .nav-toggle i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

body.nav-open .nav-toggle i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  align-content: start;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 10, 10, .58);
  opacity: 0;
  transition: opacity 260ms var(--ease-swift, ease);
}

body.nav-open {
  overflow: hidden;
}

.mobile-nav-sheet {
  position: relative;
  display: grid;
  gap: 4px;
  /* Clears the fixed header, which is 82px down to 680px and 68px below it. */
  padding: calc(var(--mobile-nav-top, 82px) + 16px) 14px 22px;
  color: var(--paper);
  /* Fully opaque: at 97% the hero headline ghosted through the panel. */
  background: var(--ink);
  border-bottom: 1px solid rgba(243, 240, 232, .14);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
  transform: translateY(-14px);
  opacity: 0;
  transition: transform 300ms var(--ease-reveal, ease), opacity 220ms var(--ease-swift, ease);
}

body.nav-open .mobile-nav-backdrop {
  opacity: 1;
}

body.nav-open .mobile-nav-sheet {
  transform: none;
  opacity: 1;
}

.mobile-nav-kicker {
  margin: 0 0 6px;
  padding-inline: 12px;
  color: rgba(243, 240, 232, .46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mobile-nav-sheet > a:not(.mobile-nav-cta) {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms var(--ease-swift, ease);
}

.mobile-nav-sheet > a:not(.mobile-nav-cta):hover,
.mobile-nav-sheet > a:not(.mobile-nav-cta):focus-visible {
  background: rgba(243, 240, 232, .07);
}

.mobile-nav-sheet > a:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.mobile-nav-sheet i {
  color: var(--acid);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .08em;
}

.mobile-nav-sheet b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.mobile-nav-sheet small {
  display: block;
  margin-top: 2px;
  color: rgba(243, 240, 232, .5);
  font-size: 11px;
  line-height: 1.35;
}

.mobile-nav-sheet em {
  color: rgba(243, 240, 232, .38);
  font-size: 13px;
  font-style: normal;
}

.mobile-nav-cta {
  margin-top: 12px;
  width: 100%;
}

@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-header {
    gap: 10px;
  }

  .header-cta {
    margin-left: auto;
  }

  /* The open sheet owns the screen; the toggle stays above it to close again. */
  body.nav-open .site-header {
    z-index: 115;
    color: var(--paper);
    background: transparent;
  }

  body.nav-open .site-header::after {
    opacity: 0;
  }

  /* The sheet carries its own full-width CTA, so the header icon would only
     repeat it. Fade instead of hide to keep the toggle from shifting. */
  body.nav-open .header-cta {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 680px) {
  .mobile-nav-sheet {
    --mobile-nav-top: 68px;
  }
}

@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle i,
  .mobile-nav-backdrop,
  .mobile-nav-sheet {
    transition-duration: 1ms;
  }
}

/* 2026-07-30: the collage column's min-height inflated the card's grid row past
   the card itself, so the centred copy column slid under the overflow:hidden
   edge and sliced the last line of the paragraph on wide desktops. */
.context-format-row {
  align-content: center;
}

.context-format-row > * {
  min-height: 0;
}

/* The dashed route is layered behind the week cards, but dimming the inactive
   ones with element opacity made the whole card translucent, so the line read
   straight through their text. Dim the contents and keep the surface opaque. */
.map-node {
  opacity: 1;
}

.map-node > * {
  opacity: .58;
  transition: opacity 280ms ease;
}

.map-node.is-active > * {
  opacity: 1;
}

/* Footer links were 22x10 and 49x10 — below the minimum target size. Grow the
   hit area without changing the footer's visual rhythm. */
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  margin-block: -17px;
  margin-inline: -8px;
}

/* 2026-07-30: the channel collage is a stack of overlapping light screenshots,
   but its card edge was a 34%-white hairline — invisible against the light card
   underneath. Every overlap therefore read as text sliced mid-word instead of
   one card resting on another. A dark hairline plus a contact shadow restores
   the layering the composition assumes. */
.context-channel-collage .channel-collage-card {
  border-color: rgba(11, 12, 13, .28);
  box-shadow:
    0 1px 2px rgba(9, 10, 10, .34),
    0 8px 18px rgba(0, 0, 0, .34),
    0 24px 55px rgba(0, 0, 0, .3);
}

/* The rearmost card only ever shows a narrow strip of line-endings, which the
   container's straight edge then cuts into word fragments. Dissolve it instead
   so it reads as depth behind the stack. */
.context-channel-collage .channel-collage-build {
  -webkit-mask-image: linear-gradient(to right, #000 0 58%, transparent 96%);
  mask-image: linear-gradient(to right, #000 0 58%, transparent 96%);
}

/* 2026-08-02: word-reveal for the large section headings. The split host is an ordinary
   [data-reveal] item, so it reuses the observer, the `reveal-pending` / `is-revealed` pair
   and the cleanup that already exist above — there is no second reveal system.

   2026-08-02, review: the wrapper stays `display: inline`. `inline-block` cost real function
   — Chromium's find-in-page stopped matching any phrase that spanned two words in all nine
   headings (window.find('варианты участия.') went false), and each word became its own
   non-ignored AX node, i.e. word-by-word announcement in VoiceOver. Both are properties of
   the box type, so the fix is the box type. The price is `translateY`: transforms do not
   apply to non-replaced inline boxes, so the lift is gone and the reveal is carried by
   opacity + blur alone, which do apply. `--lift-word` was removed from tokens.css with it.
   Everything else is unchanged: whitespace stays outside the spans, so line-height,
   letter-spacing and `text-wrap: balance` resolve exactly as they did before the split. */
[data-word-reveal] .reveal-word {
  display: inline;
  /* Every one of these headings ends in a colour-shifted <span>, and all eleven rules that
     drive it are written as descendant selectors (`.roadmap-heading-v2 h2 span`, …). A word
     wrapper that is also a <span> therefore inherits the accent colour on the *first* line
     too. All eleven declare `color` and nothing else, and `[data-word-reveal] .reveal-word`
     is (0,2,0) against their (0,1,2), so one `inherit` puts every word back on the colour it
     had before the split — accent inside the accent span, base colour outside it. */
  color: inherit;
  opacity: 1;
  filter: none;
}

/* The host must not fade as a block while its words are blurring in — that reads as two
   effects on one element. Higher specificity than the generic [data-reveal] rules. */
[data-reveal][data-word-reveal].reveal-pending,
[data-reveal][data-word-reveal].reveal-pending.is-revealed {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* `transition: none` here is load-bearing. `reveal-pending` and the transition must not be
   declared together: the observer adds `reveal-pending` and then `is-revealed` two frames
   later, so a transition present in the pending state animates the words *into* hiding over
   600ms and the second class immediately reverses it — the words wobble a few percent and
   never disappear. The hidden state has to land in one frame; only the trip back out is
   animated. */
[data-word-reveal].reveal-pending .reveal-word {
  opacity: 0;
  filter: blur(var(--blur-word));
  transition: none;
  will-change: opacity, filter;
}

/* 2026-08-02, round 3, item 5: filter runs on --duration-reveal-long (700ms) while opacity
   keeps --duration-reveal (600ms), so a word is legible before it is fully sharp — the
   softening the owner asked for, without the word arriving late. */
[data-word-reveal].reveal-pending.is-revealed .reveal-word {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    filter var(--duration-reveal-long) var(--ease-reveal);
  /* --reveal-delay is the group offset the heading already had, so a heading still starts
     after its own kicker label rather than jumping ahead of it. */
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--word-index, 0) * var(--stagger-word));
}

/* Staged rather than simultaneous: everything after the heading in the same reveal group
   waits out --delay-heading-lead, so the first words are legible before the body moves.
   It has to sit on `.is-revealed`, not `.reveal-pending` — that is where the block reveal's
   transition now lives, and a delay declared against a `transition: none` state does
   nothing. Script.js gives these items a longer cleanup hold to cover the extra delay. */
[data-reveal][data-reveal-after-heading].reveal-pending.is-revealed {
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--delay-heading-lead));
}

/* 2026-08-02, review: there used to be a `@media (max-width: 980px)` opt-out here, added on
   the belief that the 980px block above already flattens every [data-reveal]. It does not —
   that flattening lives in the `prefers-reduced-motion` block, and block reveals run at
   every width. Keeping the opt-out would have produced exactly the inversion it was meant to
   prevent: an animated body under a static heading on phones. Word-reveal now runs at every
   width, like every other reveal on the page. */

/* blur() is precisely the class of effect prefers-reduced-motion exists to suppress, so the
   reduced path is plain visible text — not a faster blur. */
@media (prefers-reduced-motion: reduce) {
  [data-word-reveal] .reveal-word,
  [data-word-reveal].reveal-pending .reveal-word,
  [data-word-reveal].reveal-pending.is-revealed .reveal-word {
    opacity: 1;
    filter: none;
    transition: none;
  }
}

/* 2026-08-02, owner review: the quiz result was the one screen still speaking a different
   language than the rest of the site. Two fixes below. */

/* The accent half of the result title was --accent-on-light (#426000, a khaki), because
   brand acid as *text* on a paper modal is unreadable. It is readable as a marker plate, and
   that is already the site's own device one line above — .quiz-result-industry is ink on
   acid. Same treatment here, at heading scale.

   The plate stays an inline box with `box-decoration-break: clone`, so each wrapped line gets
   its own band that hugs its own text — the marker read. An inline-block was tried and
   rejected: it is one rectangle sized to the widest line, which left a third of the second
   line as empty acid.
   The h2 line-height is the constraint that makes it safe. An inline background paints over
   the font's content area (~1.12em in Arial) plus this padding (.08em), so anything under
   ~1.2em lets a band bleed into the line above; at the original .9 it covered the descenders
   of the line above and the two bands overlapped each other. 1.26 clears it with margin. */
.quiz-result h2 {
  line-height: 1.26;
}

.quiz-result h2 span {
  padding: .02em .14em .06em;
  border-radius: var(--radius-meridian-sm);
  color: var(--ink);
  background: var(--acid);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The recommendations were grey boxes with a hairline border, an inherited "→" pseudo and a
   second "↗" glyph — two arrows per row, no relation to the card language used everywhere
   else. Now: paper cards on the site's radius and shadow tokens, one arrow, in the same
   round chip the CTAs use. */
.quiz-result-list {
  gap: var(--space-3);
  border-top: 0;
  border-left: 0;
}

.quiz-result-list a {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-club-module);
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-low);
  line-height: 1.32;
  transition:
    border-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    transform var(--duration-hover) var(--ease-settle);
}

.quiz-result-list a::before {
  content: none;
}

.quiz-result-list a i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  transition:
    color var(--duration-base) ease,
    background-color var(--duration-base) ease;
}

.quiz-result-list a:hover,
.quiz-result-list a:focus-visible {
  border-color: var(--acid);
  box-shadow: var(--shadow-club-float);
  transform: translateY(-2px);
}

.quiz-result-list a:hover i,
.quiz-result-list a:focus-visible i {
  color: var(--ink);
  background: var(--acid);
}

@media (prefers-reduced-motion: reduce) {
  .quiz-result-list a {
    transition: none;
  }

  .quiz-result-list a:hover,
  .quiz-result-list a:focus-visible {
    transform: none;
  }
}

/* Must live at the end of the cascade: `.context-format-row { align-content: center }` sits
   further down the file than the collage rules and content-sizes this row's single track to
   the copy column (131px), so the collage could never take the ~238px the row actually has.
   Stretching the track is what lets the cards be shown whole instead of cropped. */
.context-format-channel {
  align-content: stretch;
}

/* The copy column would otherwise stretch with the track and lose its vertical centring. */
.context-format-channel .context-format-copy {
  align-self: center;
}

/* 2026-08-02, owner review (round 3, item 6): the telegram screenshots in the channel collage
   are 91-104px wide at every desktop width (measured: 1200 → 97-104px, 1440 → 92-99px,
   1920 → 91-98px), i.e. unreadable. Hovering, focusing or tapping a card now magnifies it in
   place.

   Two things had to be dealt with first.

   1) `animation: contextStructureIn … both` on each card. With `both` and a keyframe block that
      declares only `from`, the implied 100% is the element's own computed transform, and the
      animation *keeps applying it* after it finishes — which outranks any :hover declaration in
      the cascade. The four animations are `backwards` now: the entrance and its stagger are
      unchanged (that is what the `from` fill covers), and the property is released afterwards.

   2) Four nested `overflow: hidden` ancestors. The two innermost — the collage and the channel
      row — are opened only while a card is enlarged; the panel is deliberately left clipping,
      so the enlarged card can never escape the rounded scene. Nothing overflows in the resting
      state (verified: every card box sits inside the collage box at 1200/1440/1920), so opening
      them exposes nothing that was being hidden.

   The scale is 1.78 rather than the 2x the issue allows: at 1200 the tallest card is 217px and
   the panel gives it 730-1380, so 1.78 lands its top edge at y=737 with 7px to spare, while
   1.9 would push it 4px past the panel's own clip. */
.context-channel-collage {
  --collage-zoom: 1.78;
}

.universe-panel.is-active .channel-collage-structure { animation-fill-mode: backwards; }
.universe-panel.is-active .channel-collage-events { animation-fill-mode: backwards; }
.universe-panel.is-active .channel-collage-build { animation-fill-mode: backwards; }
.universe-panel.is-active .channel-collage-meme { animation-fill-mode: backwards; }

body .context-channel-collage .channel-collage-card {
  cursor: zoom-in;
  transition:
    transform var(--duration-stage) var(--ease-settle),
    box-shadow var(--duration-stage) var(--ease-settle);
}

body .context-channel-collage .channel-collage-card:hover,
body .context-channel-collage .channel-collage-card:focus-visible,
body .context-channel-collage .channel-collage-card.is-zoomed {
  z-index: 9;
  cursor: zoom-out;
  /* Biased above centre on purpose. Growing from the true centre put the tallest card 1px
     above the panel's own clip at 1200 (measured slack: structure -1px, build 0px); at 40%
     the same scale leaves 7-16px of headroom at every width from 1200 to 1920, and the extra
     travel goes downwards where there is 265-300px of room. */
  transform: scale(var(--collage-zoom));
  transform-origin: 50% 40%;
  /* The rearmost card is masked to a right-hand fade so its sliced line-endings read as depth.
     At reading size that fade is just a missing half of the post, so it is dropped while zoomed. */
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow:
    0 2px 6px rgba(9, 10, 10, .5),
    0 46px 96px rgba(0, 0, 0, .62);
}

body .context-channel-collage .channel-collage-card:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 2px;
}

.context-gallery:has(.channel-collage-card:hover),
.context-gallery:has(.channel-collage-card:focus-visible),
.context-gallery:has(.channel-collage-card.is-zoomed),
.context-format-channel:has(.channel-collage-card:hover),
.context-format-channel:has(.channel-collage-card:focus-visible),
.context-format-channel:has(.channel-collage-card.is-zoomed),
body .context-channel-collage:has(.channel-collage-card:hover),
body .context-channel-collage:has(.channel-collage-card:focus-visible),
body .context-channel-collage:has(.channel-collage-card.is-zoomed) {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  body .context-channel-collage .channel-collage-card {
    transition: none;
  }
}

/* Round 4 addition: the channel's publishing rhythm — weekly digest, monthly announcements
   of new materials. Pills, not prose: the copy column inside the pinned 650px panel has
   little vertical room, and two 26px pills cost less height than two wrapped text lines. */
.context-format-copy .context-channel-rhythm {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.context-format-copy .context-channel-rhythm span {
  display: inline-flex;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgba(223, 255, 79, .28);
  border-radius: 99px;
  color: rgba(244, 244, 240, .66);
  /* 9px + nowrap: the longer pill must hold one line inside the ~234px copy column —
     wrapped pill content read as a layout bug, and 9.5px still overflowed by 4px. 9px is
     the site's mono-label size, so the chips sit on an existing type step. */
  font: 600 9px/1.1 var(--font-club);
  letter-spacing: .02em;
  white-space: nowrap;
}

.context-format-copy .context-channel-rhythm b {
  margin-right: 5px;
  color: var(--acid);
  font-weight: 750;
}

/* Below the pin breakpoint the copy column narrows to phone width — one-line pills cannot
   hold, so they wrap inside instead of overflowing the card. inline-block, not inline-flex:
   in a flex row the <b> and the text node are separate flex items and a line can never
   break between them, which kept the pill 6px too wide even with white-space: normal. */
@media (max-width: 980px) {
  .context-format-copy .context-channel-rhythm span {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
  }
}

/* ============================================================================
   Round 4b, mobile adaptation (owner: «на айфоне ужасно всё выглядит»).
   Kept in one block at the end of the cascade on purpose — every rule below
   answers a defect photographed on a 390x844 audit run.
   ========================================================================== */

/* The collapsed header CTA is a 44px circle, but a later pill layer re-adds the
   asymmetric desktop padding (0 7px 0 21px), which pushed the 38px dark icon 4px
   past the acid circle's right edge on every mobile screen. */
@media (max-width: 980px) {
  .site-header .header-cta {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  /* The hand film band was invisible behind .hero-atmosphere: the shell (z 8) paints its
     paper mists over the film (z 6), and on a phone the mists cover exactly the band. The
     film needs the bottom third clear; the paper background is already there without the
     mists. Cap lifted .72 → .85 — the desktop value was tuned for a film behind ::after on
     a large screen, and at phone size the hands read too faint under it. */
  .hero-atmosphere {
    display: none;
  }

  .hero-hand-film {
    opacity: clamp(0, calc(1 - var(--hero-exit) * 1.65), .85);
  }
}

/* The acid cards (2 and 7) lost their artwork at every width: an early
   `.subscription-rail article:nth-child(2), :nth-child(7) { background: var(--acid) }`
   shorthand carries (0,2,1) specificity, so its implied background-size/position:initial
   beat the later (0,1,1) `cover` rule — the 1024px art rendered as a blank top-left
   corner crop. Image survived (set later at equal specificity); geometry did not. */
.subscription-rail article:nth-child(2),
.subscription-rail article:nth-child(7) {
  background-position: center 34%;
  background-size: cover;
}

@media (max-width: 767px) {
  /* Dropoff flow: the desktop composition stretched into a 420px column with a dead
     middle, spline lines running off the right edge to a route card that is no longer
     there, and an absolutely-positioned gate. Recomposed: both sources side by side,
     the gate standing between them and the route, no splines. */
  .dropoff-flow {
    display: grid !important;
    min-height: 0 !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 18px 14px;
    padding: 22px 20px !important;
  }

  .dropoff-flow::before,
  .flow-lines,
  .flow-particle-one,
  .flow-particle-two {
    display: none;
  }

  .flow-source,
  .dropoff-flow.is-flow-active .flow-source {
    width: auto;
    padding: 0;
    opacity: 1;
    transform: none;
    animation: none;
  }

  .flow-source-one { grid-column: 1; grid-row: 1; align-self: start; }
  .flow-source-two { grid-column: 2; grid-row: 1; align-self: start; }

  .flow-gate,
  .dropoff-flow.is-flow-active .flow-gate {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin: 0;
    opacity: 1;
    transform: none;
    animation: none;
  }

  .flow-route {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* The plan badge grew into a 58px banner on phones; back to the desktop scale. */
  .price-badge-v2 {
    top: -22px;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 10px;
  }
}

/* Round 4b: heading line-height on phones. Every large heading runs a sub-1.0 line-height
   (0.88 on the hero, 0.90-0.94 elsewhere) — correct for a desktop headline of one or two
   wide lines, wrong the moment the same text breaks into four to six narrow ones: the
   descenders of one line meet the caps of the next and the block reads as overlapping.
   1.03 is the smallest value that clears contact for this grotesque at these sizes; the
   headings stay tight, they just stop touching. Desktop is untouched. */
@media (max-width: 980px) {
  .hero-copy h1,
  .inside-copy h2,
  .universe-heading h2,
  .universe-copy h3,
  .proof-heading-v2 h2,
  .outcomes-heading-v2 h2,
  .roadmap-heading-v2 h2,
  .path-selector-heading h2,
  .path-route-intro h3,
  .pricing-heading-v2 h2,
  .trial-copy-v2 h3,
  .faq-heading h2,
  .quiz-shell-v2 h2,
  .community-finale-copy h2 {
    line-height: 1.03;
  }

  /* The film is cover-cropped into a 360px band, so the gesture sat on the very bottom
     edge of the screen with the fingertips cut by it. 4% up puts the whole contact inside. */
  .hero-hand-film :is(video, img[data-hero-hand-still]) {
    transform: translate3d(0, -4%, 0);
  }
}

/* ===========================================================================
   2026-08-03, приёмка владельца на НАСТОЯЩЕМ iPhone. Три дефекта, которых не
   видел ни один headless-прогон: у WebKit на Linux нет эмодзи-шрифта Apple, нет
   схлопывающейся адресной строки и нет инерционного скролла iOS.

   Правила намеренно дописаны в КОНЕЦ файла. `.price-grid-v2` объявлен в
   styles.css 8 раз, `.case-slide` — 14 раз (файл содержит задвоенные блоки), и
   позднее безусловное правило уже перебивало мобильные. Чинить дубликаты
   рефакторингом перед релизом — отдельная задача, здесь нужен предсказуемый
   выигрыш по порядку каскада.
   =========================================================================== */

/* Кружок со стрелкой убран из кнопок целиком — правка Руслана: «убрать эти стрелочки сбоку,
   текст на кнопке по центру, размер другой».

   Попутно это закрыло и другой дефект: символ ↗ (U+2197) приезжал на iOS цветным ЭМОДЗИ —
   синий квадрат вместо тонкого знака. Сначала знак рисовался маской вместо шрифта, теперь
   рисовать нечего вовсе. В разметке остался U+FE0E (variation selector-15, «показывай как
   текст») и токен `--icon-arrow-up-right` в tokens.css — они нужны ссылкам внутри текста,
   где кружка нет и не было.

   `!important` здесь осознанно: кружок объявлен в файле несколько раз и в том числе
   селекторами вида `.hero-free-cta .button-icon` (0,2,0), которые перебивают правило в конце
   файла. Гоняться за специфичностью в файле с задвоенными блоками — плодить ещё один слой
   того же беспорядка; инструкция при этом простая и безусловная: кружка в кнопках нет. */
.button-icon,
.price-card-v2 > a i {
  display: none !important;
}

/* Текст по центру. У `.trial-button`, `.quiz-button` и кнопок в тарифах стояло
   `space-between` — оно разводило подпись и кружок по краям, и после удаления кружка подпись
   осталась бы прижатой влево. Отступы выравниваются по той же причине: слева было 17-28px,
   справа 10-11px — асимметрия была сделана под кружок. */
.primary-button,
.secondary-button,
.price-card-v2 > a,
/* у главной кнопки первого экрана отступы задаются более специфичным правилом (0,2,0),
   поэтому она перечислена отдельно — иначе на телефоне слева оставалось 18px против 28
   справа, и подпись вставала на 5px мимо центра */
.primary-button.hero-free-cta {
  justify-content: center;
  padding-inline: 28px;
  gap: 0;
}

/* Размер. Подпись была 11-14px при высоте кнопки 56-62 — мелкая марка на крупной плашке,
   из-за этого кнопка читается дешевле всего, что вокруг. Подпись поднята до 15px, высоты
   сведены к одной: разнобой 56 / 58 / 62 делал кнопки тремя похожими деталями вместо одной. */
.primary-button,
.secondary-button,
.price-card-v2 > a {
  min-height: 58px;
  font-size: 15px;
  letter-spacing: -.01em;
}

@media (max-width: 767px) {
  .primary-button,
  .secondary-button,
  .price-card-v2 > a {
    min-height: 56px;
  }
}

/* ХРОМ на главное действие — выбор Tony и Руслана 03.08 по референсу Chrome UI.

   Только `.primary-button` — это «Попробовать бесплатно» на первом экране и в триал-блоке
   плюс «Ответить на вопросы» у квиза. Кнопки в карточках тарифов и в шапке сознательно
   остаются плоскими: четыре хромированные плашки в ряд перебивают друг друга, и правило
   «один самый яркий объект на экране» ломается. Вторая кнопка первого экрана остаётся
   чернильной — так между «попробовать» и «стать участником» видна разница в силе.

   `!important` по той же причине, что и у кружка: фон кнопки объявлен в файле несколько раз,
   в том числе с наведением (`.primary-button:hover { background: var(--acid) }`), и без него
   металл слетал бы обратно в салатовый под курсором. */
.primary-button {
  /* Салатовая обводка `1px solid rgba(128,154,21,.76)` осталась от прежней заливки и по
     металлу читается как посторонний контур: в референсе край держит блик, а не линия.
     Рельеф теперь целиком в box-shadow, поэтому граница снимается. */
  border: 0 !important;
  color: var(--ink) !important;
  background: var(--surface-chrome) !important;
  box-shadow: var(--shadow-chrome), var(--glow-acid) !important;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--surface-chrome) !important;
  box-shadow: var(--shadow-chrome), var(--glow-acid-strong) !important;
}

@media (max-width: 767px) {
  /* Тарифы наезжали друг на друга. Замерено на 390x844: плашка выступает над
     своей карточкой на 22px, а row-gap здесь выигрывал 12px — поздним безусловным
     правилом поверх объявленных выше 58px. Итог: «Самый популярный» лежал на
     предыдущей карточке на 10px, «Максимальная выгода» — на 34px.
     58px — не новая величина, а та, что уже объявлена для этой сетки на 680px;
     здесь она просто возвращается в силу. После правки зазор у каждой плашки 36px. */
  .price-grid-v2 {
    row-gap: 58px;
  }

  /* Третья карточка сдвинута вниз на 24px — приём для многоколоночной раскладки.
     В одну колонку он ничего не компонует, зато съедал зазор: карточки 3 и 4
     перекрывались на 12px, то самое «тарифы наехали». */
  .price-card-v2 {
    transform: none;
  }

  /* Отзывы. Стопка была линеаризована под 768px, и перелистывание на телефоне
     пропало совсем: пять карточек просто проезжали мимо, ни одна не залипала
     (замер: pinned = 0 на всех шагах прокрутки). Владелец ждёт тот же жест, что
     на десктопе, поэтому липкая стопка возвращается. После правки залипает 1→4.
     `top` совпадает с тем, от чего считает `updateCaseStory` в script.js —
     рассинхрон здесь означал бы, что подсветка идёт раньше самого движения. */
  .case-slide {
    position: sticky;
    top: 88px;
  }

  /* «Громадное вялое полотно» — 24.9 экрана телефона. Тарифы в них занимали 5 экранов, и
     это была не плотность, а воздух: в карточке 500px содержимое занимало 226px, а между
     четырьмя элементами стояли поля 62, 82 и 82px. На десктопе такие интервалы держат
     широкую карточку, в узкой колонке они просто растягивают её на экран с лишним.
     Состав карточки не тронут — убран только простой между строками. */
  .price-card-v2 {
    min-height: 0;
    padding-top: 44px;
  }

  .price-card-v2 h3 {
    margin-top: 34px;
  }

  .price-card-v2 .price-value,
  .price-card-v2 > a {
    margin-top: 30px;
  }

  /* Дорожная карта — второй по длине блок (4.7 экрана). Свободного воздуха в нём, в отличие
     от тарифов, почти нет: заголовок «Проблема не в сложности ИИ» занимает 7 строк живого
     текста, а не пустоту. Единственный настоящий запас — разгон прокрутки: контейнер карты
     имел высоту 165vh при самой карте в 918px, то есть ~475px, на которых палец едет, а на
     экране не меняется ничего. Это и читается как «вялое полотно».

     Сокращено до 145svh, а не сильнее: на 125svh замер показал, что маскот пробегает весь
     путь за ~137px прокрутки вместо 475 — это уже не «плотнее», а рывок. 145svh срезает
     разгон примерно на треть и оставляет движение движением. Прогресс в script.js считается
     от фактической высоты блока и подстраивается сам. Единицы `svh`, а не `vh`: иначе
     схлопывание адресной строки Safari меняло бы длину разгона на ходу. */
  .miro-map-story {
    height: 145svh;
  }
}

/* Вкладки «Контекст / Система / Практика» были мертвы для пальца и мыши: контейнер несёт
   `pointer-events: none` (комментарий у правила: «labels are progress, not controls»), а
   script.js при этом выдаёт им `role="tab"`, `tabindex` и обработчик клика. Замер:
   `elementFromPoint` в центре вкладки возвращал сцену двери, тап не менял ничего, а Enter
   с клавиатуры работал. Владелец выбрал сделать их настоящими кнопками (03.08).

   Ловит палец только сам ярлык: контейнер остаётся прозрачным для событий, иначе широкая
   полоса перехватывала бы касания над сценой, по которой идёт основная прокрутка. */
.universe-step {
  position: relative;
  z-index: 12;
  pointer-events: auto;
}

/* Одного z-index вкладкам не хватило, и вот почему: сцена двери живёт в `section.portal-story`
   с `z-index: 2`, а вкладки — в `section.inside-content` с `z-index: 1`. Секция с дверью
   накрывает соседнюю целиком, и хотя дверь прозрачна и вкладки видно насквозь, касание
   забирает она. Дверь при этом `aria-hidden="true"`, интерактива внутри нет — чистая
   декорация. AGENTS.md: «декоративные эффекты не должны блокировать контент или ввод».
   Порядок отрисовки не трогаем — снимаем только перехват событий.

   Снимать перехват послойно не вышло: замер выдвигал следующий слой по очереди — сначала
   `.door-scene`, потом `.interior-bg`, потом `.hero-shell`, потом сама сцена. Поэтому правило
   поднято на сцену целиком. Это безопасно: единственный интерактив внутри `.portal-stage` —
   кнопки первого экрана, и они уже возвращают себе события собственными правилами (у самой
   `.hero-shell` перехват снят и без нас). Прокрутке `pointer-events: none` не мешает — жест
   уходит документу. */
.portal-stage,
.portal-story {
  pointer-events: none;
}



/* ─────────── патч: hero ─────────── */
/* Сверка патчей (агент-ревьюер): исходно эти три правила шли без медиа-условия и
   перебивали ВСЕ брейкпоинты, включая планшет и десктоп, где схлопывающейся панели
   Safari нет и замеров никто не делал. Дефект заявлен для iPhone — ограничиваем
   правку телефоном. Где панели нет, lvh == svh, так что поведение и не менялось бы,
   но правило без замера в проде не живёт. */
@media (max-width: 767px) {
  /* 2026-08-03, приёмка на iPhone 16 Pro: «внизу страницы текст начинает крутиться под слоем,
     ещё не успев открыть дверь». Это не z-index и не прозрачность сцены — это дырка в её
     нижнем крае.

     Механика. Сцена двери `.portal-stage` — `position: sticky; top: 0`, и её высота задана в
     svh (styles.css:8400, `height: 100svh` в @media (max-width: 767px)). svh — это МАЛЫЙ
     вьюпорт, то есть высота экрана Safari с ПОКАЗАННОЙ адресной строкой. Как только палец
     начинает крутить страницу, iOS убирает панели, видимая высота вырастает до 100lvh, и
     sticky-сцена перестаёт доставать до низа экрана: на iPhone 16 Pro это полоса ~60px
     (svh 733 → lvh 793).

     В этой полосе оказывается не фон, а следующая секция: `.club-universe` поднята под сцену
     на целый экран (styles.css:7920, `margin-top: -100svh`; мобильная попытка это отменить —
     `margin-top: 0`, styles.css:7261 — перебита этим более поздним безусловным правилом).
     Поэтому в щель на полной яркости въезжает «Не очередной курс…» и едет вверх со скоростью
     пальца, пока сцена прибита и дверь ещё не пройдена. Замер до правки: на scrollY 700
     (--stage-progress 0.673, --handoff 0) пик яркости в полосе 228 из 255 и 24.6% светлых
     пикселей; в фазе светлого hero та же полоса даёт чёрный кант (шов -226).

     Лечим не краской по щели, а её отсутствием: сцена меряется по САМОМУ БОЛЬШОМУ вьюпорту,
     а подъём следующей секции — тем же числом, иначе разъедется посадка в конце истории
     (секция должна встать ровно в верх экрана в тот момент, когда сцена отлипает).
     dvh не годится: он меняется прямо во время прокрутки и дёргал бы сцену под пальцем —
     в проекте этого уже избегали (см. комментарий про svh у .miro-map-story).
     Где схлопывающейся панели нет, lvh == svh == vh и правило не меняет ничего: проверено
     на 393x852 и 1440x900, высоты, отступы и высота документа до/после совпадают. */
  .portal-stage {
    height: 100lvh;
  }

  .club-universe {
    margin-top: -100lvh;
  }

  /* Сцена стала на (100lvh - 100svh) выше, и прижатая к её низу надпись «Здесь ИИ становится
     частью твоей работы» вместе со строкой маршрута 01/02/03 уехала бы вниз ровно на столько
     же (`.inside-scene` — grid с align-content: end). Пока панель убрана, это незаметно, но
     стоит потянуть страницу вверх — панель возвращается и съедает эти 60px вместе со строкой
     маршрута. Возвращаем содержимому сцены прежнюю рамку: `.inside-scene` растянут по
     inset: 0, поэтому margin-bottom просто укорачивает его до исходных 100svh, ничего не
     перекладывая. */
  .inside-scene {
    margin-bottom: calc(100lvh - 100svh);
  }
}


/* ─────────── патч: roadmap ─────────── */
/* ═══ Дорожная карта «30 дней» на телефоне: центр, компактность, связующая линия ═══
   Владельский разбор от 03.08 (iPhone 16 Pro). Три вещи одним куском, потому что они
   держатся друг за друга: центрирование без компактности оставит блок в 1.45 экрана,
   а компактность без снятия фиксированной высоты не даст ни пикселя экономии.

   ПОЧЕМУ НЕ ЛИПКАЯ СТОПКА, как у отзывов. Замер существующей стопки: .case-slide,
   5 слайдов, контейнер 2041 px — 408 px прокрутки на слайд. Четыре недели по этой
   цене = 1633 px вместо нынешних 1235 px. Липкая стопка не сокращает путь до тарифов,
   она его удлиняет на треть — а жалоба была именно «слишком долго до тарифов листать».
   Поэтому выбран второй вариант владельца: связать линией. */
@media (max-width: 767px) {

  /* Высота 145svh (строка 10817) обслуживает разгон маскота по SVG-дорожке. Но на этом
     же брейкпоинте `.miro-map > svg, .map-mascot { display: none }` — маскота и дорожки
     тут нет вообще (замер: getBoundingClientRect у svg = 0×0). Значит 1235 px высоты
     при 918 px карточек — это 317 px прокрутки, на которых экран не меняется никак.
     Отдаём высоту содержимому. Побочный плюс: блок перестаёт зависеть от svh, и
     схлопывание адресной строки Safari больше не меняет его длину на ходу. */
  .miro-map-story {
    height: auto;
    min-height: 0;
  }

  /* justify-items: center — собственно лечение перекоса. У грид-элемента justify-self
     по умолчанию stretch, но stretch работает ТОЛЬКО при auto-размере; заданная ниже
     ширина карточки выключает его и роняет элемент в start. Отсюда и брались 56.7 px
     пустоты справа. gap 24px (было 12) — не «воздух ради воздуха», а место, в котором
     видно связующую линию: при 12 px в просвет попадал один штрих и связь не читалась. */
  .miro-map {
    gap: 24px;
    padding: 20px 16px;
    justify-items: center;
  }

  /* Линия, связывающая недели. Это CSS-двойник той самой SVG-дорожки, что скрыта на
     телефоне: тот же ритм штриха, что у path (stroke-dasharray: 8, 9), та же толщина
     (stroke-width: 3). Лежит на z-index: 0, карточки на z-index: 2 и непрозрачны —
     линия видна только в просветах, то есть читается как «неделя → неделя».
     Символы-стрелки сознательно НЕ используются: на iOS ↓/→ рисуются цветным эмодзи. */
  .miro-map::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    z-index: 0;
    background-image: repeating-linear-gradient(to bottom, var(--ink) 0 8px, transparent 8px 17px);
    opacity: .5;
    pointer-events: none;
  }

  /* Компактность делается не только уменьшением шрифта. Главный рычаг — ШИРИНА: было
     82% (258 px), стало 300 px. Более широкая карточка = меньше переносов = меньше строк.
     Замер: карточка «02 НЕДЕЛЯ» упала с 205 px до 134 px именно на этом, без единого
     уменьшенного кегля. min-height: 0 снимает искусственные 174 px — теперь высота
     карточки равна её содержимому, а не константе. */
  .map-node {
    width: 100%;
    max-width: 300px;
    min-height: 0;
    padding: 16px 18px;
  }

  .map-node span   { min-height: 26px; padding-inline: 10px; font-size: 10px; }
  .map-node strong { margin-top: 12px; font-size: 19px; }
  .map-node small  { max-width: 30ch; margin-top: 8px; font-size: 11px; }

  /* Чип «AGENT 01 · AGENT 02 · MEMORY» делал третью карточку на 47 px выше соседних. */
  .map-node-three::after {
    margin-top: 10px;
    padding: 7px 9px;
    font-size: 8px;
  }

  /* Снятие поэтапного затемнения — вынужденное следствие, и вот честная механика.
     script.js:330 считает разгон как `Math.max(1, height - viewportHeight + 96)`.
     Пока height было 1235 px, разгон = 479 px и подсветка шла по очереди. С height:auto
     блок стал 731 px, то есть НИЖЕ вьюпорта, и выражение схлопывается в 1 — прогресс
     прыгает с 0 в 1 за один кадр, три карточки вспыхивают разом. Такая вспышка хуже,
     чем её отсутствие: до неё пользователь видит блок с тремя карточками, затемнёнными
     до 58%, то есть плохо читаемыми. Поэтому на телефоне все четыре недели читаются
     сразу — для лендинга это и правильнее: смысл блока в том, что недель четыре.
     Десктоп и планшет (≥768px) правило не трогает, там разгон живой. */
  .map-node > * {
    opacity: 1;
  }
}


/* ─────────── патч: chat ─────────── */
/* 03.08.2026, телефон. Плашки реплик в блоке «02 / ЧАТ» ложились на лица участников:
   на 393x852 они перекрывали 1492.6px² аватарок (15.3% их площади), из них 388.9px²
   приходилось на центральные зоны лиц — у верхней аватарки плашка «Кто уже собирал агента?»
   закрывала 47.5% круга и 46% зоны лица, у нижней «Покажу свой сценарий →» — 30.9% и 20%.

   Причина не в координатах плашек, а в высоте облака. `.context-member-cloud` объявляет
   `min-height: 160px` (строка 5784) и `min-height: 190px` для телефона (строка 5909), но обе
   перебиты поздним безусловным правилом `.context-format-row > * { min-height: 0 }`
   (строка 10150; правка от 30.07 против обрезки абзаца на широком десктопе): специфичность
   у него такая же (0,1,0), объявлено оно ниже, а медиа-квери приоритета не добавляет —
   поэтому побеждает и на телефоне. Облако схлопывается до высоты соседней текстовой колонки
   (121.6px). В этой высоте одновременно живут две плашки по 26px, прибитые к `top: 0` и
   `bottom: 0`, и кластер аватарок высотой 106px: свободная полоса между плашками — 69.6px
   против 106px кластера, пересечение арифметически неизбежно.

   Лечим причину, а не симптом: возвращаем облаку высоту, которую задумал автор. Специфичность
   поднимаем префиксом `body` (0,2,0) — тем же приёмом, каким в этом файле уже вылечена
   соседняя коллажная колонка (`body .context-channel-collage`, строка 9167). Место в карточке
   есть: внутренняя высота строки на телефоне — 252.5px, трек в 190px в неё умещается, поэтому
   ни карточка, ни секция не растут (проверено: высота галереи 644.5px и высота документа
   до и после правки совпадают на 320/375/393/430/767). */
@media (max-width: 767px) {
  body .context-member-cloud {
    min-height: 190px;
  }

  /* Кластер аватарок сдвинут в полосу между плашками. Верхние 26px и нижние 26px облака
     занимают плашки, кластеру остаётся полоса [26px, 164px] высотой 138px при его
     собственной высоте 106px — ставим кластер по центру этой полосы, по 16px зазора до
     каждой плашки. Все аватарки смещены на одну и ту же величину (+37px), поэтому взаимные
     расстояния внутри коллажа не изменились ни на пиксель: это тот же живой коллаж, просто
     целиком опущенный ниже, а не перестроенный список. Проценты, а не пиксели, — чтобы на
     широких телефонах, где облако получается выше 190px, кластер продолжал масштабироваться
     вместе с коробкой (при росте высоты зазоры только увеличиваются). */
  .context-member-one   { top: 22.1%; }
  .context-member-two   { top: 28.5%; }
  .context-member-logo  { top: 41.3%; }
  .context-member-three { top: 43.9%; }
  .context-member-five  { top: 49%; }
  .context-member-four  { top: 54.7%; }
}


/* ─────────── патч: path ─────────── */
/* ===========================================================================
   03.08.2026, приёмка на iPhone 16 Pro. «Очень тяжело перематывать эти 4 трека,
   неочевидно, что нужно нажимать, и кнопки не влезают на экран».

   Замер 393x852 (WebKit): полоса .path-selector-tabs имеет clientWidth 321px
   при scrollWidth 1074px — 753px спрятано в горизонтальной прокрутке. Причина
   в правиле styles.css:1863 `flex: 0 0 min(76vw, 260px)`: на 393px это ровно
   260px, четыре таких кнопки + зазоры + паддинги = 1074px. Целиком видна ОДНА
   кнопка, от второй торчит 49px (19%), третьей и четвёртой на экране нет
   вообще — elementFromPoint в их центрах возвращает соседнюю секцию. Плюс
   styles.css:1855-1860 гасят скроллбар (`scrollbar-width: none` и
   `::-webkit-scrollbar { display: none }`), так что подсказки «здесь листают»
   не остаётся никакой, а `scroll-snap-type: x mandatory` со `scroll-snap-align:
   center` двигает ленту сразу на 268px — после каждого снапа на экране опять
   одна кнопка. Отсюда и ощущение «перематываю вслепую».

   Решение — не чинить прокрутку, а убрать её. Полоса становится сегментным
   переключателем: активный трек развёрнут и подписан, три остальных свёрнуты
   до своего номера в кружке (кружок уже есть в разметке — это родной элемент
   макета, а не новая сущность). Все четыре цели видны и нажимаемы всегда,
   ширина ленты 321px при контенте 321px — прокрутки нет ни явной, ни скрытой.
   Переключение — не подмена картинки, а морф: плашка растёт из кружка, соседи
   сжимаются, суммарная ширина постоянна. Анимируется только `flex-grow` (одно
   интерполируемое число); `flex-basis` намеренно оставлен фиксированным 44px,
   иначе переход в `auto` неинтерполируем и WebKit дёргает раскладку.

   Подписи свёрнутых треков скрыты через `font-size: 0` у кнопки: текст лежит
   прямым текстовым узлом (`<span>01</span>Анализ и аналитика`), отдельного
   элемента у него нет, и это единственный способ убрать его из раскладки без
   правки разметки. У кружка размер шрифта задан своим правилом, поэтому он
   не гаснет. Для скринридера ничего не меняется: проверено ariaSnapshot —
   до и после патча tablist отдаёт те же четыре имени целиком.

   Правило дописано в КОНЕЦ файла по той же причине, что и блок выше: в
   styles.css есть задвоенные объявления, и предсказуемо выигрывает только
   порядок каскада. `!important` не понадобился — конкурирующих правил ровно
   два (styles.css:1454 и :1862), оба той же специфичности и оба выше.
   =========================================================================== */

@media (max-width: 767px) {
  .path-selector-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-inline: -2px;
    padding: 5px;
    /* прокрутки больше нет — ни явной, ни снапа, ни обрезанной кнопки-намёка */
    overflow: visible;
    scroll-snap-type: none;
    border-radius: 21px;
  }

  .path-selector-tabs button {
    /* 44px — свёрнутая плашка ровно под кружок; вместе с высотой 56px это
       тач-цель 44x56, минимум Apple HIG (44x44) выдержан по обеим осям.
       `min-width: 0` обязателен: без него flex-элемент не сжимается уже
       min-content, и вместо 44px получается 112px. */
    flex: 0 1 44px;
    min-width: 0;
    min-height: 56px;
    justify-content: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    border-radius: 16px;
    /* лёгкая заливка, чтобы свёрнутые треки читались как кнопки, а не как
       декоративные кружки на фоне ленты */
    background: rgba(11, 12, 13, .05);
    scroll-snap-align: none;
    transition:
      flex-grow 340ms var(--ease-reveal),
      padding 300ms var(--ease-reveal),
      gap 300ms var(--ease-reveal),
      background 240ms var(--ease-reveal),
      box-shadow 240ms ease,
      /* подпись уходящего трека гасится сразу, чтобы её не рвало сужающейся
         плашкой; появляется — с задержкой, см. правило .is-active ниже */
      font-size 1ms linear 0ms;
  }

  .path-selector-tabs button span {
    flex: 0 0 30px;
    height: 30px;
    /* контраст поднят: в свёрнутом состоянии кружок с номером — единственное,
       по чему трек опознают и на что целятся пальцем */
    border-color: rgba(11, 12, 13, .26);
    color: #595d65;
    font-size: 10px;
  }

  .path-selector-tabs button.is-active {
    flex-grow: 1;
    gap: 9px;
    padding: 9px 12px 9px 9px;
    /* 12px вместо 11px: подпись осталась одна на всю ленту, ей можно дать
       нормальный кегль. Ширины 164px хватает самой длинной («Разработка и
       вайбкодинг») в две строки без обрезки — замерено scrollWidth. */
    font-size: 12px;
    line-height: 1.2;
    transition:
      flex-grow 340ms var(--ease-reveal),
      padding 300ms var(--ease-reveal),
      gap 300ms var(--ease-reveal),
      background 240ms var(--ease-reveal),
      box-shadow 240ms ease,
      /* 230ms — плашка успевает развернуться, и подпись не мигает в узком боксе */
      font-size 1ms linear 230ms;
  }

  .path-selector-tabs button.is-active span {
    color: var(--paper);
  }
}

/* iPhone SE 1-го поколения и прочие 320px: развёрнутой плашке остаётся 91px,
   в них «вайбкодинг» одним куском не влезает. Разрешаем перенос внутри слова —
   лучше некрасивый перенос, чем обрезанное слово. На 360px и выше не
   срабатывает: там текст ложится в две строки сам. */
@media (max-width: 374px) {
  .path-selector-tabs button {
    overflow-wrap: anywhere;
  }

  .path-selector-tabs button.is-active {
    gap: 7px;
    padding: 8px 9px 8px 8px;
    font-size: 11px;
  }
}

/* 561-767px (планшет в портрете, крупный телефон в ландшафте): места хватает
   на все четыре подписи сразу, и прятать их незачем — морф нужен только там,
   где ширины нет. Возвращаем сетку 2x2, которой этот блок пользуется на
   980px. Без этого правила на iPad mini активная плашка растягивалась бы
   до 470px рядом с тремя кружками. */
@media (min-width: 561px) and (max-width: 767px) {
  .path-selector-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .path-selector-tabs button {
    flex: none;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.2;
    background: transparent;
  }

  /* Сброс активной плашки — обязательная доработка по итогам сверки патчей. В блоке
     до 767px она объявлена селектором `.path-selector-tabs button.is-active` со
     специфичностью (0,2,1), и правило выше (0,1,1) её не перебивает. Без этого на
     iPad mini в портрете активная вкладка осталась бы с телефонными отступами
     (padding 8px 9px, font-size 11px) рядом с тремя соседками на 10px/13px. */
  .path-selector-tabs button.is-active {
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* На тач-устройстве :hover залипает после тапа (Safari держит его до касания
   в другом месте) — свёрнутая плашка так и остаётся приподнятой на 2px. */
@media (max-width: 767px) and (hover: none) {
  .path-selector-tabs button:hover {
    transform: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .path-selector-tabs button,
  .path-selector-tabs button.is-active {
    transition: none;
  }
}


/* ─────────── патч: dropoff ─────────── */
/* ===========================================================================
   2026-08-03, приёмка на настоящем iPhone 16 Pro. Экран 5, блок «Что мешает
   двигаться быстрее». Владелец: «анимация то ли работает, то ли нет — вообще
   непонятно, и текст опять как-то несвязанно летает в разных местах».

   Что реально происходит на телефоне. Блок @media (max-width:767px) выше
   (styles.css:10574) пересобрал диаграмму в одну колонку и ЯВНО погасил вход
   у обоих источников (10595-10601) и у плашки AI ROOM (10607-10615), а линии
   и частицы спрятал (10588-10593). Недобитыми остались ровно два куска:
   `.flow-route li` (flowRouteIn, 7617-7631) и `.flow-gate i` (flowScan, 7605).
   В статичной карточке дёргаются вбок три мелких чипа и одна волосяная линия —
   это и читается как «непонятно, работает или нет».

   Хуже того, обе висят на классе .is-flow-active от IntersectionObserver
   с threshold .45 (script.js:952), а к нему прибавлены задержки 560/700/840
   и 1040ms. Замер (WebKit, 393x852): геометрически 45% достигаются на
   scrollY 11760, реально класс ставился в диапазоне 11772…12461, а дважды
   не пришёл вовсе. Из-за этого старт flowRouteIn гулял от vpTop +587
   (середина экрана) до −1155 (на 1155px выше верхней кромки экрана), а в
   2 быстрых проходах из 16 три шага маршрута так и остались с opacity 0.

   Решение: доводим мобильную рекомпозицию до конца. На телефоне .dropoff-flow
   — статичная схема целиком, как уже сделано с её соседями. Тогда единственное
   движение в блоке — вертикальный подъём ревила, и он идёт сверху вниз:
   заголовок → карточка ответа (часть Б патча).
   =========================================================================== */
@media (max-width: 767px) {
  /* «СОМНЕНИЕ» на телефоне не видно СОВСЕМ. `.flow-source-two { margin-top: -32px }`
     объявлен безусловно (styles.css:8065-8070) под десктопную раскладку в два ряда;
     мобильный блок переставляет источники в один ряд (10604-10605), но маржин не
     сбрасывает. Замер: контент карточки начинается на 390, подпись — на 358, то есть
     на 32px выше верхней границы карточки (368), и `overflow: hidden` (7390) её
     срезает. Заодно уходит рассинхрон пары подписей ровно в те же 32px. */
  .flow-source-two {
    margin-top: 0;
  }

  /* Три чипа маршрута — последний недобитый вход. Гасим тем же способом и теми же
     тремя свойствами, что уже применены к .flow-source и .flow-gate выше по файлу.
     Второй селектор обязателен: `.dropoff-flow.is-flow-active .flow-route li` имеет
     специфичность (0,3,1) и одним только `.flow-route li` (0,1,1) не перебивается
     даже из конца файла. */
  .flow-route li,
  .dropoff-flow.is-flow-active .flow-route li {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* «Сканирующий» луч внутри плашки. На десктопной плашке 84px это проход луча,
     на мобильной 62px — нет: flowScan заканчивается на translateX(18px), и линия
     НАВСЕГДА остаётся прижатой к правой стенке (замер: left=215 при центре 197 и
     внутренней рамке 174..220, то есть 5px до края). Вернуть её в центр нельзя —
     отрисовано и проверено: по центру акцентная линия проходит сквозь буквы «AI».
     На таком размере луч не читается ни в одном из положений, поэтому убираем —
     ровно по той же логике, по которой двумя правилами выше убраны сплайны и
     частицы. Плашка ничего не теряет: акцент в ней держит внутренняя рамка. */
  .flow-gate i {
    display: none;
  }
}


/* ─────────── патч: platform ─────────── */
/* ==========================================================================
   Правка 03.08 (жалоба владельца с iPhone 16 Pro): в блоке «Зайди внутрь
   бесплатно на 1 час» скрин платформы обрезан — видно только левое меню
   и обрубки «0/4 выполн…», «ЛИЧНЫ… ПРЕПОДА… ЯЗЫКА…».

   ПОЧЕМУ. `.trial-preview-static img` (styles.css:8299) безусловно ставит
   `object-fit: cover`. На десктопе бокс превью почти квадратный, и кроп
   читается как осознанный крупный план. На телефоне бокс становится
   ВЕРТИКАЛЬНЫМ: высоту жёстко задаёт `.trial-visual { min-height: 520px }`
   (styles.css:8525), окно растянуто на неё через `position: absolute; inset: 0`
   (styles.css:8189), а ширину сверху ограничивает карточка — выходит 297x456
   (0.651). Скрин же горизонтальный, 1430x722 (1.981). cover обязан
   масштабировать по высоте: k = 456/722 = 0.632, картинка разворачивается
   до 903x456, и в окно попадает 297/903 = 32.9% её ширины. Остальное режет
   `overflow: hidden` у `.trial-preview-stack`.

   ЧТО ДЕЛАЕМ. Не двигаем кроп и не меняем картинку, а возвращаем боксу
   пропорции самого скрина: на телефоне высоту окна считает картинка через
   aspect-ratio, а не фиксированный min-height. Тогда в кадр входит 100%
   ширины платформы — меню, лента «Задания» и вся сетка «Новое».

   ПОЧЕМУ НЕ ПРОСТО `object-fit: contain`. Высота окна осталась бы 520px,
   картинка легла бы полосой 297x150 посередине, а сверху и снизу открылся бы
   светлый фон `.trial-preview-stack` (#e7e8e9) — тот самый «странный белый
   блок», который уже чинили в Round 4 item 6 (см. комментарий у styles.css:8285,
   там ради этого и поставили article{height:100%}). Поэтому высоту схлопываем
   ВМЕСТЕ с кропом, всеми четырьмя правилами сразу — иначе регресс вернётся.

   ПОЧЕМУ ОСТАВЛЯЕМ cover, а не contain. Пропорции бокса теперь совпадают с
   пропорциями файла, обрезать нечего — cover и contain дают одно и то же.
   Но cover страхует от светлого шва, если скрин однажды заменят на файл
   другого формата: он закроет бокс, а не подложит под себя #e7e8e9.
   ========================================================================== */
@media (max-width: 767px) {
  /* высоту визуала больше не диктует min-height — её снизу вверх считает картинка */
  .trial-card-v2 .trial-visual {
    min-height: 0;
  }

  /* окно возвращается в поток: при absolute + inset:0 оно тянулось на все 520px
     родителя независимо от того, сколько места реально нужно скрину */
  .trial-card-v2 .trial-media-window {
    position: relative;
    inset: auto;
  }

  /* height:100% из Round 4 дотягивал article до низа окна; теперь высоту
     задаёт сама картинка, и белому фону стека негде вылезти */
  .trial-card-v2 .trial-preview-static article {
    position: relative;
    display: block;
    height: auto;
  }

  /* 1430/722 — натуральные размеры assets/platform-home.webp. Бокс повторяет
     пропорции файла, поэтому cover ничего не обрезает и видна вся ширина.
     object-position возвращаем в центр: left top тут больше не значим,
     но центр честнее при возможной замене файла. */
  .trial-card-v2 .trial-preview-static img {
    height: auto;
    aspect-ratio: 1430 / 722;
    object-fit: cover;
    object-position: center center;
  }
}


/* ─────────── патч: footer ─────────── */
/* ФИНАЛ «AI Room Club» НА ТЕЛЕФОНЕ — коллаж больше не режется по центру.

   Что было (замер на 393x852, webkit): коллаж 1672x941 (соотношение 1.78) вставлялся
   через object-fit: cover в бокс 393x706 (соотношение 0.56). cover масштабирует по
   большей стороне — картинка растягивалась до 1254x706 и обрезалась по 430.7px с каждой
   стороны. На экране оставалась центральная колонка исходника x 574..1098, то есть 31.3%
   ширины. А композиция у коллажа кольцевая: 12 портретов стоят по краям, середина пустая
   под подпись. В эту пустую середину экран и попадал: 8 плиток не видно вовсе, 4 разрезаны
   краем экрана (видно 24-40% плитки), 131 и 86 строк тёмных пикселей упирались в левый и
   правый край. Это и есть «обрезалось по центру».

   Что делаем: перестаём натягивать горизонтальный коллаж на вертикальный бокс. Кольцо
   разрезается ровно пополам по горизонтальному промежутку между вторым и третьим рядом
   портретов (исходник y 489; сами карточки заканчиваются на 473 и начинаются на 504 —
   режем по пустому месту), и половинки ставятся полосами сверху и снизу. Ширина при этом
   не обрезается совсем: масштаб 100% ширины экрана, видно все 12 портретов целиком.
   Кольцо вокруг подписи сохраняется — просто из горизонтального становится вертикальным. */
@media (max-width: 767px) {
  /* Верхняя полоса — ряды 1-2 исходника.
     aspect-ratio 1672/489 при width:100% даёт высоту ровно в тот масштаб, где
     ширина картинки = ширине экрана, а низ полосы попадает в промежуток между рядами.
     object-position: center top — cover обрезает только снизу, по промежутку. */
  .community-mosaic {
    inset: 72px 0 auto;
    height: auto;
    aspect-ratio: 1672 / 489;
    object-fit: cover;
    object-position: center top;
  }

  /* Нижняя полоса — ряды 3-4. Второго <img> в разметке нет и добавлять его нельзя,
     поэтому вторая половина рисуется фоном на ::after секции (у .community-finale
     псевдоэлементы свободны, проверено: content = none).
     background-size: 100% auto + position bottom = тот же масштаб, отсчёт от низа,
     то есть видно исходник y 489..941 — ровно дополнение к верхней полосе.
     bottom: 122px — чтобы полоса кончалась за 24px до строки копирайта (она на 746px
     от верха секции); z-index 1 держит полосу под подписью (z-index 3) и футером (4). */
  .community-finale::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 122px;
    z-index: 1;
    aspect-ratio: 1672 / 452;
    background: url(assets/community-portrait-mosaic-v1.webp) center bottom / 100% auto no-repeat;
  }

  /* Подпись переезжает в центр освободившегося окна между полосами.
     Окно — 186.9..615.8 от верха секции, его центр 401px, это ровно calc(50% - 21px)
     при высоте секции 844px; translate(-50%,-50%) вместо прежних -48% по той же причине.

     Плашка, свечение и backdrop-filter снимаются: они существовали только чтобы пробить
     читаемое окно в лицах, которые лежали под текстом. Лиц под текстом больше нет —
     между полосами чистый фон секции. Заодно уходит box-shadow со spread 52px и blur 72px:
     он бы выбеливал края обеих полос (доставал на 124px, а зазор до полос 29px). */
  .community-finale-copy {
    top: calc(50% - 21px);
    transform: translate(-50%, -50%);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* Примечание по путям: относительный путь к ассету в styles.css (лежит в корне сайта рядом с assets/) резолвится в тот же http://127.0.0.1:4173/assets/community-portrait-mosaic-v1.webp, что и при инъекции через <style> в документ, — картинка в нижней полосе реально загрузилась и отрисовалась (тёмных пикселей в полосе 11.65%). */


/* ─────────── патч: quiz ─────────── */
/* ===========================================================================
   2026-08-03, приёмка на настоящем iPhone 16 Pro, экран 7 — модалка квиза.
   Дописано в КОНЕЦ файла осознанно: `.quiz-question > p` объявлен трижды
   (2025, 3257, 9307), `.quiz-result-list a i` — дважды (4660, 10351), и в обоих
   случаях выигрывает последнее безусловное объявление, а не то, что выше.
   =========================================================================== */

/* --- ДЕФЕКТ 1: ↗ (U+2197) приезжает на iOS цветным эмодзи ------------------
   U+2197 входит в набор эмодзи (Emoji=Yes), и Apple по умолчанию рисует его
   ГЛИФОМ ИЗ Apple Color Emoji — синим квадратом со стрелкой. В круглой чёрной
   плашке 26x26 это и выглядит «дешёвым смайлом».
   Лечим не подбором шрифта, а тем, что рисовать глиф вообще перестаём:
   размер шрифта в ноль, знак — маской из токена --icon-arrow-up-right.
   У маски нет ни шрифтового фолбэка, ни эмодзи-представления, поэтому
   результат одинаков на iOS, Android и десктопе. */
.quiz-result-list a i {
  position: relative;
  font-size: 0;
  line-height: 0;
}

.quiz-result-list a i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  /* currentColor, а не фикс-цвет: у .quiz-result-list a i цвет --paper, а на
     :hover/:focus-visible он меняется на --ink — маска обязана ехать за ним */
  background: currentColor;
  transform: translate(-50%, -50%);
  -webkit-mask: var(--icon-arrow-up-right) no-repeat center / contain;
  mask: var(--icon-arrow-up-right) no-repeat center / contain;
}

/* Вторая линия обороны для всех остальных стрелок модалки — тех, что живут
   внутри текста и до которых CSS-маской не дотянуться («Вступить в AI Room
   Club ↗», кружок .button-icon). Safari 17+ понимает font-variant-emoji;
   `text` запрещает эмодзи-представление там, где у символа есть текстовое.
   На iOS < 17 свойство игнорируется — поэтому оно НЕ заменяет U+FE0E в
   разметке, а страхует его. */
.quiz-modal,
.quiz-modal * {
  font-variant-emoji: text;
}

/* --- ДЕФЕКТ 2: хаки-текст в шапке модалки ---------------------------------
   `--accent-on-light: #426000` — тёмно-оливковый суррогат кислотного акцента,
   придуманный, чтобы --acid хоть как-то читался на бумаге. Формально он
   проходит WCAG AA (6.35:1 на #f3f0e8), но это болотный цвет со 100%
   насыщенности: в палитру бренда он не входит и конфликтует с кислотными
   плашками .quiz-result-industry и .quiz-result h2 span, которые стоят на том
   же экране. Владелец читает его как «хаки», и он прав.
   Акцент на этом экране уже занят плашками (ink на acid), поэтому микро-
   подписи уходят в нейтральный --club-graphite (#24272d, 13.14:1) — их работа
   служебная, а не акцентная. --club-blue (#315cff) рассматривался и отброшен:
   4.49:1, на волос НЕ дотягивает до 4.5.
   !important не нужен: селекторы дословно повторяют строки 3248-3250 и 9307,
   специфичность та же, побеждает порядок. */
.quiz-dialog-meta .section-label,
.quiz-progress > span,
.quiz-result > p:first-child,
.quiz-question > p {
  color: var(--club-graphite);
}

/* ─────────── 2026-08-04, правка Руслана: «не везде кнопки преобразовал» ─────────── */
/* Замер до правки (webkit, локальный стенд, 12 ширин):
   .header-cta-free в шапке — кружок-иконка 38x38 внутри, подпись 12px и капслок с разрядкой
   .08em на 1181-1440, высота 50px; на 768-1180 кнопка скрыта совсем.
   .community-finale-copy > a в финале — кружок со стрелкой 38x38, высота 60px и кегль,
   который нигде не задан и плавает вместе с родителем: 15px на телефоне, 16px на планшете,
   17.1px на 1180, 20.9px на 1440.
   Причина: правки 03.08 перечисляли .primary-button, .secondary-button и .price-card-v2 > a —
   эти два адреса в список не попали.
   Заливку не трогаю: решение владельца записано выше по файлу — хром только у
   .primary-button, кнопки в шапке и в тарифах остаются плоскими. */

/* 1. Кружок со стрелкой в финале — тот же случай, что .button-icon выше: правило кружка
   объявлено на четыре селектора сразу, а гасящее — только на два. !important по той же
   причине: кружок объявлен в файле несколько раз, в том числе более специфичными
   селекторами. */
.community-finale-copy > a span {
  display: none !important;
}

/* 2. Финальная кнопка — тот же набор, что у остальных: подпись 15px вместо плавающей,
   текст по центру, высоты 58/56. */
.community-finale-copy > a {
  justify-content: center;
  gap: 0;
  min-height: 58px;
  padding-inline: 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

@media (max-width: 767px) {
  .community-finale-copy > a {
    min-height: 56px;
  }
}

/* 3. Шапка. Правку кнопки нельзя делать безусловной: до 980px подпись скрыта правилом
   `@media (max-width: 980px) { .header-cta span { display: none } }`, и кнопка там не
   «кнопка с текстом и кружком», а компактная круглая иконка 44px. Первый заход гасил svg
   без этого условия и оставлял на телефоне и портретном планшете ПУСТОЙ овал 46x48 —
   поймано замером ширины до выкладки. Поэтому кружок снимается только там, где есть
   подпись, то есть от 981px. Ниже кнопка остаётся иконкой — как и была. */
@media (min-width: 981px) {
  .header-cta svg {
    display: none !important;
  }

  .header-cta {
    justify-content: center;
    gap: 0;
    width: auto;
    min-height: 52px;
    padding-inline: 22px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    /* Капслок с разрядкой .08em не несёт больше ни одна кнопка на сайте; вместе с кеглем
       12px именно он делал её похожей на служебную метку, а не на действие. */
    text-transform: none;
  }

  .header-cta span {
    max-width: none;
    overflow: visible;
    font-size: 15px;
    text-overflow: clip;
  }
}

/* 4. Планшет. На 768-1180 кнопка была скрыта целиком — на всех iPad и крупных Android в
   шапке не оставалось ни одного призыва, при том что комментарий у .header-cta-free прямо
   называет бесплатный вход главным конверсионным путём. Возвращаем: на 768-980 как иконку
   (подпись туда не встаёт — замер на 768 даёт 744px содержимого при 732px доступных),
   на 981-1180 с подписью. */
@media (min-width: 768px) and (max-width: 1180px) {
  .header-cta {
    display: inline-flex;
  }
}

/* На 981-1180 навигация идёт полноразмерной (пункты 89px против 72px до 980), и с
   вернувшейся кнопкой ряд переставал помещаться: замер дал наложение кнопки на навигацию
   3.7px на 1024x768 и 7.9px на 981 — самой узкой точке полосы. Место набирается с двух
   сторон: 10px с отступов кнопки и 19px с боковых полей шапки, которые здесь идут по
   clamp(22px, 3.2vw, 52px) = 29.5px. После правки наложений нет на 981, 990, 1010, 1024,
   1100 и 1180. */
@media (min-width: 981px) and (max-width: 1180px) {
  .header-cta {
    padding-inline: 12px;
  }

  .site-header {
    padding-inline: 20px;
  }
}


/* ─────────── 2026-08-04: новый арт пробного доступа ─────────── */
/* Скрин платформы 1430x722 заменён на офис ИИ-команды 1100x1100 (квадрат).
   Патч 03.08 подгонял бокс под пропорцию 1430/722, и на новом арте это дало обрезку:
   замер до правки — 393px видно 50.5% высоты, 768px — 41.6% ширины, 820px — 48.5%,
   1024px — 76.4%, 1440px — 87.4% высоты. Механика та же, что и вчера у телефона:
   высоту окна считает сама картинка, а не фиксированный min-height, — только теперь
   безусловно, потому что квадрат не влезает ни в один из заготовленных боксов. */
.trial-card-v2 .trial-visual {
  min-height: 0;
}

.trial-card-v2 .trial-media-window {
  position: relative;
  inset: auto;
}

.trial-card-v2 .trial-preview-static article {
  position: relative;
  display: block;
  height: auto;
}

.trial-card-v2 .trial-preview-static img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
}


/* ─────────── 2026-08-04, правка Руслана: убрать кнопку из шапки на мобильной ─────────── */
/* Убираем на всей полосе до 980px — там кнопка вырождается в безымянный кружок со
   стрелкой: правило `@media (max-width: 980px) { .header-cta span { display: none } }`
   прячет подпись, и от действия остаётся иконка 46x46 без слова, которая на снимке
   владельца читается как посторонний элемент рядом с бургером.
   От 981px кнопка снова текстовая («Попробовать бесплатно», 15px) и остаётся на месте —
   там она уже приведена к канону правкой от 04.08 ниже по файлу. */
@media (max-width: 980px) {
  .header-cta {
    display: none;
  }
}


/* ─────────── 2026-08-04: блок «Зайди внутрь на 1 час» и блок маршрута — на белом ─────────── */
/* Оба новых арта (офис ИИ-команды 1100x1100 и карточки маршрута 1100x1100) нарисованы на
   светлом фоне, а карточка пробного доступа была чернильной: замер до правки — фон
   rgb(21,22,22), текст rgb(243,240,232), акцент rgb(223,255,79). Светлый арт в чернильной
   рамке читался как чужой прямоугольник, поэтому владелец попросил белый фон на обоих блоках.

   Перекраска тянет за собой текст, и это не вкусовое решение, а арифметика контраста:
   салатовый #dfff4f на белом даёт 1.29:1 при норме 4.5:1 — заголовок и надзаголовок стали бы
   нечитаемыми. Поэтому акцент в заголовке переезжает с цвета букв на салатовую плашку с
   чернильным текстом (тот же приём, что у плашек тарифов), а подписи уходят в графит.
   Белый здесь литералом, а не токеном, намеренно: --paper это #f3f0e8, бумага, и на ней
   светло-серый фон артов даёт видимый шов. */
.trial-card-v2 {
  color: var(--ink);
  background: #fff;
}

.trial-card-v2 .section-label {
  color: var(--graphite);
}

.trial-card-v2 .trial-copy-v2 h3 {
  color: var(--ink);
}

.trial-card-v2 .trial-copy-v2 h3 span {
  /* inline + clone, а не inline-block: при переносе внутри span (узкая колонка
     ноутбука ломала «на 12 часов» на две строки; с 06.09.2026 надпись «на 1 час») inline-block давал один цельный
     салатовый слаб; clone обводит каждую строку своей плашкой-маркером. */
  display: inline;
  padding: .02em .18em .06em;
  border-radius: var(--radius-club-control);
  color: var(--ink);
  background: var(--acid);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.trial-card-v2 .trial-copy-v2 p:not(.section-label) {
  color: var(--graphite);
}

/* окно превью и подложка стека тоже светлые — иначе вокруг арта остаётся чернильная рамка,
   ради снятия которой всё и затевалось */
.trial-card-v2 .trial-media-window,
.trial-card-v2 .trial-preview-stack {
  background: #fff;
}

.trial-card-v2 .trial-media-bar {
  color: var(--muted);
}

/* Блок маршрута — тот же язык: белая карточка, арт во всю ширину. Радиусы совпадают с
   карточкой пробного доступа (36px) и её окном превью (24px), чтобы два блока читались
   как одна пара, а не как разные модули. */
.route-card {
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: clamp(12px, 1.6vw, 22px);
  border-radius: 36px;
  background: #fff;
}

.route-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}


/* ─────────── 2026-08-04, правка Руслана: схема dropoff — только на десктопе ─────────── */
/* Владелец на iPhone: «блок этот с анимацией с мобильной версии убрать, в десктопе оставить».
   Снимается только анимированная схема .dropoff-flow (ШУМ / СОМНЕНИЕ, чипы маршрута,
   сканирующий луч) — заголовок .dropoff-title («Что мешает двигаться быстрее» и «Проблема не
   в сложности ИИ. Проблема → в отсутствии маршрута») и смысловая плашка .dropoff-answer
   остаются: они несут тезис страницы, без них секция теряет смысл. Решение владельца 04.08.

   `!important` здесь вынужденный и проверен замером: мобильная перерисовка схемы на
   styles.css:10582 объявляет `display: grid !important`, поэтому обычное правило в конце
   файла проигрывает — первый заход дал на 393px computed display = grid, то есть схема
   осталась на экране. Гоняться за специфичностью в файле с задвоенными блоками здесь нечем:
   инструкция простая и безусловная — на телефоне схемы нет. */
@media (max-width: 767px) {
  .dropoff-flow {
    display: none !important;
  }
}

/* Арт маршрута не растягиваем выше натуральных 1100px: на 1440 бокс давал 1246px, то есть
   картинку тянуло на 113% размера файла — это видимое размыливание тонких подписей внутри
   карточек. Ограничение по ширине с центрированием держит арт в масштабе 1:1 и уже. */
.route-card {
  max-width: 1144px;
  margin-inline: auto;
}


/* ─────────── 2026-08-04: последние хаки-надписи → фирменный акцент ─────────── */
/* Владелец: «опять цвет хаки». Детектор по живой странице (обход всех текстовых узлов с
   вычислением computed color) нашёл ровно два видимых адреса:
   .path-selector-heading .section-label = rgb(66,96,0) — «Маршрут под твою задачу»,
   .faq-heading .section-label = rgb(49,73,0) — «Частые вопросы» (литерал #314900,
   styles.css:5513). Третий адрес виден только при открытой модалке квиза: стрелки в
   списке результата.

   Прямая замена на --acid КАК ЦВЕТ БУКВ не работает, и это арифметика, а не вкус:
   #dfff4f на бумаге #f3f0e8 даёт контраст 1.02:1 — надпись просто исчезает. Ровно поэтому
   #426000 когда-то и завели. Канон для акцента на светлом на этом сайте уже выбран 03.08 и
   стоит на экране результата квиза: не цвет текста, а ПЛАШКА — чернила на салате
   (см. комментарий у .quiz-result h2). Переносим его на оба надзаголовка: фирменный цвет
   виден, текст читается.
   Стрелки в списке результата — служебная графика, а не акцент; они уходят в графит тем же
   решением, каким 03.08 закрыли микроподписи модалки. */
.path-selector-heading .section-label,
.faq-heading .section-label {
  display: inline-block;
  padding: 5px 12px 6px;
  border-radius: var(--radius-club-ui);
  color: var(--ink);
  background: var(--acid);
}

.quiz-result-list a::before,
.quiz-result-list a i {
  color: var(--club-graphite);
}

/* Надзаголовок в шапке маршрута — grid-элемент с `grid-column: 1 / -1` (styles.css:1419),
   поэтому одного inline-block мало: grid-item по умолчанию растягивается на всю колонку, и
   плашка выходила полосой 1176px на 1440. justify-self возвращает её к ширине текста. */
.path-selector-heading .section-label {
  justify-self: start;
  width: fit-content;
}

/* ─────────── 2026-08-04: арт маршрута на телефоне — во всю ширину экрана ─────────── */
/* Правка владельца: «тут изображение во всю ширину лучше сделать». Причина замером: в белой
   карточке с полями арт ужимался до 329px, и подписи внутри карточек шли ~6.8px по высоте
   глифа при пороге читаемости 8px. Блок выходит за поля секции отрицательными полями и
   занимает всю ширину вьюпорта — это возвращает арту ~19% размера. Скругления снимаются:
   у края экрана они читались бы как обрезанные. */
@media (max-width: 767px) {
  .route-card {
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0;
    border-radius: 0;
  }

  .route-map {
    border-radius: 0;
  }
}


/* ═══════════ 2026-08-04: ревизия планшетов, блокеры + шов секций ═══════════ */

/* --- ШОВ: чёрные уголки над секцией FAQ ---------------------------------------
   Владелец с телефона: «тут рамку надо поправить, а то грубо обрезается».
   Замер пикселей в вырезах скругления: rgb(11,12,13) — это фон body, а не соседняя
   секция. Механика: `#pricing` (бежевая, #f3f0e8) кончается ровно на 16320px, там же
   начинается `#faq` со скруглением 36px на телефоне и 64px выше. Под вырезом угла
   собственного фона у секции нет, а под ним лежит чернильный body — отсюда два
   острых чёрных уголка на светлом стыке.
   Подкладываем полосу цвета предыдущей секции. z-index: -1 держит её под фоном
   `#faq` и над фоном body: в самом теле секции подложка не видна вообще, она
   проступает ровно в вырезах. У секции уже есть `position: relative; z-index: 16`
   (styles.css:980), так что собственный слой ей заводить не нужно.
   Проверено на остальных стыках: у `#roadmap` в вырезах лежит чернильный `#outcomes`,
   то есть цвет соседа, — там это не дефект, а задуманный переход. */
.faq-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 72px;
  background: var(--paper);
}

/* --- БЛОКЕР: вкладки «Контекст / Система / Практика» мертвы на 768-1180 --------
   Вчерашнее снятие перехвата со сцены двери не долетает до `.hero-copy`: у неё
   собственное `pointer-events: auto` (styles.css:496), а потомок с `auto` сильнее
   предка с `none` — перехват возвращается всему поддереву первого экрана.
   На телефоне это незаметно: там `.universe-switcher { position: static }` и полоса
   вкладок не всплывает в полосу прибитого hero. На 768-1180 полоса — `sticky; top: 84px`
   и садится ровно на hero-копию: наложение боксов 40661px² на 768x1024 и 65681px²
   на 1180x820. Замер: elementFromPoint в центре вкладки возвращал `p.hero-note`,
   `span.hero-line`, `div.hero-actions` — что угодно, кроме вкладки.
   Порядком слоёв не лечится: `.portal-story` это z-index 2, `#inside` — z-index 1.
   Гасим перехват там, где копия заведомо невидима, по фазе, которую script.js уже
   пишет в data-phase: hero (<0.18) / message (<0.58) / passage (<0.86) / handoff.
   `.hero-shell` доходит до opacity 0 уже на прогрессе 0.24-0.31, а столкновение
   начинается с 0.907 — запас 0.27. Кнопки первого экрана в фазах hero и message
   правило не трогает. */
.portal-stage[data-phase="passage"] .hero-copy,
.portal-stage[data-phase="handoff"] .hero-copy {
  pointer-events: none;
}

/* --- БЛОКЕР: плашка тарифа лежит на карточке верхней строки, 768-1180 ----------
   Тот же дефект и та же механика каскада, что чинили 03.08 на телефоне.
   `@media (max-width: 1180px)` (styles.css:3815) объявляет для этой сетки
   `gap: 56px 14px` — 56px заложены под выступ плашки. Ниже по файлу, styles.css:4166,
   стоит БЕЗУСЛОВНОЕ `.price-grid-v2 { gap: 12px }`, и при равной специфичности
   побеждает оно. Вчерашний возврат зазора завёрнут в `max-width: 767px`.
   Замер на 768 / 820 / 834 / 1024 / 1180: плашка выступает над своей карточкой на
   30px при зазоре 12px — то есть ложится на карточку верхней строки на 18px.
   66px = 30px выступа + 36px чистого зазора, ровно того, что принят на телефоне.
   Обе границы обязательны: без `min-width: 768px` правило встало бы поверх
   телефонного row-gap 58px и сломало бы уже принятую раскладку. */
@media (min-width: 768px) and (max-width: 1180px) {
  .price-grid-v2 {
    row-gap: 66px;
  }
}

/* --- БЛОКЕР: липкая стопка отзывов мертва на 768-980 --------------------------
   Стопка жива только по краям диапазона: ниже 768px её вернули 03.08
   (`.case-slide { position: sticky; top: 88px }`), выше 980px работает
   `top: max(112px, calc((100svh - 430px) / 2))` (styles.css:5429). Между ними всё
   гасит `@media (max-width: 980px) { .case-slide { top: auto; min-height: 0 } }`
   (styles.css:5561): position остаётся sticky, но без края залипания карточки
   просто проезжают мимо.
   Замер до правки (webkit 768x1024, 820x1180, 834x1194; chromium 900x1200, 980x800):
   залипших карточек 0 из 5 на всех 31 шаге прокрутки — верх карточки смещается ровно
   на величину скролла. Подсветка при этом гасила до opacity .38 карточку, которая
   целиком стоит на экране: до 275.7px погашенного полотна на 19 шагах из 31.
   Берём константу 88px, а не десктопную формулу: шапка на планшете 82px, зазор 6px,
   и главное — у формулы в паре стоит innerHeight в script.js, а на iPad Safari svh и
   innerHeight расходятся при показе панели. Парная правка в script.js обязательна и
   внесена тем же заходом. */
@media (min-width: 768px) and (max-width: 980px) {
  .case-slide {
    position: sticky;
    top: 88px;
  }
}

/* --- Плашка AI ROOM наезжает на карточку маршрута, 768-857 --------------------
   Замер зазора «правый край плашки → левый край карточки»: 768 → −20.0px,
   800 → −15.0px, 820 → −9.7px, 834 → −6.1px, 860 → +0.9px, 1440 → +39.5px (эталон).
   У плашки z-index 4, у карточки 3, поэтому плашка красится поверх: на 768 она
   закрывает 6.0px кружка «01».
   Причина: `--flow-gate-shift: 58px` подобран на 1200-1920, где колонка диаграммы
   520-700px. На ≤1180 доска складывается в две колонки, и на 768 оба трека стоят на
   минимумах — колонка диаграммы ровно 400px. Плашка позиционируется от половины
   ширины колонки, карточка прибита к правому краю: зазор = W/2 − 162.5 − shift,
   уходит в минус при ширине колонки меньше 441px, то есть при экране уже ~858px.
   Структуру не трогаем — возвращаем диаграмме десктопные пропорции четырьмя числами.
   Замер после: 768 → +20.0, 820 → +30.3, 860 → +40.9. На 1024, 1180 и 1440 всё до
   пикселя как было. */
@media (min-width: 768px) and (max-width: 980px) {
  :root {
    --flow-gate-shift: 40px;
  }

  .dropoff-flow {
    padding: 22px 22px 24px !important;
  }

  .dropoff-flow::before {
    inset: 18px;
  }

  .flow-source {
    padding-left: 8px;
  }

  .flow-source strong {
    font-size: 12px;
  }

  .flow-route {
    right: 26px;
    width: 160px;
    padding: 16px 12px;
  }
}


/* ═══════════ 2026-08-04, ревизия планшетов и Android: второй заход ═══════════
   Находки уровнем ниже блокеров. Патчи собраны из отчётов read-only разведчиков,
   конфликты между ними разрешены оркестратором вручную (сверщик не отработал,
   упал по лимиту сессии) — решения помечены по месту. */

/* ── Плашки реплик чата лежат на лицах аватарок, 768-1180 ──
   Замер: на 1180x820 пересечение плашек с кругами аватарок 2091.8px² (17.34% их площади),
   из них 563.3px² приходится на центральные зоны лиц; у одной из аватарок плашка
   закрывает 45.5% лица. На 1024x768 — 340.8px², на 768x1024 — 230.0px².
   Механика та же, что вылечили 03.08 на телефоне: `min-height` облака перебит поздним
   безусловным правилом, а лечение завёрнуто в `max-width: 767px` и до планшета не достаёт. */
@media (min-width: 768px) and (max-width: 1180px) {
  .context-format-chat {
    align-content: stretch;
  }

  /* Иначе текстовая колонка растянется вместе с треком и потеряет вертикальное
     центрирование — та же оговорка, что у коллажной строки выше по файлу. */
  .context-format-chat .context-format-copy {
    align-self: center;
  }

  .context-member-one   { top: 22.1%; }
  .context-member-two   { top: 28.5%; }
  .context-member-logo  { top: 41.3%; }
  .context-member-three { top: 43.9%; }
  .context-member-five  { top: 49%; }
  .context-member-four  { top: 54.7%; }
}

/* ── Блок «Материалы» шире контейнера на 320-382px ──
   Замер 320x568: одна аватарка видна на 0% (срез 61px), другая на 15.9%, третья на 33%,
   обе плашки реплик разрезаны пополам вместе с текстом, коллаж канала виден на 64.7%.
   На 360px (самая массовая ширина Android) срез 13-21px, на 375px — 2-6px, с 383px
   дефекта нет. Причина — жёсткие минимумы колонок `minmax(110px, .8fr) minmax(150px, 1.2fr)`:
   110 + 8 + 150 больше, чем остаётся под контент на 320px. Снимаем минимумы, пропорции
   колонок сохраняем. */
@media (max-width: 383px) {
  .context-format-row {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 340px) {
  .context-format-copy h4 {
    font-size: 16px;
  }
}

/* ── Чипы маршрута на телефоне: подписи наезжают на соседние кружки ──
   Замер: на 320px «Понять» заходит на кружок «02» на 9.1px, «Собрать» на кружок «03» на
   16.9px, «Применить» вылезает за карточку на 28.3px и режется по буквам через
   overflow: hidden. На 360px — 3.5px и 15.0px. Это же слово ловил и общий скан страницы:
   scrollWidth 72px в боксе 33px на 320-м, 46px на 360-м, 57px на 393-м, 64px на 412-м.

   КОНФЛИКТ ДВУХ АГЕНТОВ, решение оркестратора: один предлагал разложить ленту чипов в
   столбец на ≤460px, второй — оставить три чипа в ряд, а подпись перенести под кружок.
   Взят второй: он не меняет композицию блока, которую владелец уже принял, и стоит
   меньше высоты страницы. Первый вариант остаётся запасным, если замер покажет, что
   подписи всё равно не влезают. */
@media (max-width: 767px) {
  .flow-route li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    justify-items: center;
    text-align: center;
  }

  .flow-route b {
    font-size: 11px;
  }
}

/* ── Дорожная карта на планшете в портрете: нижняя четверть экрана пуста ──
   Замер 820x1180: карта приколота, её низ на 906.7px при вьюпорте 1180px — ниже остаются
   277px, в которых нет ни карточки, ни дорожки, ни маскота (проверено elementFromPoint по
   сетке, ноль попаданий в контент на 46 строках). Полоса висит пустой все 1047px прокрутки,
   то есть 23.5% экрана не работает. На 834x1194 это 291px, на 1024x1366 — 451px (34%). */
@media (min-width: 768px) and (max-width: 1180px) {
  .miro-map {
    max-height: none;
  }
}

/* ── Замок прокрутки под модалкой квиза ──
   `body.quiz-open { overflow: hidden }` не работает по двум причинам сразу: его перебивает
   более специфичное правило ниже по файлу, и overflow с body распространяется на вьюпорт
   только пока у html `overflow: visible`, а здесь у html свой `overflow-x: clip`.
   Замер до правки: колесо по затемнению (три тика по 300px) уводило страницу под модалкой
   на 785-900px на всех девяти форматах в обоих движках. */
/* 18.08: тот же CSS-слой замка обобщён на остальные модалки (trial/lead/usecase —
   класс body.modal-open). position:fixed из JS-замка убран: к удержанию он ничего
   не добавлял (Safari держит это правило, Chrome — явное гашение колеса/тача),
   но схлопывал документ и ронял scrollY в 0 — источник «дёргания» при закрытии. */
html:has(body.quiz-open) body,
html:has(body.modal-open) body {
  overflow: hidden !important;
}

.quiz-dialog-main {
  overscroll-behavior: contain;
}

/* ── На 320px вторая кнопка первого экрана уходила под кромку ──
   Замер: низ блока кнопок приходился на 630px при вьюпорте 568 — «Стать участником» была
   ниже кромки на 62px и недостижима: сцена прибита и режет содержимое по overflow: hidden.
   За 9 позиций прокрутки кнопка не показалась ни разу. Причина не в кнопках, а в заголовке:
   нижняя граница clamp включается ниже 357.7px ширины и держит кегль 44px. */
@media (max-width: 360px) {
  .hero-copy h1 {
    font-size: clamp(34px, 12.3vw, 50px);
  }
}

/* ── Сцена двери на низком экране ──
   `min-height: 620px` у сцены снято только на `max-width: 767px`, поэтому при ширине 768+
   оно действует и там, где экран НИЖЕ 620px: телефон в альбомной ориентации (852x393) и
   низкие планшеты. Сцена оказывается выше вьюпорта, и низ её содержимого недостижим. */
@media (max-height: 620px) {
  .portal-stage {
    min-height: 0;
  }
}

/* ── Карусель на Android Chrome: активная карточка уезжает влево ──
   На Blink активная карточка накапливает смещение до 128px к десятой; на WebKit этого нет.
   Причина — `perspective` на контейнере: в Blink она считается от центра контейнера, и
   каждая следующая карточка получает свой сдвиг. Переносим перспективу внутрь transform
   самой карточки, где точка схода у каждой своя. */
.subscription-rail {
  perspective: none;
}

.subscription-rail article {
  transform:
    perspective(1300px)
    translateY(var(--card-y, 96px))
    translateZ(var(--card-z, 0px))
    rotateY(calc(var(--card-distance, 0) * -4deg))
    rotate(var(--card-rotate, 0deg))
    scale(var(--card-scale, .78));
}

/* ── Зоны касания ниже нормы Apple HIG 44x44 ──
   Замер по всем форматам: ссылка «Смотреть отзывы в Telegram» 241x41, крестик квиза 40x40
   на ≤680px, стрелки карусели 40x40. У стрелок зона наращивается псевдоэлементом, чтобы
   видимый кружок остался прежнего размера. */
@media (max-width: 1180px) {
  .reviews-channel-link {
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 680px) {
  .quiz-close {
    width: 44px;
    height: 44px;
  }
}

.membership-carousel-controls button {
  position: relative;
}

.membership-carousel-controls button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  content: "";
}

/* ── Карточки «03 неделя» и «04 неделя» наезжали друг на друга на 9px, 768-980 ── */
@media (min-width: 768px) and (max-width: 980px) {
  .map-node-three {
    bottom: 32%;
  }
}

/* ── Подписи треков на планшете были мельче, чем на более узком экране: 11px против 13px ── */
@media (min-width: 768px) and (max-width: 1180px) {
  .path-selector-tabs button {
    font-size: 13px;
  }
}


/* ═══════════ 2026-08-04, добор после приёмки второго захода ═══════════ */

/* ── Замок прокрутки под модалкой квиза: правило переезжает с body на html ──
   Первый заход ставил `overflow: hidden` на body — замер показал, что страница под
   модалкой по-прежнему уезжает на 900px из 900 запрошенных на всех четырёх проверенных
   форматах. Причина ровно та, что была описана в разборе: overflow с body управляет
   вьюпортом только пока у html `overflow: visible`, а здесь у html свой `overflow-x: clip`,
   и прокрутку ведёт именно html. Замок обязан стоять на нём. */
html:has(body.quiz-open) {
  overflow: hidden !important;
}

/* ── Остатки обрезанного текста на 320px ──
   Замер на 320x568 после первого захода: «Применить» в чипе маршрута 61px в боксе 54px
   (кегль 11px), «Материалы» во вкладке платформы 63px в боксе 55px (11px), и подпись
   виджета «Сможешь создать любого AI-агента и кастомизировать…» 245px в боксе 218px
   при кегле 31px. На 360px и шире все три влезают. */
@media (max-width: 360px) {
  .flow-route b {
    font-size: 10px;
  }

  .platform-theater-controls button strong {
    font-size: 10px;
  }

  .capability-widget strong {
    font-size: 26px;
  }
}

/* ── Зоны касания: добор до 44x44 без изменения вида ──
   После первого захода в списке ниже нормы остались четыре адреса: skip-link 203x40,
   логотип 73x24, ссылка «Открыть платформу и бесплатные материалы» 269x21 и ссылка FAQ
   в подвале 38x44. Первые две и последняя правятся отступами, у инлайновой ссылки в
   тексте отступы разорвали бы строку, поэтому зона наращивается псевдоэлементом —
   тем же приёмом, что уже применён к стрелкам карусели. */
.skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.inline-platform-link {
  position: relative;
}

.inline-platform-link::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 44px;
  transform: translateY(-50%);
  content: "";
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}


/* ── Добор: точные адреса вместо промахнувшихся селекторов ──
   Диагностика показала, что два предыдущих правила били мимо цели.
   «Применить» живёт не в чипах диаграммы `.flow-route`, а в строке маршрута под дверью:
   путь `div.inside-scene > div.inside-copy > div.inside-route-map > span > b`. Замер на
   320px: 61px текста в боксе 54px при кегле 11px.
   Подпись виджета «Сможешь создать любого AI-агента…» адрес имела верный, но правило
   проиграло по специфичности более раннему `.capability-widget.is-active strong`,
   поэтому селектор здесь усилен состоянием, а не !important. */
@media (max-width: 360px) {
  .inside-route-map b {
    font-size: 10px;
  }

  .capability-widget.capability-phase strong,
  .capability-widget.is-active strong {
    font-size: 26px;
  }
}

/* ── Зоны касания: остатки ──
   После второго захода ниже нормы остались ссылки подвала (30x44 — по высоте норма,
   по ширине нет), пункты главного меню на планшете и десктопе (72x31 … 97x34) и ссылка
   на канал отзывов на ширинах больше 1180, куда прошлый патч не доставал. */
.site-footer a {
  min-width: 44px;
  justify-content: center;
}

.desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.reviews-channel-link {
  min-height: 44px;
  align-items: center;
}


/* ── Плашки чата на лицах: снимаем верхнюю границу диапазона ──
   Правило выше было ограничено 1180px, и замер на проде показал, что выше границы дефект
   живёт: 3873px² пересечения плашек с аватарками на 1440. Разведчик отмечал это в своих
   допущениях и приводил числа по десктопу (2189.6-2742.7px² на 1181/1280/1366/1440), а
   безусловный вариант проверил отдельно — 0px² на всей полосе 1181-1920. Снимаем потолок. */
@media (min-width: 768px) {
  .context-format-chat {
    align-content: stretch;
  }

  .context-format-chat .context-format-copy {
    align-self: center;
  }

  .context-member-one   { top: 22.1%; }
  .context-member-two   { top: 28.5%; }
  .context-member-logo  { top: 41.3%; }
  .context-member-three { top: 43.9%; }
  .context-member-five  { top: 49%; }
  .context-member-four  { top: 54.7%; }
}

/* ── Последняя узкая зона касания: ссылка в подвале на планшете 40px по ширине ── */
.site-footer a {
  min-width: 48px;
}

/* ── Отзывы: ход липкой стопки. Замер 04.08, оба движка, 393/768/1440 ────────────
   Залипание работало и до правки: карточки честно копились на линии (88px на телефоне,
   235px на десктопе), к пятой на экране лежала стопка из четырёх. Ломался ритм. Ход
   между строками был 14px на телефоне и 100-118px на планшете и десктопе, поэтому
   следующая карточка наезжала на предыдущую в тот же момент, когда та залипала, и
   резала цитату посередине строки — отзыв физически нельзя было дочитать.
   `row-gap` длиннее любого прежнего `gap` по порядку в файле, поэтому бьёт и правило
   `gap:14px` из медиазапроса до 767px, и `gap:12vh` для планшета с десктопом.

   Пятой карточке нужен хвост. Замер показал, что дальность липкости здесь считается по
   content-box стопки: пробег первой карточки ровно равен высоте содержимого стопки минус
   её собственная высота. Поэтому `padding-bottom` пятой карточке не помогает — проверено,
   пробег остался 0px и с отбивкой 383px, и без неё. Пустой grid-элемент в конце входит
   в content-box, и стопка удлиняется на один ход: пятая карточка получает такое же
   время, как остальные четыре. Высота ему не нужна — работает сам `row-gap` перед ним. */
.case-reel {
  row-gap: var(--case-reel-travel);
  padding-bottom: 0;
}

.case-reel::after {
  display: block;
  height: 0;
  content: "";
}


/* ── Маршрут: на телефоне лист разрезан на карточки, на десктопе остаётся цельным ──
   Решение Tony 04.08. Причина замером: цельный лист 1100×1100 на 393px показа ужимается
   до масштаба 0.36, и подписи внутри карточек идут ~7.9px по высоте глифа при пороге
   читаемости 8px. Отдельная карточка занимает всю ширину экрана, то есть показывается в
   масштабе ~0.63 — те же подписи вырастают втрое.
   Пятая карточка на исходном листе лежит в две колонки, поэтому разрезана надвое: тезис
   и экран выплат Tribute. Целиком она дала бы на телефоне ~0.33 масштаба, то есть имена
   в списке выплат ~4.6px — ровно та болезнь, от которой лечим.
   Оба варианта лежат в разметке, и лишний не скачивается: `loading="lazy"` + `display:none`
   означает, что картинка никогда не попадает во вьюпорт, поэтому запроса за ней нет. */
.route-cards {
  display: none;
}

@media (max-width: 767px) {
  .route-map {
    display: none;
  }

  .route-card {
    padding: 10px;
    background: var(--route-sheet-paper);
  }

  .route-cards {
    display: grid;
    gap: 10px;
  }

  .route-cards img {
    display: block;
    width: 100%;
    height: auto;
  }
}


/* ── Блок «1 час» на планшете 768-980 — в одну колонку ────────────────────────
   Решение Tony 04.08. Причина замером: колонки заданы как
   `minmax(300px,.76fr) minmax(0,1.24fr)` (styles.css:8180), и на планшете текст упирается
   в свой минимум 300px, а визуалу остаётся 250px на 768 — арт офиса 1100×1100 показывался
   222×222, то есть в масштабе 0.20. В одну колонку тот же арт получает 568×568 на 768 и
   733×733 на 980, а текст — 596-761px вместо 300px.
   Цена: карточка вырастает с 700px до 1195px на 768 и до 1399px на 980, то есть примерно
   на полэкрана планшета. Верхняя граница 980px, а не 1180px: на 1024 двухколоночная
   раскладка уже даёт визуалу 433px и читается как задумано.
   Высоту визуала на планшете, как и на телефоне, считает сама картинка: `min-height`
   снимается, окно возвращается в поток из `position:absolute; inset:0` (styles.css:8189),
   иначе оно тянулось бы на 610px независимо от того, сколько нужно арту. `aspect-ratio`
   здесь не задаём: при `height:auto` картинка держит собственные пропорции, и правило
   переживёт замену ассета — в отличие от телефонного, где стоит 1430/722 от старого
   скрина платформы. */
@media (min-width: 768px) and (max-width: 980px) {
  .trial-card-v2 {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .trial-card-v2 .trial-visual {
    min-height: 0;
  }

  .trial-card-v2 .trial-media-window {
    position: relative;
    inset: auto;
  }

  .trial-card-v2 .trial-preview-static article {
    position: relative;
    display: block;
    height: auto;
  }

  .trial-card-v2 .trial-preview-static img {
    height: auto;
    object-fit: cover;
    object-position: center center;
  }
}


/* ── Информирование о рекомендательной технологии рядом с квизом ─────────────────
   Требование статьи 10.2-1 закона 149-ФЗ: на ресурсе, где применяется рекомендательная
   технология, должно быть информирование о её применении со ссылкой на правила. Квиз —
   единственное место на сайте, где такая технология применяется, поэтому строка стоит
   вплотную к кнопке, а не только в подвале.
   `.quiz-bottom` — флекс-строка «текст ↔ кнопка» (styles.css:1107). Третий ребёнок встал бы
   в ту же строку и сжал оба соседних блока, поэтому строка переносится на свою: перенос
   разрешаем, ребёнку даём всю ширину и порядок после кнопки. `grid-column` добавлен на
   случай раскладок, где этот же блок объявлен сеткой (styles.css:3356). */
.quiz-bottom {
  flex-wrap: wrap;
}

.quiz-legal {
  order: 3;
  width: 100%;
  max-width: 660px;
  flex-basis: 100%;
  margin: 4px 0 0;
  grid-column: 1 / -1;
  color: var(--muted-light);
  font-size: 14px;
  line-height: 1.5;
}

.quiz-legal a {
  color: var(--acid);
  text-decoration: underline;
  text-underline-offset: .18em;
}



/* ── Подвал: коллаж из 12 портретов на планшете ────────────────────────────
   Замер 04.08, WebKit и Chromium. .community-mosaic (исходник 1672x941,
   пропорция 1.7768) стоит в боксе width:100% / height:calc(100% - clamp(...))
   с object-fit:cover. На планшете секция тянется на 100svh, поэтому бокс
   ВЕРТИКАЛЬНЫЙ: 768x860 (0.89), 820x996 (0.82), 834x1010 (0.83), и cover режет
   по ширине:
     768x1024 — видно 50.2% ширины исходника, целиком 4 портрета из 12;
     820x1180 — 46.3%, целиком 2, ещё 2 срезаны (91% и 96%), 8 не видно;
     834x1194 — 46.5%, то же самое;
     1024x768 — 87.8%, шесть портретов срезаны до 70-80%.
   Пустая середина кольца при этом занимает 23.5% площади кадра на 820 против
   11.7% на десктопе 1440. Патч ≤767px (styles.css:11383) сюда не достаёт, а на
   1180x820 дефекта уже нет (98.2%, все 12 целиком).
   Лечим тем же приёмом, что и на телефоне: перестаём натягивать горизонтальную
   картинку на вертикальный бокс. height:auto при width:100% даёт боксу
   собственную пропорцию картинки, top:50% + translateY(-50%) центрирует полосу
   в секции (центр прежнего окна inset отличался от центра секции на 10px).
   object-fit:contain здесь страховочный: при height:auto cover и contain дают
   один и тот же кадр.
   После патча на 768/820/834/1024/1180 — 100% ширины и 100% высоты исходника,
   все 12 портретов целиком, середина кольца 10.9% площади кадра, как на 1440. */
@media (min-width: 768px) and (max-width: 1180px) {
  .community-mosaic {
    top: 50%;
    bottom: auto;
    height: auto;
    transform: translateY(-50%);
    object-fit: contain;
  }
}



/* ── Подвал на 320px: копирайт складывался в 5 строк ────────────────────────
   Замер 04.08, оба движка. .site-footer — flex со space-between: слева
   <span>AI ROOM CLUB © 2026</span>, справа <div> с тремя ссылками (gap 24px).
   На 320px в строку доступно 320 − 2*20 (margin-inline, styles.css:2587)
   − 2*16 (padding-inline) = 248px при собственной ширине содержимого 442.6px.
   Flex ужал копирайт до 36.67px и разложил его в пять строчных боксов, подвал
   вырос со 135 до 165px, а так как он position:absolute; bottom:0, его верх
   поднялся с 709 на 679 и копирайт заехал на нижнюю фотополосу ::after
   (перекрытие 16px).
   Возвращаем 20px за счёт полей и 32px за счёт зазора между ссылками — ровно
   столько нужно копирайту на две строки, как на 360 и 393. Уже к 360px правило
   не применяется, поэтому принятая владельцем раскладка телефона не меняется. */
@media (max-width: 359px) {
  .site-footer { margin-inline: 10px; }
  .site-footer > div { gap: 8px; }
}


/* ── Реквизиты продавца отдельной полосой ПОД сценой финала ─────────────────────
   Обязанность по статье 9 закона «О защите прав потребителей»: продавец сообщает
   наименование, ОГРНИП и способ связи до заключения договора. Раньше на сайте не
   было ни одного реквизита — проверено грепом: ни ИНН, ни ОГРНИП, ни фамилии.

   Первый заход клал строку внутрь `.site-footer` — и это оказалось ошибкой, пойманной
   замером. Финал `.community-finale` — сцена фиксированной высоты (844px на телефоне),
   подвал в ней `position:absolute; bottom:0`, а фотополоса `::after` висит на 122px от
   низа. Строка реквизитов подняла высоту подвала со 135 до 216px, его верх уехал с 709
   на 628 и текст лёг прямо на лица — перекрытие 87px на 320px.
   Поэтому полоса вынесена ИЗ сцены, после `</main>`, в обычный поток: она не может
   наехать ни на что по построению, а сцена финала осталась ровно такой, какой её принял
   владелец. */
.site-legal {
  padding: 18px 20px 26px;
  color: var(--muted-on-light);
  background: var(--paper);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.site-legal p {
  max-width: 900px;
  margin: 0 auto;
}

.site-legal p + p {
  margin-top: 6px;
}

.site-legal a {
  color: inherit;
  text-underline-offset: .18em;
}


/* ── Сноска к упоминанию Instagram в отзыве ────────────────────────────────────
   Требование закона о рекламе и практики ФАС: упоминание проекта Meta Platforms Inc.
   сопровождается указанием на её статус в РФ. Сноска положена ВНУТРЬ blockquote,
   а не отдельным ребёнком карточки: `.case-slide` — flex со space-between из двух
   детей (цитата и автор), третий ребёнок развалил бы вертикальный ритм карточки,
   который держит липкую стопку. Внутри цитаты она добавляет высоты только этой
   карточке — проверено замером пробега залипания после правки. */
.quote-note {
  display: block;
  margin-top: 16px;
  color: var(--muted-on-light);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
}



/* ── «Материалы» во вкладках платформы: на 320px слово режется многоточием ──
   Замер 320x568, оба движка: strong 57px текста в боксе 55px при
   `overflow:hidden; text-overflow:ellipsis; white-space:nowrap` (styles.css:6196) —
   вкладка рисуется как «Материа…», а не переполняется незаметно. Пиксельно: тушь
   50.5px вместо 57.2px, полторы буквы съедены.
   Кегль трогать больше нечем — его уже дважды понижали (11px → 10px, styles.css:12124).
   Забираем 8px из внутренних отступов кнопки: сама кнопка — ячейка сетки 1fr, её
   ширина и фон не меняются, растёт только content-box под текст, а текст в кнопке
   и так центрирован (styles.css:6285-6294).
   После: 320 → sw63/cw63, over 0, ellipsis не срабатывает, тушь 56.0px (слово целиком).
   На 341-360 правило тоже действует, но там дефекта не было и вид не меняется. */
@media (max-width: 360px) {
  .platform-theater-controls button {
    padding-inline: 2px;
  }
}



/* ── Пара карточек «В ПРЯМОМ ЭФИРЕ / ВОРКШОПЫ» на телефоне: две колонки по 120px ──
   Замер 320x568, оба движка: сетка `120px 120px` (styles.css:3828, действует до 980px),
   кегль 10px (styles.css:3843, до 680px) — на текст остаётся 92.8px, абзац из 68 знаков
   рисуется в пять строк по 9-16 знаков: «Актуальные темы, | разборы и | панельные |
   дискуссии вместе | с участниками.» На 360 — четыре строки, на 412 и 430 — три, и
   везде десятым кеглем. Это не подпись-чип, это абзац, и 10px для него ниже порога.
   Две колонки имеют смысл, пока каждой достаётся хотя бы ~250px; на телефоне их нет.
   Ставим одну колонку и возвращаем кегль к 12px. Порог 480px, а не 680: на 600px
   колонки уже по 260px и трогать там нечего — замерено, дельта высоты страницы 0.
   Второй селектор обязателен из-за styles.css:9454, где та же сетка адресуется
   тройной цепочкой; по специфичности (0,3,0) он бы перебил одиночный класс. */
@media (max-width: 480px) {
  .benefit-stack,
  .club-universe .universe-stage .benefit-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .benefit-stack strong {
    font-size: 12px;
    line-height: 1.4;
  }
}



/* ── «Применить» в маршруте под дверью: 56px текста в ячейке 54px на 320px ──
   Замер 320x568, оба движка: scrollWidth 56 при clientWidth 54. Обрезки при этом нет —
   у `b` overflow visible, ближайший клипующий предок `.inside-scene` кончается на 320px,
   а правый край туши на 303.6px, то есть слово читается целиком и просто съедает 1.6px
   из 18px поля. Это гигиена, а не блокер: правим, потому что дёшево и снимает
   последнюю строку из детектора обрезки на 320.
   Кегль уже понижен до 10px (styles.css:12181), понижать дальше нельзя. Берём 4.3px
   из двух зазоров: gap сетки 4px → 2px и column-gap внутри чипа 6px → 3px. Кружок
   с номером (32px) не трогаем — его размер подбирали отдельно (styles.css:7265-7278).
   Порог 340px, а не 360: на 330px замер уже даёт sw57/cw57. */
@media (max-width: 340px) {
  .inside-route-map {
    gap: 2px;
  }

  .inside-route-map > span {
    column-gap: 3px;
  }
}



/* ── Шаги маршрута на телефоне: тексту остаётся меньше половины экрана ──
   Замер 320x568, оба движка: цепочка отступов .section-shell 20+20 → .path-selector
   16+16 → рамка окна 1+1 → .path-route 18+18 → колонка номера 36+16 забирает 162px
   из 320px, то есть 50.6% ширины экрана; абзацу остаётся 156px и он идёт в четыре
   строки по 19-22 знака. Обвязка абсолютная: на 430px это те же 162px, но уже 37.7%,
   поэтому лечится она только на узком.
   Кегль не трогаем — clamp(13px,1vw,16px) (styles.css:1647) на телефоне и так стоит на
   нижней границе. Снимаем 40px с отступов и колонки номера. Кружок и направляющая
   линия обязаны ехать вместе с колонкой: линия центрируется по кружку
   (.path-route-steps::before, styles.css:1583), центр кружка 29px в колонке 30px — это
   14.5px, поэтому left: 14px.
   Побочный выигрыш: #roadmap на 320px худеет на 88px, страница на 89px. */
@media (max-width: 430px) {
  .path-selector {
    padding-inline: 8px;
  }

  .path-route {
    padding-inline: 12px;
  }

  .path-route-steps li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
  }

  .path-route-steps li > i {
    width: 29px;
    height: 29px;
  }

  .path-route-steps::before {
    left: 14px;
  }
}



/* ── Заголовок «Мы не даём тебе / уйти без результата»: слово «тебе» одно на строке ──
   Замер обоими движками на 320, 360, 393, 430, 600, 768, 1024, 1180, 1440, 1920:
   первый узел заголовка везде рвётся как «Мы не даём» / «тебе» — четырёхбуквенная
   сирота под 36-52px кеглем. Причина не в ширине: у этого h2 computed text-wrap = wrap,
   тогда как у соседних дисплейных заголовков секции (.outcomes-heading-v2 h2,
   .dropoff-title strong, .universe-copy h3) он уже balance — проверено getComputedStyle
   на живой странице. Балансировка перекладывает тот же текст в «Мы не» / «даём тебе».
   Правило безусловное, потому что дефект есть и на планшете, и на десктопе, а цена
   нулевая: высота элемента совпадает до 0.1px и высота страницы не меняется ни на одной
   из десяти замеренных ширин. Safari до 17.5 свойство игнорирует — там останется
   сегодняшнее поведение, хуже не станет. */
.path-selector-heading h2 {
  text-wrap: balance;
}



/* ── Зоны касания: два адреса, оставшиеся ниже 44x44 ─────────────────────────────
   Замер 04.08 в живом браузере (chromium + webkit) на 320/360/393/430/600/700/767/
   768/800/820/834/900/960/980/981/1000/1100/1180/1200/1280/1440/1920. Прошлый список
   уже закрыт предыдущими заходами и переснят заново: skip-link 204x44, логотип 98x44
   (74x44 на телефоне), «Открыть платформу и бесплатные материалы» 270x45 через уже
   стоящий ::after, ссылка на канал отзывов 242x44, обе стрелки карусели 44x44, ссылки
   подвала 48x44 — все норма. Ниже нормы остались ровно два адреса.

   1. Пункт «Демо» главного меню: 40.1x44 на полосе 768-980px. Это ровно диапазон блока
      `min-width:768px and max-width:980px`, где кегль пункта падает до 10px, а
      padding-inline до 7px; на 981px и шире пункт 51.3x44, на 1440px — 59.3x44, норма.
      Ширину задаёт длина слова, поэтому зона добирается псевдоэлементом, а не min-width:
      min-width сдвинул бы «Тарифы» вправо, ::after не двигает ничего (пиксельная разница
      шапки до и после — 0 из 76800 точек на 768px и 0 из 82000 на 820px).
      Псевдоэлемент прижат к правому краю ссылки, а не отцентрован, намеренно: слева от
      «Демо» лежит 37.6px пустоты до двери, справа — 2.5px до «Тарифов». Прижатый вправо
      ::after уходит в пустоту и оставляет зазор до «Тарифов» прежним.
   2. Ссылка «Правила применения рекомендательных технологий» под квизом: инлайновая
      строка внутри абзаца, 16-17px по высоте на ВСЕХ ширинах, включая десктоп; на 320px
      она разбита на три строки, на 393-430px — на две, каждый фрагмент 16px.
      Вертикальный padding у инлайнового элемента не входит в высоту строки и не двигает
      верстку: высота абзаца `.quiz-legal` осталась 46.5px, высота `.quiz-bottom` — 231px,
      высота документа — 22176px на 768px, hOverflow — 0. 14px сверху и снизу дают
      16+28=44px на телефоне и 17+28=45px на планшете и десктопе. */
.desktop-nav a {
  position: relative;
}

.desktop-nav a::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  content: "";
}

.quiz-legal a {
  padding-block: 14px;
}



/* ── Контраст мелких подписей в макете окна пробного доступа ────────────────────
   Замер 04.08, chromium 820px, фон снят выборкой пикселей из отрендеренного бокса,
   а не из computed-стилей: `.trial-card-v2 .trial-media-bar` переопределяет цвет на
   var(--muted) = #777b83, фон в этом месте белый (rgb(255,255,255), 52-82% площади
   бокса). Отношение 4.246:1 при норме 4.5:1 — кегль 9px под послабление для крупного
   текста не подпадает ни при весе 760, ни при 900. Недобор 0.25.
   Правится не токен --muted (он используется по всему файлу и на других фонах даёт
   норму), а локальное объявление — тот же оттенок, затемнённый до 4.81:1. */
.trial-card-v2 .trial-media-bar {
  color: #6f727a;
}



/* ── Контраст номеров пунктов FAQ ───────────────────────────────────────────────
   Замер 04.08, chromium 820px, фон снят выборкой пикселей из отрендеренного бокса.
   Номера — 11px/700 цветом var(--muted-on-light) #5f635d. Фон под номером зависит от
   состояния пункта: у ЗАКРЫТОГО details это rgb(217,218,213) и отношение 4.356:1 при
   норме 4.5:1, у ОТКРЫТОГО — rgb(230,231,226) и 4.926:1. Аккордеон эксклюзивный,
   открыт всегда ровно один пункт, поэтому двенадцать номеров из тринадцати постоянно
   висят на 4.356. Правится локальный селектор, а не токен --muted-on-light: токен
   используется и в `.case-person small`, и в `.roadmap-heading-v2 > p:last-child`
   на других фонах, где замер провала не показал.
   После правки: 4.776:1 на закрытом пункте и 5.400:1 на открытом. */
.faq-list summary > span {
  color: #585c64;
}


/* ===================================================================================
   Окно перед переходом к пробному доступу (05.08.2026).

   Ставится по решению владельца: у Tribute бесплатный час оформляется как подписка
   с привязкой карты, и предупреждение об этом живёт на его странице мелким шрифтом внизу.
   Окно объясняет механику до перехода, а не после.

   Стилистически это младший брат окна квиза: та же затемнённая подложка с размытием,
   та же бумага диалога, тот же радиус семейства club. Отличие в размере — здесь четыре
   пункта текста, а не пятнадцать вопросов, поэтому диалог по содержимому, а не во весь
   экран. =================================================================================== */
.trial-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.trial-modal[hidden] {
  display: none;
}

.trial-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 13, 0.78);
  backdrop-filter: blur(18px);
}

.trial-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100svh - var(--space-10));
  overflow-y: auto;
  padding: var(--space-8);
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--radius-club-panel);
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.46);
  animation: trial-dialog-in var(--duration-reveal) var(--ease-reveal) both;
}

@keyframes trial-dialog-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.trial-dialog .section-label {
  margin: 0 0 var(--space-2);
}

.trial-dialog h2 {
  margin: 0 0 var(--space-5);
  font-size: var(--text-subheading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.trial-points {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.trial-points li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted-on-light);
}

/* Маркер — квадрат клубной идентичности, а не типографская точка списка. */
.trial-points li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--ink);
}

.trial-points strong {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

.trial-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.trial-cancel {
  padding: 0;
  font: inherit;
  font-size: var(--text-small);
  color: var(--muted-on-light);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  transition: color var(--duration-hover) var(--ease-swift);
}

.trial-cancel:hover {
  color: var(--ink);
}

.trial-fineprint {
  margin: 0;
  font-size: var(--text-micro);
  line-height: var(--leading-body);
  color: var(--muted-on-light);
}

/* Ссылки внутри окна: без этого «@tribute» и «публичной оферте» неотличимы от текста —
   на скриншоте приёмки обе выглядели обычными словами. */
.trial-points a,
.trial-fineprint a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.trial-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: var(--muted-on-light);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--duration-hover) var(--ease-swift);
}

.trial-close:hover {
  color: var(--ink);
}

@media (max-width: 560px) {
  .trial-dialog {
    padding: var(--space-6);
  }

  /* На узком экране кнопка и отказ встают в столбик: рядом они дают строку 320px,
     которой на 360px не остаётся места под поля. */
  .trial-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  /* align-self, а не justify-self: раскладка флексовая, и при stretch подчёркивание
     кнопки отказа растягивалось линией во всю ширину диалога. */
  .trial-actions .trial-cancel {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trial-dialog {
    animation: none;
  }
}

/* ===================================================================================
   Окно сбора контактов перед оплатой (07.08.2026).

   Ставится потому, что Tribute не отдаёт нам данные покупателя: без этой формы человек,
   который заплатил, остаётся для клуба анонимным. Поля уходят в свой приёмник на этом же
   домене (/api/lead), наружу ничего не отправляется.

   Раскладка и подача — как у окна пробного доступа, чтобы два окна сайта читались одним
   семейством, а не как два разных продукта. =========================================== */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.lead-modal[hidden] {
  display: none;
}

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 13, 0.78);
  backdrop-filter: blur(18px);
}

.lead-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100svh - var(--space-10));
  overflow-y: auto;
  padding: var(--space-8);
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--radius-club-panel);
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.46);
  animation: trial-dialog-in var(--duration-reveal) var(--ease-reveal) both;
}

.lead-dialog .section-label {
  margin: 0 0 var(--space-2);
}

.lead-dialog h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-subheading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.lead-intro {
  margin: 0 0 var(--space-6);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted-on-light);
}

.lead-field {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.lead-field label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.lead-field input {
  width: 100%;
  /* 16px минимум: на iOS поле с меньшим шрифтом заставляет Safari зумить страницу
     при фокусе, и человек оказывается на увеличенном, съехавшем экране. */
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(11, 12, 13, 0.18);
  border-radius: var(--radius-club-control);
  padding: 14px 16px;
  transition: border-color var(--duration-hover) var(--ease-swift);
}

.lead-field input::placeholder {
  color: rgba(11, 12, 13, 0.35);
}

.lead-field input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11, 12, 13, 0.12);
}

.lead-field input[aria-invalid="true"] {
  border-color: #b3261e;
}

/* Ловушка для ботов. Не `display: none` — часть заполняющих скриптов такие поля
   пропускает; уводим за пределы экрана, оставаясь в потоке для них. */
.lead-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  margin: 0 0 var(--space-5);
  font-size: var(--text-micro);
  line-height: var(--leading-body);
  color: var(--muted-on-light);
}

.lead-consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}

.lead-consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-error {
  margin: 0 0 var(--space-4);
  font-size: var(--text-micro);
  line-height: var(--leading-body);
  color: #b3261e;
}

.lead-actions {
  display: flex;
  margin-bottom: var(--space-5);
}

.lead-fineprint {
  margin: 0;
  font-size: var(--text-micro);
  line-height: var(--leading-body);
  color: var(--muted-on-light);
}

.lead-fineprint a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: var(--muted-on-light);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--duration-hover) var(--ease-swift);
}

.lead-close:hover {
  color: var(--ink);
}

@media (max-width: 560px) {
  .lead-dialog {
    padding: var(--space-6);
  }

  .lead-actions .lead-submit {
    width: 100%;
  }
}

/* Форма контактов на экране результата квиза (07.08.2026).
   Вторая точка сбора: человек уже получил маршрут, и просьба оставить контакт здесь
   уместна — ценность отдана до просьбы, а не после. Поля переиспользуют стили окна
   оплаты (.lead-field, .lead-consent, .lead-error), чтобы обе формы сайта выглядели
   одинаково и правились в одном месте. */
.quiz-lead {
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-6);
  background: rgba(11, 12, 13, 0.04);
  border-radius: var(--radius-club-module);
}

.quiz-lead-title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--ink);
}

/* На широком экране два поля встают рядом: форма не должна выталкивать кнопки
   маршрута за пределы диалога. */
.quiz-lead-fields {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .quiz-lead-fields {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

.quiz-lead .lead-field {
  margin-bottom: var(--space-4);
}

.quiz-lead-submit {
  width: 100%;
}

@media (min-width: 720px) {
  .quiz-lead-submit {
    width: auto;
  }
}

.quiz-lead-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.quiz-lead-done {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--ink);
}

/* Постоянная кнопка пробного доступа на мобильных широтах (issue 02, 2026-08-10).
   Замер на проде 10.08: ни на 390, ни на 680, ни на 768px нет ни одной кнопки покупки
   или пробного доступа в кадре на всей высоте страницы (22 950px / 27,2 экрана) — весь
   трафик клуба идёт с рилсов, то есть мобильный.

   Форма — липкая панель внизу, а не возврат кнопки в шапку. Обоснование по замеру, не по
   вкусу: .header-cta уже несёт 6 спорящих между собой @media-правил (2288, 3320, 4311,
   4864, 9091, 10099, 10541) и дважды осознанный отказ владельца (правки 03.08 и 04.08,
   см. строку 11628 ниже) от второго элемента рядом с бургером на мобильной ширине —
   именно потому, что он читается как посторонний. Свободное место в шапке при этом
   ЕСТЬ (замер: 245px на 390 и 535px на 680 между логотипом и бургером) — но это тот же
   класс проблемы, просто с подписью вместо кружка, а не отсутствие места. Низ экрана
   при этом пуст на всех трёх ширинах: .desktop-nav умеет становиться нижним fixed-баром
   (строка 3317), но по факту не отрисован на 390 и 680 (display:none) и на 768 стоит
   внутри строки шапки, а не низом экрана. Новый, ничем не связанный с .header-cta
   селектор — ноль пересечения с тем клубком.

   Ведёт туда же, куда главная кнопка страницы (index.html:523): тот же href и тот же
   data-trial-open — клик открывает окно-предупреждение о механике Tribute через уже
   существующий общий обработчик в script.js, новой логики открытия здесь нет.

   Показ управляется отдельным IIFE в конце script.js: скрыта на первом экране (весь
   пин-сцена двери, #portal) и над разделами с собственными кнопками действия —
   тарифами (#pricing), квизом (#quiz) и хвостом страницы (#membership, .site-legal),
   чтобы не перекрывать их («особенно» в тексте issue). Без IntersectionObserver кнопка
   остаётся скрытой — тот же безопасный дефолт, что у .header-cta на этих же ширинах:
   новый элемент не обязан работать без JS, существующие кнопки страницы (обычные
   ссылки) работают всегда. */
.mobile-trial-cta {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  left: var(--space-4);
  z-index: 90; /* ниже .mobile-nav (110), .quiz-modal (120), .trial-modal/.lead-modal (130) */
  display: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(var(--space-4) + var(--space-2)));
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-swift),
    transform var(--duration-base) var(--ease-swift),
    visibility 0s linear var(--duration-base);
}

@media (max-width: 980px) {
  .mobile-trial-cta {
    display: flex;
  }
}

body.mobile-cta-visible .mobile-trial-cta {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity var(--duration-base) var(--ease-swift),
    transform var(--duration-base) var(--ease-swift),
    visibility 0s linear;
}

.mobile-trial-cta .primary-button {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-trial-cta,
  body.mobile-cta-visible .mobile-trial-cta {
    transition: none;
  }
}

/* ── Уведомление о cookie (10.08.2026) ─────────────────────────────────────────
   Решение Tony: незаметная строка внизу, без кнопок, экран не перекрывает.
   z-index 80 — ниже липкой кнопки покупки (90) и всех окон; строка и кнопка
   всё равно не пересекаются во времени: кнопка на первом экране скрыта, а строка
   уходит при первой прокрутке. Дополнительная страховка — правило с
   `body.mobile-cta-visible` ниже. */
.cookie-note {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  left: var(--space-4);
  z-index: 80;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-swift);
}

.cookie-note p {
  margin: 0;
  /* Ужато 18.08 по жалобе Tony «слишком громоздкое»: кегль --text-micro и тонкая
     набивка — одна короткая строка вместо пилюли в две-три. */
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-club-pill);
  background: color-mix(in srgb, var(--club-ink) 82%, transparent);
  color: var(--club-paper);
  font-family: var(--font-utility);
  font-size: var(--text-micro);
  line-height: 1.5;
  text-align: center;
  pointer-events: auto;
}

.cookie-note a {
  color: var(--club-paper);
  text-decoration: underline;
}

.cookie-note.is-gone {
  opacity: 0;
  pointer-events: none;
}

body.mobile-cta-visible .cookie-note {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-note { transition: none; }
}


/* ─────────── патч: маршруты читаются как кнопки ─────────── */
/* Руслан, 12.08: на телефоне треки 02–04 свёрнуты до кружков и не читаются как
   нажимаемые. Свёрнутые плашки получают поверхность, кромку и нижнее ребро
   (вид клавиши), под лентой — строка-подсказка. Всё только ≤560px: с 561px
   подписи треков видны целиком и подсказка не нужна. Активной плашки правило
   не касается — её перебивает `.path-selector-tabs button.is-active`
   (styles.css:1486, специфичность выше). Литералы цветов — из уже живущих в
   этом файле семейств rgba(11,12,13,*) и rgba(255,255,255,*). */

.path-tabs-hint {
  display: none;
}

@media (max-width: 560px) {
  .path-tabs-hint {
    display: block;
    margin: var(--space-2) var(--space-1) 0;
    color: #595d65;
    font-family: var(--font-club);
    font-size: var(--text-small);
    line-height: 1.35;
    text-align: center;
  }

  .path-selector-tabs button {
    border-color: rgba(11, 12, 13, .18);
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 1px 0 rgba(11, 12, 13, .13);
  }
}


/* ─────────── патч: кейсы вместо «Рабочего набора» ─────────── */
/* Руслан 12.08, пункт 6; решение Tony 15.08. Лента — нативный overflow-x со
   scroll-snap: proximity; подсказка «здесь листают» — всегда видимый правый край
   следующей карточки (flex-basis меньше контейнера), скроллбар спрятан, как у
   тарифов. Перетаскивание мышью — IIFE в конце script.js по образцу карусели
   тарифов; touch работает нативно и не трогается. Альфы paper и размеры плашек —
   те же литералы, что у .capability-widget в этой же тёмной секции. */

.usecase-gallery {
  display: grid;
  gap: var(--space-5);
  margin-top: clamp(34px, 5vw, 60px);
}

.usecase-gallery-copy {
  display: grid;
  gap: var(--space-2);
  max-width: 560px;
}

.usecase-gallery-copy > span {
  font-family: var(--font-club);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(244,244,240,.58);
}

.usecase-gallery-copy > strong {
  font: 720 clamp(19px, 1.6vw, 24px)/1.2 var(--font-club);
  color: rgba(244,244,240,.94);
}

.usecase-gallery-copy > p {
  color: rgba(244,244,240,.72);
  font-size: 14px;
  line-height: 1.5;
}

.usecase-rail {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* как у .subscription-rail и .context-gallery: свайп у края ленты не утаскивает
     всю страницу */
  overscroll-behavior-inline: contain;
  padding-bottom: var(--space-2);
  cursor: grab;
  scrollbar-width: none;
}

.usecase-rail::-webkit-scrollbar { display: none; }

/* На время протяжки: user-select — без него мышиный драг выделяет текст карточек
   (класс ставится синхронно в pointerdown — раньше, чем начнётся выделение);
   scroll-snap-type: none — как у .subscription-rail.is-dragging: без сброса snap
   доталкивает каждое присваивание scrollLeft к ближайшей точке привязки, и лента
   вместо панорамирования 1:1 замирает и прыгает на ширину карточки (A/B-замер
   15.08, chromium и firefox: с proximity разрыв с курсором до 160px, с none — 0-1px). */
.usecase-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  -webkit-user-select: none;
  user-select: none;
}

.usecase-rail:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

.usecase-card {
  display: flex;
  flex: 0 0 min(78vw, 320px);
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid rgba(244,244,240,.14);
  border-radius: var(--radius-club-panel);
  scroll-snap-align: start;
  transition: border-color var(--duration-base) var(--ease-swift), transform var(--duration-base) var(--ease-swift);
}

.usecase-card:hover {
  border-color: rgba(244,244,240,.35);
  transform: translateY(-2px);
}

.usecase-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 11px;
  border: 1px solid rgba(244,244,240,.14);
  border-radius: var(--radius-full);
  font-family: var(--font-club);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(244,244,240,.58);
}

.usecase-tag-club {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink);
}

.usecase-card h3 {
  font: 720 clamp(16px, 1.25vw, 18px)/1.25 var(--font-club);
  letter-spacing: var(--tracking-heading);
  color: rgba(244,244,240,.94);
}

.usecase-card p {
  color: rgba(244,244,240,.72);
  font-size: 13px;
  line-height: 1.5;
}

.usecase-card a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  color: var(--acid);
  font: 720 var(--text-small)/1.2 var(--font-club);
  letter-spacing: .04em;
  text-decoration: none;
}

.usecase-card a:hover { text-decoration: underline; }

.usecase-card a:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .usecase-card { flex-basis: min(82vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .usecase-card { transition: none; }
  .usecase-card:hover { transform: none; }
}


/* ─────────── патч: сцена двери без остановки на чтение ─────────── */
/* Руслан 12.08 (пункт 5) + B3 фокус-группы («при скролле оставался на месте»):
   блок .inside-scene удалён из разметки 16.08, его правила выше по файлу мёртвые.
   Высоты сокращены ровно на сжатие хвоста после открытия двери; доли фаз пересчитаны
   в script.js так, что дверь открывается на прежних пикселях прокрутки.
   Правила здесь, в хвосте файла: высота .portal-story объявлена выше десятки раз,
   и выигрывает порядок каскада. Медиа-скоупы обязательны — правило без скоупа
   перебило бы и мобильные высоты (медиа не добавляет специфичности). */

.portal-story { height: 260svh; }

@media (max-width: 980px) {
  .portal-story { height: 245svh; }
}

@media (max-width: 767px) {
  /* Третий круг 18.08: Tony — «страница с дверью долго скроллится». Ещё одно сжатие
     230→190svh (прокрутка сцены 1097→759px на 844): доли фаз в script.js остаются,
     темп двери ускоряется пропорционально (~-31% прокрутки). */
  .portal-story { height: 190svh; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-story { height: 175svh; }
}


/* ─────────── патч: кейсы раскрываются попапом ─────────── */
/* Tony 16.08: кнопки карточек вели вразнобой (платформа / низ страницы), карточки
   выглядели пусто. Теперь карточка целиком нажимается и открывает окно с коротким
   разбором (клон .usecase-detail, IIFE в хвосте script.js); ссылки на платформу и
   на квиз живут внутри окна. Окно — материалы и замок .trial-modal (бумага, радиус,
   тень, та же анимация trial-dialog-in). На светлой бумаге салатовый текстом не
   бывает (1.02:1) — ссылка в окне тёмная с салатовым подчёркиванием, как strong
   в отзывах. */

.usecase-card {
  position: relative;
  cursor: pointer;
}

/* Обложки карточек (третий круг 18.08, Tony: «люди оценивают визуалом»).
   Вылет на всю ширину карточки поверх набивки; аспект жёсткий, чтобы стопка
   в ленте держала ровный ритм при любой картинке. */
.usecase-cover {
  width: calc(100% + var(--space-5) * 2);
  /* height:auto обязателен: без него презентационный атрибут height=450 побеждает,
     и aspect-ratio не работает — карточку разносило на всю высоту картинки. */
  height: auto;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--radius-club-panel) - 1px) calc(var(--radius-club-panel) - 1px) 0 0;
  border-bottom: 1px solid rgba(244,244,240,.14);
}

.usecase-num {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  /* Номер теперь лежит на обложке — чернильная пилюля держит читаемость
     на любой картинке. */
  padding: 4px 8px;
  border-radius: var(--radius-full);
  background: rgba(11,12,13,.72);
  color: rgba(244,244,240,.8);
  font: 760 11px/1 var(--font-club);
  font-style: normal;
  letter-spacing: .08em;
}

.usecase-more {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acid);
  font: 720 var(--text-small)/1.2 var(--font-club);
  letter-spacing: .04em;
  cursor: pointer;
}

.usecase-more:hover { text-decoration: underline; }

.usecase-more:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

.usecase-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.usecase-modal[hidden] { display: none; }

.usecase-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 13, 0.78);
  backdrop-filter: blur(18px);
}

.usecase-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100svh - var(--space-10));
  overflow-y: auto;
  padding: var(--space-8);
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--radius-club-panel);
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.46);
  animation: trial-dialog-in var(--duration-reveal) var(--ease-reveal) both;
}

.usecase-modal-x {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border: 1px solid rgba(11,12,13,.18);
  border-radius: var(--radius-full);
  background: none;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.usecase-modal-x:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.usecase-detail-tag {
  display: inline-flex;
  margin: 0 0 var(--space-3);
  padding: 6px 10px;
  border: 1px solid rgba(11,12,13,.18);
  border-radius: var(--radius-full);
  color: #595d65;
  font-family: var(--font-club);
  font-size: 10px;
  letter-spacing: .08em;
}

.usecase-detail h4 {
  margin: 0 0 var(--space-4);
  font: 720 clamp(19px, 2vw, 22px)/1.2 var(--font-club);
  letter-spacing: var(--tracking-heading);
}

.usecase-detail ul {
  display: grid;
  margin: 0 0 var(--space-5);
  padding: 0;
  gap: var(--space-3);
  list-style: none;
}

.usecase-detail li {
  font-size: var(--text-small);
  line-height: 1.55;
}

.usecase-detail-link {
  display: inline-block;
  color: var(--ink);
  font: 720 13px/1.3 var(--font-club);
  text-decoration: underline;
  text-decoration-color: var(--acid);
  text-decoration-thickness: .14em;
  text-underline-offset: .12em;
}

.usecase-detail-link:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .usecase-dialog { animation: none; }
}

/* «Накладка вертикальная» (Руслан 16.08): на телефоне окно кейса — шторка снизу,
   на всю ширину, с закруглённым только верхом. Десктоп остаётся центрированным. */
@keyframes usecase-sheet-in {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .usecase-modal {
    padding: 0;
    place-items: end stretch;
  }

  .usecase-dialog {
    width: 100%;
    max-height: 84svh;
    padding: var(--space-6) var(--space-5) var(--space-8);
    border-radius: var(--radius-club-panel) var(--radius-club-panel) 0 0;
    animation-name: usecase-sheet-in;
  }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .usecase-dialog { animation: none; }
}


/* ─────────── патч: «1 час» — телефон и чипы ─────────── */
/* Руслан 16.08, референс Memgift: телефон-мокап в центре, вокруг плавающие
   чипы-факты. Перенесены принципы, не стиль: палитра клуба (бумага + ink + acid),
   ореол за телефоном — radial-gradient, НЕ filter:blur (блюры — источник жалобы
   на лаги iOS). Старые правила .trial-media-window остались мёртвыми. На ≤980
   чипы перестраиваются в поток под телефоном — absolute-раскладка только там,
   где для неё есть поля. */

.trial-visual-v3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
}

.trial-phone-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, 92%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(223,255,79,.42), rgba(223,255,79,.14) 55%, transparent 78%);
  pointer-events: none;
}

/* Четвёртый круг 18.08: вместо плоской CSS-рамки — локальный фотореалистичный
   рендер титана. Экран наложен по измеренным координатам 610×1402 (см. HTML),
   чтобы внутри корпуса оставался именно арт платформы. Градиентная контактная
   тень статична: никаких filter/drop-shadow/blur на странице. */
.trial-phone {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: min(304px, 68vw);
  aspect-ratio: 610 / 1402;
}

/* Мягкая, но не фильтрованная контактная тень под физическим корпусом. */
.trial-phone::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -18%;
  bottom: -3%;
  left: -12%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(11,12,13,.34), rgba(11,12,13,.12) 45%, transparent 72%);
  pointer-events: none;
}

/* Небольшой блик стекла поверх арта, как в продуктовой съёмке. Габариты — точный
   bbox дыры экрана; волосяные inset-линии убраны (их радиус не совпадал с реальными
   углами стекла и рисовал штрихи на рамке). Градиент мягкий — расхождение краёв
   с дырой глазу не видно. */
.trial-phone::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: 2.78%;
  left: 13.44%;
  width: 79.67%;
  height: 94.08%;
  border-radius: 8.5% / 3.9%;
  background: linear-gradient(112deg, rgba(255,255,255,.11), rgba(255,255,255,0) 19% 69%, rgba(255,255,255,.035) 88%, transparent);
  pointer-events: none;
}

/* Исправление 18.08 (вечер, фото Tony с живого iPhone): экран в рендере — не белая
   область, а ПРОЗРАЧНАЯ ДЫРА (альфа 0), и остров уже нарисован в самом рендере
   непрозрачным. Арт обязан лежать ПОД корпусом и светиться сквозь дыру — тогда
   скруглённые углы, наклон и остров совпадают по построению, а не по подгонке
   прямоугольником сверху (та подгонка и давала арт поверх титанового торца).
   Замер дыры по альфа-каналу: bbox x 82..568, y 39..1358 из 610x1402; рамка вокруг
   непрозрачна (альфа 250+ при одном антиалиасном пикселе на кромке), поэтому арт
   берётся с запасом ~1% на сторону — излишек прячется за рамкой. */
.trial-phone-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}

/* .trial-phone-screen удалён 19.08: арт запечён в composite-ассет (см. комментарий
   в разметке) — CSS-прямоугольник в наклонное стекло не вписывался геометрически. */

/* Кнопки и остров живут в самом рендере (остров — непрозрачные пиксели поверх дыры
   экрана). CSS-дубликаты убраны вместе со span-ами в разметке: вторая «островка»
   поверх арта и была одной из причин каши на живом iPhone. */

.trial-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 420px;
}

.trial-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(11,12,13,.13);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.7);
  color: var(--ink);
  font: 720 var(--text-small)/1.2 var(--font-club);
  box-shadow: 0 12px 30px rgba(11,12,13,.18);
}

.trial-chip > i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--acid);
  color: var(--ink);
  font-style: normal;
  font-size: 11px;
}

.trial-chip-acid {
  border-color: var(--acid);
  background: var(--acid);
}

/* Десктоп и крупный планшет: чипы «плавают» вокруг телефона, с лёгкими поворотами
   как у карточек референса. Повороты статичные — никакого ambient-движения. */
@media (min-width: 981px) {
  .trial-chips {
    position: static;
    max-width: none;
  }

  .trial-chip {
    position: absolute;
    z-index: 2;
  }

  .trial-chip-acid { top: 9%; right: 4%; transform: rotate(2deg); }
  .trial-chip:nth-child(2) { top: 30%; left: 0; transform: rotate(-2.5deg); }
  .trial-chip:nth-child(3) { bottom: 24%; right: 0; transform: rotate(1.5deg); }
  /* Ниже кромки корпуса: на bottom 7% чип накрывал подпись «Планирование задач»
     на экране переработанного (более высокого) телефона. */
  .trial-chip:nth-child(4) { bottom: 0; left: 2%; transform: rotate(-1.5deg); }
}


/* ─────────── патч: перф прокрутки (разведка замером 16.08) ─────────── */
/* Жалоба Руслана «лагает, двоится» на iPhone. Главные подозреваемые — backdrop-filter
   на sticky/fixed слоях: iOS при перегрузе переиспользует устаревший тайл подложки,
   и текст рисуется дважды со сдвигом — ровно как на его скриншоте.
   1) Карточки отзывов и тарифов стоят на ПОЛНОСТЬЮ непрозрачном фоне (проверено
      computed: rgb без альфы на 390 и 1440) — их blur физически невидим, снят на всех
      ширинах; это визуальный no-op.
   2) Свитчер клуба непрозрачен только на телефоне (на 1440 фон .82 — там стекло
      настоящее и остаётся) — blur снят на ≤767.
   3) Шапка на ≤767: сплошной фон вместо стеклянного, blur снят. От 768px как было.
   4) Тень липких карточек отзывов на ≤767 — плоская вместо 0 55px 120px.
   5) Цветное acid-свечение двери (второй drop-shadow, завязан на --open) на ≤767
      снято: фильтр растеризует весь риг каждый кадр открытия, на телефоне свечение
      едва различимо. Базовая тень остаётся.
   6) Дополнение 18.08 (третий круг, жалоба «фризы при скролле вверх-вниз»): полумера
      п.5 не помогла — даже ОДИН drop-shadow заставляет пересчитывать текстуру всего
      рига (843x1453) с гауссом 74px каждый кадр. Абляцией найдено: это и был главный
      источник фризов портальной сцены (p95 кадра 733мс → 67мс). Все четыре объявления
      filter на .door-rig переведены на box-shadow с теми же параметрами. */

.case-slide,
.subscription-rail article {
  backdrop-filter: none;
}

@media (max-width: 767px) {
  .universe-switcher {
    backdrop-filter: none;
  }

  .site-header.is-dark {
    background: rgba(9, 10, 10, 0.97);
    backdrop-filter: none;
  }

  .site-header:not(.is-dark) {
    background: linear-gradient(180deg, rgba(243, 240, 232, .985), rgba(243, 240, 232, .95));
    backdrop-filter: none;
  }

  .case-slide {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3), inset 0 1px white;
  }

  .door-rig {
    box-shadow: 0 54px 74px rgba(0, 0, 0, .36);
  }
}

/* ===== Патч 19.08: холодный скролл первых экранов (аудит r3-deep-perf) ===== */

@media (max-width: 767px) {
  /* Нижние секции не считаются, пока пользователь возит первые экраны:
     холодный проход вниз-вверх-вниз давал 32% кадров >33мс, с этим блоком 21%.
     contain-intrinsic-size — замеренные высоты секций на 390px; ключевое слово
     auto запоминает фактическую высоту после первой отрисовки. #inside намеренно
     НЕ включён: его margin-top:-100lvh подсунут под липкую сцену, содержание
     видно прямо в портальной полосе. Кэши offsetTop (headerThresholds,
     roadmapStoryTop, caseSlideTops) при дорисовке секций перемеряет
     ResizeObserver в script.js — блок cvSections. */
  #proof, #outcomes, #roadmap, #pricing, #faq, #quiz, #membership {
    content-visibility: auto;
  }
  /* Значения — CONTENT-box (offsetHeight минус вертикальные паддинги/бордеры,
     замер chromium 390): intrinsic-size задаёт размер содержимого, паддинги
     добавляются сверху — с offsetHeight плейсхолдеры были суммарно на ~1
     экран выше реальности и холодные якоря промахивались. */
  #proof      { contain-intrinsic-size: auto 2292px; }
  #outcomes   { contain-intrinsic-size: auto 4499px; }
  #roadmap    { contain-intrinsic-size: auto 2841px; }
  #pricing    { contain-intrinsic-size: auto 5417px; }
  #faq        { contain-intrinsic-size: auto 1538px; }
  #quiz       { contain-intrinsic-size: auto 1014px; }
  #membership { contain-intrinsic-size: auto 844px; }

  /* Рама двери: alpha рамки на var(--enter) (6449) инвалидировала весь
     масштабируемый риг двери (11 Мпикс на DPR3) каждый кадр пролёта — ради
     прозрачности 3px-рамки у объекта, который к этому моменту шире экрана.
     Единственная абляция, улучшившая все три фазы холодного прохода
     (>33мс: 43→32 вниз, 37→24 вверх, 30→21 вниз-2). Пин на середину
     диапазона .34-.68. */
  .door-frame {
    border-color: rgba(244, 244, 240, .5);
  }

  /* В пролёте дверь в ~2.7 раза шире экрана: внешняя тень 110px целиком за
     кадром, но её гаусс (110px x масштаб 7.78 x DPR 3) пересчитывался при
     каждой смене raster scale. Гасится классом — body.is-portal-flight
     переключается один раз (script.js:611), а не переменной, которая меняла бы
     радиус каждый кадр. Боковые косяки остаются — они видимы в пролёте. */
  body.is-portal-flight .door-frame {
    box-shadow:
      inset 14px 0 0 rgba(8, 10, 9, .94),
      inset -14px 0 0 rgba(8, 10, 9, .94);
  }
}

/* Отыгравший клип героя (одноразовый, см. syncHeroHandFilm) освобождает
   composited-слой и сессию аппаратного декодера — до этого элемент оставался
   display:block с opacity 0 всю портальную сцену. Класс ставит script.js по
   событию ended; путь still живёт в отдельном <img> и правилом не задевается. */
.hero-hand-film.is-film-retired video {
  display: none;
}

/* Видео-обзор платформы (волна 11, 20.08): четвёртый экран театра. Аспект ролика
   (1280x872) уже, чем у скринов платформы — contain на чернильном фоне, боковые
   поля читаются как рамка браузерного окна. */
.platform-video-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
}

/* ===== Видео-обзор в попапе (21.08): постер-кнопка в рамке браузера + модалка.
   Старое правило .platform-video-screen video стало мёртвым вместе с экраном
   театра — вычистить при следующей уборке. ===== */
.platform-video-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
}

.platform-video-open img {
  display: block;
  width: 100%;
  height: auto;
}

.platform-video-open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 13, .22);
  transition: background var(--duration-fast) var(--ease-swift);
}

.platform-video-open:hover::after,
.platform-video-open:focus-visible::after {
  background: rgba(11, 12, 13, .05);
}

.platform-video-open:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.platform-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--acid);
  transform: translate(-50%, -50%);
  box-shadow: 0 18px 44px rgba(11, 12, 13, .45);
}

.platform-video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent var(--ink);
  transform: translate(-50%, -50%);
}

.platform-video-label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 1;
  padding: 8px 16px;
  border-radius: var(--radius-club-control);
  color: var(--paper);
  background: rgba(11, 12, 13, .72);
  font-size: 14px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.video-modal[hidden] {
  display: none;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 13, .82);
}

.video-dialog {
  position: relative;
  width: min(1080px, 100%);
  overflow: hidden;
  border-radius: var(--radius-club-panel);
  background: var(--ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
}

.video-dialog video {
  display: block;
  width: 100%;
  height: auto;
}

.video-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 767px) {
  .platform-video-play {
    width: 64px;
    height: 64px;
  }

  .platform-video-play::after {
    border-width: 11px 0 11px 18px;
  }

  .platform-video-label {
    bottom: 10px;
    font-size: 12px;
  }
}

/* Пиксель Яндекс.Метрики из <noscript>. Раньше он уводился за экран атрибутом
   style="position:absolute;left:-9999px" прямо в разметке. У сайта style-src 'self'
   без 'unsafe-inline', поэтому WebKit этот атрибут отклонял, и у посетителя с
   выключенным JS пиксель 1x1 оставался в потоке документа в самом верху страницы
   (замерено 24.08.2026: position static, left auto, координата 0,14). Класс решает
   ровно то же, но из файла, который CSP разрешает. Хеш встроенного кода счётчика
   правка не затрагивает — он считается только по содержимому <script>. */
.ym-pixel {
  position: absolute;
  left: -9999px;
}