/* Higgsfield product-hub layer. Source: .webpro/reference-lock.md. */

:root {
    --canvas: var(--color-bg);
    --surface: var(--color-surface);
    --card: var(--color-surface-2);
    --card-2: color-mix(in srgb, var(--color-surface-2), var(--color-text) 4%);
    --ink: var(--color-text);
    --ink-quiet: var(--color-text-secondary);
    --ink-cool: var(--color-text-secondary);
    --ink-pale: var(--color-text-secondary);
    --muted: var(--color-text-muted);
    --muted-2: color-mix(in srgb, var(--color-text-muted), var(--color-bg) 22%);
    --accent: var(--color-primary);
    --accent-hover: var(--color-primary-hover);
    --accent-ink: var(--color-on-primary);
    --line: color-mix(in srgb, var(--color-border), transparent 34%);
    --line-strong: var(--color-border);
    --backdrop: var(--glass-bg);
    --shadow: color-mix(in srgb, var(--color-bg), transparent 18%);
    --error: var(--color-error);
    --footer-canvas: var(--color-bg);
    --footer-ink: var(--color-text-secondary);
    --footer-surface: var(--color-surface);
    --footer-muted: var(--color-text-secondary);
    --deep-canvas: var(--color-bg);
    --black-a45: color-mix(in srgb, var(--color-bg), transparent 16%);
    --black-a68: color-mix(in srgb, var(--color-bg), transparent 6%);
    --black-a70: color-mix(in srgb, var(--color-bg), transparent 4%);
    --black-a72: color-mix(in srgb, var(--color-bg), transparent 3%);
    --black-a86: var(--color-bg);
    --white-a25: color-mix(in srgb, var(--color-text), transparent 75%);
    --white-a28: color-mix(in srgb, var(--color-text), transparent 72%);
    --white-a30: color-mix(in srgb, var(--color-text), transparent 70%);
    --white-a35: color-mix(in srgb, var(--color-text), transparent 65%);
    --deep-a74: color-mix(in srgb, var(--color-bg), transparent 5%);
    --accent-a11: color-mix(in srgb, var(--color-primary), transparent 89%);
    --accent-a12: color-mix(in srgb, var(--color-primary), transparent 88%);
    --font-sans: var(--font-text);
    --font-mono: var(--font-text);
    --pad: var(--page-pad);
    --max: var(--container);
    --r-sm: var(--radius-md);
    --r-md: var(--radius-lg);
    --r-lg: var(--radius-lg);
    --r-040: var(--radius-xs);
    --r-045: var(--radius-sm);
    --r-050: var(--radius-sm);
    --r-055: var(--radius-md);
    --pill: var(--radius-pill);
    --ease: var(--ease-out);
    --fast: var(--dur-fast);
    --menu: var(--dur-base);
    --focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
    --fs-052: var(--fs-caption);
    --fs-056: var(--fs-caption);
    --fs-057: var(--fs-caption);
    --fs-058: var(--fs-caption);
    --fs-060: var(--fs-caption);
    --fs-062: var(--fs-caption);
    --fs-065: var(--fs-caption);
    --fs-068: var(--fs-caption);
    --fs-072: var(--fs-body-sm);
    --fs-075: var(--fs-body-sm);
    --fs-076: var(--fs-body-sm);
    --fs-078: var(--fs-body-sm);
    --fs-080: var(--fs-body-sm);
    --fs-082: var(--fs-body-sm);
    --fs-084: var(--fs-body-sm);
    --fs-088: var(--fs-body);
    --fs-090: var(--fs-body);
    --fs-092: var(--fs-body);
    --fs-095: var(--fs-body);
    --fs-100: var(--fs-body);
    --fs-103: var(--fs-body-lg);
    --fs-105: var(--fs-body-lg);
    --fs-110: var(--fs-h4);
    --fs-120: var(--fs-h4);
    --fs-125: var(--fs-h4);
    --fs-140: var(--fs-h3);
    --fs-155: var(--fs-h3);
    --fs-165: var(--fs-h3);
    --fs-185: var(--fs-h2);
    --fs-200: var(--fs-h2);
    --fs-home-display: var(--fs-h1);
    --fs-h2-fluid: var(--fs-h2);
    --fs-h3-fluid: var(--fs-h3);
    --fs-lead-fluid: var(--fs-body-lg);
    --fs-editorial-fluid: var(--fs-h4);
    --fs-card-fluid: var(--fs-h3);
    --fs-section-display: var(--fs-h1);
    --fs-footer-display: var(--fs-h2);
    --fs-page-display: var(--fs-h1);
    --fs-page-h2: var(--fs-h2);
    --fs-mid-display: var(--fs-h2);
    --fs-cta-display: var(--fs-h1);
    --fs-tablet-display: var(--fs-h1);
    --fs-tablet-page: var(--fs-h1);
    --fs-mobile-display: var(--fs-h1);
    --fs-mobile-h2: var(--fs-h2);
}

