/* Flow layout. Fixed coordinates are reserved for local animation scenes. */
:root { --page-max:1380px; --page-gutter:24px; --page-width:min(var(--page-max), calc(100% - 2 * var(--page-gutter))); }
*,*::before,*::after { box-sizing:border-box; }
body { min-height:100vh; }
/* Clip overshooting carousel tracks/decorations without creating a scroll
   container (overflow:hidden would break the second screen's sticky stage). */
.second-screen,.mcp-section { overflow:clip; }
body > :is(.page-artboard,.second-screen,.third-screen,.third-screen__divider,.third-plus-screen,.fourth-screen,.fifth-screen,.sixth-screen,.seventh-screen,.eighth-screen,.ninth-screen,.ninth-screen__divider),#common-footer.footer-screen { position:relative; inset:auto; width:100%; height:auto; transform:none; margin:0; }
:is(.second-screen__inner,.third-screen__inner,.mcp-section__inner,.fourth-screen__inner,.ninth-screen__inner) { width:var(--page-width); max-width:var(--page-max); height:auto; margin-inline:auto; left:auto; transform:none; }
:is(.hero-frame__rails,.section-spacer__rails,.fifth-screen__rails,.sixth-screen__rails,.comparator__rails) { width:var(--page-width); max-width:var(--page-max); }
.faq-section::before,.sixth-screen__divider::after,.comparator__divider::after,.ninth-screen__divider::before { width:var(--page-width); max-width:var(--page-max); }
:is(h1,h2,h3,p,summary,button,a) { overflow-wrap:break-word; }
:is(.bento-card,.third-card,.editor-features,.fifth-screen__content,.faq-section__heading,.faq-section__list) { min-width:0; }
.page-artboard { min-height:1437px; padding-block:240px 109px; }
.page-mockup { width:100%; height:100%; }
.hero-copy { position:relative; inset:auto; transform:none; }
.hero-copy__title { width:auto; max-width:calc(100% - 48px); white-space:normal; }
.hero-copy__text { width:auto; max-width:calc(100% - 48px); }
.page-artboard > .hero-image { position:relative; inset:auto; width:min(1112px, calc(100% - 48px)); height:auto; aspect-ratio:1112 / 626; margin:78px auto 0; transform:translateY(50px); }
.page-artboard > .hero-image.is-revealed { transform:none; }
.hero-frame__spacer > div { width:calc(var(--page-width) - 2px); }
.hero-nav__inner { width:var(--page-width); max-width:var(--page-max); flex-wrap:wrap; }
.hero-nav,.hero-nav__inner { height:auto; min-height:55px; }
.hero-nav__links { flex-wrap:wrap; height:auto; }
.hero-nav__group { min-height:54px; }
.hero-nav__group > summary,.hero-nav__links > .hero-nav__link { display:flex; align-items:center; min-height:54px; height:auto; }
/* Sticky section retains its intentional scroll runway. */
.second-screen__inner { padding-block:160px 0; }
/* Sticky travel must be in the containing block's content box, not padding.
   The stage occupies this runway while pinned, so it is not visible whitespace. */
