@charset "UTF-8";
@font-face {
  font-family: "Space Grotesk";
  src: url("../../assets/fonts/SpaceGrotesk-VariableFont_wght.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #010b04;
}
html {
  overflow-x: hidden;
}
html,
body,
.stage-seven {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.stage-seven::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body {
  height: 1450vh;
  overflow-x: hidden;
  font-family: Inter, Arial, sans-serif;
}
#stage {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  cursor: default;
  background:
    radial-gradient(
      ellipse at 46% 51%,
      rgba(55, 255, 100, 0.11) 0%,
      rgba(25, 210, 70, 0.035) 28%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 49% 103%,
      rgba(15, 170, 55, 0.1) 0%,
      transparent 48%
    ),
    radial-gradient(
      circle at 50% 8%,
      rgba(25, 255, 80, 0.045) 0%,
      transparent 40%
    ),
    linear-gradient(180deg, #031809 0%, #021207 44%, #010b04 100%);
}
canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Only the mouse pointermove listeners drive the parallax hover effect
     (no preventDefault, no touch-specific logic) — touch-action:none here
     blocked the OS's native scroll gesture on touchscreens (e.g. iPad,
     which uses this desktop layout above 640px) since the canvas covers
     the full viewport. Allow vertical panning through it instead. */
  touch-action: pan-y;
  transform: perspective(1200px) rotateX(var(--scene-rx))
    rotateY(var(--scene-ry)) translate3d(var(--scene-tx), var(--scene-ty), 0);
  transform-origin: center;
  will-change: transform;
}
#canvas {
  opacity: var(--particle-canvas-opacity, 1);
  will-change: transform, opacity;
}
:root {
  --particle-canvas-opacity: 1;
  --phase-two: 0;
  --phase-three: 0;
  --phase-four: 0;
  --woman-progress: 0;
  --phase-five: 0;
  --man-progress: 0;
  --phase-six: 0;
  --emirova-progress: 0;
  --phase-seven: 0;
  --phase-eight: 0;
  --phase-nine: 0;
  --slider-one: 1;
  --slider-two: 0;
  --slider-three: 0;
  --blackout: 0;
  --scene-rx: 0deg;
  --scene-ry: 0deg;
  --scene-tx: 0px;
  --scene-ty: 0px;
  --scene-light-opacity: 0.68;
}
.scene-light {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 1040px;
  height: 660px;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(var(--scene-rx))
    rotateY(var(--scene-ry)) translate3d(var(--scene-tx), var(--scene-ty), 0)
    scale(1.08);
  transform-origin: center;
  opacity: var(--scene-light-opacity);
  background: radial-gradient(
    ellipse at 48% 50%,
    rgba(108, 255, 154, 0.22) 0%,
    rgba(40, 211, 92, 0.11) 22%,
    rgba(10, 101, 48, 0.055) 45%,
    transparent 72%
  );
  filter: blur(28px);
  pointer-events: none;
  will-change: transform, opacity;
}
.site-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.is-ready .site-ui {
  opacity: 1;
}
.topbar {
  position: absolute;
  z-index: 20;
  top: 40px;
  left: 40px;
  right: 40px;
  height: 46px;
  display: flex;
  gap: 8px;
}
.topbar-nav {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.5vw, 24px);
  white-space: nowrap;
  color: #fff;
  font:
    300 16px/1 Space Grotesk,
    Arial,
    sans-serif;
  pointer-events: auto;
}
.topbar-nav span {
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}
.topbar-nav span::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: #58b489;
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.topbar-nav span:hover,
.topbar-nav span:focus-visible {
  color: #58b489;
  transform: translateY(-1px);
}
.topbar-nav span:hover::after,
.topbar-nav span:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}
.topbar .pill:nth-child(3) {
  display: none;
}
.pill {
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  border: 1px solid #346f42;
  border-radius: 12px;
  background: rgba(1, 11, 3, 0.42);
  color: #fff;
  font:
    300 16px/1.4 Inter,
    Arial,
    sans-serif;
  white-space: nowrap;
  pointer-events: auto;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.pill:hover {
  background: #1e7c4d;
  border-color: #32a26a;
  transform: translateY(-1px);
}
.pill img {
  width: 24px;
  height: 24px;
}
.menu-logo {
  display: block;
  width: 172px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
  pointer-events: auto;
}
.pill-watch {
  margin-left: auto;
  gap: 5px;
}
.language-select,
.language-select-2 {
  position: relative;
  pointer-events: auto;
}
.pill-language {
  gap: 14px;
  min-width: 129px;
  justify-content: center;
  cursor: pointer;
}
.pill-language::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.language-select.is-open .pill-language::after,
.language-select-2.is-open .pill-language::after {
  transform: translateY(2px) rotate(225deg);
}
.language-menu {
  position: absolute;
  left: 0;
  top: 54px;
  width: 218px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid #346f42;
  border-radius: 12px;
  background: rgba(1, 11, 3, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
  pointer-events: none;
}
.language-select.is-open .language-menu,
.language-select-2.is-open .language-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.language-menu button {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  text-align: left;
  font:
    300 15px/1.2 Inter,
    Arial,
    sans-serif;
  cursor: pointer;
}
.language-menu button:hover,
.language-menu button[aria-current="true"] {
  background: rgba(46, 162, 106, 0.22);
}
.language-menu button:focus-visible {
  background: rgba(46, 162, 106, 0.22);
  outline: 2px solid #58b489;
  outline-offset: -2px;
}
.content-desktop {
  display: block;
}
.content-mobile {
  display: none;
}
@media (max-width: 640px) {
  .content-desktop {
    display: none !important;
  }
  .content-mobile {
    display: block !important;
  }
}
.scroll-prompt {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  height: 50px;
  padding: 0 26px;
  border: 1.5px solid rgba(47, 156, 102, 0.68);
  border-radius: 999px;
  background: rgba(1, 11, 3, 0.34);
  color: #fff;
  font:
    300 18px/1 Space Grotesk,
    Arial,
    sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  opacity: calc(1 - var(--phase-two));
  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.scroll-prompt:hover {
  background: rgba(30, 124, 77, 0.4);
  border-color: #32a26a;
}
.scroll-mouse {
  position: relative;
  width: 20px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 12px;
  flex: 0 0 auto;
}
.scroll-mouse i {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
}
.hero {
  position: absolute;
  inset: 0;
}
.orbit {
  position: absolute;
  left: 846px;
  top: 425px;
  width: 1139px;
  height: 587px;
  transform: translate(-50%, -49.5%) perspective(1200px)
    rotateX(var(--scene-rx)) rotateY(var(--scene-ry))
    translate3d(var(--scene-tx), var(--scene-ty), 0)
    scaleX(var(--orbit-scale-x, 1)) scaleY(var(--orbit-scale-y, 1));
  transform-origin: center;
  border: 1px solid rgba(31, 223, 59, 0.045);
  border-radius: 50%;
  opacity: calc(1 - var(--phase-three));
  transition: opacity 0.12s linear;
  will-change: transform, opacity;
}
.orbit::before,
.orbit::after,
.orbit-inner {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid;
  border-radius: 50%;
}
.orbit::before {
  border-color: rgba(31, 223, 59, 0.072);
}
.orbit::after {
  border-color: rgba(31, 223, 59, 0.126);
}
.orbit-inner {
  border-color: rgba(31, 223, 59, 0.18);
}
.orbit::before {
  width: 78%;
  height: 94%;
}
.orbit::after {
  width: 58%;
  height: 84%;
}
.orbit-inner {
  width: 36%;
  height: 70%;
}
.brand {
  position: absolute;
  left: 50%;
  top: 307px;
  width: 198px;
  height: 53px;
  transform: translateX(-50%);
}
.brand img {
  position: absolute;
  object-fit: fill;
}
.brand .m1 {
  left: 0;
  top: 14px;
  width: 31px;
  height: 30px;
}
.brand .m2 {
  left: 31px;
  top: 10px;
  width: 109px;
  height: 34px;
}
.brand .m3 {
  left: 75px;
  top: 21px;
  width: 21px;
  height: 22px;
}
.brand-tv {
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 53px;
  border: 1.6px solid #fff;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font:
    700 34px/1 Space Grotesk,
    Arial,
    sans-serif;
  background: none;
  color: #fff;
}
.title {
  position: absolute;
  top: 366px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font:
    500 68px/1.08 Space Grotesk,
    Arial,
    sans-serif;
  letter-spacing: -2.2px;
  background: linear-gradient(180deg, #fff 28%, #d9d9d9 48%, #4e4e4e 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  white-space: nowrap;
}
.subtitle {
  position: absolute;
  top: 431px;
  left: 50%;
  width: 760px;
  height: auto;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font:
    500 78px/1 Space Grotesk,
    Arial,
    sans-serif;
  letter-spacing: -2.6px;
  background: linear-gradient(180deg, #fff 20%, #d6d6d6 45%, #4a4a4a 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.season {
  position: absolute;
  top: 522px;
  left: 50%;
  margin: 0;
  color: #1fdf3b;
  font:
    500 20px/1.4 Space Grotesk,
    Arial,
    sans-serif;
  transform: translateX(-50%);
  white-space: nowrap;
}
.stage-two {
  opacity: var(--phase-two);
}
.side-copy {
  position: absolute;
  top: 390px;
  margin: 0;
  text-align: center;
  transform: translateY(calc((1 - var(--phase-two)) * 24px));
  opacity: var(--phase-two);
}
.side-copy.left {
  left: 70px;
  top: 392px;
  width: 273px;
  font:
    500 28px/1.2 Space Grotesk,
    Arial,
    sans-serif;
}
.side-copy.right {
  right: 78px;
  width: 318px;
  font:
    300 16px/1.4 Inter,
    Arial,
    sans-serif;
}
.phase-two-info {
  position: absolute;
  left: 50%;
  top: 600px;
  width: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  opacity: var(--phase-two);
  pointer-events: none;
}
.phase-two-speakers {
  display: flex;
  gap: 12px;
}
.phase-two-speakers img {
  width: 116px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0.95;
}
.phase-two-copy {
  display: grid;
  grid-template-columns: 310px 430px 390px;
  align-items: start;
  gap: 52px;
  width: 1180px;
}
.phase-two-copy p {
  margin: 0;
  text-align: center;
  font:
    300 20px/1.35 Space Grotesk,
    Arial,
    sans-serif;
}
.phase-two-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 8px;
  max-width: 430px;
}
.phase-two-tags .benefit {
  padding: 0 24px;
}
.phase-two-info ~ * {
}
.phase-one > .side-copy,
.phase-one > .benefits {
  opacity: 0 !important;
}
.brand .m1,
.brand .m2,
.brand .m3 {
  display: none;
}
.brand::before {
  content: "Орфан";
  position: absolute;
  left: 0;
  top: 11px;
  color: #fff;
  font:
    500 34px/1 Space Grotesk,
    Arial,
    sans-serif;
}
.benefits {
  position: absolute;
  top: 513px;
  left: calc(50% - 79px);
  display: flex;
  gap: 5px;
  transform: translateX(calc((1 - var(--phase-two)) * 52px));
  opacity: var(--phase-two);
}
.benefit {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 24px;
  border: 1px solid #346f42;
  border-radius: 40px;
  background: #02150a;
  font:
    300 16px/1.4 Inter,
    Arial,
    sans-serif;
  white-space: nowrap;
  pointer-events: auto;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.benefit:hover {
  background: #1e7c4d;
  border-color: #32a26a;
  transform: translateY(-1px);
}
.benefit img {
  width: 24px;
  height: 24px;
}
.phase-one {
  opacity: calc(1 - var(--phase-three));
  transition: opacity 0.12s linear;
}
.third {
  position: absolute;
  inset: 0;
  opacity: min(var(--phase-three), calc(1 - var(--phase-four)));
}
.third-project {
  position: absolute;
  left: 40px;
  top: 183px;
  width: 420px;
  text-align: left;
}
.third-project .project-kicker {
  margin: 0;
  color: #1fdf3b;
  font:
    500 15px/1.2 Space Grotesk,
    Arial,
    sans-serif;
}
.third-project h2 {
  margin: 11px 0 0;
  font:
    500 28px/1.2 Space Grotesk,
    Arial,
    sans-serif;
}
.third-project p {
  margin: 22px 0 0;
  font:
    300 16px/1.4 Inter,
    Arial,
    sans-serif;
}
.project-cta {
  display: inline-flex;
  margin-top: 50px;
  padding: 0 20px;
  height: 46px;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #1e7c4d, #32b47b);
  color: #fff;
  font:
    600 14px/1 Inter,
    Arial,
    sans-serif;
  cursor: pointer;
}
.third-slider {
  position: absolute;
  left: 916px;
  top: 329px;
  width: 420px;
}
.third-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s linear;
  pointer-events: none;
}
.third-slide:nth-child(1) {
  opacity: var(--slider-one);
}
.third-slide:nth-child(2) {
  opacity: var(--slider-two);
}
.third-slide:nth-child(3) {
  display: none;
}
.third-slide h3 {
  margin: 0 0 16px;
  font:
    500 20px/1.4 Space Grotesk,
    Arial,
    sans-serif;
}
.third-slide p {
  margin: 0;
  font:
    300 16px/1.4 Inter,
    Arial,
    sans-serif;
}
.slider-arrows {
  position: absolute;
  left: 916px;
  top: 508px;
  display: flex;
  gap: 16px;
}
.slider-arrow {
  width: 46px;
  height: 46px;
  border: 1px solid #23894e;
  border-radius: 12px;
  background: rgba(1, 11, 3, 0.55);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: 0.2s;
}
.slider-arrow:hover {
  background: #1e7c4d;
}
.slider-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  background: rgba(1, 11, 3, 0.55);
}
.slider-arrows,
.slider-arrow {
  pointer-events: auto;
  z-index: 30;
}
.third-slide:nth-child(3) {
  display: block;
  opacity: var(--slider-three);
}
.speaker-stage {
  position: absolute;
  inset: 0;
  opacity: min(var(--phase-four), calc(1 - var(--phase-seven)));
  overflow: hidden;
  background: #000;
}
.speaker-sequence-canvas,
.speaker-sequence-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.speaker-sequence-canvas {
  z-index: 2;
  visibility: hidden;
}
.speaker-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #000;
  opacity: calc(
    (
        1 -
          max(
            var(--woman-progress),
            var(--man-progress),
            var(--emirova-progress)
          )
      ) *
      0.3
  );
}
.speaker-profile {
  position: absolute;
  z-index: 3;
  left: 40px;
  top: 280px;
  width: 434px;
  height: 493px;
}
.speaker-thumbs {
  height: 64px;
  display: flex;
  gap: 8px;
  padding-left: 8px;
}
.speaker-thumb {
  width: 104px;
  height: 64px;
  object-fit: cover;
  opacity: 0.3;
}
.speaker-thumb.man {
  opacity: calc(0.3 + 0.7 * (1 - var(--phase-five)));
}
.speaker-thumb.woman {
  opacity: calc(0.3 + 0.7 * var(--phase-five) * (1 - var(--phase-six)));
}
.speaker-thumb.emirova {
  opacity: calc(0.3 + 0.7 * var(--phase-six));
}
.speaker-copy {
  opacity: 0;
  visibility: hidden;
  transform: none;
}
.speaker-copy.man,
.speaker-copy.emirova {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
}
.speaker-stage[data-speaker="woman"] .speaker-copy.woman,
.speaker-stage[data-speaker="man"] .speaker-copy.man,
.speaker-stage[data-speaker="emirova"] .speaker-copy.emirova {
  opacity: 1;
  visibility: visible;
}
.speaker-name {
  margin: 38px 0 0;
  width: 434px;
  font:
    400 48px/1.2 Space Grotesk,
    Arial,
    sans-serif;
}
.speaker-bio {
  margin: 20px 0 0;
  width: 406px;
  font:
    300 20px/1.4 Inter,
    Arial,
    sans-serif;
}
.speaker-bio strong {
  font-weight: 700;
}
.speaker-cta {
  margin-top: 26px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #1e7c4d, #32a26a);
  color: #fff;
  font:
    600 14px/1 Inter,
    Arial,
    sans-serif;
  pointer-events: auto;
  transition:
    filter 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.speaker-cta:hover {
  filter: hue-rotate(12deg) brightness(1.16);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30, 124, 77, 0.3);
}
.speaker-cta img {
  width: 14px;
  height: 14px;
}
.speaker-event {
  position: absolute;
  z-index: 3;
  right: 32px;
  bottom: 28px;
  width: 296px;
  text-align: center;
}
.event-heading {
  margin: 0;
  font:
    500 15px/1.2 Space Grotesk,
    Arial,
    sans-serif;
}
.event-card {
  position: relative;
  display: block;
  width: 272px;
  height: 206px;
  margin: 32px auto 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}
.event-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.event-card .event-hover {
  opacity: 0;
}
.event-card:hover .event-default {
  opacity: 0;
}
.event-card:hover .event-hover {
  opacity: 1;
}
.event-card:hover img {
  transform: scale(1.015);
}
.stage-seven,
.stage-eight,
.stage-nine {
  position: absolute;
  inset: 0;
  color: #fff;
  background: #031207;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.stage-seven {
  z-index: 7;
  opacity: min(var(--phase-seven), calc(1 - var(--phase-eight)));
  overflow: clip;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(26, 132, 89, 0.45),
      transparent 62%
    ),
    #031207;
}
.stage-eight {
  z-index: 9;
  opacity: var(--phase-nine);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(24, 71, 53, 0.7),
      transparent 64%
    ),
    #020906;
  will-change: opacity;
  contain: paint;
}
.stage-eight.inert-stage,
.stage-eight.inert-stage * {
  pointer-events: none !important;
}
.s7-canvas {
  position: relative;
  left: 50%;
  width: 1512px;
  min-width: 1512px;
  height: 850px;
  min-height: 850px;
  transform: translateX(-50%);
  background: transparent;
}
.s7-number {
  position: absolute;
  left: calc(50% - 106px);
  top: 103px;
  margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #fff 39.25%, #373737 92.47%);
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0.25;
  font:
    500 292px/1 Space Grotesk,
    Arial,
    sans-serif;
  letter-spacing: -15px;
}
.s7-title {
  position: absolute;
  left: 342px;
  top: 195px;
  width: 828px;
  margin: 0;
  text-align: center;
  font:
    500 36px/1.2 Space Grotesk,
    Arial,
    sans-serif;
}
.lecture-speakers {
  position: absolute;
  left: 133px;
  top: 430px;
  width: 1239px;
  display: grid;
  grid-template-columns: 300px 300px 300px;
  column-gap: 130px;
  pointer-events: auto;
}
.lecture-column {
  width: 385px;
}
.lecture-photo {
  display: block;
  width: 300px;
  height: 161px;
  border-radius: 20px;
  object-fit: cover;
}
.lecture-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 27px;
}
.lecture-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 20px;
  align-items: start;
  width: 385px;
  min-height: 45px;
  margin: 0 -10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  text-align: left;
  outline: 0;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.lecture-item:nth-child(2) {
  min-height: 59px;
}
.lecture-item:nth-child(3) {
  min-height: 64px;
}
.lecture-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(88, 180, 137, 0);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}
.lecture-item:hover,
.lecture-item:focus-visible {
  background: rgba(88, 180, 137, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}
.lecture-item:hover::before,
.lecture-item:focus-visible::before {
  border-color: rgba(88, 180, 137, 0.45);
}
.lecture-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #58b489;
  font:
    400 13px/1 Inter,
    Arial,
    sans-serif;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.lecture-item:hover .lecture-index,
.lecture-item:focus-visible .lecture-index {
  background: #70d3a4;
  box-shadow: 0 0 18px rgba(88, 180, 137, 0.45);
}
.lecture-text {
  padding-top: 4px;
  font:
    300 13px/1.4 Inter,
    Arial,
    sans-serif;
}
.s8-title {
  position: absolute;
  left: 40px;
  top: 174px;
  width: 437px;
  margin: 0;
  font:
    400 48px/1.2 Space Grotesk,
    Arial,
    sans-serif;
}
.stage-eight {
  --grid-space: calc(100vw - 144px);
}
.cycle-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid #39443a;
  border-radius: 20px;
  background: rgba(15, 35, 30, 0.2);
  backdrop-filter: blur(7px);
}
.cycle-card h3 {
  margin: 0;
  font:
    400 28px/1.05 Space Grotesk,
    Arial,
    sans-serif;
}
.cycle-card p {
  margin: 12px 0 0;
  color: #97a3b0;
  font:
    400 16px/1.5 Inter,
    Arial,
    sans-serif;
}
.cycle-live {
  left: 40px;
  top: 329px;
  width: calc(var(--grid-space) * 0.317);
  height: 460px;
  padding: 35px 31px;
}
.cycle-live > img {
  position: absolute;
  right: -5px;
  bottom: 0;
  width: 100%;
  height: 333px;
  object-fit: cover;
  opacity: 0.7;
}
.cycle-live .cycle-copy {
  position: relative;
  z-index: 2;
  width: 328px;
}
.cycle-button {
  position: absolute;
  z-index: 3;
  left: 31px;
  bottom: 22px;
  padding: 14px 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, #1e7c4d, #32a26a);
  font:
    600 14px/1 Inter,
    Arial,
    sans-serif;
}
.cycle-cases {
  left: calc(72px + var(--grid-space) * 0.317);
  top: 181px;
  width: calc(var(--grid-space) * 0.255);
  height: 274px;
  padding: 32px;
}
.cycle-events {
  left: calc(72px + var(--grid-space) * 0.317);
  top: 487px;
  width: calc(var(--grid-space) * 0.255);
  height: 302px;
  padding: 32px;
}
.cycle-materials {
  left: calc(104px + var(--grid-space) * 0.572);
  right: 40px;
  top: 181px;
  height: 412px;
  padding: 36px 32px;
}
.cycle-materials > .cycle-materials-preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.cycle-materials > :is(p, .material-slide-copy) {
  display: none;
}
.cycle-materials h3 {
  position: relative;
  z-index: 2;
  font-size: 24px;
}
.cycle-community {
  left: calc(104px + var(--grid-space) * 0.572);
  right: 40px;
  top: 621px;
  height: 168px;
  padding: 36px 32px;
}
.mini-date {
  width: 80px;
  height: 84px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font:
    400 12px/1 Inter,
    Arial,
    sans-serif;
}
.mini-date strong {
  display: block;
  font:
    400 42px/1 Space Grotesk,
    Arial,
    sans-serif;
  text-align: center;
}
.case-watch {
  position: absolute;
  left: 32px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #2f9c66;
  font:
    400 16px/1 Inter,
    Arial,
    sans-serif;
  pointer-events: auto;
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.case-watch img {
  width: 24px;
  height: 24px;
}
.case-watch:hover {
  color: #58b489;
  transform: translateX(3px);
}
.pill,
.benefit,
.speaker-cta,
.cycle-button,
.mini-date {
  cursor: pointer;
}
.cycle-card {
  pointer-events: auto;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.cycle-card:hover {
  border-color: #346f42;
  background-color: rgba(25, 64, 48, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.cycle-button {
  pointer-events: auto;
  transition:
    filter 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.cycle-button:hover {
  filter: hue-rotate(12deg) brightness(1.16);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30, 124, 77, 0.3);
}
.mini-date {
  padding: 6px 4px 10px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  pointer-events: auto;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.mini-date strong {
  height: 50px;
  font-size: 48px;
  line-height: 1;
}
.mini-date:hover {
  background: #1e7c4d;
  border-color: #32a26a;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(30, 124, 77, 0.28);
}
.cycle-events .case-watch {
  position: static;
  margin: 0 0 8px;
  line-height: 1.35;
}
.cycle-community h3 {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.35;
}
.cycle-community .case-watch {
  bottom: 22px;
}
@keyframes cycle-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stage-eight .s8-title {
  animation: cycle-rise 0.42s ease-out both;
}
.stage-eight .cycle-card {
  animation: cycle-rise 0.48s ease-out both;
}
.stage-eight .cycle-live {
  animation-delay: 0.04s;
}
.stage-eight .cycle-cases {
  animation-delay: 0.1s;
}
.stage-eight .cycle-events {
  animation-delay: 0.16s;
}
.stage-eight .cycle-materials {
  animation-delay: 0.22s;
}
.stage-eight .cycle-community {
  animation-delay: 0.28s;
}
.stage-seven .s7-title {
  opacity: var(--s7-title-reveal, 0);
  transform: translateY(calc((1 - var(--s7-title-reveal, 0)) * 16px));
  will-change: opacity, transform;
}
.stage-seven .lecture-column {
  opacity: var(--s7-content-reveal, 0);
  transform: translateY(calc((1 - var(--s7-content-reveal, 0)) * 18px));
  will-change: opacity, transform;
}
.stage-seven .lecture-column:nth-child(2) {
  opacity: var(--s7-content-reveal-2, 0);
  transform: translateY(calc((1 - var(--s7-content-reveal-2, 0)) * 18px));
}
.stage-seven .lecture-column:nth-child(3) {
  opacity: var(--s7-content-reveal-3, 0);
  transform: translateY(calc((1 - var(--s7-content-reveal-3, 0)) * 18px));
}
.stage-eight .s8-title {
  animation: none !important;
  opacity: var(--s8-title-reveal, 0);
  transform: translateY(calc((1 - var(--s8-title-reveal, 0)) * 16px));
  will-change: opacity, transform;
}
.stage-eight .cycle-card {
  animation: none !important;
  will-change: opacity, transform;
}
.stage-eight .cycle-live {
  opacity: var(--s8-card-1, 0);
  transform: translateY(calc((1 - var(--s8-card-1, 0)) * 18px));
}
.stage-eight .cycle-cases {
  opacity: var(--s8-card-2, 0);
  transform: translateY(calc((1 - var(--s8-card-2, 0)) * 18px));
}
.stage-eight .cycle-events {
  opacity: var(--s8-card-3, 0);
  transform: translateY(calc((1 - var(--s8-card-3, 0)) * 18px));
}
.stage-eight .cycle-materials {
  opacity: var(--s8-card-4, 0);
  transform: translateY(calc((1 - var(--s8-card-4, 0)) * 18px));
}
.stage-eight .cycle-community {
  opacity: var(--s8-card-5, 0);
  transform: translateY(calc((1 - var(--s8-card-5, 0)) * 18px));
}
@media (prefers-reduced-motion: reduce) {
  .stage-seven .s7-title,
  .stage-seven .lecture-column,
  .stage-eight .s8-title,
  .stage-eight .cycle-card {
    transform: none !important;
  }
}
.stage-nine {
  z-index: 8;
  opacity: min(var(--phase-eight), calc(1 - var(--phase-nine)));
  pointer-events: none;
  background: #000;
  overflow: hidden;
}
.discussion-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discussion-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.72) 100%
  );
}
.discussion-live-tag {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 294px;
  transform: translateX(-50%);
  height: 48px;
  padding: 0 20px;
  align-items: center;
  gap: 5px;
  border: 1px solid #346f42;
  border-radius: 40px;
  background: rgba(2, 21, 10, 0.7);
  color: #fff;
  font:
    400 18px/1.4 Inter,
    Arial,
    sans-serif;
}
.discussion-live-tag.content-desktop {
  display: none;
}
.discussion-live-tag img {
  width: 24px;
  height: 24px;
}
.discussion-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 52px;
  width: min(1180px, 92vw);
  transform: translateX(-50%);
  text-align: center;
}
.discussion-copy h2 {
  margin: 0;
  font:
    500 96px/1 Space Grotesk,
    Arial,
    sans-serif;
}
.discussion-copy p {
  margin: 18px auto 22px;
  max-width: 976px;
  font:
    300 20px/1.4 Inter,
    Arial,
    sans-serif;
}
.discussion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.discussion-actions .speaker-cta {
  margin: 0;
}
.discussion-date {
  height: 46px;
  padding: 0 20px;
  border: 1px solid #2c9760;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font:
    600 14px/1 Inter,
    Arial,
    sans-serif;
}
@media (min-width: 641px) {
  .discussion-live-tag.content-desktop {
    display: flex;
  }
}
.transition-blackout {
  position: absolute;
  /* Below the header (z-index: 20) so the nav stays reachable through the
     between-scenes blackout, above regular scene content (z-index <= 12).
     Also physically excludes the header's row (rather than relying on
     z-index alone) — with dozens of CSS custom properties changing every
     animation frame, this element's stacking vs. the header proved
     unreliable in testing, so the rectangle simply never reaches those
     pixels. */
  z-index: 15;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: var(--blackout);
  pointer-events: none;
}
@media (max-width: 900px) {
  .topbar {
    left: 18px;
    right: 18px;
    top: 18px;
  }
  .menu-logo {
    width: 114px;
    height: 31px;
    margin-top: 7px;
  }
  .pill {
    padding: 0 14px;
    font-size: 13px;
  }
  .pill-watch {
    font-size: 0;
  }
  .brand {
    top: 28vh;
  }
  .title {
    top: 39vh;
    font-size: clamp(36px, 8vw, 68px);
  }
  .subtitle {
    top: 47vh;
    width: min(92vw, 760px);
    font-size: clamp(40px, 9vw, 78px);
    height: auto;
  }
  .season {
    top: 58vh;
  }
  .side-copy.left {
    left: 5vw;
    top: 67vh;
    width: 40vw;
    font-size: 20px;
  }
  .side-copy.right {
    right: 5vw;
    top: 67vh;
    width: 42vw;
    font-size: 13px;
  }
  .benefits {
    top: 59vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .benefit {
    padding: 0 12px;
    font-size: 13px;
  }
  .speaker-profile {
    left: 5vw;
    top: 24vh;
    width: 42vw;
  }
  .speaker-name {
    width: 42vw;
    font-size: clamp(28px, 5vw, 48px);
  }
  .speaker-bio {
    width: 42vw;
    font-size: 14px;
  }
  .speaker-thumbs {
    padding-left: 0;
  }
  .speaker-thumb {
    width: 76px;
    height: 48px;
  }
  .speaker-event {
    left: auto;
    right: 4vw;
    top: auto;
    bottom: 4vh;
    transform: scale(0.78);
    transform-origin: right bottom;
  }
  .scroll-prompt {
    bottom: 54px;
  }
  .phase-two-info {
    top: 14vh;
    gap: 20px;
  }
  .phase-two-speakers img {
    width: 72px;
    height: 54px;
  }
  .phase-two-copy {
    grid-template-columns: 1fr;
    width: 90vw;
    gap: 18px;
  }
  .phase-two-copy p {
    font-size: 15px;
  }
  .phase-two-tags {
    max-width: 90vw;
  }
  .s7-title {
    left: 8vw;
    top: 24vh;
    width: 84vw;
    font-size: 26px;
  }
  .s7-number {
    left: calc(50% - 90px);
    top: 3vh;
    font-size: 260px;
  }
  .stage-eight .s8-title {
    left: 6vw;
    top: 15vh;
    width: 88vw;
    font-size: 34px;
  }
  .cycle-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 14px 6vw !important;
    padding: 22px !important;
  }
  .stage-eight {
    overflow-y: auto;
  }
  .cycle-live > img {
    display: none;
  }
  .stage-nine .discussion-copy {
    width: 90vw;
  }
  .discussion-copy h2 {
    font-size: 48px;
  }
  .discussion-copy p {
    font-size: 16px;
  }
}

@media (max-width: 1240px) {
  .topbar {
    left: 28px;
    right: 28px;
    top: 28px;
  }
  .topbar-nav {
    font-size: 14px;
  }
  .orbit {
    left: 52%;
    width: min(92vw, 1139px);
    height: min(47vw, 587px);
  }
  .brand {
    top: 30vh;
  }
  .title {
    top: 40vh;
    font-size: clamp(48px, 5.5vw, 68px);
  }
  .subtitle {
    top: 48vh;
    width: min(86vw, 760px);
    font-size: clamp(52px, 6.2vw, 78px);
  }
  .season {
    top: 60vh;
  }
  .phase-two-info {
    top: 60vh;
  }
  .phase-two-copy {
    width: min(94vw, 1080px);
    grid-template-columns: minmax(190px, 1fr) minmax(300px, 1.2fr) minmax(
        190px,
        1fr
      );
    gap: 24px;
  }
  .phase-two-copy p {
    font-size: 18px;
  }
  .third-project {
    left: 4vw;
    width: 31vw;
  }
  .third-slider,
  .slider-arrows {
    left: 61vw;
  }
  .third-slider {
    width: 32vw;
  }
  .slider-arrows {
    top: 60vh;
  }
  .third-project h2 {
    font-size: clamp(22px, 2.3vw, 28px);
  }
  .third-project p,
  .third-slide p {
    font-size: 14px;
  }
  .speaker-profile {
    left: 4vw;
    top: 28vh;
  }
  .speaker-event {
    right: 2vw;
    transform: scale(0.88);
    transform-origin: right bottom;
  }
  .s7-canvas {
    transform: translateX(-50%) scale(0.82);
    transform-origin: top center;
  }
  .stage-eight {
    --grid-space: calc(100vw - 104px);
  }
  .s8-title {
    left: 28px;
  }
  .cycle-live {
    left: 28px;
  }
  .cycle-cases,
  .cycle-events {
    left: calc(56px + var(--grid-space) * 0.317);
  }
  .cycle-materials,
  .cycle-community {
    right: 28px;
    left: calc(84px + var(--grid-space) * 0.572);
  }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .orbit {
    left: 50%;
    top: 50%;
    width: 1300px;
    height: 587px;
  }
  .stage-eight .s8-title {
    width: 360px;
    font-size: 42px;
    line-height: 1.14;
  }
  .cycle-events p {
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -0.2px;
  }
  .cycle-materials h3 {
    position: absolute;
    left: 32px;
    right: 32px;
    top: auto;
    bottom: 36px;
  }
}

@media (min-width: 1024px) and (max-width: 1240px) {
  .third-project {
    left: 3.5vw;
    width: 30vw;
  }
  .third-slider {
    left: 65vw;
    top: 37vh;
    width: 30vw;
  }
  .slider-arrows {
    left: 65vw;
    top: 61vh;
  }
  .third-slide h3 {
    font-size: 19px;
    line-height: 1.3;
  }
  .third-slide p {
    font-size: 13px;
    line-height: 1.42;
  }
  .stage-eight .s8-title {
    top: 110px;
    width: 290px;
    font-size: 38px;
    line-height: 1.12;
  }
  .cycle-live {
    top: 276px;
    height: 382px;
    padding: 28px 27px;
  }
  .cycle-live .cycle-copy {
    width: 100%;
  }
  .cycle-live .cycle-copy p {
    font-size: 14px;
    line-height: 1.42;
  }
  .cycle-live .cycle-button {
    left: 27px;
    bottom: 18px;
  }
  .cycle-cases {
    top: 90px;
    height: 222px;
    padding: 27px;
  }
  .cycle-events {
    top: 337px;
    height: 321px;
    padding: 27px;
  }
  .cycle-materials {
    top: 90px;
    height: 344px;
    padding: 30px 28px;
  }
  .cycle-community {
    top: 458px;
    height: 200px;
    padding: 27px 28px;
  }
  .cycle-card h3 {
    font-size: 24px;
  }
  .cycle-card p {
    font-size: 14px;
    line-height: 1.4;
  }
  .cycle-cases .case-watch {
    left: 27px;
    bottom: 22px;
  }
  .cycle-events .case-watch {
    font-size: 14px;
  }
  .mini-date {
    width: 70px;
    height: 72px;
  }
  .mini-date strong {
    font-size: 34px;
  }
  .cycle-community h3 {
    font-size: 16px;
    line-height: 1.3;
  }
  .cycle-community .case-watch {
    bottom: 17px;
    font-size: 14px;
  }
}

@media (max-width: 960px) {
  .topbar {
    top: 20px;
    left: 20px;
    right: 20px;
  }
  .topbar .pill:nth-child(3) {
    display: none;
  }
  .menu-logo {
    width: 160px;
    height: 40px;
  }
  .pill {
    height: 40px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 14px;
  }
  .pill-watch {
    margin-left: auto;
    padding: 0 16px;
  }
  .orbit {
    left: 50%;
    top: 48%;
    width: 116vw;
    height: 64vw;
  }
  .brand {
    top: 27vh;
  }
  .title {
    top: 36vh;
    letter-spacing: -1.5px;
  }
  .subtitle {
    top: 44vh;
    letter-spacing: -1.8px;
  }
  .season {
    top: 55vh;
  }
  .phase-two-info {
    top: 13vh;
  }
  .phase-two-speakers img {
    width: 86px;
    height: 65px;
  }
  .phase-two-copy {
    grid-template-columns: 1fr;
    gap: 13px;
    width: min(86vw, 650px);
  }
  .phase-two-copy p {
    font-size: 16px;
  }
  .phase-two-tags {
    max-width: 520px;
  }
  .third-project {
    left: 6vw;
    top: 20vh;
    width: 37vw;
  }
  .third-slider {
    left: 55vw;
    top: 38vh;
    width: 38vw;
  }
  .slider-arrows {
    left: 55vw;
    top: 68vh;
  }
  .third-project p,
  .third-slide p {
    font-size: 13px;
  }
  .project-cta {
    margin-top: 22px;
  }
  .speaker-profile {
    top: 23vh;
    width: 44vw;
  }
  .speaker-name {
    width: 44vw;
    font-size: clamp(30px, 5vw, 43px);
  }
  .speaker-bio {
    width: 42vw;
    font-size: 14px;
  }
  .speaker-event {
    right: 1vw;
    bottom: 2vh;
    transform: scale(0.72);
  }
  .s7-canvas {
    transform: translateX(-50%) scale(0.64);
  }
  .stage-eight {
    overflow-y: auto;
    padding: 118px 20px 44px;
  }
  .stage-eight .s8-title {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin: 0 0 28px;
    font-size: 36px;
  }
  .cycle-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 190px;
    margin: 14px 0 !important;
    padding: 26px !important;
  }
  .cycle-live {
    min-height: 340px;
  }
  .cycle-live .cycle-button {
    position: relative;
    left: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
  }
  .cycle-live > img {
    display: block;
    height: 220px;
  }
  .cycle-cases,
  .cycle-events {
    min-height: 210px;
  }
  .cycle-materials {
    min-height: 280px;
  }
  .cycle-community {
    min-height: 180px;
  }
  .cycle-community h3 {
    max-width: 70%;
  }
  .discussion-copy {
    width: min(88vw, 760px);
    bottom: 38px;
  }
  .discussion-copy h2 {
    font-size: clamp(42px, 7vw, 72px);
  }
}
/* .title/.subtitle/.season never fade out as --phase-two reveals the
   speaker photos + tags + copy below them (.phase-two-info) — by design,
   both stay on screen together, positioned to different vh bands so they
   don't visually collide. That gap is sized in vh, but .phase-two-info's
   own content height is fixed px, so on a portrait tablet (tall viewport,
   narrow width) the vh gap no longer clears the content and the two
   blocks overlap. Landscape widths in this same max-width:960px bracket
   never hit this — height stays proportionally short there — so only
   widen the gap for portrait. */
