/* WebDoctor Studio — Cinematic Pilot
   A scroll-driven, scene-based site that mirrors the fragrance-site reference.
   Visuals are CSS-only (gradients, godrays, particles) so you can see the
   interaction + structure today, then swap in AI-generated cinematic
   backgrounds when ready. */

:root {
  /* ---- Brand-matched palette ---- */
  --midnight:        #07181C;             /* darkest backdrop, near-black teal */
  --midnight-deep:   #050F12;             /* deepest stop for scene corners */
  --teal-deep:       #0F2A2E;             /* brand deep — used in headlines + nav chrome */
  --teal-cinema:     #14545C;             /* mid-tone teal for scene atmosphere */
  --teal-accent:     #2DD4BF;             /* brand bright accent — primary interactive color */
  --teal-glow:       #5EEAD4;             /* hover/bright variant */
  --silver-1:        #F8FAFC;             /* matches existing brand silver gradient */
  --silver-2:        #E2E8F0;
  --silver-3:        #CBD5E1;
  --silver-4:        #94A3B8;

  /* ---- Text on cinematic scenes (silver-tinted, not warm cream) ---- */
  --ink-cream:       #F8FAFC;             /* primary text */
  --ink-soft:        #CBD5E1;             /* body text */
  --ink-faint:       rgba(248, 250, 252, 0.65);

  /* ---- Scene tints (all teal-family for brand cohesion) ---- */
  --scene-eden-deep: #0F2A2E;
  --scene-eden-mid:  #1B4F4A;
  --scene-eden-glow: #2DD4BF;

  --scene-portal-deep: #07181C;
  --scene-portal-mid:  #14545C;
  --scene-portal-glow: #5EEAD4;

  --scene-mist-deep:   #1A3A40;           /* light teal-mist for Chapter IV (replaces dawn) */
  --scene-mist-mid:    #2A6670;
  --scene-mist-glow:   #94A3B8;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --pacifico: 'Pacifico', cursive;
  --shadow-cinematic: 0 40px 100px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Continuous fixed atmosphere — sections scroll OVER this. Eliminates
     the visible seams between chapters that came from each section having
     its own linear-gradient base. Per-section scenes now add subtle radial
     accent lights on top of this consistent backdrop. */
  background:
    radial-gradient(ellipse 90% 60% at 50% 15%, rgba(45, 212, 191, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 15% 80%, rgba(20, 84, 92, 0.32), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 55%, rgba(94, 234, 212, 0.08), transparent 70%),
    linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 60%, var(--midnight) 100%);
  background-attachment: fixed;
  background-color: var(--midnight-deep);
}
img { max-width: 100%; display: block; }

/* ============ FULL-WIDTH HEADER ============ */
/* Flush-to-top header bar that spans the entire viewport width.
   3-column grid: brand anchored LEFT, nav links CENTERED, CTA anchored RIGHT. */
.cine-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 16px 40px;
  background: rgba(8, 20, 24, 0.78);
  border-bottom: 1px solid rgba(45, 212, 191, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.cine-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-cream);
}
.cine-brand-mark {
  /* The actual WebDoctor logo image. Bumped from 30px → 34px to match the
     increased nav spacing — gives the brand more visual presence. */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(45, 212, 191, 0.4);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.25);
}
.cine-brand-name {
  font-family: var(--pacifico);
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--teal-accent);
  text-transform: none;
}
.cine-nav-links {
  display: flex;
  gap: 28px;
  justify-self: center;     /* center within the 1fr middle column */
}
.cine-nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.25s ease;
}
.cine-nav-links a:hover { color: var(--teal-glow); }
.cine-nav-cta {
  padding: 8px 18px;
  background: var(--teal-accent);
  border: 1px solid var(--teal-accent);
  color: var(--midnight-deep);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
}
.cine-nav-cta:hover {
  background: var(--teal-glow);
  border-color: var(--teal-glow);
  color: var(--midnight-deep);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.4);
}

/* Sign-in / Dashboard button — sits between nav links and the primary "Book →" CTA.
   Outlined pill, visually subordinate to Book so we don't pull attention from
   the conversion CTA. Existing clients hit Sign in, prospects ignore it. JS in
   cinematic.js swaps the label to "Dashboard" if a session is detected. */
.cine-nav-signin {
  padding: 7px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink-faint);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.cine-nav-signin:hover {
  color: var(--teal-glow);
  border-color: rgba(94, 234, 212, 0.55);
  background: rgba(94, 234, 212, 0.06);
}
/* When logged in, the same button reads "Dashboard" — bump intensity slightly
   so a returning client's eye lands on it as the next action. */
.cine-nav-signin[data-wd-state="authed"] {
  border-color: rgba(94, 234, 212, 0.45);
  color: var(--teal-glow);
}

/* ============ CHAPTER PROGRESS RAIL ============ */
.cine-progress {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
}
.cine-progress a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  justify-content: flex-end;
}
.cine-progress a span {
  font-family: var(--serif);
  font-size: 11px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.cine-progress a em {
  font-style: normal;
  opacity: 0;
  transform: translateX(8px);
  transition: all 0.3s ease;
}
.cine-progress a:hover em,
.cine-progress a.is-active em {
  opacity: 1;
  transform: translateX(0);
}
.cine-progress a.is-active {
  color: var(--teal-glow);
}
.cine-progress a.is-active span {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
  color: var(--midnight-deep);
}

/* ============ CHAPTERS (full-bleed) ============ */
/* Density tuned down: dropped min-height: 100vh (was forcing empty space when
   chapter content was short) and pulled padding from 120px to 70px. Each
   chapter now sizes to its content but always commands meaningful presence. */
.cine-chapter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 32px 80px;
  overflow: hidden;
}
.cine-chapter-hero {
  /* Hero gets extra top clearance to breathe below the new flush header */
  min-height: 88vh;
  padding-top: 140px;
}

/* 3D WebGL canvas — fills the hero scene behind text + godrays.
   Pointer-events disabled so scrolls + clicks reach the page; the 3D scene
   tracks mouse via a global mousemove listener. */
.cine-hero-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.cine-chapter-hero .cine-godrays,
.cine-chapter-hero .cine-particles,
.cine-chapter-hero .cine-vignette { z-index: 2; }
.cine-chapter-hero .cine-content { z-index: 3; position: relative; }

/* Hero text legibility — soft dark radial scrim behind the content area
   creates a calm reading zone over the busy 3D scene. Plus one tight
   dark shadow per text element for letterform sharpness. No bright glows —
   those bled into surrounding text and made everything harder to read. */
.cine-chapter-hero .cine-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 130%;
  background: radial-gradient(
    ellipse at center,
    rgba(5, 15, 18, 0.78) 0%,
    rgba(5, 15, 18, 0.55) 40%,
    rgba(5, 15, 18, 0.25) 65%,
    transparent 90%
  );
  z-index: -1;
  pointer-events: none;
  filter: blur(8px);
}
.cine-chapter-hero .cine-headline,
.cine-chapter-hero .cine-sub {
  text-shadow: 0 2px 8px rgba(5, 15, 18, 0.85);
}
/* WebDoctor Studio eyebrow — neon-white glow.
   30% bigger (14px → 18px) plus a 6-layer luminous halo stack that mimics
   an actual neon sign: tight bright core fading through medium glow into
   soft outer bloom. Subtle pulse animation gives it the "live electricity"
   feel without being distracting. */
.cine-chapter-hero .cine-eyebrow {
  font-size: 18px;
  letter-spacing: 4.5px;
  color: #FFFFFF;
  text-shadow:
    0 0 4px   rgba(255, 255, 255, 1),
    0 0 11px  rgba(255, 255, 255, 0.95),
    0 0 22px  rgba(255, 255, 255, 0.75),
    0 0 44px  rgba(255, 255, 255, 0.55),
    0 0 80px  rgba(255, 255, 255, 0.35),
    0 0 130px rgba(255, 255, 255, 0.2);
  animation: neon-pulse 4.5s ease-in-out infinite;
}
@keyframes neon-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50%      { opacity: 0.92; filter: brightness(1.08); }
}
.cine-chapter-hero .cine-headline-accent {
  /* Keep the brand teal color but only a tight dark anchor — no halo glow */
  text-shadow: 0 2px 8px rgba(5, 15, 18, 0.85);
}

