/* ===== Press Play - Cocoon-style design system ===== */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: oklch(6% 0 0);
  --foreground: oklch(93% 0 0);
  --muted: oklch(11% 0 0);
  --muted-fg: oklch(60% 0 0);
  --body-fg: oklch(72% 0 0); /* paragraph copy on black */
  --border: oklch(18% 0 0);
  --accent: oklch(14% 0 0);

  /* Brand accent: matches the in-app orange (tokens.css --accent) */
  --play: hsl(16 100% 56%);
  --play-bright: hsl(16 100% 72%);

  --container: 76rem;
  --container-wide: 92rem;
  --pricing-border: color-mix(in oklab, var(--foreground) 26%, transparent);
  --pad: 24px;

  --radius-2xl: 1rem;
  --radius-lg: 0.5rem;
  --radius-md: 0.375rem;
  --radius-sm: 0.25rem;

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* App-style panel top highlight (mirrors src/styles/tokens.css --surface-highlight) */
  --surface-hi: inset 0 1px 0 hsla(0, 0%, 100%, 0.07);
  --danger: hsl(0 79% 62%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset, 5rem);
  scrollbar-gutter: stable;
  overscroll-behavior-y: none;
}

section[id] {
  scroll-margin-top: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

/* ===== Layout ===== */
.landing-page {
  --bg: #0a0a0a;
  --section-gap: 140px;
}
/* Adjacent section edges share one gap, instead of doubling their padding. */
.landing-page main > section:not(.hero) {
  padding-block: calc(var(--section-gap) / 2);
}
@media (max-width: 47.99rem) {
  .landing-page {
    --section-gap: 80px;
  }
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 100;
  background: var(--foreground);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
}
.skip-link:focus {
  left: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pill {
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--play-bright);
  margin-bottom: 1.1rem;
}

.eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
}

h1 {
  font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.875rem, 2vw + 1rem, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
}

/* ===== Header ===== */
#main-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  width: 100%;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
#main-header.is-scrolled {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--border);
}

#main-nav {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--pad);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: clamp(0.85rem, 1.5vw, 1.75rem);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
  transition: color 0.15s ease;
}
.nav-links a:hover {
  color: var(--foreground);
}

.nav-cta {
  display: none;
  align-items: center;
  min-height: 2.25rem;
  border-radius: 999px;
  background: #fff;
  color: #000;
  padding: 0.375rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: opacity 0.15s ease;
}
.nav-cta:hover {
  opacity: 0.9;
}

#mobile-menu-button {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--muted-fg);
  transition: color 0.15s, background 0.15s;
}
#mobile-menu-button:hover {
  color: var(--foreground);
  background: var(--muted);
}
#mobile-menu-button svg {
  height: 1.25rem;
  width: 1.25rem;
}
#mobile-menu-button .menu-icon-close {
  display: none;
}
#mobile-menu-button[aria-expanded="true"] .menu-icon-open {
  display: none;
}
#mobile-menu-button[aria-expanded="true"] .menu-icon-close {
  display: block;
}

#mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 1rem var(--pad);
}
#mobile-menu.is-open {
  display: block;
}
.mobile-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-links a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

/* ===== Hero — Inside the player ===== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: max(52rem, 100svh, 60vw);
  background: #0b0912;
}
.hero-background,
.hero::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-background {
  object-fit: cover;
  object-position: center;
}
.hero::before {
  content: "";
  z-index: 1;
  background: linear-gradient(180deg, #09081070 0%, #09081030 35%, #09081000 57%, #0a0a0a26 70%, #0a0a0ab3 88%, var(--bg) 96%, var(--bg) 100%);
}
.hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  padding-block: clamp(6.5rem, 11.4svh, 7.5rem) clamp(4rem, 10.9svh, 6.25rem);
}
.hero-headline {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
  min-width: 0;
  text-align: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}
.hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #ff9670;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6.5625vw, 5.25rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #e8e8e8;
  text-wrap: balance;
}
.hero h1 .u-mint {
  font-style: inherit;
  color: #ff9670;
}
.hero-subcopy {
  max-width: 36.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #c1c1c1;
  text-wrap: pretty;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.hero-primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: 999px;
  padding: 0.7rem 1.05rem 0.7rem 1.2rem;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  background: #fff;
  color: #0b0912;
  transition: transform 0.2s var(--ease-out-quint), background 0.2s ease;
}
.hero-primary-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s var(--ease-out-quint);
}
.hero-primary-cta:hover svg {
  transform: translateX(2px);
}
.hero-primary-cta:active {
  transform: scale(0.96);
}
.hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.8125rem;
  color: #e8e8e8;
}
.hero-secondary-cta:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.hero-primary-cta:focus-visible,
.hero-secondary-cta:focus-visible {
  outline: 2px solid #ff9670;
  outline-offset: 5px;
}
.hero-supporting-line {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: #adadad;
  text-wrap: pretty;
}
.hero-nav:not(.is-scrolled) .nav-links a,
.hero-nav:not(.is-scrolled) #mobile-menu-button {
  color: #c1c1c1;
}
.hero-nav:not(.is-scrolled) .nav-links a:hover {
  color: #fff;
}

@media (max-width: 47.99rem) {
  .hero {
    min-height: max(48rem, 100svh);
  }
  .hero-container {
    padding-block: 6rem 3rem;
  }
  .hero-headline {
    gap: 16rem;
  }
  .hero-copy {
    gap: 1rem;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 14vw, 4.5rem);
  }
  .hero-subcopy {
    max-width: 28rem;
    font-size: 0.9375rem;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-primary-cta,
  .hero-primary-cta svg {
    transition: none;
  }
}

.lead {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--foreground);
  line-height: 1.625;
}
/* ===== Approach / zigzag ===== */
.approach-head {
  max-width: 44rem;
  margin-bottom: 4rem;
}
.approach-head h2 {
  margin-top: 0.75rem;
}
.approach-head p {
  margin-top: 1rem;
  color: var(--body-fg);
  line-height: 1.625;
}
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.zigzag {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}
.zigzag-text h2 {
  margin-top: 0.75rem;
}
.approach .eyebrow { text-transform: none; }
.zigzag-text a { text-decoration: underline; text-underline-offset: 3px; }
.zigzag-text p {
  margin-top: 1rem;
  color: var(--body-fg);
  line-height: 1.625;
}

