/* =========================================================
   KweliAI — style.css
   Philosophy: calm, cinematic, philosophical
   Palette: deep blue · white · soft cyan
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --deep-blue:   #070e1c;
  --mid-blue:    #0f2342;
  --cyan:        #38bdf8;
  --cyan-dim:    #7dd3fc;
  --white:       #eef4ff;
  --white-dim:   rgba(238, 244, 255, 0.55);
  --white-faint: rgba(238, 244, 255, 0.18);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Jost', system-ui, sans-serif;

  --slide-speed:  0.9s;
  --ease-cinema:  cubic-bezier(0.77, 0, 0.175, 1);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--deep-blue);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   TOP NAV
---------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 3rem;
  background: linear-gradient(to bottom, rgba(7,14,28,0.8) 0%, transparent 100%);
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 36px;          /* comfortable nav height */
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(1) invert(0);   /* natural colour by default */
  transition: opacity 0.25s ease;
}

.logo:hover .logo-img {
  opacity: 0.75;
}

.slide-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--white-dim);
}

/* ----------------------------------------------------------
   SLIDE TRACK
---------------------------------------------------------- */
.track-wrapper { position: fixed; inset: 0; overflow: hidden; }

.track {
  display: flex;
  width: 400vw;
  height: 100vh;
  transition: transform var(--slide-speed) var(--ease-cinema);
  will-change: transform;
}

.track[data-current="0"] { transform: translateX(0); }
.track[data-current="1"] { transform: translateX(-100vw); }
.track[data-current="2"] { transform: translateX(-200vw); }
.track[data-current="3"] { transform: translateX(-300vw); }

/* ----------------------------------------------------------
   SHARED SLIDE
---------------------------------------------------------- */
.slide {
  position: relative;
  width: 100vw; height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.slide-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.85);
}

.slide-overlay {
  position: absolute; inset: 0;
  background: rgba(5, 10, 22, 0.72);
}

.slide-content { position: relative; z-index: 2; }

/* ----------------------------------------------------------
   GLOBAL NAV BAR
   Single fixed bar outside the slide track.
   JS controls which buttons are visible per slide.
---------------------------------------------------------- */
.global-nav {
  position: fixed;
  bottom: 2.4rem;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  pointer-events: none;   /* bar itself is invisible — buttons handle clicks */
}

.nav-btn {
  pointer-events: all;
  background: transparent;
  border: 1px solid var(--white-faint);
  color: var(--white-dim);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.65rem 1.6rem;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.nav-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(56, 189, 248, 0.06);
}

.btn-arrow { display: inline-block; transition: transform 0.3s; }
.next-btn:hover .btn-arrow { transform: translateX(4px); }
.prev-btn:hover .btn-arrow { transform: translateX(-4px); }

/* Next always hugs the right edge — even when Prev is hidden */
.next-btn { margin-left: auto; }

/* ── Slide 3 (KweliAI): Prev sits over the white video panel ──
   Use body[data-slide] set by JS so any sibling can be targeted.  */
body[data-slide="2"] .prev-btn {
  border-color: #0a1a36;
  color: #0a1a36;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}
body[data-slide="2"] .prev-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(255, 255, 255, 0.70);
}

.hidden { display: none !important; }

/* ----------------------------------------------------------
   SLIDE 1 — CINEMATIC OPENING
   Canvas fills everything. Text anchored upper-left.
---------------------------------------------------------- */
.slide-1 { background: #020b1a; }

/* Canvas sits at z-index 0 — everything else layers above */
.water-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}

/* Multi-stop overlay:
   heavy at top (keeps logo legible)
   light in the middle (scene breathes through)
   medium at bottom (grounds the frame)                    */
.s1-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(2,8,20,0.80)  0%,
    rgba(2,8,20,0.20)  28%,
    rgba(2,8,20,0.08)  55%,
    rgba(2,8,20,0.55)  100%
  );
  pointer-events: none;
}

/* ── Text container — upper-left, leaves right side open for scene ── */
.s1-text {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  padding: 5.5rem 4vw 4rem 5vw;
  width: 48%;          /* left 48% — water scene visible on the right */
  max-width: 560px;    /* hard cap so it never grows too wide on large screens */
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
}

/* ── Individual lines ── */
.s1-line {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  white-space: pre-wrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  text-shadow:
    0 1px 12px rgba(2,8,20,0.98),
    0 0  28px rgba(2,8,20,0.75);
}

.s1-line.s1-visible,
.s1-line.s1-done {
  opacity: 1;
  transform: translateY(0);
}

/* ── Type scale — desktop sizes kept modest so scene shows ── */
.s1-sm  { font-size: clamp(0.65rem, 0.75vw, 0.82rem); letter-spacing: 0.10em; }
.s1-md  { font-size: clamp(0.9rem,  1.1vw, 1.15rem);  }
.s1-lg  { font-size: clamp(1.1rem,  1.6vw, 1.55rem);  }

