/* ============================================================
   THE ENGINE — CINEMATIC (Figma Page 4 · 504:28942)
   One continuous world: hero → worries → funnel → engines.
   Rides styles.css tokens (--bg, --ink, --font, --serif, --line).
   All animated properties are transform / opacity / clip-path.
   ============================================================ */

:root {
  --cine-orange: #fc7702;
  --cine-orange-hi: #fc9131;
  --cine-cream: #fff9eb;
  --cine-chip: #ffe6cb;
  --cine-green: #80c783;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- HERO ---------- */
.cine-hero { position: relative; height: 100vh; overflow: hidden;
  /* paint containment: the promoted sky-video layer can never smear a
     sliver outside the hero while scrolling (seen once at the far left) */
  contain: paint;
  background: var(--bg); }
.ch-bg { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(120% 90% at 50% -10%, #3a2c22 0%, #241e1b 46%, var(--bg) 100%); }
.ch-sky { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.85; filter: saturate(0.85) brightness(0.96); }
.ch-scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(23, 20, 19, 0.55) 0%, rgba(23, 20, 19, 0.24) 32%,
    rgba(23, 20, 19, 0.12) 58%, rgba(23, 20, 19, 0.5) 82%, #1d1a19 99%); }
.ch-scrim::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(90% 70% at 50% 50%, transparent 60%, rgba(23, 20, 19, 0.3) 100%); }

.ch-copy { position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%); width: min(1240px, 94vw);
  text-align: center; z-index: 5; }
.ch-h1 { margin: 0; font-family: var(--font); font-weight: 600;
  /* client cap: tops out at 60px, still fluid below it */
  font-size: clamp(34px, 4.2vw, 60px); line-height: 1.16;
  letter-spacing: -0.012em; color: #fff; }
.ch-h1 .ch-serif { font-family: var(--serif); font-style: italic;
  font-weight: 400; letter-spacing: 0; font-size: 1.04em; }
.ch-cta-row { margin-top: clamp(24px, 4.2vh, 40px); }
/* primary CTA cloth (client): near-black #252525 with one soft white
   top-glow inside — no orange, no heavy shadow; hover just breathes */
.ch-cta { display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(7px, 0.55vw, 10px);
  /* ~10% larger (client) */
  padding: clamp(17px, 1.8vh, 22px) clamp(31px, 2.4vw, 40px);
  border: 0; border-radius: 14px; cursor: pointer;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(17px, 1.4vw, 21px); color: #fff; letter-spacing: 0.01em;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    #252525;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; }
.ch-cta:hover { transform: translateY(-1px); filter: brightness(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ch-cta:active { transform: scale(0.99); }
.ch-cta svg { width: clamp(14px, 1.05vw, 17px); height: auto; flex: none; }
.ch-signups { margin-top: 14px; font-size: clamp(12px, 0.95vw, 14.5px);
  color: color-mix(in srgb, var(--ink) 62%, transparent); }

/* proof strip — 3 stats + Nick, one hairline-separated row on the fold */
.ch-foot { position: absolute; left: 50%; bottom: 7.5vh;
  transform: translateX(-50%); z-index: 5; width: max-content; max-width: 94vw;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 46px); }
.chf-item { flex: none; text-align: left; padding: 0 clamp(8px, 1.2vw, 20px); }
.ch-foot > * + * { border-left: 1px solid
  color-mix(in srgb, var(--ink) 16%, transparent); }
.chf-num { font-family: "Inter", var(--font); font-weight: 500;
  font-size: clamp(22px, 2.1vw, 33px); line-height: 1; letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--ink) 94%, transparent); }
.chf-lab { margin-top: 7px; font-size: clamp(10.5px, 0.85vw, 12.5px);
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--ink) 55%, transparent); }
.chf-quote { flex: none; display: flex; align-items: center; gap: 12px;
  text-align: left; max-width: clamp(250px, 23vw, 320px);
  padding-left: clamp(18px, 2vw, 34px); }
