.mobile-slide-copy {
  display: none;
}

.mobile-reflow {
  display: none;
}

.mobile-sequence-pan,
.strategy-mobile-pan {
  display: none;
}

@media (max-width: 900px), (max-height: 540px) and (hover: none) {
  body {
    --template-copy-accent: var(--blue, var(--ebio-green, #0057ff));
    --template-copy-ink: var(--graphite, var(--ebio-text, #172033));
    --template-copy-soft: var(--ink-soft, var(--ebio-muted, #26354d));
    --template-copy-line: var(--line, var(--ebio-line, rgba(216, 226, 238, 0.72)));
    --template-control-bottom: max(var(--control-bottom, 24px), calc(92px + env(safe-area-inset-bottom, 0px)));
  }

  html.experience-locked,
  body.experience-locked {
    height: 100svh;
    overflow: hidden;
  }

  .vision-sequence {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .slide:not(.active) {
    display: none;
  }

  .slide.active,
  .slide.title-slide.active,
  .slide.model-slide.active,
  .slide.slide-framed.active {
    position: relative;
    inset: auto;
    display: flex;
    height: 100svh;
    min-height: 100svh;
    flex-direction: column;
    align-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    gap: clamp(18px, 5vw, 30px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 72px 20px calc(var(--template-control-bottom) + 94px);
    text-align: left;
  }

  body.summary-active .slide.active {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .slide.title-slide.active {
    padding-top: 78px;
  }

  .slide.slide-framed.active {
    place-items: stretch;
  }

  .slide.active > .content,
  .slide.active > .visual,
  .slide.active > .slide-frame,
  .slide.active > .mobile-slide-copy,
  .slide.active > .mobile-reflow,
  .slide.active > .source {
    flex: 0 0 auto;
    width: min(100%, 760px);
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }

  .slide-frame {
    width: min(100%, 760px);
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .slide-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .slide.has-mobile-reflow.active > .slide-frame {
    display: none;
  }

  .slide.has-mobile-reflow.active > .mobile-slide-copy {
    display: none;
  }

  .mobile-reflow {
    display: block;
    color: var(--template-copy-ink);
  }

  .mobile-reflow-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--template-copy-accent);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-reflow-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
  }

  .mobile-reflow h2 {
    margin: 0;
    color: var(--template-copy-ink);
    font-size: clamp(34px, 9.5vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .mobile-reflow-title h2 {
    font-size: clamp(52px, 15vw, 74px);
  }

  .mobile-reflow h2 span {
    display: block;
  }

  .mobile-reflow-lead {
    margin: 22px 0 0;
    color: var(--template-copy-soft);
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 500;
    line-height: 1.36;
  }

  .mobile-reflow-lines {
    display: grid;
    gap: 8px;
    margin: 22px 0 0;
    color: var(--template-copy-soft);
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 500;
    line-height: 1.32;
  }

  .mobile-reflow-lines p {
    margin: 0;
  }

  .mobile-reflow-columns,
  .mobile-reflow-legend {
    display: grid;
    gap: 20px;
    margin-top: 34px;
  }

  .mobile-reflow-column,
  .mobile-reflow-legend-row,
  .mobile-summary-item {
    border-top: 1px solid var(--template-copy-line);
    padding-top: 16px;
  }

  .mobile-reflow-column h3,
  .mobile-reflow-legend-row strong {
    margin: 0 0 12px;
    color: var(--template-copy-accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .mobile-reflow-column.is-gold h3,
  .mobile-reflow-legend-row.is-gold strong {
    color: var(--ebio-gold, var(--template-copy-accent));
  }

  .mobile-reflow-column p,
  .mobile-reflow-legend-row p {
    margin: 0;
    color: var(--template-copy-soft);
    font-size: 18px;
    line-height: 1.42;
  }

  .mobile-reflow-column-list {
    display: grid;
    gap: 8px;
  }

  .mobile-process-heading {
    margin: 34px 0 0;
    color: var(--template-copy-accent);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .mobile-process-list {
    display: grid;
    gap: 18px;
    margin-top: 22px;
  }

  .mobile-process-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border-top: 1px solid var(--template-copy-line);
    padding-top: 16px;
  }

  .mobile-process-index {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--template-copy-accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .mobile-process-index.is-gold {
    background: var(--ebio-gold, #d5a93a);
  }

  .mobile-process-index.is-dark-text {
    color: #020807;
  }

  .mobile-process-item h3 {
    margin: 0 0 5px;
    color: var(--template-copy-ink);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
  }

  .mobile-process-item p,
  .mobile-process-note {
    margin: 0;
    color: var(--template-copy-soft);
    font-size: 16px;
    line-height: 1.42;
  }

  .mobile-process-note {
    margin-top: 26px;
    font-weight: 500;
  }

  .mobile-reflow-art {
    width: 100%;
    margin-top: clamp(96px, 18svh, 160px);
    overflow: hidden;
  }

  .mobile-reflow-art.is-stacked-graphic {
    margin-top: clamp(34px, 8svh, 72px);
  }

  .mobile-reflow-art svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-summary-list {
    display: grid;
    gap: 22px;
    margin-top: 36px;
  }

  .mobile-summary-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .mobile-summary-index {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--template-copy-accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .mobile-summary-index.is-gold {
    background: var(--ebio-gold, #d5a93a);
  }

  .mobile-summary-index.is-dark-text {
    color: #020807;
  }

  .mobile-summary-item p {
    margin: 0;
    color: var(--template-copy-soft);
    font-size: 16px;
    line-height: 1.42;
  }

  .visual {
    min-height: 0;
  }

  .visual svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .slide.has-mobile-sequence-pan.active > .visual,
  .strategy-slide.active > .visual {
    display: none;
  }

  .mobile-sequence-pan,
  .strategy-slide.active > .strategy-mobile-pan {
    --sequence-strip-width: clamp(980px, 290vw, 1180px);
    --sequence-pan-viewport: min(calc(100vw - 36px), 760px);
    --sequence-pan-duration: 24s;
    --sequence-height: clamp(230px, 32svh, 300px);
    --sequence-traveler-size: 32px;
    --sequence-traveler-top: 48%;
    --sequence-traveler-start: 39%;
    --sequence-traveler-bg: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 10%, #6df2ff 24%, #1f6dff 58%, #0b31cc 100%);
    --sequence-traveler-shadow: 0 0 22px rgba(0, 87, 255, 0.28);
    display: block;
    flex: 0 0 auto;
    width: min(100%, 760px);
    max-width: 760px;
    height: var(--sequence-height);
    min-height: var(--sequence-height);
    margin: clamp(18px, 4svh, 34px) auto 0;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }

  .mobile-sequence-pan.is-ebio {
    --sequence-height: clamp(210px, 28svh, 250px);
    --sequence-traveler-size: 30px;
    --sequence-traveler-bg: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 10%, #72efaa 26%, #19a974 62%, #07623f 100%);
    --sequence-traveler-shadow: 0 0 22px rgba(114, 239, 170, 0.32);
    margin-top: clamp(14px, 3svh, 26px);
  }

  .mobile-sequence-pan svg,
  .strategy-slide.active > .strategy-mobile-pan svg {
    display: block;
    width: var(--sequence-strip-width);
    max-width: none;
    height: 100%;
    min-height: 0;
    animation: mobile-sequence-pan-shift var(--sequence-pan-duration) ease-in-out infinite;
    will-change: transform;
  }

  .mobile-sequence-pan .sequence-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: mobile-sequence-node-breathe 8.4s ease-in-out infinite;
    will-change: transform, opacity;
  }

  .mobile-sequence-pan .sequence-node:nth-of-type(2n) {
    animation-delay: -1.1s;
  }

  .mobile-sequence-pan .sequence-node:nth-of-type(3n) {
    animation-delay: -2.2s;
  }

  .mobile-sequence-pan .mobile-sequence-traveler,
  .strategy-slide.active > .strategy-mobile-pan .strategy-traveler {
    position: absolute;
    top: var(--sequence-traveler-top);
    left: var(--sequence-traveler-start);
    z-index: 2;
    display: block;
    width: var(--sequence-traveler-size);
    height: var(--sequence-traveler-size);
    border-radius: 50%;
    background: var(--sequence-traveler-bg);
    box-shadow: var(--sequence-traveler-shadow);
    transform: translate(-50%, -50%);
    animation: mobile-sequence-traveler var(--sequence-pan-duration) ease-in-out infinite;
    will-change: left, opacity, transform;
  }

  @keyframes mobile-sequence-pan-shift {
    0% {
      transform: translateX(0);
    }

    70%,
    82% {
      transform: translateX(calc(var(--sequence-pan-viewport) - var(--sequence-strip-width)));
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes mobile-sequence-node-breathe {
    0%,
    100% {
      opacity: 0.94;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.018);
    }
  }

  @keyframes mobile-sequence-traveler {
    0% {
      left: var(--sequence-traveler-start);
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    26% {
      left: 58%;
      opacity: 1;
      transform: translate(-50%, -50%) scale(0.92);
    }

    50% {
      left: 46%;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.08);
    }

    74% {
      left: 72%;
      opacity: 1;
      transform: translate(-50%, -50%) scale(0.96);
    }

    88% {
      left: 82%;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    100% {
      left: calc(100% + 38px);
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.88);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-sequence-pan svg,
    .mobile-sequence-pan .mobile-sequence-traveler,
    .mobile-sequence-pan .sequence-node,
    .strategy-slide.active > .strategy-mobile-pan svg,
    .strategy-slide.active > .strategy-mobile-pan .strategy-traveler {
      animation: none;
    }

    .mobile-sequence-pan svg,
    .strategy-slide.active > .strategy-mobile-pan svg {
      transform: translateX(0);
    }

    .mobile-sequence-pan .mobile-sequence-traveler,
    .strategy-slide.active > .strategy-mobile-pan .strategy-traveler {
      left: var(--sequence-traveler-start);
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  .title-orbit,
  .title-orbit svg {
    min-height: 0;
  }

  .title-orbit svg {
    height: auto;
  }

  .slide.has-mobile-copy.active > .mobile-slide-copy {
    display: block;
    padding-top: 2px;
    color: var(--template-copy-ink);
  }

  .mobile-slide-copy .label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--template-copy-accent);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-slide-copy .label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
  }

  .mobile-slide-copy h2 {
    margin: 0;
    color: var(--template-copy-ink);
    font-size: clamp(28px, 8vw, 44px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: 0;
  }

  .mobile-slide-copy p {
    margin: 14px 0 0;
    color: var(--template-copy-soft);
    font-size: clamp(16px, 4.6vw, 20px);
    font-weight: 650;
    line-height: 1.34;
  }

  .source {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: end;
    margin-top: auto;
    padding: 14px 0 0;
    border-top: 1px solid var(--template-copy-line);
    transform: none;
  }

  .source span:first-child {
    max-width: none;
  }

  .counter,
  .hint,
  .control-prompt {
    display: none;
  }

  .controls {
    position: fixed;
    top: auto;
    right: 14px;
    bottom: var(--template-control-bottom);
    left: auto;
    z-index: 30;
    width: 104px;
    transform: none;
  }

  body.summary-active .controls {
    top: auto;
    right: 14px;
    bottom: var(--template-control-bottom);
  }

  .summary-scroll-cue {
    position: static;
    display: none;
    width: fit-content;
    margin: 2px auto 0;
    transform: none;
  }

  body.summary-active .summary-scroll-cue {
    display: inline-flex;
  }

  .progress {
    position: fixed;
  }

  .site-landing {
    overflow-x: hidden;
  }

  .landing-hero,
  .landing-section,
  .landing-closing {
    min-height: auto;
    padding: 72px 20px;
  }

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

  .landing-actions {
    width: min(100%, 520px);
    margin-right: auto;
    margin-left: auto;
    align-items: stretch;
  }

  .landing-button,
  .landing-access-wrap,
  .landing-access-form {
    width: 100%;
  }

  .landing-access-form input {
    flex: 1;
    min-width: 0;
  }

  .landing-card-grid,
  .landing-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-card {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .slide.active,
  .slide.title-slide.active,
  .slide.model-slide.active,
  .slide.slide-framed.active {
    padding-right: 18px;
    padding-left: 18px;
  }

  .mobile-slide-copy h2 {
    font-size: clamp(27px, 8.6vw, 38px);
  }

  .landing-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .source span:first-child {
    max-width: calc(100% - 118px);
  }
}