/* ─────────────────────────────────────────────────────────────────
   MoveMatic v2 — design exploration
   Standalone stylesheet; does not depend on shared.css.
   Goal: less text, less identical-card-grid, more inline motion.
   ───────────────────────────────────────────────────────────────── */

/* ── TYPE ── Fraunces (display) over Space Grotesk (text), self-hosted.
   This page has its own stylesheet rather than shared.css, so the block is
   repeated here. Keep it in step with the copy in shared.css — the @font-face
   URLs are identical, so the browser still fetches each file only once. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-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 {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text:    'Space Grotesk', -apple-system, BlinkMacSystemFont,
                  system-ui, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}
h1 { font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96; }
h2 { font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 48; }
h3 { font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 20; }

:root {
  --bg:           #f6f3ec;     /* warm beige to match the new SU site palette */
  --surface:      #ffffff;
  --ink:          #14122a;
  --ink-2:        #5a577a;
  --line:         rgba(20, 18, 42, 0.10);

  --indigo:       #4f46e5;
  --indigo-light: #6c63ff;
  --violet:       #8b5cf6;
  --pink:         #ec4899;
  --pink-light:   #f472b6;
  --peach:        #ffb085;

  --grad-brand:   linear-gradient(135deg, #4f46e5 0%, #8b5cf6 50%, #ec4899 100%);
  --grad-text:    linear-gradient(120deg, #14122a 30%, #4f46e5 70%, #ec4899 100%);

  --shadow-sm:    0 2px 8px rgba(20, 18, 42, 0.06);
  --shadow-md:    0 12px 32px rgba(20, 18, 42, 0.08);
  --shadow-lg:    0 24px 60px rgba(20, 18, 42, 0.14);

  --radius:       18px;
  --radius-sm:    10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d0a1f;
    --surface:   #15122f;
    --ink:       #f5f3ff;
    --ink-2:     #aaa6cc;
    --line:      rgba(255, 255, 255, 0.10);
    --grad-text: linear-gradient(120deg, #f5f3ff 30%, #a5a0ff 70%, #ffb6d5 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  }
}

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

/* `overflow-x: hidden` on the root element along with body — applying
   it only to body can still leak a horizontal scrollbar in some
   browsers when a descendant has explicit width past the viewport. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Background gradient wash to feel "in motion" */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 90% -10%, rgba(236, 72, 153, 0.10), transparent 70%),
    radial-gradient(900px 600px at -10% 30%, rgba(79, 70, 229, 0.12), transparent 70%);
  pointer-events: none;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─────────────────── TOP NAV ─────────────────── */

.topnav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.back-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--indigo);
  font-weight: 500;
}
.back-home svg { width: 14px; height: 14px; }
.nav-docs {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--indigo);
  font-weight: 500;
}
.nav-docs svg { width: 12px; height: 12px; }

.nav-sep { opacity: 0.4; }
.nav-title { color: var(--ink); font-weight: 600; }

main { display: block; }

/* ─────────────────── HERO ─────────────────── */

.hero {
  /* 1180px max + 32px padding matches every other section on the
     page (.topnav, .made-for, .feature-rows, .diff-grid, …) so the
     hero text column left-aligns with the rest of the content. */
  max-width: 1180px;
  margin: 40px auto 100px;
  padding: 0 32px;
  display: grid;
  /* `minmax(0, 1fr)` on the right track is critical: plain `1fr`
     defaults to `minmax(auto, 1fr)`, and that `auto` min would
     expand to the image's intrinsic 900px and collapse the text
     column. Explicit `0` min keeps the demo cell at its 1fr share
     and lets the oversized image overflow cleanly off-screen. */
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  overflow: visible;
}

.hero-text { max-width: 460px; }
.hero-icon img {
  display: block;
  border-radius: unset;
  box-shadow: unset;
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(48px, 6.5vw, 84px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  font-size: 21px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 32px;
}

.cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn-primary {
  color: #ffffff;
  background: var(--grad-brand);
  box-shadow: 0 10px 28px -6px rgba(79, 70, 229, 0.50);
}
.btn-primary:hover {
  box-shadow: 0 14px 36px -6px rgba(79, 70, 229, 0.65);
}
.btn-large { padding: 16px 36px; font-size: 17px; }

.micro {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 18px;
  opacity: 0.85;
}

/* Quiet bundle pointer under a buy-button row. Same job as .micro but
   without the opacity knock-down, so the link reads as an offer rather
   than fine print. Inherits alignment from its section (left in the
   hero, centred in the end CTA). */
.bundle-note {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 16px;
}

/* "Watch the 60-second demo" — quiet inline play link beneath the
   hero CTAs. Indigo play chip + underline-on-hover text. Background
   is transparent so it reads as a link, not a third button. */
.watch-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 6px 4px 6px 0;
  background: transparent;
  border: none;
  color: var(--indigo);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius: 8px;
}
.watch-link:hover { text-decoration: underline; }
.watch-link:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 4px;
}
.watch-link-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  flex-shrink: 0;
}
.watch-link-play svg { width: 10px; height: 10px; transform: translateX(1px); }

/* ─────────────────── VIDEO LIGHTBOX ───────────────────
   Fixed full-viewport overlay. Backdrop is dimmed + blurred. The
   card scales the video to viewport with a max width so it stays
   readable on large monitors. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lightboxIn 180ms ease-out;
}
.video-lightbox[hidden] { display: none; }
.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 12, 30, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.video-lightbox-card {
  position: relative;
  width: 100%;
  max-width: 1100px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}
.video-lightbox-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
}
.video-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.video-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.video-lightbox-close svg { width: 14px; height: 14px; }

@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* HERO SCREENSHOT — light/dark <picture> pair (real MoveMatic editor).
   The screenshot is rendered with its own window chrome (rounded corners,
   traffic lights) and baked-in drop shadow, so the container adds no
   border-radius or shadow on top — those would double up and look fake.

   Explicit large width (well past its grid cell) so the image
   overflows the right side of the layout and bleeds off the viewport.
   The grid item ignores the column's narrower track since width is
   explicit; body's overflow-x: hidden clips the off-screen portion. */
.hero-demo {
  width: 900px;
  max-width: none;
}
.hero-demo picture,
.hero-demo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────────── KICKER (small section labels) ─────────────────── */

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.kicker.centered { text-align: center; }

/* ─────────────────── MADE FOR ─────────────────── */

.made-for {
  max-width: 1180px;
  margin: 0 auto 110px;
  padding: 0 32px;
}