/* ---- Scene atmospherics (full-bleed bg layer) ---- */
.cine-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* All five scenes are now LIGHT TOUCHES of radial accents that layer on top
   of the body's continuous atmosphere. No base linear-gradient — that lives
   on body so chapters share a seamless backdrop. Each scene still has its
   own "lighting signature" (where the teal glow hits, where shadows fall). */

/* Midnight teal (Chapter I — Hero) */
.cine-scene-midnight {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(45, 212, 191, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(20, 84, 92, 0.25), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 70%, rgba(94, 234, 212, 0.08), transparent 70%);
}

/* Eden green-teal (Chapter II) — keeps the green nod to Eden Medspa */
.cine-scene-eden {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(45, 212, 191, 0.14), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(27, 79, 74, 0.32), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 30%, rgba(94, 234, 212, 0.10), transparent 70%);
}

/* Three Doors — brand teal portals */
.cine-scene-purple {
  background:
    radial-gradient(ellipse 60% 80% at 50% 30%, rgba(94, 234, 212, 0.14), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(20, 84, 92, 0.25), transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 70%, rgba(45, 212, 191, 0.10), transparent 70%);
}

/* Silver-teal mist (Chapter IV) */
.cine-scene-dawn {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(148, 163, 184, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(45, 212, 191, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 40%, rgba(94, 234, 212, 0.10), transparent 70%);
}

/* Convergence — teal radiating from center */
.cine-scene-convergence {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(45, 212, 191, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(94, 234, 212, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(45, 212, 191, 0.10), transparent 70%);
}

/* ---- Godrays ---- */
.cine-godrays {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0px,
      transparent 80px,
      rgba(45, 212, 191, 0.04) 80px,
      rgba(45, 212, 191, 0.04) 120px
    );
  mix-blend-mode: screen;
  opacity: 0.6;
  filter: blur(40px);
  animation: cine-godrays-drift 28s linear infinite;
}
.cine-godrays-warm {
  background: repeating-linear-gradient(
    105deg,
    transparent 0px,
    transparent 100px,
    rgba(94, 234, 212, 0.06) 100px,
    rgba(94, 234, 212, 0.06) 160px
  );
}
.cine-godrays-violet {
  background: repeating-linear-gradient(
    105deg,
    transparent 0px,
    transparent 90px,
    rgba(45, 212, 191, 0.07) 90px,
    rgba(45, 212, 191, 0.07) 140px
  );
}
.cine-godrays-dawn {
  background: repeating-linear-gradient(
    105deg,
    transparent 0px,
    transparent 80px,
    rgba(148, 163, 184, 0.08) 80px,
    rgba(148, 163, 184, 0.08) 130px
  );
}
.cine-godrays-converge {
  background:
    conic-gradient(from 90deg at 50% 50%,
      transparent 0deg,
      rgba(45, 212, 191, 0.06) 30deg,
      transparent 60deg,
      rgba(94, 234, 212, 0.05) 90deg,
      transparent 120deg,
      rgba(45, 212, 191, 0.06) 150deg,
      transparent 180deg,
      rgba(94, 234, 212, 0.05) 210deg,
      transparent 240deg,
      rgba(45, 212, 191, 0.06) 270deg,
      transparent 300deg,
      rgba(94, 234, 212, 0.05) 330deg,
      transparent 360deg);
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: blur(30px);
}
@keyframes cine-godrays-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(120px); }
}

/* ---- Floating particles ---- */
.cine-particles {
  position: absolute;
  inset: 0;
}
.cine-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--teal-glow);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(94, 234, 212, 0.7);
  opacity: 0;
  animation: cine-float 12s ease-in infinite;
}
.cine-particles span:nth-child(1)  { left: 5%;  animation-delay: 0s;    animation-duration: 14s; }
.cine-particles span:nth-child(2)  { left: 15%; animation-delay: 1.2s;  animation-duration: 16s; }
.cine-particles span:nth-child(3)  { left: 25%; animation-delay: 2.4s;  animation-duration: 13s; }
.cine-particles span:nth-child(4)  { left: 35%; animation-delay: 3.6s;  animation-duration: 15s; }
.cine-particles span:nth-child(5)  { left: 45%; animation-delay: 4.8s;  animation-duration: 17s; }
.cine-particles span:nth-child(6)  { left: 55%; animation-delay: 1.5s;  animation-duration: 14s; }
.cine-particles span:nth-child(7)  { left: 65%; animation-delay: 2.7s;  animation-duration: 16s; }
.cine-particles span:nth-child(8)  { left: 75%; animation-delay: 3.9s;  animation-duration: 13s; }
.cine-particles span:nth-child(9)  { left: 85%; animation-delay: 5.1s;  animation-duration: 15s; }
.cine-particles span:nth-child(10) { left: 95%; animation-delay: 0.3s;  animation-duration: 17s; }
.cine-particles span:nth-child(11) { left: 10%; animation-delay: 6.0s;  animation-duration: 14s; }
.cine-particles span:nth-child(12) { left: 30%; animation-delay: 7.2s;  animation-duration: 16s; }
.cine-particles span:nth-child(13) { left: 50%; animation-delay: 8.4s;  animation-duration: 13s; }
.cine-particles span:nth-child(14) { left: 70%; animation-delay: 9.6s;  animation-duration: 15s; }
.cine-particles span:nth-child(15) { left: 90%; animation-delay: 10.8s; animation-duration: 17s; }
.cine-particles-soft span { background: var(--teal-accent); box-shadow: 0 0 6px rgba(45, 212, 191, 0.6); }
@keyframes cine-float {
  0%   { transform: translateY(100vh) translateX(0) scale(0.4); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-20vh) translateX(40px) scale(1); opacity: 0; }
}

/* ---- Vignette ---- */
.cine-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 90% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* ============ CHAPTER CONTENT (above scenes) ============ */
.cine-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.cine-content-center { text-align: center; max-width: 920px; }

.cine-eyebrow {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--teal-accent);
  margin: 0 0 24px;
  font-weight: 500;
}
.cine-headline {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-cream);
  margin: 0 0 32px;
}
.cine-headline-mid { font-size: clamp(34px, 5vw, 64px); }
.cine-headline-accent {
  font-style: italic;
  color: var(--teal-glow);
  font-weight: 300;
}
.cine-sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 auto 40px;
  max-width: 620px;
  font-weight: 300;
}

/* ---- Cinematic CTA button ---- */
.cine-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: transparent;
  border: 1px solid var(--teal-accent);
  color: var(--teal-glow);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
}
.cine-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(94, 234, 212, 0.4), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cine-cta:hover {
  background: var(--teal-accent);
  color: var(--midnight-deep);
  box-shadow: 0 0 40px rgba(45, 212, 191, 0.4);
  transform: translateY(-2px);
}
.cine-cta:hover::before { opacity: 1; }
.cine-cta span { position: relative; z-index: 1; }

/* Dual-CTA row in hero: primary (teal-filled) + ghost (transparent) side-by-side */
.cine-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cine-cta-ghost {
  border-color: rgba(248, 250, 252, 0.25);
  color: var(--ink-cream);
}
.cine-cta-ghost::before { display: none; }
.cine-cta-ghost:hover {
  background: transparent;
  color: var(--teal-glow);
  border-color: var(--teal-glow);
  box-shadow: 0 0 30px rgba(94, 234, 212, 0.2);
}

/* ---- Scroll hint ---- */
.cine-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 3;
}
.cine-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--teal-accent) 0%, transparent 100%);
  animation: cine-scroll-pulse 2s ease-in-out infinite;
}
@keyframes cine-scroll-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ============ CHAPTER II — EDEN GLASS PANELS ============ */
.cine-chapter-eden {
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  gap: 30px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 120px 60px;
}

