/* Final editorial motion and spacing contract.
   Loaded after the legacy case-study stylesheet to keep the cascade explicit. */

/* Full-page chapter snapping.
   The document is the scroll container; structural wrappers deliberately are not
   snap targets so a gesture always lands on a visible, semantic screen. */
html:has(body.page-flow-builder) {
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: none;
}

/* The closing artwork and the next-project footer form one continuous final
   scene. Mandatory snapping inside an oversized sticky track pulls the page
   back to the track's start after the footer has entered. Keep the entry snap,
   then allow natural progress through the active closing scene. */
html:has(body.page-flow-builder .flow-case__closing.is-closing-active) {
    scroll-snap-type: y proximity !important;
}

body.page-flow-builder {
    scroll-snap-type: none !important;
}

.page-flow-builder .flow-editorial__mobile-copy {
    display: none;
}

.page-flow-builder .flow-figma-publish__optional-label {
    margin-left: .25em;
}

.page-flow-builder .flow-case__hero-gradient,
.page-flow-builder #productOverview,
.page-flow-builder #builderStage,
.page-flow-builder #personalisation,
.page-flow-builder #contextualAssistant,
.page-flow-builder #designApproach {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.page-flow-builder .flow-case__narrative,
.page-flow-builder .flow-editorial__gradient-story {
    scroll-snap-align: none;
}

