/* ============================================================
   DREAMEVO — CINEMATIC DESIGN SYSTEM
   ------------------------------------------------------------
   Loaded AFTER style.css and dream-journey.css. This file owns
   the design language; style.css keeps the structural layout and
   the in-journey player it already built.

   The organising idea: THE PAGE FEELS LIKE FALLING ASLEEP.
   A single scroll-driven variable, --descent (0 at the hero, 1 at
   the footer), progressively darkens the ground, drains saturation
   from imagery, opens up spacing and slows motion. Every section
   reads the same variable, so the descent is one continuous
   gradient rather than seven separately-styled screens.
   ============================================================ */

/* ------------------------------------------------------------
   Metric-matched fallback for Inter.
   Inter arrives from Google Fonts with display=swap. Until it lands,
   the browser draws with a system sans that is narrower, so at some
   phone widths a line that fits in the fallback wraps once Inter
   loads - measured at 375px: the hero description went 2 -> 3 lines
   and the caption 1 -> 2, and because the hero is bottom-anchored the
   whole block jumped (layout shift 0.116, over the 0.1 "good" line).
   Scaling a local Arial to Inter's metrics makes the fallback wrap the
   way Inter does, so the swap no longer moves anything. These are the
   same override values next/font generates for Inter over Arial; they
   are exact on Arial-based systems and approximate where the local
   fallback is Roboto.
   ------------------------------------------------------------ */
/* Calibrated per weight against this page's own text, because one scale
   cannot match both the light (300) description and the medium tracked
   uppercase labels: a sweep over 360-800px showed them needing opposite
   corrections. Chosen by sweeping 360-820px in 4px steps and counting
   line/row changes on swap: 300 at 105% left 1 of 116 widths re-wrapping
   (780px), against 7 for the single published value. */
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 100 350;
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto');
  size-adjust: 105%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 351 900;
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto');
  size-adjust: 104%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

:root {
  /* --- Ground -------------------------------------------------- */
  --ink:        #05060B;
  --night:      #0A0D18;
  --veil:       #121829;
  --veil-soft:  #171E33;

  /* --- Type ---------------------------------------------------- */
  --text:       #F2EFE7;   /* warm bone. never pure white */
  --text-muted: #A8A399;   /* warm grey. never blue slate */
  --text-faint: #8A857C;   /* raised from #6E6A63: that failed AA (3.6:1) on
                              the micro-label register, which is all small text */

  /* --- Gold: foil, not fill ------------------------------------ */
  --gold-leaf:  #C9A227;
  --gold-light: #E8D9A0;
  --gold-deep:  #8A6F1C;
  --gold-hair:  rgba(201, 162, 39, 0.32);   /* hairline borders */
  --gold-wash:  rgba(201, 162, 39, 0.07);   /* hover fills */

  /* --- Worlds: film stock, not neon ---------------------------- */
  --world-romantic:   #B4654A;   /* ember */
  --world-journey:    #8FA3B8;   /* moonstone */
  --world-devotional: #7D8C74;   /* sage */

  /* --- Radius: four values, not thirteen ----------------------- */
  --r-none: 0;
  --r-hair: 4px;
  --r-soft: 12px;
  --r-full: 999px;

  /* --- Type scale ---------------------------------------------- */
  --t-display: clamp(3rem, 8.5vw, 7rem);
  --t-h1:      clamp(2.25rem, 5.5vw, 4.5rem);
  --t-h2:      clamp(1.85rem, 4vw, 3.25rem);
  --t-h3:      clamp(1.15rem, 2vw, 1.5rem);
  --t-lead:    clamp(1.02rem, 1.4vw, 1.2rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-label:   0.7rem;

  /* --- Spacing: spacious, opens further as you descend --------- */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2.5rem;
  --s5: 4rem;    --s6: 6rem;   --s7: 9rem;    --s8: 13rem;

  /* --- Motion: slow, no overshoot ------------------------------ */
  --e-cine: cubic-bezier(0.16, 0.84, 0.44, 1);
  --e-veil: cubic-bezier(0.22, 1, 0.36, 1);
  --e-exit: cubic-bezier(0.4, 0, 1, 1);
  --d-fast: 0.35s;
  --d-base: 0.6s;
  --d-slow: 1.1s;
  --d-cine: 1.8s;

  /* --- Descent (written by cinematic.js) ----------------------- */
  --descent: 0;
  --descent-dim:  calc(var(--descent) * 0.62);   /* ground darkening */
  --descent-cool: calc(1 - var(--descent) * 0.34); /* media saturation */
}

/* ============================================================
   1. GROUND + ATMOSPHERE
   ============================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The descent veil. Fixed behind section content, so the world
   darkens while type stays at full contrast. */
.landing-scroll::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, #0B0F1E 0%, var(--ink) 70%);
  opacity: var(--descent-dim);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.9s linear;
}

/* Film grain. One fixed layer for the whole page rather than a
   texture per section. 3% opacity: felt, not seen. */
.cine-grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: cineGrainShift 5s steps(4) infinite;
}
@keyframes cineGrainShift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, 1%, 0); }
  50%  { transform: translate3d(1%, -2%, 0); }
  75%  { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Global vignette: pulls the eye to centre, the way a lens does. */
.cine-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(130% 95% at 50% 45%, transparent 42%, rgba(5, 6, 11, 0.55) 100%);
}

/* Sections sit above the veil; their own media is graded below. */
.landing-section,
.landing-hero { position: relative; z-index: 1; }

/* Imagery cools and dims as the page descends. */
.landing-hero-video,
.landing-world-card-img,
.dream-cinematic-bg-image {
  filter: saturate(var(--descent-cool)) brightness(calc(1 - var(--descent) * 0.22));
  transition: filter 0.9s linear;
}

/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

.landing-view, .landing-view p, .landing-view li, .landing-view button, .landing-view input {
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Every display heading is Playfair at 400/500. Weight 700 is
   exactly where this face stops reading as expensive. */
.landing-hero-title,
.landing-section-title,
.landing-how-title,
.landing-pricing-title,
.landing-contact-title,
.dreamevo-explain-title,
.cine-h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--text);
  text-wrap: balance;
}

.landing-hero-title { font-size: var(--t-display); line-height: 0.94; }
.landing-section-title,
.landing-how-title,
.landing-pricing-title,
.landing-contact-title { font-size: var(--t-h2); }

/* The micro-label register. This is the detail that makes a page
   read as authored rather than assembled. */
.cine-label {
  display: block;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-leaf);
  opacity: 0.85;
  margin-bottom: var(--s3);
}
.cine-label--muted { color: var(--text-faint); }

/* Body copy: measured, never full-bleed. */
.landing-hero-desc,
.landing-section-sub,
.landing-how-sub,
.landing-pricing-sub,
.landing-contact-sub,
.cine-lead {
  font-size: var(--t-lead);
  line-height: 1.7;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 58ch;
  text-wrap: pretty;
}

.landing-view p { text-wrap: pretty; }

/* Gold as accent text, never as a gradient slab. */
.landing-hero-gradient,
.cine-gold {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--gold-light);
  font-style: italic;
}

/* ============================================================
   3. BUTTONS — one filled gold action per viewport
   ============================================================ */

.landing-cta,
.landing-world-btn,
.landing-pricing-btn,
.landing-contact-email,
.landing-social-btn,
.cine-btn {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  cursor: pointer;
  transition:
    background-color var(--d-base) var(--e-cine),
    border-color var(--d-base) var(--e-cine),
    color var(--d-base) var(--e-cine),
    transform var(--d-base) var(--e-cine);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s4);
}