@media (max-width: 960px) and (orientation: portrait) {
  .brand {
    top: 53vh;
  }
  .title {
    top: 60vh;
  }
  .subtitle {
    top: 67vh;
  }
  .season {
    top: 74vh;
  }
  /* This reveal (speaker photos, intro copy, tag pills) is sized like a
     narrow phone card even on a tablet-width portrait screen, and
     .phase-two-tags' own max-width leaves it flush against the left edge
     of the single-column layout instead of centered within it (nothing
     here sets margin/justify-self, so a 520px-wide box just sits at the
     start of its 650px-wide grid cell) — the one clearly wrapped pill
     ("Бесплатно") only looks centered relative to its own box, not to
     the photos above it. Widen the whole block, center the tags
     properly, and size everything up closer to the mobile app's own
     values scaled for a wider screen. */
  .phase-two-info {
    top: 15vh;
    gap: 20px;
  }
  .phase-two-speakers {
    gap: 14px;
  }
  .phase-two-speakers img {
    width: 130px;
    height: 98px;
  }
  .phase-two-copy {
    width: min(92vw, 720px);
    gap: 20px;
  }
  .phase-two-copy p {
    font-size: 18px;
    line-height: 1.4;
  }
  .phase-two-tags {
    max-width: 100%;
    margin: 0 auto;
    gap: 10px;
  }
  .phase-two-tags .benefit {
    height: 50px;
    padding: 0 22px;
    font-size: 17px;
  }
  /* The lectures section is a fixed 1512x850px canvas shown at a fraction
     of its size via `transform: scale()` — legible on a wide landscape
     screen, but on a narrow portrait tablet it shrinks the 3-column grid
     of lecture lists into an unreadably small row. Un-scale the canvas
     and stack the three speaker columns into one, matching the same
     "position:relative, single column" unlock already used for the
     cycle-section cards on narrow screens. */
  .stage-seven {
    overflow-y: auto;
    padding: 118px 20px 44px;
  }
  .s7-canvas {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
  }
  .s7-number {
    position: relative;
    left: auto;
    top: auto;
    text-align: center;
    font-size: 120px;
  }
  .s7-title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 8px;
    font-size: 28px;
    line-height: 1.3;
  }
  .lecture-speakers {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 36px;
    margin-top: 36px;
  }
  .lecture-column {
    width: 100%;
  }
  .lecture-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 161;
  }
  .lecture-item,
  .lecture-list {
    width: 100%;
  }
  .lecture-text {
    font-size: 16px;
    line-height: 1.45;
  }
  /* .cycle-card is unlocked into normal document flow below 960px (see the
     max-width:960px bracket), but nothing in that flow gives the
     "Дискуссионный клуб «ТМА»" card's own children (heading+date-badge
     wrapper, description, calendar link) any spacing — they only pick up
     stray base margins, so they render almost flush against each other. */
  .cycle-events {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .cycle-event-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .topbar {
    top: max(14px, env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    height: 38px;
    gap: 7px;
  }
  .menu-logo {
    width: 122px;
    height: 38px;
  }
  .pill {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
  .topbar .pill-language {
    display: inline-flex;
    gap: 9px;
  }
  .pill-watch {
    width: 38px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .pill-watch img {
    width: 20px;
  }
  .scroll-prompt {
    bottom: max(54px, calc(env(safe-area-inset-bottom) + 40px));
    height: 48px;
    padding: 0 22px;
    font-size: 18px;
    gap: 16px;
  }
  .scroll-mouse {
    width: 19px;
    height: 29px;
  }
  .scene-light {
    width: 130vw;
    height: 72vh;
    filter: blur(22px);
  }
  .orbit {
    top: 46%;
    width: 150vw;
    height: 92vw;
  }
  .brand {
    top: 23vh;
    width: 160px;
    height: 43px;
  }
  .brand::before {
    top: 9px;
    font-size: 28px;
  }
  .brand-tv {
    width: 64px;
    height: 43px;
    border-radius: 11px;
    font-size: 28px;
  }
  .title {
    top: 33vh;
    width: 94vw;
    font-size: clamp(34px, 10.2vw, 50px);
    line-height: 1.02;
    text-align: center;
    white-space: normal;
  }
  .subtitle {
    top: 40.5vh;
    width: 94vw;
    font-size: clamp(39px, 10.8vw, 53px);
    line-height: 0.96;
    letter-spacing: -1.8px;
  }
  .season {
    top: 53vh;
    font-size: 18px;
  }
  .phase-two-info {
    top: 15vh;
    gap: 14px;
  }
  .phase-two-speakers {
    gap: 7px;
  }
  .phase-two-speakers img {
    width: 68px;
    height: 54px;
    border-radius: 9px;
  }
  .phase-two-copy {
    width: 90vw;
    gap: 12px;
  }
  .phase-two-copy p {
    font-size: 15px;
    line-height: 1.28;
  }
  .phase-two-tags {
    gap: 6px;
  }
  .phase-two-tags .benefit {
    height: 38px;
    padding: 0 13px;
    font-size: 13px;
  }
  .phase-two-tags .benefit img {
    width: 18px;
    height: 18px;
  }
  .third-project {
    left: 24px;
    top: 17vh;
    width: calc(100vw - 48px);
  }
  .third-project .project-kicker {
    font-size: 13px;
  }
  .third-project h2 {
    margin-top: 8px;
    font-size: 27px;
  }
  .third-project p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.35;
  }
  .third-project p:nth-of-type(2) {
    display: none;
  }
  .project-cta {
    margin-top: 20px;
    height: 42px;
  }
  .third-slider {
    left: 24px;
    top: 62vh;
    width: calc(100vw - 48px);
  }
  .third-slide h3 {
    margin-bottom: 10px;
    font-size: 19px;
  }
  .third-slide p {
    font-size: 14px;
    line-height: 1.35;
  }
  .slider-arrows {
    left: 24px;
    top: 81vh;
    gap: 10px;
  }
  .slider-arrow {
    width: 42px;
    height: 42px;
  }
  .speaker-stage {
    background: #000;
  }
  .speaker-sequence-canvas,
  .speaker-sequence-fallback {
    object-position: 56% bottom;
  }
  .speaker-profile {
    left: 20px;
    top: 18vh;
    width: calc(100vw - 40px);
  }
  .speaker-thumbs {
    height: 42px;
    gap: 5px;
  }
  .speaker-thumb {
    width: 65px;
    height: 42px;
  }
  .speaker-copy.man,
  .speaker-copy.emirova {
    top: 42px;
  }
  .speaker-name {
    margin-top: 23px;
    width: 76vw;
    font-size: clamp(30px, 9vw, 41px);
    line-height: 1.08;
  }
  .speaker-bio {
    margin-top: 14px;
    width: min(76vw, 380px);
    font-size: 14px;
    line-height: 1.35;
  }
  .speaker-cta {
    height: 42px;
    margin-top: 20px;
    padding: 0 16px;
    font-size: 13px;
  }
  .speaker-event {
    right: 6px;
    bottom: 4px;
    transform: scale(0.48);
    transform-origin: right bottom;
  }
  .event-heading {
    font-size: 15px;
  }
  .s7-canvas {
    left: 0;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100%;
    transform: none;
  }
  .s7-number {
    left: 50%;
    top: 13vh;
    transform: translateX(-50%);
    font-size: 190px;
    letter-spacing: -10px;
  }
  .s7-title {
    left: 7vw;
    top: 25vh;
    width: 86vw;
    font-size: 25px;
    line-height: 1.14;
  }
  .lecture-speakers {
    left: 7vw;
    top: 43vh;
    width: 86vw;
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 24px;
  }
  .lecture-column {
    width: 76vw;
    min-width: 76vw;
    scroll-snap-align: start;
  }
  .lecture-photo {
    width: 76vw;
    height: 41vw;
  }
  .lecture-list {
    gap: 6px;
    margin-top: 16px;
  }
  .lecture-item {
    width: 76vw;
    margin: 0;
    min-height: unset !important;
  }
  .lecture-text {
    font-size: 13px;
  }
  .stage-seven {
    overflow: hidden;
  }
  .stage-eight {
    padding: 94px 16px 34px;
  }
  .stage-eight .s8-title {
    font-size: 31px;
    line-height: 1.1;
  }
  .cycle-card {
    padding: 22px !important;
  }
  .cycle-card h3 {
    font-size: 25px;
  }
  .cycle-card p {
    font-size: 15px;
  }
  .cycle-live {
    min-height: 390px;
  }
  .cycle-live .cycle-copy {
    width: 100%;
  }
  .cycle-live > img {
    opacity: 0.42;
  }
  .cycle-materials {
    min-height: 240px;
  }
  .cycle-community h3 {
    max-width: 100%;
    font-size: 17px;
  }
  .mini-date {
    width: 72px;
    height: 80px;
  }
  .case-watch {
    font-size: 15px;
  }
  .discussion-copy {
    bottom: 26px;
    width: 92vw;
  }
  .discussion-copy h2 {
    font-size: 39px;
  }
  .discussion-copy p {
    margin: 12px auto 16px;
    font-size: 14px;
  }
  .discussion-actions {
    gap: 8px;
    flex-wrap: wrap;
  }
  .discussion-date {
    height: 42px;
  }
  .stage-nine .speaker-cta {
    margin: 0;
  }
}
@media (min-width: 1500px) {
  .orbit {
    width: 1335px;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .orbit {
    --orbit-scale-x: 0.9;
    --orbit-scale-y: 1.05;
  }
}

@media (min-width: 1920px) and (max-width: 2560px) {
  .topbar {
    left: clamp(40px, 2.6vw, 64px);
    right: clamp(40px, 2.6vw, 64px);
    top: clamp(28px, 2.1vw, 48px);
  }
  .scroll-prompt {
    bottom: clamp(58px, calc(1.6vw + 40px), 74px);
  }
  .phase-one,
  .third {
    transform: scale(1.06);
    transform-origin: 50% 50%;
  }
  .speaker-profile {
    transform: scale(1.06);
    transform-origin: left top;
  }
  .speaker-event {
    transform: scale(1.06);
    transform-origin: right bottom;
  }
  .s7-canvas {
    transform: translateX(-50%) scale(1.06);
    transform-origin: 50% 50%;
  }
  .stage-eight {
    transform: scale(1.045);
    transform-origin: 50% 50%;
  }
  .discussion-copy {
    bottom: clamp(56px, 4.2vh, 82px);
    transform: translateX(-50%) scale(1.06);
    transform-origin: 50% 100%;
  }
}

@media (min-width: 2200px) and (max-width: 2399px) {
  .phase-one,
  .third {
    transform: scale(1.12);
  }
  .speaker-profile,
  .speaker-event {
    transform: scale(1.12);
  }
  .s7-canvas {
    transform: translateX(-50%) scale(1.12);
  }
  .stage-eight {
    transform: scale(1.085);
  }
  .discussion-copy {
    transform: translateX(-50%) scale(1.1);
  }
}

@media (min-width: 1900px) and (max-width: 2399px) {
  .phase-one {
    transform: none !important;
  }
  .orbit {
    left: 50%;
    top: 50%;
    width: min(67vw, 1310px);
    height: min(35vw, 650px);
  }
  .phase-one .brand {
    top: 338px;
  }
  .phase-one .title {
    top: 404px;
    font-size: clamp(68px, 3.6vw, 80px);
  }
  .phase-one .subtitle {
    top: 471px;
    width: min(45vw, 860px);
    font-size: clamp(76px, 4.05vw, 92px);
  }
  .phase-one .season {
    top: 566px;
    font-size: 22px;
  }
  .side-copy.left {
    left: max(4vw, 74px);
    top: 418px;
    width: min(17vw, 340px);
    font-size: clamp(27px, 1.55vw, 31px);
  }
  .side-copy.right {
    right: max(4vw, 74px);
    top: 418px;
    width: min(18vw, 360px);
    font-size: 17px;
    line-height: 1.45;
  }
  .benefits {
    top: 542px;
  }
  .phase-two-info {
    top: 655px;
    gap: 28px;
  }
  .phase-two-speakers img {
    width: 124px;
    height: 94px;
  }
  .phase-two-copy {
    width: min(72vw, 1340px);
    grid-template-columns: minmax(270px, 320px) minmax(430px, 520px) minmax(
        300px,
        360px
      );
    gap: 36px;
  }
  .phase-two-copy p {
    font-size: clamp(20px, 1.02vw, 22px);
    line-height: 1.38;
  }
  .phase-two-tags .benefit {
    padding: 0 22px;
  }
  .speaker-profile {
    transform: none !important;
    left: max(4vw, 72px);
    top: 31vh;
    width: min(30vw, 520px);
  }
  .speaker-thumbs {
    height: 70px;
    gap: 9px;
    padding-left: 4px;
  }
  .speaker-thumb {
    width: 114px;
    height: 70px;
  }
  .speaker-copy.man,
  .speaker-copy.emirova {
    top: 70px;
  }
  .speaker-name {
    width: min(30vw, 520px);
    font-size: clamp(52px, 2.7vw, 60px);
  }
  .speaker-bio {
    width: min(27vw, 470px);
    font-size: clamp(18px, 1vw, 21px);
    line-height: 1.42;
  }
  .speaker-cta {
    margin-top: 28px;
    height: 48px;
    padding: 0 22px;
    font-size: 15px;
  }
  .speaker-event {
    transform: none !important;
    right: max(4vw, 70px);
    bottom: 6vh;
    width: 320px;
  }
  .event-heading {
    font-size: 16px;
  }
  .event-card {
    width: 286px;
    height: 216px;
    margin-top: 28px;
  }
  .third {
    transform: none !important;
  }
  .third-project {
    left: 5.5vw;
    top: 25vh;
    width: min(29vw, 560px);
  }
  .third-project .project-kicker {
    font-size: 17px;
  }
  .third-project h2 {
    font-size: clamp(32px, 1.7vw, 38px);
    line-height: 1.15;
  }
  .third-project p {
    font-size: clamp(17px, 0.92vw, 19px);
    line-height: 1.48;
  }
  .project-cta {
    margin-top: 34px;
    height: 50px;
    padding: 0 24px;
    font-size: 16px;
  }
  .third-slider {
    left: 64.5vw;
    top: 33vh;
    width: min(24vw, 470px);
  }
  .third-slide h3 {
    margin-bottom: 18px;
    font-size: clamp(25px, 1.45vw, 29px);
    line-height: 1.28;
  }
  .third-slide p {
    font-size: clamp(17px, 0.92vw, 19px);
    line-height: 1.48;
  }
  .slider-arrows {
    left: 64.5vw;
    top: 56.5vh;
  }
  .slider-arrow {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .s7-canvas {
    transform: translate(-50%, 44px) scale(1.08) !important;
    transform-origin: 50% 50%;
  }
  .stage-eight {
    transform: none !important;
    --grid-space: 89vw;
  }
  .stage-eight .s8-title {
    left: 4.5vw;
    top: 21vh;
    width: 29vw;
    font-size: clamp(50px, 2.6vw, 58px);
  }
  .cycle-live {
    left: 4.5vw;
    top: 38vh;
    width: 29vw;
    height: 47vh;
    padding: 34px 30px;
  }
  .cycle-live .cycle-copy {
    width: min(24vw, 400px);
  }
  .cycle-cases {
    left: 35.5vw;
    top: 21vh;
    width: 23.5vw;
    height: 28vh;
    padding: 32px;
  }
  .cycle-events {
    left: 35.5vw;
    top: 52vh;
    width: 23.5vw;
    height: 33vh;
    padding: 32px;
  }
  .cycle-materials {
    left: 60.8vw;
    right: 4.5vw;
    top: 21vh;
    height: 42vh;
    padding: 36px 32px;
  }
  .cycle-community {
    left: 60.8vw;
    right: 4.5vw;
    top: calc(85vh - max(12vh, 150px));
    height: max(12vh, 150px);
    padding: 28px 32px;
  }
  .cycle-card h3 {
    font-size: 30px;
  }
  .cycle-card p {
    font-size: 17px;
  }
  .discussion-copy {
    bottom: 60px;
    width: min(78vw, 1260px);
    transform: translateX(-50%) scale(1.08) !important;
    transform-origin: 50% 100%;
  }
}

@media (min-width: 2400px) and (max-width: 2560px) {
  .phase-one {
    transform: scale(1.18);
    transform-origin: 50% 50%;
  }
  .phase-one .brand {
    top: 357px;
  }
  .phase-one .title {
    top: 416px;
  }
  .phase-one .subtitle {
    top: 481px;
  }
  .phase-one .season {
    top: 572px;
  }
  .phase-two-info {
    top: 680px;
  }
  .speaker-profile,
  .speaker-event {
    transform: scale(1.18);
  }
  .third {
    transform: none !important;
  }
  .third-project {
    left: 5.5vw;
    top: 27vh;
    width: 29vw;
  }
  .third-project .project-kicker {
    font-size: 18px;
  }
  .third-project h2 {
    font-size: 38px;
    line-height: 1.14;
  }
  .third-project p {
    font-size: 19px;
    line-height: 1.48;
  }
  .project-cta {
    margin-top: 36px;
    height: 52px;
    padding: 0 25px;
    font-size: 16px;
  }
  .third-slider {
    left: 67vw;
    top: 34vh;
    width: 27vw;
  }
  .third-slide h3 {
    margin-bottom: 20px;
    font-size: 29px;
    line-height: 1.25;
  }
  .third-slide p {
    font-size: 19px;
    line-height: 1.48;
  }
  .slider-arrows {
    left: 67vw;
    top: 57vh;
  }
  .slider-arrow {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
  .s7-canvas {
    transform: translate(-50%, 72px) scale(1.18);
    transform-origin: 50% 50%;
  }
  .stage-eight {
    transform: none !important;
    --grid-space: 90vw;
  }
  .stage-eight .s8-title {
    left: 5vw;
    top: 22vh;
    width: 28vw;
    font-size: 58px;
  }
  .cycle-live {
    left: 5vw;
    top: 39vh;
    width: 28vw;
    height: 46vh;
    padding: 38px 34px;
  }
  .cycle-live .cycle-copy {
    width: min(24vw, 430px);
  }
  .cycle-cases {
    left: 35vw;
    top: 22vh;
    width: 24vw;
    height: 29vh;
    padding: 36px;
  }
  .cycle-events {
    left: 35vw;
    top: 54vh;
    width: 24vw;
    height: 31vh;
    padding: 36px;
  }
  .cycle-materials {
    left: 61vw;
    right: 5vw;
    top: 22vh;
    height: 43vh;
    padding: 40px 36px;
  }
  .cycle-community {
    left: 61vw;
    right: 5vw;
    top: calc(85vh - max(11vh, 150px));
    height: max(11vh, 150px);
    padding: 32px 36px;
  }
  .cycle-card h3 {
    font-size: 32px;
  }
  .cycle-card p {
    font-size: 18px;
  }
  .discussion-copy {
    transform: translateX(-50%) scale(1.14);
  }
}

@media (max-width: 640px) {
  .topbar {
    align-items: center;
  }
  .pill-language {
    padding-left: 10px;
    padding-right: 10px;
    min-width: 0;
  }
  .brand-tv {
    color: #fff;
    background: none;
  }
  .phase-two-info {
    max-height: 74vh;
  }
  .third {
    overflow: hidden;
  }
  .third-slider {
    max-height: 25vh;
  }
  .stage-nine {
    min-height: 100dvh;
  }
  .discussion-copy {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .topbar {
    top: max(22px, env(safe-area-inset-top));
    left: 20px;
    right: 20px;
    align-items: flex-start;
  }
  .menu-logo {
    width: 118px;
    height: auto;
  }
  .topbar .pill-watch {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    padding: 0;
    color: transparent;
    font-size: 0;
    background: rgba(1, 11, 3, 0.22);
  }
  .topbar .pill-watch img {
    display: none;
  }
  .topbar .pill-watch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow:
      0 -8px 0 #fff,
      0 8px 0 #fff;
  }
  .orbit {
    top: 43.5%;
    width: 182vw;
    height: 116vw;
  }
  .brand {
    top: 33.4vh;
    width: 190px;
  }
  .brand-tv {
    width: 78px;
    height: 48px;
    border-radius: 15px;
    font-size: 30px;
  }
  .title {
    top: 39.6vh;
    width: 92vw;
    font-size: clamp(30px, 8.3vw, 42px);
    line-height: 1.03;
  }
  .subtitle {
    top: 46.8vh;
    width: 92vw;
    font-size: clamp(40px, 10.6vw, 52px);
    line-height: 0.98;
  }
  .season {
    top: 58.8vh;
    font-size: 17px;
  }
  .scroll-prompt {
    bottom: 106px;
    height: 48px;
    padding: 0 24px;
  }
  .phase-two-info {
    top: 12vh;
    width: 92vw;
    transform: translateX(-50%);
  }
  .phase-two-copy p {
    font-size: 15px;
    line-height: 1.35;
  }
  .phase-two-speakers img {
    width: 72px;
    height: 56px;
  }
  .third-project {
    left: 32px;
    width: calc(100vw - 64px);
    top: 15vh;
  }
  .third-project h2 {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.08;
    text-align: center;
  }
  .third-project p {
    font-size: 16px;
    line-height: 1.45;
  }
  .third-slider {
    left: 32px;
    top: 58vh;
    width: calc(100vw - 64px);
  }
  .third-slide h3 {
    font-size: 24px;
    line-height: 1.2;
  }
  .third-slide p {
    font-size: 16px;
    line-height: 1.4;
  }
  .slider-arrows {
    left: 32px;
    top: 84vh;
  }
}

@media (max-width: 390px) {
  .topbar {
    left: 18px;
    right: 18px;
    gap: 5px;
  }
  .menu-logo {
    width: 110px;
  }
  .pill {
    padding: 0 9px;
  }
  .pill-language {
    font-size: 12px;
  }
  .pill-watch {
    width: 50px;
    height: 50px;
  }
  .orbit {
    top: 43.8%;
    width: 188vw;
    height: 122vw;
  }
  .brand {
    top: 33.5vh;
    width: 176px;
  }
  .title {
    top: 39.8vh;
  }
  .subtitle {
    top: 46.8vh;
  }
  .season {
    top: 58.6vh;
  }
  .phase-two-info {
    top: 14vh;
  }
  .phase-two-copy p {
    font-size: 14px;
  }
  .phase-two-speakers img {
    width: 62px;
    height: 49px;
  }
  .third-project {
    left: 18px;
    width: calc(100vw - 36px);
  }
  .third-slider {
    left: 18px;
    width: calc(100vw - 36px);
  }
  .slider-arrows {
    left: 18px;
  }
  .speaker-profile {
    left: 16px;
    width: calc(100vw - 32px);
  }
  .lecture-speakers {
    left: 6vw;
    width: 88vw;
  }
  .lecture-column,
  .lecture-photo,
  .lecture-item {
    width: 82vw;
    min-width: 82vw;
  }
  .stage-eight {
    padding-left: 12px;
    padding-right: 12px;
  }
  .cycle-card {
    padding: 19px !important;
  }
  .scroll-prompt {
    height: 48px;
    padding: 0 22px;
    font-size: 17px;
    gap: 14px;
  }
}
@media (max-width: 640px) and (max-height: 720px) {
  .brand {
    top: 18vh;
  }
  .title {
    top: 29vh;
  }
  .subtitle {
    top: 37vh;
  }
  .season {
    top: 49vh;
  }
  .phase-two-info {
    top: 11vh;
    gap: 9px;
  }
  .phase-two-copy {
    gap: 8px;
  }
  .phase-two-copy p {
    font-size: 13px;
  }
  .phase-two-tags .benefit {
    height: 34px;
    font-size: 12px;
  }
  .third-project {
    top: 13vh;
  }
  .third-project p {
    font-size: 13px;
  }
  .third-slider {
    top: 60vh;
  }
  .slider-arrows {
    top: 83vh;
  }
  .speaker-profile {
    top: 14vh;
  }
  .speaker-name {
    margin-top: 15px;
  }
  .speaker-bio {
    margin-top: 9px;
  }
  .speaker-cta {
    margin-top: 12px;
  }
  .s7-number {
    top: 9vh;
  }
  .s7-title {
    top: 21vh;
  }
  .lecture-speakers {
    top: 39vh;
  }
  .scroll-prompt {
    bottom: max(48px, calc(env(safe-area-inset-bottom) + 36px));
  }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .topbar {
    top: 8px;
  }
  .menu-logo {
    height: 32px;
  }
  .pill {
    height: 32px;
  }
  .scroll-prompt {
    bottom: 12px;
    height: 38px;
    font-size: 14px;
  }
  .scroll-mouse {
    width: 16px;
    height: 24px;
  }
  .brand {
    top: 16vh;
  }
  .title {
    top: 29vh;
  }
  .subtitle {
    top: 42vh;
  }
  .season {
    top: 63vh;
  }
  .phase-two-info {
    top: 12vh;
    transform: translateX(-50%) scale(0.82);
    transform-origin: top center;
  }
  .third-project {
    top: 14vh;
  }
  .third-slider {
    top: 38vh;
  }
  .slider-arrows {
    top: 76vh;
  }
}

@media (min-width: 1100px) and (max-width: 1240px) and (max-height: 760px) {
  .topbar {
    top: 16px;
    left: 24px;
    right: 24px;
  }
  .topbar-nav {
    top: 12px;
    font-size: 14px;
  }
  .menu-logo {
    width: 122px;
  }
  .pill {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
  }
  .pill img {
    width: 20px;
    height: 20px;
  }
  .pill-watch {
    padding: 0 18px;
  }
  .scroll-prompt {
    bottom: 26px;
    height: 44px;
    padding: 0 22px;
    font-size: 16px;
    gap: 14px;
  }
  .phase-one .brand {
    top: 27vh;
  }
  .phase-one .title {
    top: 37vh;
    font-size: clamp(46px, 4.8vw, 60px);
  }
  .phase-one .subtitle {
    top: 45vh;
    width: min(82vw, 680px);
    font-size: clamp(50px, 5.4vw, 70px);
  }
  .phase-one .season {
    top: 57vh;
    font-size: 18px;
  }
  .side-copy.left {
    top: 64vh;
    width: 34vw;
    font-size: 20px;
  }
  .side-copy.right {
    top: 64vh;
    width: 34vw;
    font-size: 13px;
  }
  .benefits {
    top: 57vh;
    transform: translateX(-50%) scale(0.92);
    transform-origin: center;
  }
  .phase-two-info {
    top: 58vh;
    transform: translateX(-50%) scale(0.92);
    transform-origin: top center;
    gap: 18px;
  }
  .phase-two-copy {
    width: min(92vw, 1040px);
    gap: 18px;
  }
  .phase-two-copy p {
    font-size: 16px;
    line-height: 1.3;
  }
  .phase-two-speakers img {
    width: 96px;
    height: 72px;
  }
  .third-project {
    left: 4vw;
    top: 14vh;
    width: 34vw;
  }
  .third-project .project-kicker {
    font-size: 14px;
  }
  .third-project h2 {
    margin-top: 8px;
    font-size: clamp(26px, 2.5vw, 32px);
    line-height: 1.12;
  }
  .third-project p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.34;
  }
  .project-cta {
    margin-top: 22px;
    height: 42px;
    padding: 0 18px;
    font-size: 14px;
  }
  .third-slider {
    left: 64vw;
    top: 30vh;
    width: 31vw;
  }
  .third-slide h3 {
    margin-bottom: 12px;
    font-size: 21px;
    line-height: 1.22;
  }
  .third-slide p {
    font-size: 14px;
    line-height: 1.34;
  }
  .slider-arrows {
    left: 64vw;
    top: 60vh;
    gap: 12px;
  }
  .slider-arrow {
    width: 42px;
    height: 42px;
  }
  .stage-eight {
    --grid-space: calc(100vw - 92px);
  }
  .stage-eight .s8-title {
    top: 110px;
    left: 26px;
    width: 300px;
    font-size: 32px;
    line-height: 1.08;
  }
  .cycle-live {
    left: 26px;
    top: 220px;
    height: 338px;
    padding: 22px;
  }
  .cycle-live .cycle-copy {
    width: 100%;
  }
  .cycle-live .cycle-copy p {
    font-size: 13px;
    line-height: 1.35;
  }
  .cycle-live .cycle-button {
    left: 22px;
    bottom: 16px;
    padding: 12px 18px;
    font-size: 13px;
  }
  .cycle-cases {
    left: calc(52px + var(--grid-space) * 0.317);
    top: 90px;
    height: 188px;
    padding: 22px;
  }
  .cycle-events {
    left: calc(52px + var(--grid-space) * 0.317);
    top: 308px;
    height: 250px;
    padding: 22px;
  }
  .cycle-materials {
    left: calc(78px + var(--grid-space) * 0.572);
    right: 26px;
    top: 90px;
    height: 292px;
    padding: 24px;
  }
  .cycle-community {
    left: calc(78px + var(--grid-space) * 0.572);
    right: 26px;
    top: 408px;
    height: 150px;
    padding: 20px 24px;
  }
  .cycle-card h3 {
    font-size: 20px;
    line-height: 1.14;
  }
  .cycle-card p {
    font-size: 13px;
    line-height: 1.34;
  }
  .cycle-materials h3 {
    font-size: 19px;
    line-height: 1.15;
  }
  .cycle-events .case-watch {
    font-size: 13px;
  }
  .mini-date {
    width: 66px;
    height: 68px;
  }
  .mini-date strong {
    font-size: 30px;
  }
  .cycle-community h3 {
    font-size: 14px;
    line-height: 1.24;
    max-width: 100%;
  }
  .cycle-community .case-watch {
    bottom: 14px;
    font-size: 13px;
  }
}

/* The 1100-1240px tier above already compacts the "cycle" cards for short
   windows; widths from 1241px up to the 1900px tier had no such fallback,
   so a short-but-wide browser window clipped the bottom of the cards. */
@media (min-width: 1241px) and (max-width: 1899px) and (max-height: 850px) {
  .stage-eight {
    --grid-space: calc(100vw - 92px);
  }
  .stage-eight .s8-title {
    top: 110px;
    left: 26px;
    width: 300px;
    font-size: 32px;
    line-height: 1.08;
  }
  .cycle-live {
    left: 26px;
    top: 220px;
    height: 338px;
    padding: 22px;
  }
  .cycle-live .cycle-copy {
    width: 100%;
  }
  .cycle-live .cycle-copy p {
    font-size: 13px;
    line-height: 1.35;
  }
  .cycle-live .cycle-button {
    left: 22px;
    bottom: 16px;
    padding: 12px 18px;
    font-size: 13px;
  }
  .cycle-cases {
    left: calc(52px + var(--grid-space) * 0.317);
    top: 90px;
    height: 188px;
    padding: 22px;
  }
  .cycle-events {
    left: calc(52px + var(--grid-space) * 0.317);
    top: 308px;
    height: 250px;
    padding: 22px;
  }
  .cycle-materials {
    left: calc(78px + var(--grid-space) * 0.572);
    right: 26px;
    top: 90px;
    height: 292px;
    padding: 24px;
  }
  .cycle-community {
    left: calc(78px + var(--grid-space) * 0.572);
    right: 26px;
    top: 408px;
    height: 150px;
    padding: 20px 24px;
  }
  .cycle-card h3 {
    font-size: 20px;
    line-height: 1.14;
  }
  .cycle-card p {
    font-size: 13px;
    line-height: 1.34;
  }
  .cycle-materials h3 {
    font-size: 19px;
    line-height: 1.15;
  }
  .cycle-events .case-watch {
    font-size: 13px;
  }
  .cycle-community h3 {
    font-size: 14px;
    line-height: 1.24;
    max-width: 100%;
  }
  .cycle-community .case-watch {
    bottom: 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-copy,
  .benefits {
    transform: none !important;
  }
  .scene-light,
  canvas,
  .orbit {
    transform: none !important;
  }
}
.scroll-progress {
  display: none;
  position: fixed;
  z-index: 2;
  right: 22px;
  top: 50%;
  width: 2px;
  height: 84px;
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(180, 255, 195, 0.1);
  pointer-events: none;
}
.scroll-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleY(var(--progress, 0));
  transform-origin: top;
  border-radius: inherit;
  background: rgba(130, 255, 155, 0.58);
  box-shadow: 0 0 14px rgba(60, 255, 100, 0.42);
}
.menu-logo {
  width: 146px;
  height: auto;
}
.scroll-mouse {
  width: 17px;
  height: 26px;
  border-width: 2px;
}
.scroll-mouse i {
  top: 4px;
  height: 6px;
}

@media (max-width: 1240px) {
  .menu-logo {
    width: 136px;
  }
}
@media (max-width: 900px) {
  .menu-logo {
    width: 110px;
  }
  .scroll-mouse {
    width: 16px;
    height: 25px;
  }
}
@media (max-width: 390px) {
  .menu-logo {
    width: 110px;
  }
  .scroll-mouse {
    width: 14px;
    height: 22px;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  .menu-logo {
    width: 82px;
  }
  .scroll-mouse {
    width: 13px;
    height: 20px;
  }
}

@media (min-width: 1800px) {
  .orbit {
    left: 50%;
    top: 50%;
  }
  .brand {
    top: calc(50% - 255px);
  }
  .title {
    top: calc(50% - 196px);
  }
  .subtitle {
    top: calc(50% - 130px);
  }
  .season {
    top: calc(50% + 55px);
  }
  .phase-two-info {
    top: calc(50% + 230px);
  }
  .side-copy.left,
  .side-copy.right {
    top: calc(50% + 145px);
  }
  .benefits {
    top: calc(50% + 150px);
  }
  .cycle-community {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cycle-community h3 {
    max-width: 100%;
    font-size: clamp(22px, 1.35vw, 32px);
    line-height: 1.15;
  }
  .cycle-community .case-watch {
    flex-shrink: 0;
  }
}

@media (min-width: 1920px) and (max-width: 2500px) {
  .phase-one .brand {
    top: calc(50% - 130px);
  }
  .phase-one .title {
    top: calc(50% - 71px);
  }
  .phase-one .subtitle {
    top: calc(50% - 5px);
  }
  .phase-one .season {
    top: calc(50% + 180px);
  }
  .phase-two-info {
    top: calc(50% + 180px);
  }
  .cycle-community h3 {
    font-size: clamp(18px, 1vw, 24px);
    line-height: 1.22;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .orbit {
    top: 39.8%;
    left: 50%;
    width: 150vw;
    height: 131vw;
  }
  .brand {
    top: 33.1vh;
    width: 271px;
    transform: translateX(-50%) scale(0.92);
  }
  .title {
    top: 37.1vh;
    width: 271px;
    font-size: 31px;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }
  .subtitle {
    top: 41.8vh;
    width: 340px;
    font-size: 31px;
    line-height: 1.02;
    letter-spacing: -0.03em;
  }
  .season {
    top: 46.2vh;
    font-size: 14px;
  }
  .scroll-prompt {
    bottom: 112px;
    height: 44px;
    padding: 0 22px;
    font-size: 14px;
  }
  .scroll-prompt .scroll-mouse {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 390px) {
  .orbit {
    top: 39.5%;
    width: 150vw;
    height: 131vw;
  }
  .brand {
    top: 33vh;
  }
  .title {
    top: 37vh;
    font-size: 30px;
  }
  .subtitle {
    top: 41.5vh;
    font-size: 31px;
  }
  .season {
    top: 46vh;
  }
}
@media (max-width: 640px) {
  .topbar {
    background: transparent;
    border: 0;
  }
  .topbar-nav,
  .topbar .pill:not(.pill-language) {
    display: none !important;
  }
  .hero .brand {
    top: 18vh !important;
    transform: translateX(-50%) scale(0.9) !important;
  }
  .hero .title {
    top: 32vh !important;
    font-size: 42px !important;
    line-height: 0.95 !important;
    text-align: center;
  }
  .hero .subtitle {
    top: 41vh !important;
    font-size: 30px !important;
  }
  .hero .season {
    top: 49vh !important;
    font-size: 18px;
  }
  .orbit {
    top: 55% !important;
    width: 150vw !important;
    height: 150vw !important;
  }
  .side-copy,
  .benefits,
  .phase-two-info {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .hero .brand {
    top: 30.5vh !important;
    width: 260px !important;
    transform: translateX(-50%) scale(0.86) !important;
  }
  .brand::before {
    font-size: 34px !important;
    top: 13px !important;
  }
  .hero .brand-tv {
    width: 72px !important;
    height: 48px !important;
    font-size: 30px !important;
    border-radius: 12px !important;
  }
  .hero .title {
    top: 35.8vh !important;
    width: 100% !important;
    font-size: 38px !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
  }
  .hero .subtitle {
    top: 41.1vh !important;
    width: 100% !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: -1.2px !important;
  }
  .hero .season {
    top: 47.1vh !important;
    font-size: 18px !important;
  }
  .orbit {
    top: 45.5% !important;
    left: 50% !important;
    width: 165vw !important;
    height: 130vw !important;
  }
  .scroll-prompt {
    bottom: 176px !important;
    font-size: 16px !important;
    background: transparent !important;
    border: 0 !important;
  }
}

@media (max-width: 640px) {
  .phase-one .brand {
    top: 31.8vh !important;
    width: 176px !important;
    transform: translateX(-50%) scale(0.82) !important;
  }
  .brand::before {
    left: 0 !important;
    top: 12px !important;
    font-size: 32px !important;
  }
  .hero .brand-tv {
    margin-left: 8px !important;
  }
  .hero .title {
    top: 36.7vh !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }
  .hero .subtitle {
    top: 40.6vh !important;
    font-size: 31px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 640px) {
  .mobile-phase-two .phase-one .brand {
    top: 132px !important;
    width: 184px !important;
    transform: translateX(-50%) scale(0.72) !important;
  }
  .mobile-phase-two .phase-one .title {
    top: 178px !important;
    font-size: 23px !important;
    letter-spacing: -0.9px !important;
  }
  .mobile-phase-two .phase-one .subtitle {
    top: 211px !important;
    font-size: 31px !important;
    letter-spacing: -1.1px !important;
  }
  .mobile-phase-two .phase-one .season {
    top: 266px !important;
    font-size: 14px !important;
  }
  .mobile-phase-two .phase-one .orbit {
    top: 245px !important;
    width: 340px !important;
    height: 340px !important;
    opacity: 0.74 !important;
  }
  .phase-two-info {
    display: flex !important;
    position: absolute !important;
    z-index: 12;
    left: 0 !important;
    top: 310px !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 20px 18px !important;
    transform: none !important;
    gap: 14px !important;
    pointer-events: none !important;
  }
  .phase-two-copy {
    display: contents !important;
  }
  .phase-two-copy p {
    width: 100%;
    margin: 0 !important;
    color: #a3b8a8;
    text-align: center !important;
    font:
      400 15px/1.4 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .phase-two-copy p:first-child {
    order: 1;
  }
  .phase-two-tags {
    order: 2;
    max-width: 350px !important;
    gap: 4px !important;
  }
  .phase-two-tags .benefit {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
  .phase-two-tags .benefit img {
    width: 20px !important;
    height: 20px !important;
  }
  .phase-two-speakers {
    order: 3;
    gap: 12px !important;
  }
  .phase-two-speakers img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
  .phase-two-copy p:last-child {
    order: 4;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .third {
    z-index: 20;
    overflow: hidden !important;
    background: #020705;
  }
  .site-ui {
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .topbar {
    position: fixed !important;
    top: max(20px, env(safe-area-inset-top)) !important;
    left: 20px !important;
    right: 20px !important;
    height: 40px !important;
    z-index: 101 !important;
    pointer-events: none !important;
  }
  .menu-logo {
    display: block !important;
    width: 128px !important;
    height: 40px !important;
    object-fit: contain !important;
    object-position: left center !important;
    pointer-events: auto !important;
  }
  .mobile-phase-three .phase-one,
  .mobile-phase-three .phase-two-info {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .third-project {
    left: 24px !important;
    top: 128px !important;
    width: calc(100% - 48px) !important;
    text-align: center !important;
  }
  .third-project .project-kicker {
    font-size: 14px !important;
    letter-spacing: 1px;
  }
  .third-project h2 {
    margin-top: 12px !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  .third-project p {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.46 !important;
  }
  .third-project p:nth-of-type(2) {
    display: block !important;
    color: #a3b8a8;
  }
  .project-cta {
    display: none !important;
  }
  .third-slider {
    left: 24px !important;
    top: 500px !important;
    width: calc(100% - 48px) !important;
    min-height: 252px;
    box-sizing: border-box;
    padding: 20px !important;
    border: 1px solid #346f42;
    border-radius: 16px;
    background: #02150a;
  }
  .third-slide {
    inset: 20px !important;
    text-align: left !important;
  }
  .third-slide h3 {
    margin: 0 0 12px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  .third-slide p {
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #a3b8a8;
  }
  .slider-arrows {
    left: 24px !important;
    top: 772px !important;
    gap: 12px !important;
  }
  .slider-arrow {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
  .speaker-stage {
    z-index: 32 !important;
    overflow: hidden !important;
    background: #020705 !important;
  }
  .speaker-sequence-canvas,
  .speaker-sequence-fallback,
  .speaker-shade,
  .speaker-profile,
  .speaker-event {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .hero .brand {
    gap: 4px !important;
  }
  .hero .brand-tv {
    margin-left: 0 !important;
    width: 64px !important;
    height: 44px !important;
    font-size: 24px !important;
    border-radius: 12px !important;
  }
  .hero .title {
    margin-bottom: 0 !important;
  }
  .hero .subtitle {
    margin-top: -4px !important;
  }
}

.mobile-app {
  display: none;
}
@media (max-width: 640px) {
  html {
    background: #020705;
    scroll-behavior: auto;
  }
  body {
    height: auto !important;
    min-width: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #020705;
    color: #fff;
    font-family: "Space Grotesk", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .desktop-app {
    display: none !important;
  }
  .mobile-app {
    display: block;
    min-height: 100dvh;
  }
  .mobile-app button,
  .mobile-app a {
    font: inherit;
    color: inherit;
  }
  .mobile-app button {
    border: 0;
  }
  .mobile-app a {
    text-decoration: none;
  }
  .mobile-app img {
    display: block;
    max-width: 100%;
  }
  .m-page {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    overflow: hidden;
    background: #020705;
  }
  .m-page::before,
  .m-page::after {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }
  .m-page::before {
    top: -34px;
    left: 50%;
    width: 430px;
    height: 430px;
    transform: translateX(-50%);
    background: radial-gradient(
      ellipse at center,
      rgba(35, 170, 96, 0.34),
      rgba(18, 111, 62, 0.2) 31%,
      rgba(8, 55, 31, 0.09) 51%,
      transparent 72%
    );
  }
  .m-page::after {
    top: 520px;
    left: -205px;
    width: 390px;
    height: 320px;
    background: radial-gradient(
      ellipse at center,
      rgba(36, 190, 103, 0.35),
      rgba(19, 116, 65, 0.18) 36%,
      rgba(7, 48, 27, 0.07) 55%,
      transparent 73%
    );
  }
  .m-page > :not(.m-menu):not(.m-nav) {
    position: relative;
    z-index: 1;
  }
  .m-page > .m-nav {
    position: relative;
    z-index: 20;
  }
  .m-nav {
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  .m-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  .m-logo-tv {
    padding: 3px 8px;
    border: 1px solid #fff;
    border-radius: 6px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .m-burger {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 9px;
    place-content: center;
    gap: 5px;
    border: 1px solid #fff !important;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
  .m-burger i {
    display: block;
    width: 21px;
    height: 1px;
    background: #fff;
  }
  .m-menu {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    flex-direction: column;
    padding: 8px 20px max(28px, env(safe-area-inset-bottom));
    background: #020705;
  }
  .m-menu.is-open {
    display: flex;
  }
  .m-menu-head {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-between;
  }
  .m-close {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #fff !important;
    border-radius: 10px;
    background: transparent;
    font-size: 26px !important;
    font-weight: 300;
    line-height: 1;
  }
  .m-menu nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 56px;
    font-size: 24px;
  }
  .m-menu nav a {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(163, 184, 168, 0.22);
  }
  .m-language {
    position: relative;
    margin-top: auto;
  }
  .m-language-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 1px solid #346f42 !important;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
  }
  .m-language-current {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
  }
  .m-language-current img {
    width: 18px;
    height: 18px;
  }
  .m-language-chevron {
    width: 14px;
    height: 14px;
  }
  .m-language-options {
    position: absolute;
    right: 0;
    bottom: 56px;
    left: 0;
    display: none;
    padding: 8px;
    border: 1px solid #346f42;
    border-radius: 14px;
    background: #02150a;
    box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.35);
  }
  .m-language.is-open .m-language-options {
    display: grid;
  }
  .m-language-options button {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 9px;
    background: transparent;
    text-align: left;
  }
  .m-language-options button[aria-selected="true"],
  .m-language-options button:focus-visible {
    background: rgba(47, 156, 102, 0.25);
    outline: 2px solid #58b489;
    outline-offset: -2px;
  }
  .m-section {
    position: relative;
    padding-inline: 20px;
  }
  .m-hero {
    padding: 24px 20px 32px;
    text-align: center;
  }
  .m-orphan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 20px;
    font-weight: 500;
  }
  .m-orphan b {
    padding: 3px 8px;
    border-radius: 6px;
    background: #fff;
    color: #020705;
    font-size: 13px;
  }
  .m-hero-title {
    margin: 16px 0 0;
    font-size: 31px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    background: linear-gradient(180deg, #fff 45%, #4b4b4b 120%);
    background-clip: text;
    color: transparent;
  }
  .m-hero-title span {
    display: block;
    margin-inline: 0;
    font-size: 23px;
    line-height: 0.95;
  }
  .m-season {
    margin: 16px 0 0;
    color: #1fdf3b;
    font-size: 16px;
    font-weight: 500;
  }
  .m-lead {
    max-width: 342px;
    margin: 20px auto 0;
    color: #a3b8a8;
    font-size: 15px;
    line-height: 1.4;
  }
  .m-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
  }
  .m-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border: 1px solid #346f42;
    border-radius: 40px;
    background: #02150a;
    font-size: 15px;
    line-height: 24px;
    white-space: nowrap;
  }
  .m-chip img {
    width: 24px;
    height: 24px;
  }
  .m-avatars {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
  }
  .m-avatars img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
  }
  .m-lecturer-note {
    max-width: 342px;
    margin: 16px auto 0;
    color: #a3b8a8;
    font-size: 14px;
    line-height: 1.4;
  }
  .m-btn {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
  .m-btn-primary {
    background: linear-gradient(90deg, #1e7c4d, #32a26a);
    box-shadow: 0 4px 6px rgba(31, 223, 59, 0.2);
  }
  .m-btn-outline {
    border: 1px solid #346f42 !important;
    background: transparent;
  }
  .m-btn img {
    width: 18px;
    height: 18px;
  }
  .m-hero .m-btn {
    margin-top: 24px;
  }
  .m-project {
    padding-top: 32px;
    padding-bottom: 24px;
    text-align: center;
  }
  .m-eyebrow {
    margin: 0;
    color: #1fdf3b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .m-project h2 {
    margin: 12px 0 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.8px;
  }
  .m-project-copy {
    isolation: isolate;
    padding-top: 8px;
    padding-bottom: 14px;
    text-align: left;
  }
  .m-project-copy p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
  }
  .m-project-copy > p:nth-of-type(2) {
    color: #a3b8a8;
  }
  .m-info-card {
    padding: 20px;
    border: 1px solid #346f42;
    border-radius: 16px;
    background: #02150a;
    text-align: left;
  }
  .m-info-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.4;
  }
  .m-info-card p {
    margin: 0;
    color: #a3b8a8;
    font-size: 14px;
    line-height: 1.45;
  }
  .m-project-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .m-project-slides {
    width: 100%;
  }
  .m-project-slide {
    min-height: 242px;
  }
  .m-project-slide[hidden] {
    display: none;
  }
  .m-slider-nav {
    display: flex;
    gap: 12px;
  }
  .m-slider-btn {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid #346f42 !important;
    border-radius: 12px;
    background: #02150a;
    cursor: pointer;
  }
  .m-slider-btn img {
    width: 20px;
    height: 20px;
  }
  .m-slider-btn:disabled {
    opacity: 0.35;
  }
  .m-speakers {
    padding-top: 36px;
  }
  .m-speaker {
    position: relative;
    isolation: isolate;
    padding-bottom: 32px;
  }
  .m-speaker-photo {
    width: 100%;
    aspect-ratio: 350/260;
    overflow: hidden;
    border-radius: 18px;
    background: #04160d;
  }
  .m-speaker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .m-speaker h3 {
    margin: 24px 0 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
  }
  .m-speaker-bio {
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
  }
  .m-speaker-bio strong {
    font-weight: 700;
  }
  .m-session {
    display: flex;
    min-height: 104px;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid rgba(52, 111, 66, 0.5);
    border-radius: 16px;
    background: rgba(15, 35, 30, 0.22);
  }
  .m-date {
    display: flex;
    width: 64px;
    height: 67px;
    flex: 0 0 64px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #1e7c4d, #32a26a);
    line-height: 1;
  }
  .m-date strong {
    font-size: 32px;
  }
  .m-date span {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
  }
  .m-session p {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
  }
  .m-speaker .m-btn {
    margin-top: 24px;
  }
  .m-modules-head {
    padding-top: 8px;
    padding-bottom: 22px;
    text-align: center;
  }
  .m-nine {
    height: 153px;
    margin: 0;
    color: rgba(163, 184, 168, 0.24);
    font-size: 132px;
    font-weight: 500;
    line-height: 153px;
  }
  .m-modules-head h2 {
    margin: -20px 0 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.6px;
  }
  .m-module-group {
    margin-bottom: 40px;
  }
  .m-module-group > img {
    width: 100%;
    height: 220px;
    border-radius: 16px;
    object-fit: cover;
  }
  .m-module-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
  }
  .m-module {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #346f42;
    border-radius: 12px;
    background: #02150a;
  }
  .m-module b {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 8px;
    background: #1a8459;
    font-size: 12px;
  }
  .m-module span {
    font-size: 13px;
    line-height: 1.4;
  }
  .m-discussion {
    padding: 0;
  }
  .m-discussion-hero {
    position: relative;
    height: 280px;
    display: flex;
    align-items: flex-end;
    padding: 0 20px 12px;
    overflow: hidden;
  }
  .m-discussion-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .m-discussion-hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 33%,
      rgba(2, 7, 5, 0.8) 83%,
      #020705
    );
    content: "";
  }
  .m-online {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 74px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 18px;
    border: 1px solid #346f42;
    border-radius: 40px;
    background: rgba(2, 21, 10, 0.75);
    transform: translateX(-50%);
    font-size: 15px;
  }
  .m-online img {
    width: 20px;
    height: 20px;
  }
  .m-discussion h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 36px;
    line-height: 1.1;
  }
  .m-discussion-body {
    padding: 12px 20px 32px;
  }
  .m-discussion-copy {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.45;
  }
  .m-discussion .m-session {
    margin-top: 24px;
  }
  .m-discussion-actions {
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }
  .m-cycle {
    padding-top: 32px;
    padding-bottom: 40px;
  }
  .m-cycle > h2 {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
  }
  .m-cycle-grid {
    display: grid;
    gap: 20px;
  }
  .m-cycle-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 20px;
    border: 1px solid #39443a;
    border-radius: 20px;
    background: rgba(15, 35, 30, 0.2);
  }
  .m-cycle-card.m-accent {
    border-color: #346f42;
  }
  .m-cycle-card h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
  }
  .m-cycle-card p {
    margin: 12px 0 0;
    color: #97a3b0;
    font-size: 14px;
    line-height: 1.5;
  }
  .m-cycle-card .m-btn {
    height: 46px;
    margin-top: 16px;
    border-radius: 12px;
    font-size: 14px;
  }
  .m-text-link {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    color: #2f9c66;
    font-size: 16px;
  }
  .m-text-link img {
    width: 24px;
    height: 24px;
  }
  .m-cycle-event-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .m-cycle-event-head h3 {
    max-width: 198px;
    font-weight: 400;
  }
  .m-calendar-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    border: 1px solid #346f42;
    border-radius: 12px;
    color: #2f9c66;
    font-size: 14px;
    font-weight: 500;
  }
  .m-material-stage {
    position: relative;
    height: 238px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 12px;
  }
  .m-material-stage::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
    content: "";
  }
  .m-material-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.22s;
  }
  .m-material-visual.is-active {
    opacity: 1;
  }
  .m-material-copy {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 68px;
    left: 16px;
    margin: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  .m-material-nav {
    position: absolute;
    z-index: 3;
    bottom: 14px;
    left: 14px;
    display: flex;
    gap: 10px;
  }
  .m-material-nav button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #346f42 !important;
    border-radius: 11px;
    background: rgba(2, 21, 10, 0.65);
  }
  .m-material-nav img {
    width: 14px;
    height: 14px;
  }
  .m-material-nav button:first-child img {
    transform: rotate(180deg);
  }
  .m-footer-space {
    height: max(24px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 359px) {
  .m-section {
    padding-inline: 16px;
  }
  .m-nav {
    padding-inline: 16px;
  }
  .m-chip {
    padding: 10px 14px;
  }
  .m-hero-title {
    font-size: 28px;
  }
  .m-speaker h3 {
    font-size: 25px;
  }
  .m-cycle > h2 {
    font-size: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-material-visual {
    transition: none !important;
  }
}

.discussion-actions {
  align-items: center;
}
.discussion-session {
  display: flex;
  align-items: center;
  gap: 16px;
}
.discussion-session .discussion-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.discussion-date strong {
  font:
    700 24px/1 "Space Grotesk",
    Arial,
    sans-serif;
}
.discussion-date span {
  font:
    500 11px/1 "Space Grotesk",
    Arial,
    sans-serif;
}
.discussion-session p {
  margin: 0;
  font:
    400 14px/1.3 Inter,
    Arial,
    sans-serif;
}
.discussion-remind {
  height: 46px;
  padding: 0 20px;
  border: 1px solid #2c9760;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font:
    600 14px/1 Inter,
    Arial,
    sans-serif;
}
@media (max-width: 640px) {
  html,
  body {
    background: #010805;
  }
  #stage {
    background: #010805;
  }
  canvas {
    touch-action: pan-y !important;
    pointer-events: none !important;
  }
  .topbar {
    top: max(14px, env(safe-area-inset-top)) !important;
    left: 20px !important;
    right: 20px !important;
    height: 40px !important;
  }
  .menu-logo {
    width: 108px !important;
    height: 32px !important;
    object-fit: contain !important;
  }
  .phase-one .brand {
    top: 273px !important;
    left: 50% !important;
    width: max-content !important;
    height: 29px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transform: translateX(-50%) !important;
  }
  .phase-one .brand::before {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: -0.6px !important;
  }
  .phase-one .brand-tv {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 43px !important;
    height: 29px !important;
    margin: 0 !important;
    border-width: 1px !important;
    border-radius: 7px !important;
    font-size: 18px !important;
  }
  .hero .title {
    top: 314px !important;
    width: 100% !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
    letter-spacing: -1.1px !important;
    text-align: center !important;
  }
  .hero .subtitle {
    top: 341px !important;
    width: 100% !important;
    font-size: 36px !important;
    line-height: 1 !important;
    letter-spacing: -1.1px !important;
    text-align: center !important;
  }
  .hero .season {
    top: 391px !important;
    font-size: 14px !important;
  }
  .orbit {
    left: 50% !important;
    top: 356px !important;
    width: 584px !important;
    height: 511px !important;
    transform: translate(-50%, -50%) !important;
  }
  .scroll-prompt {
    bottom: 156px !important;
    height: 36px !important;
    padding: 0 !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 300 !important;
  }
  .scroll-mouse {
    width: 10px !important;
    height: 16px !important;
    border-width: 1px !important;
    border-radius: 5px !important;
  }
  .scroll-mouse i {
    top: 3px !important;
    width: 1px !important;
    height: 4px !important;
  }
  .mobile-phase-two .phase-one .brand {
    top: 129px !important;
  }
  .mobile-phase-two .phase-one .title {
    top: 173px !important;
    font-size: 23px !important;
  }
  .mobile-phase-two .phase-one .subtitle {
    top: 196px !important;
    font-size: 30px !important;
  }
  .mobile-phase-two .phase-one .season {
    top: 248px !important;
    font-size: 17px !important;
    text-transform: uppercase;
  }
  .mobile-phase-two .phase-one .orbit {
    top: 171px !important;
    width: 340px !important;
    height: 340px !important;
  }
  .phase-two-info {
    top: 298px !important;
    padding: 0 20px !important;
    gap: 14px !important;
  }
  .phase-two-copy p:first-child {
    font-size: 15px !important;
    max-width: 310px !important;
  }
  .phase-two-tags {
    max-width: 345px !important;
    gap: 4px !important;
  }
  .phase-two-tags .benefit {
    height: 51px !important;
    padding: 0 18px !important;
    border-radius: 26px !important;
    font-size: 17px !important;
  }
  .phase-two-speakers {
    margin-top: 10px !important;
  }
  .phase-two-speakers img {
    width: 64px !important;
    height: 64px !important;
  }
  .phase-two-copy p:last-child {
    max-width: 335px !important;
    font-size: 14px !important;
  }
  .third {
    overflow-y: auto !important;
  }
  .third-project {
    left: 23px !important;
    top: 126px !important;
    width: calc(100% - 46px) !important;
  }
  .third-project .project-kicker {
    width: 100% !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    text-transform: uppercase;
  }
  .third-project h2 {
    margin-top: 12px !important;
    font-size: 28px !important;
    line-height: 1.18 !important;
  }
  .third-project p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }
  .third-slider {
    left: 23px !important;
    top: 505px !important;
    width: calc(100% - 46px) !important;
    min-height: 228px !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .third-slide {
    inset: 18px !important;
  }
  .slider-arrows {
    left: 136px !important;
    top: 749px !important;
  }
  .speaker-stage {
    touch-action: pan-y !important;
  }
  .stage-seven {
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #010805 !important;
  }
  .s7-canvas {
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: max-content !important;
    min-height: 0 !important;
    transform: none !important;
    padding: 92px 20px 32px !important;
  }
  .s7-number {
    position: relative !important;
    left: 50% !important;
    top: auto !important;
    display: block !important;
    width: max-content !important;
    margin: 0 0 -8px !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    font-size: 112px !important;
    line-height: 0.85 !important;
    letter-spacing: -6px !important;
  }
  .s7-title {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 auto 25px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  .lecture-speakers {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .lecture-column {
    width: 100% !important;
  }
  .lecture-photo {
    width: 100% !important;
    height: 224px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }
  .lecture-list {
    gap: 5px !important;
    margin-top: 6px !important;
  }
  .lecture-item {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 8px !important;
    grid-template-columns: 20px 1fr !important;
    gap: 9px !important;
    border: 1px solid #1f6f41 !important;
    border-radius: 8px !important;
    background: #04160d !important;
  }
  .lecture-index {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
  .lecture-text {
    padding-top: 1px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  .stage-nine {
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #010805 !important;
  }
  .discussion-bg {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 280px !important;
    margin-top: 70px !important;
    object-fit: cover !important;
  }
  .discussion-shade {
    top: 70px !important;
    height: 340px !important;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.12) 42%,
      rgba(2, 7, 5, 0.82) 78%,
      #020705 100%
    ) !important;
  }
  .discussion-copy {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    transform: none !important;
    margin: -78px 20px 0 !important;
    text-align: left !important;
  }
  .discussion-copy h2 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  .discussion-copy > p {
    margin: 26px 0 24px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .discussion-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .discussion-session {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 104px !important;
    padding: 16px !important;
    border: 1px solid rgba(52, 111, 66, 0.5) !important;
    border-radius: 16px !important;
    background: rgba(15, 35, 30, 0.2) !important;
    backdrop-filter: blur(7px);
  }
  .discussion-session .discussion-date {
    display: flex !important;
    width: 64px !important;
    height: 67px !important;
    flex: 0 0 64px !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #70d3a4 !important;
    border-radius: 11px !important;
    background: radial-gradient(
      circle at 50% 35%,
      rgba(54, 189, 112, 0.55),
      rgba(4, 26, 14, 0.82) 70%
    ) !important;
    box-shadow: inset 0 0 20px rgba(67, 220, 135, 0.18) !important;
    color: #fff !important;
  }
  .discussion-date strong {
    font:
      700 32px/1 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .discussion-date span {
    font:
      500 12px/1 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .discussion-session p {
    margin: 0 !important;
    font:
      400 15px/1.3 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .discussion-actions .speaker-cta,
  .discussion-remind {
    position: sticky !important;
    z-index: 8;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    color: #fff !important;
    font:
      700 16px/1 "Space Grotesk",
      Arial,
      sans-serif !important;
    box-shadow: 0 -10px 22px #010805 !important;
  }
  .discussion-actions .speaker-cta {
    bottom: 76px !important;
  }
  .discussion-remind {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  .discussion-actions .speaker-cta {
    border: 0 !important;
    background: linear-gradient(90deg, #1e7c4d, #32a26a) !important;
  }
  .discussion-remind {
    border: 1px solid #346f42 !important;
    background: transparent !important;
    font-size: 15px !important;
  }
  .stage-eight {
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 92px 11px 28px !important;
    background: #010805 !important;
  }
  .stage-eight .s8-title {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    margin: 0 0 35px !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  .cycle-card {
    margin: 0 0 16px !important;
    padding: 24px 20px !important;
    border-radius: 12px !important;
  }
  .cycle-card h3 {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
  .cycle-card p {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  .cycle-live {
    min-height: 220px !important;
    padding: 22px 20px !important;
  }
  .cycle-live .cycle-copy {
    width: auto !important;
    padding-bottom: 70px !important;
  }
  .cycle-button {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 16px !important;
    text-align: center !important;
    font-size: 11px !important;
  }
  .cycle-cases {
    min-height: 180px !important;
    padding-bottom: 62px !important;
  }
  .cycle-events {
    min-height: 204px !important;
    padding-bottom: 70px !important;
  }
  .cycle-materials {
    min-height: 270px !important;
    padding-bottom: 62px !important;
  }
  .cycle-community {
    min-height: 158px !important;
    padding-bottom: 54px !important;
  }
  .cycle-materials img {
    opacity: 0.72 !important;
  }
  .cycle-materials h3 {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .case-watch {
    left: 20px !important;
    bottom: 20px !important;
    font-size: 11px !important;
  }
  .mini-date {
    width: 48px !important;
    height: 50px !important;
    font-size: 8px !important;
  }
  .mini-date strong {
    height: auto !important;
    font-size: 20px !important;
  }
}

@media (max-width: 640px) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  #canvas,
  .scene-light {
    display: none !important;
  }
  .phase-one,
  .phase-two-info,
  .third,
  .speaker-stage,
  .stage-seven,
  .stage-nine,
  .stage-eight {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.mobile-screen-hero .phase-one,
  body.mobile-screen-overview .phase-one,
  body.mobile-screen-project .third,
  body.mobile-screen-speakers .speaker-stage,
  body.mobile-screen-lectures .stage-seven,
  body.mobile-screen-discussion .stage-nine,
  body.mobile-screen-cycle .stage-eight {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.mobile-screen-overview .phase-two-info {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.mobile-screen-speakers .speaker-stage,
  body.mobile-screen-lectures .stage-seven,
  body.mobile-screen-discussion .stage-nine,
  body.mobile-screen-cycle .stage-eight {
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}

@media (max-width: 640px) {
  body.menu-open {
    overflow: hidden !important;
  }
  body.mobile-screen-hero .phase-one .brand {
    top: 252px !important;
    left: 50% !important;
    width: max-content !important;
    justify-content: center !important;
    gap: 10px !important;
    transform: translateX(-50%) !important;
  }
  body.mobile-screen-hero .phase-one .brand::before {
    font-size: 22px !important;
    line-height: 32px !important;
    letter-spacing: -0.8px !important;
  }
  body.mobile-screen-hero .phase-one .brand-tv {
    width: 50px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 22px !important;
  }
  body.mobile-screen-hero .hero .title {
    top: 306px !important;
    font-size: 31px !important;
    line-height: 1.04 !important;
  }
  body.mobile-screen-hero .hero .subtitle {
    top: 342px !important;
    font-size: 43px !important;
    line-height: 0.94 !important;
    letter-spacing: -1.8px !important;
  }
  body.mobile-screen-hero .hero .season {
    top: 408px !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }
  body.mobile-screen-hero .orbit {
    top: 360px !important;
    width: 650px !important;
    height: 570px !important;
  }
  .project-cta,
  .speaker-cta,
  .cycle-button,
  .discussion-actions .speaker-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #2fa66b !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font:
      700 16px/1 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .project-cta {
    width: 100% !important;
    margin-top: 22px !important;
    padding: 0 18px !important;
  }
  .cycle-button {
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    padding: 0 18px !important;
  }
  .play-icon {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 auto !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-left: 11px solid #fff !important;
  }
  .slider-arrows {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
  }
  .discussion-copy {
    min-height: calc(100dvh - 272px) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .discussion-copy > p {
    margin-bottom: 22px !important;
  }
  .discussion-actions {
    margin-top: auto !important;
    padding-top: 10px !important;
  }
  .discussion-actions .speaker-cta,
  .discussion-remind {
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    box-shadow: none !important;
  }
  .discussion-remind {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background: #010805 !important;
    border: 1px solid #2d8653 !important;
  }
  .remind-icon {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #fff;
  }
}

@media (max-width: 640px) {
  body.mobile-screen-overview .phase-one .brand {
    top: 129px !important;
    left: 50% !important;
    width: max-content !important;
    height: 29px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transform: translateX(-50%) !important;
  }
  body.mobile-screen-overview .phase-one .brand::before {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    font-size: 18px !important;
    line-height: 26px !important;
  }
  body.mobile-screen-overview .phase-one .brand-tv {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 43px !important;
    height: 29px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    font-size: 18px !important;
  }
  .third-project .project-cta {
    display: none !important;
  }
  .lecture-list {
    gap: 0 !important;
    margin: 6px -4px 0 !important;
  }
  .lecture-item {
    width: calc(100% - 8px) !important;
    min-height: 56px !important;
    margin: 4px !important;
    padding: 12px !important;
    grid-template-columns: 22px 1fr !important;
    gap: 10px !important;
  }
  .lecture-index {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }
  .lecture-text {
    padding-top: 1px !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }
  .stage-eight .cycle-card p {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
  .stage-eight .case-watch {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .stage-eight .mini-date {
    font-size: 10px !important;
  }
  .stage-eight .cycle-materials h3 {
    font-size: 15px !important;
  }
  .cycle-cases h3 {
    white-space: nowrap !important;
    font-size: 18px !important;
  }
  .cycle-cases p {
    max-width: 100% !important;
  }
  .stage-seven,
  .s7-canvas,
  .lecture-speakers {
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .stage-seven::-webkit-scrollbar,
  .s7-canvas::-webkit-scrollbar,
  .lecture-speakers::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .discussion-copy {
    margin: 18px 20px 0 !important;
  }
  .stage-eight {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .stage-eight .cycle-events,
  .stage-eight .cycle-materials {
    min-height: 0 !important;
    padding: 20px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    background: rgba(15, 35, 30, 0.2) !important;
    backdrop-filter: blur(7px) !important;
  }
  .cycle-events {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    border: 1.5px solid #346f42 !important;
  }
  .cycle-event-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .cycle-event-header h3 {
    width: 198px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
  }
  .cycle-event-header .mini-date {
    position: static !important;
    display: flex !important;
    width: 64px !important;
    height: 68px !important;
    flex: 0 0 64px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, #1e7c4d, #32a26a) !important;
    color: #fff !important;
    font:
      500 11px/1 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .cycle-event-header .mini-date strong {
    height: auto !important;
    font:
      700 24px/1 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .cycle-events > p {
    margin: 0 !important;
    color: #97a3b0 !important;
    font:
      400 14px/1.45 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .cycle-calendar-action {
    width: 100% !important;
    height: 44px !important;
    border: 1px solid #346f42 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #2f9c66 !important;
    font:
      500 14px/1 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .cycle-materials {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    border: 1px solid #39443a !important;
  }
  .cycle-materials > h3 {
    position: static !important;
    margin: 0 !important;
    color: #fff !important;
    font:
      700 20px/1.05 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .cycle-materials-preview {
    position: relative !important;
    width: 100% !important;
    height: 160px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .cycle-materials > .cycle-materials-preview > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 1 !important;
  }
  .cycle-materials > :is(p, .material-slide-copy) {
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
    font:
      500 14px/1.4 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
}

@media (max-width: 640px) {
  .stage-nine {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }
  .discussion-bg {
    height: clamp(230px, 34dvh, 280px) !important;
  }
  .discussion-shade {
    height: calc(clamp(230px, 34dvh, 280px) + 56px) !important;
  }
  .discussion-copy {
    min-height: 0 !important;
    margin: 14px 20px 0 !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
  .discussion-copy h2 {
    font-size: clamp(31px, 9vw, 36px) !important;
    line-height: 1.05 !important;
  }
  .discussion-copy > p {
    margin: 18px 0 18px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }
  .discussion-actions {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 10px !important;
  }
  .discussion-session {
    height: 88px !important;
    padding: 12px 14px !important;
  }
  .discussion-session .discussion-date {
    width: 58px !important;
    height: 62px !important;
    flex-basis: 58px !important;
  }
  .discussion-date strong {
    font-size: 28px !important;
  }
  .discussion-session p {
    font-size: 14px !important;
  }
  .discussion-actions .speaker-cta,
  .discussion-remind {
    height: 46px !important;
    min-height: 46px !important;
  }
  .discussion-remind .remind-icon {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    object-fit: contain !important;
  }
}

@media (max-width: 640px) {
  body.mobile-screen-overview .phase-one .brand {
    top: 84px !important;
  }
  body.mobile-screen-overview .phase-one .title {
    top: 130px !important;
    font-size: 23px !important;
  }
  body.mobile-screen-overview .phase-one .subtitle {
    top: 151px !important;
    font-size: 31px !important;
  }
  body.mobile-screen-overview .phase-one .season {
    top: 207px !important;
    font-size: 16px !important;
    text-transform: none !important;
  }
  body.mobile-screen-overview .phase-one .orbit {
    top: 150px !important;
    width: 340px !important;
    height: 340px !important;
  }
  body.mobile-screen-overview .phase-two-info {
    top: 258px !important;
    padding: 0 24px 16px !important;
    gap: 16px !important;
  }
  body.mobile-screen-overview .phase-two-copy p:first-child {
    max-width: 342px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  body.mobile-screen-overview .phase-two-tags {
    max-width: 350px !important;
    gap: 4px !important;
  }
  body.mobile-screen-overview .phase-two-tags .benefit {
    height: 50px !important;
    padding: 0 20px !important;
    gap: 5px !important;
    border-radius: 40px !important;
    font-size: 16px !important;
  }
  body.mobile-screen-overview .phase-two-tags .benefit img {
    width: 24px !important;
    height: 24px !important;
  }
  body.mobile-screen-overview .phase-two-speakers {
    margin-top: 8px !important;
    gap: 12px !important;
  }
  body.mobile-screen-overview .phase-two-copy p:last-child {
    max-width: 342px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  body.mobile-screen-discussion .discussion-copy {
    min-height: calc(100dvh - 84px - clamp(230px, 34dvh, 280px)) !important;
    box-sizing: border-box !important;
  }
  body.mobile-screen-discussion .discussion-actions {
    margin-top: auto !important;
  }
}

.discussion-arrow {
  display: none;
}
@media (min-width: 1025px) {
  .discussion-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .discussion-session {
    display: block !important;
  }
  .discussion-session > p {
    display: none !important;
  }
  .discussion-session .discussion-date {
    display: flex !important;
    width: auto !important;
    height: 46px !important;
    padding: 0 20px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    border: 1px solid #1e7c4d !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #fff !important;
  }
  .discussion-date strong,
  .discussion-date span {
    font:
      600 14px/1 "Inter",
      Arial,
      sans-serif !important;
  }
  .discussion-actions .speaker-cta,
  .discussion-remind {
    position: relative !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    font:
      600 14px/1 "Inter",
      Arial,
      sans-serif !important;
  }
  .discussion-actions .speaker-cta {
    border: 0 !important;
    background: linear-gradient(90deg, #1e7c4d, #32a26a) !important;
  }
  .discussion-actions .speaker-cta .play-icon {
    display: none !important;
  }
  .discussion-arrow {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
  }
  .discussion-remind {
    border: 1px solid #1e7c4d !important;
    background: transparent !important;
  }
  .discussion-remind .remind-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    object-fit: contain !important;
  }
  .stage-eight .cycle-events {
    height: 302px !important;
    padding: 0 !important;
    border: 2px solid #262f26 !important;
    border-radius: 20px !important;
    background: rgba(15, 35, 30, 0.2) !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(7px) !important;
  }
  .cycle-events .cycle-event-header {
    display: block !important;
  }
  .cycle-events .cycle-event-header h3 {
    position: absolute !important;
    left: 30px !important;
    top: 30px !important;
    width: 286px !important;
    margin: 0 !important;
    color: #fff !important;
    font:
      400 28px/1.05 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .cycle-events > p {
    position: absolute !important;
    left: 30px !important;
    top: 118px !important;
    margin: 0 !important;
    color: #97a3b0 !important;
    font:
      400 16px/24px "Inter",
      Arial,
      sans-serif !important;
  }
  .cycle-events .mini-date {
    position: absolute !important;
    left: 32px !important;
    top: 182px !important;
    width: 80px !important;
    height: 84px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: linear-gradient(90deg, #1e7c4d, #32a26a) !important;
    color: #fff !important;
    font:
      400 12px/24px "Inter",
      Arial,
      sans-serif !important;
  }
  .cycle-events .mini-date strong {
    height: auto !important;
    font:
      400 48px/1.05 "Space Grotesk",
      Arial,
      sans-serif !important;
  }
  .cycle-calendar-action {
    position: absolute !important;
    left: 136px !important;
    top: 211px !important;
    width: 175px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #2f9c66 !important;
    text-align: left !important;
    font:
      400 16px/24px "Inter",
      Arial,
      sans-serif !important;
  }
}
@media (max-width: 1024px) {
  .discussion-arrow {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body {
    height: 850vh !important;
  }
  .phase-one,
  .third,
  .speaker-stage,
  .stage-seven,
  .stage-nine,
  .stage-eight {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .phase-two-info {
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.mobile-screen-hero .phase-one,
  body.mobile-screen-overview .phase-one,
  body.mobile-screen-project .third,
  body.mobile-screen-speakers .speaker-stage,
  body.mobile-screen-lectures .stage-seven,
  body.mobile-screen-discussion .stage-nine,
  body.mobile-screen-cycle .stage-eight {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.mobile-screen-overview .phase-two-info {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .discussion-session,
  .stage-eight .cycle-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.mobile-screen-lectures .s7-title,
  body.mobile-screen-lectures .lecture-column {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  body.mobile-screen-cycle .s8-title,
  body.mobile-screen-cycle .cycle-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .cycle-materials-preview > .content-mobile {
    display: block !important;
  }
  .cycle-materials-preview > .content-desktop {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .cycle-community-speaker {
    display: none !important;
  }
}
/* The rich, multi-slide "Образовательные материалы" card design below was
   desktop-only (>=1025px); everything from 641-1024px (portrait tablets
   included) fell back to the plain single-image base styling, which hides
   the description text and leaves the slide-navigation arrows completely
   unstyled. Reuse this same design down to 641px instead of inventing a
   second one — .cycle-community's own >=1025px-only grid layout is left
   alone below, since it wasn't reported as broken. */
@media (min-width: 641px) {
  .cycle-materials {
    isolation: isolate;
    border: 1px solid #39443a;
    background: rgba(15, 35, 30, 0.2);
  }
  .cycle-materials::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.8) 100%
    );
    content: "";
    pointer-events: none;
  }
  .cycle-materials-preview {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
  }
  .cycle-materials-preview > img {
    position: absolute;
    inset: -3% auto auto -21%;
    width: 122%;
    height: 105%;
    max-width: none;
    object-fit: cover;
    opacity: 1;
  }
  .cycle-materials-preview > .material-visual {
    opacity: 0 !important;
    transition: opacity 0.25s ease;
  }
  .cycle-materials-preview > .material-visual.is-active {
    opacity: 1 !important;
  }
  .cycle-materials-preview > .material-speaker-two {
    z-index: 1;
    inset: 0 auto auto -8.67%;
    width: 139.44%;
    height: 100%;
  }
  .cycle-materials-preview > .material-speaker-three {
    z-index: 1;
    inset: 0 auto auto -0.07%;
    width: 105.39%;
    height: 100%;
  }
  .cycle-materials > h3,
  .cycle-materials > :is(p, .material-slide-copy),
  .cycle-slider-controls {
    position: relative;
    z-index: 2;
  }
  .cycle-materials > h3 {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    font:
      400 24px/1.05 "Space Grotesk",
      Arial,
      sans-serif;
  }
  .cycle-materials > :is(p, .material-slide-copy) {
    position: absolute;
    z-index: 2;
    left: 32px;
    right: 32px;
    bottom: 110px;
    display: block;
    margin: 0;
    color: #fff;
    font:
      400 24px/1.25 "Space Grotesk",
      Arial,
      sans-serif;
  }
  .cycle-slider-controls {
    position: absolute;
    left: 31px;
    bottom: 28px;
    display: flex;
    gap: 17px;
  }
  .cycle-slider-controls button {
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    border: 1px solid #1e7c4d;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
  }
  .cycle-slider-controls button:hover {
    background: #1e7c4d;
    border-color: #32a26a;
    transform: translateY(-1px);
  }
  .cycle-slider-controls button:first-child img {
    transform: rotate(180deg);
  }
  .cycle-slider-controls img {
    width: 14px;
    height: 14px;
  }
}
@media (min-width: 1025px) {
  .cycle-community {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 24px;
    align-content: center;
    padding-inline-start: 30px;
    border: 2px solid #262f26;
    background: rgba(15, 35, 30, 0.2);
  }
  .cycle-community-speaker {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  .cycle-community h3 {
    grid-column: 2;
    grid-row: 1;
    max-width: 100%;
    font:
      400 16px/24px "Space Grotesk",
      Arial,
      sans-serif;
  }
  .cycle-community .case-watch {
    position: static;
    grid-column: 2;
    grid-row: 2;
    display: flex;
    margin: 12px 0 0;
    gap: 9px;
    font:
      400 16px/24px Inter,
      Arial,
      sans-serif;
    transform: none;
  }
  .cycle-community .case-watch img {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
  .cycle-community .case-watch:hover {
    transform: none;
  }
}

.orbit {
  display: none !important;
}
@media (max-width: 640px) {
  html,
  body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
  }
  body {
    position: static !important;
    background: #020705 !important;
  }
  .desktop-app {
    display: none !important;
  }
  .mobile-app {
    display: block !important;
    min-height: 100dvh;
  }
  body.m-menu-open {
    overflow: hidden !important;
  }
}

/* A blanket `.stage-eight .cycle-events { height: 302px !important; }` rule
   (min-width: 1025px, no upper bound) always won over the vh-based height
   these two wide-screen brackets tried to give it, so cycle-events' bottom
   edge never matched cycle-live/cycle-community — leaving a visible gap
   under one or both of the outer "cycle" cards on large desktop monitors.
   Re-assert a vh height here (same specificity, later in the cascade) so
   all three bottoms line up again. */
@media (min-width: 1900px) and (max-width: 2399px) {
  .stage-eight .cycle-events {
    height: 33vh !important;
  }
}
@media (min-width: 2400px) and (max-width: 2560px) {
  .stage-eight .cycle-events {
    height: 31vh !important;
  }
}

/* The same blanket `.stage-eight .cycle-events { height: 302px !important; }`
   rule also wins over the tablet and short-window compaction brackets below
   1900px, so those never actually shortened cycle-events either — leaving
   its bottom edge below cycle-live/cycle-community there too. Re-assert
   each bracket's intended height here, same specificity, later in the
   cascade, so all three bottoms line up at every width. */
@media (min-width: 1024px) and (max-width: 1240px) {
  .stage-eight .cycle-events {
    height: 321px !important;
  }
}
@media (min-width: 1100px) and (max-width: 1240px) and (max-height: 760px) {
  .stage-eight .cycle-events {
    height: 250px !important;
  }
}
@media (min-width: 1241px) and (max-width: 1899px) and (max-height: 850px) {
  .stage-eight .cycle-events {
    height: 250px !important;
  }
}

/* The >=1025px rule above pins the heading, description, date badge and
   calendar link to fixed pixel offsets (30/118/182/211) sized for the
   Russian copy. Longer translations (e.g. Azerbaijani) can wrap the
   description to three lines at any width in this range — the card
   itself is usually wide enough not to force that, but isn't always —
   which reaches past the date badge's fixed top and overlaps it, and can
   run the badge itself past a compacted card's bottom edge. Shrink the
   badge and re-space everything with enough clearance for a three-line
   description, for the whole >=1025px range rather than just the
   brackets known to compact the card. */
@media (min-width: 1025px) {
  .cycle-events .cycle-event-header h3 {
    top: 24px !important;
  }
  .cycle-events > p {
    top: 90px !important;
  }
  .cycle-events .mini-date {
    top: 172px !important;
    width: 64px !important;
    height: 64px !important;
  }
  .cycle-events .mini-date strong {
    font-size: 34px !important;
  }
  .cycle-calendar-action {
    top: 192px !important;
  }
}
/* On an iPad in landscape the heading, description, date badge and
   calendar link above end up sitting right on top of one another — just
   clear of overlapping, but with barely any breathing room. Give them
   more room there specifically: real iPad landscape heights (768px+)
   never trip the short-window brackets (<=760/<=850px tall), so exclude
   those explicitly rather than risk the extra space overflowing a
   genuinely short desktop browser window at this same width. */
@media (min-width: 1024px) and (max-width: 1240px) and (min-height: 761px) {
  .cycle-events > p {
    top: 108px !important;
  }
  .cycle-events .mini-date {
    top: 204px !important;
  }
  .cycle-calendar-action {
    top: 224px !important;
  }
}
/* Below 1025px width .cycle-events falls back to a plain flex/flow layout
   (heading, then date badge, then description, each stacked in document
   order) instead of the absolute-offset scheme above — width:1024px
   (classic iPad landscape) is the only real device that lands in this
   961-1024px band, and there the date badge sits flush against the
   heading with no gap at all. Add the same kind of breathing room via
   margin instead of `top`, since these elements aren't absolutely
   positioned here. */
@media (min-width: 961px) and (max-width: 1024px) and (min-height: 761px) {
  .cycle-event-header .mini-date {
    margin-top: 16px !important;
  }
  .cycle-events > p {
    margin-top: 22px !important;
  }
  .cycle-calendar-action {
    display: inline-block !important;
    margin-top: 16px !important;
  }
}