/* One player, three product states. The frame never animates. */
.zigzag-media { display: flex; align-items: center; min-width: 0; }
.studio-demo { --p: 1; --reveal: clamp(0, (var(--p) - .75) / .25, 1); --seek: 0; width: 100%; perspective: 1600px; }
.studio-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  background: #050608;
  transform: rotateY(-6deg) rotateX(3deg);
  transform-origin: 50% 55%;
  box-shadow: 0 28px 64px -18px #000b;
  color: #fff;
  font-size: 12px;
}
.studio-still, .studio-grain { position: absolute; inset: 0; pointer-events: none; }
.studio-still {
  background:
    radial-gradient(ellipse 95% 85% at 28% 45%, hsla(18, 45%, 22%, .65), transparent 80%),
    radial-gradient(ellipse 65% 85% at 78% 65%, hsla(210, 28%, 15%, .75), transparent 75%),
    radial-gradient(ellipse 85% 95% at 50% 50%, hsla(16, 40%, 14%, .6), #050608 92%);
}
.studio-grain {
  opacity: .2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
.studio-title { position: absolute; inset: 16px 16px auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #ffffffbd; z-index: 2; }
.studio-source { padding: 3px 7px; border: 1px solid #ffffff14; border-radius: 4px; color: #ffffff80; font-size: 10px; }
.studio-sources { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; color: #ffffffc4; }
.studio-sources > span { font-size: 9px; color: #ffffff80; }
.studio-sources img, .studio-sources svg { display: block; opacity: .85; }
.studio-play { position: absolute; left: 50%; top: 46%; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff38; border-radius: 50%; background: #0005; transform: translate(-50%, -50%); z-index: 2; }
.studio-play svg { margin-left: 2px; }
.studio-hud { position: absolute; inset: auto 0 0; padding: 12px 16px 14px; background: linear-gradient(transparent, #05060866); z-index: 3; }
.studio-seek { position: relative; height: 3px; border-radius: 99px; background: #ffffff38; }
.studio-seek-fill { position: relative; display: block; width: calc(var(--seek) * 100%); height: 100%; border-radius: inherit; background: var(--play); }
.studio-seek-pin { position: absolute; left: calc(var(--seek) * 100%); top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.studio-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 10px; font-variant-numeric: tabular-nums; }
.studio-controls > span:first-child { display: flex; }
.studio-duration, .studio-control-label { color: #ffffff80; }
.studio-control-label { margin-left: auto; }
.studio-upload { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 72%; padding: 14px; border: 1px solid #ffffff1a; border-radius: 8px; background: #0c0e12; }
.studio-upload-icon { display: grid; place-items: center; width: 30px; height: 36px; border: 1px solid #ffffff24; border-radius: 4px; color: #ffffffb3; font-size: 18px; }
.studio-upload strong { display: block; font-size: 12px; font-weight: 500; }
.studio-upload-status { display: block; margin-top: 4px; font-size: 10px; color: #ffffff80; }
.studio-upload-check { color: var(--play); }
.studio-upload-track { grid-column: 1 / -1; height: 3px; border-radius: 99px; background: #ffffff1a; overflow: hidden; }
.studio-upload-track i { display: block; height: 100%; background: var(--play); transform-origin: left; transform: scaleX(var(--upload, 1)); }
.studio-import[data-cued="false"] .studio-upload-check { visibility: hidden; }
.studio-engage { --seek: .730769; }
.studio-cta { position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 6px; background: var(--play); color: #fff; font-size: 12px; font-weight: 500; }

.studio-cue, .studio-drop { position: absolute; left: 73.077%; top: -4px; width: 2px; height: 11px; background: var(--play); }
.studio-cue > span, .studio-drop > span { position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #ffffffb3; font-size: 10px; font-variant-numeric: tabular-nums; }
.studio-understand { --seek: .3923077; }
.studio-drop { left: 39.231%; }
.studio-drop > span { left: -12px; transform: none; }
/* Playback lives inside the fixed frame. Only the still is filtered. */
.studio-still { will-change: transform; animation: studio-drift 40s ease-in-out infinite alternate paused; }
.studio-grain { animation: studio-film 1s steps(4, end) infinite paused; }
.studio-demo[data-playing="true"] .studio-still,
.studio-demo[data-playing="true"] .studio-grain { animation-play-state: running; }
.studio-demo[data-in-view="false"] .studio-still,
.studio-demo[data-in-view="false"] .studio-grain { animation-play-state: paused; }
@keyframes studio-drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.03) translate(1.5%, -1.5%); }
}
@keyframes studio-film {
  from { background-position: 0 0; }
  to { background-position: 120px -120px; }
}
.studio-time { font-variant-numeric: tabular-nums; }
.studio-seek-fill::after { content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: #ffffffd9; }
.studio-title, .studio-hud { opacity: 1; transition: opacity .3s ease; }
.studio-demo[data-playing="true"] .studio-title { opacity: .4; }
.studio-demo[data-playing="true"] .studio-hud { opacity: 1; }
.studio-engage[data-cued="true"] .studio-hud,
.studio-understand[data-cued="true"] .studio-hud { opacity: 1; }

.studio-player:hover .studio-hud { opacity: 1 !important; }
.studio-cue::before, .studio-drop::before { content: ''; position: absolute; left: -5px; top: -1px; width: 12px; height: 12px; border: 1px solid var(--play); border-radius: 50%; opacity: 0; pointer-events: none; }
.studio-demo[data-cued="true"] .studio-cue::before,
.studio-demo[data-cued="true"] .studio-drop::before { transform: scale(calc(1 + var(--event, 1) * .6)); opacity: calc(.6 * (1 - var(--event, 1))); }
@keyframes studio-cue-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
.studio-cta { opacity: 1; transform: translateY(0) scale(1); transform-origin: bottom center; transition: opacity .26s cubic-bezier(.22, 1, .36, 1), transform .26s cubic-bezier(.22, 1, .36, 1); }
.studio-engage[data-cued="false"] .studio-cta { opacity: 0; transform: translateY(8px) scale(.96); }
.studio-engage[data-cued="true"] .studio-cue > span { color: var(--play); }
/* Import: transfer, source selection, image development, playback. */
.studio-import { --develop: clamp(0, (var(--p) - .25) / .35, 1); --resolve: clamp(0, (var(--p) - .6) / .25, 1); }
.studio-import .studio-still { filter: blur(calc(8px - var(--develop) * 6px - var(--resolve) * 2px)) brightness(calc(.3 + var(--develop) * .4 + var(--resolve) * .3)); }
.studio-import .studio-upload { opacity: calc(1 - var(--resolve)); transform: translate(-50%, -50%) scale(calc(1 - var(--resolve) * .04)); }
.studio-import .studio-sources img, .studio-import .studio-sources svg { opacity: calc(.85 - var(--develop) * .45); }
.studio-import .studio-sources img:first-of-type { opacity: calc(.85 + var(--develop) * .15); }
.studio-ready { position: absolute; top: 58px; left: 16px; color: #ffffffb3; font-size: 11px; opacity: var(--resolve); }
.studio-import .studio-play { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .26s cubic-bezier(.22, 1, .36, 1), transform .26s cubic-bezier(.22, 1, .36, 1); }
.studio-import[data-playing="false"] .studio-play { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
@media (max-width: 40rem) {
  .approach-head { margin-bottom: 2.5rem; }
  .studio-title { inset: 12px 12px auto; font-size: 10px; }
  .studio-source { font-size: 9px; }
  .studio-upload { width: 82%; padding: 10px; gap: 8px; }
  .studio-upload-icon { width: 24px; height: 28px; }
  .studio-hud { padding: 10px 12px; }
  .studio-cta { right: 12px; bottom: 80px; padding: 7px 10px; font-size: 11px; }
  .studio-ready { top: 44px; left: 12px; }
  .studio-play { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-demo { --p: 1 !important; }
  .studio-demo *, .studio-demo *::before, .studio-demo *::after { animation: none !important; transition: none !important; }
  .studio-demo .studio-hud, .studio-demo .studio-title { opacity: 1 !important; }
  .studio-still { transform: none; will-change: auto; }
  .studio-cta, .studio-upload-check { visibility: visible !important; }
}

.mock-url-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  background: var(--foreground);
  box-shadow: 0 0 8px color-mix(in oklab, #fff 60%, transparent);
}

.formats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 1.5rem;
  padding-inline: 0.75rem;
}
.format-tile {
  text-align: center;
}
.format-tile > div {
  margin: 0 auto 0.6rem;
  background: color-mix(in oklab, #fff 5%, transparent);
  border: 1px solid color-mix(in oklab, #fff 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 0.45rem;
}
.format-tile > div img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.format-tile > div::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.6rem;
  border-color: transparent transparent transparent color-mix(in oklab, #fff 85%, transparent);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6));
}
.ratio-169 {
  aspect-ratio: 16/9;
  width: 100%;
}
.ratio-916 {
  aspect-ratio: 9/16;
  width: 60%;
}
.ratio-11 {
  aspect-ratio: 1/1;
  width: 80%;
}
.format-tile p {
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(96.7% 0.003 264.542);
}
.format-tile span {
  font-size: 0.625rem;
  color: var(--muted-fg);
}

/* ===== AI editor mock ===== */
:root {
  --play: hsl(16 100% 56%);
  --play-bright: hsl(16 100% 72%);
  --editor-dur: 7s;
}

.editor {
  --local: 0.45;
  width: 100%;
  max-width: 30rem;
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, #141414, #0a0a0a);
  border: 1px solid color-mix(in oklab, #fff 10%, transparent);
  padding: 0.75rem;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px color-mix(in oklab, var(--play) 8%, transparent);
}

.editor-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, #fff 8%, transparent);
  background: #0c0c0c;
}
/* Step preview layers: crossfade driven by data-step */
.frame-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.26s ease-out;
  pointer-events: none;
}
.frame-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame-video-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 50% 40%, color-mix(in oklab, var(--play) 22%, transparent), transparent 62%),
    linear-gradient(180deg, #1a1a1f, #0c0c0c);
}
.frame-video-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 3.2rem;
  height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem;
  border-radius: 50%;
  background: color-mix(in oklab, #fff 12%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 18%, transparent);
  clip-path: polygon(38% 28%, 38% 72%, 72% 50%);
  background: #fff;
  opacity: 0.85;
}
.editor[data-step="1"] .frame-prompt,
.editor[data-step="2"] .frame-mockup,
.editor[data-step="3"] .frame-audio,
.editor[data-step="4"] .frame-export {
  opacity: 1;
  transform: none;
}
.frame-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: radial-gradient(80% 90% at 50% 20%, color-mix(in oklab, var(--play) 10%, transparent), transparent 70%),
    #0c0c0c;
}
.frame-prompt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #fff 16%, transparent);
  background: color-mix(in oklab, #fff 5%, transparent);
  font-size: 0.75rem;
  color: oklch(92.8% 0.006 264.531);
}
.frame-caret {
  width: 1px;
  height: 0.85em;
  background: var(--play-bright);
  animation: caret-blink 1.1s steps(2, start) infinite;
}
@keyframes caret-blink {
  to {
    visibility: hidden;
  }
}
.frame-prompt-hint {
  font-size: 0.6875rem;
  color: var(--muted-fg);
}
.frame-wave {
  position: absolute;
  inset-inline: 0.75rem;
  bottom: 0.6rem;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 1.1rem;
}
.frame-wave i {
  flex: 1;
  border-radius: 999px;
  background: color-mix(in oklab, var(--play-bright) 55%, transparent);
  height: 30%;
  box-shadow: 0 0 6px color-mix(in oklab, var(--play) 50%, transparent);
}
.frame-wave i:nth-child(2n) {
  height: 65%;
}
.frame-wave i:nth-child(3n) {
  height: 95%;
}
.frame-wave i:nth-child(5n) {
  height: 45%;
}
.frame-ratios {
  position: absolute;
  left: 0.75rem;
  bottom: 0.6rem;
  display: flex;
  gap: 0.35rem;
}
.frame-ratios span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  color: var(--play-bright);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid color-mix(in oklab, var(--play-bright) 40%, transparent);
}
.editor-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 80% at 50% 100%,
    color-mix(in oklab, var(--play) 12%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

/* Quiet progress track for the four-step preview. */
.editor-progress { position: absolute; inset: auto 0 0; height: 2px; background: #ffffff12; }
.editor-progress span { display: block; height: 100%; background: var(--play); transform: scaleX(var(--fill, 0)); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .frame-caret {
    animation: none !important;
  }
  .frame-layer {
    transition: none !important;
  }
}

/* ===== FAQ ===== */
.faq-head h2 {
  margin-top: 0.75rem;
}
.faq-head p {
  margin-top: 1rem;
  max-width: 42rem;
  color: var(--muted-fg);
  line-height: 1.625;
}
.faq-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
}
.faq-list details {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}
.faq-list details:first-child {
  border-top: 1px solid var(--border);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--foreground);
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background: linear-gradient(
      to right,
      currentColor 0,
      currentColor 100%
    )
    no-repeat center / 100% 1.5px,
    linear-gradient(to bottom, currentColor 0, currentColor 100%) no-repeat
      center / 1.5px 100%;
  color: var(--muted-fg);
  transition: transform 0.25s var(--ease-out-quint);
}
.faq-list details[open] summary::after {
  transform: rotate(45deg);
}
.faq-list details .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s var(--ease-out-quint);
}
.faq-list details[open] .faq-body {
  grid-template-rows: 1fr;
}
.faq-list details p {
  padding-top: 0;
  overflow: hidden;
  min-height: 0;
  color: var(--body-fg);
  line-height: 1.625;
  font-size: 0.9375rem;
  transition: padding-top 0.25s var(--ease-out-quint);
}
.faq-list details[open] p {
  padding-top: 0.75rem;
}

/* ===== Pricing ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--pricing-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #15121b;
}
.pricing-heading h2 {
  color: #fff;
}
.pricing-heading {
  grid-column: 1 / -1;
  padding: 2.25rem 2.25rem;
  border-bottom: 1px solid var(--pricing-border);
  background: color-mix(in oklab, #fff 3%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.pricing-heading-content {
  max-width: 44rem;
}
.pricing-heading p {
  margin-top: 1rem;
  color: color-mix(in oklab, #fff 70%, transparent);
  line-height: 1.625;
}
.price-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: #000;
  border: 0;
  border-top: 1px solid var(--pricing-border);
  background-image: radial-gradient(80% 50% at 50% 0%, #1a1a1a 0%, transparent 70%);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pricing .price-card {
  background:
    linear-gradient(180deg, color-mix(in oklab, #fff 2%, transparent), transparent 42%);
}
.price-card:first-of-type {
  border-top: 0;
}
.price-card.is-featured {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--play) 4%, transparent), transparent 46%);
  box-shadow:
    inset 1px 0 0 color-mix(in oklab, var(--play) 35%, transparent),
    inset -1px 0 0 color-mix(in oklab, var(--play) 35%, transparent),
    inset 0 1px 0 color-mix(in oklab, var(--play) 45%, transparent);
}
@media (max-width: 47.99rem) {
  .pricing-heading {
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }
  .pricing-heading p {
    margin-top: 0.75rem;
  }
}
/* ----- Pricing cards: no stagger, no hover lift ----- */
.pricing-grid .price-card {
  transition: border-color 0.2s ease;
}
.price-top {
  padding: 2.25rem 2.25rem 2rem;
  border-bottom: 1px solid color-mix(in oklab, #fff 10%, transparent);
}
@media (min-width: 64rem) {
  .price-top {
    min-height: 14.5rem;
  }
}
.price-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in oklab, #fff 56%, transparent);
}
.plan-badge {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--play-bright);
  border: 1px solid color-mix(in oklab, var(--play-bright) 45%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  vertical-align: middle;
}
.price-amount {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.price-value {
  font-family: var(--serif);
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.price-unit {
  font-size: 0.875rem;
  color: color-mix(in oklab, #fff 54%, transparent);
}
.price-blurb {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, #fff 68%, transparent);
  line-height: 1.625;
}
.price-features {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem 2.25rem 2.25rem;
}
.price-features ul {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in oklab, #fff 72%, transparent);
}
.price-features li.price-feature-muted {
  color: color-mix(in oklab, #fff 52%, transparent);
}
.price-features li.price-feature-muted svg {
  color: color-mix(in oklab, #fff 40%, transparent);
}
.price-features svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: color-mix(in oklab, #fff 42%, transparent);
}
.price-card.is-featured .price-features svg {
  color: var(--play-bright);
}
.price-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 2.625rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #fff 30%, transparent);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.price-cta:hover {
  background: color-mix(in oklab, #fff 10%, transparent);
  border-color: color-mix(in oklab, #fff 45%, transparent);
}
.price-card.is-featured .price-cta {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.price-card.is-featured .price-cta:hover {
  opacity: 0.92;
  background: #fff;
}
.price-cta:active {
  scale: 0.97;
}

/* ===== Contact ===== */
.contact-card {
  position: relative;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  border-radius: var(--radius-2xl);
  background: #000;
  border: 1px solid color-mix(in oklab, var(--foreground) 30%, transparent);
  padding: 2rem;
  box-shadow: none;
  background-image: radial-gradient(80% 50% at 50% 0%, #1a1a1a 0%, transparent 70%);
}
.contact-sub {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--body-fg);
}
.contact-email-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  border-radius: 999px;
  background: #fff;
  color: #000;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.15s ease, transform 0.2s var(--ease-out-quint);
}
.contact-email-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s var(--ease-out-quint);
}
.contact-email-cta:hover {
  opacity: 0.9;
}
.contact-email-cta:hover svg {
  transform: translateX(2px);
}
.contact-trial-note {
  margin-top: 1rem;
  color: var(--muted-fg);
  font-size: 0.8125rem;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 3rem;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr auto auto;
    align-items: start;
    gap: 3rem;
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .landing-page .footer-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .landing-page .footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .landing-page .footer-connect {
    grid-column: 2;
    grid-row: 1;
  }
}
.footer-tag {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 8rem;
}
.footer-col p {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-fg);
  margin-bottom: 0.35rem;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--muted-fg);
  transition: color 0.15s ease;
}
.footer-col a:hover {
  color: var(--foreground);
}
.footer-connect p {
  font-size: 0.875rem;
  font-weight: 600;
}
.footer-social {
  margin-top: 0.75rem;
  display: flex;
  gap: 1rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--radius-md);
  color: var(--muted-fg);
  transition: color 0.15s ease;
}
.footer-social .footer-email {
  width: auto;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.footer-email svg {
  flex-shrink: 0;
}
.footer-social a:hover {
  color: var(--foreground);
}
.footer-social svg {
  height: 1.25rem;
  width: 1.25rem;
}
.footer-bottom {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

/* ===== Modals ===== */
.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: calc(100% - 3rem);
  max-width: 42rem;
  max-height: 80vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-2xl);
  background: var(--bg);
  color: var(--foreground);
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.modal[open] {
  display: flex;
  flex-direction: column;
  animation: modal-in 0.25s ease-out;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 3rem;
  flex-shrink: 0;
}
.modal-head h2 {
  font-size: 1.5rem;
  font-weight: 700;
}
.modal-head button {
  color: var(--muted-fg);
  cursor: pointer;
}
.modal-head svg {
  width: 1.25rem;
  height: 1.25rem;
}
.modal-body {
  overflow-y: auto;
  padding: 2rem 3rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  line-height: 1.75;
  color: var(--muted-fg);
}
.modal-body-flat {
  gap: 1rem;
}
.modal-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  padding-top: 0.5rem;
}
.modal-body h4 {
  font-weight: 600;
  color: var(--foreground);
  padding-top: 0.5rem;
}
.modal-body p + p {
  margin-top: 1rem;
}
.modal-body strong {
  color: var(--foreground);
}
.modal-body hr {
  border-color: var(--border);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== Reveal animation: hero only. Sections paint in place. ===== */

/* ===== Responsive ===== */
@media (min-width: 64rem) {
  .nav-links {
    display: flex;
  }
  .nav-cta {
    display: inline-flex;
  }
  #mobile-menu-button {
    display: none;
  }
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .price-card {
    border-top: 0;
    border-left: 1px solid var(--pricing-border);
  }
  .price-card:first-of-type {
    border-left: 0;
  }
  .price-top,
  .price-features {
    padding-inline: 1.5rem;
  }
  .zigzag {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .zigzag-media.media-left {
    order: -1;
  }
  .stack-lg {
    gap: 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-delay] {
    transition-delay: 0s !important;
  }
  .zigzag-text,
  .zigzag-media,
  .app-scene,
  .price-card,
  .contact-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .faq-list details .faq-body,
  .faq-list details p {
    transition: none !important;
  }
  .editor {
    --p: 1;
    --local: 1;
  }
  .waveform i {
    animation: none !important;
  }
  .timeline-node {
    transform: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* =============================================================
   10/10 MOTION LAYER - serif headlines, glass, marquees,
   cursor, mesh, shimmer, tilt, glow, magnetic, split-text
   ============================================================= */

:root {
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --play-bright: hsl(16 100% 72%);
  --glass-bg: color-mix(in oklab, var(--bg) 55%, transparent);
  --glass-stroke: color-mix(in oklab, var(--foreground) 14%, transparent);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- Editorial serif headlines: italic bookends only ----- */
section h2,
.faq h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-style: normal;
}
.contact-card h2 {
  font-style: italic;
}

/* ----- Stats strip ----- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
  box-shadow: var(--surface-hi);
}
.stat {
  text-align: left;
}
.stat-num {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  word-spacing: 0.14em;
}
.stat-suffix {
  font-size: 0.42em;
  letter-spacing: 0;
  margin-left: 0.12em;
  vertical-align: 0.12em;
}
.stat-label {
  margin-top: 0.5rem;
  color: var(--muted-fg);
  font-size: 0.9rem;
}
@media (max-width: 720px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }
  .stat-num {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

/* Hero primary CTA: press scale only, no shimmer or magnetic drift */

/* ----- Split-text hero reveal (word-mask) ----- */
[data-split] .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* breathing room so italic-serif overshoot is not clipped by the mask */
  padding: 0.16em 0.08em 0.12em;
  margin: -0.16em -0.08em -0.12em;
}
[data-split] .word {
  display: inline-block;
  transform: translateY(135%);
  transition: transform 0.4s var(--ease-out-expo);
}
[data-split].is-in .word {
  transform: translateY(0);
}

/* ----- Hero entrance sequence ----- */
.js .hero-subcopy {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out-quint), transform 0.6s var(--ease-out-quint);
}
.hero-subcopy { transition-delay: 0.4s; }
.hero-headline.is-visible .hero-subcopy,
.hero-headline.is-visible .hero-cta-row,
.hero-headline.is-visible .hero-supporting-line {
  opacity: 1;
  transform: none;
}
.js .hero-cta-row,
.js .hero-supporting-line {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out-quint), transform 0.6s var(--ease-out-quint);
}
.hero-cta-row { transition-delay: 0.52s; }
.hero-supporting-line { transition-delay: 0.62s; }
/* ----- Reduced motion: kill new motion ----- */
@media (prefers-reduced-motion: reduce) {
  [data-split] .word,
  .hero-subcopy,
  .hero-cta-row,
  .hero-supporting-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Editor mock inside timeline heading */
.timeline-heading .editor {
  margin-top: 2.5rem;
  max-width: 30rem;
}

.pricing-heading p,
.timeline-heading > p,
.versus-head p,
.features-head p,
.approach-head p,
.faq-head p {
  text-wrap: pretty;
}

/* ===== Landing mocks: upload, playgate, embed code, watch curve ===== */
.app-body-flush {
  padding: 0;
  min-height: 0;
}

/* Step 1: resumable upload progress */
.mock-upload {
  width: min(78%, 16rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mock-upload-bar {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in oklab, #fff 10%, transparent);
  overflow: hidden;
}
.mock-upload-bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(calc(0.18 + var(--local, 0.5) * 0.82));
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--play), var(--play-bright));
  box-shadow: 0 0 10px color-mix(in oklab, var(--play) 55%, transparent);
}
.mock-upload-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted-fg);
  text-align: center;
}
.mock-upload-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, #fff 10%, transparent);
  background: color-mix(in oklab, #fff 4%, transparent);
  box-shadow: var(--surface-hi);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: oklch(92.8% 0.006 264.531);
}
.mock-upload-file svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--play-bright);
  flex-shrink: 0;
}
.mock-upload-pct {
  margin-left: auto;
  color: var(--play-bright);
  font-variant-numeric: tabular-nums;
}

/* Step 2 / Convert row: playgate card over a video frame */
.gate-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(72%, 15rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, #fff 18%, transparent);
  background: color-mix(in oklab, #000 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.12),
    0 18px 50px -20px rgba(0, 0, 0, 0.8);
}
.gate-card p {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}
.gate-input {
  font-size: 0.6875rem;
  color: var(--muted-fg);
  border: 1px solid color-mix(in oklab, var(--play) 45%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  background: color-mix(in oklab, #fff 4%, transparent);
}
.gate-button {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  background: var(--play);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
}

/* Step 3: embed snippet */
.frame-audio {
  display: flex;
}
.mock-code {
  margin: auto;
  width: 88%;
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
  background: #0a0a0a;
  padding: 1rem 1.1rem;
  box-shadow: var(--surface-hi);
}
.mock-code code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: oklch(92.8% 0.006 264.531);
  white-space: pre;
}
.mock-code-chip {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--play-bright);
  border: 1px solid color-mix(in oklab, var(--play-bright) 45%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  background: color-mix(in oklab, var(--play) 12%, transparent);
}

/* Step 4 / Measure row: watch-curve chart + stats */
.frame-export {
  display: flex;
  flex-direction: column;
}
.mock-chart {
  flex: 1;
  width: 100%;
  min-height: 0;
}
.mock-chart-line {
  stroke-dasharray: 480;
  stroke-dashoffset: calc(480 * (1 - var(--local, 0.7)));
}
.mock-chart-fill {
  opacity: calc(0.35 + var(--local, 0.7) * 0.65);
}
.mock-stats {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  color: var(--muted-fg);
}
.mock-stats b {
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
/* ===== Why Oh Player ===== */
.versus-head {
  max-width: 44rem;
}
.versus-head h2 {
  margin-top: 0.75rem;
}
.versus-head p {
  margin-top: 1rem;
  color: var(--body-fg);
  line-height: 1.625;
}
.versus-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 48rem) {
  .versus-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.versus-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 2rem 2.25rem;
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
  box-shadow: var(--surface-hi);
  display: flex;
  flex-direction: column;
}
.versus-card.is-ours {
  border-color: color-mix(in oklab, var(--play) 28%, transparent);
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
  box-shadow: var(--surface-hi);
}

.versus-card h3 {
  margin-top: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.versus-meter {
  margin-top: auto;
  padding-top: 1.75rem;
}
.meter-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 3.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in oklab, #fff 12%, transparent);
}
.meter-bars i {
  flex: 1;
  border-radius: 1px 1px 0 0;
  background: color-mix(in oklab, #fff 18%, transparent);
}
.meter-bars i:last-child {
  background: color-mix(in oklab, #fff 32%, transparent);
}
.meter-flat {
  flex: 1;
  position: relative;
  height: 3.25rem;
  border-bottom: 1px solid color-mix(in oklab, #fff 12%, transparent);
}
.meter-flat span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--play), var(--play-bright));
}
.meter-flat span::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--play-bright);
}
.versus-card ul {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.versus-card li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--body-fg);
}
.versus-card li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.versus-card.is-theirs li svg {
  color: var(--muted-fg);
}
.versus-card.is-ours li svg {
  color: var(--foreground);
}
.versus-card.is-ours li {
  color: color-mix(in oklab, var(--foreground) 88%, transparent);
}

/* ===== Features grid ===== */
.features-head {
  max-width: 44rem;
}
.features-head h2 {
  margin-top: 0.75rem;
}
.features-head p {
  margin-top: 1rem;
  color: var(--muted-fg);
  line-height: 1.625;
}
.features-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 40rem) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
  box-shadow: var(--surface-hi);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--play-bright);
  margin-bottom: 1.1rem;
}
.feature-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.feature-card h3 {
  font-size: 1rem;
  font-weight: 600;
}
.feature-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--body-fg);
  line-height: 1.6;
}

/* ===== Use Cases ===== */
.usecases-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.usecases-head .pill {
  margin-bottom: 0.8rem;
}
.usecases-head h2 {
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--foreground);
}
.usecases-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.usecase-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  background: #080808;
  border: 1px solid #2b2b2b;
  border-radius: 1.5rem;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.2), 0 16px 40px rgb(0 0 0 / 0.18);
}
.usecase-visual {
  margin: 0 0 1.1rem;
  overflow: hidden;
  border-radius: 0.4rem;
}
.usecase-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.65;
  filter: saturate(0.25);
  outline: 1px solid rgb(255 255 255 / 0.1);
  outline-offset: -1px;
}
.usecase-card h3 {
  margin-bottom: 0.6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--foreground);
  text-wrap: balance;
}
.usecase-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.usecase-body p {
  max-width: 75ch;
  font-size: 0.875rem;
  color: var(--body-fg);
  line-height: 1.55;
  text-wrap: pretty;
}
.usecase-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin-top: auto;
  padding-block: 0.5rem;
  border-radius: 0.2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--play-bright);
}
.usecase-cta:hover {
  color: var(--foreground);
}
.usecase-cta:focus-visible {
  outline: 2px solid var(--play-bright);
  outline-offset: 4px;
}
@media (max-width: 47.99rem) {
  .usecases-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .usecases-head h2 {
    font-size: clamp(1.7rem, 6.8vw, 2.3rem);
  }
  .usecase-card {
    border-radius: 1.15rem;
  }
  .usecase-card h3 {
    font-size: clamp(1.8rem, 7vw, 2.3rem);
  }
}
@media print {
  .usecase-card {
    break-inside: avoid;
  }
}

