/* =========================================================
   Neue Academy — Waitlist
   Coordinate system: 1rem = 16px-at-design (1920x1080 frame).
   Root font-size = min(100vw/120, 100vh/67.5) → frame fits.
   Animations are driven by GSAP (movement only, no opacity
   on the sliding layers). Smooth scroll via Lenis.
   ========================================================= */

:root {
  --blue: #1d74f6;
  --card: #f0f0f3;
  --frame-w: 120rem;
  --frame-h: 67.5rem;
  --cream: #f2eed8;
}

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

html { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); -webkit-text-size-adjust: 100%; background: #0a0a0a; }

/* Gentle page fade-in on land (over a black backdrop, JS-independent) */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* Anti-flicker: while the window is actively being resized, freeze all
   transitions/animations and drop the heavy blur filters so the browser
   isn't re-rasterizing transitioned text + filters on every resize tick. */
body.is-resizing *,
body.is-resizing *::before,
body.is-resizing *::after { transition: none !important; animation: none !important; }
body.is-resizing .col-glow,
body.is-resizing .video-frame { filter: none !important; }

body {
  background: #0a0a0a;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: pageIn .9s ease both;
  /* No text can be selected / highlighted */
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

/* the email field is the one place selection / editing must work */
input, textarea { -webkit-user-select: text; user-select: text; }

/* Images & SVGs can never be dragged */
img, svg, .video-el {
  -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none;
  -webkit-touch-callout: none;
}

#scroll-spacer { height: 320vh; width: 1px; pointer-events: none; }
img { display: block; }

/* ===================== Background layer ===================== */
/* Full-bleed: use viewport units so the canvas also covers the scrollbar gutter */
#bg-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; background: #0a0a0a; }
.bg-image {
  position: absolute; inset: 0;
  background: url("./assets/waitlist/BG.png") center center / cover no-repeat;
}
/* Unicorn Studio shader renders into this — full-bleed, above the poster fallback */
.bg-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; overflow: hidden; transition: opacity .8s ease, filter .6s ease; will-change: filter; }
.bg-canvas.ready { opacity: 1; }
/* Force the Unicorn Studio render to fully cover the viewport (the scene is 1:1,
   so without this it letterboxes and leaves black padding on a wide screen). */
.bg-canvas > div { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.bg-canvas canvas {
  display: block;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  /* Full-bleed comes from the scene's image being sized to cover (waffle.json),
     so no scale hack is needed — keep native scale for best quality. */
  transform: translate(-50%, -50%) !important;
  width: 100% !important; height: 100% !important;
  min-width: 100% !important; min-height: 100% !important;
  object-fit: cover !important;
}
/* Waitlist submit celebration: a short rainbow colour shuffle, then settle back to default */
@keyframes bgRainbow {
  0%   { filter: hue-rotate(0deg)   saturate(1)    brightness(1);    transform: scale(1); }
  18%  { filter: hue-rotate(70deg)  saturate(1.55) brightness(1.18); transform: scale(1.012); }
  40%  { filter: hue-rotate(170deg) saturate(1.65) brightness(1.12); transform: scale(1.02); }
  62%  { filter: hue-rotate(260deg) saturate(1.5)  brightness(1.16); transform: scale(1.012); }
  82%  { filter: hue-rotate(330deg) saturate(1.3)  brightness(1.08); transform: scale(1.004); }
  100% { filter: hue-rotate(360deg) saturate(1)    brightness(1);    transform: scale(1); }
}
.bg-canvas.celebrate { animation: bgRainbow 1.5s ease-in-out both; }
/* Hidden MediaPipe input — present in the DOM, never visible */
#mp-video { position: fixed; width: 2px; height: 2px; top: -10px; left: -10px; opacity: 0; pointer-events: none; }
.bg-radial { position: absolute; z-index: 2; border-radius: 50%; background: #000; filter: blur(120px); }
.bg-radial-center { left: 24%; top: 6%; width: 52%; height: 88%; opacity: .55; filter: blur(180px); }
.bg-bottom-gradient {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
}

/* ===================== Top bar (anchored top:0) ===================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 6.6rem; z-index: 40;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.logo { position: absolute; left: 4.0625rem; top: 3.05rem; width: 8.5rem; will-change: transform; }
.logo img { width: 100%; }

.flexbox {
  position: absolute; left: 41.625rem; top: 3.57rem;
  width: 41.375rem; height: 2.103rem;
  display: flex; justify-content: space-between; align-items: center;
  will-change: transform;
}
.feature { display: flex; align-items: center; gap: .85rem; }
.feature-icon { width: 2.103rem; height: 2.103rem; }
.feature-label { font-size: .961rem; font-weight: 500; letter-spacing: -0.03em; color: #fff; white-space: nowrap; }

/* ===================== Frame (centered) ===================== */
.frame {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: var(--frame-w); height: var(--frame-h);
  z-index: 10; pointer-events: none;
  backface-visibility: hidden;
}
.frame > * { pointer-events: auto; }

/* ===================== Scrolling columns ===================== */
.col { position: absolute; top: 0; height: var(--frame-h); width: 40rem; overflow: visible; will-change: transform; }
.col-left { left: 3.5625rem; }
.col-right { right: 7rem; width: 26.5rem; }
.col-track { will-change: transform; transform: translateZ(0); }
.col-section { height: var(--frame-h); display: flex; align-items: center; position: relative; }

/* Radial black glow attached behind the text — lives inside the track so it scrolls with it */
.col-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 42rem; height: 34rem; top: 50%; transform: translateY(-50%);
  /* ~50% lighter than before — much less visible while scrolling */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.34) 32%, rgba(0,0,0,0) 70%);
  filter: blur(20px);
}
.col-glow-left { left: -8rem; }
.col-glow-right { right: -8rem; }

