/* ============================================================
   Dang! Payoff — Cinematic marketing top (nav + hero + how + relief)
   No-build port of the design package's cinematic.css + cine2.css.
   Loaded AFTER site.css + mkt.css. Scoped under .cine / .cine2-* so it
   never touches the app. Keyed to the live payoff tokens (sage / amber /
   copper on warm linen) — no invented colors.

   Reduced-motion (R-13): every continuous/looping animation is disabled
   under (prefers-reduced-motion: reduce); the static lit composition
   remains visually complete.
   ============================================================ */

/* ── Instrument Serif (hero focal word) ────────────────────────
   Self-hosted (privacy-forward: no external Google-Fonts runtime dep) to
   match the CinematicHome prototype's `.cine2-serif` italic 400. woff2 in
   web/assets/fonts/. font-display: swap + the Georgia fallback below means
   NO FOIT and negligible CLS. Only italic 400 is used by .cine2-serif. */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root { --cine2-serif: "Instrument Serif", Georgia, "Times New Roman", serif; }

/* ── Page-level warmth ─────────────────────────────────────── */
.cine { position: relative; background: var(--payoff-bg); overflow-x: clip; }

/* ── The lit phone is a LIGHT panel inside a DARK section ─────
   COMPLETION WALK (2026-08-11). `.po-screen` (payoff-tokens.css) sets a LIGHT
   background but NO color, so any text inside it without an explicit colour
   inherits whatever the surrounding section uses. On the dark cinematic hero
   that inherited colour is the cream page ink, and the mockup's caption
   rendered cream-on-cream: MEASURED FROM RENDERED PIXELS at rgb(244,239,231)
   on #FAF7F2 — a contrast ratio of 1.31:1 where AA needs 4.5, i.e. effectively
   invisible, on the first thing every visitor sees. The same component on the
   light "It runs right in your browser" section rendered correctly, which is
   what localises the fault to the light-panel-in-dark-section case.

   ⛔ SCOPED ON PURPOSE — this is NOT a token change. `--payoff-bg` and
   `.po-screen` are shared by onboarding, the app and account, where the
   ambient ink is already correct and nothing needs to move. The rule is
   confined to `.cine`, this file is the LP-only stylesheet, and it restores
   the light-surface ink that a light panel should have had all along. Text
   inside the panel that DOES set its own colour (the sage payoff date, the
   muted eyebrow, the figure's cents) is unaffected — this only supplies the
   default the panel was missing. */
.cine .po-screen { color: var(--payoff-text); }

/* Reveal, bulletproof for a conversion page: content is ALWAYS visible
   (opacity locked on); the entrance is a transform-only rise resolved when
   .is-in is added by the observer/fallback. Overrides the opacity-gated base
   reveal from site.css so a section can never sit blank. */
.cine .po-reveal { opacity: 1 !important; transform: translateY(14px); transition: transform 700ms cubic-bezier(0.22,1,0.36,1); will-change: transform; }
.cine .po-reveal.is-in { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .cine .po-reveal { transform: none !important; transition: none; } }

/* ── Editorial display scale ───────────────────────────────── */
.cine-display {
  font-family: var(--payoff-font-display);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-wrap: balance;
  margin: 0;
}
.cine-h1 { font-size: clamp(46px, 8.6vw, 118px); letter-spacing: -0.055em; line-height: 0.92; }
.cine-h2 { font-size: clamp(34px, 5.4vw, 68px); letter-spacing: -0.035em; line-height: 1.0; }
.cine-thin { font-weight: 300; }
.cine-ink-soft { color: var(--payoff-text-3); }

.cine-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--payoff-text-4); }

/* ── Cinematic section rhythm (below the hero) ─────────────── */
.cine-band {
  position: relative;
  background: var(--payoff-bg-warm);
  border-top: 0.5px solid var(--payoff-border-2);
  border-bottom: 0.5px solid var(--payoff-border-2);
}
.cine-band--sage {
  background:
    radial-gradient(900px 500px at 84% -10%, rgba(227,181,100,0.10), rgba(227,181,100,0) 60%),
    var(--payoff-sage-deep);
  color: #F4F0E8;
  border-color: transparent;
}

