/* The final desktop path: current → right → down to the footer. */
.index-path-track {
    position: relative;
    z-index: 5;
}
.index-path-anchor {
    display: none;
}
.index-path-panel--next {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--cap-preview-surface-bg);
}
.index-path-panel--footer .site-footer {
    --footer-cut-bg: var(--cap-preview-surface-bg);
}
.index-path-panel--footer {
    position: relative;
    background: var(--bg-dark);
    overflow: hidden;
    scroll-snap-align: start;
}
.index-path-panel--footer .footer-stars-layer {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at center, rgba(3, 3, 3, 0.64) 0%, rgba(3, 3, 3, 0.36) 46%, transparent 64%),
        url("../images/star-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    pointer-events: none;
}
#index-footer-stars-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
/* Responsive introduction: keep the opening title and the revealed demo distinct. */
#capabilities-preview > .cap-preview-copy {
    container-type: inline-size;
}
#capabilities-preview.is-intro-collapsed > .cap-preview-copy > h2,
#capabilities-preview.is-intro-collapsed > .cap-preview-copy > p {
    width: min(560px, 44%);
    max-width: 100%;
    top: auto;
    text-align: left;
}
#capabilities-preview.is-intro-collapsed > .cap-preview-copy > h2 {
    font-size: clamp(2.06rem, 3.3vw, 3.09rem);
    line-height: 1.12;
    min-height: 0;
}
#capabilities-preview.is-intro-collapsed > .cap-preview-copy > p {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.6;
}
#capabilities-preview .cap-preview-typewriter {
    max-width: 100%;
}
#capabilities-preview .cap-preview-type-line,
#capabilities-preview .cap-preview-lead-line {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}
#capabilities-preview.is-intro-collapsed .cap-preview-typewriter {
    align-items: flex-start;
    text-align: left;
}
#cap-preview-showcase {
    container: najima-showcase / inline-size;
}
#cap-preview-showcase .video-card-inner {
    min-width: 0;
    aspect-ratio: auto;
}
#cap-preview-showcase .video-card-inner > .viewport {
    position: absolute;
    inset: 0;
    min-width: 0;
    aspect-ratio: auto;
}
#cap-preview-showcase[data-najima-layout="scaled"] .viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    transform: scale(var(--najima-scene-scale, 1));
    transform-origin: top left;
}
#cap-preview-showcase[data-najima-layout="compact"] .video-card {
    aspect-ratio: 4 / 5;
    min-height: 440px;
}
#cap-preview-showcase[data-najima-layout="compact"] #najima-primary-sequence {
    top: 50%;
    width: calc(100% - 32px);
    max-width: 420px;
    transform: translate(-50%, -50%);
}
#cap-preview-showcase[data-najima-layout="compact"] #najima-user-card,
#cap-preview-showcase[data-najima-layout="compact"] #najima-reply-card {
    max-width: 94%;
}
/* Fit the desktop demo below the fixed navigation, including at browser zoom. */
@media (min-width: 1025px) {
    #cap-preview-showcase {
        top: calc(50% + var(--najima-nav-height, 76px) / 2);
        width: min(600px, 43vw,
            max(0px, calc(100svh - var(--najima-nav-height, 76px) - 48px)));
    }
    #cap-preview-showcase .video-card {
        top: 0;
    }
}
@media (max-width: 1024px) {
    #capabilities-preview.is-intro-collapsed {
        height: auto;
        min-height: 100svh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(1.5rem, 4svh, 2.5rem);
        padding: calc(84px + 2rem) 5vw 3rem;
    }
    #capabilities-preview.is-intro-collapsed > .cap-preview-copy {
        width: min(100%, 560px);
        height: auto;
        padding: 0;
        overflow: visible;
        align-items: center;
        text-align: center;
    }
    #capabilities-preview.is-intro-collapsed > .cap-preview-copy > h2,
    #capabilities-preview.is-intro-collapsed > .cap-preview-copy > p {
        width: 100%;
        text-align: center;
    }
    #capabilities-preview.is-intro-collapsed > .cap-preview-copy > h2 {
        font-size: clamp(1.65rem, 8cqw, 2.6rem);
        margin-bottom: 1.25rem;
    }
    #capabilities-preview.is-intro-collapsed > .cap-preview-copy > p {
        font-size: clamp(1rem, 4.2cqw, 1.25rem);
    }
    #capabilities-preview.is-intro-collapsed .cap-preview-typewriter {
        align-items: center;
        text-align: center;
    }
    #capabilities-preview.is-intro-collapsed .cap-preview-lead-line {
        margin-inline: auto;
    }
    #capabilities-preview.is-intro-collapsed #cap-preview-showcase {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 600px);
        transform: none;
        flex: none;
    }
    #capabilities-preview.is-intro-collapsed #cap-preview-showcase .video-card {
        top: 0;
    }
}
/* Mirror the collapsed preview stage with the original 680 × 390 catalog. */
#index-final-section {
    position: relative;
    height: 100vh;
    height: 100svh;
    font-family: var(--font-google-sans-flex);
    isolation: isolate;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.index-final-showcase {
    position: absolute;
    top: calc(50% + 20px);
    left: calc(max(0px, (100% - 1758px) / 2) + 4vw);
    width: min(680px, 43vw);
    height: auto;
    aspect-ratio: 680 / 390;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}
