/* Phones read as five ordinary chapters. Captions and graphics never overlap. */
.stack-chapter-canvas { display: none; }

@media (max-width: 720px) {
  body.landing { overflow-x: clip; }
  .landing .landing-main { padding-inline: 1.35rem; }
  body.landing .hero,
  body.landing:not(.discovery-ready) .hero {
    height: auto;
    min-height: 0;
    margin: 0;
    pointer-events: auto;
  }
  body.landing .hero-pin,
  body.landing:not(.discovery-ready) .hero-pin {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2.75rem 0 2rem;
    transform: none;
    align-items: stretch;
    overflow: visible;
    will-change: auto;
    opacity: 1;
  }
  .landing .hero-final {
    order: 0;
    padding: 0;
    max-width: 38rem;
    text-align: left;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .landing .hero-title {
    font-size: clamp(2.15rem, 9.1vw, 3.6rem);
    line-height: 1.08;
    max-width: 18ch;
  }
  .landing .hero-sub {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
    margin: 1.25rem 0 0;
    max-width: 38ch;
  }
  .landing .hero-action { margin-top: 1.1rem; }
  .landing .hero-canvas {
    display: none;
  }
  .landing .stack,
  .landing .stack.stack-static {
    height: auto;
    margin: 0;
  }
  .landing .stack .stack-pin { display: none; }
  .landing .stack .stack-copy-flow {
    position: static;
    inset: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    pointer-events: auto;
  }
  .landing .stack .stack-copy-content {
    position: relative;
    inset: auto !important;
    width: 100%;
    max-width: none;
    padding: 1.75rem 0 1.5rem;
    margin: 0;
    border-top: 1px solid var(--border);
    opacity: 1;
    transform: none;
  }
  .landing .stack-name {
    margin: 0 0 0.65rem;
    padding: 0;
    border: 0;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
  .landing .stack-caption {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 36ch;
    min-height: 0;
    margin: 0;
  }
  .landing .stack-chapter-canvas {
    display: block;
    width: 100%;
    height: clamp(265px, 85vw, 350px);
    margin-top: 1rem;
    contain: layout paint;
  }
  .landing .stack [data-stage="0"] .stack-chapter-canvas {
    height: clamp(330px, 103vw, 430px);
  }
  .landing .stack [data-stage="2"] .stack-chapter-canvas {
    height: clamp(305px, 96vw, 395px);
  }
  .landing .stack [data-stage="1"] .stack-chapter-canvas {
    height: clamp(225px, 65vw, 285px);
  }
  .landing .stack [data-stage="4"] .stack-chapter-canvas {
    height: clamp(250px, 78vw, 320px);
  }
  .landing .hero-word,
  .landing .hero-char,
  .landing .stack-word {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  .landing .section.proof-showcase { padding-top: 2rem; }
  .landing [data-reveal] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .landing .hero { min-height: 0 !important; }
}