html {
    min-width: 320px;
    background: var(--color-bg);
    color-scheme: dark;
}

body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--header-h);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

main,
section,
header,
footer,
nav,
figure,
div {
    min-width: 0;
}

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

button,
a {
    touch-action: manipulation;
}

h1,
h2,
h3,
h4 {
    color: var(--color-text);
    font-family: var(--font-display);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

p {
    text-wrap: pretty;
}

main p:not(.kicker) {
    max-width: var(--measure);
}

::selection {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

[id] {
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.skip-link {
    position: fixed;
    z-index: var(--z-tooltip);
    top: var(--space-2);
    left: var(--space-4);
    padding: var(--space-3) var(--space-4);
    transform: translateY(-180%);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--fw-semibold);
}

.skip-link:focus-visible {
    transform: none;
}

/* Shared compact shell */

.site-header {
    position: fixed;
    z-index: var(--z-sticky);
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--header-h);
    padding-inline: max(var(--page-pad), env(safe-area-inset-left), env(safe-area-inset-right));
    column-gap: var(--space-6);
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: var(--space-2);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-h4, normal);
}

.brand__mark {
    width: 32px;
    height: 32px;
    padding: var(--space-2);
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-bg);
}

.primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.primary-nav__trigger {
    min-height: 44px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-family: var(--font-text);
    font-size: var(--fs-nav);
    font-weight: var(--fw-medium);
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.primary-nav__trigger:hover,
.primary-nav__trigger[aria-expanded="true"] {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.header-cta,
.mobile-auth-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-button);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}

.header-cta {
    gap: var(--space-2);
    padding-inline: var(--space-5);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.header-cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--icon-stroke);
}

.header-cta:hover,
.mobile-auth-actions__try:hover {
    background: var(--color-primary-hover);
}

.header-cta:active,
.mobile-auth-actions a:active {
    transform: translateY(1px);
}

.mobile-auth-actions {
    display: none;
    align-items: center;
    gap: var(--space-2);
}

.mobile-auth-actions__login {
    border-color: var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
}

.mobile-auth-actions__login:hover {
    border-color: var(--color-border);
    background: var(--card-2);
}

.mobile-auth-actions__try {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.mega-menu {
    position: fixed;
    z-index: var(--z-dropdown);
    top: var(--header-h);
    right: 0;
    left: 0;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}

.mega-menu[hidden] {
    display: none;
}

.mega-menu__inner {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(0, 3fr);
    gap: var(--space-6);
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.mega-menu__intro > p:last-child {
    max-width: 18ch;
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
}

.mega-menu__groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.mega-menu__groups > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mega-menu__groups a {
    min-height: 40px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--fs-body-sm);
}

.mega-menu__groups a:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}

/* Type, spacing and common actions */

.section,
.hero,
.page-hero,
.breadcrumbs {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}

.section {
    padding-block: var(--section-pad-md);
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-family: var(--font-text);
    font-size: var(--fs-kicker);
    font-weight: var(--fw-bold);
    line-height: var(--lh-kicker);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.kicker--accent {
    color: var(--color-primary);
}

.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--space-12);
    padding: var(--space-3) var(--space-5);
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-text);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-button);
    cursor: pointer;
    transition: transform var(--dur-instant) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(1px);
}

.button--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.button--primary:hover {
    background: var(--color-primary-hover);
}

.button--secondary {
    border-color: var(--line);
    background: var(--color-surface-2);
    color: var(--color-text);
}

.button--secondary:hover {
    border-color: var(--color-border);
    background: var(--card-2);
}

.button[aria-disabled="true"],
.button:disabled {
    pointer-events: none;
    opacity: .42;
    cursor: not-allowed;
    transform: none;
}

.button[aria-busy="true"] {
    pointer-events: none;
    cursor: wait;
}

.button[aria-busy="true"] > * {
    opacity: 0;
}

.button[aria-busy="true"]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: spin var(--dur-slower) linear infinite;
}

.text-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    margin-top: var(--space-3);
    color: var(--color-text);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-decoration-line: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: var(--space-1);
    transition: color var(--dur-fast) var(--ease-out),
                text-decoration-color var(--dur-fast) var(--ease-out);
}

.text-link:hover {
    color: var(--color-primary);
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr);
    align-items: end;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

.section-heading h2 {
    max-width: 16ch;
    margin-top: 0;
}