.left-inner { display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; width: 31.25rem; position: relative; }
.eyebrow { height: 1.9375rem; }
.eyebrow img { height: 100%; width: auto; }
.h1 { font-size: 2.926rem; line-height: 1.04; font-weight: 500; letter-spacing: -0.03em; }
.h1 .dim { color: rgba(255,255,255,0.8); }
.h1 .bright { color: #fff; }
.faq-heading { font-size: 3.6rem; line-height: 1.0; letter-spacing: -0.035em; }

.right-inner { width: 21.9375rem; margin-left: auto; position: relative; }
.right-text { font-size: 1.125rem; line-height: 1.33; font-weight: 500; letter-spacing: -0.02em; }
.right-text .bright { color: rgba(255,255,255,0.92); }
.right-text .dim { color: rgba(255,255,255,0.6); }

/* ===================== FAQ accordion (right column, section 2) ===================== */
.faq-inner { width: 26rem; margin-left: auto; position: relative; }
.faq { width: 100%; }
.faq-item { position: relative; }
.faq-head {
  display: flex; align-items: flex-start; gap: .625rem; width: 100%;
  background: none; border: none; padding: 1.1rem 0 .85rem; cursor: pointer; text-align: left;
}
.faq-item:first-child .faq-head { padding-top: 0; }
.faq-dot { width: 1.016rem; height: 1.016rem; margin-top: .1rem; flex: none; }
.faq-q {
  font-family: "Inter", system-ui, sans-serif;
  color: #fff; font-size: 1.283rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em;
}
.faq-q u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: from-font; }
/* Dashed subdivider under every question */
.faq-line { height: 0; width: 100%; border: none; border-top: 1px dashed rgba(255,255,255,0.32); }
.faq-a-wrap {
  display: grid; grid-template-rows: 0fr; margin-left: 1.64rem;
  transition: grid-template-rows .55s cubic-bezier(0.16,1,0.3,1);
}
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; }
.faq-a p {
  font-family: "Inter", system-ui, sans-serif;
  color: rgba(255,255,255,0.6); font-size: 1.07rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em;
  padding: 1rem 0 .2rem;
}