.chf-quote img { flex: none; width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.chfq-text { font-size: clamp(12px, 0.95vw, 14px); line-height: 1.38;
  color: color-mix(in srgb, var(--ink) 90%, transparent); }
.chfq-who { margin-top: 4px; font-size: 10.5px; letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* ---------- WORLD (pinned continuous scene) ---------- */
.cine-world { position: relative; height: 100vh; overflow: clip;
  background: #1d1a19; }
.cw-stage { position: absolute; inset: 0; }

/* worries heading + cue */
.cw-h { position: absolute; left: 50%; top: 31%; transform: translateX(-50%);
  z-index: 4; margin: 0; text-align: center; font-family: var(--font);
  /* unified section-heading scale: every band's h2 tops out at 48px */
  font-weight: 600; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.28;
  letter-spacing: -0.01em; color: #fff; width: max-content; max-width: 92vw;
  will-change: transform, opacity; }
.cw-h em, .ce-h em { font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 1.05em; }
.cw-cue { position: absolute; left: 50%; top: 50.5%; transform: translateX(-50%);
  z-index: 4; display: flex; align-items: center; gap: 9px;
  font-size: clamp(12px, 1vw, 15px);
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  will-change: transform, opacity; }
.cw-cue svg { display: block; }
.cw-cue .cue-wheel { animation: cue-roll 2.2s ease-in-out infinite; }
@keyframes cue-roll {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(4px); opacity: 0.35; }
}

/* founder-worry cards — outer = scrub target, .cw-rot = tilt,
   .cw-float = idle drift, .cw-chip = the visual card.
   Above the funnel (z6) and the rain (z7): they dive INTO the mouth. */
.cw-card { position: absolute; z-index: 8; will-change: transform, opacity; }
/* top chips sit below the nav's scrolled pill (~84px) so the bar never
   covers them while the world is pinned */
.cw-card[data-i="0"] { left: 11%; top: 14%; }
.cw-card[data-i="1"] { left: 61%; top: 12.5%; }
.cw-card[data-i="2"] { left: 9.5%; top: 52.5%; }
.cw-card[data-i="3"] { left: 62%; top: 57.5%; }
.cw-float { will-change: transform; }
.cw-chip { display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 10px; background: var(--cine-cream);
  box-shadow: 0 20px 48px -18px rgba(0, 0, 0, 0.55); }
.cw-chip img { flex: none; width: clamp(52px, 4.8vw, 72px);
  height: clamp(52px, 4.8vw, 72px); border-radius: 10px; object-fit: cover; }
.cw-txt { display: flex; flex-direction: column; gap: 5px; white-space: nowrap;
  padding-right: 8px; }
.cwq { font-family: var(--font); font-weight: 600;
  font-size: clamp(14px, 1.32vw, 20px); color: #252525; }
.cwa { font-family: var(--font); font-weight: 600;
  font-size: clamp(11px, 1vw, 15px); color: #75695f; }

/* funnel — CSS base = design-01 "peek from the fold" state.
   JS animates .cw-funnel-move only; .cw-funnel-idle breathes. */
.cw-funnel-pos { position: absolute; left: 50%; bottom: 0; z-index: 6;
  width: clamp(260px, 22.5vw, 365px);
  transform: translate(-50%, 55%); }
.cw-funnel-move { will-change: transform; }
.cw-funnel-idle { position: relative; will-change: transform; }
.cw-funnel-idle img { display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none; }
/* processing light: mouth pool + core bloom, opacity-only animation */
.cw-glow-mouth { position: absolute; left: 50%; top: 4%; z-index: 2;
  width: 74%; aspect-ratio: 2.6 / 1; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 190, 110, 0.5) 0%,
    rgba(252, 119, 2, 0.22) 48%, transparent 78%);
  mix-blend-mode: screen; will-change: opacity, transform; }
.cw-glow-core { position: absolute; left: 50%; top: 26%; z-index: 2;
  width: 58%; aspect-ratio: 1.5 / 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; opacity: 0.55;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.42) 0%,
    rgba(252, 119, 2, 0.16) 55%, transparent 80%);
  mix-blend-mode: screen; will-change: opacity; }
