@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;
}

.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: #777b74;
}

.path-selector-heading > p:last-child {
  max-width: 42ch;
  margin: 0 0 7px;
  color: #626660;
  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: #626660;
  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;
}

.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-spectral-path-v1.webp");
}

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

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

.subscription-rail article:nth-child(4),
.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-v1.webp");
}

.subscription-rail article:nth-child(7) {
  color: var(--ink);
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(223, 255, 79, .78) 60%, var(--acid) 73%), url("assets/membership/art-knowledge-flow-v1.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-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, 18px, 0);
  transition: none;
  will-change: opacity, transform;
}

[data-reveal].reveal-pending.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 480ms ease-out,
    transform 620ms 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 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 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: #777a76;
  --muted-light: #afb2ad;
  --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) both;
}

.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:#5f635d; 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: #777b74; }
.roadmap-heading-v2 > p:last-child { color: #5f635d; }

.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: #696d67; 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: #696d67; 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: #696d67; 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: #777b74; }
.pricing-heading-v2 > p:last-child { color: #666a65; }

.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: #777b74; 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: #666a65; 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: #666a65; 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: #5a5e58; }

@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), inset 0 1px rgba(255,255,255,.5);
}
.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), inset 0 1px rgba(255,255,255,.6);
}
.hero-free-cta {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
  box-shadow: 0 18px 48px rgba(139,197,19,.18), inset 0 1px rgba(255,255,255,.55);
}
.hero-free-cta:hover {
  color: var(--ink);
  background: #cbff56;
  box-shadow: 0 22px 58px rgba(139,197,19,.28), inset 0 1px rgba(255,255,255,.65);
}
.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 { 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:"↗"; }

/* 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),inset 0 1px rgba(255,255,255,.5);
  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(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::after {
  position: absolute;
  right: -7%;
  bottom: -34%;
  z-index: -1;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(11,12,13,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(11,12,13,.035), 0 0 0 72px 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);
}

.case-slide blockquote strong {
  text-decoration: underline;
  text-decoration-color: var(--acid);
  text-decoration-thickness: .14em;
  text-underline-offset: .12em;
}

.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), inset 0 1px #fff;
  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), inset 0 1px #fff;
}

.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;
}

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

.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 {
  filter:
    drop-shadow(0 54px 74px rgba(0,0,0,.36))
    drop-shadow(0 0 calc(var(--open) * 46px) rgba(223,255,79,.22));
}

.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: #394038;
}

.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;
  grid-template-columns: repeat(3, 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 {
    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%;
  filter: drop-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;
  }

  .door-frame {
    border-top-color: transparent;
    border-bottom-color: transparent;
    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: 12ch;
  margin: 34px 0 0;
  color: var(--paper);
  font-size: clamp(34px, 3vw, 50px);
  line-height: .96;
  letter-spacing: -.055em;
  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;
}

.dropoff-board {
  grid-template-columns: minmax(260px, .82fr) minmax(440px, 1.36fr) 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%;
  right: 18px;
  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: 1540ms;
}

.dropoff-flow.is-flow-active .flow-route li:nth-child(2) {
  animation-delay: 1680ms;
}

.dropoff-flow.is-flow-active .flow-route li:nth-child(3) {
  animation-delay: 1820ms;
}

@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%;
  right: 14px;
  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;
  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);
  }
}

@media (min-width: 981px) and (max-height: 819px) {
  .universe-switcher {
    position: relative;
    top: auto;
  }

  .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;
  }

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

  .door-scene {
    top: 33%;
    left: 50%;
    width: 124px;
    transform:
      translate3d(-50%, -50%, 0)
      scale(calc(.7 + var(--bridge) * .45 + var(--enter) * 6.4));
  }

  .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:
    inset 0 1px rgba(255, 255, 255, .12),
    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:
    inset 0 1px rgba(255, 255, 255, .12),
    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:
    inset 0 1px rgba(255, 255, 255, .12),
    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;
}

.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-spectral-path-v1.webp");
}

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

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

.subscription-rail article:nth-child(4),
.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-v1.webp");
}

.subscription-rail article:nth-child(7) {
  color: var(--ink);
  background-image: linear-gradient(180deg, transparent 0 42%, rgba(223, 255, 79, .78) 60%, var(--acid) 73%), url("assets/membership/art-knowledge-flow-v1.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-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;
    top: clamp(128px, 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);
  }

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

@media (min-width: 981px) and (max-height: 780px) {
  .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;
}

.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 360ms ease;
  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%;
  filter: saturate(.9) contrast(.98);
}

/* 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 video {
  transform: translate3d(0, 6%, 0);
}

/* 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;
}

@media (max-width: 980px) {
  .hero-hand-film {
    display: none;
  }
}

@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;
}

[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) 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;
  transform: scale(var(--collage-zoom));
  /* 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;
  }
}