/* PRIMARY — foil, not gradient. Exactly one of these per screen. */
.cine-btn--primary,
.landing-cta-primary,
.landing-cta-primary--hero {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-leaf) 100%);
  color: #14100A;
  border: 1px solid var(--gold-light);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 40px -18px rgba(201, 162, 39, 0.7);
  animation: none;   /* retires buttonBreathe */
}
.cine-btn--primary:hover,
.landing-cta-primary:hover {
  background: linear-gradient(180deg, #F3E7BE 0%, var(--gold-light) 100%);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 46px -18px rgba(201, 162, 39, 0.85);
}

/* GHOST — the default for everything else. */
.cine-btn--ghost,
.landing-cta-secondary,
.landing-world-btn,
.landing-pricing-btn--secondary,
.landing-contact-email--secondary,
.landing-social-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(242, 239, 231, 0.18);
  box-shadow: none;
  animation: none;
}
.cine-btn--ghost:hover,
.landing-cta-secondary:hover,
.landing-world-btn:hover,
.landing-pricing-btn--secondary:hover,
.landing-contact-email--secondary:hover,
.landing-social-btn:hover {
  border-color: var(--gold-hair);
  background: var(--gold-wash);
  color: var(--gold-light);
  transform: none;
}

/* GOLD-EDGE — a secondary that still carries brand warmth. */
.cine-btn--edge,
.landing-contact-email,
.landing-pricing-btn--primary {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid var(--gold-hair);
  box-shadow: none;
  animation: none;
}
.cine-btn--edge:hover,
.landing-contact-email:hover,
.landing-pricing-btn--primary:hover {
  background: var(--gold-wash);
  border-color: var(--gold-leaf);
}

/* Kill every inherited glow/underline/pulse on actions. */
.landing-cta-primary::after,
.landing-cta-primary::before,
.landing-world-btn::after,
.landing-pricing-btn::after { display: none !important; }
.landing-view a.landing-cta,
.landing-view a.landing-contact-email,
.landing-view a.landing-social-btn { text-decoration: none; }

/* Focus: visible, gold, never removed. */
.landing-view a:focus-visible,
.landing-view button:focus-visible,
.landing-view input:focus-visible,
.landing-view [tabindex]:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: var(--r-hair);
}

/* ============================================================
   4. NAVIGATION — editorial on desktop, real menu on mobile
   ============================================================ */

.landing-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) clamp(1rem, 4vw, 3.5rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 60;
  transition: background-color var(--d-base) var(--e-cine), backdrop-filter var(--d-base) var(--e-cine);
}
/* Ground only appears once you've left the hero. */
.landing-nav.is-grounded {
  background: rgba(5, 6, 11, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(242, 239, 231, 0.07);
}

.landing-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
.landing-nav-moon { font-size: 1rem; filter: saturate(0.7); }
.landing-nav-word {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--text);
  animation: none;
}

.landing-nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); }
.landing-nav-links a {
  position: relative;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s1) 0;
  transition: color var(--d-base) var(--e-cine);
}
.landing-nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-leaf);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-cine);
}
.landing-nav-links a:hover { color: var(--text); }
.landing-nav-links a:hover::after { transform: scaleX(1); }

/* --- Mobile menu trigger --- */
.cine-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(242, 239, 231, 0.18);
  border-radius: var(--r-full);
  cursor: pointer;
  padding: 0;
}
.cine-nav-toggle-bars { position: relative; width: 16px; height: 10px; display: block; }
.cine-nav-toggle-bars::before,
.cine-nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0; width: 100%; height: 1px;
  background: var(--text);
  transition: transform var(--d-base) var(--e-cine), opacity var(--d-fast) linear;
}
.cine-nav-toggle-bars::before { top: 0; }
.cine-nav-toggle-bars::after  { bottom: 0; }
.cine-nav-toggle[aria-expanded='true'] .cine-nav-toggle-bars::before { transform: translateY(4.5px) rotate(45deg); }
.cine-nav-toggle[aria-expanded='true'] .cine-nav-toggle-bars::after  { transform: translateY(-4.5px) rotate(-45deg); }

/* --- Mobile menu panel --- */
.cine-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s6) clamp(1.5rem, 8vw, 3rem);
  background: rgba(5, 6, 11, 0.96);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on open (so the panel is focusable the
     moment .is-open lands) and is delayed until after the fade on
     close. Transitioning visibility itself left it computed-hidden at
     the start of the open transition, which made focus() silently fail. */
  transition: opacity var(--d-base) var(--e-cine), visibility 0s linear var(--d-base);
}
.cine-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--d-base) var(--e-cine), visibility 0s linear 0s;
}
/* body is this layout's scrollport, so the menu locks it here. */
.cine-menu-open body { overflow: hidden !important; }
.cine-menu a {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  padding: var(--s2) 0;
  border-bottom: 1px solid rgba(242, 239, 231, 0.07);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-slow) var(--e-cine), transform var(--d-slow) var(--e-cine), color var(--d-base) var(--e-cine);
}
.cine-menu.is-open a { opacity: 1; transform: none; }
.cine-menu.is-open a:nth-child(1) { transition-delay: 0.06s; }
.cine-menu.is-open a:nth-child(2) { transition-delay: 0.12s; }
.cine-menu.is-open a:nth-child(3) { transition-delay: 0.18s; }
.cine-menu.is-open a:nth-child(4) { transition-delay: 0.24s; }
.cine-menu.is-open a:nth-child(5) { transition-delay: 0.30s; }
.cine-menu a:hover { color: var(--gold-light); }

@media (max-width: 860px) {
  .landing-nav-links { display: none; }
  .cine-nav-toggle { display: inline-flex; }
}

/* ============================================================
   5. HERO — a title sequence, not a landing block
   ============================================================ */

.landing-hero {
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding: 0 clamp(1.25rem, 6vw, 6rem) clamp(4rem, 12vh, 9rem);
  overflow: hidden;
}

/* Readability grade over the artwork: dark at the bottom where the
   type lives, clear at the top where the sky is the subject. */
.landing-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,6,11,0.55) 0%, transparent 26%, transparent 42%, rgba(5,6,11,0.82) 88%, var(--ink) 100%),
    linear-gradient(90deg, rgba(5,6,11,0.6) 0%, transparent 45%);
  z-index: 1;
}
.landing-hero-video { z-index: 0; }
.landing-hero-copy,
.landing-hero-ctas,
.cine-hero-foot { position: relative; z-index: 2; }

/* Left-anchored composition: the rider keeps the right two-thirds
   of the frame, the type never crosses the subject. */
.landing-hero-copy {
  max-width: min(46rem, 92%);
  margin: 0;
  text-align: left;
}
.landing-hero-title { margin: 0 0 var(--s3); }
.landing-hero-line { display: block; }
.landing-hero-desc { margin: 0 0 var(--s5); max-width: 38ch; }
.landing-hero-ctas { justify-content: flex-start; margin: 0; }