/* ===== Subpages ===== */
.page-main {
  padding-block: calc(5.5rem + 4vh) calc(48px + 8vh);
}
.page-prose {
  max-width: 44rem;
}
.page-prose h1 {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 2vw + 1rem, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.page-prose .lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--body-fg);
  line-height: 1.65;
}
.page-prose h2 {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-prose p,
.page-prose li {
  color: var(--body-fg);
  line-height: 1.7;
}
.page-prose p {
  margin-top: 1rem;
}
.page-prose ol,
.page-prose ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.page-prose ul {
  list-style: disc;
}
.page-prose ol {
  list-style: decimal;
}
.page-prose a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.page-cta {
  margin-top: 2.5rem;
}

/* ==========================================================================
   COMPARE PAGES (VIMEO, WISTIA, VIDALYTICS, VTURB)
   ========================================================================== */
.page-prose.is-compare {
  max-width: var(--container);
}

.cmp-hero {
  max-width: 50rem;
  margin-bottom: 2.5rem;
}

.cmp-hero-eyebrow {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.cmp-eyebrow-sep {
  opacity: 0.4;
}

.page-prose.is-compare .cmp-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0 0 1.25rem 0;
}

.cmp-vs-amp {
  font-family: var(--font-sans, inherit);
  font-size: 0.55em;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
  vertical-align: middle;
  margin: 0 0.35em;
  opacity: 0.8;
}

.page-prose.is-compare .cmp-hero-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--body-fg);
  margin: 0 0 1.75rem 0;
  max-width: 46rem;
}