/* XL — closing line, largest but still restrained on desktop */
.s1-xl {
  font-size: clamp(1.3rem, 2.0vw, 2.0rem);
  margin-top: 0.5rem;
  line-height: 1.1;
}

/* ── Modifiers ── */
.s1-bold   { font-weight: 600; letter-spacing: -0.015em; }
.s1-muted  { color: rgba(238,244,255,0.58); }
.s1-italic { font-style: italic; }
.s1-cyan   { color: var(--cyan-dim); }

/* ── Cursor ── */
.s1-cursor {
  font-family: var(--font-sans);
  font-size: 0.9em;
  color: var(--cyan);
  animation: blink 0.85s step-end infinite;
  display: inline;
  position: relative;
  pointer-events: none;
  margin-left: 1px;
  vertical-align: baseline;
  z-index: 3;
  opacity: 0;
}

@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

/* ── Mobile — already looks good, keep sizes close to current ── */
@media (max-width: 768px) {
  .s1-text { width: 92%; max-width: none; padding: 5rem 5vw 3rem 5vw; }
  .s1-sm   { font-size: clamp(0.65rem, 2.8vw, 0.82rem); }
  .s1-md   { font-size: clamp(0.85rem, 3.5vw, 1.05rem); }
  .s1-lg   { font-size: clamp(1.05rem, 4.5vw, 1.45rem); }
  .s1-xl   { font-size: clamp(1.3rem,  6.0vw, 2.0rem);  }
  .global-nav { bottom: 4.4rem; padding: 0 1.4rem; }
}

/* ----------------------------------------------------------
   SLIDE 2 — STORY
   Left: 2/3 story text  |  Right: 1/3 video
---------------------------------------------------------- */
.slide-2 {
  background: var(--deep-blue);
  align-items: stretch;
}

/* ---- LEFT COLUMN — 2/3 width, generous breathing room ---- */
.s2-left {
  position: relative;
  z-index: 2;
  width: 66.666%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 5.5rem 5vw 5rem 7vw;  /* generous left & right padding */
  overflow: hidden;
}

/* Thin right rule at the 2/3 mark */
.s2-left::after {
  content: '';
  position: absolute;
  right: 0; top: 8%; height: 84%; width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    var(--white-faint) 25%,
    var(--white-faint) 75%,
    transparent);
}

/* Story text — space-between spreads 5 beats across full height */
.story-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 580px;              /* comfortable reading line length */
  height: 100%;
  padding: 0;
}

/* Each beat: label + body with generous gap */
.story-beat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                   /* more breathing between label and text */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.story-beat.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cyan chapter label */
.beat-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.8;
}

/* Beat body — larger, more legible */
.story-line {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.25rem);   /* noticeably bigger */
  font-weight: 300;
  line-height: 1.8;                           /* more open leading */
  color: rgba(238, 244, 255, 0.82);           /* brighter */
}
.story-line em     { font-style: italic; color: var(--white); }
.story-line strong { font-weight: 400; color: var(--cyan-dim); }

/* Tagline — brighter, italic emphasis */
.story-tagline {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
  color: var(--white) !important;
  line-height: 1.85;
}

/* ---- RIGHT COLUMN — 1/3 width, video ---- */
.s2-right {
  position: relative;
  z-index: 2;
  width: 33.333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #02060f;           /* near-black — video sits in darkness */
}

/* Video wrapper fills full column */
.s2-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* contain = whole video visible, no crop */
.s2-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Glow frame over the video */
.video-frame {
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(56, 189, 248, 0.1);
  box-shadow: inset 4px 0 40px rgba(4, 9, 20, 0.4);
  pointer-events: none;
}

/* ----------------------------------------------------------
   SLIDE 3 — WHAT IS KWELIAIT
   Left: bot video  |  Right: explanation text
---------------------------------------------------------- */
.slide-3 {
  background: var(--deep-blue);
  align-items: stretch;
}

/* ---- LEFT: video ---- */
.s3-left {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #020814;
}

.s3-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.s3-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- RIGHT: explanation ---- */
.s3-right {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Thin left rule */
.s3-right::before {
  content: '';
  position: absolute;
  left: 0; top: 8%; height: 84%; width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    var(--white-faint) 30%,
    var(--white-faint) 70%,
    transparent);
}

.s3-explain {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 5.5rem 6vw 5rem 4vw;
}

/* Eyebrow label */
.explain-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.75;
  margin-bottom: 0.2rem;
}

/* Big title */
.explain-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