.page-flow-builder .flow-case__footer-wrap {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.page-flow-builder .flow-case__footer-wrap > .flow-case__closing,
.page-flow-builder .flow-case__footer-wrap > .case-study__bottom-nav {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm,
.page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm-inner {
    min-height: 100svh;
    min-height: 100dvh;
}

.page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm-inner {
    position: relative;
    top: auto;
}

.page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm-copy {
    opacity: 1;
    filter: none;
    transform: none;
}

.page-flow-builder.flow-motion-ready .flow-editorial__llm-copy > * {
    opacity: 0;
    transform: translate3d(34px, 0, 0);
    backface-visibility: hidden;
    transition: opacity 420ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.18, 1.18, .3, 1);
}

.page-flow-builder.flow-motion-ready .flow-editorial__llm-visual {
    opacity: 0;
    filter: none;
    transform: translate3d(-52px, 24px, 0) scale(.955);
    backface-visibility: hidden;
    transition: opacity 460ms ease-out, transform 680ms cubic-bezier(.18, 1.18, .3, 1);
}

.page-flow-builder.flow-motion-ready .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-copy > *,
.page-flow-builder.flow-motion-ready .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-visual {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.page-flow-builder .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-copy .flow-case__section-label { transition-delay: 70ms; }
.page-flow-builder .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-copy h2 { transition-delay: 140ms; }
.page-flow-builder .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-copy > p:nth-of-type(2) { transition-delay: 230ms; }
.page-flow-builder .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-copy > p:nth-of-type(3) { transition-delay: 310ms; }

.page-flow-builder.flow-motion-ready .flow-editorial__chat {
    opacity: 0;
    filter: none;
    transform: translate3d(-14px, 24px, 0) scale(.96);
    backface-visibility: hidden;
    transition:
        opacity 240ms ease-out,
        transform 460ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 360ms ease;
}

.page-flow-builder.flow-motion-ready .flow-editorial__llm.is-chat-live .flow-editorial__chat {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.page-flow-builder .flow-editorial__chat-thread {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0;
}

.page-flow-builder .flow-editorial__chat-message {
    box-sizing: border-box;
    max-height: 0;
    margin-top: 0;
    padding: 0 var(--bubble-px);
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
    animation: none;
}

.page-flow-builder .flow-editorial__chat-message--user {
    --bubble-open-height: 132px;
}

.page-flow-builder .flow-editorial__chat-message--thinking,
.page-flow-builder .flow-editorial__chat-message--assistant {
    margin-top: 0;
}

.page-flow-builder .flow-editorial__chat-message--thinking {
    --bubble-open-height: 72px;
    z-index: 2;
    align-self: start;
    justify-self: start;
    transform: translate3d(-24px, 10px, 0) scale(.94);
}

.page-flow-builder .flow-editorial__chat-message--assistant {
    --bubble-open-height: 220px;
    z-index: 1;
    transform: translate3d(-34px, 24px, 0) scale(.91);
}

.page-flow-builder .flow-editorial__chat-result {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(-12px, 9px, 0) scale(.96);
    animation: none;
}

.page-flow-builder .flow-editorial__chat-composer {
    box-sizing: border-box;
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.97);
    animation: none;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-message--user {
    animation: flow-editorial-user-cycle 4.2s linear infinite both;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-message--thinking {
    animation: flow-editorial-thinking-cycle 4.2s linear infinite both;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-message--assistant {
    animation: flow-editorial-assistant-cycle 4.2s linear infinite both;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-result {
    animation: flow-editorial-result-cycle 4.2s linear infinite both;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-composer {
    animation: flow-editorial-composer-cycle 4.2s linear infinite both;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-message--thinking span {
    animation: flow-chat-dot 480ms ease-in-out infinite;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-message--thinking span:nth-child(2) {
    animation-delay: 80ms;
}

.page-flow-builder .flow-editorial__llm.is-chat-live .flow-editorial__chat-message--thinking span:nth-child(3) {
    animation-delay: 160ms;
}

@keyframes flow-editorial-user-cycle {
    0%, 2% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(16px, 7px, 0) scale(.98);
        animation-timing-function: cubic-bezier(.2, .72, .3, 1);
    }
    11% {
        max-height: var(--bubble-open-height);
        margin-top: var(--bubble-visible-mt);
        padding-top: var(--bubble-py);
        padding-bottom: var(--bubble-py);
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    82% {
        max-height: var(--bubble-open-height);
        margin-top: var(--bubble-visible-mt);
        padding-top: var(--bubble-py);
        padding-bottom: var(--bubble-py);
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        animation-timing-function: cubic-bezier(.5, 0, .8, .28);
    }
    90% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(-6px, -4px, 0) scale(.99);
    }
    96%, 100% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(16px, 7px, 0) scale(.98);
    }
}

@keyframes flow-editorial-thinking-cycle {
    0%, 16% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(-12px, 5px, 0) scale(.98);
        animation-timing-function: cubic-bezier(.2, .72, .3, 1);
    }
    23% {
        max-height: var(--bubble-open-height);
        margin-top: var(--bubble-visible-mt);
        padding-top: var(--bubble-py);
        padding-bottom: var(--bubble-py);
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    32% {
        max-height: var(--bubble-open-height);
        margin-top: var(--bubble-visible-mt);
        padding-top: var(--bubble-py);
        padding-bottom: var(--bubble-py);
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        animation-timing-function: cubic-bezier(.5, 0, .8, .28);
    }
    40% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(6px, -4px, 0) scale(.99);
    }
    46%, 100% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(-12px, 5px, 0) scale(.98);
    }
}

@keyframes flow-editorial-assistant-cycle {
    0%, 33% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(-16px, 7px, 0) scale(.98);
        animation-timing-function: cubic-bezier(.2, .72, .3, 1);
    }
    43% {
        max-height: var(--bubble-open-height);
        margin-top: var(--bubble-visible-mt);
        padding-top: var(--bubble-py);
        padding-bottom: var(--bubble-py);
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    82% {
        max-height: var(--bubble-open-height);
        margin-top: var(--bubble-visible-mt);
        padding-top: var(--bubble-py);
        padding-bottom: var(--bubble-py);
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        animation-timing-function: cubic-bezier(.5, 0, .8, .28);
    }
    90% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(6px, -4px, 0) scale(.99);
    }
    96%, 100% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(-16px, 7px, 0) scale(.98);
    }
}

@keyframes flow-editorial-result-cycle {
    0%, 45% {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        transform: translate3d(0, 7px, 0) scale(.985);
        animation-timing-function: cubic-bezier(.2, .72, .3, 1);
    }
    53% {
        max-height: 64px;
        margin-top: 8px;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    82% {
        max-height: 64px;
        margin-top: 8px;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        animation-timing-function: cubic-bezier(.5, 0, .8, .28);
    }
    90% {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        transform: translate3d(0, -4px, 0) scale(.99);
    }
    96%, 100% {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        transform: translate3d(0, 7px, 0) scale(.985);
    }
}

@keyframes flow-editorial-composer-cycle {
    0%, 4% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(.985);
        animation-timing-function: cubic-bezier(.2, .72, .3, 1);
    }
    12% {
        max-height: 72px;
        margin-top: 8px;
        padding-top: 7px;
        padding-bottom: 7px;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    82% {
        max-height: 72px;
        margin-top: 8px;
        padding-top: 7px;
        padding-bottom: 7px;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        animation-timing-function: cubic-bezier(.5, 0, .8, .28);
    }
    90% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(0, -5px, 0) scale(.99);
    }
    96%, 100% {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(.985);
    }
}

@media (min-width: 901px) {
    .page-flow-builder .flow-editorial__chapter--approach {
        min-height: 100svh;
        min-height: 100dvh;
        align-content: space-between;
        row-gap: clamp(5rem, 10vh, 8rem);
        margin: 0 auto;
        padding: clamp(5.5rem, 11vh, 8rem) 0 clamp(4.5rem, 9vh, 6.5rem);
        box-sizing: border-box;
    }

    .page-flow-builder .flow-editorial__chapter--approach::before {
        inset: 0 calc(50% - 50vw);
    }
}

/* Preserve the original sticky scroll scene. Only lift the builder artwork a
   little inside its existing scroll-linked transform. */
.page-flow-builder .flow-case__closing {
    --closing-visual-lift: clamp(18px, 2.4svh, 28px);
}

.page-flow-builder .flow-case__closing-visual {
    transform: translate3d(0, calc(var(--closing-screen-y) - var(--closing-visual-lift)), 0) scale(var(--closing-screen-scale));
}

/* The source artwork is intentionally wider than the visible stage. Fade the
   lower canvas into the sky so the viewport does not slice through node cards
   with a hard horizontal edge. */
.page-flow-builder .flow-case__closing-visual img {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, .92) 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, .92) 84%, transparent 100%);
}

