/* One content width from the hero editor to the footer; only its backdrop bleeds out. */
:root { --hero-bleed: 72px; }

.hero__copy.wrap { width: var(--site-page-width); }
.showcase-section.wrap,
.generation-section.generation-studio,
.access-section.wrap {
  width: var(--site-page-width);
  margin-inline: auto;
}
.hero__stage { width: calc(var(--site-page-width) + var(--hero-bleed) + var(--hero-bleed)); padding-inline: var(--hero-bleed); }
.hero__city { filter: saturate(1.08) contrast(1.06); }
.hero__scene:after { background: linear-gradient(0deg, var(--bg), transparent 50%); }
.hero__workspace { border-color: #ffffff32; background: #202022; }
.hero__copy > p { color: var(--muted); }
.announcement { color: #c8c8cb; }
.hero__try { color: #b8b8bd; }
.text-link { border-bottom-color: #ffffff30; color: #e0e0e3; }

.showcase-section,
.generation-story.showcase-section {
  display: block;
  padding-block: 60px;
  border-bottom: 1px solid var(--line);
}
.generation-section.generation-studio { padding-block: 0; border: 0; }
.generation-story.showcase-section { width: 100%; margin: 0; }
.feature-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: start;
  gap: 56px;
  margin-bottom: 30px;
}
.feature-heading > h2 {
  max-width: 520px;
  font-size: clamp(36px, 3.5vw, 48px);
  font-weight: 450;
  letter-spacing: -1.45px;
  line-height: 1.12;
}
.feature-heading__body { max-width: 460px; padding-top: 2px; }
.feature-heading__body > p { color: var(--muted); font-size: 20px; line-height: 1.5; }
.feature-heading__body > .text-link { margin-top: 16px; font-size: 14px; }
.feature-stage { position: relative; isolation: isolate; min-width: 0; }
.feature-stage::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 5;
  border-radius: 9px;
  pointer-events: none;
  box-shadow: inset 0 0 10px 2px #0b0b0c70;
}
.feature-stage--paired { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.feature-stage > .motion-scene {
  grid-area: auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  justify-self: stretch;
}
.feature-stage--paired > .motion-scene:only-child { grid-column: 1 / -1; width: min(760px, 100%); justify-self: center; }
.feature-stage--single { width: 100%; margin-inline: auto; }
.feature-stage--capture .editor-capture { width: 100%; margin-top: 0; border-color: #ffffff16; }

/* Neutral chrome; photography and generated footage retain their own color. */
.agent-chat__panel { border-color: #ffffff1b; background: #141416; }
.agent-chat__header { background: #19191b; border-color: #ffffff0c; }
.agent-chat__identity, .studio-top > span { color: #eeeef0; }
.agent-chat__mark, .studio-mark { color: #b6b6bd; }
.agent-chat__brief { color: #e4e4e7; background: #242426; }
.agent-chat__task { color: #c5c5cb; }
.agent-chat__tool { color: #a7a7af; }
.agent-chat__receipt { background: #1b1b1e; border-color: #ffffff15; }
.agent-chat__receipt strong { color: #e5e5e8; }
.agent-chat__receipt span { color: #a8a8b0; }
.agent-chat__composer { color: #aaaab2; background: #202023; border-color: #ffffff15; }
.agent-chat__composer-foot { color: #aaaab2; }
.agent-chat__send { background: #d9d9df; color: #242426; }
.agent-chat__tick { border-color: #aaaab04d; }
.agent-chat__tick:after { border-color: #d8d8df; }
.studio-demo { background: #171719; border-color: #ffffff1b; }
/* Fade only the outer edge; the artwork and type remain unfiltered. */
.feature-stage:has(> .studio-demo)::after { content: none; }
.feature-stage > .studio-demo { border: 0; }
.feature-stage > .studio-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 9px 1px #0b0b0c85;
}
.feature-stage .studio-demo--video .studio-artwork > img,
.feature-stage .studio-demo--video .studio-artwork > video { object-fit: contain; }
.studio-top { background: #19191b; }
.studio-modes, .studio-mode-label { color: #a9a9b1; }
.studio-modes .is-current { color: #eeeef0; border-bottom-color: #d0d0d6; }
.studio-canvas, .studio-artwork { background: #131315; }
.feature-stage .studio-canvas { aspect-ratio: 3 / 2; }
.feature-stage .studio-demo--video .studio-canvas { aspect-ratio: 16 / 9; }
.studio-prompt { border-color: #3f3f46; background: #202024; }
.studio-prompt p { color: #e1e1e6; }
.studio-reference, .studio-prompt-label { color: #aaaab2; }
.studio-written { color: #c6c6cd; }
.studio-assist { border-color: #686870; background: #28282d; color: #eeeef2; }
.studio-generate { background: #e7e7eb; color: #222226; }
.studio-generate::after { background: #777780; }
.studio-demo[data-phase='1'] .studio-prompt { border-color: #9797a1; }
.studio-demo[data-phase='1'] .studio-assist { background: #35353c; border-color: #b9b9c2; }
.studio-demo[data-phase='3'] .studio-generate { background: #d3d3da; }
.motion-replay { color: #c3c3ca; }
.motion-replay:hover { color: #fff; }
.motion-replay:focus-visible { outline-color: var(--accent); }
.motion-scene__top, .motion-scene__bottom,
.transcript-motion__top { border-color: #ffffff13; }
.motion-scene__top { color: #c8c8ce; }
.motion-status, .motion-scene__bottom > span { color: #a3a3ac; }
.reel-story, .transcript-story.transcript-example { background: #171719; }
.transcript-motion__top, .transcript-story__audio { background: #141416; }
.transcript-motion__title, .transcript-motion__excerpt p { color: #e7e7ec; }
.transcript-motion__title svg, .transcript-motion__file,
.transcript-motion .transcript-story__speaker,
.transcript-motion .transcript-story__last,
.transcript-motion__status { color: #aaaab3; }
.transcript-story__speaker-dot { background: #a9a9b2; }
.transcript-motion .transcript-filler {
  color: #b9b9c1;
  background-image: linear-gradient(#d4d4de, #d4d4de);
}
.transcript-motion:is([data-phase='1'],[data-phase='2']) .transcript-filler { color: #242429; }
.transcript-motion[data-phase='2'] .transcript-filler { text-decoration-color: #686873; }
.transcript-motion .transcript-story__wave-part { background-color: #b4b4bd16; }
.transcript-motion .transcript-story__wave-part:before { background: repeating-linear-gradient(90deg,transparent 0 3px,#bdbdc89b 3px 4px,transparent 4px 6px,#ababba69 6px 7px); }
.transcript-motion:is([data-phase='1'],[data-phase='2']) .transcript-story__wave-part--filler { background: #d4d4de40; border-color: #d4d4de9c; }
.transcript-motion .transcript-story__splice, .transcript-motion__playhead { background: #e2e2ea; }
.transcript-motion .transcript-motion__cut { color: #d6d6df; }
.wl__row label { color: #c5c5cc; }
.wl__controls input { color: #ededf0; background: #161618; border-color: #45454d; }
.wl__controls input::placeholder, .wl__alt { color: #9f9fa8; }
.wl__alt a, .wl__msg, .wl__done { color: #ceced5; }
.wl__done { border-color: #ffffff20; }

@media (min-width: 901px) {
  /* Keep the native output frame throughout the prompt and result phases. */
  .feature-stage--paired .studio-canvas { aspect-ratio: 3 / 2; min-height: 0; }
  .feature-stage--paired .studio-demo--video .studio-canvas { aspect-ratio: 16 / 9; }
  .feature-stage--paired .studio-process { padding: 18px 20px; }
  .feature-stage--paired .studio-reference { margin-bottom: 8px; }
  .feature-stage--paired .studio-reference img { width: 64px; height: 36px; }
  .feature-stage--paired .studio-demo--edit .studio-reference img { height: auto; }
  .feature-stage--paired .studio-prompt-label { min-height: 18px; margin-bottom: 6px; }
  .feature-stage--paired .studio-prompt { min-height: 96px; padding: 10px 12px; }
  .feature-stage--paired .studio-prompt p { font-size: 14px; line-height: 1.45; }
  .feature-stage--paired .studio-actions { min-height: 34px; margin-top: 10px; }
  .feature-stage--paired .studio-assist,
  .feature-stage--paired .studio-generate { min-height: 34px; padding: 6px 9px; }
  .feature-stage--paired .studio-demo--video .studio-process { padding: 12px 18px; }
  .feature-stage--paired .studio-demo--video .studio-reference { margin-bottom: 6px; }
  .feature-stage--paired .studio-demo--video .studio-reference img { width: 48px; height: 27px; }
  .feature-stage--paired .studio-demo--video .studio-prompt-label { margin-bottom: 4px; }
  .feature-stage--paired .studio-demo--video .studio-prompt { min-height: 92px; }
  .feature-stage--paired .studio-demo--video .studio-actions { min-height: 32px; margin-top: 8px; }
  .feature-stage--paired .studio-demo--video .studio-assist,
  .feature-stage--paired .studio-demo--video .studio-generate { min-height: 32px; }
}
@media (max-width: 900px) {
  :root { --hero-bleed: 12px; }
  .showcase-section, .generation-story.showcase-section { padding-block: 44px; }
  .feature-heading { gap: 32px; margin-bottom: 26px; }
  .feature-heading > h2 { font-size: 36px; }
  .feature-heading__body > p { font-size: 18px; }
  .feature-stage--paired { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature-stage--paired > .motion-scene:only-child { width: 100%; }
}
@media (max-width: 600px) {
  :root { --hero-bleed: 8px; }
  .showcase-section, .generation-story.showcase-section { padding-block: 36px; }
  .feature-heading { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 24px; }
  .feature-heading > h2 { font-size: 32px; letter-spacing: -1.1px; max-width: 360px; }
  .feature-heading__body { padding-top: 0; max-width: 390px; }
  .feature-heading__body > p { font-size: 16px; line-height: 1.55; }
  .feature-heading__body > .text-link { margin-top: 12px; }
  .feature-stage::after { box-shadow: inset 0 0 7px 1px #0b0b0c55; }
  .feature-stage--paired { gap: 20px; }
}
.feature-heading__body > .text-link + .text-link { margin-left: 22px; }
@media (max-width: 600px) { .feature-heading__body > .text-link + .text-link { margin-left: 18px; } }