/* Each explanation block */
.explain-block {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.explain-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.explain-block p {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(238, 244, 255, 0.72);
}
.explain-block p strong { font-weight: 400; color: var(--cyan-dim); }
.explain-block p em     { font-style: italic; color: var(--white); }

/* "No assumptions. Only signals." — bolder beat */
.explain-signal {
  font-size: clamp(0.92rem, 1.3vw, 1.1rem) !important;
  color: var(--white) !important;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Closing line */
.explain-closing {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem) !important;
  color: var(--white) !important;
  line-height: 1.8 !important;
}

/* ----------------------------------------------------------
   SLIDE 4 — WAITLIST
---------------------------------------------------------- */
.slide-4 {
  background-color: #041020;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animated wave canvas — fills the slide */
.s4-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}

.s4-overlay {
  background: rgba(3, 8, 22, 0.48);
}

/* Content: absolutely centred both axes */
.s4-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.s4-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6rem; letter-spacing: 0.38em;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 1.2rem; opacity: 0.85;
}

.s4-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300; letter-spacing: 0.04em;
  color: var(--white); margin-bottom: 1rem; line-height: 1.1;
}

.s4-sub {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  font-style: italic; color: var(--white-dim);
  margin-bottom: 2.8rem; line-height: 1.8;
}

.input-row { display: flex; width: 100%; max-width: 420px; }

.email-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--white-faint); border-right: none;
  color: var(--white);
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 300;
  padding: 0.85rem 1.2rem; outline: none; letter-spacing: 0.05em;
  transition: border-color 0.3s, background 0.3s;
}
.email-input::placeholder { color: rgba(238,244,255,0.25); }
.email-input:focus { border-color: var(--cyan); background: rgba(56,189,248,0.05); }

.join-btn {
  background: var(--cyan); color: var(--deep-blue);
  border: 1px solid var(--cyan);
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.85rem 1.8rem; cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.join-btn:hover { background: var(--deep-blue); color: var(--cyan); }

.input-error {
  margin-top: 0.7rem; font-size: 0.72rem;
  color: #f87171; letter-spacing: 0.05em;
}

.waitlist-success {
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  animation: fadeInUp 0.7s ease both;
}

.success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--cyan);
  animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

.success-msg {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 300; color: var(--white);
}

.success-sub {
  font-size: 0.68rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--white-dim);
  margin-top: 0.5rem;
}

.x-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 0.4rem;
  background: transparent; border: 1px solid var(--white-faint);
  color: var(--white-dim); text-decoration: none;
  font-family: var(--font-sans); font-size: 0.72rem;
  letter-spacing: 0.2em; padding: 0.7rem 1.6rem;
  transition: border-color 0.3s, color 0.3s;
}
.x-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* ----------------------------------------------------------
   PROGRESS DOTS
---------------------------------------------------------- */
.progress-dots {
  position: fixed; bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 100; display: flex; gap: 0.7rem; align-items: center;
}

.dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--white-faint); border: none;
  cursor: pointer; padding: 0;
  transition: background 0.35s, transform 0.35s, width 0.35s;
}
.dot.active { background: var(--cyan); width: 20px; border-radius: 3px; }
.dot:hover:not(.active) { background: var(--white-dim); transform: scale(1.3); }

