/* Compact phone landscape layout.
 *
 * Loaded only for short landscape viewports up to 1024px wide. Viewport geometry
 * is the reliable signal here: iOS Simulator can expose the Mac's pointer
 * capabilities, while modern Pro Max phones can be wider than the site's 860px
 * desktop breakpoint when rotated.
 *
 * Wide landscape phones also match desktop.css (≥861px), so every override below
 * must tie or beat its specificity — this file links after desktop.css, so equal
 * specificity is enough. Nothing here can reach portrait mobile or desktop. */

.site-header {
  padding-inline:
    max(24px, env(safe-area-inset-left))
    max(24px, env(safe-area-inset-right));
}

#hero-story,
.story #hero-story {
  display: flex;
  align-items: center;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

#hero-story .hero-copy {
  order: 1;
  position: relative;
  top: 10px;
  width: 48%;
  /* Header logo ends at ~44px. Keep the title's box below 76px even when
   * Safari's landscape chrome changes the usable viewport proportions. */
  padding: 8px 0 0;
  text-align: left;
}

#hero-story .hero-copy h1 {
  font-size: clamp(32px, 4.8vw, 46px);
  text-wrap: initial;
}

#hero-story .hero-copy .hero-body {
  font-size: clamp(13px, 2vw, 17px);
  margin-top: 8px;
}

#hero-story .hero-copy .form-group,
#hero-story .hero-copy .form-error {
  margin-left: 0;
}

#hero-story .hero-copy .form-group input {
  padding-inline: 12px;
}

#hero-story .hero-copy .form-group button {
  padding-inline: clamp(12px, 2vw, 18px);
}

/* Static/reduced-motion fallback: the canvas remains in normal flow, so place
 * it beside the copy explicitly. In story mode the base CSS makes it absolute
 * and full-bleed; the camera then composes the objects into this same right
 * column without clipping them. */
#hero-story,
.story #hero-story {
  flex-wrap: wrap;
}

#hero-story > #scene-canvas {
  order: 2;
  width: 52%;
  height: 100svh;
}

#hero-story > .intro {
  order: 3;
  width: 100%;
}

.story #hero-story {
  flex-wrap: nowrap;
}

.story #hero-story > #scene-canvas {
  width: 100%;
}

.reddot-m {
  display: none;
}

.reddot {
  display: block;
  position: absolute;
  right: max(0px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  top: auto;
  z-index: 4;
  width: 46px;
  height: auto;
  pointer-events: none;
}

html:not(.story) .reddot {
  top: calc(100svh - 80px);
  bottom: auto;
}

/* Reduced-motion phone landscape keeps the desktop-like two-column hero.
 * The animated landscape branch remains governed by the .story rules above. */
@media (prefers-reduced-motion: reduce) {
  html:not(.story) #hero-story {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 100svh;
  }

  html:not(.story) #hero-story > .hero-copy {
    order: 1;
    width: 48%;
    padding: 8px 0 0;
    text-align: left;
  }

  html:not(.story) #hero-story > .hero-copy h1 {
    font-size: clamp(28px, 4.2vw, 40px);
  }

  html:not(.story) #hero-story > .hero-copy .hero-body {
    font-size: clamp(13px, 2vw, 17px);
    margin-top: 8px;
  }

  html:not(.story) #hero-story > #scene-canvas {
    order: 2;
    width: 52%;
    height: 100svh;
  }

  html:not(.story) #hero-story > .intro {
    order: 3;
    width: 100%;
  }

  html:not(.story) .reddot {
    top: calc(100svh - 80px);
    bottom: auto;
    width: 46px;
  }

}

.story.kb-open .reddot {
  display: none;
}

/* Landscape keyboard mode. iOS shrinks and pans the visual viewport while the
 * layout viewport (and the pinned hero) stays full-size. Moving only the form
 * with --kb-lift makes it cross the heading, so the focused state instead owns
 * the complete copy group and centres heading + form as one unit in the visible
 * band. The logo keeps its normal size and position. */
.story.kb-open #scene-canvas,
.story.kb-open .reddot {
  opacity: 0;
}

.story.kb-open #hero-story .hero-copy {
  position: fixed;
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  top: calc(var(--kb-top, 0px) + 8px);
  width: auto;
  height: max(112px, calc(var(--kb-height, 100svh) - 12px));
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: none !important;
  z-index: 19;
}

.story.kb-open #hero-story .hero-copy h1 {
  font-size: clamp(26px, 4.2vw, 36px);
  line-height: 0.95;
  max-width: 480px;
}

.story.kb-open #hero-story .hero-copy .tagline {
  display: none;
}

.story.kb-open #hero-story .hero-copy .form-group {
  width: min(400px, 100%);
  margin: 12px auto 0;
  transform: none !important;
}

.story.kb-open #hero-story .hero-copy .form-error {
  width: min(400px, 100%);
}

/* ---- how: 2 cards per row on the compact landscape grid ----
 * The mobile column list and the desktop sideways row both cede to a wrapping
 * 2-up grid, so the section reads without horizontal swiping on a short
 * landscape viewport. Cards keep the authored mobile look — only the sizing,
 * alignment and row behaviour change. The `.story .how-scroll` and
 * `html:not(.story) .how-scroll` desktop rules are overridden at equal
 * specificity (this file links after desktop.css). */
.how .why-title {
  padding-inline:
    max(24px, env(safe-area-inset-left))
    max(24px, env(safe-area-inset-right));
  /* Clear the fixed 44px-tall header on very short landscape screens. */
  padding-top: 64px;
}

.how-scroll {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  width: auto;
  padding-inline:
    max(24px, env(safe-area-inset-left))
    max(24px, env(safe-area-inset-right));
  overscroll-behavior-inline: auto;
}

.story .how-scroll,
html:not(.story) .how-scroll {
  width: auto;
  overflow: visible;
}

html:not(.story) .how-scroll {
  overflow-x: visible;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto;
  cursor: default;
}

.how-card {
  flex: 0 0 calc(50% - 8px); /* two cards per row, 16px gap, fills the content box */
  min-width: 0;
  width: auto;
  min-height: 300px;
  padding: 50px 22px 30px;
  justify-content: flex-start; /* desktop.css vertically centres the row; landscape stays top-aligned like mobile */
  text-align: center;
  align-items: center;
}

/* The chapter can land with its first pixel at the viewport top. Keep the
 * closing form below the fixed header rather than underneath its logo/CTA. */
.join-cta {
  padding-top: 64px;
}