/* Honest footer row: no invented ratings, no app-store claims. */
.cine-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: clamp(3rem, 9vh, 6rem);
  padding-top: var(--s3);
  border-top: 1px solid rgba(242, 239, 231, 0.1);
}
.cine-hero-meta {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Scroll cue: a drawn line that breathes, not a shouted instruction. */
.cine-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.cine-scroll-cue-line {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--gold-hair), transparent);
  position: relative;
  overflow: hidden;
}
.cine-scroll-cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--gold-light), transparent);
  animation: cineScrollDrip 2.8s var(--e-cine) infinite;
}
@keyframes cineScrollDrip {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Retire the old trust bar + shouted scroll hint. */
.landing-trust,
.landing-scroll-hint,
.landing-scroll-arrow { display: none !important; }

@media (max-width: 860px) {
  .landing-hero { padding-bottom: clamp(3rem, 8vh, 5rem); }
  .landing-hero-copy { max-width: 100%; }
  .landing-hero-desc { max-width: 100%; }
  .landing-hero-ctas .landing-cta { width: 100%; }
  .cine-hero-foot { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}

/* ============================================================
   6. SECTION PRIMITIVES — no more box-in-a-box
   ============================================================ */

.landing-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none;
  margin-inline: 0;
  padding-block: var(--s7);
  padding-inline: clamp(1.25rem, 6vw, 6rem);
}

.cine-inner { max-width: 1240px; margin-inline: auto; width: 100%; }

/* A hairline rule used as a chapter mark between sections. */
.cine-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,239,231,0.14), transparent);
  border: 0;
  margin: 0;
}

/* Scroll reveal. Opacity + translate + a touch of blur. No overshoot. */
.cine-reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition:
    opacity var(--d-cine) var(--e-cine),
    transform var(--d-cine) var(--e-cine),
    filter var(--d-cine) var(--e-cine);
  will-change: opacity, transform;
}
.cine-reveal.is-in { opacity: 1; transform: none; filter: none; }
.cine-reveal--d1 { transition-delay: 0.1s; }
.cine-reveal--d2 { transition-delay: 0.2s; }
.cine-reveal--d3 { transition-delay: 0.3s; }
.cine-reveal--d4 { transition-delay: 0.4s; }

/* ============================================================
   7. MADE PERSONAL — editorial, asymmetric, one focal point
   ------------------------------------------------------------
   The existing markup already had the right bones: a scroll-driven
   orb whose state changes with the active step, and three real
   <button> steps with aria-expanded. That interaction is kept; what
   changes is that the steps stop being three identical boxes and
   become an editorial row that shares one hairline rule.
   ============================================================ */

.dreamevo-explain { overflow: hidden; }

.dreamevo-explain-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}
.dreamevo-explain-copy { max-width: 34rem; }
.dreamevo-explain-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
.dreamevo-explain-white { display: block; color: var(--text); }
.dreamevo-explain-gold {
  display: block;
  color: var(--gold-light);
  font-style: italic;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.dreamevo-explain-sub {
  font-size: var(--t-lead);
  line-height: 1.7;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0;
}

/* Steps: an editorial row on one shared rule, not three cards. */
.dreamevo-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1240px;
  margin: var(--s7) auto 0;
  border-top: 1px solid rgba(242, 239, 231, 0.1);
  padding-top: var(--s5);
}
.dreamevo-steps-line { display: none !important; }

.dreamevo-step {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: var(--s2);
  text-align: left;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
  animation: none !important;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--d-slow) var(--e-cine);
}
.dreamevo-step:hover,
.dreamevo-step.is-active { opacity: 1; }

.dreamevo-step-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gold-leaf);
  letter-spacing: 0;
}
.dreamevo-step-icon {
  width: 22px; height: 22px;
  color: var(--text-muted);
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block;
  transition: color var(--d-slow) var(--e-cine);
}
.dreamevo-step-icon svg { width: 100%; height: 100%; }
.dreamevo-step.is-active .dreamevo-step-icon { color: var(--gold-light); }
.dreamevo-step-title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}
.dreamevo-step-desc {
  font-size: var(--t-small);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-muted);
}

.dreamevo-oneline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  max-width: 36ch;
  margin: var(--s7) auto var(--s5);
  line-height: 1.5;
}
.dreamevo-explain-cta-wrap { display: flex; justify-content: center; }

/* The orb keeps its canvas; the frame just stops being a card. */
.dreamevo-orb-wrap {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}

@media (max-width: 900px) {
  .dreamevo-explain-top { grid-template-columns: 1fr; gap: var(--s5); }
  .dreamevo-orb-wrap { order: -1; max-width: 260px; }
  .dreamevo-steps { grid-template-columns: 1fr; gap: var(--s4); }
  .dreamevo-step {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--s3);
    padding-bottom: var(--s3) !important;
    border-bottom: 1px solid rgba(242, 239, 231, 0.08) !important;
    opacity: 1;
  }
  .dreamevo-step-num { grid-row: 1 / 3; }
  .dreamevo-step-icon { display: none; }
}

/* ============================================================
   8. CHOOSE YOUR WORLD — portals, not product cards
   ============================================================ */

.landing-worlds { padding-block: var(--s7); }

.landing-world-cards,
.cine-worlds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(242, 239, 231, 0.08);
  border-block: 1px solid rgba(242, 239, 231, 0.08);
  margin-top: var(--s6);
}

.cine-world {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(24rem, 46vh, 34rem);
  padding: var(--s5) var(--s4);
  background: var(--night);
  border: 0;
  border-radius: var(--r-none);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  isolation: isolate;
  transition: flex var(--d-slow) var(--e-cine);
}
.cine-world-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.55) brightness(0.72);
  transform: scale(1.04);
  transition:
    opacity var(--d-cine) var(--e-cine),
    filter var(--d-cine) var(--e-cine),
    transform var(--d-cine) var(--e-cine);
  z-index: -2;
}
.cine-world::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5,6,11,0.25) 0%, rgba(5,6,11,0.78) 62%, rgba(5,6,11,0.94) 100%);
  transition: background var(--d-cine) var(--e-cine);
}
.cine-world:hover .cine-world-img,
.cine-world:focus-visible .cine-world-img {
  opacity: 0.72;
  filter: saturate(0.85) brightness(0.9);
  transform: scale(1.08);
}

.cine-world-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
}
.cine-world-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--s2);
}
.cine-world-sub {
  font-size: var(--t-small);
  line-height: 1.65;
  font-weight: 300;
  color: var(--text-muted);
  margin: 0;
  max-width: 26ch;
}
/* The accent line is the world's colour: the only place it appears. */
.cine-world-accent {
  display: block;
  width: 34px; height: 1px;
  background: var(--world-accent, var(--gold-leaf));
  margin-bottom: var(--s3);
  transition: width var(--d-cine) var(--e-cine);
}
.cine-world:hover .cine-world-accent,
.cine-world:focus-visible .cine-world-accent { width: 72px; }

.cine-world-enter {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--d-slow) var(--e-cine), transform var(--d-slow) var(--e-cine);
}
.cine-world:hover .cine-world-enter,
.cine-world:focus-visible .cine-world-enter { opacity: 1; transform: none; }

.cine-world[data-world='romantic']   { --world-accent: var(--world-romantic); }
.cine-world[data-world='journey']    { --world-accent: var(--world-journey); }
.cine-world[data-world='devotional'] { --world-accent: var(--world-devotional); }

@media (max-width: 900px) {
  .cine-worlds { grid-template-columns: 1fr; }
  .cine-world { min-height: 17rem; }
  .cine-world-enter { opacity: 1; transform: none; }
  .cine-world-img { opacity: 0.55; }
}