.cine-panel {
  position: relative;
  z-index: 2;
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 12px;
  padding: 28px 26px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.cine-panel-num {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-accent);
  margin: 0 0 12px;
}
.cine-panel-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink-cream);
  letter-spacing: -0.01em;
}
.cine-panel-tag {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.cine-panel-prose {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 300;
}
.cine-panel-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(45, 212, 191, 0.15);
  margin: 0;
}
.cine-panel-stat-row:last-of-type { border-bottom: none; }
.cine-panel-stat-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--teal-glow);
}
.cine-panel-stat-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-panel-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-accent);
  padding-bottom: 4px;
  transition: all 0.25s ease;
}
.cine-panel-link:hover {
  color: var(--teal-glow);
  border-bottom-color: var(--teal-glow);
}

/* Center stage — the Eden browser screenshot, floating */
.cine-stage {
  position: relative;
  z-index: 2;
}
.cine-browser {
  position: relative;
  background: var(--midnight);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-cinematic);
  transform: perspective(1200px) rotateY(-3deg);
  transition: transform 0.6s ease;
}
.cine-browser:hover {
  transform: perspective(1200px) rotateY(0deg) scale(1.02);
}
.cine-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #161A1F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cine-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3A3F44;
}
.cine-browser-bar em {
  margin-left: 12px;
  padding: 3px 12px;
  background: #0E1216;
  border-radius: 4px;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-faint);
  font-family: ui-monospace, monospace;
}
.cine-browser-shot {
  width: 100%;
  height: auto;
  display: block;
}

/* ============ CHAPTER III — THREE DOORS ============ */
.cine-doors-content { padding-top: 30px; }
.cine-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 60px auto 40px;
  max-width: 1000px;
}
.cine-door {
  position: relative;
  padding: 50px 28px 36px;
  text-align: center;
  background: rgba(7, 24, 28, 0.4);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all 0.5s ease;
}
/* Rich hover: dilated portal glow, lifted card, scale, brighter name + price,
   pulsing glow shadow. Each child element responds for a "portal opening" feel. */
.cine-door:hover {
  border-color: var(--teal-accent);
  transform: translateY(-10px) scale(1.02);
  background: rgba(7, 24, 28, 0.55);
  box-shadow:
    0 30px 80px rgba(45, 212, 191, 0.30),
    0 0 60px rgba(45, 212, 191, 0.18),
    inset 0 0 0 1px rgba(94, 234, 212, 0.35);
}
.cine-door:hover .cine-door-portal {
  animation-duration: 1.8s;          /* speed the pulse up */
  width: 170px;
  height: 170px;
  filter: blur(24px);
  opacity: 1;
}
.cine-door:hover .cine-door-name {
  color: var(--teal-glow);
  text-shadow: 0 0 18px rgba(94, 234, 212, 0.5);
}
.cine-door:hover .cine-door-price {
  text-shadow: 0 0 24px rgba(94, 234, 212, 0.45);
}
.cine-door:hover .cine-door-link {
  color: var(--teal-glow);
  letter-spacing: 3.5px;
}
.cine-door-portal,
.cine-door-name,
.cine-door-price,
.cine-door-link {
  transition: all 0.4s ease;
}

.cine-door-featured {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.12), rgba(7, 24, 28, 0.4));
  border-color: rgba(45, 212, 191, 0.45);
  transform: scale(1.04);
}
.cine-door-featured:hover { transform: scale(1.04) translateY(-10px); }

.cine-door-portal {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.45) 0%, rgba(45, 212, 191, 0.15) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(20px);
  animation: cine-portal-pulse 4s ease-in-out infinite;
}
.cine-door-portal-bright {
  background: radial-gradient(circle, rgba(94, 234, 212, 0.6) 0%, rgba(45, 212, 191, 0.25) 40%, transparent 70%);
}
@keyframes cine-portal-pulse {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.7; }
  50%      { transform: translateX(-50%) scale(1.15); opacity: 1;   }
}

.cine-door-num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--teal-accent);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.cine-door-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink-cream);
  margin: 0 0 4px;
}
.cine-door-price {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  color: var(--teal-glow);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
/* "/mo" suffix on monthly tier prices */
.cine-door-price span {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 4px;
  letter-spacing: 0;
}
/* Bullet highlight ("Custom website build included") on monthly tiers */
.cine-door-bullets li.bullet-highlight {
  color: var(--teal-glow);
  font-weight: 600;
  position: relative;
  padding-left: 18px;
}
.cine-door-bullets li.bullet-highlight::before {
  content: '✦';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--teal-accent);
  font-size: 14px;
}

/* ============ NEW: Pricing toggle (Chapter II) ============ */
.cine-pricing-tabs {
  display: inline-flex;
  background: rgba(7, 24, 28, 0.55);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
  margin: 30px auto 50px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cine-pricing-tab {
  padding: 10px 22px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.cine-pricing-tab:hover { color: var(--ink-cream); }
.cine-pricing-tab.active {
  background: var(--teal-accent);
  color: var(--midnight-deep);
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.4);
}

/* Panel switching (uses the same .pricing-panel.active hook initPricingTabs toggles) */
.cine-pricing-panel { display: none; }
.cine-pricing-panel.active {
  display: block;
  animation: cine-pricing-fade 0.35s ease;
}
@keyframes cine-pricing-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cine-door-detail {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 22px;
  font-weight: 300;
}
.cine-door-link {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--teal-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-accent);
  padding-bottom: 3px;
  transition: all 0.25s ease;
}
.cine-door-link:hover { color: var(--teal-glow); border-bottom-color: var(--teal-glow); }

.cine-footnote {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-faint);
  margin-top: 20px;
}

/* ============ CHAPTER IV — SPLIT LAYOUT ============ */
.cine-content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
}
.cine-tiers {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cine-tier {
  padding: 22px 24px;
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}
.cine-tier:hover {
  border-color: var(--teal-accent);
  background: rgba(248, 250, 252, 0.07);
}
.cine-tier-featured {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(248, 250, 252, 0.04));
  border-color: rgba(45, 212, 191, 0.45);
}
.cine-tier-name {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--ink-cream);
}
.cine-tier-price {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--teal-glow);
  margin: 0 0 6px;
}
.cine-tier-price em {
  font-style: normal;
  font-size: 14px;
  color: var(--ink-faint);
  margin-left: 4px;
}
.cine-tier-desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
  font-weight: 300;
}

/* ============ CHAPTER V — FORM ============ */
.cine-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin: 40px auto 0;
  text-align: left;
}
.cine-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cine-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cine-form label span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal-accent);
}
.cine-form input,
.cine-form textarea {
  padding: 14px 16px;
  background: rgba(248, 250, 252, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 8px;
  color: var(--ink-cream);
  font-family: var(--sans);
  font-size: 15px;
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
  resize: vertical;
}
.cine-form input::placeholder,
.cine-form textarea::placeholder { color: var(--ink-faint); }
.cine-form input:focus,
.cine-form textarea:focus {
  outline: none;
  border-color: var(--teal-accent);
  background: rgba(248, 250, 252, 0.08);
}
.cine-cta-form {
  align-self: flex-start;
  border: none;
  background: var(--teal-accent);
  color: var(--midnight-deep);
  margin-top: 8px;
}
.cine-cta-form:hover { background: var(--teal-glow); color: var(--midnight-deep); }
.cine-form-note {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* ============ FOOTER ============ */
.cine-footer {
  padding: 50px 24px;
  background: var(--midnight-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 2;
}
.cine-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.cine-footer-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}
.cine-footer-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.cine-footer-links {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.cine-footer-links a {
  color: var(--teal-accent);
  text-decoration: none;
  transition: color 0.25s ease;
}
.cine-footer-links a:hover { color: var(--teal-glow); }
.cine-footer-links span {
  margin: 0 12px;
  color: rgba(248, 250, 252, 0.3);
}

/* ============ NEW: TRUST BAR (Chapter I) ============ */
.cine-trust {
  list-style: none;
  padding: 0;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 760px;
  border-top: 1px solid rgba(45, 212, 191, 0.18);
  padding-top: 32px;
}
.cine-trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.cine-trust strong {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--teal-glow);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cine-trust span {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============ NEW: THUMB ROW (Chapter II) ============ */
.cine-thumb-row {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cine-thumb-row a {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.18);
  transition: all 0.25s ease;
}
.cine-thumb-row a:hover {
  border-color: var(--teal-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(45, 212, 191, 0.25);
}
.cine-thumb-row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 506;
  object-fit: cover;
}
.cine-thumb-row span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: rgba(7, 24, 28, 0.85);
  backdrop-filter: blur(8px);
  color: var(--teal-glow);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ============ NEW: DOOR + TIER BULLETS ============ */
.cine-door-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cine-door-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 300;
}
.cine-door-bullets li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -2px;
  color: var(--teal-accent);
  font-weight: 700;
  font-size: 18px;
}

.cine-tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cine-tier-bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cine-tier-bullets li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 300;
}
.cine-tier-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal-accent);
  font-size: 10px;
  font-weight: 700;
}
/* "Custom website build included" callout — the key monthly value prop.
   Mirrors the .cine-door-bullets highlight treatment for visual consistency. */
