@media (max-width: 1099px) {
    .hero__copy,
    .page-hero__copy {
        width: 60%;
    }

    .hero__copy h1,
    .page-hero__copy h1 {
        margin-block: 1rem;
        font-size: clamp(2.45rem, 5.2vw, 3.5rem);
    }

    .hero__lead,
    .page-hero__lead {
        margin-bottom: 1.25rem;
        font-size: 0.98rem;
    }

    .hero__technical,
    .page-hero__technical {
        display: none;
    }

    .benefit-card {
        min-height: 20rem;
    }

    .benefit-card h3 {
        margin-top: 4.5rem;
    }

    .workflow-layout,
    .control-layout {
        grid-template-columns: minmax(17rem, 0.8fr) minmax(25rem, 1.2fr);
        gap: 2.5rem;
    }

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

    .site-footer__inner {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + 4rem);
        padding-bottom: 5rem;
        align-items: flex-start;
    }

    .hero__frame {
        max-height: none;
    }
}

@media (min-width: 700px) and (max-width: 799px) {
    .hero__actions {
        gap: 0.5rem;
    }

    .hero__actions .button {
        padding-inline: 0.9rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .hero__actions .button__play {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (max-width: 899px) {
    .section-heading--split,
    .workflow-layout,
    .control-layout,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .section-heading--split {
        gap: 1rem;
    }

    .section-heading--split > p {
        max-width: 45rem;
        margin-top: 0.75rem;
    }

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

    .benefit-card:last-child {
        grid-column: 1 / -1;
    }

    .benefit-card:last-child p {
        max-width: 48ch;
    }

    .workflow-layout {
        gap: 3rem;
    }

    .workflow-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid var(--border);
        border-left: 1px solid var(--border);
    }

    .workflow-list li {
        display: block;
        min-height: 15rem;
        padding: 1.25rem;
        border-top: 0;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .workflow-list h3 {
        margin-top: 3rem;
    }

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

    .use-grid .use-card:last-child:nth-child(odd),
    .related-grid .related-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .control-layout {
        gap: 3rem;
    }

    .control-copy h2 {
        max-width: 14ch;
    }

    .faq-layout .section-heading {
        position: static;
    }

    .site-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.5rem;
    }
}

@media (max-width: 699px) {
    :root {
        --header-height: 4rem;
    }

    .site-header__inner {
        width: min(100% - 2rem, var(--container));
    }

    .brand {
        gap: 0.5rem;
    }

    .brand__mark {
        width: 1.5rem;
        height: 1.5rem;
    }

    .brand__name {
        font-size: 0.8rem;
    }

    .site-header__nav {
        display: none;
    }

    .mobile-header-actions {
        display: flex;
    }

    .hero {
        display: block;
        min-height: 100svh;
        padding: calc(var(--header-height) + 1.5rem) 1.125rem 1.125rem;
    }

    .hero__frame,
    .page-hero__frame {
        display: flex;
        max-height: none;
        min-height: 0;
        overflow: visible;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        flex-direction: column;
    }

    .hero__frame::after,
    .page-hero__frame::after,
    .hero__shade,
    .page-hero__shade,
    .hero__technical,
    .page-hero__technical {
        display: none;
    }

    .hero__copy,
    .page-hero__copy {
        position: relative;
        inset: auto;
        order: 1;
        width: 100%;
        transform: none;
    }

    .hero__copy h1,
    .page-hero__copy h1 {
        max-width: 13ch;
        margin: 1.15rem 0 1rem;
        font-size: clamp(2.25rem, 10.3vw, 2.8rem);
        letter-spacing: -0.048em;
        line-height: 0.99;
    }

    .hero__lead,
    .page-hero__lead {
        margin-bottom: 1.35rem;
        color: var(--text-secondary);
        font-size: 1rem;
        line-height: 1.48;
    }

    .hero__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .button {
        min-width: 0;
        min-height: 3.25rem;
        padding-inline: 0.9rem;
        font-size: 0.82rem;
    }

    .button__play {
        display: none;
    }

    .hero__picture,
    .page-hero__picture {
        position: relative;
        order: 2;
        width: 100%;
        margin-top: 1.5rem;
        overflow: hidden;
        aspect-ratio: 4 / 5;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: #07101a;
    }

    .prompt-sample {
        margin-top: -0.1rem;
        font-size: 0.74rem;
    }

    .mode-switch {
        position: relative;
        inset: auto;
        order: 3;
        margin: -3.25rem 0 0 0.75rem;
        align-self: flex-start;
    }

    .effect-selector {
        position: relative;
        inset: auto;
        order: 4;
        margin-top: 0.85rem;
        justify-content: flex-start;
        background: transparent;
    }

    .page-hero__picture {
        aspect-ratio: 16 / 10;
    }

    .hero__picture::after,
    .page-hero__picture::after {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: inherit;
        content: "";
        pointer-events: none;
    }

    .hero__image {
        object-position: center;
        transform-origin: 56% 45%;
    }

    .page-hero__image {
        object-position: 68% center;
    }

    .preview-control {
        z-index: 6;
        right: 0.75rem;
        bottom: 0.75rem;
        order: 3;
    }

    .preview-control__track {
        width: 3.5rem;
    }

    .page-hero {
        padding: calc(var(--header-height) + 1rem) 1.125rem 1.5rem;
    }

    .breadcrumbs {
        margin-bottom: 1rem;
    }

    .content-section {
        padding: 4.75rem 1.125rem;
    }

    .section-heading {
        margin-bottom: 2.25rem;
    }

    .section-heading h2,
    .control-copy h2 {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    .section-heading p,
    .control-copy > p {
        font-size: 0.98rem;
        line-height: 1.56;
    }

    .benefit-grid,
    .workflow-list,
    .use-grid,
    .use-grid--four,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .benefit-card,
    .benefit-card:last-child,
    .use-grid .use-card:last-child:nth-child(odd),
    .related-grid .related-card:last-child:nth-child(odd) {
        min-height: 16.5rem;
        grid-column: auto;
    }

    .benefit-card h3 {
        margin-top: 3.75rem;
    }

    .result-shot {
        min-width: 0;
        flex-basis: 84vw;
        aspect-ratio: 4 / 3;
    }

    .before-after__stage {
        aspect-ratio: 4 / 3;
    }

    .before-after__layer img {
        object-position: 68% center;
    }

    .workflow-list li {
        min-height: 12rem;
    }

    .workflow-list h3 {
        margin-top: 2.5rem;
    }

    .studio-board__canvas {
        min-height: 20rem;
    }

    .scene-node {
        width: 5.5rem;
        height: 5.5rem;
    }

    .studio-board__reticle {
        display: none;
    }

    .use-card,
    .related-card {
        min-height: 16.5rem;
    }

    .use-card h3 {
        margin-top: 4rem;
    }

    .control-stage__tag {
        display: none;
    }

    .faq-item summary {
        grid-template-columns: 2.2rem 1fr 2rem;
        gap: 0.65rem;
        font-size: 1rem;
    }

    .faq-item__answer {
        padding: 0 2.2rem 1.5rem 2.85rem;
    }

    .final-cta {
        min-height: 0;
        padding: 4.5rem 1.125rem;
    }

    .final-cta h2 {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .legal-page {
        padding: calc(var(--header-height) + 1rem) 1.125rem 4.5rem;
    }

    .legal-page__header {
        padding-block: 2.5rem 3rem;
    }

    .legal-page__content section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .legal-page__content p + p {
        grid-column: auto;
    }

    .not-found__copy .hero__actions {
        grid-template-columns: 1fr;
    }

    .site-footer {
        padding: 4rem 1.125rem 1.25rem;
    }

    .site-footer__nav {
        gap: 2.25rem 1rem;
    }

}

@media (max-width: 374px) {
    .site-header__inner {
        width: calc(100% - 1rem);
        gap: 0.35rem;
    }

    .brand {
        gap: 0.3rem;
    }

    .brand__name {
        font-size: 0.72rem;
    }

    .mobile-header-actions {
        gap: 0.25rem;
    }

    .mobile-header-actions a {
        padding-inline: 0.55rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 430px) {
    .site-footer__nav {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 370px) {
    .hero__actions {
        grid-template-columns: 1fr;
    }

    .button--secondary {
        background: transparent;
    }
}