.section-heading > p {
    max-width: 34rem;
    justify-self: end;
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.section-subtitle {
    max-width: 38rem;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

/* Homepage: dense product showcase */

.hero--home {
    padding-block: var(--space-8);
}

.hero--home .hero__copy {
    display: grid;
    grid-template-columns: minmax(18rem, 4fr) minmax(0, 8fr);
    align-items: center;
    gap: var(--space-8);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hero__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.hero--home h1 {
    max-width: 12ch;
}

.hero--home .hero__actions {
    display: flex;
    align-self: start;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.hero--home .hero__lead {
    align-self: start;
    max-width: 32rem;
    color: var(--color-text-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.hero-result {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    height: 400px;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.hero-result picture,
.hero-result img,
.hero-result video {
    width: 100%;
    height: 100%;
}

.hero-result img,
.hero-result video {
    object-fit: cover;
}

.hero-result img {
    transition: transform var(--dur-slower) var(--ease-out);
    animation: ambient 10s var(--ease-in-out) infinite alternate;
}

.hero-result::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--black-a45), transparent 38%, var(--black-a68));
    pointer-events: none;
}

.hero-result__status {
    position: absolute;
    z-index: var(--z-raised);
    top: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--white-a30);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.hero-result__status span:first-child {
    color: var(--color-primary);
}

.hero-result__live {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hero-result__live i {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 var(--space-1) var(--accent-a12);
    animation: live-pulse 2s var(--ease-in-out) infinite;
}

.hero-result__progress {
    position: absolute;
    z-index: var(--z-raised);
    top: calc(var(--space-12) + var(--space-2));
    right: var(--space-4);
    left: var(--space-4);
    height: 1px;
    overflow: hidden;
    background: var(--white-a25);
}

.hero-result__progress::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--color-primary);
    animation: reel-progress 19s linear infinite;
}

.hero-result figcaption,
.page-hero figure figcaption,
.campaign-hero figcaption,
.storyboard figcaption,
.portrait-cases figcaption,
.camera-path figcaption,
.format-stage figcaption {
    position: absolute;
    z-index: var(--z-raised);
    right: var(--space-16);
    bottom: var(--space-4);
    left: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--white-a25);
    border-radius: var(--radius-md);
    background: var(--deep-a74);
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
}

.motion-toggle {
    position: absolute;
    z-index: var(--z-raised);
    right: var(--space-4);
    bottom: var(--space-4);
    display: grid;
    place-items: center;
    width: var(--space-12);
    height: var(--space-12);
    border: 1px solid var(--white-a28);
    border-radius: var(--radius-pill);
    background: var(--deep-a74);
    color: var(--color-text);
    transition: transform var(--dur-instant) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.motion-toggle:active {
    transform: scale(.97);
}

.hero-result.is-paused img,
.hero-result.is-offscreen img,
.hero-result.is-paused .hero-result__progress::after,
.hero-result.is-offscreen .hero-result__progress::after {
    animation-play-state: paused;
}

.capability-strip {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    overflow: hidden;
    padding: var(--space-3) var(--page-pad);
    border-block: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-text) var(--space-5), var(--color-text) calc(100% - var(--space-5)), transparent);
    mask-image: linear-gradient(90deg, transparent, var(--color-text) var(--space-5), var(--color-text) calc(100% - var(--space-5)), transparent);
}

.capability-strip__track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: max-content;
    min-width: calc(100% + var(--space-24));
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    animation: capability-drift 14s linear infinite alternate;
}

.capability-strip__track i {
    width: var(--space-1);
    height: var(--space-1);
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.js .hero__intro {
    animation: hero-enter var(--dur-slower) var(--ease-out) both;
}

.js .hero-result {
    animation: hero-media-enter var(--dur-slower) var(--ease-out) var(--dur-instant) both;
}

.is-reveal-armed {
    opacity: 0;
    transform: translateY(var(--move-md));
    transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
}

.is-reveal-armed.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.reel-section {
    contain: inline-size;
    padding-top: var(--space-6);
}

.media-reel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, min(36vw, 512px));
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: var(--space-4);
    scroll-snap-type: x proximity;
    scrollbar-color: var(--color-primary) var(--color-surface);
}

.reel-card,
.reel-card--wide {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    scroll-snap-align: start;
}

.reel-card picture {
    height: 240px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.reel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.reel-card::after {
    content: none;
}

.reel-card > span {
    position: static;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0 0;
}

.reel-card b {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.reel-card small {
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.workflow-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    border: 0;
}

.workflow-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    min-height: 112px;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}

.workflow-list a:hover {
    padding-inline: var(--space-3);
    border-color: var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    transform: translateY(-1px);
}

.workflow-list span {
    color: var(--color-primary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
}

.workflow-list b {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}

.workflow-list small {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.workflow-list i {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-text-muted);
    font-style: normal;
}

/* Product-story bento sections */

.feature-story,
.character-band,
.campaign-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-4);
}

.feature-story__copy,
.character-band > div:first-child,
.campaign-wall__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
    padding: clamp(var(--space-4), 2vw, var(--space-6));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.feature-story--reverse .feature-story__media {
    grid-column: 2;
    grid-row: 1;
}

.feature-story__copy h2,
.character-band h2,
.campaign-wall h2 {
    max-width: 15ch;
    margin: 0 0 var(--space-4);
}