.index-final-showcase > .catalog-demo-showcase-card {
    position: absolute;
    top: 0;
    left: 0;
}
/* Keep names and prices readable when the catalog itself has little room. */
.index-final-showcase[data-catalog-layout="compact"] {
    aspect-ratio: 6 / 5;
    container-type: inline-size;
}
.index-final-showcase[data-catalog-layout="compact"] > .catalog-demo-showcase-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
    transform: none;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-mini-site {
    display: flex;
    flex-direction: column;
    padding: 12px clamp(12px, 4cqw, 20px) 20px;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-site-navbar {
    flex: 0 0 clamp(60px, 19cqw, 88px);
    height: auto;
    padding: 0 30px;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-site-logo {
    width: min(100%, 180px);
    height: 60px;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-site-bag {
    right: 6px;
    top: 50%;
    width: 22px;
    height: 22px;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-products {
    position: relative;
    top: auto;
    left: auto;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 2cqw, 10px);
    transform: none;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-product-card {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 4px 6px 10px;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-product-image-box {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 0;
    height: auto;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-product-image-box img {
    position: absolute;
    inset: 0;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-product-info {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 6px;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-product-name {
    font-size: clamp(11px, 2.8cqw, 13px);
    line-height: 1.3;
    min-height: 2.6em;
    white-space: normal;
    overflow-wrap: anywhere;
}
.index-final-showcase[data-catalog-layout="compact"] .catalog-demo-product-price {
    font-size: clamp(11px, 2.8cqw, 13px);
    line-height: 1.3;
}
#index-final-section > .index-final-copy {
    width: 100%;
    max-width: 1758px;
    height: 100%;
    margin-inline: auto;
    padding-block: 0;
    padding-inline: 4vw;
    align-items: flex-end;
    opacity: 1;
    filter: none;
}
.index-final-copy-content {
    width: min(560px, 44%);
    min-width: 0;
    container-type: inline-size;
}
.index-final-copy-content > h2,
.index-final-copy-content > p {
    width: 100%;
    max-width: 100%;
    opacity: 1;
    transform: none;
}
.index-final-copy-content > h2 {
    min-height: 0;
    font-size: clamp(2.06rem, 3.3vw, 3.09rem);
    line-height: 1.12;
    margin-bottom: clamp(1rem, 4.3cqw, 1.5rem);
}
.index-final-copy-content > p {
    color: #424242;
    font-family: var(--font-google-sans-flex);
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.6;
    text-wrap: pretty;
}
.index-final-copy .cap-preview-typewriter {
    display: flex;
    max-width: 100%;
}
.index-final-copy .cap-preview-type-line {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}
@media (max-width: 1024px) {
    #index-final-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(1.5rem, 4svh, 2.5rem);
        height: auto;
        min-height: 100svh;
        padding: calc(84px + 2rem) 5vw 3rem;
    }
    #index-final-section > .index-final-copy {
        order: 0;
        height: auto;
        padding: 0;
        overflow: visible;
        align-items: center;
        text-align: center;
    }
    .index-final-copy-content {
        width: min(100%, 560px);
    }
    .index-final-copy-content > h2 {
        margin-bottom: 1.25rem;
        font-size: clamp(1.65rem, 8cqw, 2.6rem);
        line-height: 1.15;
    }
    .index-final-copy .cap-preview-typewriter {
        align-items: center;
        text-align: center;
    }
    .index-final-copy .cap-preview-type-line {
        white-space: normal;
    }
    .index-final-showcase {
        order: 1;
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 680px);
        flex: none;
        transform: none;
    }
    .index-final-copy-content > p {
        font-size: clamp(1rem, 4.2cqw, 1.25rem);
    }
}
@media (min-width: 1025px) {
    .index-path-track.is-horizontal {
        height: var(--index-path-height, 300vh);
    }
    .index-path-track.is-horizontal .index-path-anchor {
        position: absolute;
        display: block;
        width: 1px;
        height: 1px;
        left: 0;
        top: 0;
        pointer-events: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .index-path-track.is-horizontal #index-path-next {
        top: var(--index-path-viewport-height, 100vh);
    }
    .index-path-track.is-horizontal #index-path-footer {
        top: calc(var(--index-path-viewport-height, 100vh) * 2);
    }
    .index-path-track.is-horizontal .index-path-sticky {
        position: sticky;
        top: 0;
        width: 100%;
        height: var(--index-path-viewport-height, 100vh);
        overflow: hidden;
    }
    .index-path-track.is-horizontal .index-path-inner {
        position: relative;
        width: 200%;
        height: var(--index-path-inner-height, 200vh);
        will-change: transform;
    }
    .index-path-track.is-horizontal .index-path-panel {
        position: absolute;
        width: 50%;
        height: var(--index-path-viewport-height, 100vh);
        left: 0;
        top: 0;
        overflow: hidden;
    }
    .index-path-track.is-horizontal .index-path-panel--current > section {
        height: 100%;
        scroll-snap-align: none;
    }
    .index-path-track.is-horizontal .index-path-panel--next {
        left: 50%;
    }
    .index-path-track.is-horizontal .index-path-panel--footer {
        left: 50%;
        top: var(--index-path-viewport-height, 100vh);
        height: auto;
        min-height: var(--index-path-viewport-height, 100vh);
    }
    .index-path-track.is-horizontal #footer {
        scroll-snap-align: none;
    }
}