.cine-tier-bullets li.bullet-highlight {
  color: var(--teal-glow);
  font-weight: 600;
  padding-left: 18px;
  margin-bottom: 2px;
}
.cine-tier-bullets li.bullet-highlight::before {
  content: '✦';
  left: 2px;
  top: 1px;
  color: var(--teal-accent);
  font-size: 11px;
}

/* ============ NEW: WORK-PAGE CHROME ============ */
/* Active nav indicator (Work page → "Work" highlighted) */
.cine-nav-current {
  color: var(--teal-glow) !important;
  position: relative;
}
.cine-nav-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--teal-accent);
  border-radius: 2px;
  opacity: 0.8;
}

/* Smaller intro than the homepage hero — work page jumps right to the work */
.cine-work-intro {
  padding-top: 150px;
  padding-bottom: 50px;
  min-height: auto;
}

/* Process numbered list (Roman numerals, glass cards) */
.cine-process {
  list-style: none;
  padding: 0;
  margin: 50px auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
  counter-reset: process;
}
.cine-process li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 26px;
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}
.cine-process li:hover {
  border-color: var(--teal-accent);
  background: rgba(248, 250, 252, 0.06);
}
.cine-process-num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--teal-glow);
  text-align: center;
  letter-spacing: 2px;
}
.cine-process h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink-cream);
}
.cine-process p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 300;
}

/* ============ NEW: CONTACT TWO-COLUMN (Chapter V) ============ */
.cine-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  text-align: left;
  max-width: 1100px;
}
.cine-contact-copy { padding-top: 8px; }
.cine-contact-copy .cine-sub { margin-left: 0; }
.cine-contact-meta {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cine-contact-meta li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(45, 212, 191, 0.12);
}
.cine-contact-meta em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--teal-accent);
  font-weight: 600;
}
.cine-contact-meta a,
.cine-contact-meta span {
  font-size: 14px;
  color: var(--ink-cream);
  text-decoration: none;
  font-weight: 400;
}
.cine-contact-meta a:hover { color: var(--teal-glow); }

.cine-contact-grid .cine-form { margin: 0; max-width: 100%; }

/* ============ NEW: PROJECT-SCOPE FORM-BUILDER (dark theme) ============ */
/* Mirrors the standard site's scope-builder structure (.form-builder, .slider,
   .toggle-options) so script.js's initSliders + initToggles work as-is.
   Styling is dark-glass to fit the cinematic palette. */
.cine-form-builder {
  background: rgba(45, 212, 191, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 12px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cine-form-builder-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--teal-glow);
  font-weight: 500;
}

/* Slider group */
.cine-form-builder .slider-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cine-form-builder .slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.cine-form-builder .slider-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-cream);
  line-height: 1.35;
}
.cine-form-builder .slider-value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--teal-glow);
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
  line-height: 1;
}
.cine-form-builder .slider-sub {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

/* The range input itself — dark teal track with bright thumb */
.cine-form-builder .slider {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--teal-accent) 0%,
    var(--teal-accent) var(--fill),
    rgba(248, 250, 252, 0.12) var(--fill),
    rgba(248, 250, 252, 0.12) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 6px 0 4px;
}
.cine-form-builder .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--teal-accent);
  border-radius: 50%;
  border: 2px solid var(--midnight-deep);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cine-form-builder .slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.8);
}
.cine-form-builder .slider::-webkit-slider-thumb:active {
  background: var(--teal-glow);
  transform: scale(1.25);
}
.cine-form-builder .slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--teal-accent);
  border-radius: 50%;
  border: 2px solid var(--midnight-deep);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.6);
  cursor: pointer;
}
.cine-form-builder .slider:focus { outline: none; }

/* Yes / No toggle pills */
.cine-form-builder .toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}
.cine-form-builder .toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-cream);
  line-height: 1.35;
  flex: 1;
}
.cine-form-builder .toggle-options {
  display: inline-flex;
  background: rgba(248, 250, 252, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.cine-form-builder .toggle-opt {
  padding: 6px 18px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}
.cine-form-builder .toggle-opt:hover { color: var(--teal-glow); }
.cine-form-builder .toggle-opt.active {
  background: var(--teal-accent);
  color: var(--midnight-deep);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.5);
}
.cine-form-builder .toggle-opt.active:hover { color: var(--midnight-deep); }

@media (max-width: 600px) {
  .cine-form-builder .toggle-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ============ CINEMATIC AUTH (login page) ============ */
.cine-auth-body {
  margin: 0;
  min-height: 100vh;
  background: var(--midnight-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
.cine-auth-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.cine-auth-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cine-auth-back {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  align-self: center;
  transition: color 0.2s ease;
}
.cine-auth-back:hover { color: var(--teal-glow); }
.cine-auth-card {
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 16px;
  padding: 40px 36px 32px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-cinematic);
}
.cine-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.cine-auth-brand img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(45, 212, 191, 0.4);
}
.cine-auth-brand span {
  font-family: var(--pacifico);
  font-size: 20px;
  color: var(--teal-accent);
}
.cine-auth-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-cream);
  margin: 0 0 10px;
}
.cine-auth-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 26px;
  line-height: 1.55;
  font-weight: 300;
}
.cine-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.cine-auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cine-auth-form label span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal-accent);
}
.cine-auth-form input {
  padding: 13px 16px;
  background: rgba(7, 24, 28, 0.4);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-cream);
  transition: all 0.2s ease;
}
.cine-auth-form input::placeholder { color: var(--ink-faint); }
.cine-auth-form input:focus {
  outline: none;
  border-color: var(--teal-accent);
  background: rgba(7, 24, 28, 0.6);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}
.cine-auth-error {
  margin: 0;
  font-size: 13px;
  color: #FCA5A5;
  background: rgba(220, 38, 38, 0.12);
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid #DC2626;
}
.cine-auth-error[hidden] { display: none; }
.cine-auth-form .cine-cta-form {
  align-self: stretch;
  text-align: center;
  justify-content: center;
}

.cine-auth-demo {
  padding: 20px 18px;
  background: rgba(45, 212, 191, 0.05);
  border: 1px dashed rgba(45, 212, 191, 0.3);
  border-radius: 12px;
}
.cine-auth-demo-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal-glow);
}
.cine-auth-demo-sub {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--ink-soft);
}
.cine-auth-demo-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(7, 24, 28, 0.4);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}
.cine-auth-demo-row:hover {
  border-color: var(--teal-accent);
  transform: translateY(-1px);
  background: rgba(7, 24, 28, 0.7);
}
.cine-auth-demo-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-glow);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cine-auth-demo-meta {
  font-size: 11px;
  color: var(--ink-faint);
}
.cine-auth-demo-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
}
.cine-auth-demo-note code {
  background: rgba(7, 24, 28, 0.6);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(45, 212, 191, 0.2);
  font-size: 11px;
  color: var(--teal-glow);
  font-family: ui-monospace, monospace;
}