/* "Most Popular" is e-commerce language; worlds are not product plans. */
.landing-world-badge,
.landing-world-card-wrap--popular::before { display: none !important; }
/* Neutralise leftover card chrome on the wrappers script.js still queries. */
.landing-world-card-wrap {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   9. HOW IT WORKS — one column, duplication removed
   ============================================================ */

.landing-how-columns { display: block !important; }
.landing-how-left { display: none !important; }   /* the duplicate */
.landing-how-accent { display: none !important; }

.landing-how-timeline {
  max-width: 46rem;
  margin: var(--s6) auto 0;
  counter-reset: how;
}
.landing-how-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid rgba(242, 239, 231, 0.09);
  align-items: start;
}
.landing-how-step:last-child { border-bottom: 1px solid rgba(242, 239, 231, 0.09); }
.landing-how-line-wrap { display: block; }
.landing-how-num {
  display: block;
  width: auto; height: auto;
  background: none !important;
  border: 0 !important;
  border-radius: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gold-leaf);
  line-height: 1.4;
}
.landing-how-line { display: none !important; }
.landing-how-step-title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 var(--s1);
}
.landing-how-step-text,
.landing-how-step-desc {
  font-size: var(--t-body);
  line-height: 1.7;
  font-weight: 300;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   10. PRICING — honest, editorial, no fake urgency
   ============================================================ */

.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(242, 239, 231, 0.08);
  border-block: 1px solid rgba(242, 239, 231, 0.08);
  margin-top: var(--s6);
}
.landing-pricing-card {
  background: var(--night) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--s5) var(--s4) !important;
  display: flex;
  flex-direction: column;
  transform: none !important;
}
.landing-pricing-card--popular { background: var(--veil) !important; }
.landing-pricing-badge { display: none !important; }   /* no fake popularity */

.landing-pricing-card-name {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s4);
}
.landing-pricing-card-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 var(--s4);
}
.landing-pricing-period,
.landing-pricing-currency {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-small);
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.landing-pricing-features { list-style: none; margin: 0 0 var(--s5); padding: 0; flex: 1; }
.landing-pricing-features li {
  position: relative;
  padding-left: var(--s3);
  margin-bottom: var(--s2);
  font-size: var(--t-small);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
}
.landing-pricing-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 1px;
  background: var(--gold-leaf);
  opacity: 0.7;
}
.landing-pricing-btn { width: 100%; }

/* An honest status line replaces the badge. */
.cine-plan-status {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-leaf);
  opacity: 0.8;
  margin: 0 0 var(--s3);
}

.landing-pricing-waitlist {
  background: transparent !important;
  border: 1px solid rgba(242, 239, 231, 0.1) !important;
  border-radius: var(--r-soft) !important;
  padding: var(--s5) !important;
  margin-top: var(--s6);
  max-width: 44rem;
  margin-inline: auto;
  box-shadow: none !important;
}
.landing-pricing-waitlist-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 var(--s2);
}

@media (max-width: 900px) {
  .landing-pricing-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   11. INPUTS
   ============================================================ */

.landing-view input[type='email'],
.landing-view input[type='text'],
.landing-view textarea {
  background: rgba(242, 239, 231, 0.04);
  border: 1px solid rgba(242, 239, 231, 0.16);
  border-radius: var(--r-hair);
  color: var(--text);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-body);
  font-weight: 300;
  padding: 0 var(--s3);
  min-height: 48px;
  transition: border-color var(--d-base) var(--e-cine), background-color var(--d-base) var(--e-cine);
}
.landing-view input::placeholder,
.landing-view textarea::placeholder { color: var(--text-faint); }
.landing-view input:focus,
.landing-view textarea:focus {
  border-color: var(--gold-hair);
  background: rgba(242, 239, 231, 0.06);
  outline: none;
}

/* ============================================================
   12. FOOTER
   ============================================================ */

.cine-footer {
  position: relative;
  z-index: 1;
  padding: var(--s6) clamp(1.25rem, 6vw, 6rem) var(--s5);
  border-top: 1px solid rgba(242, 239, 231, 0.08);
  background: var(--ink);
}
.cine-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1240px;
  margin-inline: auto;
}
.cine-footer-word {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--text);
  margin: 0 0 var(--s3);
}
.cine-footer-statement {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 30ch;
}
.cine-footer-h {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s3);
}
.cine-footer-list { list-style: none; margin: 0; padding: 0; }
.cine-footer-list li { margin-bottom: var(--s2); }
.cine-footer-list a {
  font-size: var(--t-small);
  font-weight: 300;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--d-base) var(--e-cine);
}
.cine-footer-list a:hover { color: var(--gold-light); }
.cine-footer-base {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  max-width: 1240px;
  margin: var(--s6) auto 0;
  padding-top: var(--s3);
  border-top: 1px solid rgba(242, 239, 231, 0.07);
  font-size: var(--t-small);
  font-weight: 300;
  color: var(--text-faint);
}
@media (max-width: 760px) {
  .cine-footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ============================================================
   13. CONTACT
   ============================================================ */

.landing-contact-actions,
.landing-contact-socials { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
.landing-contact-socials { margin-top: var(--s3); }
.landing-contact-email-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--t-h3);
  font-style: italic;
  color: var(--gold-light);
  margin: var(--s3) 0;
}

/* ============================================================
   14. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cine-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .cine-grain { animation: none; }
  .cine-orb { animation: none; }
  .cine-scroll-cue-line::after { animation: none; opacity: 0.5; }
  .landing-scroll::before { transition: none; }
  .landing-view *, .landing-view *::before, .landing-view *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   15. REFINEMENT PASS — corrections made after viewing the
       rendered page at 1440 / 1024 / 768 / 390.
   ============================================================ */

/* The nav row still carried its own pill (background + border +
   inset shadow) from style.css, which read as a detached chip
   floating over the artwork. Editorial navigation has no chrome. */
.landing-nav-links {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  gap: clamp(1rem, 2.2vw, 2.25rem) !important;
}
.landing-nav-links a {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0.35rem 0 !important;
}

/* --- Hero ---------------------------------------------------- */
/* 7rem forced the title onto three lines, which pushed it across
   the sleeping figure. Two lines clears the subject entirely. */
:root { --t-display: clamp(2.6rem, 6.2vw, 5rem); }

/* Anchor the copy to the page gutter instead of inheriting the
   centred auto-margins from the old centred hero. */