/* ember rain — transparent canvas riding the pinned stage, in front of
   the funnel so particles read as pouring into the mouth */
.cw-particles { position: absolute; inset: 0; z-index: 7;
  /* canvas is a replaced element — inset alone won't stretch it.
     No mix-blend-mode: a full-viewport blended layer murders the
     compositor; the canvas already draws additively ('lighter'). */
  width: 100%; height: 100%;
  pointer-events: none; }
/* once the auto beat has played, the worry layer stays retired even if
   the visitor reverse-scrubs inside the pin */
.cine-world.is-done .cw-card, .cine-world.is-done .cw-h,
.cine-world.is-done .cw-cue { visibility: hidden !important; }

/* first output: the seed of light at the spout tip */
.cw-seed { position: absolute; left: 50%; bottom: -6px; z-index: 3;
  width: 22px; height: 22px; transform: translateX(-50%) scale(0);
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #ffe9c9 0%, rgba(252, 145, 49, 0.85) 40%,
    rgba(252, 119, 2, 0) 75%);
  mix-blend-mode: screen; will-change: transform, opacity; }

/* ---------- ENGINES (same world, later in the scrub) ---------- */
.ce-h { position: absolute; left: 50%; top: 10%; transform: translateX(-50%);
  z-index: 4; margin: 0; text-align: center; font-family: var(--font);
  /* height-capped so the two-line heading always clears the tab row
     on shorter viewports (was top 12% / 3.2vw → collided at ≤950px tall) */
  font-weight: 600; font-size: clamp(28px, min(3.2vw, 4.6vh), 48px); line-height: 1.3;
  letter-spacing: -0.01em; color: #fff; width: max-content; max-width: 92vw;
  visibility: hidden; will-change: transform, opacity; }

/* top = final top-edge (auto beat rises it from y:44 → 0; no translateY so
   the resting position is deterministic and the rhythm heading→tabs→card
   can be tuned purely via the three top values) */
.ce-tabs { position: absolute; left: 50%; top: 25%;
  transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: clamp(40px, 6.5vw, 110px);
  visibility: hidden; will-change: transform, opacity; }
.ce-tab { position: relative; flex: none; cursor: pointer;
  padding: clamp(14px, 1.6vh, 21px) clamp(22px, 2.4vw, 40px);
  border-radius: 16px; border: 1px solid #46413e; background: transparent;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(15px, 1.32vw, 20px); color: #8f8781;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease,
    transform 0.2s ease; }