/* ============ CINEMATIC DASHBOARD ============ */
/* Same midnight teal family as the marketing chapters, but lifted slightly
   for dashboard readability (where users spend 5+ minutes). About 20% lighter
   than --midnight-deep — same color identity, more breathing room. */
.cine-dash-body {
  margin: 0;
  background: #0A1C20;  /* slight lift from #050F12 — same midnight teal family */
  color: var(--ink-cream);
  min-height: 100vh;
  position: relative;
}
/* Page-wide subtle atmosphere — calm, low-motion, with modest teal accent glow */
.cine-dash-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(45, 212, 191, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 100%, rgba(20, 84, 92, 0.28), transparent 70%),
    linear-gradient(180deg, #0F2429 0%, #0A1C20 100%);
}

/* Top bar — extend the nav with user info on the right */
.cine-dash-body .cine-nav {
  grid-template-columns: auto 1fr auto;
}
.cine-dash-userbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cine-dash-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.cine-dash-user-business {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-cream);
}
.cine-dash-user-email {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.4px;
}
.cine-dash-signout {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(248, 250, 252, 0.18);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cine-dash-signout:hover {
  border-color: var(--teal-accent);
  color: var(--teal-glow);
}

/* Main content area */
.cine-dash-main {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Welcome panel with side plan card */
.cine-dash-welcome {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 36px;
  background: rgba(248, 250, 252, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.20);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  position: relative;
  overflow: hidden;
}
.cine-dash-welcome::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.20), transparent 70%);
  pointer-events: none;
}
.cine-dash-welcome-copy { position: relative; z-index: 1; }
.cine-dash-title {
  margin: 8px 0 8px;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-cream);
}
.cine-dash-sub {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-weight: 300;
}
.cine-dash-plan {
  position: relative;
  z-index: 1;
  background: rgba(5, 15, 18, 0.55);
  border: 1px solid rgba(45, 212, 191, 0.30);
  border-radius: 12px;
  padding: 22px 24px;
}
.cine-dash-plan-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal-glow);
}
.cine-dash-plan-tier {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink-cream);
  letter-spacing: -0.01em;
}
.cine-dash-plan-price {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-faint);
}
.cine-dash-plan-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(45, 212, 191, 0.15);
  border-bottom: 1px solid rgba(45, 212, 191, 0.15);
  font-size: 13px;
  margin-bottom: 14px;
}
.cine-dash-plan-meta span { color: var(--ink-faint); }
.cine-dash-plan-meta strong {
  color: var(--ink-cream);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
}
.cine-dash-plan-link {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-glow);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.cine-dash-plan-link:hover { color: var(--teal-accent); }

