/* Mobile layout — cards, spacing, scroll sections */

.mobile-dynamic-island-bar {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --hero-scroll-height: 240vh;
        --feature-card-width: 80vw;
        --feature-card-height: calc(var(--feature-card-width) * 5 / 4);
        --section-pad-y: 56px;
        --content-heading-width: 92%;
        --mobile-demo-bar-height: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    body,
    main {
        overflow-x: visible;
    }

    main {
        text-align: center;
        padding-bottom: var(--mobile-demo-bar-height);
    }

    .section-title,
    .section-subtitle,
    .content-section,
    .content-section__heading,
    .content-section__col,
    .content-section__title,
    .content-section__body,
    .content-section__eyebrow,
    .sync-section,
    .sync-section__heading,
    .sync-section__title,
    .sync-section__subtitle,
    .vision-block,
    .vision-block__body,
    .layer-catalog-section,
    .nav-mega-panel,
    .nav-mega-panel__column,
    .nav-mega-panel__label,
    .nav-mega-panel__link,
    .loader-content {
        text-align: center;
    }

    .pricing-section .pricing-config-layout,
    .pricing-section .pricing-config-list,
    .pricing-section .pricing-seat-options {
        text-align: left;
    }

    .pricing-section .pricing-config-item__header,
    .pricing-section .pricing-config-item__intro,
    .pricing-section .pricing-config-item__title,
    .pricing-section .pricing-config-item__subtitle {
        text-align: center;
    }

    .content-section__heading {
        justify-items: center;
    }

    .content-section__col--secondary {
        align-self: center;
    }

    .sync-cards-controls,
    .layer-catalog-cards-controls {
        justify-content: center;
    }

    .section-title {
        white-space: normal;
    }

    nav.site-nav {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: 1fr;
        align-items: center;
        padding: 14px 16px;
        text-align: left;
        animation: none;
        opacity: 1;
    }

    /* transform on position:fixed breaks pinning in Chrome mobile */
    header.site-header {
        transform: none;
        animation: none;
    }

    nav.site-nav .menu {
        justify-content: flex-end;
        text-align: right;
        gap: 16px;
        font-size: clamp(0.9375rem, 3.6vw, 1.0625rem);
    }

    .nav-mega-panel__label {
        font-size: clamp(0.8125rem, 3vw, 0.875rem);
    }

    .nav-mega-panel__link {
        padding: 12px 0;
    }

    .nav-mega-panel__link-title {
        font-size: clamp(1.0625rem, 4.2vw, 1.1875rem);
    }

    .nav-mega-panel__link-desc {
        font-size: clamp(0.9375rem, 3.6vw, 1rem);
    }

    .menu > li:last-child {
        display: none;
    }

    .mobile-dynamic-island-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        justify-content: center;
        align-items: center;
        padding: 0 20px calc(12px + env(safe-area-inset-bottom, 0px));
        background: none;
        pointer-events: none;
    }

    .mobile-dynamic-island {
        --island-action-height: 40px;
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .mobile-dynamic-island__stack {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: stretch;
    }

    .mobile-dynamic-island__pricing-total {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        width: min(calc(100vw - 40px), 300px);
        padding: 10px 20px;
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
            0 4px 24px rgba(18, 18, 18, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.55);
        box-sizing: border-box;
        font: inherit;
        color: inherit;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) scale(0.84) translateY(10px);
    }

    .mobile-dynamic-island__pricing-total:focus-visible {
        outline: 2px solid rgba(18, 18, 18, 0.35);
        outline-offset: 3px;
    }

    .mobile-dynamic-island__pricing-total--visible {
        visibility: visible;
        pointer-events: auto;
    }

    @keyframes mobile-pricing-total-pop-in {
        0% {
            opacity: 0;
            transform: translateX(-50%) scale(0.84) translateY(10px);
        }

        65% {
            opacity: 1;
            transform: translateX(-50%) scale(1.04) translateY(0);
        }

        100% {
            opacity: 1;
            transform: translateX(-50%) scale(1) translateY(0);
        }
    }

    .mobile-dynamic-island__pricing-total--pop {
        transform-origin: center bottom;
        animation: mobile-pricing-total-pop-in 0.48s var(--easing) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-dynamic-island__pricing-total--visible {
            opacity: 1;
            transform: translateX(-50%);
        }

        .mobile-dynamic-island__pricing-total--pop {
            animation: none;
        }
    }

    .mobile-dynamic-island__pricing-intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex-shrink: 0;
    }

    .mobile-dynamic-island__pricing-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.3;
        color: var(--colorBlack);
        text-align: left;
    }

    .mobile-dynamic-island__pricing-popup-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        display: block;
    }

    .mobile-dynamic-island__pricing-details {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }

    .mobile-dynamic-island__pricing-amount {
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.3;
        color: var(--colorBlack);
        text-align: right;
        white-space: nowrap;
    }

    .mobile-dynamic-island__pricing-vat {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.35;
        color: rgba(18, 18, 18, 0.58);
        text-align: right;
    }

    .mobile-dynamic-island__pricing-hint {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.35;
        color: rgba(18, 18, 18, 0.58);
        text-align: left;
    }

    .mobile-dynamic-island--has-back {
        gap: 8px;
        padding: 6px 8px 6px 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow:
            0 4px 24px rgba(18, 18, 18, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.55);
        transition: gap 0.28s ease, padding 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
    }

    .mobile-dynamic-island__back {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--island-action-height);
        height: var(--island-action-height);
        padding: 0;
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.08);
        cursor: pointer;
    }

    .mobile-dynamic-island__back[hidden] {
        display: none;
    }

    .mobile-dynamic-island__back-icon {
        width: 18px;
        height: 18px;
        transform: rotate(90deg);
        opacity: 0.82;
    }

    .mobile-dynamic-island__demo-slot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-dynamic-island-bar .demo-button,
    .mobile-dynamic-island-bar .demo-button.demo-button--docked-closed,
    .demo-button--docked-closed {
        pointer-events: auto;
        background-color: var(--colorBlue);
        color: var(--colorWhite);
        height: var(--island-action-height, 40px);
        padding: 0 24px 0 16px;
        border: none;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font: inherit;
        cursor: pointer;
        box-sizing: border-box;
    }

    .mobile-dynamic-island-bar .demo-button .icon,
    .demo-button--docked-closed .icon {
        width: 15px;
        height: 15px;
        margin: 0;
        flex-shrink: 0;
    }

    .mobile-dynamic-island-bar .demo-button p,
    .demo-button--docked-closed p {
        margin: 0;
        white-space: nowrap;
        line-height: 1;
    }

    .nav-mega-panel__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .nav-mega-panel__contact-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px 24px;
        margin-top: 10px;
        padding-top: 10px;
    }

    .nav-mega-panel__contact-label,
    .nav-mega-panel__contact-actions .nav-mega-panel__link,
    .nav-mega-panel__contact-actions .nav-mega-panel__link-title {
        font-size: 0.95rem;
    }

    .nav-mega-panel__contact-actions {
        align-items: flex-end;
    }

    .nav-mega-panel__contact-actions .nav-mega-panel__socials {
        justify-content: flex-end;
    }

    .nav-mega-panel__section {
        padding: 16px 40px 44px;
    }

    .hero-scroll-sequence {
        height: var(--hero-scroll-height);
        overflow: visible;
        z-index: 0;
    }

    .hero-scroll-sequence--mobile .hero-scroll-sequence__sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
        height: var(--app-height, 100dvh);
        overflow: hidden;
        background: transparent;
    }

    .hero-scroll-sequence--mobile .hero-scroll-sequence__stage {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        aspect-ratio: unset;
    }

    .hero-scroll-sequence--mobile .hero-canvas {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transform: none;
        animation: loadComplete-heroCanvasMobile 2s var(--easing) forwards;
        animation-delay: calc(var(--loadingDuration) + var(--loadingDelay));
    }

    .hero-scroll-sequence--mobile .hero-canvas.hero-canvas--ready {
        opacity: 1;
        animation: none;
    }

    @keyframes loadComplete-heroCanvasMobile {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .hero-scroll-sequence--mobile .hero-title-zone {
        z-index: 2;
    }

    .hero-title-zone {
        height: auto;
        align-items: flex-start;
        padding: calc(env(safe-area-inset-top, 0px) + 80px) 16px 0;
    }

    .hero-copy-blur.gradient-blur {
        height: 22vh;
    }

    .hero-copy__inner {
        transform: translateY(16px);
    }

    @keyframes heroCopyEnter {
        0% {
            opacity: 0;
            transform: translateY(16px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero-scroll-sequence:not(.hero-scroll-sequence--mobile) .hero-canvas {
        transform: translateY(48px);
    }

    @keyframes loadComplete-heroCanvas {
        0% {
            opacity: 0;
            transform: translateY(48px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .sync-section {
        position: relative;
        z-index: 2;
        padding-bottom: 64px;
    }

    .sync-section__heading {
        position: relative;
        z-index: 1;
        margin: -12vh auto 72px;
        padding: 0 20px 48px;
        max-width: none;
    }

    .sync-section__title {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }

    .vision-block {
        padding: 7vh 32px 5vh;
    }

    .vision-block__content {
        gap: 18px;
        max-width: none;
    }

    .vision-block__title {
        display: block;
        width: 100%;
        font-size: clamp(1.625rem, 8.5vw, 2.25rem);
    }

    .vision-block__title > br {
        display: block;
    }

    .vision-block__body {
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .slot-counter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 56px;
        max-width: none;
        margin-top: 32px;
    }

    .slot-counter-block:nth-child(3) {
        grid-column: 1 / -1;
    }

    .slot-counter-row {
        font-size: clamp(2.5rem, 16vw, 3.75rem);
    }

    .slot-counter-block--compact .slot-counter-row {
        font-size: clamp(1.25rem, 8vw, 1.875rem);
    }

    .slot-counter__caption {
        font-size: 0.875rem;
        max-width: none;
        padding-inline: 8px;
    }

    .sync-cards-controls,
    .layer-catalog-cards-controls,
    .data-frames-wrap .sync-cards-controls,
    .simplicity-frames-wrap .sync-cards-controls {
        padding: 0 16px 10px;
    }

    .sync-cards,
    .layer-catalog-cards,
    .data-frames,
    .simplicity-frames {
        gap: 12px;
        scroll-padding-inline: 10vw;
        padding: 4px 10vw 12px;
    }

    .sync-section__band > .sync-cards-wrap {
        padding-bottom: 40px;
    }

    .sync-card,
    .layer-catalog-card,
    .data-frame-card,
    .simplicity-frame-card {
        border-radius: 20px;
        scroll-snap-align: center;
    }

    .data-section .data-frame-card {
        width: 120vw;
    }

    .sync-card__content,
    .sync-card__title,
    .sync-card__subtitle,
    .layer-catalog-card__title-area {
        justify-content: flex-start;
        text-align: left;
    }

    .layer-catalog-card__title-area .content-section__title {
        text-align: left;
    }

    .sync-card__content {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .sync-card__pill {
        top: 12px;
        left: 12px;
        padding: 6px 12px;
        font-size: 0.8125rem;
    }

    .sync-card__title {
        font-size: clamp(1.15rem, 4.2vw, 1.35rem);
        line-height: 1.3;
    }

    .sync-card__subtitle {
        font-size: clamp(0.9375rem, 3.4vw, 1.0625rem);
        line-height: 1.45;
    }

    .content-section {
        padding: var(--section-pad-y) 0;
    }

    .content-section__heading {
        width: var(--content-heading-width);
        gap: 18px;
    }

    .customisation-section .content-section__heading,
    .data-section .content-section__heading,
    .palette-section .content-section__heading,
    .simplicity-section .content-section__heading {
        margin-bottom: 36px;
    }

    .faq-section .content-section__heading {
        margin-bottom: 0;
    }

    .faq-section__layout {
        gap: 36px;
    }

    .content-section__title {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .content-section__body {
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .viewport-scroll-sequence--80vw {
        width: calc(100% - 32px);
        max-width: none;
        border-radius: 18px;
    }

    /* Palette mobile still — 80vw wide, height from image aspect ratio (800×1071). */
    .palette-section {
        overflow: visible;
    }

    .palette-frame-mobile-clip {
        --palette-mobile-aspect-ratio: 800 / 1071;

        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
        position: relative;
        isolation: isolate;
        border-radius: 0;
    }

    .palette-frame-mobile {
        display: block;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 80vw;
        margin: 0 auto;
        border-radius: 0;
    }

    .palette-frame-mobile__image {
        width: 100%;
        height: auto;
        aspect-ratio: var(--palette-mobile-aspect-ratio);
    }

    .palette-section .viewport-scroll-sequence--80vw {
        display: none;
    }

    /* Customisation scroll (animation 2) — full-bleed vw width; do not reuse palette vars above. */
    .customisation-section {
        overflow: hidden;
        --customisation-sequence-width: 140vw;
    }

    .customisation-viewport-clip {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        height: 52vh;
        overflow: hidden;
        position: relative;
        isolation: isolate;
    }

    .customisation-section .viewport-scroll-sequence {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--customisation-sequence-width);
        max-width: none;
        margin: 0;
        height: auto;
        aspect-ratio: var(--viewport-sequence-aspect, 16 / 10);
        border-radius: 0;
        overflow: hidden;
    }

    .customisation-section .viewport-scroll-sequence__canvas {
        width: 100%;
        height: 100%;
    }

    .data-frames-wrap {
        display: block;
    }

    .simplicity-frames-wrap {
        display: none;
    }

    .simplicity-mobile-animations {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .simplicity-mobile-animations__item {
        width: 90vw;
        margin: 0;
        border-radius: 20px;
        overflow: hidden;
        background-color: var(--colorWhite);
    }

    .simplicity-mobile-animations__item:first-child {
        width: 90vw;
    }

    .simplicity-mobile-animations__image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 1080;
        object-fit: contain;
        object-position: center center;
    }

    .simplicity-mobile-animations__item:first-child .simplicity-mobile-animations__image {
        aspect-ratio: 1600 / 1080;
    }

    .data-scroll-sequence,
    .simplicity-scroll-sequence {
        display: none;
    }

    .data-scroll-sequence__stage,
    .simplicity-scroll-sequence__stage {
        border-radius: 18px;
    }

    .founder-quote {
        width: 90vw;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(1rem, 4vw, 2rem);
        align-items: start;
        padding-top: clamp(8rem, 25vh, 15rem);
        padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
    }

    .founder-quote__main {
        display: contents;
    }

    .founder-quote__text {
        grid-column: 1 / -1;
    }

    .founder-quote__manifesto-btn {
        grid-column: 1;
        justify-self: start;
        align-self: start;
        margin-top: clamp(1.25rem, 4vh, 2rem);
        text-align: left;
        max-width: 100%;
    }

    .founder-quote__manifesto-copy {
        text-align: left;
    }

    .founder-quote__manifesto-eyebrow {
        font-size: clamp(0.8125rem, 3.2vw, 0.9375rem);
    }

    .founder-quote__attribution {
        grid-column: 2;
        justify-self: end;
        align-self: start;
        align-items: flex-end;
        text-align: right;
        white-space: normal;
        margin-top: clamp(1.25rem, 4vh, 2rem);
    }

    .founder-quote__manifesto-title {
        white-space: normal;
        font-size: clamp(0.9375rem, 3.8vw, 1.0625rem);
    }

    .layer-catalog-section {
        padding-bottom: var(--mobile-demo-bar-height, 0px);
    }

    .loader {
        pointer-events: none;
    }

    .layer-catalog-card,
    .layer-catalog-cards .sync-card {
        width: var(--feature-card-width);
        border-radius: 20px;
    }

    .layer-catalog-card__title-area .content-section__title {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
    }

    .layer-catalog-card__icons-layer {
        --layer-catalog-grid-pad: 10px;
        --layer-catalog-grid-gap: 5px;
    }
}

@media (max-width: 480px) {
    :root {
        --hero-scroll-height: 200vh;
        --section-pad-y: 48px;
    }
}