.second-screen__scroll-runway { height:calc(1417px + max(34px, (100vh - 897px) / 2)); pointer-events:none; }
.second-screen__title { position:relative; inset:auto; transform:none; width:100%; height:auto; min-height:132px; }
.second-screen__sticky { width:100%; height:auto; min-height:897px; margin-top:43px; }
.feature-tabs { position:relative; inset:auto; transform:none; margin-inline:auto; width:626px; max-width:100%; height:auto; min-height:58px; }
.second-screen__content { position:relative; inset:auto; width:100%; height:auto; min-height:868px; margin-top:-29px; padding:97px 50px; }
.section-carousel { position:relative; inset:auto; transform:none; width:100%; }
.feature-tabs__button { width:auto; min-width:0; flex:1 1 0; height:auto; min-height:52px; white-space:normal; }
.third-screen__inner { padding-top:160px; }
.third-screen__title { position:relative; inset:auto; width:100%; height:auto; min-height:192px; }
.third-screen__content { position:relative; inset:auto; height:auto; min-height:717px; margin-top:56px; display:grid; grid-template-columns:1fr auto; padding-bottom:86px; }
.features-carousel__viewport { position:relative; inset:auto; grid-column:1 / -1; width:100%; }
.third-screen__cards { top:auto; margin-top:49px; padding-right:50px; }
.third-card { width:auto; flex-basis:min(550px,calc(100vw - 2 * var(--page-gutter) - 100px)); }
.third-card__visual { width:100%; height:auto; aspect-ratio:550 / 392; }
.third-card__image,.third-card__foreground { width:100%; height:100%; }
.third-screen .third-screen__cta { position:relative; inset:auto; width:max-content; min-width:115px; height:auto; min-height:42px; padding:10px 20px; margin:38px 0 0 50px; align-self:start; }
.features-carousel__controls { position:relative; inset:auto; margin:43px 50px 0 0; }
body > .third-screen__divider { height:120px; }
.mcp-section__inner { padding-block:160px 99px; }
.mcp-section__heading { position:relative; inset:auto; }
.mcp-section__heading h2 { white-space:normal; }
.mcp-section__status { position:relative; inset:auto; transform:none; width:max-content; max-width:100%; min-height:58px; height:auto; padding-block:14px; margin:110px auto 0; }
.mcp-section__connection-central { position:relative; inset:auto; transform:none; display:block; margin-inline:auto; }
.mcp-section__preview { position:relative; inset:auto; transform:none; width:min(1068px,calc(100% - 100px)); min-height:544px; height:auto; margin-inline:auto; padding:140px 24px; }
.mcp-config { position:relative; inset:auto; transform:none; width:min(454px,100%); margin-inline:auto; }
.mcp-config__header { height:auto; min-height:44px; gap:16px; }
.mcp-config__code { overflow-x:auto; }
.mcp-section__guide { position:relative; inset:auto; margin-top:30px; }
.fourth-screen__inner { padding-block:160px 173px; background-size:1px calc(100% - 120px); }
.fourth-screen::after { top:auto; bottom:120px; }
.fourth-screen__heading { position:relative; inset:auto; }
.fourth-screen__content { position:relative; inset:auto; width:calc(100% - 120px); margin:75px 0 0 5%; grid-template-columns:minmax(0,280fr) minmax(0,908fr); gap:72px; }
.editor-showcase { width:100%; height:auto; aspect-ratio:908 / 652; }
.editor-feature__toggle { height:auto; min-height:38px; }
.editor-feature__icon { flex:none; }
.editor-feature__cta { height:auto; min-height:36px; padding-block:8px; }
.fifth-screen { padding-block:228px 180px; }
.fifth-screen__background { width:100%; height:100%; }
.fifth-screen__rails { height:calc(100% - 120px); }
.fifth-screen__rails::after { top:100%; width:calc(100% + 2px); }
.fifth-screen__background::after { top:auto; bottom:120px; }
.fifth-screen__heading { position:relative; inset:auto; transform:none; width:var(--page-width); margin-inline:auto; }
.fifth-screen__contents { position:relative; inset:auto; transform:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(1280px,calc(100% - 100px)); height:auto; margin:59px auto 0; }
.fifth-screen__content { width:auto; height:auto; min-height:616px; padding-top:485px; contain:layout; }
.fifth-screen__content-title { position:relative; inset:auto; width:100%; height:auto; min-height:131px; padding-bottom:44px; }
.sixth-screen { padding-top:216px; }
.sixth-screen__heading { position:relative; inset:auto; transform:none; width:var(--page-width); margin-inline:auto; }
.sixth-screen__grid { position:relative; inset:auto; transform:none; width:min(1280px,calc(100% - 100px)); margin:72px auto 75px; }
.bento-card { height:auto; min-height:580px; padding-top:68px; display:flex; flex-direction:column; }
.bento-card__image { position:relative; inset:auto; height:auto; aspect-ratio:416 / 384; }
.bento-card--wide .bento-card__image { aspect-ratio:632 / 384; }
.bento-card__copy { position:relative; inset:auto; margin-top:20px; padding:0 30px 26px; }
.bento-iteration { position:relative; inset:auto; width:min(420px,calc(100% - 60px)); height:auto; min-height:312px; margin:22px min(54px,8.55%) 0 auto; }
.bento-iteration__prompt { width:min(252px,100%); }
.bento-iteration__steps li:not(:last-child) { height:auto; min-height:34px; padding-block:5px; }
.bento-iteration__lines > i { max-width:100%; }
.bento-iteration__input { position:relative; inset:auto; width:100%; height:auto; min-height:86px; padding-bottom:46px; margin-top:21px; }
.bento-card--iteration .bento-card__copy { margin-top:70px; }
.sixth-screen__divider,.comparator__divider { position:relative; inset:auto; height:120px; }
.comparator { padding-top:160px; }
.comparator__heading { position:relative; inset:auto; transform:none; width:var(--page-width); margin-inline:auto; }
.comparator__body { position:relative; inset:auto; transform:none; width:var(--page-width); height:auto; min-height:1258px; margin:61px auto 0; padding:94px 110px 95px; }
.comparator__table-wrap { position:relative; inset:auto; transform:none; width:min(936px,100%); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr); }
.comparator table { grid-area:1 / 1; }
.comparator__table-wrap::before { position:relative; inset:auto; grid-area:1 / 1; }
.comparator__highlight,.comparator__table-wrap::after { bottom:0; }
.comparator__feature-col { width:38.6752%; }
.comparator__pixso-col { width:32.265%; }
.comparator__highlight,.comparator__table-wrap::after { left:38.5684%; width:32.265%; }
.comparator th,.comparator td { padding-block:12px; overflow-wrap:anywhere; }
.comparator .comparator__cta { position:relative; inset:auto; grid-area:2 / 1; width:26.28%; margin:27px 0 26px 41.56%; min-height:42px; height:auto; padding:10px; }
.faq-section { min-height:0; }
.faq-section__inner { width:min(1160px,calc(100% - 2 * var(--page-gutter))); padding-inline:clamp(24px,5.73vw,110px); grid-template-columns:minmax(0,400fr) minmax(0,500fr); }
.faq-section__inner::before,.faq-section__inner::after { left:50%; width:min(var(--page-max),calc(100vw - 2 * var(--page-gutter))); transform:translateX(-50%); }
.ninth-screen { padding-block:110px; }
.ninth-screen__inner { position:absolute; inset:0; height:100%; }
.ninth-screen__image { position:relative; inset:auto; width:calc(100% - 60px); height:auto; min-height:797px; margin-inline:auto; transform:none; }
.ninth-screen__content { position:relative; inset:auto; transform:none; width:min(722px,100%); margin-inline:auto; padding-block:180px 278px; }
.ninth-screen__content h2 { position:relative; inset:auto; }
.ninth-screen__prompt { position:relative; inset:auto; transform:none; width:min(514px,calc(100% - 48px)); margin:47px auto 0; }
body > .ninth-screen__divider { height:160px; }
#common-footer.footer-screen { min-height:1317px; padding-inline:max(var(--page-gutter),calc((100% - var(--page-max)) / 2)); }
#common-footer .home-module__mid { flex:1; padding-bottom:369px; }
#common-footer .common-footer__bd { height:auto; min-height:472px; gap:48px; }
#common-footer .common-footer__bd-rt { flex-wrap:wrap; }
#common-footer .common-footer__bd-top { flex-wrap:wrap; gap:32px; }
#common-footer .common-footer__bd-list { max-width:100%; }
#common-footer .common-footer__bd-rt { min-width:0; max-width:100%; }
#common-footer .common-footer__title { max-width:100%; }
.hero-prompt { height:auto; min-height:172px; }
.hero-prompt__tabs { height:auto; min-height:44px; flex-wrap:wrap; }
.hero-prompt__tabs button { white-space:normal; min-height:44px; }
.hero-prompt__field { height:auto; min-height:124px; padding-bottom:46px; }
.hero-prompt textarea { height:auto; min-height:78px; }