/* Generic dashboard card */
.cine-dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.cine-dash-card {
  background: rgba(248, 250, 252, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 14px;
  padding: 28px 28px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.cine-dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.cine-dash-card-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-cream);
  letter-spacing: -0.01em;
}
.cine-dash-card-period {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
}
.cine-dash-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.cine-dash-tag-good {
  background: rgba(45, 212, 191, 0.18);
  color: var(--teal-glow);
  border: 1px solid rgba(45, 212, 191, 0.3);
}
.cine-dash-linkbtn {
  background: rgba(45, 212, 191, 0.12);
  color: var(--teal-glow);
  border: 1px solid rgba(45, 212, 191, 0.25);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cine-dash-linkbtn:hover {
  background: var(--teal-accent);
  color: var(--midnight-deep);
}

/* Usage block (renderUsage from dashboard.js produces .usage-headline / .usage-progress) */
.cine-dash-card-usage .usage-headline {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  color: var(--teal-glow);
  margin: 0;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cine-dash-card-usage .usage-headline span {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 8px;
}
.cine-dash-card-usage .usage-progress {
  height: 6px;
  background: rgba(5, 15, 18, 0.55);
  border-radius: 999px;
  overflow: hidden;
  margin: 18px 0 12px;
}
.cine-dash-card-usage .usage-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-accent), var(--teal-glow));
  border-radius: 999px;
  transition: width 0.6s ease;
}
.cine-dash-card-usage .usage-progress-fill.tone-fresh    { background: linear-gradient(90deg, var(--teal-glow), var(--teal-accent)); }
.cine-dash-card-usage .usage-progress-fill.tone-active   { background: linear-gradient(90deg, var(--teal-accent), #14B8A6); }
.cine-dash-card-usage .usage-progress-fill.tone-warming  { background: linear-gradient(90deg, #14B8A6, #0F766E); }
.cine-dash-card-usage .usage-progress-fill.tone-exceeded { background: linear-gradient(90deg, #FB7185, #E11D48); }
.cine-dash-card-usage .usage-detail {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.cine-dash-card-usage .usage-pill-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.cine-dash-card-usage .usage-pill {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 24, 28, 0.5);
  border: 1px solid rgba(45, 212, 191, 0.15);
  color: var(--ink-faint);
  letter-spacing: 0.3px;
}

/* Site health list */
.cine-dash-health {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cine-dash-health li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(45, 212, 191, 0.10);
  font-size: 14px;
}
.cine-dash-health li:last-child { border-bottom: none; }
.cine-dash-health-label { color: var(--ink-soft); }
.cine-dash-health-value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--teal-glow);
  font-variant-numeric: tabular-nums;
}

/* New-request inline form */
.cine-dash-newreq {
  background: rgba(5, 15, 18, 0.45);
  border: 1px solid rgba(45, 212, 191, 0.20);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cine-dash-newreq[hidden] { display: none; }
.cine-dash-newreq label { display: flex; flex-direction: column; gap: 6px; }
.cine-dash-newreq label span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-accent);
}
.cine-dash-newreq input,
.cine-dash-newreq textarea {
  padding: 11px 14px;
  background: rgba(5, 15, 18, 0.6);
  border: 1px solid rgba(45, 212, 191, 0.20);
  border-radius: 6px;
  color: var(--ink-cream);
  font-family: var(--sans);
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.cine-dash-newreq input:focus,
.cine-dash-newreq textarea:focus {
  outline: none;
  border-color: var(--teal-accent);
}
.cine-dash-newreq-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.cine-dash-btn {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--teal-accent);
  color: var(--midnight-deep);
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cine-dash-btn:hover {
  background: var(--teal-glow);
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.4);
}
.cine-dash-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(248, 250, 252, 0.18);
}
.cine-dash-btn-ghost:hover {
  background: transparent;
  border-color: var(--teal-accent);
  color: var(--teal-glow);
  box-shadow: none;
}

/* Requests table */
.cine-dash-table-wrap { overflow-x: auto; }
.cine-dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cine-dash-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid rgba(45, 212, 191, 0.15);
}
.cine-dash-table tbody td {
  padding: 14px;
  border-bottom: 1px solid rgba(45, 212, 191, 0.08);
  vertical-align: middle;
  color: var(--ink-cream);
}
.cine-dash-table tbody tr:last-child td { border-bottom: none; }
.cine-dash-table .req-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.cine-dash-table .req-title {
  color: var(--ink-cream);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cine-dash-table .req-date {
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}
/* Tiny category dots inside request rows (rendered by dashboard.js) */
.cine-dash-table .cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cine-dash-table .cat-content { background: #5EEAD4; }
.cine-dash-table .cat-design  { background: var(--teal-accent); }
.cine-dash-table .cat-feature { background: #0D9488; }
.cine-dash-table .cat-bug     { background: #FCA5A5; }
.cine-dash-table .cat-health  { background: var(--silver-4); }

/* Status badges */
.cine-dash-table .status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.cine-dash-table .status-badge.received    { background: rgba(148, 163, 184, 0.2); color: var(--silver-4); }
.cine-dash-table .status-badge.in_progress { background: rgba(45, 212, 191, 0.2); color: var(--teal-glow); }
.cine-dash-table .status-badge.done        { background: rgba(15, 118, 110, 0.3); color: #6FBE9F; }

/* Changes timeline */
.cine-dash-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cine-dash-timeline li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  padding: 14px 0 14px 14px;
  border-bottom: 1px solid rgba(45, 212, 191, 0.08);
  align-items: baseline;
  position: relative;
}
.cine-dash-timeline li:last-child { border-bottom: none; }
.cine-dash-timeline li.change-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 1px;
  background: rgba(45, 212, 191, 0.4);
}
.cine-dash-timeline li.cat-row-content::before { background: #5EEAD4; }
.cine-dash-timeline li.cat-row-design::before  { background: var(--teal-accent); }
.cine-dash-timeline li.cat-row-feature::before { background: #0D9488; }
.cine-dash-timeline li.cat-row-bug::before     { background: #FCA5A5; }
.cine-dash-timeline li.cat-row-health::before  { background: var(--silver-4); }
.cine-dash-timeline .changes-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-dash-timeline .changes-what {
  color: var(--ink-cream);
  font-size: 14px;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cine-dash-timeline .cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.cine-dash-timeline .cat-content { background: #5EEAD4; }
.cine-dash-timeline .cat-design  { background: var(--teal-accent); }
.cine-dash-timeline .cat-feature { background: #0D9488; }
.cine-dash-timeline .cat-bug     { background: #FCA5A5; }
.cine-dash-timeline .cat-health  { background: var(--silver-4); }

/* Quick links */
.cine-dash-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.cine-dash-quicklinks .quicklink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(5, 15, 18, 0.55);
  border: 1px solid rgba(45, 212, 191, 0.20);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.cine-dash-quicklinks .quicklink:hover {
  border-color: var(--teal-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(45, 212, 191, 0.15);
}
.cine-dash-quicklinks .quicklink-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--teal-accent);
  color: var(--midnight-deep);
}
.cine-dash-quicklinks .brand-vercel  .quicklink-icon { background: #FFFFFF; color: #000; }
.cine-dash-quicklinks .brand-godaddy .quicklink-icon { background: #1BDBDB; color: #003B47; }
.cine-dash-quicklinks .brand-resend  .quicklink-icon { background: #FFFFFF; color: #111827; }
.cine-dash-quicklinks .brand-google  .quicklink-icon { background: #4285F4; color: #FFFFFF; }
.cine-dash-quicklinks .quicklink-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.25;
}
.cine-dash-quicklinks .quicklink-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-dash-quicklinks .quicklink-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-cream);
}
.cine-dash-quicklinks .quicklink-arrow {
  color: var(--ink-faint);
  font-size: 16px;
  transition: all 0.2s ease;
}
.cine-dash-quicklinks .quicklink:hover .quicklink-arrow {
  color: var(--teal-glow);
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .cine-dash-welcome { grid-template-columns: 1fr; padding: 26px; }
  .cine-dash-row { grid-template-columns: 1fr; }
  .cine-dash-userbar { gap: 8px; }
  .cine-dash-user { display: none; }
  .cine-dash-main { padding: 110px 18px 50px; }
  .cine-dash-timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 14px; }
}

/* ============ CINEMATIC AUDIT PAGE ============ */
/* Same audit logic as the standard /audit page (powered by script.js
   matching element IDs), but with dark cinematic styling. */

.cine-audit-intro {
  padding-top: 140px;
  padding-bottom: 30px;
  min-height: auto;
}
.cine-audit-chapter {
  padding-top: 30px;
  padding-bottom: 80px;
  min-height: auto;
}
.cine-audit-container {
  max-width: 760px;
  width: 100%;
  text-align: center;
}

/* URL input form */
.cine-audit-form {
  display: flex;
  gap: 12px;
  margin: 0 auto;
  max-width: 640px;
  flex-wrap: wrap;
  justify-content: center;
}
.cine-audit-input-wrap {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: stretch;
  background: rgba(7, 24, 28, 0.5);
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 999px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}
.cine-audit-input-wrap:focus-within {
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12);
}
.cine-audit-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 6px 0 22px;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 400;
  user-select: none;
  font-family: ui-monospace, monospace;
}
.cine-audit-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 18px 14px 4px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-cream);
}
.cine-audit-input::placeholder { color: var(--ink-faint); }
.cine-audit-submit {
  white-space: nowrap;
}

.cine-audit-foot {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
}
.cine-audit-example {
  background: none;
  border: none;
  padding: 0;
  color: var(--teal-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dashed rgba(45, 212, 191, 0.4);
  transition: color 0.2s ease;
}
.cine-audit-example:hover {
  color: var(--teal-glow);
  border-bottom-color: var(--teal-glow);
}

/* Error message */
.cine-audit-error {
  margin: 22px auto 0;
  padding: 14px 18px;
  background: rgba(220, 38, 38, 0.12);
  color: #FCA5A5;
  border-left: 3px solid #DC2626;
  border-radius: 8px;
  font-size: 14px;
  max-width: 640px;
  text-align: left;
}
.cine-audit-error[hidden] { display: none; }

/* Loading state */
.cine-audit-loading {
  margin: 36px auto 0;
  padding: 36px 32px;
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 14px;
  max-width: 680px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: left;
}
.cine-audit-loading[hidden] { display: none; }
.cine-audit-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(45, 212, 191, 0.18);
  border-top-color: var(--teal-accent);
  border-radius: 50%;
  animation: cine-audit-spin 0.9s linear infinite;
  margin: 0 0 18px;
}
@keyframes cine-audit-spin { to { transform: rotate(360deg); } }
.cine-audit-loading-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-cream);
}
.cine-audit-loading-title span {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--teal-glow);
  background: rgba(7, 24, 28, 0.6);
  padding: 3px 10px;
  border-radius: 4px;
  margin-left: 6px;
}
.cine-audit-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.cine-audit-checklist li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(45, 212, 191, 0.08);
  font-size: 14px;
  color: var(--ink-soft);
  opacity: 0.45;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.cine-audit-checklist li:last-child { border-bottom: none; }
.cine-audit-checklist li::before {
  content: '○';
  margin-right: 14px;
  font-size: 18px;
  color: var(--ink-faint);
  transition: all 0.3s ease;
}
.cine-audit-checklist li.active {
  opacity: 1;
  color: var(--ink-cream);
}
.cine-audit-checklist li.active::before {
  content: '◐';
  color: var(--teal-accent);
  animation: cine-audit-spin 1.2s linear infinite;
}
.cine-audit-checklist li.done {
  opacity: 1;
  color: var(--ink-soft);
}
.cine-audit-checklist li.done::before {
  content: '✓';
  color: var(--teal-glow);
  font-weight: 800;
  animation: none;
}
.cine-audit-loading-note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}

/* Results panel */
.cine-audit-results {
  margin: 36px auto 0;
  padding: 40px 36px;
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: left;
}
.cine-audit-results[hidden] { display: none; }
.cine-audit-results-eyebrow {
  margin: 0 0 8px;
}
.cine-audit-results-eyebrow span {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--teal-glow);
  background: rgba(7, 24, 28, 0.6);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.cine-audit-results-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-cream);
  margin: 0 0 30px;
}

/* Score gauges — override standard styles for dark theme */
.cine-audit-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.cine-audit-scores .score-card {
  text-align: center;
  padding: 18px 12px;
  background: rgba(7, 24, 28, 0.45);
  border-radius: 12px;
  border: 1px solid rgba(45, 212, 191, 0.18);
}
.cine-audit-scores .score-gauge-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cine-audit-scores .score-gauge {
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
  display: block;
}
.cine-audit-scores .gauge-track {
  fill: none;
  stroke: rgba(45, 212, 191, 0.12);
  stroke-width: 8;
}
.cine-audit-scores .gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.3s ease;
}
.cine-audit-scores .gauge-fill.tier-good { stroke: var(--teal-accent); }
.cine-audit-scores .gauge-fill.tier-warn { stroke: #F59E0B; }
.cine-audit-scores .gauge-fill.tier-bad  { stroke: #FB7185; }
.cine-audit-scores .score-number {
  position: absolute;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink-cream);
  font-variant-numeric: tabular-nums;
}
.cine-audit-scores .score-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Issues list */
.cine-audit-issues h4 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-cream);
}
.cine-audit-issues-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cine-audit-issues-list li {
  padding: 16px 18px;
  background: rgba(251, 113, 133, 0.08);
  border-left: 3px solid #FB7185;
  border-radius: 8px;
  margin-bottom: 10px;
}
.cine-audit-issues-list .issue-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 4px;
}
.cine-audit-issues-list .issue-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-cream);
  margin: 0;
}
.cine-audit-issues-list .issue-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-transform: uppercase;
}
.cine-audit-issues-list .issue-pill-count {
  background: rgba(251, 113, 133, 0.18);
  color: #FCA5A5;
}
.cine-audit-issues-list .issue-pill-value {
  background: rgba(245, 158, 11, 0.18);
  color: #FDE68A;
  font-family: ui-monospace, monospace;
  text-transform: none;
}
.cine-audit-issues-list .issue-desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.cine-audit-issues-list .audit-issues-empty {
  padding: 20px;
  background: rgba(45, 212, 191, 0.08);
  border-left: 3px solid var(--teal-accent);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-cream);
}