.feature-story__copy p:not(.kicker),
.character-band > div:first-child > p:not(.kicker),
.campaign-wall__copy > p:not(.kicker) {
    max-width: 38rem;
    color: var(--color-text-muted);
    font-size: var(--fs-body);
}

.feature-story__media {
    position: relative;
    width: 100%;
    height: 340px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.feature-story__media picture,
.feature-story__media img {
    width: 100%;
    height: 100%;
}

.feature-story__media img {
    object-fit: cover;
}

.giant-prompt,
.prompt-control__prompt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(var(--space-5), 3vw, var(--space-8));
    background: var(--color-surface);
}

.giant-prompt blockquote,
.prompt-control blockquote {
    max-width: 22ch;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

.giant-prompt > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.giant-prompt span,
.usecase-line span,
.identity-rail span,
.motion-presets button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.compare-stage {
    --position: 52%;
    position: relative;
}

.compare-stage img {
    object-position: center;
}

.compare-stage__after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--position));
    border-left: 2px solid var(--color-primary);
}

.compare-stage--animated .compare-stage__after img {
    transform: scale(1.025) translate3d(0, 0, 0);
    transform-origin: center;
    animation: compare-stage-cinematic var(--dur-ambient) var(--ease-in-out) infinite alternate;
}

@keyframes compare-stage-cinematic {
    to {
        transform: scale(1.04) translate3d(calc(var(--move-md) * -1), var(--move-sm), 0);
    }
}

.compare-stage input {
    position: absolute;
    z-index: var(--z-raised);
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    width: calc(100% - var(--space-8));
    min-height: 48px;
    accent-color: var(--color-primary);
}

.compare-stage__label,
.portrait-annotations > span,
.motion-master figcaption {
    position: absolute;
    z-index: var(--z-raised);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--white-a25);
    border-radius: var(--radius-md);
    background: var(--deep-a74);
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.compare-stage__label {
    top: var(--space-4);
    left: var(--space-4);
}

.page-hero figure.motion-master figcaption {
    top: var(--space-4);
    right: auto;
    bottom: auto;
    left: var(--space-4);
    width: auto;
    max-width: calc(100% - var(--space-8));
}

.portrait-annotations > span {
    top: var(--y);
    left: var(--x);
}

.portrait-annotations > span::before {
    content: '+';
    margin-right: var(--space-1);
    color: var(--color-primary);
}

