/* =========================================================
   AppCloud landing pro final layer
   ========================================================= */

.home-v4.home-v4-commercial-order {
    display: flex !important;
    flex-direction: column !important;
}

.home-v4-commercial-order .home-hero { order: 1 !important; }
.home-v4-commercial-order .home-problem-solution-section { order: 2 !important; }
.home-v4-commercial-order .home-launch-section { order: 3 !important; }
.home-v4-commercial-order .home-tools-section { order: 4 !important; }
.home-v4-commercial-order .home-flow-section { order: 5 !important; }
.home-v4-commercial-order .home-product-demo-section { order: 6 !important; }
.home-v4-commercial-order .home-catalog-section { order: 7 !important; }
.home-v4-commercial-order .home-integrations-section { order: 8 !important; }
.home-v4-commercial-order .home-trust-section { order: 9 !important; }
.home-v4-commercial-order .home-industries-section { order: 10 !important; }
.home-v4-commercial-order .home-users-section { order: 11 !important; }
.home-v4-commercial-order .home-pricing-section { order: 12 !important; }
.home-v4-commercial-order .home-faq-section { order: 13 !important; }
.home-v4-commercial-order .home-final-section { order: 14 !important; }

.home-v4 {
    --pro-radius-xs: 12px;
    --pro-radius-sm: 16px;
    --pro-radius-md: 20px;
    --pro-radius-lg: 24px;
    --pro-radius-xl: 28px;
}

.home-v4 .home-hero-grid {
    grid-template-columns:
        minmax(650px, 1.32fr)
        minmax(390px, .78fr) !important;
    grid-template-areas:
        "product copy"
        "product conversion" !important;
    column-gap: clamp(2.4rem, 4vw, 5rem) !important;
}

.home-v4 .home-product-scene {
    grid-area: product !important;
}

.home-v4 .home-hero-copy {
    grid-area: copy !important;
    align-self: end !important;
}

.home-v4 .home-hero-conversion {
    grid-area: conversion !important;
    align-self: start !important;
}

.home-v4 [data-aos] {
    transition-duration: .55s !important;
    transition-timing-function: cubic-bezier(.2, .75, .2, 1) !important;
}

.home-v4 .home-btn,
.home-v4 .home-actions .home-btn,
.home-v4 .home-product-demo-tab,
.home-v4 .home-business-tab {
    border-radius: var(--pro-radius-sm) !important;
}

.home-v4 .home-laptop-screen,
.home-v4 .home-platform-card,
.home-v4 .home-flow-grid article,
.home-v4 .home-benefit-strip > div,
.home-v4 .home-product-demo,
.home-v4 .home-product-demo-stage,
.home-v4 .home-product-demo-browser,
.home-v4 .home-catalog-device,
.home-v4 .home-online-payments,
.home-v4 .home-integration-card,
.home-v4 .home-integration-core,
.home-v4 .home-trust-panel,
.home-v4 .home-business-shell,
.home-v4 .home-business-copy,
.home-v4 .home-business-visual,
.home-v4 .home-user-grid article,
.home-v4 .home-pricing-card,
.home-v4 .home-plan-compare,
.home-v4 .home-faq-list details,
.home-v4 .home-final-cta {
    border-radius: var(--pro-radius-lg) !important;
}

.home-v4 .home-phone,
.home-v4 .home-catalog-showcase,
.home-v4 .home-order-pop {
    border-radius: var(--pro-radius-xl) !important;
}

.home-v4 .home-checks span,
.home-v4 .home-screen-indicators,
.home-v4 .home-scene-badges span,
.home-v4 .home-platform-category,
.home-v4 .home-section-heading > span,
.home-v4 .home-catalog-copy > span,
.home-v4 .home-business-copy > span {
    border-radius: 999px !important;
}

.home-v4 .home-phone {
    overflow: hidden !important;
}

.home-v4 .home-phone-screen {
    position: absolute !important;
    inset: 7px !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: calc(var(--pro-radius-xl) - 7px) !important;
}