/* ----------------------------------------------------------
   KEYFRAMES
---------------------------------------------------------- */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn     { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */
@media (max-width: 768px) {
  .topbar { padding: 1.2rem 1.5rem; }

  .lines-wrap { padding: 4.5rem 5vw 4.5rem 5vw; }

  .size-xl { font-size: clamp(1.8rem, 7.5vw, 3rem); }
  .size-lg { font-size: clamp(1.2rem, 5vw, 2rem); }
  .size-md { font-size: clamp(0.9rem, 3.5vw, 1.4rem); }
  .size-sm { font-size: clamp(0.65rem, 2.2vw, 0.85rem); }

  /* ── SLIDE 2 mobile ─────────────────────────────────────
     Layout (top → bottom):
       1. Text (story beats) — natural height, top padding clears logo
       2. Video (hourglass) — full viewport width, tall, no cropping
       3. Nav buttons sit fixed above dots — text padding clears them

     The entire slide scrolls vertically.
  ──────────────────────────────────────────────────────── */
  .slide-2 {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* TEXT: first — no order override needed (DOM order: s2-left then s2-right) */
  .s2-left {
    order: 1;                      /* explicit: text on top */
    width: 100%;
    height: auto;
    /* top: clear fixed logo bar  |  bottom: clear fixed nav + dots */
    padding: 5rem 6vw 2.5rem 6vw;
    overflow: visible;
    flex-shrink: 0;
  }

  .s2-left::after { display: none; }

  .story-text {
    height: auto;
    gap: 2rem;
    justify-content: flex-start;
    max-width: 100%;
  }

  .story-line { font-size: clamp(0.95rem, 3.8vw, 1.15rem); line-height: 1.8; }

  /* VIDEO: below text, full width, tall enough to feel cinematic */
  .s2-right {
    order: 2;                      /* explicit: video below text */
    width: 100%;
    /* No max-height — let it be as tall as the video aspect ratio needs */
    height: 100vw;                 /* square-ish on mobile — full width */
    min-height: 300px;
    max-height: 520px;
    background: #02060f;
    flex-shrink: 0;
    /* Extra bottom padding so last frame clears the fixed nav bar */
    margin-bottom: 7rem;
  }

  .s2-video-wrap {
    width: 100%;
    height: 100%;
  }

  /* Fill width, show whole video */
  .s2-video {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* whole hourglass visible */
  }

  /* ── SLIDE 3 mobile ─────────────────────────────────────
     Layout (top → bottom):
       1. Text/explanation — starts below nav bar
       2. Robot video — full width, navy blue container, no white bg
     Entire slide scrolls vertically.
  ──────────────────────────────────────────────────────── */
  /* ── SLIDE 3 mobile ─────────────────────────────────────
     Structure (top → bottom, fully scrollable):
       1. Video  — below topbar, white bg preserved inside navy frame
       2. Text   — below video, natural height, bottom clears nav
  ──────────────────────────────────────────────────────── */
  .slide-3 {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: stretch;
  }

  /* VIDEO: top (order 1) */
  .s3-left {
    order: 1;
    width: 100%;
    margin-top: 3.8rem;          /* clear fixed topbar */
    height: 86vw;
    min-height: 260px;
    max-height: 420px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Navy border-frame around the white video — 
       gives it a contained cinematic card look     */
    background: var(--deep-blue);
    padding: 0;                  /* no padding — video fills edge to edge */
  }

  .s3-video-wrap {
    width: 100%;
    height: 100%;
    /* Thin navy border so video card has clear edges */
    border-top: 3px solid var(--deep-blue);
    border-bottom: 3px solid var(--deep-blue);
    overflow: hidden;
    background: transparent;     /* let the video's own white bg show */
  }

  .s3-video {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* full robot visible, white bg intact */
    display: block;
    mix-blend-mode: normal;      /* NO multiply — keep original colours */
    background: transparent;
  }

  /* TEXT: below video (order 2) */
  .s3-right {
    order: 2;
    width: 100%;
    height: auto;
    overflow: visible;
    flex-shrink: 0;
  }

  .s3-right::before { display: none; }

  .s3-explain {
    height: auto;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 2rem 6vw 8rem 6vw;  /* 8rem bottom clears fixed nav + dots */
  }

  .explain-title { font-size: clamp(1.4rem, 6vw, 2rem); }

  .explain-block {
    opacity: 1;           /* always visible on mobile — no stagger */
    transform: none;
  }

  .explain-block p {
    font-size: clamp(0.9rem, 3.8vw, 1.08rem);
    line-height: 1.75;
  }

  /* ── SLIDE 4 mobile ── */
  .slide-4 {
    height: 100vh;          /* fixed viewport height — content centred inside */
    overflow: hidden;
  }

  .s4-content {
    height: 100%;
    justify-content: center;
    padding: 5rem 6vw 6rem;  /* top clears logo, bottom clears nav */
  }

  .s4-title { font-size: clamp(2rem, 8vw, 2.8rem); }

  .input-row {
    flex-direction: column;
    max-width: 360px;
    width: 100%;
    gap: 0;
  }

  .email-input {
    border-right: 1px solid var(--white-faint);
    border-bottom: none;
    width: 100%;
  }

  .join-btn {
    width: 100%;
    padding: 0.9rem;
    font-size: 0.75rem;
  }

  /* ── Mobile bottom chrome ──────────────────────────────
     Dots:    fixed at 1.2rem from bottom
     Nav bar: fixed at 4.4rem from bottom (clearly above dots)
  ──────────────────────────────────────────────────── */

  .progress-dots { bottom: 1.2rem; }

  .global-nav {
    bottom: 4.4rem;
    padding: 0 1.4rem;
  }

  .nav-btn {
    font-size: 0.6rem;
    padding: 0.52rem 1.1rem;
  }
}

@media (max-width: 480px) {
  .size-xl { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
  .lines-wrap { padding: 4rem 4vw 4rem 4vw; }
  /* s2-right inherits 100vw height from mobile rule above */
}

/* Allow slides 2 & 3 to scroll vertically on mobile.
   The track-wrapper must allow y overflow to pass through. */
@media (max-width: 768px) {
  .track-wrapper {
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* Slide 2 active */
  .track[data-current="1"] {
    overflow-y: auto;
    height: auto;
  }
  .track[data-current="1"] .slide-2 { position: relative; }

  /* Slide 3 active */
  .track[data-current="2"] {
    overflow-y: auto;
    height: auto;
  }
  .track[data-current="2"] .slide-3 { position: relative; }
}