/* ===================== Waitlist card ===================== */
.waitlist { position: absolute; left: 42.6875rem; top: 11.6875rem; width: 34.637rem; height: 44.125rem; will-change: transform; }
.waitlist-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wl-head { position: absolute; left: 1.4375rem; top: 2.1875rem; width: 24.4375rem; }
.slogan { display: flex; align-items: center; gap: .75rem; height: 3.875rem; }
.slogan-dot { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #000; flex: none; }
.slogan-text { color: #000; font-size: 1.125rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.wl-title-group { margin-top: 3.125rem; }
.be-first { color: rgba(0,0,0,0.7); font-size: 1.196rem; font-weight: 500; letter-spacing: -0.04em; }
.join-title { color: #000; font-size: 3.5rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; margin-top: .19rem; }
.powered { position: absolute; left: 27.31rem; top: 2.1875rem; width: 4.94rem; }
.powered img { width: 100%; }
.wl-body { position: absolute; left: 1.4375rem; top: 18.06rem; width: 30.5625rem; }
.wl-copy { width: 24.6875rem; }

/* Success state: form & copy fade out, confirmation fades in */
.wl-success[hidden] { display: none; }
.wl-success { width: 27.5rem; opacity: 0; transform: translateY(.5rem); animation: wlSuccessIn .55s ease .05s forwards; }
@keyframes wlSuccessIn { to { opacity: 1; transform: translateY(0); } }
.wl-success-title { color: #000; font-size: 3.5rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; }
.wl-success-sub { margin-top: .7rem; color: #151515; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.32; }
.waitlist.wl-done .wl-copy, .waitlist.wl-done .wl-form { display: none; }
/* On success, the "Be first in / Join the waitlist" heading is replaced by the
   confirmation message (the slogan up top stays). */
.waitlist.wl-done .wl-title-group { display: none; }
.wl-disclaimer { color: #151515; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.wl-limited { color: #151515; font-size: .8125rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 1.375rem; }
.wl-limited u { text-decoration: underline; }
.wl-form { margin-top: 2.5rem; }
.form-row { display: flex; gap: .625rem; height: 4rem; }
.input-field {
  width: 23.5rem; height: 3.875rem; border-radius: .625rem; background: #fff;
  display: flex; align-items: center; padding: 0 .75rem 0 1.25rem;
  border: 1.5px solid #6a80ff; box-shadow: inset 0 0 0 1px rgba(86,92,202,0.25);
}
.input-field input { border: none; outline: none; background: transparent; width: 100%; font-family: inherit; font-size: 1.125rem; font-weight: 500; color: #111; letter-spacing: -0.02em; }
.input-field input::placeholder { color: #9a9a9a; }
.cta {
  position: relative; width: 6.4375rem; height: 4rem; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--blue); border-radius: .625rem;
  border: 1px solid rgba(86,92,202,0.5);
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.25);
  transition: transform .15s ease, filter .15s ease;
}
.cta-text { color: #fff; font-family: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; }
.cta-arrow { width: .5rem; height: .65rem; display: block; }
.cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cta:active { transform: translateY(0); }
.consent { display: flex; gap: .8125rem; margin-top: 1.5rem; align-items: flex-start; }
.consent-error { color: #d22f2f; font-size: .75rem; font-weight: 600; letter-spacing: -0.01em; margin-top: .6rem; }
.consent-error[hidden] { display: none; }
.checkmark { width: 1.4375rem; height: 1.4375rem; border-radius: 2px; background: #fff; border: 1px solid rgba(0,0,0,0.3); flex: none; cursor: pointer; position: relative; }
.checkmark.checked { background: var(--blue); border-color: var(--blue); }
.checkmark.checked::after { content: ""; position: absolute; left: 30%; top: 14%; width: 28%; height: 55%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cl-disc { color: #151515; font-size: .6875rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; width: 24.6875rem; }
.cl-disc u { text-decoration: underline; }
.disc { position: absolute; left: 1.9375rem; top: 40.56rem; width: 22.9375rem; color: rgba(0,0,0,0.55); font-size: .5rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; }

/* ===================== Cinema footer ===================== */
.cinema-footer {
  position: fixed; left: 50%; bottom: 1.6rem; width: 30rem; margin-left: -15rem;
  transform: translateY(220%); /* parked below the fold; GSAP slides it up */
  text-align: center; color: #dbdbdb; font-size: .625rem; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.7; z-index: 45; pointer-events: none;
}

/* End-of-scroll disclaimer — fades in at the very bottom of the page */
.scroll-footer {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  max-width: 45vw; width: 45vw; text-align: center;
  color: rgba(219,219,219,0.7); font-size: .625rem; font-weight: 500;
  letter-spacing: 0.01em; line-height: 1.4; z-index: 44; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}

/* ===================== Video (thumbnail → cinema) ===================== */
.video {
  position: fixed;
  left: 1.9375rem; bottom: 1.5rem;
  width: 19.875rem; height: 10.875rem;
  z-index: 100; /* video mask always above everything */
  cursor: pointer;
  container-type: size; /* radii + padding below scale with the player size */
}
/* Concentric borders: everything is expressed in cqw (relative to the player),
   and the inner radius = outer radius − padding. Because all three track the
   same container, the corners stay seamless in BOTH the thumbnail and the
   full cinema state, no per-state overrides needed. */
.video-frame {
  position: relative; width: 100%; height: 100%;
  border-radius: 5.2cqw; overflow: hidden;
  border: .5px solid rgba(255,255,255,0.42); /* outer border — lower opacity */
  background: #181818; padding: 2.4cqw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}
.video-el {
  /* <video> is a replaced element: inset alone won't size it (it keeps its
     intrinsic 1920×1080), so width/height must be set explicitly. */
  position: absolute; top: 2.4cqw; left: 2.4cqw;
  width: calc(100% - 4.8cqw); height: calc(100% - 4.8cqw);
  object-fit: cover; border-radius: 2.8cqw; background: #202020;
  border: .5px solid rgba(255,255,255,0.85);
}
.video-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
  transition: opacity .35s ease; z-index: 3;
}
.play-row { display: flex; align-items: center; gap: .6rem; }
.play-text { font-size: .711rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.video.previewing .video-overlay { opacity: 0; }

/* Close button lives OUTSIDE the player — fixed to the top-right of the viewport,
   clearly visible, with comfortable spacing from the edges. */
.video-close {
  position: fixed; top: 1.6rem; right: 1.6rem; width: 3rem; height: 3rem;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer; display: none;
  align-items: center; justify-content: center; backdrop-filter: blur(8px); z-index: 120;
  transition: background .2s ease, transform .2s ease;
}
.video-close:hover { background: rgba(0,0,0,0.8); transform: scale(1.06); }

/* ---------- Custom controls (visible only in cinema) ---------- */
.video-controls {
  position: absolute; left: 50%; bottom: 5cqw; transform: translateX(-50%);
  width: 82cqw; display: none; align-items: flex-end; gap: 1.6cqw; z-index: 4;
}
.vc-btn { border: none; background: none; padding: 0; cursor: pointer; display: block; position: relative; flex: none; }
.vc-playpause { width: 4cqw; height: 4cqw; min-width: 40px; min-height: 40px; }
.vc-playpause img { width: 100%; height: 100%; }
.vc-playpause .ic-pause { display: block; }
.vc-playpause .ic-play { display: none; position: absolute; inset: 0; }
body.paused .vc-playpause .ic-pause { display: none; }
body.paused .vc-playpause .ic-play { display: block; }

.vc-scrubber { flex: 1; display: flex; align-items: center; height: 4cqw; cursor: pointer; }
.vc-track {
  position: relative; width: 100%; height: 3.4cqw; border-radius: 999px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22); overflow: visible;
}
.vc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 999px; background: #ffffff; }
.vc-tick { position: absolute; left: 0%; top: 50%; height: 5.4cqw; width: auto; transform: translate(-50%, -50%); pointer-events: none; }
.vc-time { position: absolute; left: 1.4cqw; top: 50%; transform: translateY(-50%); font-size: 1.06cqw; min-font-size: 11px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em; }

.vc-sound { width: 3.2cqw; height: 3.2cqw; min-width: 32px; min-height: 32px; align-self: center; }
.vc-sound img { width: 100%; height: 100%; filter: brightness(0) invert(1); } /* force pure white */
.vc-muted-slash { position: absolute; left: 50%; top: 50%; width: 120%; height: 2px; background: #fff; transform: translate(-50%,-50%) rotate(-45deg); display: none; }
body.muted .vc-sound .vc-muted-slash { display: block; }

/* ===================== FX debug GUI ===================== */
/* ===== CINEMA MODE (geometry handled by GSAP; static styling here) ===== */
body.cinema .bg-image { opacity: .12; transition: opacity .65s ease; }
body.cinema .bg-canvas { opacity: .12 !important; }
body.cinema .video { cursor: default; }
body.cinema .video-overlay { display: none; }
body.cinema .video-el { object-fit: cover; }
body.cinema .video-close { display: flex; }
body.cinema .video-controls { display: flex; }

@media (max-aspect-ratio: 13/10) {
  html { font-size: min(calc(100vw / 120), calc(100vh / 90)); }
}

/* =========================================================
   RESPONSIVE
   - Desktop:   > 992px  (existing layout)
   - Tablet:    ≤ 992px  (stacked left column, waitlist bottom-right,
                          video top-right; same scroll hijack)
   - Mobile:    ≤ 640px  (natural scroll flow + bottom-sheet waitlist)
   ========================================================= */

/* Mobile-only elements — hidden everywhere by default */
.mobile-cta, .wl-sheet-head, .waitlist-bg-mobile, .rotate-overlay, #mobile-flow, .sheet-backdrop { display: none; }

/* ===================== TABLET (≤992px, above mobile) ===================== */
@media (max-width: 992px) and (min-width: 641px) {
  html { font-size: min(calc(100vw / 72), calc(100vh / 62), 15px); }

  /* Frame becomes the viewport — fixed positioning is now viewport-true */
  .frame {
    left: 0; top: 0; transform: none;
    width: 100vw; height: 100vh;
  }

  /* Feature row goes away; logo stays */
  .flexbox { display: none; }
  .logo { left: 1.6rem; top: 1.7rem; }

  /* Both columns share the LEFT side: heading on top, description below */
  .col { height: 100vh; }
  .col-section { height: 100vh; }
  .col-left { left: 5vw; width: 58vw; }
  .col-left .col-section { align-items: flex-start; padding-top: 17vh; }
  .col-right { left: 5vw; right: auto; width: 58vw; }
  .col-right .col-section { align-items: flex-start; padding-top: 47vh; }
  .left-inner { width: 52vw; }
  .right-inner { margin-left: 0; width: 23rem; }
  .faq-inner { margin-left: 0; width: 25rem; }
  .h1 { font-size: 3.1rem; }
  .faq-heading { font-size: 3.4rem; }

  /* Waitlist card — fixed bottom-right */
  .waitlist {
    left: auto; right: 2.5vw; top: auto; bottom: 3vh;
  }

  /* Video thumbnail — top-right */
  .video {
    left: auto; right: 1.6rem; top: 1.6rem; bottom: auto;
    width: 16.5rem; height: 9rem;
  }

  /* Legal disclaimer — left-aligned to the FAQ edge, no fade, no overlap */
  .scroll-footer {
    left: 5vw; right: auto; bottom: 1.4rem; transform: none;
    width: auto; max-width: 24rem; text-align: left; opacity: 1 !important;
  }
}

/* ===================== MOBILE (≤640px) ===================== */
@media (max-width: 640px) {
  html { font-size: min(calc(100vw / 27), 15px); }

  /* Natural document scroll: kill the scroll-hijack spacer */
  #scroll-spacer { display: none; }

  /* Topbar: logo left + JOIN WAITLIST cta right */
  .flexbox { display: none; }
  .logo { left: 1.1rem; top: 1.3rem; width: 8.2rem; }
  .mobile-cta {
    display: block; position: absolute; right: 1.1rem; top: 1.1rem;
    width: 9.25rem; border: none; background: none; padding: 0; cursor: pointer;
  }
  .mobile-cta img { width: 100%; height: auto; }

  /* The fixed frame/columns are emptied by JS into #mobile-flow.
     z-index raised so the waitlist sheet paints above the page flow. */
  .frame { left: 0; top: 0; transform: none; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }
  .col, .col-track { transform: none !important; }
  /* The columns are emptied into #mobile-flow; if left visible they sit in the
     fixed frame and silently swallow every tap (waitlist / video / accordion). */
  .frame .col { display: none; }
  /* Nav bar stays clickable above the flow, but below the sheet + backdrop */
  .topbar { z-index: 50; }

  /* In-flow page content */
  #mobile-flow {
    display: block; position: relative; z-index: 10;
    padding: 7.5rem 1.4rem 16rem;
  }
  #mobile-flow .col-section {
    height: auto; display: block; padding: 0 0 2.6rem; position: relative;
  }
  #mobile-flow .col-glow { display: none; }
  #mobile-flow .left-inner { width: 100%; gap: 1.3rem; }
  #mobile-flow .right-inner { width: 100%; margin-left: 0; }
  #mobile-flow .faq-inner { width: 100%; margin-left: 0; }
  #mobile-flow .h1 { font-size: 2.55rem; }
  #mobile-flow .faq-heading { font-size: 2.9rem; }
  #mobile-flow .right-text { font-size: 1.1rem; }

  /* Video — part of the scroll flow inside its slot (no longer above the sheet) */
  #video-slot {
    position: relative; width: 100%; aspect-ratio: 1.828;
    margin: .4rem 0 3.4rem;
  }
  body:not(.cinema) .video:not(.video-flying) {
    position: absolute; inset: 0; left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 5;
  }
  body.cinema .video, .video.video-flying { position: fixed; z-index: 100; }
  body.cinema .mobile-cta { display: none; }

  /* ---------- Waitlist bottom sheet ---------- */
  .waitlist {
    position: fixed; left: 50%; top: auto; bottom: 0;
    width: min(100vw - 0.8rem, 25.2rem);
    height: auto; aspect-ratio: 363 / 438;
    z-index: 90;
    transform: translateX(-50%) translateY(82.6%);
    transition: transform .65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .waitlist.sheet-open { transform: translateX(-50%) translateY(0); }
  body.cinema .waitlist { transform: translateX(-50%) translateY(105%) !important; }

  .waitlist-bg { display: none; }
  .waitlist-bg-mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

  /* Desktop card header is replaced by the sheet header */
  .wl-head, .powered { display: none; }

  .wl-sheet-head {
    display: flex; align-items: center; gap: .7rem;
    position: absolute; left: 0; top: 0; width: 100%; height: 17.58%;
    padding: 0 1.1rem; border: none; background: none; cursor: pointer; text-align: left;
  }
  .wl-sheet-el { width: 2.85rem; height: 2.85rem; flex: none; }
  .wl-sheet-titles { display: flex; flex-direction: column; gap: .05rem; flex: 1; }
  .wl-sheet-eyebrow { color: rgba(0,0,0,0.7); font-size: .95rem; font-weight: 500; letter-spacing: -0.04em; }
  .wl-sheet-title { color: #000; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
  .wl-sheet-arrow { width: 1.4rem; height: 1.4rem; flex: none; transition: transform .45s cubic-bezier(0.16,1,0.3,1); }
  .waitlist.sheet-open .wl-sheet-arrow { transform: rotate(180deg); }

  /* Body content inside the sheet (between the side notches) */
  .wl-body {
    left: 0; top: 21.4%; width: 100%; padding: 0 1.2rem;
  }
  .wl-copy { width: 100%; }
  .wl-disclaimer { font-size: .98rem; }
  .wl-limited { margin-top: .9rem; }
  .wl-form { margin-top: 1.4rem; }
  .form-row { height: 3.4rem; gap: .5rem; }
  .input-field { width: 100%; height: 3.4rem; min-width: 0; }
  /* 16px keeps iOS Safari from auto-zooming the viewport on focus */
  .input-field input { font-size: 16px; }
  .cta { width: 4.8rem; height: 3.4rem; flex: none; }
  .cta .cta-text { font-size: .8rem; }
  .cta .cta-arrow { width: .42rem; height: .55rem; }
  .consent { margin-top: 1rem; }
  .cl-disc { width: 100%; font-size: .68rem; }
  .wl-success { width: 100%; }
  .wl-success-title { font-size: 2.2rem; }
  .wl-success-sub { font-size: .95rem; }

  /* Legal text sits in the bottom band of the sheet */
  .disc {
    left: 1.2rem; right: 1.2rem; top: auto; bottom: 2.6%;
    width: auto; font-size: .48rem;
  }

  /* Footers — disclaimer lives in the scroll flow (not fixed), left-aligned, no fade */
  .scroll-footer {
    position: relative; left: auto; right: auto; bottom: auto; transform: none;
    width: 100%; max-width: 100%; text-align: left; font-size: .55rem;
    opacity: 1 !important; transition: none; padding: 0; margin: .4rem 0 0;
  }
  .cinema-footer { display: none; }

  /* ---------- Bottom-sheet backdrop + scroll lock ---------- */
  /* z-index sits between the topbar (50) and the .frame (80) that holds the
     sheet, so the dim covers the page + nav but never the sheet itself. */
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.62);
    opacity: 0; pointer-events: none; transition: opacity .45s ease; touch-action: none;
  }
  body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
  body.sheet-open, html.sheet-open { overflow: hidden; }

  /* Cinema close button a touch smaller */
  .video-close { top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; }
}

/* ===================== MOBILE LANDSCAPE — please rotate ===================== */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-overlay {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    background: #000; align-items: center; justify-content: center;
  }
  .rotate-text {
    color: #fff; text-align: center; font-size: 16px; font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.5;
  }
}