.home-v4 .home-mobile-carousel,
.home-v4 .home-mobile-carousel .home-device-slide {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.home-v4 .home-mobile-carousel .home-device-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

.home-v4 .home-phone-notch {
    z-index: 20 !important;
    pointer-events: none !important;
}

@media (max-width: 1180px) {
    .home-v4 .home-hero-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "product"
            "copy"
            "conversion" !important;
        row-gap: 1.55rem !important;
    }

    .home-v4 .home-product-scene {
        width: min(100%, 860px) !important;
        margin: 0 auto !important;
    }

    .home-v4 .home-hero-copy,
    .home-v4 .home-hero-conversion {
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .home-v4 .home-hero-copy h1,
    .home-v4 .home-hero-copy p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 700px) {
    .home-v4 .home-hero {
        align-items: flex-start !important;
        padding-top: 1.25rem !important;
    }

    .home-v4 .home-hero-grid {
        grid-template-areas:
            "product"
            "copy"
            "conversion" !important;
        row-gap: 1.25rem !important;
    }

    .home-v4 .home-product-scene {
        min-height: clamp(285px, 72vw, 410px) !important;
        margin-top: 0 !important;
        align-self: start !important;
    }

    .home-v4 .home-phone {
        right: 3% !important;
        bottom: 20px !important;
        width: clamp(88px, 24vw, 112px) !important;
        padding: 0 !important;
        border-radius: 24px !important;
    }

    .home-v4 .home-phone-screen {
        inset: 6px !important;
        border-radius: 19px !important;
    }

    .home-v4 .home-phone-notch {
        top: 10px !important;
        width: 44% !important;
        height: 9px !important;
        border-radius: 999px !important;
    }
}

@media (max-width: 420px) {
    .home-v4 .home-product-scene {
        min-height: clamp(260px, 70vw, 335px) !important;
    }

    .home-v4 .home-phone {
        right: 2% !important;
        bottom: 16px !important;
        width: clamp(80px, 24vw, 96px) !important;
    }

    .home-v4 .home-phone-screen {
        inset: 5px !important;
        border-radius: 17px !important;
    }
}


/* =========================================================
   NAVBAR SOFT CORNERS
   ========================================================= */

.navbar-menu-pro {
    border-radius: var(--site-radius-panel, 24px) !important;
}

.navbar-menu-pro .nav-link-app {
    border-radius: var(--site-radius-control, 18px) !important;
}

.navbar-actions-pro .btn-demo-pro,
.navbar-actions-pro .btn-login-pro,
.navbar-actions-pro .site-theme-toggle,
.navbar-actions-pro .mobile-menu-btn-pro {
    border-radius: var(--site-radius-control, 18px) !important;
}

@media (max-width: 680px) {
    .navbar-menu-pro {
        border-radius: var(--site-radius-panel, 24px) !important;
    }

    .navbar-menu-pro .nav-link-app,
    .navbar-actions-pro .site-theme-toggle,
    .navbar-actions-pro .btn-login-pro,
    .navbar-actions-pro .mobile-menu-btn-pro {
        border-radius: var(--site-radius-control, 18px) !important;
    }
}


/* =========================================================
   HERO PRO POLISH
   ========================================================= */

.home-v4 .home-hero {
    min-height: calc(100svh - var(--site-nav-height, 82px)) !important;
    padding: clamp(44px, 6vh, 68px) 0 clamp(52px, 7vh, 76px) !important;
}

.home-v4 .home-hero-grid {
    width: min(1380px, calc(100% - 72px)) !important;
    grid-template-columns: minmax(620px, 1.1fr) minmax(500px, .9fr) !important;
    grid-template-areas:
        "product copy"
        "product conversion" !important;
    column-gap: clamp(64px, 6vw, 104px) !important;
    row-gap: 24px !important;
    align-items: center !important;
}

.home-v4 .home-product-scene {
    grid-area: product !important;
    min-height: clamp(500px, 58vh, 640px) !important;
    padding-right: clamp(28px, 4vw, 72px) !important;
    align-self: center !important;
}

.home-v4 .home-laptop {
    width: min(100%, 830px) !important;
}

.home-v4 .home-hero-copy,
.home-v4 .home-hero-conversion {
    width: 100% !important;
    max-width: 540px !important;
    justify-self: start !important;
    position: relative !important;
    z-index: 40 !important;
}

.home-v4 .home-hero-copy {
    align-self: end !important;
}

.home-v4 .home-hero-conversion {
    align-self: start !important;
}

.home-v4 .home-hero-copy h1 {
    max-width: 540px !important;
    margin: 0 !important;
    color: #10243d !important;
    font-size: clamp(56px, 4.35vw, 72px) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    font-weight: 900 !important;
    text-wrap: balance !important;
}

.home-v4 .home-hero-copy h1 span {
    display: block !important;
    color: inherit !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}

.home-v4 .home-hero-copy p {
    max-width: 520px !important;
    margin-top: 26px !important;
    color: #4f657d !important;
    font-size: 18px !important;
    line-height: 1.58 !important;
    font-weight: 700 !important;
}

.home-v4 .home-checks {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    max-width: 500px !important;
    margin: 0 0 18px !important;
}

.home-v4 .home-checks span {
    min-height: 44px !important;
    padding: 0 16px !important;
    color: #13283f !important;
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid rgba(32, 82, 126, .12) !important;
    box-shadow: 0 12px 30px rgba(27, 65, 98, .09) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.home-v4 .home-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: min(100%, 430px) !important;
    margin: 0 !important;
}

.home-v4 .home-actions .home-btn {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    justify-content: center !important;
    border-radius: var(--site-radius-control, 18px) !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.home-v4 .home-phone {
    right: clamp(22px, 4vw, 66px) !important;
    bottom: clamp(26px, 4vh, 46px) !important;
    width: clamp(118px, 10vw, 152px) !important;
    height: auto !important;
    aspect-ratio: 9 / 19.5 !important;
    z-index: 14 !important;
}

.home-v4 .home-floating-card {
    min-width: 148px !important;
    border-radius: var(--site-radius-control, 18px) !important;
}

.home-v4 .home-floating-sales {
    top: 11% !important;
    left: 2% !important;
}

.home-v4 .home-floating-orders {
    top: 13% !important;
    right: clamp(52px, 7vw, 104px) !important;
}

.home-v4 .home-floating-stock {
    bottom: 13% !important;
    left: 11% !important;
}

.home-v4 .home-scene-badges {
    right: auto !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
}

.home-v4 .home-screen-indicators {
    bottom: 36px !important;
}

@media (min-width: 1500px) {
    .home-v4 .home-hero-grid {
        grid-template-columns: minmax(760px, 1.16fr) minmax(540px, .84fr) !important;
    }
}

@media (max-width: 1280px) {
    .home-v4 .home-hero-grid {
        width: min(1220px, calc(100% - 48px)) !important;
        grid-template-columns: minmax(560px, 1fr) minmax(440px, .86fr) !important;
        column-gap: 46px !important;
    }

    .home-v4 .home-hero-copy h1 {
        font-size: clamp(50px, 4.7vw, 64px) !important;
    }

    .home-v4 .home-hero-copy p {
        font-size: 17px !important;
    }
}

@media (max-width: 1180px) {
    .home-v4 .home-hero-grid {
        width: min(920px, calc(100% - 36px)) !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "product"
            "copy"
            "conversion" !important;
        row-gap: 26px !important;
    }

    .home-v4 .home-product-scene {
        width: 100% !important;
        padding-right: 0 !important;
    }

    .home-v4 .home-hero-copy,
    .home-v4 .home-hero-conversion {
        max-width: 720px !important;
        justify-self: center !important;
        text-align: center !important;
    }

    .home-v4 .home-hero-copy h1,
    .home-v4 .home-hero-copy p,
    .home-v4 .home-checks,
    .home-v4 .home-actions {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .home-v4 .home-checks {
        justify-content: center !important;
    }
}

@media (max-width: 700px) {
    .home-v4 .home-hero {
        overflow: hidden !important;
        padding: 16px 0 44px !important;
    }

    .home-v4 .home-hero-grid {
        width: min(100% - 32px, 540px) !important;
        row-gap: 20px !important;
        overflow: visible !important;
    }

    .home-v4 .home-product-scene {
        width: 100% !important;
        min-height: clamp(245px, 58vw, 320px) !important;
        overflow: hidden !important;
        padding: 0 0 24px !important;
        border-radius: 0 !important;
    }

    .home-v4 .home-laptop {
        width: 100% !important;
        max-width: 520px !important;
        transform: none !important;
    }

    .home-v4 .home-laptop-screen {
        padding: 5px !important;
        border-radius: 18px 18px 9px 9px !important;
    }

    .home-v4 .home-laptop-base {
        height: 11px !important;
        margin-top: -1px !important;
    }

    .home-v4 .home-phone {
        right: clamp(4px, 2.8vw, 16px) !important;
        bottom: clamp(30px, 7vw, 42px) !important;
        width: clamp(72px, 18.5vw, 92px) !important;
        height: auto !important;
        aspect-ratio: 9 / 19.5 !important;
        padding: 4px !important;
        border-radius: 21px !important;
        transform: none !important;
        box-shadow: 0 16px 34px rgba(12, 32, 48, .28) !important;
    }

    .home-v4 .home-phone-screen {
        inset: 4px !important;
        border-radius: 17px !important;
    }

    .home-v4 .home-phone-notch {
        top: 8px !important;
        width: 42% !important;
        height: 7px !important;
        border-radius: 999px !important;
    }

    .home-v4 .home-screen-indicators {
        bottom: 6px !important;
        padding: 6px 10px !important;
    }

    .home-v4 .home-hero-copy h1 {
        font-size: clamp(38px, 9.7vw, 48px) !important;
        line-height: 1.02 !important;
    }

    .home-v4 .home-hero-copy p {
        max-width: 100% !important;
        margin-top: 16px !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere !important;
    }

    .home-v4 .home-checks {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .home-v4 .home-checks span {
        justify-content: center !important;
        min-height: 42px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    .home-v4 .home-checks span:last-child {
        grid-column: 1 / -1 !important;
        width: min(100%, 260px) !important;
        justify-self: center !important;
    }

    .home-v4 .home-actions {
        grid-template-columns: 1fr !important;
        width: min(100%, 320px) !important;
    }

    .home-v4 .home-actions .home-btn {
        min-height: 54px !important;
    }
}

@media (max-width: 420px) {
    .home-v4 .home-product-scene {
        min-height: clamp(230px, 56vw, 275px) !important;
        padding-bottom: 22px !important;
    }

    .home-v4 .home-laptop {
        width: 100% !important;
        max-width: none !important;
    }

    .home-v4 .home-phone {
        right: 0 !important;
        bottom: 30px !important;
        width: clamp(66px, 17.5vw, 78px) !important;
        height: auto !important;
        aspect-ratio: 9 / 19.5 !important;
        border-radius: 20px !important;
    }

    .home-v4 .home-phone-screen {
        inset: 4px !important;
        border-radius: 16px !important;
    }

    .home-v4 .home-phone-notch {
        top: 8px !important;
        height: 7px !important;
    }
}


/* =========================================================
   HERO MOBILE PRO SAFE COMPOSITION
   ========================================================= */

@media (max-width: 700px) {
    .home-v4 .home-hero {
        min-height: auto !important;
        padding: 22px 0 max(72px, env(safe-area-inset-bottom)) !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    .home-v4 .home-hero-grid {
        width: min(100% - 36px, 540px) !important;
        row-gap: 22px !important;
    }

    .home-v4 .home-product-scene {
        width: 100% !important;
        min-height: clamp(300px, 74vw, 390px) !important;
        padding: 8px 0 34px !important;
        overflow: visible !important;
        display: flex !important;
        justify-content: center !important;
    }

    .home-v4 .home-laptop {
        width: min(100%, 520px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .home-v4 .home-laptop-screen {
        aspect-ratio: 16 / 9 !important;
        padding: 5px !important;
        border-radius: 20px 20px 10px 10px !important;
    }

    .home-v4 .home-laptop-base {
        width: 104% !important;
        left: -2% !important;
        height: 12px !important;
    }

    .home-v4 .home-phone {
        right: 3.5% !important;
        bottom: 42px !important;
        width: clamp(82px, 20vw, 104px) !important;
        height: auto !important;
        aspect-ratio: 9 / 19.5 !important;
        padding: 4px !important;
        border-radius: 23px !important;
        transform: none !important;
    }

    .home-v4 .home-phone-screen {
        inset: 4px !important;
        border-radius: 18px !important;
    }

    .home-v4 .home-phone-notch {
        top: 8px !important;
        height: 7px !important;
        width: 42% !important;
    }

    .home-v4 .home-screen-indicators {
        bottom: 10px !important;
    }

    .home-v4 .home-hero-copy h1 {
        max-width: 100% !important;
        font-size: clamp(40px, 10.2vw, 52px) !important;
        line-height: 1.03 !important;
    }

    .home-v4 .home-hero-copy p {
        max-width: 34rem !important;
        font-size: 15.5px !important;
        line-height: 1.55 !important;
        overflow-wrap: normal !important;
    }

    .home-v4 .home-checks {
        gap: 12px !important;
    }

    .home-v4 .home-checks span {
        min-width: 0 !important;
        min-height: 44px !important;
        white-space: nowrap !important;
    }

    .home-v4 .home-actions {
        width: min(100%, 330px) !important;
        gap: 12px !important;
    }
}

@media (max-width: 420px) {
    .home-v4 .home-product-scene {
        min-height: clamp(286px, 76vw, 340px) !important;
        padding-bottom: 32px !important;
    }

    .home-v4 .home-laptop {
        width: 100% !important;
    }

    .home-v4 .home-phone {
        right: 2.5% !important;
        bottom: 40px !important;
        width: clamp(76px, 19vw, 88px) !important;
    }

    .home-v4 .home-hero-copy h1 {
        font-size: clamp(38px, 10vw, 48px) !important;
    }
}