/* Minimalist Competitor Switcher Bar */
.page-prose.is-compare .cmp-also {
  display: block;
  margin: 0 0 2.75rem 0;
  font-size: 0.9375rem;
  color: var(--muted-fg);
}

.page-prose.is-compare .cmp-also a {
  color: var(--body-fg);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, #fff 16%, transparent);
  margin: 0;
}

.page-prose.is-compare .cmp-also a:hover {
  color: var(--foreground);
  border-bottom-color: color-mix(in oklab, #fff 40%, transparent);
}

/* Side-by-side Executive Summary Cards */
.cmp-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}

.cmp-summary-card {
  padding: 1.5rem 1.65rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, #fff 8%, transparent);
  background: rgba(255, 255, 255, 0.015);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
}

.cmp-summary-card.is-us {
  border-color: color-mix(in oklab, var(--play) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--play) 4%, transparent) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow: 0 12px 28px -12px rgba(255, 107, 61, 0.12);
}

.cmp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid color-mix(in oklab, #fff 8%, transparent);
}

.cmp-card-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cmp-card-brand img,
.cmp-badge-highlight,
.cmp-badge-muted,
.cmp-rec-pill {
  display: none;
}

.cmp-card-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.25;
}

.cmp-card-tag {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-fg);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.cmp-badge-highlight {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: color-mix(in oklab, var(--play) 15%, transparent);
  color: var(--play-bright);
  border: 1px solid color-mix(in oklab, var(--play) 30%, transparent);
  white-space: nowrap;
}