/* Big editorial pull-line */
.cine-pull {
  font-family: var(--payoff-font-display);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.04;
  font-size: clamp(30px, 5vw, 62px);
  text-wrap: balance;
}

/* Elevate the reused .po-surface cards so the page feels lifted and "shot". */
.cine .po-surface { box-shadow: 0 30px 60px -44px rgba(58,42,26,0.22); }
.cine .mkt-how-card { box-shadow: 0 40px 80px -50px rgba(58,42,26,0.26); }

/* How-it-works cinematic cards */
.cine-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 920px) { .cine-how-grid { grid-template-columns: 1fr; max-width: 470px; margin: 0 auto; } }
.cine-how-card {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 26px;
  background: var(--payoff-card);
  border: 0.5px solid var(--payoff-border);
  display: flex; flex-direction: column; min-height: 430px;
}
.cine-how-num {
  font-family: var(--payoff-font-num); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--payoff-text-3);
}
.cine-how-stage {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 22px 0;
}

/* Trust row, elevated */
.cine-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .cine-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; } }
@media (max-width: 520px) { .cine-trust-grid { grid-template-columns: 1fr; } }

/* Screen eyebrow used by the how-it-works visuals */
.cine-screen-eyebrow {
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--payoff-text-3);
}

/* ============================================================
   Cinematic hero v2 — the dark, volumetric-lit film still that
   dissolves into the warm linen body below. Scoped under .cine2-hero.
   ============================================================ */

/* ── The dark stage ────────────────────────────────────────── */
.cine2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column;
  color: #F4EFE7;
  background:
    radial-gradient(125% 90% at 70% 12%, #2a211a 0%, #1a140f 46%, #0e0a07 100%);
}

/* Warm window light raking from the upper-right — the morning sun */
.cine2-sun {
  position: absolute; z-index: 0; pointer-events: none;
  top: -28%; right: -18%; width: 90%; height: 130%;
  background:
    radial-gradient(closest-side, rgba(227,181,100,0.42), rgba(227,181,100,0.10) 46%, rgba(227,181,100,0) 72%),
    radial-gradient(closest-side, rgba(196,148,110,0.34), rgba(196,148,110,0) 70%);
  filter: blur(8px);
  animation: cine2Sun 24s ease-in-out infinite alternate;
}
@keyframes cine2Sun { from { transform: translate3d(0,0,0) scale(1); opacity: 0.95; } to { transform: translate3d(-30px,26px,0) scale(1.06); opacity: 1; } }

/* Angled god-ray shafts from the top */
.cine2-rays {
  position: absolute; z-index: 0; inset: -20% -10% auto -10%; height: 120%;
  pointer-events: none; opacity: 0.5; mix-blend-mode: screen;
  background:
    linear-gradient(116deg, transparent 38%, rgba(227,181,100,0.10) 42%, transparent 46%),
    linear-gradient(122deg, transparent 52%, rgba(255,236,200,0.08) 55%, transparent 59%),
    linear-gradient(110deg, transparent 64%, rgba(196,148,110,0.08) 67%, transparent 71%);
}

/* Low sage aurora — the curve's glow rising from below */
.cine2-aurora {
  position: absolute; z-index: 0; pointer-events: none;
  bottom: -10%; left: 8%; width: 84%; height: 56%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(92,138,107,0.30), rgba(61,107,75,0.08) 50%, rgba(61,107,75,0) 75%);
  filter: blur(10px);
  animation: cine2Aurora 14s ease-in-out infinite alternate;
}
@keyframes cine2Aurora { from { opacity: 0.7; transform: translateY(0); } to { opacity: 1; transform: translateY(-14px); } }

/* Film grain — stronger here; the dark hides it as texture, not noise */
.cine2-grain {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}

/* Cinematic vignette */
.cine2-vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(130% 110% at 50% 36%, transparent 50%, rgba(0,0,0,0.34) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 16%);
}