.ce-tab:hover { color: #c9c1b8; transform: translateY(-1px); }
/* active tab wears the primary-CTA cloth: #252525 under a soft white
   top-glow (same formula as .ch-cta / .cta-premium) */
.ce-tab.is-active {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 52%),
    #252525;
  border-color: rgba(255, 255, 255, 0.14); color: #fff; }
/* (client) the ember underline glow under the active tab was removed — the
   #252525 fill alone marks the active pill now */
.ce-conn { position: absolute; inset: 0; z-index: -1; overflow: visible;
  pointer-events: none; }
.ce-conn line { stroke: #5a534e; stroke-width: 1.4; stroke-dasharray: 4 5; }
.ce-conn polygon { fill: #5a534e; }

/* the manufactured card */
.ce-card { position: absolute; left: 50%; top: 34%;
  width: min(1039px, 78vw);
  transform: translateX(-50%); transform-origin: 50% 0%;
  z-index: 7; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #232020; border: 1px solid rgba(255, 255, 255, 0.07);
  visibility: hidden; will-change: transform, opacity;
  box-shadow: 0 40px 110px -38px rgba(0, 0, 0, 0.7); }
.ce-card-bg { position: absolute; inset: -2%; z-index: 0;
  will-change: transform, opacity; }
.ce-card-bg-i { position: absolute; inset: 0;
  /* warm-only ember plate (Higgsfield 2026-07-20) — the old plate's cool
     blue half was off-palette for the ember-only pass */
  background: url("assets/cinematic/card-bg-2.jpg") center / cover no-repeat;
  will-change: transform; }
.ce-tint { position: absolute; inset: 0; z-index: 1;
  background: rgba(37, 37, 37, 0.6); }
.ce-in { position: relative; z-index: 2; display: grid;
  /* taller card, premium air (client): the card starts higher (top 34%)
     and stretches toward the pin bottom — min-height sizes it to the
     viewport, and the panel skeleton (auto-centered graphic, bottom-pinned
     metrics + CTA) distributes the extra space evenly */
  min-height: clamp(480px, 61vh, 640px);
  padding: clamp(22px, 3.2vh, 34px) 6% clamp(20px, 3vh, 30px); }

/* one panel per engine (client mockups 2026-07-18); swapped wholesale.
   All three share the same grid cell so the card keeps ONE size — the
   tallest panel's — across every tab. */
.ce-panel { grid-area: 1 / 1; display: flex; width: 100%;
  flex-direction: column; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; pointer-events: none; }
.ce-panel.is-on { visibility: visible; opacity: 1; pointer-events: auto; }
.ce-step { will-change: transform, opacity; }

.ce-eng { display: flex; align-items: center; gap: 13px; }
.ce-eng img, .ce-eng svg { display: block;
  width: clamp(26px, 2.8vw, 40px); height: clamp(26px, 2.8vw, 40px);
  color: #ddd6cf; }
.ce-eng span { font-family: var(--font); font-weight: 600;
  font-size: clamp(15px, 1.32vw, 20px); color: #fff; }
.ce-headline { margin: clamp(14px, 2.2vh, 26px) 0 0; text-align: center;
  /* one quiet line (client: was too big) — a full step below .ce-h */
  font-family: var(--font); font-weight: 600;
  font-size: clamp(16px, 1.35vw, 22px); line-height: 1.3; color: #fff;
  max-width: 100%; white-space: nowrap; }
@media (max-width: 960px) { .ce-headline { white-space: normal; } }

/* glass sub-panel shared by content (reels) + sales (call) */
.ce-sub { margin-top: clamp(18px, 3vh, 38px);
  display: flex; flex-direction: column; align-items: center;
  /* wider proof box (client) — breathing room for the reel strip */
  width: min(94%, 780px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: clamp(12px, 1.7vh, 16px) clamp(20px, 2.6vw, 36px)
    clamp(12px, 1.7vh, 18px); }
/* ---- shared panel skeleton (client): identical slots on every engine —
   icon row top, headline, graphic centered in the leftover middle,
   metrics, then CTA at the bottom. Grid-equal heights make it stick. */
.ce-panel { justify-content: flex-start; }
.ce-panel .ce-sub, .ce-panel .ce-flow { margin-top: auto; margin-bottom: auto; }
.ce-panel .ce-metrics { margin-top: 0; }
.ce-panel .ce-link { margin-top: clamp(16px, 2.6vh, 30px); margin-bottom: 2px; }
.ce-sub-cap { font-family: var(--font); font-weight: 500;
  /* quiet eyebrow — the headline above owns the panel, this just labels */
  font-size: clamp(11px, 0.95vw, 13.5px); color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.01em; }

.ce-media { display: flex; align-items: center;
  gap: clamp(12px, 1.5vw, 22px); margin-top: clamp(9px, 1.5vh, 14px); }
.ce-reel { position: relative; flex: none; width: clamp(64px, 6vw, 92px);
  /* taller portrait ratio so the likes label has real room (client) */
  aspect-ratio: 78 / 122; border-radius: 10px; overflow: hidden;
  cursor: pointer; background: #d9d9d9;
  transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ce-reel video { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; }
/* likes label lives ON the reel over a scrim — deeper, taller gradient
   so the count stays legible over bright video frames */
.ce-reel::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 38%,
    rgba(0, 0, 0, 0.35) 62%, rgba(0, 0, 0, 0.82) 100%); }
.rl-lab { position: absolute; left: 7px; right: 5px; bottom: 8px; z-index: 2;
  font-family: var(--font); font-weight: 700;
  /* ONE line always (client): sized so "15.7m Likes" fits the narrowest reel */
  font-size: clamp(10px, 0.85vw, 12px); color: #fff; white-space: nowrap;
  line-height: 1; letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
.ce-reel::after { content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0);
  transition: border-color 0.35s ease; }
.ce-reel.is-live::after { border-color: rgba(255, 255, 255, 0.65); }
.ce-reel:hover { transform: scale(1.02); }
/* avatar+meta: handle (primary) · followers total (muted) — the monthly
   gain moved into the metrics row (client) */
.ce-mlab { display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font); white-space: nowrap; line-height: 1.28; }
.ce-mlab span:nth-child(1) { font-weight: 600;
  font-size: clamp(12.5px, 1.02vw, 15px); color: #fff; letter-spacing: -0.01em; }
.ce-mlab span:nth-child(2) { font-weight: 500;
  font-size: clamp(11px, 0.88vw, 12.5px); color: rgba(255, 255, 255, 0.55); }
.ce-nick { display: flex; align-items: center; gap: 12px;
  margin-left: clamp(6px, 1vw, 16px); }
.ce-nick img { flex: none; width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px); border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14); }

/* type-only metrics row, hairline separated */
.ce-metrics { display: flex; align-items: stretch;
  margin-top: clamp(12px, 2vh, 22px); }
.ce-metric { text-align: center; padding: 0 clamp(18px, 2.8vw, 44px); }
.ce-metric + .ce-metric {
  border-left: 1px solid rgba(255, 255, 255, 0.15); }
.ce-mv { font-family: var(--font); font-weight: 700;
  font-size: clamp(20px, 2.1vw, 31px); line-height: 1.15; color: #fff;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.ce-ml { margin-top: 5px; font-family: var(--font); font-weight: 500;
  font-size: clamp(11px, 1vw, 15px); color: rgba(255, 255, 255, 0.62);
  white-space: nowrap; }

/* text-link CTA — margin-top is the metrics → CTA breathing room
   (an inline touch-target rule in home.html used to clobber it) */
.ce-link { margin-top: clamp(14px, 2.2vh, 26px); padding: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(13px, 1.15vw, 16px); color: rgba(255, 255, 255, 0.92);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease; }
.ce-link svg { width: clamp(13px, 1vw, 15px); height: auto; flex: none;
  transition: transform 0.25s var(--ease-out, ease); }
.ce-link:hover { color: #fff; transform: translateY(-1px); }
.ce-link:hover svg { transform: translateX(2px); }

/* sales: orb + play + waveform */
.ce-callrow { flex-direction: row; align-items: center;
  /* hug the orb + call copy — a forced 780px panel read as stretched
     next to the content card (client) */
  width: fit-content; max-width: min(94%, 780px);
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(16px, 2.4vh, 26px) clamp(28px, 3.4vw, 48px); }
/* the living WebGL orb (orb.js), pocket-sized for the call row */
.ce-callrow .ps-orb { width: clamp(64px, 6.4vw, 96px); flex: none; }
.ce-callrow .ps-orb .orb-aura { inset: -26%;
  filter: blur(14px) saturate(1.15); }
.ce-call { display: flex; flex-direction: column; gap: 13px;
  align-items: flex-start; }
.ce-call-cap { font-family: var(--font); font-weight: 600;
  font-size: clamp(13px, 1.2vw, 17px); color: #fff; }
.ce-wave { display: flex; align-items: center; gap: 14px; }
/* shadcn-style primary pill: solid white, dark label, quiet shadow */
.ce-play { flex: none; display: inline-flex; align-items: center;
  gap: 9px; height: clamp(36px, 3.1vw, 44px);
  padding: 0 clamp(16px, 1.6vw, 22px); border: 0; border-radius: 999px;
  background: #fff; color: #1d1a19; cursor: pointer;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(12.5px, 1.05vw, 14.5px); letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease; }
.ce-play svg { width: 13px; height: 13px; }
.ce-play:hover { background: #f3efe8; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
.ce-play:active { transform: translateY(0) scale(0.98); }
.ce-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ce-bars { display: flex; align-items: center; gap: 3.5px; }
.ce-bars span { display: block; width: 3px; border-radius: 2px;
  background: #fff; opacity: 0.92; }
/* call timer: total duration at rest, counts up while playing */
.ce-time { flex: none; margin-left: 2px; font-family: var(--font);
  font-weight: 500; font-size: clamp(12px, 1vw, 14px);
  color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em; }

/* marketing: campaign flow chips + measured arrows */
.ce-flow { position: relative; margin-top: clamp(16px, 3vh, 32px);
  display: grid; grid-template-columns: auto auto auto;
  justify-content: center; align-items: stretch;
  gap: clamp(20px, 3.6vh, 32px) clamp(30px, 3.6vw, 50px); }
.ce-flow-arrows { position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; }
.ce-flow-arrows path { stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.2; fill: none; stroke-linecap: round;
  stroke-linejoin: round; }
.ce-chip { position: relative; z-index: 1; display: flex;
  flex-direction: column; gap: 6px; align-items: center;
  justify-content: center; text-align: center;
  padding: clamp(10px, 1.6vh, 16px) clamp(16px, 2.2vw, 28px);
  border-radius: 14px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ce-chip[data-f="3"] { grid-column: 2 / 4; justify-self: stretch; }
.ce-chip[data-f="4"] { grid-column: 1; }
.fc-t { font-family: var(--font); font-weight: 500;
  font-size: clamp(10px, 0.9vw, 13px); color: rgba(255, 255, 255, 0.55); }
.fc-l { font-family: var(--font); font-weight: 700;
  font-size: clamp(13px, 1.25vw, 18px); color: #fff; white-space: nowrap; }

/* ---------- short desktop viewports (laptop usable height) ----------
   The engine cluster keeps its premium rhythm on tall screens; on
   short-but-wide viewports (e.g. 1440×820, where vw-based content stays
   large but height is scarce) it compacts so the card never overruns
   the pinned frame. Scoped ≥961px so the flat mobile layout is untouched. */
@media (min-width: 961px) and (max-height: 895px) {
  /* mostly a lift of the whole cluster — the gaps stay premium, the card
     keeps its size; a light reel trim is the safety net for very short
     screens */
  /* floor the top in px so the heading always clears the fixed-height
     nav on short viewports (a bare % rides up into it) */
  .ce-h { top: max(96px, 8%); font-size: clamp(24px, min(3vw, 4.3vh), 44px); }
  .ce-tabs { top: 25.5%; }
  .ce-card { top: 34%; }
  .ce-tab { padding: clamp(11px, 1.4vh, 19px) clamp(20px, 2.2vw, 38px); }
  .ce-reel { width: clamp(60px, 5.6vw, 86px); }
}
@media (min-width: 961px) and (max-height: 840px) {
  /* very short: smaller heading + tighter rhythm + a lower card so the
     72px nav floor still leaves room for the tabs and nothing overruns */
  .ce-h { font-size: clamp(21px, min(2.7vw, 3.9vh), 38px); }
  .ce-tabs { top: 25%; }
  .ce-card { top: 34%; }
  .ce-in { min-height: clamp(440px, 60vh, 600px); }
  .ce-headline { margin-top: clamp(10px, 1.8vh, 20px); }
  .ce-sub { margin-top: clamp(14px, 2.2vh, 30px); }
  .ce-link { margin-top: clamp(12px, 2vh, 26px); }
  .ce-reel { width: clamp(54px, 5vw, 74px); }
}

/* ============================================================
   FLAT MODE — mobile + prefers-reduced-motion.
   The same world, laid out as calm stacked sections. No pin,
   no scrub, no idle loops; everything already assembled.
   ============================================================ */
body.cine-flat .cine-world, html:not(.js) .cine-world{ height: auto; overflow: visible;
  padding: clamp(56px, 9vh, 96px) 0 clamp(64px, 10vh, 110px); }
body.cine-flat .cw-stage, html:not(.js) .cw-stage{ position: static; display: flex;
  flex-direction: column; align-items: center;
  gap: clamp(36px, 6vh, 64px); }
body.cine-flat .cw-h, html:not(.js) .cw-h{ position: static; transform: none; order: 1; }
body.cine-flat .cw-cue, html:not(.js) .cw-cue{ display: none; }
body.cine-flat .cw-cards-flat, html:not(.js) .cw-cards-flat{ order: 2; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 18px; padding: 0 5vw; }
body.cine-flat .cw-card, html:not(.js) .cw-card{ position: static; }
body.cine-flat .cw-funnel-pos, html:not(.js) .cw-funnel-pos{ position: static; transform: none; order: 3;
  width: min(320px, 62vw); }
body.cine-flat .cw-seed, html:not(.js) .cw-seed{ display: none; }
body.cine-flat .cw-particles, html:not(.js) .cw-particles{ display: none; }
body.cine-flat .ce-h, html:not(.js) .ce-h{ position: static; transform: none; order: 4;
  visibility: visible; }
body.cine-flat .ce-tabs, html:not(.js) .ce-tabs{ position: static; transform: none; order: 5;
  visibility: visible; flex-wrap: wrap; justify-content: center;
  gap: 16px; padding: 0 5vw; }
body.cine-flat .ce-conn, html:not(.js) .ce-conn{ display: none; }
body.cine-flat .ce-card, html:not(.js) .ce-card{ position: static; transform: none; order: 6;
  visibility: visible; width: min(1039px, 92vw); aspect-ratio: auto; }
body.cine-flat .ce-in, html:not(.js) .ce-in{ position: relative; padding: 30px 5%; min-height: 0; }
body.cine-flat .ce-media, html:not(.js) .ce-media{ flex-wrap: wrap; justify-content: center; }
body.cine-flat .ce-metrics, html:not(.js) .ce-metrics{ flex-wrap: wrap; justify-content: center;
  row-gap: 14px; }
body.cine-flat .ce-link, html:not(.js) .ce-link{ margin-top: 22px; }
body.cine-flat .ce-flow, html:not(.js) .ce-flow{ grid-template-columns: 1fr;
  justify-items: center; }
body.cine-flat .ce-chip[data-f="3"], html:not(.js) .ce-chip[data-f="3"], body.cine-flat .ce-chip[data-f="4"], html:not(.js) .ce-chip[data-f="4"]{
  grid-column: auto; }
body.cine-flat .ce-flow-arrows, html:not(.js) .ce-flow-arrows{ display: none; }
body.cine-flat .ce-callrow, html:not(.js) .ce-callrow{ flex-wrap: wrap; justify-content: center; }
body.cine-flat .cw-h, html:not(.js) .cw-h, body.cine-flat .cw-card, html:not(.js) .cw-card, body.cine-flat .ce-h, html:not(.js) .ce-h,
body.cine-flat .ce-tabs, html:not(.js) .ce-tabs{ visibility: visible; }

@media (max-width: 960px) {
  .ch-h1 { font-size: clamp(30px, 8vw, 44px); }
  .ch-foot { position: static; transform: none; margin: 34px auto 0;
    flex-wrap: wrap; row-gap: 18px; }
  .cine-hero { height: auto; min-height: 100vh; padding-bottom: 48px;
    display: flex; flex-direction: column; justify-content: center; }
  .ch-copy { position: static; transform: none; margin: 18vh auto 0; }
  .chf-quote { border-left: 0; }
  .cw-chip img { width: 52px; height: 52px; }
  .cwq { font-size: 14px; white-space: normal; }
  .cwa { font-size: 11px; }
  .cw-txt { white-space: normal; max-width: 210px; }
}


/* ============================================================
   MOBILE CINEMATIC (≤960) — the full pinned funnel scrub runs on
   phones now (client). These are pure GEOMETRY overrides for the
   small stage; flat mode still exists for prefers-reduced-motion
   (body.cine-flat) and no-JS (html:not(.js)) via the width-agnostic
   rules above, which outrank these plain selectors.
   ============================================================ */
@media (max-width: 960px) {
  /* act 1 — worries: heading high, chips alternating down the stage */
  .cw-h { top: 16%; font-size: clamp(24px, 7vw, 34px); width: 92vw;
    white-space: normal; }
  .cw-cue { top: auto; bottom: 6vh; }
  .cw-chip { padding: 8px; gap: 8px; }
  .cw-chip img { width: 46px; height: 46px; }
  .cwq { font-size: 12.5px; }
  .cwa { font-size: 10.5px; }
  .cw-txt { max-width: 176px; }
  .cw-card[data-i="0"] { left: 4%;  top: 34%; }
  .cw-card[data-i="1"] { left: auto; right: 4%; top: 44.5%; }
  .cw-card[data-i="2"] { left: 6%;  top: 55%; }
  .cw-card[data-i="3"] { left: auto; right: 6%; top: 65.5%; }
  .cw-funnel-pos { width: min(300px, 64vw); }
  .cw-particles { display: none; } /* perf: no ember rain on phones */
  /* act 2 — engines end-state, compacted to the phone viewport */
  .ce-h { top: max(84px, 10%); font-size: clamp(21px, 6vw, 30px);
    width: 92vw; white-space: normal; }
  .ce-tabs { top: 19%; gap: 8px; width: 94vw; justify-content: center; }
  .ce-tab { padding: 9px 12px; font-size: 12px; }
  .ce-conn { display: none; }
  .ce-card { top: 24%; width: 94vw; }
  /* content-sized on phones — the 61vh min-height is a desktop luxury */
  .ce-in { min-height: 0; padding: 14px 4% 13px; }
  .ce-eng img { width: 24px; height: 24px; }
  .ce-headline { margin-top: 8px; font-size: 15px; }
  .ce-sub { width: 100%; margin-top: 10px; padding: 9px 12px 11px; }
  .ce-media { flex-wrap: wrap; justify-content: center;
    gap: 10px; row-gap: 10px; margin-top: 8px; }
  .ce-reel { width: 17vw; }
  .rl-lab { font-size: 9.5px; left: 5px; right: 4px; bottom: 6px; }
  /* phone skeleton: graphic right under the headline, metrics + CTA pinned
     to the card bottom — the desktop auto-centering reads as dead air when
     the shared grid cell is sized by the tallest (marketing) panel */
  .ce-panel .ce-sub, .ce-panel .ce-flow { margin-block: 10px 0; }
  .ce-panel .ce-metrics { margin-top: auto; padding-top: 4px; }
  .ce-nick { margin-left: 0; }
  .ce-metrics { flex-wrap: wrap; justify-content: center;
    margin-top: 10px; row-gap: 10px; }
  .ce-metric { padding: 0 13px; }
  .ce-mv { font-size: 19px; }
  .ce-ml { margin-top: 3px; font-size: 11px; }
  .ce-panel .ce-link { margin-top: 10px; }
  /* marketing summary = a clean centered vertical stack on phones
     (desktop's staggered 3-col grid + per-chip placement read as a
     scattered mess at this width) */
  .ce-flow { grid-template-columns: 1fr; justify-items: center;
    gap: 9px; margin-block: 6px 0; }
  .ce-chip { width: min(300px, 82%); padding: 10px 16px; }
  .ce-chip[data-f="3"], .ce-chip[data-f="4"] {
    grid-column: auto; justify-self: center; }
  .ce-flow-arrows { display: none; }
  .ce-callrow { flex-direction: column; text-align: center;
    width: 100%; padding: 14px 16px; }
  .ce-call { align-items: center; }
}

/* status line for the auto beat — sits above the funnel mouth, mono voice */
.cw-processing { position: absolute; left: 50%; top: 55%; z-index: 9;
  transform: translateX(-50%); margin: 0;
  font: 600 clamp(11px, 0.95vw, 13.5px) var(--mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 78%, transparent);
  visibility: hidden; opacity: 0; will-change: transform, opacity;
  pointer-events: none; }
body.cine-flat .cw-processing, html:not(.js) .cw-processing { display: none; }