.cmp-badge-muted {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-fg);
  border: 1px solid color-mix(in oklab, #fff 8%, transparent);
  white-space: nowrap;
}

.page-prose.is-compare .cmp-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cmp-card-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--body-fg);
}

.cmp-card-list li strong {
  color: var(--foreground);
  font-weight: 500;
}

.cmp-card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted-fg);
  font-size: 1.1em;
}

.cmp-summary-card.is-us .cmp-card-list li::before {
  color: var(--play);
}

/* ==========================================================================
   COMPARISON TABLE — thin lines
   ========================================================================== */
.cmp-table-container {
  margin: 2.5rem 0 4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cmp-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 0.875rem;
}

.cmp-table .cmp-col-feature { width: 34%; }
.cmp-table .cmp-col-ohplayer { width: 33%; }
.cmp-table .cmp-col-competitor { width: 33%; }

.cmp-table thead th {
  padding: 0 1.25rem 1rem 0;
  text-align: left;
  vertical-align: bottom;
  background: transparent;
  border-bottom: 1px solid color-mix(in oklab, #fff 14%, transparent);
}

.cmp-table thead th:last-child,
.cmp-table tbody td:last-child {
  padding-right: 0;
}

.cmp-table thead .cmp-th-feat {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.cmp-table thead .cmp-th-us {
  background: transparent;
  border-left: 1px solid color-mix(in oklab, var(--play) 45%, transparent);
  padding-left: 1.15rem;
}

.cmp-table thead .cmp-th-them {
  background: transparent;
}

.cmp-th-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.cmp-th-logo-wrap {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  background: transparent;
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
  flex-shrink: 0;
}

.cmp-th-us .cmp-th-logo-wrap {
  background: transparent;
  border-color: color-mix(in oklab, var(--play) 40%, transparent);
}

.cmp-th-logo-wrap img {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
}

.cmp-th-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
  line-height: 1.2;
}

.cmp-th-pricing {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--foreground);
  margin-top: 0.25rem;
  line-height: 1.25;
}