.landing-hero-copy {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.landing-hero-title,
.landing-hero-desc,
.landing-hero-ctas { text-align: left !important; }
.landing-hero-ctas { justify-content: flex-start !important; }

/* The CTA read as buttery template-gold. Narrower, cooler, with the
   glow pulled right back so it looks like foil, not plastic. */
.landing-cta-primary,
.landing-cta-primary--hero,
.cine-btn--primary {
  background: linear-gradient(180deg, #E4D3A0 0%, #C9A227 100%) !important;
  color: #12100A !important;
  border: 1px solid rgba(232, 217, 160, 0.65) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 6px 26px -16px rgba(201, 162, 39, 0.5) !important;
  min-height: 52px;
  padding: 0 var(--s5);
  width: auto;
  min-width: 0;
  max-width: max-content;
}
.landing-cta-primary:hover,
.cine-btn--primary:hover {
  background: linear-gradient(180deg, #EFE0B4 0%, #D4AE2E 100%) !important;
}

/* Scroll cue reads better as a vertical stack at the right edge. */
.cine-scroll-cue { flex-direction: column; gap: var(--s1); align-items: center; }

/* --- Shared section headers ---------------------------------- */
/* Headers were centred while their content was left-aligned. Left
   for the worlds (they run edge to edge), centred for pricing and
   how-it-works (their content is centred). */
.landing-worlds .cine-inner { text-align: left; }
.landing-worlds .landing-section-sub { margin-left: 0; margin-right: auto; }

.landing-how,
.landing-pricing,
.landing-contact { text-align: center; }
.landing-how-sub,
.landing-pricing-sub,
.landing-contact-sub { margin-inline: auto; text-align: center; }
.landing-how-title,
.landing-pricing-title,
.landing-contact-title { margin-inline: auto; }
.landing-how .landing-how-step { text-align: left; }

/* --- Vertical rhythm ----------------------------------------- */
/* The gaps between a section header and its content were reading as
   dead space rather than breathing room. */
.landing-world-cards,
.cine-worlds { margin-top: var(--s5) !important; }
.dreamevo-steps { margin-top: var(--s6) !important; padding-top: var(--s5) !important; }
.dreamevo-oneline { margin-top: var(--s6) !important; }
.landing-pricing-grid { margin-top: var(--s5) !important; }
.landing-how-timeline { margin-top: var(--s5) !important; }

/* --- World portals ------------------------------------------- */
/* At 0.42 opacity under the descent grade the artwork was almost
   invisible, which defeats the point of a portal. */
.cine-world-img { opacity: 0.6 !important; filter: saturate(0.7) brightness(0.85) !important; }
.cine-world:hover .cine-world-img,
.cine-world:focus-visible .cine-world-img { opacity: 0.85 !important; filter: saturate(0.95) brightness(1) !important; }

/* Titles sat at different heights per portal. Pin the body to the
   bottom of the tile so all three share a baseline. */
.cine-world { display: flex; align-items: flex-end; }
.cine-world-body { min-height: 0; height: auto; width: 100%; }

/* --- Made Personal ------------------------------------------- */
/* Inactive steps at 0.5 read as a rendering fault when the page is
   static. Still recessive, no longer broken-looking. */
.dreamevo-step { opacity: 0.78; }

/* --- Pricing ------------------------------------------------- */
/* The rupee mark was rendering as a misaligned superscript. */
.landing-pricing-currency {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 0.55em !important;
  vertical-align: baseline;
  margin-right: 0.1em;
  color: var(--text-muted);
}
.landing-pricing-card-price { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; }
.landing-pricing-features { text-align: left; }
.landing-pricing-features li::before { top: 0.6em; }
.cine-plan-status { text-align: center; }

/* --- Contact ------------------------------------------------- */
.landing-contact-actions,
.landing-contact-socials { justify-content: center; }

/* ------------------------------------------------------------
   Mobile overflow. The journey app's idle artwork (.idle-visual-*,
   600px fixed) sits in .experience-canvas with overflow:visible, so
   below ~420px it pushed body.scrollLeft to 274. overflow-x:clip
   rather than hidden: it clips without creating a scroll container,
   so nothing inside the journey view loses sticky/fixed behaviour.
   ------------------------------------------------------------ */
.experience-canvas,
.canvas-idle,
.dream-video-wrapper { overflow-x: clip; }

/* ------------------------------------------------------------
   Touch targets. Inline text links were 17-21px tall; padded to
   clear 44px without changing how they read.
   ------------------------------------------------------------ */
.landing-nav-logo { min-height: 44px; }
.cine-footer-list a,
.landing-contact-email-text a {
  display: inline-block;
  padding-block: 0.7rem;
  min-height: 44px;
}
.cine-footer-list li { margin-bottom: 0; }
.cine-menu a { min-height: 56px; display: flex; align-items: center; }
.landing-nav-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------
   Hero anchoring. The old rule set display:flex with
   justify-content:center; switching to grid kept that value, which
   sized the column to its content and centred it, so the copy sat
   at x=471 and the CTA landed on the sleeping figure's head.
   ------------------------------------------------------------ */
.landing-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: end !important;
  text-align: left !important;
}
.cine-hero-foot { width: 100%; }

/* ------------------------------------------------------------
   Mobile header + hero foot.
   style.css switches .landing-nav to a column below its breakpoint
   (logo on one row, a horizontally-scrollable link rail beneath),
   which left the new toggle centred. The rail is replaced by the
   overlay menu, so the header returns to a single row.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .landing-nav {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 0 !important;
    padding: var(--s2) clamp(1rem, 5vw, 1.5rem) !important;
  }
  .landing-nav-logo { align-self: center !important; padding: 0 !important; }

  /* The meta line reads as a caption, not a stacked list. */
  .cine-hero-foot { flex-direction: row; align-items: flex-end; gap: var(--s3); }
  .cine-hero-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }
  /* script.js already renders a "Swipe up" affordance on touch, so a
     second scroll cue here would be redundant. */
  .cine-scroll-cue { display: none; }
}

/* Footer runs edge to edge like every other band on the page. */
.cine-footer { width: 100%; max-width: none; margin-inline: 0; }

/* Contact now duplicates the footer's Connect column, so it keeps the
   anchor target and the direct mail actions but drops the repeated
   social buttons. */
.landing-contact-socials { display: none; }
.landing-contact { padding-bottom: var(--s5) !important; }

/* ============================================================
   16. PERFORMANCE
   ============================================================ */

/* The journey app's idle artwork (.idle-visual-*, .particle-orb,
   .bg-gradient-animated, .bg-noise) animates continuously inside
   .experience-canvas. While body.view-landing is set that canvas is
   fully covered by the landing view, so roughly ten always-on
   animations were compositing frames nobody could see. They resume
   the moment the landing view is dismissed. */
body.view-landing .experience-canvas *,
body.view-landing .canvas-background * {
  animation-play-state: paused !important;
}

/* backdrop-filter is the single most expensive property on this page.
   These surfaces are now fully opaque, so the blur samples a backdrop
   that never shows through: pure cost, zero visual result. */
.landing-pricing-card,
.landing-pricing-waitlist,
.landing-world-card,
.landing-nav-links { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Only the layers that actually sit over moving artwork keep it. */
.landing-nav.is-grounded,
.cine-menu { backdrop-filter: blur(18px) saturate(120%); }

/* Hint the compositor only where something genuinely moves, and
   release it everywhere else so layers are not pinned for the whole
   session. */
.cine-reveal.is-in { will-change: auto; }

/* ============================================================
   17. CHOOSE YOUR DREAM — the entry to the signature flow
   ------------------------------------------------------------
   The rider sits dead centre of the artwork, so centred copy was
   crossing the subject. Anchoring the panel to the left third
   clears the rider entirely, keeps him readable as the subject of
   the frame, and matches the hero's left-anchored composition.
   ============================================================ */

.landing-choose-own { display: grid; align-content: center; }

.landing-choose-own-inner {
  position: relative;
  z-index: 3;
  max-width: 34rem;
  margin: 0 auto 0 0;
  text-align: left;
  padding-inline: clamp(1.25rem, 6vw, 6rem);
}
.landing-choose-own-mark {
  display: block;
  font-size: 1.1rem;
  color: var(--gold-light);
  margin-bottom: var(--s3);
  opacity: 0.9;
}
.landing-choose-own-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--s2);
  text-shadow: 0 2px 30px rgba(5, 6, 11, 0.75);
}
.landing-choose-own-desc {
  font-size: var(--t-lead);
  font-weight: 300;
  color: var(--text-muted);
  margin: 0 0 var(--s4);
  text-shadow: 0 2px 20px rgba(5, 6, 11, 0.8);
}

/* A soft directional scrim instead of an opaque card: the artwork
   stays fully present, the type stays legible over it. */
.landing-choose-own-inner::before {
  content: '';
  position: absolute;
  inset: -10% -18% -10% -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 60% at 32% 50%, rgba(5, 6, 11, 0.82) 0%, rgba(5, 6, 11, 0.5) 45%, transparent 78%);
}

