/* Page composition only. The shared creator owns controls and all task states. */
.cat-story-page .creator-main { max-width: var(--sc-container); width: calc(100% - var(--sc-space-16)); margin-inline: auto; padding: 0; min-height: 0; }
.cat-story-page .creator-main::before { display: none; }
.cat-story-hero { padding-block: var(--sc-hero-top-space) var(--sc-hero-content-space); }
.cat-story-hero h1 { max-width: var(--sc-hero-copy-width); margin: var(--sc-space-4) 0; font: 700 var(--sc-hero-title-size)/var(--sc-hero-title-leading) var(--sc-font-display); letter-spacing: -.04em; text-wrap: balance; }
.cat-story-hero .cat-story-lead { max-width: var(--sc-hero-lead-width); font-size: var(--sc-hero-lead-size); line-height: var(--sc-leading-copy); }
.cat-story-page p { color: var(--sc-color-text); }
.cat-story-tool { scroll-margin-top: calc(var(--sc-header-height, 72px) + var(--sc-space-4)); }
.cat-story-tool > h2 { margin: 0 0 var(--sc-space-5); font: 650 var(--sc-content-subtitle-size)/1.3 var(--sc-font-display); }
.cat-story-page .creator-modes { padding-inline: 0; margin-bottom: var(--sc-space-5); }
.cat-story-page .creator-split { gap: var(--sc-space-5); grid-template-columns: minmax(300px, .9fr) minmax(0, 1.7fr); background: transparent; }
.cat-story-page .creator-split > form { padding: var(--sc-workspace-padding); min-height: 0; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); }
.cat-story-page .creator-output { padding: var(--sc-workspace-padding); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); background: var(--sc-color-surface); align-self: start; }
.cat-story-page .creator-preview { height: auto; aspect-ratio: 4 / 3; }
.cat-story-page video:is([data-cat-story-video], [data-creator-ambient-preview], [data-creator-preview-video]) { pointer-events: none; }
.cat-story-page .creator-mobile-action { position: static; width: 100% !important; padding: 0; background: transparent; }
.cat-story-page .creator-example-caption { flex-wrap: wrap; }
.cat-story-page .cat-story-template-status:empty { display: none; }
.cat-story-section { margin-top: var(--sc-space-24); }
.cat-story-section h2, .cat-story-cta h2 { margin: 0 0 var(--sc-space-5); font: 650 var(--sc-content-title-size)/1.2 var(--sc-font-display); letter-spacing: -.035em; text-wrap: balance; }
.cat-story-section-heading { max-width: var(--sc-hero-lead-width); margin: 0 auto var(--sc-space-10); text-align: center; }
.cat-story-section p, .cat-story-cta > p { font-size: var(--sc-content-font-size); line-height: var(--sc-leading-copy); }
.cat-story-section figure { margin: 0; min-width: 0; border-radius: var(--sc-radius-lg); overflow: hidden; }
.cat-story-section figure > :is(img, video) { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--sc-color-canvas-deep); }
.cat-story-proof { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: var(--sc-space-12); }
.cat-story-page .cat-story-caption { color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); }
.cat-story-features { display: grid; gap: var(--sc-space-24); }
.cat-story-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sc-space-16); }
.cat-story-feature--reverse figure { order: 2; }
.cat-story-feature h2 { margin: 0 0 var(--sc-space-5); font: 650 var(--sc-content-subtitle-size)/1.25 var(--sc-font-display); letter-spacing: -.03em; }
.cat-story-feature p { margin: 0; }
.cat-story-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-space-10); list-style: none; padding: 0; }
.cat-story-step-number { color: var(--sc-color-brand-700); font: 500 var(--sc-content-subtitle-size)/1.5 var(--sc-font-mono); }
.cat-story-steps h3 { font-size: var(--sc-font-size-xl); line-height: 1.5; margin-block: var(--sc-space-3); }
.cat-story-steps p { font-size: var(--sc-content-small-size); }
.cat-story-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-space-6); }
.cat-story-template { min-width: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cat-story-template-media { position: relative; aspect-ratio: 4 / 3; background: var(--sc-color-canvas-deep); }
.cat-story-template-media > video { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.cat-story-template-input { position: absolute; inset-inline-start: var(--sc-space-3); bottom: var(--sc-space-3); width: var(--sc-space-12); height: var(--sc-space-16); border: 2px solid var(--sc-color-ink); border-radius: var(--sc-radius-sm); object-fit: cover; pointer-events: none; }
.cat-story-mode-label { position: absolute; top: var(--sc-space-3); inset-inline-start: var(--sc-space-3); background: var(--sc-color-surface); color: var(--sc-color-ink); padding: var(--sc-space-1) var(--sc-space-2); border-radius: var(--sc-radius-pill); font-size: var(--sc-font-size-sm); pointer-events: none; }
.cat-story-template-body { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: var(--sc-space-5); }
.cat-story-template h3 { margin: 0 0 var(--sc-space-5); font-size: var(--sc-content-small-size); line-height: 1.5; }
.cat-story-template .sc-button { margin-top: auto; }
.cat-story-template[data-selected="true"] { border-color: var(--sc-color-brand-500); }
.cat-story-faq { max-width: var(--sc-hero-lead-width); margin-inline: auto; }
.cat-story-faq summary { font-size: var(--sc-content-font-size); }
.cat-story-faq details p { font-size: var(--sc-content-small-size); }
.cat-story-cta { padding-block: var(--sc-space-16) var(--sc-space-10); margin-top: var(--sc-space-16); text-align: center; }
.cat-story-cta p { max-width: var(--sc-reading-width); margin-inline: auto; }
.cat-story-cta .sc-button { margin-block: var(--sc-space-4); }
.cat-story-page sugarcube-footer { margin-top: 0; }
@media (max-width: 1100px) {
  .cat-story-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-story-feature { gap: var(--sc-space-8); }
}
@media (max-width: 767px) {
  .cat-story-page .creator-main { width: calc(100% - var(--sc-space-8)); padding: 0; min-height: 0; }
  .cat-story-page .creator-split { display: block; }
  .cat-story-page .creator-split > form { padding: var(--sc-workspace-padding); }
  .cat-story-page .creator-banner { margin-bottom: var(--sc-space-4); }
  .cat-story-page .creator-banner img { object-position: center 30%; }
  .cat-story-section { margin-top: var(--sc-space-16); }
  .cat-story-section-heading { text-align: start; margin-bottom: var(--sc-space-8); }
  .cat-story-proof, .cat-story-feature { grid-template-columns: minmax(0, 1fr); gap: var(--sc-space-6); }
  .cat-story-feature--reverse figure { order: 0; }
  .cat-story-features { gap: var(--sc-space-16); }
  .cat-story-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sc-space-5); }
  .cat-story-steps li { border-top: 1px solid var(--sc-color-border); padding-top: var(--sc-space-4); }
  .cat-story-template-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-story-cta { padding-block: var(--sc-space-12) var(--sc-space-8); margin-top: var(--sc-space-8); }
}
@media (prefers-reduced-motion: reduce) { .cat-story-page { scroll-behavior: auto; } }