/* CTA card after results */
.cine-audit-cta {
  margin-top: 30px;
  padding: 26px 28px;
  background: rgba(7, 24, 28, 0.4);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 12px;
  text-align: center;
}
.cine-audit-cta p {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* What we check explainer */
.cine-audit-explainer {
  padding-top: 80px;
  padding-bottom: 100px;
  min-height: auto;
}
.cine-explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 50px;
  text-align: left;
}
.cine-explainer-card {
  padding: 26px 24px;
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-top: 2px solid var(--teal-accent);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}
.cine-explainer-cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal-glow);
  margin: 0 0 14px;
}
.cine-explainer-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cine-explainer-card li {
  padding: 7px 0 7px 16px;
  position: relative;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-bottom: 1px solid rgba(45, 212, 191, 0.08);
}
.cine-explainer-card li:last-child { border-bottom: none; }
.cine-explainer-card li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -2px;
  color: var(--teal-accent);
  font-weight: 700;
  font-size: 18px;
}

@media (max-width: 760px) {
  .cine-audit-scores { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cine-audit-results { padding: 28px 22px; }
  .cine-audit-loading { padding: 26px 22px; }
}

/* ============ CINEMATIC BOOKING PAGE (Eden-style date rail) ============ */
.cine-book-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.cine-book {
  position: relative;
  z-index: 2;
  padding: 130px 0 100px;
}
.cine-book .book-inner { max-width: 920px; margin: 0 auto; }
.cine-book .book-head { text-align: center; margin-bottom: 40px; }
.cine-book .book-head h1 { margin: 12px 0 16px; }
.cine-book .book-lede { margin: 0 auto; max-width: 620px; }

/* Step indicator */
.cine-book .book-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  gap: 0;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-book .book-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  position: relative;
}
.cine-book .book-step:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: rgba(45, 212, 191, 0.18);
  margin-left: 14px;
}
.cine-book .book-step-num {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}
.cine-book .book-step.is-active { color: var(--teal-glow); }
.cine-book .book-step.is-active .book-step-num { color: var(--teal-accent); }
.cine-book .book-step.is-done { color: var(--teal-accent); }
.cine-book .book-step.is-done .book-step-num { color: var(--teal-glow); }

/* Panels — dark glass */
.cine-book .book-panel {
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 14px;
  padding: 36px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  animation: book-fade 0.3s ease;
}
.cine-book .book-panel[hidden] { display: none; }
.cine-book .book-panel-head { margin-bottom: 24px; }
.cine-book .book-panel-head h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink-cream);
  letter-spacing: -0.01em;
}
.cine-book .book-panel-head p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Date rail — dark cards */
.cine-book .date-rail {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.cine-book .date-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 16px;
  background: rgba(7, 24, 28, 0.45);
  border: 1.5px solid rgba(45, 212, 191, 0.18);
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.cine-book .date-card:hover {
  background: rgba(7, 24, 28, 0.7);
  border-color: var(--teal-accent);
  transform: translateY(-2px);
}
.cine-book .date-card-dow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-book .date-card-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink-cream);
  line-height: 1;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.cine-book .date-card-mon {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-book .date-card-tag {
  position: absolute;
  top: -8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--teal-accent);
  color: var(--midnight-deep);
  padding: 2px 8px;
  border-radius: 999px;
}
.cine-book .date-card.is-closed {
  background: transparent;
  border-color: rgba(45, 212, 191, 0.08);
  cursor: not-allowed;
  opacity: 0.4;
}
.cine-book .date-card.is-closed:hover { transform: none; }
.cine-book .date-card.is-closed .date-card-tag {
  background: rgba(248, 250, 252, 0.15);
  color: var(--ink-faint);
}
.cine-book .date-card.is-selected {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
  box-shadow: 0 0 22px rgba(45, 212, 191, 0.45);
}
.cine-book .date-card.is-selected .date-card-dow,
.cine-book .date-card.is-selected .date-card-num,
.cine-book .date-card.is-selected .date-card-mon { color: var(--midnight-deep); }

/* Time slots — dark theme */
.cine-book .time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.cine-book .time-slot {
  padding: 12px 14px;
  background: rgba(7, 24, 28, 0.4);
  border: 1.5px solid rgba(45, 212, 191, 0.22);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-cream);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.cine-book .time-slot small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-book .time-slot:hover {
  background: rgba(7, 24, 28, 0.7);
  border-color: var(--teal-accent);
  transform: translateY(-2px);
}
.cine-book .time-slot.is-taken {
  background: transparent;
  border-color: rgba(45, 212, 191, 0.08);
  color: rgba(248, 250, 252, 0.3);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(248, 250, 252, 0.2);
}
.cine-book .time-slot.is-taken:hover { transform: none; }
.cine-book .time-slot.is-taken small {
  color: rgba(248, 250, 252, 0.35);
  text-decoration: none;
}
.cine-book .time-slot.is-selected {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
  color: var(--midnight-deep);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.4);
}
.cine-book .time-slot.is-selected small { color: var(--midnight-deep); opacity: 0.7; }

/* Back-buttons + nav row */
.cine-book .book-nav {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Details form */
.cine-book .book-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.cine-book .book-form-full { grid-column: 1 / -1; }
.cine-book .book-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cine-book .book-form label span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal-accent);
}
.cine-book .book-form input,
.cine-book .book-form textarea {
  padding: 12px 14px;
  background: rgba(7, 24, 28, 0.5);
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 6px;
  color: var(--ink-cream);
  font-family: var(--sans);
  font-size: 14px;
  transition: all 0.15s ease;
}
.cine-book .book-form input::placeholder,
.cine-book .book-form textarea::placeholder { color: var(--ink-faint); }
.cine-book .book-form input:focus,
.cine-book .book-form textarea:focus {
  outline: none;
  border-color: var(--teal-accent);
  background: rgba(7, 24, 28, 0.7);
}
.cine-book .book-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  background: rgba(45, 212, 191, 0.10);
  border-left: 3px solid var(--teal-accent);
  border-radius: 6px;
  flex-wrap: wrap;
}
.cine-book .book-summary .cine-eyebrow {
  display: block;
  margin-bottom: 4px;
}
.cine-book .book-summary p {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-cream);
}
.cine-book .book-form-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 20px;
}

/* Confirmation panel */
.cine-book .book-confirm {
  text-align: center;
  padding: 60px 36px;
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.12), rgba(248, 250, 252, 0.04) 70%);
  border-color: var(--teal-accent);
}
.cine-book .book-confirm-mark {
  width: 80px;
  height: 80px;
  color: var(--teal-accent);
  margin: 0 auto 24px;
  display: block;
  filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.4));
}
.cine-book .book-confirm h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--ink-cream);
  letter-spacing: -0.02em;
}
.cine-book .book-confirm p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 12px;
}
.cine-book .book-confirm-summary {
  margin-top: 22px !important;
  padding: 16px 22px;
  background: rgba(7, 24, 28, 0.5);
  border-radius: 6px;
  border: 1px solid rgba(45, 212, 191, 0.25);
  display: inline-block;
}
.cine-book .book-confirm-summary strong {
  font-family: var(--serif);
  color: var(--teal-glow);
  font-size: 18px;
  font-weight: 500;
}
.cine-book .book-confirm .book-nav {
  justify-content: center;
  margin-top: 28px;
}