/* Dissolve into the warm body at the very bottom */
.cine2-dissolve {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: -1px; height: 18%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(250,247,242,0.0) 35%, var(--payoff-bg) 100%);
}

/* Rising embers / motes */
.cine2-motes { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.cine2-mote {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,170,0.9), rgba(227,181,100,0) 70%);
  animation: cine2Rise var(--mote-dur, 16s) linear var(--mote-delay, 0s) infinite;
  opacity: 0;
}
@keyframes cine2Rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: var(--mote-op, 0.6); }
  80% { opacity: var(--mote-op, 0.6); }
  100% { transform: translateY(-86vh) translateX(var(--mote-drift, 20px)); opacity: 0; }
}

/* ── Layout ────────────────────────────────────────────────── */
.cine2-stage {
  position: relative; z-index: 3;
  flex: 1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding-top: clamp(96px, 13vh, 150px);
  padding-bottom: clamp(56px, 9vh, 110px);
}
@media (max-width: 940px) {
  .cine2-stage { grid-template-columns: 1fr; gap: 40px; padding-top: 112px; padding-bottom: 64px; text-align: center; }
}

/* ── Editorial type ────────────────────────────────────────── */
.cine2-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--payoff-amber-soft);
}
.cine2-kicker .po-tag__dot { background: var(--payoff-amber-soft); box-shadow: 0 0 10px rgba(227,181,100,0.8); }