.cmp-th-us .cmp-th-pricing {
  color: var(--play-bright);
}

.cmp-rec-pill { display: none; }

.cmp-th-sub {
  font-size: 0.6875rem;
  color: var(--muted-fg);
  margin-top: 0.15rem;
  letter-spacing: 0.02em;
}

.cmp-table .cmp-section-row th {
  padding: 1.75rem 0 0.55rem;
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid color-mix(in oklab, #fff 8%, transparent);
  text-align: left;
}

.cmp-section-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.cmp-sec-num {
  color: var(--play);
  font-weight: 600;
}

.cmp-sec-title {
  font-weight: 500;
  color: var(--body-fg);
}

.cmp-table tbody tr {
  background: transparent;
}

.cmp-table tbody tr:hover {
  background: transparent;
}

.cmp-table tbody th,
.cmp-table tbody td {
  padding: 0.95rem 1.25rem 0.95rem 0;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in oklab, #fff 7%, transparent);
  text-align: left;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: 1px solid color-mix(in oklab, #fff 7%, transparent);
}

.cmp-table tbody td.is-us {
  background: transparent;
  border-left: 1px solid color-mix(in oklab, var(--play) 45%, transparent);
  padding-left: 1.15rem;
}

.cmp-table tbody tr:hover td.is-us {
  background: transparent;
}

.cmp-table thead .cmp-th-us,
.cmp-table tbody td.is-us {
  box-shadow: none;
}

.cmp-feat-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cmp-feat-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
}

.cmp-feat-desc {
  font-size: 0.75rem;
  color: var(--muted-fg);
  line-height: 1.4;
}

.cmp-val-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.cmp-val-icon {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  background: transparent;
  border: 1px solid color-mix(in oklab, #fff 16%, transparent);
}

.cmp-val-icon svg {
  width: 0.625rem;
  height: 0.625rem;
}

.cmp-val-icon.is-yes {
  background: transparent;
  border-color: color-mix(in oklab, var(--play) 55%, transparent);
  color: var(--play-bright);
}

.cmp-val-icon.is-yes-neutral {
  background: transparent;
  color: var(--muted-fg);
}

.cmp-val-icon.is-warn {
  background: transparent;
  border-color: color-mix(in oklab, #eab308 40%, transparent);
  color: #facc15;
}

.cmp-val-icon.is-no {
  background: transparent;
  border-color: color-mix(in oklab, #fff 12%, transparent);
  color: var(--muted-fg);
}

.cmp-val-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.cmp-val-main {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
  line-height: 1.3;
}

.cmp-val-sub {
  font-size: 0.75rem;
  color: var(--muted-fg);
  line-height: 1.4;
}

/* ==========================================================================
   TAKEAWAYS & MIGRATION STEP CARDS SECTIONS
   ========================================================================== */
.cmp-takeaways-section,
.cmp-migration-section {
  margin: 4.5rem 0 3.5rem 0;
}

.cmp-section-header {
  margin-bottom: 2rem;
}

.cmp-badge-mono {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--play-bright);
  margin-bottom: 0.75rem;
}

.page-prose.is-compare .cmp-sub-title {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.5vw, 2.35rem);
  font-weight: 400;
  color: var(--foreground);
  line-height: 1.15;
  margin: 0 0 0.75rem 0;
}

.cmp-sub-lede {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--body-fg);
  max-width: 42rem;
  margin: 0;
}

.cmp-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.cmp-step-card {
  padding: 1.6rem 1.5rem;
  border-radius: 0.875rem;
  border: 1px solid color-mix(in oklab, #fff 8%, transparent);
  background: rgba(255, 255, 255, 0.015);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.cmp-step-card:hover {
  border-color: color-mix(in oklab, #fff 14%, transparent);
  transform: translateY(-2px);
}

.cmp-step-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--play);
  margin-bottom: 0.85rem;
}

.cmp-step-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.cmp-step-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-fg);
  margin: 0;
}