@media (max-width: 700px) {
  .cine-book .book-panel { padding: 26px 22px; }
  .cine-book .date-rail { grid-template-columns: repeat(4, 1fr); }
  .cine-book .book-form { grid-template-columns: 1fr; }
  .cine-book .book-summary { flex-direction: column; align-items: flex-start; }
}

/* (Legacy month-grid calendar styles kept below for backwards compat — unused
   after switch to Eden-style date rail. Safe to remove in a future cleanup.) */
/* ============ OLD CINEMATIC BOOKING PAGE (DEPRECATED) ============ */
/* Same booking logic as the standard /book page (powered by initBooking()
   in script.js matching element IDs), but with dark cinematic styling. */

.cine-book-intro {
  padding-top: 140px;
  padding-bottom: 30px;
  min-height: auto;
}
.cine-book-chapter {
  padding-top: 30px;
  padding-bottom: 100px;
  min-height: auto;
}
.cine-book-container {
  max-width: 720px;
  width: 100%;
}

/* Progress rail */
.cine-booking-progress {
  list-style: none;
  padding: 0;
  margin: 0 auto 40px;
  display: flex;
  gap: 0;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cine-booking-progress .booking-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  position: relative;
}
.cine-booking-progress .booking-progress-step:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: rgba(45, 212, 191, 0.18);
  margin-left: 14px;
}
.cine-booking-progress .booking-progress-step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 24, 28, 0.6);
  border: 1px solid rgba(45, 212, 191, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-faint);
  transition: all 0.2s ease;
}
.cine-booking-progress .booking-progress-step.is-active span {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
  color: var(--midnight-deep);
}
.cine-booking-progress .booking-progress-step.is-active { color: var(--teal-glow); }
.cine-booking-progress .booking-progress-step.is-done span {
  background: var(--teal-deep);
  border-color: var(--teal-accent);
  color: var(--teal-glow);
}
.cine-booking-progress .booking-progress-step.is-done { color: var(--teal-accent); }

/* Step visibility (shared with .booking-step from script.js) */
.cine-book-container .booking-step { display: none; }
.cine-book-container .booking-step.is-open { display: block; animation: book-fade 0.3s ease; }

.cine-book-container .booking-step-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  gap: 14px;
  flex-wrap: wrap;
}
.cine-book-container .booking-step-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-cream);
  letter-spacing: -0.02em;
}
.cine-book-container .booking-step-sub {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 14px;
}
.cine-book-container .booking-step-sub strong { color: var(--teal-glow); }
.cine-book-container .booking-back {
  background: none;
  border: none;
  padding: 0;
  color: var(--teal-glow);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dashed rgba(45, 212, 191, 0.4);
  letter-spacing: 0.4px;
}
.cine-book-container .booking-back:hover { color: var(--teal-accent); border-bottom-color: var(--teal-accent); }

/* Calendar (dark theme) */
.cine-calendar {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(248, 250, 252, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  padding: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cine-calendar .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cine-calendar .calendar-nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(7, 24, 28, 0.45);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: var(--teal-glow);
  font-size: 17px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cine-calendar .calendar-nav:hover {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
  color: var(--midnight-deep);
}
.cine-calendar .calendar-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cine-calendar .calendar-month {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-cream);
  letter-spacing: -0.01em;
}
.cine-calendar .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.cine-calendar .calendar-weekdays span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 8px 0;
}
.cine-calendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cine-calendar .calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 24, 28, 0.35);
  border: 1.5px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-cream);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cine-calendar .calendar-day:hover {
  background: rgba(7, 24, 28, 0.6);
  border-color: var(--teal-accent);
  transform: translateY(-1px);
}
.cine-calendar .calendar-day.is-other-month {
  color: rgba(248, 250, 252, 0.15);
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.cine-calendar .calendar-day.is-disabled {
  color: var(--ink-faint);
  opacity: 0.35;
  background: transparent;
  cursor: not-allowed;
  text-decoration: line-through;
}
.cine-calendar .calendar-day.is-disabled:hover {
  background: transparent;
  border-color: transparent;
  transform: none;
}
.cine-calendar .calendar-day.is-today {
  border-color: rgba(248, 250, 252, 0.3);
  font-weight: 700;
}
.cine-calendar .calendar-day.is-selected {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
  color: var(--midnight-deep);
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.4);
}
.cine-calendar .calendar-day.is-selected:hover { transform: none; }
.cine-calendar .calendar-legend {
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(45, 212, 191, 0.12);
}
.cine-calendar .legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.cine-calendar .legend-dot.legend-available { background: rgba(7, 24, 28, 0.5); border: 1.5px solid rgba(45, 212, 191, 0.3); }
.cine-calendar .legend-dot.legend-busy { background: rgba(248, 250, 252, 0.15); }
.cine-calendar .legend-dot.legend-today { background: rgba(7, 24, 28, 0.5); border: 1.5px solid rgba(248, 250, 252, 0.3); }

/* Time slots (dark theme) */
.cine-time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}
.cine-time-slots .time-slot {
  padding: 14px 16px;
  background: rgba(7, 24, 28, 0.4);
  border: 1.5px solid rgba(45, 212, 191, 0.22);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-cream);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.cine-time-slots .time-slot:hover {
  background: rgba(7, 24, 28, 0.65);
  border-color: var(--teal-accent);
  transform: translateY(-2px);
}
.cine-time-slots .time-slot.is-selected {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
  color: var(--midnight-deep);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.4);
}
.cine-book-container .booking-tz {
  margin: 18px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  max-width: 560px;
}

/* Details form (dark theme) */
.cine-book-form {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 14px;
  padding: 32px 30px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cine-book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cine-book-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cine-book-form label span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal-accent);
}
.cine-book-form input,
.cine-book-form textarea {
  padding: 12px 14px;
  background: rgba(7, 24, 28, 0.5);
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 6px;
  color: var(--ink-cream);
  font-family: var(--sans);
  font-size: 14px;
  transition: all 0.15s ease;
}
.cine-book-form input::placeholder,
.cine-book-form textarea::placeholder { color: var(--ink-faint); }
.cine-book-form input:focus,
.cine-book-form textarea:focus {
  outline: none;
  border-color: var(--teal-accent);
  background: rgba(7, 24, 28, 0.7);
}
.cine-book-summary {
  padding: 14px 18px;
  background: rgba(45, 212, 191, 0.10);
  border-left: 3px solid var(--teal-accent);
  border-radius: 6px;
}
.cine-book-summary-label {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal-glow);
}
.cine-book-summary-time {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-cream);
}
.cine-book-form .cine-cta-form {
  align-self: stretch;
  text-align: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .cine-booking-progress .booking-progress-step { padding: 0 8px; }
  .cine-booking-progress .booking-progress-step:not(:last-child)::after { width: 14px; margin-left: 8px; }
  .cine-calendar { padding: 16px; }
  .cine-book-form { padding: 24px 20px; }
  .cine-book-row { grid-template-columns: 1fr; }
}

/* ============ REVEAL ANIMATIONS ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  /* Mobile: brand left, Sign-in right. Middle nav links hidden. */
  .cine-nav {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 12px 16px;
  }
  .cine-nav-links { display: none; }
  .cine-nav-signin {
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 1.2px;
  }
  .cine-progress { display: none; }
  .cine-chapter { padding: 90px 20px 60px; }
  .cine-chapter-hero { padding-top: 120px; min-height: auto; }
  .cine-chapter-eden { grid-template-columns: 1fr; gap: 24px; padding: 90px 24px 60px; }
  .cine-panel { padding: 22px 20px; }
  .cine-doors { grid-template-columns: 1fr; gap: 50px; }
  .cine-door-featured { transform: none; }
  .cine-door-featured:hover { transform: translateY(-6px); }
  .cine-content-split { grid-template-columns: 1fr; gap: 40px; }
  .cine-form-row { grid-template-columns: 1fr; }
  .cine-browser { transform: none; }
  .cine-trust { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .cine-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}