.use-cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.use-case {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.use-case:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.use-vis {
  height: 180px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .use-vis {
    background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 1: App Store preview video — iPhone with content cycling
   ═══════════════════════════════════════════════════════════════ */
.phone-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 86px; height: 158px;
  margin: -79px 0 0 -43px;
  background: #14122a;
  border-radius: 18px;
  padding: 4px;
  box-shadow: 0 12px 24px rgba(20, 18, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone-notch {
  position: absolute;
  top: 7px; left: 50%;
  width: 26px; height: 5px;
  margin-left: -13px;
  background: #14122a;
  border-radius: 3px;
  z-index: 2;
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  border-radius: 14px;
  padding: 14px 8px 10px;
  overflow: hidden;
}

.phone-app-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--grad-brand);
  margin: 4px auto 8px;
  box-shadow: 0 3px 6px rgba(79, 70, 229, 0.35);
  animation: phoneIconPop 5s infinite ease-out;
}
@keyframes phoneIconPop {
  0%, 8%   { transform: scale(0.5); opacity: 0; }
  18%      { transform: scale(1.1); opacity: 1; }
  28%, 100%{ transform: scale(1);   opacity: 1; }
}

.phone-headline {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;     /* stack vertically — phone is too narrow for the words side-by-side */
  align-items: center;
  gap: 1px;
}
.phone-word {
  display: block;
  opacity: 0;
  transform: translateY(6px);
}
.phone-w1 { animation: phoneWord 5s infinite ease-out; animation-delay: 0.3s; }
.phone-w2 { animation: phoneWord 5s infinite ease-out; animation-delay: 0.9s; }
.phone-w3 {
  animation: phoneWord 5s infinite ease-out;
  animation-delay: 1.5s;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes phoneWord {
  0%, 6%   { opacity: 0; transform: translateY(6px); }
  16%, 78% { opacity: 1; transform: translateY(0); }
  92%, 100%{ opacity: 0; transform: translateY(-4px); }
}

.phone-sub {
  height: 4px;
  width: 80%;
  background: var(--ink-2);
  opacity: 0.25;
  border-radius: 2px;
  margin: 4px auto 8px;
}

.phone-progress {
  position: absolute;
  left: 8px; right: 8px;
  bottom: 12px;
  height: 3px;
  background: rgba(20, 18, 42, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.phone-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--grad-brand);
  transform-origin: left;
  transform: scaleX(0);
  animation: phoneProgress 5s infinite linear;
}
@keyframes phoneProgress {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 2: Product demo window — UI with cursor → button + callout
   ═══════════════════════════════════════════════════════════════ */
.demo-window {
  position: absolute;
  inset: 18px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(20, 18, 42, 0.10), 0 0 0 1px var(--line);
  overflow: hidden;
}
.demo-window-bar {
  height: 16px;
  background: linear-gradient(180deg, #f0eef5 0%, #e6e3ee 100%);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
}
.win-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.win-dot--red    { background: #ff5f57; }
.win-dot--yellow { background: #febc2e; }
.win-dot--green  { background: #28c840; }

.demo-content {
  display: flex;
  height: calc(100% - 16px);
}
.demo-sidebar {
  width: 32%;
  padding: 8px 6px;
  background: #faf8ff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.demo-sidebar-row {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-2);
  opacity: 0.3;
}
.demo-sidebar-row.active {
  background: var(--indigo);
  opacity: 1;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

.demo-main {
  flex: 1;
  padding: 10px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.demo-main-title {
  height: 7px;
  width: 70%;
  background: var(--ink);
  opacity: 0.7;
  border-radius: 3px;
}
.demo-main-row {
  height: 4px;
  width: 100%;
  background: var(--ink-2);
  opacity: 0.3;
  border-radius: 2px;
}
.demo-main-row.short { width: 65%; }
/* Button positioned higher in main area + centered horizontally so
   the cursor has a stable, predictable target to land on. */
.demo-main-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 9px;
  padding: 4px 10px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
  animation: demoBtnPulse 4s infinite ease-out;
}
/* All button keyframes carry the centering translate so the button
   stays anchored to (50%, 50%) of .demo-main throughout the scale anim. */
@keyframes demoBtnPulse {
  0%, 55%   { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3); }
  65%       { transform: translate(-50%, -50%) scale(0.92); box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2); }
  75%       { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.55); }
  85%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3); }
}

.demo-callout {
  position: absolute;
  top: 22px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  animation: demoCallout 4s infinite ease-out;
}
.demo-callout-dot {
  width: 6px; height: 6px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}
.demo-callout-line {
  width: 16px;
  height: 1.5px;
  background: var(--pink);
}
.demo-callout-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--pink);
  background: #ffffff;
  border: 1px solid var(--pink);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
@keyframes demoCallout {
  0%, 18%  { opacity: 0; transform: translateX(8px); }
  28%, 80% { opacity: 1; transform: translateX(0); }
  92%, 100%{ opacity: 0; transform: translateX(4px); }
}

/* Cursor lands with its pointer tip on the button center. The tip
   inside the SVG sits at viewBox (2, 2) of (0 0 18 22), so it's
   offset ~1.3px right and ~1.3px down from the cursor element's
   top-left. Cursor element top: 55% / left: 65% puts the tip at
   roughly (66%, 56%) of the window — same point as the button's
   center given the sidebar+main layout. */
.demo-window-cursor {
  position: absolute;
  width: 12px; height: 14px;
  top: 100%; left: 90%;
  z-index: 4;
  animation: demoCursor 4s infinite ease-in-out;
}
.demo-window-cursor svg { width: 100%; height: 100%; }
@keyframes demoCursor {
  0%       { top: 95%; left: 92%; opacity: 0; }
  15%      { top: 82%; left: 80%; opacity: 1; }
  60%, 85% { top: 55%; left: 65%; opacity: 1; }
  100%     { top: 95%; left: 92%; opacity: 0; }
}

/* Pulse ring centers on the button center via negative margins
   (half the ring's width/height) so the existing scale animation
   can stay on the transform property without conflicting. */
.demo-window-pulse {
  position: absolute;
  width: 16px; height: 16px;
  top: 56%; left: 66%;
  margin-top: -8px; margin-left: -8px;
  border: 2px solid var(--pink);
  border-radius: 50%;
  opacity: 0;
  animation: demoPulseRing 4s infinite ease-out;
}
@keyframes demoPulseRing {
  0%, 60%  { opacity: 0; transform: scale(0.6); }
  68%      { opacity: 0.9; transform: scale(1); }
  84%      { opacity: 0; transform: scale(3); }
  100%     { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 3: Social marketing — 1:1 square post with text + emoji.
   Square aspect (vs. the iPhone preview's 9:16) signals "feed post"
   and reads distinctly from the App Store card in the same row.
   ═══════════════════════════════════════════════════════════════ */
.reel-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  margin: -70px 0 0 -70px;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 50%, #ec4899 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.30);
}

.reel-burst {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5), transparent 55%);
  opacity: 0;
  animation: reelBurst 3.6s infinite ease-out;
}
@keyframes reelBurst {
  0%   { opacity: 0; transform: scale(0.4); }
  18%  { opacity: 0.95; transform: scale(0.85); }
  45%  { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}

.reel-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #ffffff;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  padding-bottom: 18px;  /* lift text above the CTA */
}
.reel-line {
  display: block;
  opacity: 0;
  transform: translateY(8px) scale(0.85);
}
.reel-text .reel-line:nth-child(1) {
  animation: reelLine 3.6s infinite ease-out;
  animation-delay: 0.15s;
}
.reel-text .reel-line:nth-child(2) {
  animation: reelLine 3.6s infinite ease-out;
  animation-delay: 0.5s;
  background: linear-gradient(135deg, #fff3cf 0%, #ffd070 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
@keyframes reelLine {
  0%, 5%    { opacity: 0; transform: translateY(8px) scale(0.85); }
  18%, 70%  { opacity: 1; transform: translateY(0) scale(1); }
  86%, 100% { opacity: 0; transform: translateY(-4px) scale(0.95); }
}

.reel-emoji {
  position: absolute;
  font-size: 16px;
  opacity: 0;
  animation: reelEmoji 3.6s infinite ease-out;
}
/* Anchor emoji in the 4 corners of the square. */
.reel-emoji--1 { top: 10px;  left: 10px;  animation-delay: 0.3s; }
.reel-emoji--2 { top: 10px;  right: 10px; animation-delay: 0.55s; }
.reel-emoji--3 { bottom: 38px; left: 10px; animation-delay: 0.8s; }
@keyframes reelEmoji {
  0%, 5%    { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  18%       { opacity: 1; transform: scale(1.15) rotate(0deg); }
  30%       { opacity: 1; transform: scale(1); }
  70%       { opacity: 1; transform: scale(1) translateY(-6px) rotate(8deg); }
  90%, 100% { opacity: 0; transform: scale(0.9) translateY(-12px); }
}

.reel-cta {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: #ffffff;
  color: var(--indigo);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
  opacity: 0;
  animation: reelCta 3.6s infinite ease-out;
  animation-delay: 0.9s;
}
@keyframes reelCta {
  0%, 25%   { opacity: 0; transform: translate(-50%, 10px); }
  38%       { opacity: 1; transform: translate(-50%, -2px); }
  44%       { opacity: 1; transform: translate(-50%, 0); }
  80%       { opacity: 1; transform: translate(-50%, 0); }
  92%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASE 4: Presentation — slide with hand-drawn arrow + label
   ═══════════════════════════════════════════════════════════════ */
.present-slide {
  position: absolute;
  inset: 16px;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 16px rgba(20, 18, 42, 0.10), 0 0 0 1px var(--line);
  overflow: hidden;
}
.slide-title-bar {
  height: 7px;
  width: 60%;
  background: var(--ink);
  opacity: 0.85;
  border-radius: 3px;
  margin-bottom: 5px;
}
.slide-title-bar.short {
  width: 40%;
  opacity: 0.4;
  margin-bottom: 12px;
}

.slide-bullets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slide-bullet {
  height: 4px;
  width: 80%;
  background: var(--ink-2);
  opacity: 0.35;
  border-radius: 2px;
  position: relative;
  padding-left: 8px;
}
.slide-bullet i {
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--indigo);
}
.slide-bullet:nth-child(2) { width: 65%; }
.slide-bullet:nth-child(3) { width: 75%; }

.slide-target {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35);
  letter-spacing: -0.01em;
  animation: slideTargetPulse 5s infinite ease-out;
}
@keyframes slideTargetPulse {
  0%, 60%  { transform: scale(1); box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35); }
  72%      { transform: scale(1.1); box-shadow: 0 6px 16px rgba(236, 72, 153, 0.6); }
  84%, 100%{ transform: scale(1); box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35); }
}

.slide-arrow {
  position: absolute;
  bottom: 14px;
  left: 8px;
  width: 75%;
  height: 60%;
  pointer-events: none;
}
/* Slightly shorter dash budget for the new shorter path. */
.slide-arrow-path {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: slideArrowDraw 5s infinite ease-out;
}
/* Rounded V arrowhead that grows out from the line endpoint via
   scaleX, matching the language of the arrows-that-draw-themselves
   card. The outer <g> handles placement + tangent rotation; this
   inner group receives only the scaleX. */
.slide-arrow-head {
  opacity: 0;
  animation: slideArrowHead 5s infinite ease-out;
}
@keyframes slideArrowDraw {
  0%, 10%   { stroke-dashoffset: 180; }
  42%       { stroke-dashoffset: 0; }
  78%       { stroke-dashoffset: 0; }
  90%, 100% { stroke-dashoffset: 180; }
}
@keyframes slideArrowHead {
  0%, 30%   { opacity: 0; transform: scaleX(0); }
  42%       { opacity: 1; transform: scaleX(1); }
  78%       { opacity: 1; transform: scaleX(1); }
  92%, 100% { opacity: 0; transform: scaleX(0); }
}

/* Sits between the arrow's endpoint and the Upgrade button, in the
   empty gap the shortened arrow leaves. Labels the button without
   overlapping either the arrow path or the button. */
.slide-handwrite {
  position: absolute;
  bottom: 50px;
  right: 12px;
  font-family: "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
  transform: rotate(-8deg);
  transform-origin: center;
  opacity: 0;
  animation: slideHandwrite 5s infinite ease-out;
}
@keyframes slideHandwrite {
  0%, 48%   { opacity: 0; transform: rotate(-8deg) translateY(6px) scale(0.7); }
  60%       { opacity: 1; transform: rotate(-8deg) translateY(0) scale(1.1); }
  68%       { opacity: 1; transform: rotate(-8deg) translateY(0) scale(1); }
  80%       { opacity: 1; }
  90%, 100% { opacity: 0; }
}

.use-case h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 18px 22px 6px;
}
.use-case p {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ─────────────────── FEATURE ROWS (zigzag) ───────────────────
   Four alternating left/right rows: visibility spans, ripple
   timeline, procedural behaviors, multi-scene documents.
   All flat (no card containers) so the zigzag reads as a unified
   sequence rather than mixed treatments. */

.feature-rows {
  max-width: 1180px;
  margin: 0 auto 80px;
  padding: 0 32px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 120px;
}
.feature-row:last-child { margin-bottom: 0; }

/* Reversed rows: demo first in source, text second; visual order
   stays left-to-right via grid-auto-flow. */
.feature-row.reverse > :first-child { grid-column: 1; }
.feature-row.reverse > :last-child  { grid-column: 2; }

.feature-text h2 {
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 22px;
}
.feature-text h2 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feature-text p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 14px;
}
.feature-text p:last-child { margin-bottom: 0; }
.feature-text kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: #f6f3ec;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .feature-text kbd { background: rgba(255, 255, 255, 0.08); }
}

.feature-demo {
  position: relative;
  min-height: 280px;
}
/* iPad screenshot in the "Also on iPhone and iPad" feature row. Sits in a
   .feature-demo cell like the CSS-art demos, but is a real image, so it
   gets decorative device chrome instead of absolute positioning.

   Pure CSS, no image assets, and purely ambient — it carries no alt text
   and nothing meaningful, so screen readers only ever see the screenshot
   inside it. The capture already includes its own status bar, so the
   frame draws none of its own. Mirrors .device in shared.css; ChopShop
   doesn't link that file, hence the local copy. */
.ipad-shot {
  --bezel: 8px;
  --outer-r: 22px;
  position: relative;
  z-index: 0;
  padding: var(--bezel);
  background:
    linear-gradient(155deg, #55555c 0%, #26262b 22%, #17171b 55%, #3a3a42 100%);
  border-radius: var(--outer-r);
  box-shadow:
    0 26px 52px -20px rgba(0, 0, 0, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Light/dark pairs come wrapped in <picture>; keep it a plain block
   box so it adds no inline line-height gap under the image. */
.ipad-shot picture,
.iphone-shot picture { display: block; }

.ipad-shot img {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  /* Concentric with the outer corner, so the bezel stays even. */
  border-radius: calc(var(--outer-r) - var(--bezel));
}

/* Side buttons, tucked behind the frame body so they read as part of the
   enclosure. Landscape iPad: power on the top edge, volume pair right. */
.ipad-shot::before,
.ipad-shot::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: linear-gradient(180deg, #4a4a52, #22222a);
  border-radius: 2px;
}
.ipad-shot::before {
  top: -3px; right: 16%;
  width: 12%; height: 6px;
  border-radius: 3px 3px 0 0;
}
.ipad-shot::after {
  right: -3px; top: 14%;
  width: 6px; height: 22%;
  border-radius: 0 3px 3px 0;
  background:
    linear-gradient(180deg, #4a4a52, #22222a) center top / 100% 44% no-repeat,
    linear-gradient(180deg, #4a4a52, #22222a) center bottom / 100% 44% no-repeat;
}

/* On the dark page the frame's own dark grey loses its outer edge. */
@media (prefers-color-scheme: dark) {
  .ipad-shot {
    background:
      linear-gradient(155deg, #6a6a74 0%, #34343c 22%, #23232a 55%, #4a4a54 100%);
    box-shadow:
      0 26px 52px -20px rgba(0, 0, 0, 0.75),
      0 3px 8px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
  .ipad-shot::before { background: linear-gradient(180deg, #5c5c68, #33333c); }
  .ipad-shot::after {
    background:
      linear-gradient(180deg, #5c5c68, #33333c) center top / 100% 44% no-repeat,
      linear-gradient(180deg, #5c5c68, #33333c) center bottom / 100% 44% no-repeat;
  }
}

/* The two devices as one composition: the iPad sets the size of the
   cell, and the iPhone hangs off its lower-left corner, overlapping.
   The overhang eats into the row's 80px gutter rather than the text
   column, so nothing reflows. */
.device-duo {
  position: relative;
  /* Room for the phone's overhang, so the following row clears it. */
  margin-bottom: 8%;
}
.iphone-shot {
  --bezel: 5px;
  --outer-r: 26px;
  position: absolute;
  /* -6% of the demo cell, but never more overhang than the page's own
     32px gutter — past ~800px the row goes single-column and the cell
     grows, and a straight percentage walks the phone off-screen. */
  left: max(-6%, -22px);
  bottom: -14%;
  width: 24%;
  z-index: 2;
  padding: var(--bezel);
  background:
    linear-gradient(155deg, #55555c 0%, #26262b 22%, #17171b 55%, #3a3a42 100%);
  border-radius: var(--outer-r);
  box-shadow:
    0 22px 40px -16px rgba(0, 0, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.iphone-shot img {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: calc(var(--outer-r) - var(--bezel));
}
/* Portrait iPhone: volume pair on the left, power on the right. */
.iphone-shot::before,
.iphone-shot::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: linear-gradient(180deg, #4a4a52, #22222a);
  border-radius: 2px;
}
.iphone-shot::before {
  left: -2px; top: 20%;
  width: 4px; height: 20%;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(180deg, #4a4a52, #22222a) center top / 100% 40% no-repeat,
    linear-gradient(180deg, #4a4a52, #22222a) center bottom / 100% 40% no-repeat;
}
.iphone-shot::after {
  right: -2px; top: 26%;
  width: 4px; height: 16%;
  border-radius: 0 2px 2px 0;
}

@media (prefers-color-scheme: dark) {
  .iphone-shot {
    background:
      linear-gradient(155deg, #6a6a74 0%, #34343c 22%, #23232a 55%, #4a4a54 100%);
    box-shadow:
      0 22px 40px -16px rgba(0, 0, 0, 0.8),
      0 3px 8px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
  .iphone-shot::after { background: linear-gradient(180deg, #5c5c68, #33333c); }
  .iphone-shot::before {
    background:
      linear-gradient(180deg, #5c5c68, #33333c) center top / 100% 40% no-repeat,
      linear-gradient(180deg, #5c5c68, #33333c) center bottom / 100% 40% no-repeat;
  }
}

/* Fussy at small sizes, where the row goes single-column. */
@media (max-width: 620px) {
  .ipad-shot::before, .ipad-shot::after,
  .iphone-shot::before, .iphone-shot::after { display: none; }
}

.span-timeline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.span-track {
  position: relative;
  height: 60px;
  background: #f6f3ec;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .span-track { background: rgba(255, 255, 255, 0.04); }
}
.span-intro {
  position: absolute;
  left: 5%; top: 12px; bottom: 12px;
  width: 18%;
  background: linear-gradient(90deg, transparent 0%, var(--indigo) 100%);
  border-radius: 4px;
}
.span-body {
  position: absolute;
  left: 23%; top: 12px; bottom: 12px;
  width: 54%;
  background: var(--indigo);
  border-radius: 4px;
}
.span-outro {
  position: absolute;
  left: 77%; top: 12px; bottom: 12px;
  width: 18%;
  background: linear-gradient(90deg, var(--indigo) 0%, transparent 100%);
  border-radius: 4px;
}
.span-playhead {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2px;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
  left: 5%;
  animation: playhead 4.5s infinite ease-in-out;
}
@keyframes playhead {
  0%   { left: 4%;  }
  100% { left: 96%; }
}

.span-stage {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-color-scheme: dark) {
  .span-stage { background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%); }
}
.span-object {
  padding: 22px 36px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.85);
  animation: spanObject 4.5s infinite ease-out;
}
@media (prefers-color-scheme: dark) {
  /* Lift the card off the dark stage so the title doesn't sit on a
     near-black background — `--surface` in dark mode is the same
     deep tone as the page card surfaces. Adding a subtle inner
     border keeps the card edge readable against the gradient stage. */
  .span-object { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); }
}
@keyframes spanObject {
  /* Mirror the playhead: intro from 4-23%, body 23-77%, outro 77-96% */
  0%, 4%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  23%      { opacity: 1; transform: scale(1)    translateY(0);    }
  77%      { opacity: 1; transform: scale(1)    translateY(0);    }
  96%, 100%{ opacity: 0; transform: scale(0.92) translateY(-10px);}
}

/* ─────────────────── ROW 2 DEMO: ripple bars ─────────────────── */

.ripple-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 24px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ripple-bar {
  height: 48px;
  flex: 0 0 calc(var(--w) * 1.3%);
  background: var(--grad-brand);
  border-radius: 6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  transform: translateX(0);
  animation: ripple 4s infinite ease-in-out;
}
.ripple-bar:nth-child(1) { animation-delay: 0.5s; }
.ripple-bar.move        { animation-delay: 0s; animation-name: rippleMover; }
.ripple-bar:nth-child(3) { animation-delay: 0.5s; }
.ripple-bar:nth-child(4) { animation-delay: 0.5s; }

@keyframes ripple {
  0%, 30%  { transform: translateX(0); }
  50%, 80% { transform: translateX(36px); }
  100%     { transform: translateX(0); }
}
@keyframes rippleMover {
  0%, 25%  { transform: translateX(0); box-shadow: 0 0 0 rgba(236, 72, 153, 0); }
  45%, 75% { transform: translateX(36px); box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); }
  100%     { transform: translateX(0); }
}

.ripple-cap {
  margin-top: 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}

/* ─────────────────── ROW 3 DEMO: procedural behaviors rack ───────────────────
   Three "tracks" stacked, each showing a property + behavior label
   on the left and a shape continuously animating on the right. */

.behaviors-rack {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.behavior-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 14px 14px 18px;
  background: #f6f3ec;
  border-radius: 10px;
  border: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  .behavior-row { background: rgba(255, 255, 255, 0.04); }
}
.behavior-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.behavior-prop {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.behavior-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--indigo);
}
.behavior-stage {
  position: relative;
  height: 46px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .behavior-stage { background: rgba(255, 255, 255, 0.04); }
}
.behavior-shape {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 8px;
  background: var(--grad-brand);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.30);
}
.behavior-shape--wiggle {
  left: 50%;
  margin-left: -16px;
  animation: behWiggle 1.5s infinite ease-in-out;
}
.behavior-shape--oscillate {
  left: 50%;
  margin-left: -16px;
  border-radius: 6px;
  animation: behOscillate 2s infinite ease-in-out;
}
.behavior-shape--shake {
  left: 50%;
  margin-left: -16px;
  clip-path: polygon(50% 4%, 95% 92%, 5% 92%);
  background: var(--grad-brand);
  animation: behShake 0.32s infinite ease-in-out;
}

/* ─── PROCEDURAL PRIMITIVES (cursor, follow, hotspot) ─── */

/* Cursor that follows an invisible path between two hotspots */
.prim-hotspot {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--indigo) 20%, transparent);
  border: 2px solid var(--indigo);
}
.prim-hotspot--start { left: 14px; }
.prim-hotspot--end   { right: 14px; }
.prim-cursor {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 12px; height: 14px;
  margin-top: -3px;
  animation: primCursorPath 3s infinite ease-in-out;
}
@keyframes primCursorPath {
  0%, 100% { left: 14px; top: 50%; transform: translateY(-3px); }
  50%      { left: calc(100% - 26px); top: 50%; transform: translateY(-3px); }
}

/* Follow Layer: a small dot trails behind a moving leader shape */
.prim-leader {
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  border-radius: 6px;
  background: var(--grad-brand);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.30);
  animation: primLeader 3s infinite ease-in-out;
  left: 18px;
}
.prim-follower {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 6px rgba(236, 72, 153, 0.50);
  animation: primFollower 3s infinite ease-in-out;
  left: 18px;
}
@keyframes primLeader {
  0%, 100% { left: 18px; }
  50%      { left: calc(100% - 40px); }
}
@keyframes primFollower {
  /* Same path as the leader, slightly delayed via a different
     interpolation curve — gives the trailing effect. */
  0%, 100% { left: 18px; }
  6%       { left: 18px; }   /* lag at start */
  56%      { left: calc(100% - 40px); }   /* still behind at midpoint */
  100%     { left: 18px; }
}

@keyframes behWiggle {
  0%, 100% { transform: rotate(0deg);   }
  25%      { transform: rotate(-22deg); }
  50%      { transform: rotate(8deg);   }
  75%      { transform: rotate(-12deg); }
}
@keyframes behOscillate {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px);  }
}
@keyframes behShake {
  0%, 100% { transform: scale(1)    translateX(0);   }
  25%      { transform: scale(1.08) translateX(-2px);}
  50%      { transform: scale(0.94) translateX(2px); }
  75%      { transform: scale(1.06) translateX(-1px);}
}

/* ─────────────────── ROW 4 DEMO: multi-scene deck + audio bed ───────────────────
   Three mini "scenes" in a row connected by transition labels,
   with an audio-waveform strip below and a playhead sweeping
   across that highlights the active scene. */

.scenes-deck {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.scene-mini {
  position: relative;
  height: 90px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: sceneActive 6s infinite ease-in-out;
}
.scene-mini:nth-of-type(1) { animation-delay: 0s; }
.scene-mini:nth-of-type(3) { animation-delay: 2s; }
.scene-mini:nth-of-type(5) { animation-delay: 4s; }
@keyframes sceneActive {
  0%, 25%      { transform: scale(1);    box-shadow: 0 2px 4px rgba(20, 18, 42, 0.04); }
  4%, 14%      { transform: scale(1.06); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25); }
  100%         { transform: scale(1);    box-shadow: 0 2px 4px rgba(20, 18, 42, 0.04); }
}
@media (prefers-color-scheme: dark) {
  .scene-mini { background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%); }
}

/* Scene 1 — title-style content */
.scene-mini-line {
  height: 6px;
  background: var(--ink);
  opacity: 0.7;
  border-radius: 3px;
}
.scene-mini-line.short {
  width: 70%;
  opacity: 0.35;
}
.scene-mini-btn {
  margin-top: 6px;
  width: 40%;
  height: 12px;
  background: var(--grad-brand);
  border-radius: 6px;
}

/* Scene 2 — image placeholder */
.scene-mini--alt {
  align-items: center;
  justify-content: center;
}
.scene-mini-img {
  width: 60%;
  height: 60%;
  background: var(--grad-brand);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.30);
}

/* Scene 3 — CTA */
.scene-mini--cta {
  align-items: center;
  justify-content: center;
}
.scene-mini-cta {
  width: 70%;
  height: 24px;
  background: var(--grad-brand);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
}

/* Transition labels between scenes */
.scene-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
}
.scene-trans-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scene-transition svg {
  width: 26px;
  height: 12px;
  color: var(--indigo);
}

/* Audio strip below the scenes */
.scenes-audio {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 12px 20px;
  box-shadow: var(--shadow-sm);
}
.audio-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  gap: 3px;
}
.audio-bars span {
  flex: 1;
  background: var(--indigo);
  border-radius: 2px;
  opacity: 0.6;
  animation: audioBar 1.2s infinite ease-in-out;
}
.audio-bars span:nth-child(1)  { height: 30%; animation-delay: 0.0s; }
.audio-bars span:nth-child(2)  { height: 55%; animation-delay: 0.05s; }
.audio-bars span:nth-child(3)  { height: 80%; animation-delay: 0.10s; }
.audio-bars span:nth-child(4)  { height: 45%; animation-delay: 0.15s; }
.audio-bars span:nth-child(5)  { height: 70%; animation-delay: 0.20s; }
.audio-bars span:nth-child(6)  { height: 25%; animation-delay: 0.25s; }
.audio-bars span:nth-child(7)  { height: 90%; animation-delay: 0.30s; }
.audio-bars span:nth-child(8)  { height: 50%; animation-delay: 0.35s; }
.audio-bars span:nth-child(9)  { height: 35%; animation-delay: 0.40s; }
.audio-bars span:nth-child(10) { height: 75%; animation-delay: 0.45s; }
.audio-bars span:nth-child(11) { height: 60%; animation-delay: 0.50s; }
.audio-bars span:nth-child(12) { height: 40%; animation-delay: 0.55s; }
.audio-bars span:nth-child(13) { height: 85%; animation-delay: 0.60s; }
.audio-bars span:nth-child(14) { height: 30%; animation-delay: 0.65s; }
.audio-bars span:nth-child(15) { height: 65%; animation-delay: 0.70s; }
.audio-bars span:nth-child(16) { height: 50%; animation-delay: 0.75s; }
.audio-bars span:nth-child(17) { height: 70%; animation-delay: 0.80s; }
.audio-bars span:nth-child(18) { height: 35%; animation-delay: 0.85s; }
.audio-bars span:nth-child(19) { height: 55%; animation-delay: 0.90s; }
.audio-bars span:nth-child(20) { height: 25%; animation-delay: 0.95s; }
.audio-bars span:nth-child(21) { height: 60%; animation-delay: 1.00s; }
.audio-bars span:nth-child(22) { height: 80%; animation-delay: 1.05s; }
.audio-bars span:nth-child(23) { height: 40%; animation-delay: 1.10s; }
.audio-bars span:nth-child(24) { height: 70%; animation-delay: 1.15s; }
.audio-bars span:nth-child(25) { height: 30%; animation-delay: 1.20s; }
@keyframes audioBar {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.1); }
}

.audio-playhead {
  position: absolute;
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  left: 5%;
  animation: audioPlayhead 6s infinite linear;
}
@keyframes audioPlayhead {
  0%   { left: 5%;  }
  100% { left: 95%; }
}

/* ─────────────────── DIFFERENTIATORS GRID ─────────────────── */

.diff-grid {
  max-width: 1180px;
  margin: 0 auto 110px;
  padding: 0 32px;
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.diff-grid > .kicker {
  grid-column: 1 / -1;
}

.diff-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.diff-vis {
  height: 160px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fef0f7 100%);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .diff-vis {
    background: linear-gradient(135deg, #2a1f4a 0%, #3a1f3f 100%);
  }
}
.diff-card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 20px 22px 6px;
}
.diff-card p {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* PULSE diff visual */
.pulse-circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  background: var(--grad-brand);
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(79, 70, 229, 0.30);
  animation: pulseBeat 2s infinite ease-out;
}
.pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border: 3px solid var(--pink);
  border-radius: 50%;
  opacity: 0;
  animation: pulseRing 2s infinite ease-out;
}
@keyframes pulseBeat {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.18); }
  25%      { transform: scale(1); }
}
@keyframes pulseRing {
  0%   { opacity: 0.7; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* CAMERA ZOOM diff visual */
.zoom-window {
  position: absolute;
  inset: 20px;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(20, 18, 42, 0.10);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  /* Inner border keeps the panel edge visible against the dark
     gradient when both share the same deep tone. */
  .zoom-window {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--line);
  }
}
.zoom-detail {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  background: var(--grad-brand);
  border-radius: 6px;
  animation: zoomDetail 4s infinite ease-in-out;
}
.zoom-frame {
  position: absolute;
  inset: 25% 30%;
  border: 2px dashed var(--pink);
  border-radius: 6px;
  animation: zoomFrame 4s infinite ease-in-out;
}
@keyframes zoomDetail {
  0%, 25%  { transform: scale(1); }
  50%, 75% { transform: scale(2.3); }
  100%     { transform: scale(1); }
}
@keyframes zoomFrame {
  0%, 25%  { opacity: 0.5; }
  50%, 75% { opacity: 0; transform: scale(2); }
  100%     { opacity: 0.5; transform: scale(1); }
}

/* PARTICLES diff visual */
.particles-emitter {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
}
.particle-source {
  position: absolute;
  top: -22px; left: -22px;
  width: 44px; height: 44px;
  background: var(--grad-brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 8px 16px rgba(79, 70, 229, 0.30);
}
/* Per-particle CSS variables (set inline in HTML):
   --angle  emission direction
   --dist   how far it travels before fading
   --size   particle diameter
   --color  base color (also used for the matching glow halo)
   --delay  animation-delay
   Animation: tiny → full size → travel out → fade. */
.p-particle {
  position: absolute;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: var(--color, #ec4899);
  box-shadow: 0 0 6px var(--color, #ec4899);
  opacity: 0;
  animation: emitter 2.4s infinite ease-out;
  animation-delay: var(--delay, 0s);
}
@keyframes emitter {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  12%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% {
    opacity: 0;
    transform: translate(
      calc(cos(var(--angle)) * var(--dist, 55px)),
      calc(sin(var(--angle)) * var(--dist, 55px))
    ) scale(0.2);
  }
}

/* Emission pulse ring from the source. Two are staggered so the
   pulses overlap and feel continuous. */
.emit-pulse {
  position: absolute;
  top: -22px; left: -22px;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 2px solid #ec4899;
  opacity: 0;
  animation: emitPulse 2.4s infinite ease-out;
  animation-delay: var(--delay, 0s);
}
@keyframes emitPulse {
  0%   { opacity: 0.7; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* ─────────────────── DIFF-CARD STATIC VISUALS ───────────────────
   Three of the diff-cards (layer kinds, mix & match, trim sheet)
   use static-illustration visuals instead of animated demos —
   they're the "this is what you get" survey features rather than
   conceptual hooks, so motion would feel noisy. */

/* kbd inside any diff-card paragraph */
.diff-card kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #f6f3ec;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .diff-card kbd { background: rgba(255, 255, 255, 0.08); }
}

/* ANIMATED ARROWS — two curved arrows that draw themselves on,
   each with an anchor dot at the start and an arrowhead that
   pops in when the stroke finishes. */
.arrows-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8px;
}

.arr-path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: arrowDraw 5s infinite ease-in-out;
}
.arr-path--1 { animation-delay: 0s; }
.arr-path--2 { animation-delay: 0.6s; }

/* Arrowheads grow out of the line's endpoint via a horizontal scale.
   Each arrowhead is wrapped in a <g> with an SVG transform="translate(...)"
   placing the group's local (0,0) at the line endpoint. The path inside
   uses LOCAL coordinates relative to that endpoint. CSS scaleX(0) on the
   group then collapses the V back to its base point on top of the line
   end; scaleX(1) extends it to the tip. Wrapping in a translated group
   sidesteps inconsistent browser support for CSS transform-origin on
   raw SVG path elements. */
.arr-head {
  opacity: 0;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.arr-head--1 {
  animation-name: arrowHead1;
  animation-delay: 0s;
}
.arr-head--2 {
  animation-name: arrowHead2;
  animation-delay: 0.6s;
}

.arr-anchor {
  opacity: 0;
  animation: arrowAnchor 5s infinite ease-out;
}
.arr-anchor--1 { animation-delay: 0s; }
.arr-anchor--2 { animation-delay: 0.6s; }

@keyframes arrowDraw {
  0%, 4%    { stroke-dashoffset: 240; }
  42%       { stroke-dashoffset: 0; }
  78%       { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 240; }
}
/* Arrowheads grow out of the line end as the stroke completes.
   The outer SVG <g> handles placement (via the transform attribute);
   THIS inner group receives only the CSS scaleX animation. Since the
   inner group sits at local (0, 0) — which the outer translate maps
   to the line endpoint — scaleX(0) collapses the V at the line end
   and scaleX(1) extends it out to the tip. One keyframe set, both
   arrows use it. */
.arr-head--1,
.arr-head--2 { animation-name: arrowHead; }

@keyframes arrowHead {
  0%, 30%   { opacity: 0; transform: scaleX(0); }
  42%       { opacity: 1; transform: scaleX(1); }
  78%       { opacity: 1; transform: scaleX(1); }
  92%, 100% { opacity: 0; transform: scaleX(0); }
}
@keyframes arrowAnchor {
  0%, 1%    { opacity: 0; transform: scale(0.4); }
  6%        { opacity: 1; transform: scale(1.3); }
  10%, 78%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.8); }
}

/* MIX & MATCH — four tiles whose fills cycle (light animation) */
.mix-match {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: center;
}
.mm-tile {
  height: 70px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  background-size: 200% 200%;
  animation: mmShuffle 6s infinite ease-in-out;
}
.mm-tile--1 {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  animation-delay: 0s;
}
.mm-tile--2 {
  background: linear-gradient(135deg, var(--violet), var(--pink));
  animation-delay: 1.5s;
}
.mm-tile--3 {
  background: linear-gradient(135deg, var(--pink), var(--peach));
  animation-delay: 3s;
}
.mm-tile--4 {
  background: linear-gradient(135deg, var(--peach), var(--indigo));
  animation-delay: 4.5s;
}
@keyframes mmShuffle {
  0%, 100% { transform: scale(1) translateY(0); filter: hue-rotate(0deg); }
  20%      { transform: scale(0.92) translateY(2px); }
  40%      { transform: scale(1.04) translateY(-4px); filter: hue-rotate(40deg); }
  60%      { transform: scale(1)    translateY(0);  filter: hue-rotate(20deg); }
}

/* TRIM SHEET — horizontal filmstrip with In/Out handles bracketing
   a highlighted clip range. Pure layout, no animation. */
.trim-sheet {
  position: absolute;
  inset: 0;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trim-strip {
  display: flex;
  gap: 2px;
  height: 56px;
  padding: 4px;
  background: var(--surface);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.trim-frame {
  flex: 1;
  background: linear-gradient(135deg, #c7c0e6 0%, #d6cce6 100%);
  border-radius: 2px;
  opacity: 0.55;
}
.trim-frame--in,
.trim-frame--mid,
.trim-frame--out {
  background: var(--grad-brand);
  opacity: 1;
}
.trim-handle {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 22px;
  border-radius: 5px;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.40);
  z-index: 2;
}
/* Within .trim-strip the strip is `display: flex; padding: 4px;` so
   the inner usable width starts ~4px in. Position the handles so they
   bracket frames 3 (In) and 7 (Out) in the 9-frame strip. */
.trim-handle--in  { left: 24%; }
.trim-handle--out { right: 24%; }

/* ─────────────────── CTA + SUPPORT (combined) ───────────────────
   Single closing card. Reading order: heading → subhead → small
   requirements line → buttons → quiet support-link row. Putting
   the requirements line ABOVE the buttons gets it out of the
   button drop-shadows where it was being muddied. */

.cta-end {
  /* Align with the content INSIDE the 1180px rail, not the rail
     itself — every other section is `max-width: 1180px; padding: 0
     32px`, so its content sits at 1116px. The CTA card has its own
     internal padding, so set its outer width to match where the
     content above (use-case tiles, feature rows, diff cards) sits. */
  max-width: 1116px;
  margin: 0 auto 80px;
  padding: 56px 48px 44px;
  text-align: center;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
}
.cta-end h2 {
  font-size: clamp(34px, 4.8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.cta-end .cta-sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 12px;
}
.cta-end .cta-req {
  font-size: 13px;
  color: var(--ink-2);
  opacity: 0.7;
  margin: 0 auto 28px;
  letter-spacing: 0.01em;
}
.cta-end .cta {
  justify-content: center;
  margin-bottom: 36px;
}

/* Quiet support link row at the bottom of the CTA card.
   Replaces the separate Support section — three small links
   with bullet separators. Sits well clear of the button shadows. */
.cta-support {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.cta-support a {
  color: var(--indigo);
  text-decoration: none;
  font-weight: 500;
}
.cta-support a:hover { text-decoration: underline; }
.cta-support span { opacity: 0.4; }

/* ─────────────────── FOOTER ─────────────────── */

.site-footer {
  max-width: none;
  margin: 0;
  padding: 24px 32px 52px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.site-footer .social {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}
.site-footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--ink-2);
  transition: color 0.15s, background 0.15s;
}
.site-footer .social a:hover {
  color: var(--ink);
  background: var(--line);
}
.site-footer .social svg {
  width: 15px; height: 15px;
  display: block;
}

/* ─────────────────── RESPONSIVE ─────────────────── */

@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  /* `min-width: 0` lets grid items shrink below their min-content
     size — without it, the implicit min-width: auto on grid items
     can keep the track at the heading's longest-word width and
     push wrap points past the viewport edge. */
  .hero-text,
  .hero-demo { min-width: 0; max-width: 100%; }
  /* Override the desktop's explicit 900px on .hero-demo. Without
     this, the grid item's intrinsic width forces .hero wider than
     the viewport and the heading + body text get pushed off the
     right edge. Letting the image scale to its column makes the
     whole hero fit any narrow viewport. */
  .hero-demo {
    width: 100%;
  }
  .hero h1,
  .hero .lede { overflow-wrap: break-word; }
  .feature-row { grid-template-columns: 1fr; gap: 36px; margin-bottom: 80px; }
  /* On narrow viewports, force every row to text-on-top, demo-below
     regardless of source order — reads more naturally than alternating. */
  .feature-row.reverse > :first-child { order: 2; grid-column: 1; }
  .feature-row.reverse > :last-child  { order: 1; grid-column: 1; }
  .use-cases { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .three-more-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .site-footer { padding: 24px 20px 40px; }
  .hero { padding: 0 20px; margin: 24px auto 60px; }
  .hero-icon img { width: 64px; height: 64px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 44px); margin-bottom: 16px; }
  .hero .lede { font-size: 17px; margin-bottom: 24px; }
  .micro { font-size: 12px; }
  .use-cases { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .scenes-deck { grid-template-columns: 1fr; gap: 8px; }
  .scene-transition { flex-direction: row; }
  .behavior-row { grid-template-columns: 110px 1fr; }
}

/* ─────────────────── ACCESSIBILITY ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────── SCREENSHOT RAIL ───────────────────
   Ported from shared.css's rail (this page doesn't load shared.css).
   Card width matches the 1180px / 32px-gutter column every other section
   uses. Wired by the inline script at the bottom of the page: tap-to-zoom
   plus prev/next arrows. */
.screenshots {
  position: relative;
  margin: 0 0 60px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.screenshot-rail {
  display: flex;
  gap: 32px;
  padding: 50px 50vw 80px 50vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.screenshot-rail::-webkit-scrollbar { display: none; }
.screenshot-card {
  flex: 0 0 auto;
  width: min(1116px, calc(100vw - 48px));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.screenshot-card-inner {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 30px 60px -20px rgba(20,30,70,0.30),
              0 10px 24px -10px rgba(20,30,70,0.18),
              0 0 0 1px rgba(0,0,0,0.06);
}
.screenshot-card-inner img { display: block; width: 100%; height: auto; }
.screenshot-card-inner.is-zoomable { cursor: zoom-in; position: relative; }
.screenshot-card-inner:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@supports (animation-timeline: view()) {
  .screenshot-card-inner {
    animation: screenshotFocus linear both;
    animation-timeline: view(inline);
    animation-range: cover 10% cover 90%;
  }
  @keyframes screenshotFocus {
    0%, 100% { transform: scale(0.88); filter: blur(3px) brightness(0.6) saturate(0.8); }
    50%      { transform: scale(1);    filter: blur(0) brightness(1) saturate(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .screenshot-card-inner { animation: none; }
}
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: transform 0.15s, opacity 0.15s;
}
.carousel-nav:active { transform: translateY(-50%) scale(0.94); }
.carousel-nav--prev { left: max(16px, calc(50vw - 604px)); }
.carousel-nav--next { right: max(16px, calc(50vw - 604px)); }
.carousel-nav svg { width: 14px; height: 14px; }
@media (prefers-color-scheme: dark) {
  .screenshot-card-inner {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55),
                0 10px 24px -10px rgba(0,0,0,0.40),
                0 0 0 1px rgba(255,255,255,0.10);
  }
  .carousel-nav {
    background: rgba(40,40,46,0.85);
    color: #f5f5f7;
    border-color: rgba(255,255,255,0.10);
  }
}
@media (hover: none), (max-width: 820px) {
  .screenshots { mask-image: none; -webkit-mask-image: none; }
}
/* Desktop: arrows fade in on hover/focus so the rail reads clean at rest. */
@media (hover: hover) and (min-width: 821px) {
  .carousel-nav { opacity: 0; pointer-events: none; }
  .screenshots:hover .carousel-nav,
  .screenshots:focus-within .carousel-nav { opacity: 1; pointer-events: auto; }
}
.carousel-nav:disabled,
.screenshots:hover .carousel-nav:disabled,
.screenshots:focus-within .carousel-nav:disabled { opacity: 0; pointer-events: none; }