.character-band {
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.character-band > div:first-child {
    border: 0;
    background: transparent;
}

.character-band__frames {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    height: 340px;
}

.character-band__frames picture {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.character-band__frames picture:last-child {
    margin-top: var(--space-8);
}

.character-band__frames img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-wall__formats {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .75fr);
    align-items: center;
    gap: var(--space-3);
}

.format {
    position: relative;
    min-height: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.format--square {
    aspect-ratio: 1;
}

.format--vertical {
    aspect-ratio: 3 / 4;
}

.format--landscape {
    aspect-ratio: 16 / 10;
}

.format picture,
.format img {
    width: 100%;
    height: 100%;
}

.format img {
    object-fit: cover;
}

.format figcaption {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--deep-a74);
    font-size: var(--fs-caption);
}

.motion-presets {
    position: absolute;
    z-index: var(--z-raised);
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.motion-presets button {
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

.motion-presets button.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Dense informational modules */

.audience-editorial,
.result-strip,
.control-room,
.camera-path,
.format-stage,
.prompt-control,
.prompt-anatomy,
.movement-map,
.portrait-notes,
.performance,
.ad-directions,
.effect-families,
.decision-guide {
    display: grid;
    grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: var(--space-4);
}

.audience-editorial {
    align-items: stretch;
}

.audience-editorial > div:first-child {
    height: 100%;
}

.audience-editorial > div:first-child,
.result-strip > div:first-child,
.control-room > div:last-child,
.camera-path > div,
.format-stage > div:first-child,
.prompt-control > div:last-child,
.prompt-anatomy > div:first-child,
.movement-map > div:first-child,
.portrait-notes > div:first-child,
.performance > div:first-child,
.ad-directions > div:first-child,
.effect-families > div:first-child,
.decision-guide > div:first-child {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.audience-editorial h2,
.result-strip h2,
.control-room h2,
.camera-path h2,
.format-stage h2,
.prompt-control h2,
.prompt-anatomy h2,
.movement-map h2,
.portrait-notes h2,
.performance h2,
.ad-directions h2,
.effect-families h2,
.decision-guide h2 {
    margin-top: 0;
}

.audience-editorial__columns,
.prompt-anatomy ol,
.movement-map > div:last-child,
.portrait-notes ol,
.performance > div:last-child,
.ad-directions > div:last-child,
.effect-families > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    border: 0;
}

.audience-editorial__columns {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.audience-editorial article {
    height: 100%;
}

.audience-editorial article,
.prompt-anatomy li,
.movement-map article,
.portrait-notes li,
.performance article,
.ad-directions article,
.effect-families article,
.result-strip article {
    min-height: var(--space-24);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.audience-editorial article:nth-child(odd),
.prompt-anatomy li:nth-child(odd),
.movement-map article:nth-child(odd),
.portrait-notes li:nth-child(odd),
.ad-directions article:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.audience-editorial article span,
.prompt-anatomy span,
.movement-map span,
.portrait-notes span,
.ad-directions span,
.effect-families span,
.result-strip article > span,
.steps li > span,
.campaign-steps span {
    color: var(--color-primary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.audience-editorial h3,
.movement-map h3,
.portrait-notes h3,
.ad-directions h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-h4);
}

.prompt-anatomy li > b {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
}

.performance h3,
.effect-families h3,
.result-strip h3 {
    display: block;
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
}

.audience-editorial p,
.prompt-anatomy p,
.movement-map p,
.portrait-notes p,
.performance p,
.ad-directions p,
.effect-families p,
.result-strip p,
.control-room p,
.camera-path p,
.format-stage p,
.prompt-control p,
.decision-guide p {
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.steps {
    display: block;
}

.steps ol,
.campaign-steps ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    border: 0;
}

.steps li,
.campaign-steps li {
    min-height: var(--space-24);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.steps li + li,
.campaign-steps li + li {
    padding-left: var(--space-3);
    border-left: 1px solid var(--line);
}

.steps h3,
.campaign-steps b {
    display: block;
    margin: 0 0 var(--space-2);
}

.steps p,
.campaign-steps p {
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.campaign-steps ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
}

.usecase-line h2 {
    max-width: 16ch;
    margin: 0 0 var(--space-3);
}

.usecase-line .section-subtitle {
    margin-bottom: var(--space-4);
}

.explore-links {
    display: grid;
    grid-template-columns: minmax(14rem, .8fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-5);
}

.explore-links > .explore-links__intro {
    display: block;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.explore-links__intro h2 {
    max-width: 14ch;
    margin: 0 0 var(--space-3);
    overflow-wrap: normal;
}

.explore-links__intro > p:last-child {
    max-width: 30rem;
    color: var(--color-text-muted);
}

.explore-links__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    border: 0;
}

.explore-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.explore-links a:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.explore-links a:nth-child(even) {
    padding-left: var(--space-4);
}

.explore-links a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.explore-links a:hover {
    border-color: var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
}

.usecase-line > div,
.identity-rail > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Internal page heroes */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--fs-caption);
}

.breadcrumbs a:hover {
    color: var(--color-text);
}

.page-hero {
    display: grid;
    grid-template-columns: minmax(18rem, 4fr) minmax(0, 8fr);
    grid-template-rows: 1fr auto;
    gap: var(--space-4);
    min-height: 0;
    padding-block: var(--space-4) var(--section-pad-md);
}

.page-hero__copy {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: clamp(var(--space-5), 2.5vw, var(--space-8));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.page-hero h1 {
    max-width: 13ch;
    margin-top: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}

.page-hero__actions {
    margin-top: var(--space-6);
}

.page-hero__lead {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    max-width: 38rem;
    padding: 0 var(--space-4) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.page-hero > figure,
.page-hero > div:nth-of-type(2),
.page-hero--prompt .page-hero__result {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    width: 100%;
    height: 400px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.page-hero > figure picture,
.page-hero > figure img,
.page-hero > div:nth-of-type(2) picture,
.page-hero > div:nth-of-type(2) img,
.page-hero--prompt .page-hero__result picture,
.page-hero--prompt .page-hero__result img {
    width: 100%;
    height: 100%;
}

.page-hero > figure img,
.page-hero > div:nth-of-type(2) img,
.page-hero--prompt .page-hero__result img {
    object-fit: cover;
}

.page-hero--prompt {
    grid-template-rows: auto 1fr;
}

.page-hero--prompt .page-hero__copy {
    grid-row: 1;
    padding: var(--space-8);
}

.page-hero--prompt .page-hero__copy h1 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

.prompt-control blockquote {
    margin: 0;
}

.page-hero.page-hero--prompt > .giant-prompt {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.page-hero.page-hero--prompt > .giant-prompt blockquote {
    max-width: none;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}

.page-hero.page-hero--prompt > .giant-prompt span {
    min-height: 32px;
}

.page-hero--prompt .page-hero__result {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 400px;
}

.page-hero--prompt .page-hero__lead {
    display: none;
}

.process-stack,
.compare-stage--hero,
.portrait-annotations--hero,
.character-dossier,
.campaign-hero,
.motion-master {
    height: 400px;
    min-height: 0;
}

.process-stack {
    position: relative;
}

.process-stack > div {
    position: absolute;
    z-index: var(--z-raised);
    left: var(--space-4);
    width: min(42%, 280px);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    box-shadow: var(--shadow-md);
}

.process-stack > div:first-child {
    top: 8%;
    transform: rotate(-2deg);
}

.process-stack > div:nth-child(2) {
    top: 28%;
    left: 9%;
    transform: rotate(2deg);
}

.process-stack > div span {
    color: var(--color-primary);
    font-size: var(--fs-caption);
}

.process-stack > div b {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
}

.process-stack > div p {
    color: var(--color-text-muted);
    font-size: var(--fs-caption);
}

.process-stack figure {
    position: absolute;
    inset: 0 0 0 28%;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.process-stack img,
.character-dossier img,
.campaign-hero img,
.motion-master img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.character-dossier {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.character-dossier figure,
.campaign-hero figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.character-dossier figure:last-child {
    margin-top: var(--space-8);
}

.campaign-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-3);
}

.campaign-hero > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-2);
}

.campaign-hero > div span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    font-size: var(--fs-caption);
}

/* Content media, controls and relations */

.control-room__panel,
.prompt-control__prompt {
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.control-room__panel > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-body-sm);
}

.storyboard__copy {
    display: grid;
    grid-template-columns: minmax(15rem, .8fr) minmax(16rem, 1.2fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.storyboard__copy p:last-child {
    color: var(--color-text-muted);
}

.storyboard__frames,
.portrait-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.storyboard figure,
.portrait-cases figure,
.camera-path figure,
.format-stage figure {
    position: relative;
    height: 300px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.storyboard figure picture,
.portrait-cases figure picture,
.camera-path figure picture,
.format-stage figure picture,
.scene-orbit__center picture {
    display: block;
    width: 100%;
    height: 100%;
}

.storyboard img,
.portrait-cases img,
.camera-path img,
.format-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-cases {
    align-items: stretch;
}

.portrait-cases > div {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.identity-rail {
    display: grid;
    grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
    gap: var(--space-4);
}

.identity-rail h2 {
    margin-top: 0;
}

.scene-orbit {
    display: grid;
    grid-template-columns: minmax(13rem, 3fr) minmax(0, 5fr) minmax(13rem, 3fr);
    gap: var(--space-4);
    align-items: stretch;
}

.scene-orbit__center {
    height: 340px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.scene-orbit__center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scene-orbit__labels {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.scene-orbit__labels span {
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--fs-caption);
    text-transform: uppercase;
}

.format-stage__grid {
    display: grid;
    grid-template-columns: 1.4fr .7fr;
    align-items: end;
    gap: var(--space-3);
}

.format-stage figure:not(.is-wide) {
    height: 260px;
}

.related {
    display: grid;
    grid-template-columns: minmax(12rem, .8fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.related__intro {
    align-self: stretch;
    padding: var(--space-4) 0;
}

.related__intro h2 {
    max-width: 13ch;
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h3);
}

.related__intro p {
    max-width: 28rem;
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.related > a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 104px;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}

.related > a:hover {
    border-color: var(--color-border);
    background: var(--color-surface-2);
    transform: translateY(-1px);
}

.related > a span {
    color: var(--color-primary);
    font-size: var(--fs-caption);
}

.related > a b {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
}

.decision-guide {
    border: 0;
}

.decision-guide ul {
    display: grid;
    gap: var(--space-2);
    border: 0;
}

.decision-guide li {
    display: grid;
    grid-template-columns: minmax(9rem, .7fr) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.decision-guide li span {
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.faq {
    display: grid;
    grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
    gap: var(--space-4);
    border: 0;
}

.faq > div:first-child {
    align-self: start;
    padding: 0 0 var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.faq h2 {
    margin-top: 0;
}

.faq__intro > p:last-child {
    max-width: 32rem;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

.faq details {
    border-top: 1px solid var(--line);
}

.faq details:last-child {
    border-bottom: 1px solid var(--line);
}

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    gap: var(--space-4);
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary span {
    color: var(--color-primary);
}

.faq details p {
    max-width: 48rem;
    padding: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

.final-cta {
    text-align: left;
}

.final-cta::before {
    content: '';
    position: absolute;
    inset: var(--section-pad-sm) var(--page-pad);
    z-index: -1;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.final-cta h2 {
    max-width: 18ch;
    margin: 0 0 var(--space-3);
}

.final-cta > p:not(.kicker) {
    max-width: 42rem;
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

/* Shared footer */

.site-footer {
    padding: 0;
    border-top: 1px solid var(--line);
    background: var(--footer-canvas);
}

.site-footer__top,
.site-footer__bottom {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr);
    gap: var(--space-12);
    padding-block: var(--section-pad-md);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.site-footer__brand > p:nth-child(2) {
    max-width: 30ch;
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    gap: var(--space-3);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.footer-nav > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
}

.footer-nav a:hover {
    color: var(--color-text);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--color-text-muted);
    font-size: var(--fs-caption);
}

.legal-page,
.not-found {
    width: 100%;
    max-width: var(--container-narrow);
    min-height: 70vh;
    min-height: 70svh;
    margin-inline: auto;
    padding: var(--section-pad-lg) var(--page-pad);
}

.legal-page h1,
.not-found h1 {
    max-width: 14ch;
    margin: var(--space-3) 0 var(--space-8);
}

.legal-page h2 {
    margin: var(--space-10) 0 var(--space-3);
    font-size: var(--fs-h3);
}

.legal-page > p,
.not-found > p:not(.kicker) {
    max-width: 54rem;
    color: var(--color-text-muted);
}

@keyframes ambient {
    from { transform: scale(1); }
    to { transform: scale(1.025); }
}

@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(var(--move-md));
    }
}

@keyframes hero-media-enter {
    from {
        opacity: 0;
        transform: scale(.97);
    }
}

@keyframes live-pulse {
    50% {
        opacity: .58;
        transform: scale(.82);
    }
}

@keyframes reel-progress {
    to { transform: scaleX(1); }
}

@keyframes capability-drift {
    to { transform: translateX(calc(var(--space-24) * -1)); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1023px) {
    :root {
        --header-h: 56px;
        --pad: var(--page-pad);
    }

    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-1);
        padding-inline: max(var(--space-3), env(safe-area-inset-left), env(safe-area-inset-right));
    }

    .brand {
        min-width: max-content;
        white-space: nowrap;
    }

    .primary-nav,
    .header-cta--desktop,
    .mega-menu {
        display: none !important;
    }

    .mobile-auth-actions {
        display: grid;
        grid-template-columns: repeat(2, calc(var(--space-24) + var(--space-2)));
        gap: var(--space-1);
    }

    .mobile-auth-actions a {
        width: calc(var(--space-24) + var(--space-2));
        min-height: 44px;
        padding-inline: var(--space-2);
        white-space: nowrap;
    }

    .hero--home .hero__copy,
    .page-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero--home .hero__copy {
        grid-template-rows: repeat(5, max-content);
        align-content: start;
    }

    .hero__intro,
    .hero-result {
        grid-column: 1;
    }

    .hero__intro { grid-row: 1; }
    .hero-result { grid-row: 2; }

    .hero-result {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .workflow-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-story,
    .feature-story--reverse,
    .character-band,
    .campaign-wall,
    .motion-story,
    .audience-editorial,
    .result-strip,
    .control-room,
    .camera-path,
    .format-stage,
    .prompt-control,
    .prompt-anatomy,
    .movement-map,
    .portrait-notes,
    .performance,
    .ad-directions,
    .effect-families,
    .decision-guide,
    .faq,
    .identity-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature-story--reverse .feature-story__media {
        grid-column: 1;
        grid-row: auto;
    }

    .feature-story__media {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .explore-links {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .page-hero__copy,
    .page-hero__lead,
    .page-hero > figure,
    .page-hero > div:nth-of-type(2),
    .page-hero--prompt .page-hero__copy,
    .page-hero--prompt .giant-prompt,
    .page-hero--prompt .page-hero__result {
        grid-column: 1;
    }

    .page-hero__copy { grid-row: 1; }
    .page-hero > figure,
    .page-hero > div:nth-of-type(2) { grid-row: 2; }
    .page-hero__lead { grid-row: 3; }

    .page-hero--prompt .page-hero__copy { grid-row: 1; }
    .page-hero--prompt .giant-prompt { grid-row: 2; }
    .page-hero--prompt .page-hero__result { grid-row: 3; }

    .page-hero > figure,
    .page-hero > div:nth-of-type(2),
    .page-hero--prompt .page-hero__result,
    .process-stack,
    .compare-stage--hero,
    .portrait-annotations--hero,
    .character-dossier,
    .campaign-hero,
    .motion-master {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .page-hero--prompt .giant-prompt {
        aspect-ratio: auto;
    }

    .related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-steps ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 639px) {
    .section {
        padding-block: var(--section-pad-sm);
    }

    .brand {
        gap: var(--space-1);
        font-size: var(--fs-body-sm);
    }

    .mobile-auth-actions {
        gap: var(--space-1);
    }

    .mobile-auth-actions a {
        min-height: 44px;
        padding-inline: var(--space-2);
        font-size: var(--fs-body-sm);
    }

    .hero--home {
        padding-block: var(--space-4) var(--space-5);
    }

    .hero--home .hero__copy {
        gap: var(--space-3);
        padding: 0;
    }

    .page-hero h1 {
        max-width: 13ch;
    }

    .hero--home h1 {
        max-width: none;
    }

    .page-hero__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .page-hero .button {
        width: 100%;
    }

    .hero--home .hero__actions {
        display: flex;
        width: auto;
    }

    .hero--home .button {
        width: auto;
        min-width: 160px;
    }

    .hero-result {
        aspect-ratio: 16 / 9;
    }

    .capability-strip {
        padding-block: var(--space-2);
    }

    .capability-strip__track {
        gap: var(--space-5);
        min-width: max-content;
    }

    .hero-result__status span:last-child {
        display: none;
    }

    .hero-result figcaption {
        display: none;
    }

    .section-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .section-heading > p {
        justify-self: start;
    }

    .media-reel {
        grid-auto-columns: 82vw;
    }

    .reel-card picture {
        height: 200px;
    }

    .workflow-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .workflow-list a {
        min-height: 80px;
        padding: var(--space-3);
    }

    .workflow-list b {
        margin-top: var(--space-3);
    }

    .workflow-list small {
        display: none;
    }

    .workflow-list a:hover {
        padding-inline: var(--space-3);
    }

    .feature-story__copy,
    .character-band > div:first-child,
    .campaign-wall__copy,
    .page-hero__copy,
    .audience-editorial > div:first-child,
    .result-strip > div:first-child,
    .control-room > div:last-child,
    .camera-path > div,
    .format-stage > div:first-child,
    .prompt-control > div:last-child,
    .prompt-anatomy > div:first-child,
    .movement-map > div:first-child,
    .portrait-notes > div:first-child,
    .performance > div:first-child,
    .ad-directions > div:first-child,
    .effect-families > div:first-child,
    .decision-guide > div:first-child {
        padding: var(--space-4);
    }

    .feature-story__media {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .character-band {
        padding: var(--space-3);
        padding-inline: var(--page-pad);
    }

    .character-band__frames {
        height: 200px;
    }

    .campaign-wall__formats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .format--vertical {
        display: block;
    }

    .format--landscape {
        grid-column: 1 / -1;
    }

    .audience-editorial__columns,
    .prompt-anatomy ol,
    .movement-map > div:last-child,
    .portrait-notes ol,
    .performance > div:last-child,
    .ad-directions > div:last-child,
    .effect-families > div:last-child,
    .steps ol,
    .campaign-steps ol,
    .explore-links__grid,
    .storyboard__frames,
    .portrait-cases,
    .related,
    .scene-orbit {
        grid-template-columns: minmax(0, 1fr);
    }

    .audience-editorial article,
    .prompt-anatomy li,
    .movement-map article,
    .portrait-notes li,
    .performance article,
    .ad-directions article,
    .effect-families article,
    .result-strip article,
    .steps li,
    .campaign-steps li {
        min-height: 0;
    }

    .audience-editorial__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .explore-links__grid { grid-template-columns: minmax(0, 1fr); }

    .explore-links a:last-child:nth-child(odd) { grid-column: auto; }

    .audience-editorial article {
        padding: var(--space-3);
    }

    .audience-editorial h3 {
        margin-top: 0;
    }

    .steps li {
        display: block;
        padding: var(--space-3);
    }

    .steps h3 {
        grid-column: auto;
        margin: 0;
    }

    .steps p {
        grid-column: auto;
        margin-top: var(--space-1);
    }

    .steps li > span {
        grid-row: 1 / 3;
    }

    .campaign-wall h2 br {
        display: none;
    }

    .explore-links a {
        min-height: 52px;
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-body-sm);
    }

    .storyboard__copy {
        grid-template-columns: minmax(0, 1fr);
    }

    .storyboard figure,
    .portrait-cases figure,
    .camera-path figure,
    .format-stage figure,
    .format-stage figure:not(.is-wide) {
        height: 240px;
    }

    .scene-orbit__center {
        height: 280px;
    }

    .format-stage__grid {
        grid-template-columns: 1fr .58fr;
    }

    .decision-guide li {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .faq summary {
        min-height: 56px;
    }

    .final-cta::before {
        inset: var(--space-4) var(--page-pad);
    }

    .site-footer__top {
        gap: var(--space-6);
    }

    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-4);
    }

    .site-footer__bottom {
        display: grid;
    }
}

@media (hover: hover) and (pointer: fine) {
    .motion-toggle:hover {
        transform: scale(1.04);
        border-color: var(--white-a35);
        background: var(--color-surface-2);
    }

    .reel-card:hover img {
        transform: scale(1.025);
    }
}

@media (max-width: 359px) {
    .brand {
        gap: var(--space-1);
    }

    .brand__mark {
        width: 30px;
        height: 30px;
    }

    .mobile-auth-actions a {
        padding-inline: var(--space-2);
        font-size: var(--fs-caption);
    }
}

@media (prefers-reduced-motion: reduce) {
    .compare-stage--animated .compare-stage__after img {
        animation: none;
        transform: none;
    }

    .hero-result img {
        animation: none;
    }

    .js .hero__intro,
    .js .hero-result,
    .hero-result__live i,
    .hero-result__progress::after,
    .capability-strip__track {
        animation: none;
    }

    .is-reveal-armed,
    .is-reveal-armed.is-revealed {
        opacity: 1;
        transform: none;
        transition: opacity var(--dur-fast) var(--ease-out);
    }
}