.cine2-h1 {
  font-family: var(--payoff-font-display);
  font-weight: 600;
  font-size: clamp(44px, 7.4vw, 104px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 22px 0 0;
  color: #F7F2EA;
  text-wrap: balance;
}
.cine2-serif {
  font-family: var(--cine2-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #F0C988 0%, #E3B564 30%, #9FC3AC 78%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: 0.06em;
  text-shadow: 0 0 38px rgba(227,181,100,0.18);
}
.cine2-lede {
  font-size: clamp(16.5px, 1.55vw, 19.5px);
  line-height: 1.55;
  color: #C8BEB1;
  max-width: 500px;
  margin: 24px 0 0;
  text-wrap: pretty;
}
@media (max-width: 940px) { .cine2-lede { margin-left: auto; margin-right: auto; } }

.cine2-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
@media (max-width: 940px) { .cine2-actions { justify-content: center; } }
@media (max-width: 420px) { .cine2-actions .po-cta { width: 100%; } }

/* Ghost CTA on dark */
.cine2-ghost {
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(244,239,231,0.26);
  color: #F4EFE7;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cine2-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(244,239,231,0.5); }
/* The coming-soon ghost stays inert (no dead tap) but must remain legible on
   dark — override the light-theme .po-cta--disabled dimming just enough. */
.cine2-ghost.po-cta--disabled { opacity: 0.72; }

.cine2-whisper {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; font-size: 13.5px; font-weight: 500; color: #9C9388;
}
@media (max-width: 940px) { .cine2-whisper { justify-content: center; } }
.cine2-whisper b { color: #D9CFC2; font-weight: 600; }
.cine2-whisper .cine-dot { background: #6f665c; }

/* ── The film still (right side) ───────────────────────────── */
.cine2-film {
  position: relative;
  min-height: 540px;
  display: flex; align-items: center; justify-content: center;
  animation: cine2Push 26s ease-in-out infinite alternate;
}
@keyframes cine2Push { from { transform: scale(1); } to { transform: scale(1.035); } }
@media (max-width: 940px) { .cine2-film { min-height: 520px; width: 100%; } }

/* The dark "set" panel behind the lit phone (CSS-only; no image asset —
   the design's image-slot placeholder is intentionally omitted, R-15 §E #3). */
.cine2-scene {
  position: absolute; z-index: 1;
  width: min(96%, 540px); height: min(86%, 600px);
  right: -2%; top: 50%; transform: translateY(-50%) rotate(0.6deg);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(0,0,0,0.8), 0 0 0 1px rgba(244,239,231,0.06);
}
/* Empty-state styling so the panel reads as an intentional dark "set". */
.cine2-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(180deg, rgba(14,10,7,0.10) 0%, rgba(14,10,7,0.0) 30%, rgba(14,10,7,0.55) 100%),
    linear-gradient(255deg, rgba(14,10,7,0.0) 50%, rgba(14,10,7,0.45) 100%);
}
@media (max-width: 940px) {
  .cine2-scene { width: min(94%, 460px); height: 420px; left: 50%; right: auto; transform: translate(-50%, -50%) rotate(0.6deg); }
}
@media (max-width: 480px) { .cine2-scene { height: 360px; } }

/* The lit phone — the live product, glowing in the dark room */
.cine2-phonewrap {
  position: relative; z-index: 3;
  transform: translateX(-26%) rotate(-2deg);
  filter: drop-shadow(0 50px 80px rgba(0,0,0,0.7));
}
@media (max-width: 940px) { .cine2-phonewrap { transform: translateX(0) rotate(-1.5deg); } }
.cine2-phonewrap::before { /* screen bloom */
  content: ""; position: absolute; z-index: -1; inset: -8% -12%;
  background: radial-gradient(closest-side, rgba(120,170,135,0.45), rgba(120,170,135,0) 72%);
  filter: blur(14px);
}
.cine2 .po-phone, .cine2-phonewrap .po-phone {
  width: 318px; height: 648px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 9px #0b0a08, 0 0 0 10px #221c16;
}
/* Dynamic Island + status bar: narrower island and more side padding so the
   signal/wifi/battery cluster clears the island instead of tucking under it. */
.cine2-phonewrap .po-phone__notch { width: 96px; height: 27px; top: 12px; border-radius: 15px; }
.cine2-phonewrap .po-status { padding: 15px 30px 0; font-size: 13.5px; }
.cine2-phonewrap .po-status > span:last-child { gap: 7px; }
@media (max-width: 480px) {
  .cine2-phonewrap .po-phone { width: 270px; height: 552px; }
}

/* Floating proof chip over the scene */
.cine2-chip {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 999px;
  background: rgba(28,22,17,0.78); color: #F4EFE7;
  border: 0.5px solid rgba(244,239,231,0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 44px -20px rgba(0,0,0,0.7);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transform: rotate(-2.5deg);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
}

/* ── Nav over the dark hero ────────────────────────────────── */
.cine2-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: transparent;
  border-bottom: 0.5px solid transparent;
  transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}
.cine2-nav .po-nav__inner { height: 72px; }
.cine2-nav .po-wordmark__payoff { font-size: 17px; letter-spacing: -0.3px; }
.cine2-nav .po-nav__link { color: rgba(244,239,231,0.78); }
.cine2-nav .po-nav__link:hover { color: #fff; }
.cine2-nav.is-stuck {
  background: rgba(250,247,242,0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--payoff-border-2);
}
.cine2-nav.is-stuck .po-nav__link { color: var(--payoff-text-2); }
.cine2-nav.is-stuck .po-nav__link:hover { color: var(--payoff-text); }

/* Wordmark reversal in CSS (the design swaps the reversed prop on scroll):
   light over the dark hero, ink once the linen nav sticks. */
.cine2-nav .po-wordmark,
.cine2-nav .po-wordmark__dang,
.cine2-nav .po-wordmark__payoff { color: #F4EFE7; }
.cine2-nav .po-wordmark__bang { color: #C6E0CB; }
.cine2-nav.is-stuck .po-wordmark,
.cine2-nav.is-stuck .po-wordmark__dang { color: var(--payoff-text); }
.cine2-nav.is-stuck .po-wordmark__payoff { color: var(--payoff-text); }
.cine2-nav.is-stuck .po-wordmark__bang { color: var(--payoff-sage); }

/* ── Nav CTA pair: symmetrical secondary + primary (ITEM 1) ──────────
   The two buttons ship from DIFFERENT sizing systems (`.po-acct-signin`
   in account.css vs `.po-cta--sm` in site.css) and read as mismatched.
   Harmonize the box model HERE, scoped to the LP nav only, so onboarding's
   floating account button and the site-wide `.po-cta`/`.po-nav__inner`
   base rules are untouched. Keep them visually DISTINCT in emphasis
   (outlined secondary vs solid primary) but SYMMETRICAL in geometry:
   equal height, aligned baselines, matching radius.

   Shared box model (border-box is global → declared height wins):
     height 40px · vertical padding 0 (height + line-height center the text)
     · horizontal padding 16px · radius 12px · font 14px/1 · flex-centered.
   Secondary height math: 40 (declared) — content centered by flex.
   Primary  height math: 40 (declared) — content centered by flex.
   Both resolve to an identical 40px box, baselines aligned. */
.cine2-nav .po-nav__links { gap: 22px; }
/* Shared GEOMETRY only (no `display` here — visibility is owned by the rules
   below so the desktop/mobile CTA swap keeps clean specificity). */
.cine2-nav .po-acct-signin,
.cine2-nav .po-cta.po-cta--sm {
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
/* Secondary keeps its 1.5px outline; height is fixed so the border does NOT
   add to the box (border-box), so it matches the borderless primary exactly. */
.cine2-nav .po-acct-signin { border-width: 1.5px; }

/* Visible on desktop/tablet: the secondary + the full-length primary CTA that
   lives inside .po-nav__links. Compact mobile CTA stays hidden here. */
.cine2-nav .po-acct-signin,
.cine2-nav .po-nav__links > .po-cta.po-cta--sm { display: inline-flex; }
.cine2-nav [data-mobile-cta] { display: none; }

/* ── Phones ≤600px: compact CTA + a flush-right pair + guaranteed clearance ──
   The 5 text links are already hidden ≤860 (site.css). The full-length
   "Start my payoff plan" CTA is too wide for phones; the OLD 430px threshold
   was a too-tight magic number — larger phones (e.g. iPhone Pro Max ≈ 440px
   CSS) fell ABOVE it, so the full CTA stayed and its un-shrinkable cluster
   crowded the wordmark (Sign in butting "Payoff"). We swap to the compact
   "Start" across the whole phone range (the full CTA only survives ≥601px,
   where it has ample room — genuinely responsive, not "it happens to fit").
   `margin-right:auto` on the wordmark absorbs all free space, so Sign in +
   Start stay ONE flush-right pair (NOT split by space-between) with a
   guaranteed gap from the wordmark; the wordmark shrinks first only on a
   very narrow device. */
@media (max-width: 600px) {
  .cine2-nav .po-nav__inner { gap: 12px; }
  .cine2-nav .po-nav__links { gap: 10px; flex-shrink: 0; }
  /* Hide the full-length primary CTA (the one INSIDE .po-nav__links). */
  .cine2-nav .po-nav__links > .po-cta.po-cta--sm { display: none; }
  /* Show the compact mobile CTA in its place. */
  .cine2-nav [data-mobile-cta] { display: inline-flex; }
  /* Push the wordmark left so the Sign in + Start pair stays together,
     flush-right, with clear breathing room to its left (never butting it);
     the wordmark shrinks first if a very narrow device ever needs it. */
  .cine2-nav .po-logo { margin-right: auto; min-width: 0; flex-shrink: 1; }
}
/* ── Ultra-narrow ≤360px: tighten the nav gutters so even the smallest real
   screens keep the wordmark full-size AND clear of the pair (the wordmark
   TEXT itself doesn't shrink, so we buy the room from the side padding instead
   of letting "Payoff" overrun Sign in). Scoped to the LP nav only. */
@media (max-width: 360px) {
  .cine2-nav .po-nav__inner { padding-left: 12px; padding-right: 12px; }
}

/* ── Reduced motion (R-13): kill every continuous/looping animation ── */
@media (prefers-reduced-motion: reduce) {
  .cine2-sun, .cine2-aurora, .cine2-film, .cine2-mote { animation: none !important; }
  .cine2-mote { display: none; }
}