@media (max-width: 900px) {
    .page-flow-builder .flow-editorial__chapter--approach {
        min-height: auto;
        align-content: start;
        row-gap: 4rem;
        margin: 0 auto;
        padding: 4.5rem 0 5.5rem;
    }

    .page-flow-builder .flow-editorial__chapter--approach::before {
        inset: 0 calc(50% - 50vw);
    }
}

@media (max-width: 768px) {
    /* Long-form mobile chapters can be taller than the viewport. A mandatory
       root snap lets the browser stop inside that oversized snap area, which
       produces a mixed frame (hero metadata plus a clipped next heading).
       Proximity keeps natural reading inside long chapters and still settles
       cleanly onto the viewport-sized demo screens and nearby chapter starts. */
    html:has(body.page-flow-builder) {
        scroll-snap-type: y proximity !important;
    }

    /* The shared story step is exactly 100vh and vertically centred. On narrow
       screens this chapter's copy is taller than that box, so flex centring
       pushes the heading above its own section and underneath the hero. */
    .page-flow-builder #productOverview .case-study__story-step {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        justify-content: safe center;
        padding-top: clamp(4.5rem, 10svh, 6rem);
        padding-bottom: clamp(4.5rem, 10svh, 6rem);
    }

    .page-flow-builder .flow-case__closing {
        --closing-visual-lift: clamp(12px, 2svh, 18px);
    }

    /* Settings and the action now share one natural scroll flow. The form no
       longer stretches to fill the viewport, so Done follows the last control
       instead of being separated from it by an arbitrary empty region. */
    .page-flow-builder .flow-inspector[data-mobile-view="settings"] {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .page-flow-builder .flow-inspector[data-mobile-view="settings"] .flow-inspector__body {
        display: contents;
    }

    .page-flow-builder .flow-inspector[data-mobile-view="settings"] .flow-inspector__settings-pane {
        min-height: 0;
        flex: 0 0 auto;
        padding-bottom: 16px;
        overflow: visible;
    }

    .page-flow-builder .flow-inspector[data-mobile-view="settings"] .flow-inspector__footer {
        position: relative;
        min-height: auto;
        flex: 0 0 auto;
        padding-top: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .page-flow-builder .flow-inspector[data-mobile-view="settings"]::after {
        content: '';
        min-height: env(safe-area-inset-bottom);
        flex: 1 0 env(safe-area-inset-bottom);
        background: #ffffff;
    }

    .page-flow-builder .flow-inspector__media-mode {
        background: #f2f5f8;
    }

    .page-flow-builder .flow-inspector__media-mode button {
        color: #6f7b8a;
    }

    .page-flow-builder .flow-inspector__media-mode button.is-active {
        color: #18212f;
        background: #e5ebf2;
        box-shadow: none;
    }

    /* Compact mobile product header: project context leads, metadata supports,
       and the publish action keeps its importance without becoming a glossy
       billboard. */
    .page-flow-builder .flow-figma-header {
        height: 64px;
        border-bottom-color: #e3e9f0;
        background: #ffffff;
    }

    .page-flow-builder .flow-figma-header__context {
        top: 9px;
        left: 16px;
        width: calc(100% - 132px);
        gap: 0;
    }

    .page-flow-builder .flow-figma-header__context > strong {
        order: -1;
        color: #18212f;
        font-size: 15px;
        font-weight: 650;
        line-height: 22px;
        letter-spacing: -.025em;
    }

    .page-flow-builder .flow-figma-header__context > span {
        color: #7d8998;
        font-size: 11px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0;
        text-transform: none;
    }

    .page-flow-builder .flow-figma-header__desktop-meta,
    .page-flow-builder .flow-figma-publish__optional-label {
        display: none;
    }

    .page-flow-builder .flow-figma-header__actions {
        top: 14px;
        right: 16px;
    }

    .page-flow-builder .flow-figma-publish {
        min-width: 92px;
        height: 36px;
        padding: 0 14px;
        border-radius: 10px;
        background: #18212f;
        box-shadow: none;
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
    }

    .page-flow-builder .flow-figma-publish::after {
        display: none;
    }

    .page-flow-builder .flow-figma-publish:hover,
    .page-flow-builder .flow-figma-publish:active {
        transform: none;
        box-shadow: none;
    }

    .page-flow-builder .flow-canvas__viewport {
        inset: 64px 0 74px;
    }

    .page-flow-builder .flow-case__hero-gradient {
        background:
            radial-gradient(circle at 12% 92%, rgba(204, 216, 244, .30), transparent 40%),
            linear-gradient(180deg, #f7f9fc 0%, #ffffff 58%, #f6f9fc 100%);
    }

    .page-flow-builder .flow-case__hero-gradient::before {
        background:
            radial-gradient(circle at 16% 78%, rgba(204, 216, 244, .26), transparent 38%),
            radial-gradient(circle at 80% 18%, rgba(226, 232, 243, .22), transparent 40%),
            radial-gradient(circle at 52% 48%, rgba(255, 255, 255, .52), transparent 44%);
        opacity: .46;
        animation: none;
    }

    .page-flow-builder .flow-case__hero-gradient > .flow-gradient-glow--mint,
    .page-flow-builder .flow-editorial__gradient-story > .flow-gradient-glow--mint {
        opacity: .04;
        animation: none;
    }

    .page-flow-builder .flow-case__hero-gradient > .flow-gradient-glow--blue {
        opacity: .22;
        animation: none;
    }

    .page-flow-builder .flow-case__hero-gradient .case-study__hero-title {
        font-size: clamp(2.25rem, 10.6vw, 2.8rem);
        line-height: 1.06;
        letter-spacing: -.04em;
        text-wrap: balance;
    }

    .page-flow-builder .flow-case__hero-title-lock {
        white-space: nowrap;
    }

    .page-flow-builder .flow-editorial__gradient-story {
        background:
            radial-gradient(circle at 10% 48%, rgba(204, 216, 244, .30), transparent 44%),
            linear-gradient(180deg, #f7f9fc 0%, #ffffff 54%, #f6f9fc 100%);
    }

    .page-flow-builder .flow-editorial__gradient-story::before {
        background:
            radial-gradient(circle at 14% 72%, rgba(204, 216, 244, .28), transparent 38%),
            radial-gradient(circle at 76% 22%, rgba(228, 234, 244, .24), transparent 40%),
            radial-gradient(circle at 52% 48%, rgba(255, 255, 255, .48), transparent 44%);
        opacity: .48;
        animation: none;
    }

    .page-flow-builder .flow-editorial__gradient-story > .flow-gradient-glow--mint {
        opacity: .08;
        animation: none;
    }

    .page-flow-builder .flow-editorial__gradient-story > .flow-gradient-glow--blue {
        opacity: .24;
        animation: none;
    }

    .page-flow-builder .flow-editorial__feature--typographic .flow-editorial__feature-copy {
        align-items: flex-start;
        text-align: left;
    }

    .page-flow-builder .flow-editorial__feature--typographic .flow-case__section-label,
    .page-flow-builder .flow-editorial__feature--typographic h2,
    .page-flow-builder .flow-editorial__feature--typographic .flow-editorial__feature-copy > p:not(.flow-case__section-label) {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        text-align: left;
    }

    .page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm,
    .page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm-inner {
        min-height: 0;
    }

    /* The assistant is one complete mobile screen: concise copy gets only the
       space it needs and the remaining viewport belongs to the full canvas. */
    .page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm {
        width: 100%;
        height: 100svh;
        height: 100dvh;
        min-height: 100svh;
        min-height: 100dvh;
        max-height: 100dvh;
        box-sizing: border-box;
        align-items: stretch;
        padding: clamp(4.35rem, 10svh, 5rem) 18px 12px;
        overflow: hidden;
    }

    .page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm-inner {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(.6rem, 2svh, 1rem);
    }

    .page-flow-builder .flow-editorial__llm-copy {
        min-height: 0;
        padding: 0;
    }

    .page-flow-builder .flow-editorial__desktop-copy {
        display: none;
    }

    .page-flow-builder .flow-editorial__mobile-copy {
        display: block;
    }

    .page-flow-builder .flow-editorial__llm-copy .flow-case__section-label {
        margin: 0 0 .45rem;
        font-size: clamp(.62rem, 2.8vw, .72rem);
        line-height: 1.2;
        letter-spacing: .11em;
    }

    .page-flow-builder .flow-editorial__llm-copy h2 {
        max-width: 18ch;
        margin: 0;
        font-size: clamp(1.7rem, 8vw, 2.2rem);
        line-height: 1.02;
        letter-spacing: -.045em;
        text-wrap: balance;
    }

    .page-flow-builder .flow-editorial__llm-copy > p.flow-editorial__mobile-copy {
        max-width: 39rem;
        margin: .65rem 0 0;
        color: #718094;
        font-size: clamp(.82rem, 3.7vw, .94rem);
        line-height: 1.42;
        text-wrap: pretty;
    }

    .page-flow-builder .flow-editorial__llm-visual {
        width: 100%;
        height: 100%;
        min-height: 0;
        align-self: stretch;
        border-radius: 12px;
    }

    .page-flow-builder .flow-editorial__chat {
        width: min(88%, 390px);
    }

    .page-flow-builder.flow-motion-ready .flow-editorial__llm-copy > * {
        transform: translate3d(0, 26px, 0);
    }

    .page-flow-builder.flow-motion-ready .flow-editorial__llm-visual {
        transform: translate3d(0, 36px, 0) scale(.96);
    }

    .page-flow-builder.flow-motion-ready .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-copy > *,
    .page-flow-builder.flow-motion-ready .flow-editorial__llm.is-llm-revealed .flow-editorial__llm-visual {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 768px) and (max-height: 600px) {
    .page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm {
        padding-top: 3.9rem;
        padding-bottom: 10px;
    }

    .page-flow-builder .flow-editorial__llm-copy .flow-case__section-label {
        margin-bottom: .3rem;
        font-size: .58rem;
    }

    .page-flow-builder .flow-editorial__llm-copy h2 {
        font-size: clamp(1.45rem, 7.4vw, 1.8rem);
    }

    .page-flow-builder .flow-editorial__llm-copy > p.flow-editorial__mobile-copy {
        margin-top: .4rem;
        font-size: .78rem;
        line-height: 1.32;
    }
}

@media (max-width: 768px) and (max-height: 520px) {
    .page-flow-builder .flow-editorial__chat {
        width: min(96%, 390px);
        padding: 9px;
        border-radius: 18px;
    }

    .page-flow-builder .flow-editorial__chat-thread {
        gap: 6px;
        padding-bottom: 6px;
    }

    .page-flow-builder .flow-editorial__chat-message {
        --bubble-py: 9px;
        --bubble-px: 11px;
        border-radius: 14px;
        font-size: 10.5px;
        line-height: 1.32;
    }

    .page-flow-builder .flow-editorial__chat-result {
        margin-top: 5px;
        font-size: 9.5px;
        line-height: 1.25;
    }

    .page-flow-builder .flow-editorial__chat-composer {
        min-height: 36px;
        padding: 4px 4px 4px 10px;
        border-radius: 12px;
        font-size: 9.5px;
    }

    .page-flow-builder .flow-editorial__chat-send {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 900px) and (max-height: 600px) {
    .page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm {
        height: 100svh;
        height: 100dvh;
        min-height: 100svh;
        min-height: 100dvh;
        box-sizing: border-box;
        padding: 4rem 18px 12px;
        overflow: hidden;
    }

    .page-flow-builder .flow-editorial__gradient-story .flow-editorial__llm-inner {
        height: 100%;
        min-height: 0;
        grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
        align-items: stretch;
        gap: 1rem;
        padding: 0;
    }

    .page-flow-builder .flow-editorial__llm-copy {
        order: -1;
        align-self: center;
        padding: 0;
    }

    .page-flow-builder .flow-editorial__desktop-copy {
        display: none;
    }

    .page-flow-builder .flow-editorial__mobile-copy {
        display: block;
    }

    .page-flow-builder .flow-editorial__llm-copy .flow-case__section-label {
        margin: 0 0 .45rem;
        font-size: .62rem;
    }

    .page-flow-builder .flow-editorial__llm-copy h2 {
        margin: 0;
        font-size: clamp(1.6rem, 4vw, 2rem);
        line-height: 1.02;
    }

    .page-flow-builder .flow-editorial__llm-copy > p.flow-editorial__mobile-copy {
        margin: .6rem 0 0;
        color: #718094;
        font-size: .8rem;
        line-height: 1.35;
    }

    .page-flow-builder .flow-editorial__llm-visual {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-flow-builder .flow-editorial__llm-copy > *,
    .page-flow-builder .flow-editorial__llm-visual,
    .page-flow-builder .flow-editorial__chat,
    .page-flow-builder .flow-editorial__chat-message,
    .page-flow-builder .flow-editorial__chat-result,
    .page-flow-builder .flow-editorial__chat-composer,
    .page-flow-builder .flow-editorial__chat-message--thinking span {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none !important;
        transition: none !important;
    }

    .page-flow-builder .flow-editorial__chat-message--thinking {
        display: none;
    }

    .page-flow-builder .flow-editorial__chat-message--user,
    .page-flow-builder .flow-editorial__chat-message--assistant {
        max-height: none;
        margin-top: var(--bubble-visible-mt);
        padding-top: var(--bubble-py);
        padding-bottom: var(--bubble-py);
        overflow: visible;
    }

    .page-flow-builder .flow-editorial__chat-result {
        max-height: none;
        margin-top: 8px;
        overflow: visible;
    }

    .page-flow-builder .flow-editorial__chat-composer {
        min-height: 44px;
        max-height: none;
        margin-top: 8px;
        padding-top: 7px;
        padding-bottom: 7px;
        overflow: visible;
    }

    .page-flow-builder .flow-case__closing-visual {
        opacity: 1;
        transform: none;
        transition: none;
    }
}