.cmp-migration-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

.cmp-migration-note a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   CLASSY CTA BANNER
   ========================================================================== */
.cmp-cta-banner {
  position: relative;
  overflow: hidden;
  margin: 4rem 0 3rem 0;
  padding: 3.25rem 2.5rem;
  border-radius: 1.25rem;
  border: 0;
  background: radial-gradient(80% 120% at 50% 0%, color-mix(in oklab, var(--play) 10%, transparent) 0%, rgba(255, 255, 255, 0.01) 100%), #080808;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}

.cmp-cta-content {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: 0 auto;
}

.page-prose.is-compare .cmp-cta-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  color: var(--foreground);
  line-height: 1.15;
  margin: 0 0 0.85rem 0;
}

.cmp-cta-desc {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--body-fg);
  margin: 0 0 2rem 0;
}

.cmp-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}
.page-prose.is-compare .cmp-cta-actions .price-cta {
  align-self: center;
  margin-top: 0;
  margin-inline: auto;
  text-decoration: none;
}

.page-prose.is-compare .cmp-sub-lede,
.page-prose.is-compare .cmp-step-desc,
.page-prose.is-compare .cmp-cta-desc {
  margin-top: 0;
}

.page-prose.is-compare .cmp-migration-note {
  margin-top: 1.5rem;
}

.cmp-cta-micro {
  font-size: 0.78125rem;
  color: var(--muted-fg);
  letter-spacing: 0.02em;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .cmp-hero-title {
    font-size: 2.25rem;
  }
  .cmp-table thead th,
  .cmp-table tbody th,
  .cmp-table tbody td {
    padding: 0.85rem 1rem;
  }
  .cmp-cta-banner {
    padding: 2.25rem 1.5rem;
  }
}