.landing-choose-own-form {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
/* The input previously read as a dark smudge with no affordance. */
.landing-choose-own-input {
  flex: 1 1 16rem;
  min-height: 52px;
  background: rgba(8, 10, 18, 0.62) !important;
  border: 1px solid rgba(242, 239, 231, 0.24) !important;
  border-radius: var(--r-hair) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text) !important;
  font-size: 1rem;
  padding: 0 var(--s3) !important;
}
.landing-choose-own-input::placeholder { color: rgba(242, 239, 231, 0.45) !important; }
.landing-choose-own-input:focus {
  border-color: var(--gold-hair) !important;
  background: rgba(8, 10, 18, 0.78) !important;
}

/* This is the one filled gold action in this viewport. */
.landing-choose-own-submit {
  min-height: 52px;
  padding: 0 var(--s4);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, #E4D3A0 0%, #C9A227 100%) !important;
  color: #12100A !important;
  border: 1px solid rgba(232, 217, 160, 0.65) !important;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
  animation: none !important;
  transition: background-color var(--d-base) var(--e-cine), transform var(--d-base) var(--e-cine);
}
.landing-choose-own-submit:hover { background: linear-gradient(180deg, #EFE0B4 0%, #D4AE2E 100%) !important; }

@media (max-width: 860px) {
  .landing-choose-own-inner { max-width: 100%; margin-inline: 0; }
  /* Fades out at BOTH ends. It used to stop at full strength, which drew
     a hard black edge across the artwork below the Enter button. */
  .landing-choose-own-inner::before { inset: -30% -20%; background: linear-gradient(180deg, transparent 0%, rgba(5,6,11,0.8) 22%, rgba(5,6,11,0.86) 78%, transparent 100%); }
  .landing-choose-own-input, .landing-choose-own-submit { flex: 1 1 100%; }
}

/* ------------------------------------------------------------
   How It Works: tighter rows, and step 01 gets the title it was
   missing (it shipped as bare text while 02-04 had headings).
   ------------------------------------------------------------ */
.landing-how-step { padding: var(--s3) 0 !important; gap: var(--s3) !important; }

/* Same inherited-centring trap as the hero: the old flex rule's
   justify-content:center survived the switch to grid and re-centred
   the panel over the rider. */
.landing-choose-own {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: center !important;
  text-align: left !important;
}
.landing-choose-own-inner { max-width: 34rem !important; width: 100% !important; text-align: left !important; }

/* The hero meta line sits over artwork rather than flat ground, so it
   takes the brighter muted tone plus a shadow for the bright frames. */
.cine-hero-meta {
  color: var(--text-muted);
  text-shadow: 0 1px 12px rgba(5, 6, 11, 0.9);
}
.cine-scroll-cue { color: var(--text-muted); text-shadow: 0 1px 12px rgba(5, 6, 11, 0.9); }

/* ============================================================
   18. EXPOSURE PASS
   ------------------------------------------------------------
   Image-visibility refinement only. No layout, typography, spacing
   or component changes: these rules re-grade the layers sitting
   ABOVE the artwork so the scenery, figures and lighting read
   immediately, while the scrims that actually carry text contrast
   are left at full strength.
   ============================================================ */

/* A. The descent grade was compounding with every local overlay, so
   by mid-page the artwork was being dimmed three times over. The
   descent still reads clearly, it just stops crushing the images. */
:root {
  --descent-dim:  calc(var(--descent) * 0.46);
  --descent-cool: calc(1 - var(--descent) * 0.22);
}
.landing-hero-video,
.landing-world-card-img,
.dream-cinematic-bg-image {
  filter: saturate(var(--descent-cool)) brightness(calc(1 - var(--descent) * 0.13));
}

/* B. Hero. The readability grade keeps its shape (dark where the type
   sits, clear where the sky is the subject) at lower density, so the
   stars, the figures and the books come back. */
.landing-hero::after {
  background:
    linear-gradient(180deg, rgba(5,6,11,0.40) 0%, transparent 26%, transparent 42%, rgba(5,6,11,0.70) 88%, var(--ink) 100%),
    linear-gradient(90deg, rgba(5,6,11,0.42) 0%, transparent 45%);
}
.cine-vignette {
  background: radial-gradient(130% 95% at 50% 45%, transparent 46%, rgba(5, 6, 11, 0.40) 100%);
}

/* C. World portals. The tiles were triple-dimmed (opacity 0.6, a
   brightness filter, and a near-opaque scrim). The scrim keeps its
   lower two stops because that is where the titles sit; only the top
   of each tile opens up, which is where the scenery actually is. */
.cine-world-img {
  opacity: 0.82 !important;
  filter: saturate(0.92) brightness(1) !important;
}
.cine-world:hover .cine-world-img,
.cine-world:focus-visible .cine-world-img {
  opacity: 0.96 !important;
  filter: saturate(1.02) brightness(1.06) !important;
}
.cine-world::after {
  background: linear-gradient(180deg, rgba(5,6,11,0.06) 0%, rgba(5,6,11,0.30) 42%, rgba(5,6,11,0.74) 68%, rgba(5,6,11,0.92) 100%);
}

/* D. Choose Your Dream. Its vignette darkens the CENTRE, which was
   written when the copy sat centred; the copy now sits left, so that
   vignette was dimming the rider for no reason. The left-hand scrim
   behind the text is untouched and still carries the contrast. */
.landing-choose-own .dream-cinematic-bg,
.landing-choose-own {
  --cbg-brightness: 1.12;
  --cbg-saturate: 1.14;
  --cbg-vignette-strength: 0.58;
}

/* --- Exposure correction, measured -------------------------------
   First pass overshot the portals (+110% luminance) which read as
   bright image cards rather than editorial tiles. Pulled back to
   roughly +25%, the stated target. The hero sky barely moved because
   nothing was dimming it: it is video at native exposure, so it takes
   a small lift on the source instead of a thinner scrim.
   ----------------------------------------------------------------- */
.cine-world-img {
  opacity: 0.70 !important;
  filter: saturate(0.85) brightness(0.90) !important;
}
.cine-world:hover .cine-world-img,
.cine-world:focus-visible .cine-world-img {
  opacity: 0.88 !important;
  filter: saturate(0.95) brightness(1) !important;
}
.cine-world::after {
  background: linear-gradient(180deg, rgba(5,6,11,0.18) 0%, rgba(5,6,11,0.52) 42%, rgba(5,6,11,0.78) 68%, rgba(5,6,11,0.94) 100%);
}

/* Gentle lift on the hero footage itself: the scrim above it was
   already transparent across the sky, so exposure had to come from
   the source. Small enough that it reads as grading, not brightening. */
.landing-hero-video {
  filter:
    saturate(calc(var(--descent-cool) * 1.07))
    brightness(calc((1 - var(--descent) * 0.13) * 1.10))
    contrast(1.02);
}

/* --- Journey: most-popular marker --------------------------------
   Restored per request. Rendered in the existing micro-label register
   with a gold hairline rather than the previous filled pill, so it
   sits inside the design system instead of reading as an e-commerce
   sticker. No new component: it reuses --t-label and --gold-*.
   ----------------------------------------------------------------- */
.cine-world-badge {
  position: absolute;
  top: var(--s3);
  left: var(--s4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(5, 6, 11, 0.55);
  border: 1px solid var(--gold-hair);
  border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cine-world-badge { top: var(--s2); left: var(--s3); }
}

/* ============================================================
   20. WORLD CARD EXPOSURE
   ------------------------------------------------------------
   Image treatment only. The tiles were being dimmed three ways at
   once (opacity 0.70, brightness 0.90, and a scrim that was already
   0.52 opaque by 42% height). Measured: the scenery region sat at
   29-85 luminance, so the couple, the hiker and the seated figure
   were effectively invisible at a glance.

   Title starts at 44% of tile height and body copy ends at 71%, so
   the scrim keeps its strength from ~46% down and only the upper
   half opens up. Bone text (#F2EFE7) still clears 6:1 against a band
   of ~80, which is the headroom this uses.
   ============================================================ */

.cine-world-img {
  opacity: 1 !important;
  filter: saturate(1) brightness(1.12) contrast(1.06) !important;
}
.cine-world:hover .cine-world-img,
.cine-world:focus-visible .cine-world-img {
  opacity: 1 !important;
  filter: saturate(1.08) brightness(1.2) contrast(1.08) !important;
}

.cine-world::after {
  background: linear-gradient(
    180deg,
    rgba(5, 6, 11, 0.00) 0%,
    rgba(5, 6, 11, 0.06) 30%,
    rgba(5, 6, 11, 0.34) 46%,
    rgba(5, 6, 11, 0.62) 62%,
    rgba(5, 6, 11, 0.84) 100%
  );
}

/* Scrim correction, measured. Opening the whole tile evenly left the
   worst patches behind the copy at 2.2-3.4:1 (bokeh on Romantic, mist
   on Journey, lit cloud on Devotional). The scenery band is 0-42% of
   tile height and the copy is 44-71%, so the ramp now falls steeply
   right at that boundary: the top half keeps its full exposure gain,
   the text band goes back to a readable ground. */
.cine-world::after {
  background: linear-gradient(
    180deg,
    rgba(5, 6, 11, 0.00) 0%,
    rgba(5, 6, 11, 0.03) 30%,
    rgba(5, 6, 11, 0.26) 41%,
    rgba(5, 6, 11, 0.66) 50%,
    rgba(5, 6, 11, 0.80) 62%,
    rgba(5, 6, 11, 0.88) 100%
  );
}

/* Second scrim correction. Bright detail was still punching through
   behind the copy (bokeh lights, lit cloud). The ramp is steeper and
   lands earlier; the scenery band above 40% is untouched. */
.cine-world::after {
  background: linear-gradient(
    180deg,
    rgba(5, 6, 11, 0.00) 0%,
    rgba(5, 6, 11, 0.03) 28%,
    rgba(5, 6, 11, 0.30) 39%,
    rgba(5, 6, 11, 0.82) 48%,
    rgba(5, 6, 11, 0.90) 60%,
    rgba(5, 6, 11, 0.93) 100%
  );
}

/* Final scrim placement. Measured with the text hidden, so these are
   true background readings rather than the glyphs themselves:
   body copy was already clearing 15-17:1, but the Journey and
   Devotional titles start at 39% of tile height, fractionally above
   where the ramp went dark, leaving them at 2.5-2.7:1 against the
   3:1 large-text bar. The ramp now completes by ~42%, just before
   the titles begin. The scenery above it keeps its exposure. */
.cine-world::after {
  background: linear-gradient(
    180deg,
    rgba(5, 6, 11, 0.00) 0%,
    rgba(5, 6, 11, 0.04) 26%,
    rgba(5, 6, 11, 0.34) 34%,
    rgba(5, 6, 11, 0.78) 42%,
    rgba(5, 6, 11, 0.88) 56%,
    rgba(5, 6, 11, 0.93) 100%
  );
}

/* Body copy ends at 71% of tile height, so the band below it was
   being held dark for no reason - and that is exactly where the
   couple, the hiker and the seated figure are. Easing the foot of
   the gradient brings the characters back without touching any
   text ground. */
.cine-world::after {
  background: linear-gradient(
    180deg,
    rgba(5, 6, 11, 0.00) 0%,
    rgba(5, 6, 11, 0.04) 26%,
    rgba(5, 6, 11, 0.34) 34%,
    rgba(5, 6, 11, 0.78) 42%,
    rgba(5, 6, 11, 0.88) 56%,
    rgba(5, 6, 11, 0.84) 72%,
    rgba(5, 6, 11, 0.62) 100%
  );
}

/* ============================================================
   21. SCROLL PERFORMANCE
   ------------------------------------------------------------
   Measured at 1440: p95 frame 66.6ms, 18.6% dropped. Removing any
   one full-viewport layer took it to ~26.8ms, which says the cost
   was cumulative compositing area rather than a single offender.
   ============================================================ */

/* The grain was inset:-50%, i.e. a layer four times the viewport
   area (2880x1800 at 1440x900), permanently promoted by
   will-change and repainted by its own animation. The animation
   only translates by +/-2%, so a 6% bleed is all it ever needed:
   same effect, about a quarter of the pixels, no forced layer. */
.cine-grain {
  inset: -6%;
  will-change: auto;
  animation-duration: 8s;
}

/* Paint containment on the fixed decorative layers so they cannot
   invalidate anything outside themselves. */
.cine-vignette,
.cine-grain { contain: strict; }

/* ------------------------------------------------------------
   backdrop-filter. With every other layer left on, removing
   backdrop-filter alone took 1440 scroll to p95 13.5ms / 4.5%
   dropped - the biggest single lever measured.

   Only three were visible on the landing page. The grounded nav
   is the costly one: a fixed 1440x90 region re-blurring content
   that moves under it on every scroll frame. Over this page's
   near-black ground a 0.9 opaque bar reads the same, without
   sampling anything.
   ------------------------------------------------------------ */
.landing-nav.is-grounded {
  background: rgba(5, 6, 11, 0.9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cine-world-badge {
  background: rgba(5, 6, 11, 0.72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.landing-choose-own-input {
  background: rgba(8, 10, 18, 0.74) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The other 23 sit on overlays that are hidden while the landing
   view is up (email capture, journey prep, the player). Hidden via
   opacity they can still be composited, so they are switched off
   for as long as body.view-landing holds, and return untouched the
   moment the landing view is dismissed. */
body.view-landing .experience-canvas *,
body.view-landing .dream-video-wrapper *,
body.view-landing .email-collection-backdrop,
body.view-landing .email-collection-card,
body.view-landing .world-selection-screen * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   22. SAFE AREAS
   ------------------------------------------------------------
   The viewport meta sets viewport-fit=cover, so on notched and
   dynamic-island iPhones the page draws under the status bar and
   home indicator. style.css and dream-journey.css already pad for
   that; the cinematic layer did not, which put the logo and the
   menu button under the status bar and the hero caption and footer
   base under the home indicator. max() keeps the designed spacing
   on devices that report no inset.
   ============================================================ */
.landing-nav {
  padding-top: max(var(--s3), env(safe-area-inset-top)) !important;
  padding-left: max(clamp(1rem, 4vw, 3.5rem), env(safe-area-inset-left)) !important;
  padding-right: max(clamp(1rem, 4vw, 3.5rem), env(safe-area-inset-right)) !important;
}
@media (max-width: 860px) {
  .landing-nav {
    padding-top: max(var(--s2), env(safe-area-inset-top)) !important;
    padding-left: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-right)) !important;
  }
}
.cine-menu {
  padding-top: max(var(--s6), calc(env(safe-area-inset-top) + var(--s5)));
  padding-bottom: max(var(--s6), calc(env(safe-area-inset-bottom) + var(--s4)));
}
.landing-hero {
  padding-bottom: max(clamp(4rem, 12vh, 9rem), calc(env(safe-area-inset-bottom) + 3rem));
}
@media (max-width: 860px) {
  .landing-hero { padding-bottom: max(clamp(3rem, 8vh, 5rem), calc(env(safe-area-inset-bottom) + 2.5rem)); }
}
.cine-footer {
  padding-bottom: max(var(--s5), calc(env(safe-area-inset-bottom) + var(--s3)));
}

/* ============================================================
   23. DESCENT SPACING, STATIC
   ------------------------------------------------------------
   Section padding used to scale with --descent at runtime, so the
   page literally grew while it was being read. Measured on a 390px
   scroll: layout-shift score 0.475 (Google's "poor" line is 0.25),
   every point of it from .landing-section, and a whole-page reflow
   on every descent step. Freezing that padding took scroll CLS to 0.

   The idea survives as fixed values: spacing still opens up the
   further down the page you are, it just no longer moves under the
   reader. Colour and saturation keep reading --descent, since those
   are paint-only and cannot shift layout.
   ============================================================ */
.landing-how      { padding-block: calc(var(--s7) * 1.18); }
.landing-pricing  { padding-block: calc(var(--s7) * 1.30); }
.landing-contact  { padding-block: calc(var(--s7) * 1.40) var(--s5) !important; }

/* Hero still. Devices that skip the video (phones, tablets, slow or
   save-data connections, reduced motion) show the video's own opening
   frame, so the scene matches desktop and nothing flashes when the video
   takes over. Phones get a centre crop at full source height: a portrait
   screen only ever displays the middle of this landscape frame, so the
   sides are dropped and what remains stays sharp at 3x DPR (31 KB). The
   440px breakpoint matches the preload media queries in index.html. */
.landing-hero {
  background-image: url('assets/images/opt/hero-frame-1600.webp') !important;
}
@media (max-width: 440px) {
  .landing-hero {
    background-image: url('assets/images/opt/hero-frame-portrait.webp') !important;
  }
}

/* The hero caption's two items stack on phones at every width. Left to
   wrap naturally they flipped between one and two rows as the web font
   swapped in (measured across 386-398px, i.e. the 390/393px iPhones),
   and the bottom-anchored hero jumped with them. Stacked, the caption is
   the same height under either font; 360-375px already rendered this way. */
@media (max-width: 440px) {
  .cine-hero-meta { flex-direction: column; flex-wrap: nowrap; gap: 0.35rem; }
}

/* Chat Back/Continue sized by padding + line-height alone, which left Back
   at 43px after a sub-pixel font-metric change. An explicit floor keeps
   both at the 44px touch minimum however the text metrics resolve. */
.dream-chat-back,
.dream-chat-next { min-height: 44px; }

/* ============================================================
   24. HERO SIGNATURE
   ------------------------------------------------------------
   Category statement set in the hero's open right-hand sky, treated
   like a film-title designation: a serif lead line, a tracked sans
   line beneath, one solid hairline binding them. Absolutely
   positioned so it takes no space in the hero's grid: the headline,
   CTA and caption keep exactly the positions they had without it.
   ============================================================ */
.cine-hero-signature {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 14%;
  right: clamp(1.25rem, 6vw, 6rem);
  height: fit-content;
  margin: auto 0;
  padding: 0.15rem 1.75rem 0.15rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(236, 224, 184, 0.92);
  /* A soft dark halo, not a glow: keeps the tracked caps crisp over
     the brighter stars without reading as an effect. */
  text-shadow: 0 0 22px rgba(5, 6, 11, 0.85);
  pointer-events: none;
}
/* Trailing tracking would push each line's right edge off the hairline. */
.cine-hero-signature span { margin-right: -0.3em; }

.cine-hero-signature .cine-hero-signature-lead {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1.3;
  margin-right: -0.34em;
  margin-bottom: 0.45rem;
  color: var(--gold-light);
  text-shadow: 0 0 22px rgba(5, 6, 11, 0.85), 0 0 18px rgba(232, 217, 160, 0.16);
}

.cine-hero-signature::after {
  content: '';
  position: absolute;
  top: -0.9rem;
  bottom: -0.9rem;
  right: 0;
  width: 1px;
  background: rgba(232, 217, 160, 0.55);
}

/* Phones and tablets: the copy is bottom-anchored and the right-hand
   sky is too narrow, so the statement moves to the clear sky under the
   nav at a reduced scale. */
@media (max-width: 860px) {
  .cine-hero-signature {
    top: calc(max(var(--s2), env(safe-area-inset-top)) + 5rem);
    bottom: auto;
    right: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-right));
    margin: 0;
    padding-right: 1rem;
    gap: 0.15rem;
    font-size: 0.6rem;
    letter-spacing: 0.26em;
  }
  .cine-hero-signature span { margin-right: -0.26em; }
  .cine-hero-signature .cine-hero-signature-lead {
    font-size: 0.82rem;
    letter-spacing: 0.3em;
    margin-right: -0.3em;
    margin-bottom: 0.3rem;
  }
  .cine-hero-signature::after { top: -0.55rem; bottom: -0.55rem; }
}
/* Short phones (SE-class, landscape): the headline block rises into that
   sky, so the statement would crowd the eyebrow label. It steps aside. */
@media (max-width: 860px) and (max-height: 700px) {
  .cine-hero-signature { display: none; }
}

/* ============================================================
   25. DREAM OVERLAY READABILITY (measured)
   ------------------------------------------------------------
   On the full-screen Choose Your Own Dream overlay the UI text sits
   directly on the artwork. Section D above dims the vignette to 0.58
   and lifts brightness to 1.12 - correct for the landing section,
   where the copy sits in a left-hand scrim, but wrong here, where the
   text sits over the middle of the frame.

   Measured on a 390px screen with the UI hidden, sampling the
   brightest 5% of each band: worst case 2.06:1 against the sunset,
   failing across y=180-660. WCAG AA wants 4.5:1 for 20px text. The
   text was genuinely unreadable over the sun, not merely low contrast.

   So: the overlay keeps the full vignette and unbrightened artwork,
   and phones get an additional even scrim, because on a narrow screen
   the text column crosses the brightest part of the image with nowhere
   to move to.
   ============================================================ */
.dream-journey-screen .dream-cinematic-bg,
.dream-journey-screen {
  --cbg-vignette-strength: 1;
  --cbg-brightness: 1;
}

@media (max-width: 860px) {
  .dream-journey-screen .dream-cinematic-bg-vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(5, 6, 13, 0.62) 0%,
      rgba(5, 6, 13, 0.54) 24%,
      rgba(5, 6, 13, 0.52) 62%,
      rgba(5, 6, 13, 0.66) 100%
    );
  }
}

/* ============================================================
   26. PAINT COST ON PHONES (measured)
   ------------------------------------------------------------
   Isolated on the live site at 6x CPU throttle by disabling one
   effect at a time and re-measuring frame times while scrolling
   the whole page. Baseline was a 26.7ms median frame - 37fps, and
   visibly not smooth:

     baseline .............. median 26.7ms, 51 dropped frames
     without atmosphere blur median 13.4ms
     without the orb layer   median 13.4ms
     without backdrop-filter median 26.6ms  (barely moved)
     without descent filters median 26.6ms  (barely moved)

   So the cost is two blur filters, not the effects we assumed.
   Both are applied over gradients that are ALREADY smooth, so the
   blur does almost nothing a gradient is not doing for free - it
   only softens the element's box edges. On .dreamevo-atmosphere-mist
   those edges sit off-screen (left:-20%; right:-20%), so nothing
   changes visually. On .particle-orb the fade is switched to
   closest-side, which reaches full transparency inside the box and
   removes the hard edge the blur was hiding.

   Phones only: desktops have the headroom and keep both blurs.
   ============================================================ */
@media (max-width: 900px) {
  .dreamevo-atmosphere-mist {
    filter: none;
  }

  .particle-orb {
    filter: none;
    background: radial-gradient(circle closest-side, rgba(139, 92, 246, 0.22), transparent 100%);
  }
}