/* Product demos: one readable sequence, then a settled preview. */
.demo-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-mockup::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0005, transparent 35%, #0009);
}
.demo-title { position: absolute; z-index: 1; top: 1rem; left: 1rem; color: #fff; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; }
.demo-controls { position: absolute; z-index: 2; inset: auto 1rem 1rem; display: flex; align-items: center; gap: 0.75rem; color: #fff; font-size: 0.625rem; font-variant-numeric: tabular-nums; }
.demo-track { position: relative; flex: 1; height: 3px; border-radius: 3px; background: #ffffff40; }
.demo-track i { display: block; height: 100%; border-radius: inherit; background: var(--play); transform: scaleX(0.26); transform-origin: left; }
.demo-cc { border: 1px solid #ffffff70; padding: 1px 3px; border-radius: 3px; font-size: 0.55rem; }
.demo-caption { position: absolute; z-index: 2; bottom: 3.3rem; left: 50%; transform: translate(-50%, 6px); opacity: 0; white-space: nowrap; padding: 0.3rem 0.55rem; border-radius: 4px; background: #080808cc; color: #fff; font-size: 0.75rem; }
.editor[data-step="2"] .demo-cc { border-color: var(--play); background: #ff5b2026; }
@media (max-width: 40rem) {
  .demo-controls { gap: 0.5rem; }
}

/* Retention chart on the player: integrated, dark cinematic, and animated with scroll across the whole player */
.studio-understand .studio-play { opacity: calc(1 - var(--inspect, 1)); }
.studio-chart-stage {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.studio-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.studio-chart-grid {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.studio-chart-fill {
  fill: url(#chart-fill-grad);
  opacity: 1;
  /* Keep the graph present while scroll inspects a moment within it. */
}

.studio-chart-line {
  fill: none;
  stroke: color-mix(in oklab, #ffffff 88%, var(--play));
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--play) 55%, transparent));

}

.studio-chart-pin {
  position: absolute;
  left: var(--chart-x, 39.231%);
  top: 0;
  bottom: 0;
  width: 1px;
}

.studio-chart-pin-line {
  position: absolute;
  left: 0;
  top: var(--chart-y, 53.33%);
  bottom: 44px;
  width: 1px;
  background: color-mix(in oklab, var(--play) 70%, transparent);
  opacity: var(--inspect, 1);
}

.studio-understand[data-cued="true"] .studio-chart-pin-line {
  opacity: 0.8;
}

.studio-chart-pin-dot {
  position: absolute;
  left: 50%;
  top: var(--chart-y, 53.33%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--play-bright);
  border: 1px solid #0a0a0a;
  transform: translate(-50%, -50%);
  opacity: var(--inspect, 1);
  box-shadow: 0 0 10px var(--play);
}

.studio-understand[data-cued="true"] .studio-chart-pin-dot {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.studio-chart-pin-dot::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid var(--play);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.studio-understand[data-cued="true"] .studio-chart-pin-dot::before {
  transform: scale(calc(1 + var(--event, 1) * .6));
  opacity: calc(.6 * (1 - var(--event, 1)));
}

.studio-chart-badge {
  position: absolute;
  left: clamp(66px, var(--chart-x, 39.231%), calc(100% - 66px));
  top: calc(var(--chart-y, 53.33%) - 30px);
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #0a0c10 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--play) 40%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.6);
  font-size: 10px;
  font-weight: 500;
  color: #ffffffe0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: var(--inspect, 1);

}

.studio-understand[data-cued="true"] .studio-chart-badge {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 40rem) {
  .studio-chart-stage {
    left: 12px;
    right: 12px;
    top: 0;
    bottom: 0;
  }
  .studio-chart-pin-line {
    bottom: 38px;
  }
  .studio-chart-badge {
    font-size: 9px;
    padding: 2px 7px;
    top: calc(var(--chart-y, 53.33%) - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-chart-line {
    stroke-dashoffset: 0 !important;
  }
  .studio-chart-badge {
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
  }
}
/* One timing vocabulary for interactive controls; native wheel/touch scrolling. */
:root { --motion-fast: .18s; --motion-ui: .26s; --motion-settle: .3s; --motion-ease: cubic-bezier(.22, 1, .36, 1); }
:is(#main-header, main, footer) :is(a, button, input, select, textarea, summary) { transition-duration: var(--motion-fast); transition-timing-function: var(--motion-ease); }
#main-header { transition-duration: var(--motion-settle); transition-timing-function: var(--motion-ease); }
.faq-list details .faq-body, .faq-list details p { transition-duration: var(--motion-ui); transition-timing-function: var(--motion-ease); }
.studio-title, .studio-hud { transition-duration: var(--motion-settle); transition-timing-function: var(--motion-ease); }
.studio-cta, .studio-import .studio-play { transition-duration: var(--motion-ui); transition-timing-function: var(--motion-ease); }
@media (prefers-reduced-motion: reduce) {
  :is(#main-header, main, footer) :is(a, button, input, select, textarea, summary), #main-header { transition-duration: 0s !important; }
}

/* Availability is part of the feature description, not an implied launch promise. */
.feature-status, .availability-note { display: inline-block; color: var(--muted-fg); font-size: 10px; font-weight: 400; letter-spacing: .02em; }
.feature-status { margin-top: 8px; }
.availability-note { margin-left: 8px; padding: 2px 6px; border: 1px solid #ffffff24; border-radius: 4px; vertical-align: middle; }

.vs-head { max-width: 40rem; margin-bottom: 2.5rem; }
.vs-head h2 { margin: 0.75rem 0 0.5rem; }
.vs-head p { color: var(--muted-fg); }
.vs-table-container { overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.vs-table th, .vs-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid #ffffff14; vertical-align: top; }
.vs-table thead th { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--muted-fg); white-space: nowrap; }
.vs-table tbody th { font-weight: 400; color: var(--muted-fg); }
.vs-table td { color: #e8e8e8; }
.vs-table .vs-us { color: var(--mint, #ff9670); font-weight: 500; }
.vs-note { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-fg); }
@media (max-width: 720px) { .vs-table { font-size: 0.8125rem; } .vs-table th, .vs-table td { padding: 0.7rem 0.6rem; } }

.calc { padding: 8rem 0 6rem; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 4.5rem; align-items: center; }
.calc-copy h2 { margin: 0.75rem 0 1rem; }
.calc-lede { color: var(--muted-fg); max-width: 34rem; }
.calc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 2.5rem 0 0; }
.calc-stats div { min-width: 0; }
.calc-stats dt { font-family: var(--serif, "Instrument Serif", serif); font-size: 1.75rem; color: #e8e8e8; }
.calc-stats dd { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted-fg); }
.calc-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; border: 1px solid #ffffff14; border-radius: 16px; background: #121212; }
.calc-label { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); }
.calc-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.calc-chip { padding: 0.45rem 0.9rem; border: 0; border-radius: 999px; background: #ffffff14; color: var(--muted-fg); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
.calc-chip.is-on { background: var(--mint, #ff9670); color: #0a0a0a; }
.calc-field { display: flex; flex-direction: column; gap: 0.65rem; }
.calc-field-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; color: var(--muted-fg); }
.calc-field-head output { min-width: 8ch; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9375rem; font-weight: 500; color: #e8e8e8; }
.calc-field input[type="range"] { width: 100%; accent-color: var(--mint, #ff9670); }
.calc-divider { height: 1px; background: #ffffff14; }
.calc-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.calc-plan { min-width: 0; padding: 1rem; border-radius: 12px; background: #ffffff0a; }
.calc-plan.is-us { background: #ff967014; border: 1px solid var(--mint, #ff9670); }
.calc-plan-name { margin: 0; font-size: 0.75rem; color: var(--muted-fg); }
.calc-plan.is-us .calc-plan-name { color: var(--mint, #ff9670); }
.calc-plan-price { min-width: 8ch; margin: 0.35rem 0; font-family: var(--serif, "Instrument Serif", serif); font-size: 1.6rem; color: #e8e8e8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-plan-sub { min-height: 3.4em; margin: 0; font-size: 0.6875rem; color: var(--muted-fg); }
.calc-vs { font-size: 0.75rem; color: var(--muted-fg); }
.calc-delta { min-height: 1.3em; margin: 0; font-family: var(--serif, "Instrument Serif", serif); font-size: 1.75rem; color: var(--mint, #ff9670); font-variant-numeric: tabular-nums; }
.calc-note { margin: 0; font-size: 0.6875rem; color: var(--muted-fg); }
.calc-cta { display: block; text-align: center; padding: 0.85rem 1rem; border-radius: 10px; background: var(--mint, #ff9670); color: #0a0a0a; font-size: 0.875rem; font-weight: 500; }
.calc-cta:hover { filter: brightness(0.95); }
@media (max-width: 900px) { .calc-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }
@media (max-width: 480px) { .calc-versus { grid-template-columns: minmax(0, 1fr); } .calc-vs { display: none; } }