@media (min-width: 1500px)  {
    .hero  {
        padding-top: 85px;
    }
    .hero-stage  {
        margin-top: 38px;
    }
}

@media (max-width: 1150px)  {
    .nav-inner  {
        gap: 24px;
    }
    .main-nav  {
        gap: 23px;
    }
    .nav-actions  {
        gap: 18px;
    }
    .main-display  {
        width: 690px;
        height: 389px;
        left: calc(50% - 390px);
    }
    .display-content  {
        height: 356px;
    }
    .display-heading  {
        font-size: 3.125rem;
    }
    .display-copy  {
        top: 102px;
    }
    .coffee-cup  {
        left: 65px;
        top: 90px;
        transform: scale(.88) rotate(-22deg);
    }
    .portrait-display  {
        right: 25px;
        width: 183px;
        height: 307px;
        top: 113px;
    }
    .portrait-content > strong  {
        font-size: 1.5625rem;
    }
    .sculpture  {
        left: 1px;
        bottom: 56px;
        transform: scale(.9) rotate(-15deg);
    }
    .display-stand  {
        top: 402px;
    }
    .hero-stage  {
        height: 469px;
    }
    .connection-card  {
        left: 18px;
        top: 60px;
    }
    .sync-card  {
        left: 25px;
        bottom: 15px;
    }
    .highlight-grid  {
        gap: 17px;
    }
    .card-copy  {
        padding-inline: 24px;
    }
    .highlight-card h3  {
        font-size: 1.875rem;
    }
    .layers-panel  {
        inset-inline-end: 8px;
        width: 114px;
    }
    .mini-canvas  {
        width: 210px;
        inset-inline-start: 6px;
    }
    .schedule-preview  {
        margin-inline: 17px;
    }
    .network-mini  {
        margin-inline: 18px;
    }
    .studio-grid  {
        gap: 45px;
        grid-template-columns: .9fr 1.1fr;
    }
    .editor-figure  {
        margin-inline-end: -25px;
    }
    .editor-palette  {
        width: 58px;
    }
    .editor-workarea  {
        padding-inline: 16px;
    }
    .editor-selection  {
        font-size: 1.75rem;
        top: 69px;
        inset-inline-start: 15px;
    }
    .editor-canvas .coffee-cup  {
        transform: scale(.48) rotate(-22deg);
        left: 28px;
        top: 56px;
    }
    .editor-body  {
        min-height: 309px;
    }
    .content-grid  {
        column-gap: 40px;
    }
    .network-grid  {
        gap: 55px;
    }
    .solution-copy  {
        padding: 36px;
    }
    .footer-main  {
        gap: 30px;
    }
}

@media (max-width: 900px)  {
    .container  {
        width: calc(100% - 48px);
    }
    .main-nav  {
        gap: 20px;
    }
    .main-nav a  {
        font-size: 0.75rem;
    }
    .nav-actions  {
        gap: 15px;
    }
    .nav-actions .button  {
        font-size: 0.6875rem;
        padding-inline: 14px;
    }
    .hero  {
        padding-top: 55px;
    }
    .hero h1  {
        font-size: 4.25rem;
    }
    .hero-description  {
        font-size: 1.125rem;
    }
    .hero-stage  {
        height: 430px;
        margin-top: 35px;
    }
    .main-display  {
        width: 610px;
        height: 347px;
        left: calc(50% - 335px);
        padding: 8px 8px 0;
        top: 25px;
    }
    .display-content  {
        height: 318px;
    }
    .device-chin  {
        height: 21px;
    }
    .display-copy  {
        top: 90px;
        inset-inline-start: 27px;
    }
    .display-heading  {
        font-size: 2.75rem;
    }
    .display-description  {
        max-width: 195px;
        font-size: 0.5625rem;
        margin-top: 12px;
    }
    .display-topline  {
        left: 25px;
        right: 25px;
        top: 25px;
    }
    .sample-brand  {
        font-size: 1.5rem;
    }
    .coffee-cup  {
        transform: scale(.78) rotate(-22deg);
        transform-origin: 0 0;
        top: 100px;
        left: 70px;
    }
    .art-leaf  {
        transform: scale(.8) rotate(-30deg);
        bottom: 34px;
    }
    .leaf-two  {
        transform: scale(.8) rotate(52deg);
        bottom: 30px;
    }
    .art-orbit  {
        transform: scale(.8);
        transform-origin: 30% 30%;
    }
    .portrait-display  {
        right: 17px;
        width: 157px;
        height: 266px;
        top: 127px;
    }
    .portrait-content  {
        padding-top: 17px;
    }
    .portrait-content > strong  {
        font-size: 1.375rem;
    }
    .sculpture  {
        transform: scale(.72) rotate(-15deg);
        left: -12px;
        bottom: 38px;
    }
    .portrait-content > small  {
        font-size: 0.375rem;
        bottom: 32px;
    }
    .portrait-content > b  {
        bottom: 16px;
    }
    .display-stand  {
        top: 366px;
        height: 38px;
        left: calc(50% - 167px);
        width: 240px;
    }
    .floating-card strong  {
        font-size: 0.625rem;
    }
    .floating-card div > span  {
        font-size: 0.5rem;
    }
    .connection-card  {
        padding: 12px;
        left: 13px;
        top: 58px;
        gap: 9px;
    }
    .connection-icon  {
        width: 28px;
        height: 28px;
    }
    .sync-card  {
        padding: 12px 16px;
        left: 24px;
        bottom: 5px;
    }
    .sync-wave  {
        margin-inline-start: 0;
    }
    .preview-controls  {
        padding-top: 12px;
    }
    [data-scene="hotel"] .coffee-cup  {
        width: 135px;
        height: 180px;
        top: 83px;
        left: 60px;
    }
    .benefits-strip  {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 24px;
    }
    .benefits-strip > span:first-child  {
        flex-basis: 100%;
        justify-content: center;
    }
    .benefits-strip > span  {
        font-size: 0.6875rem;
    }
    .highlight-grid  {
        grid-template-columns: 1fr;
    }
    .highlight-card  {
        min-height: 295px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .card-copy  {
        padding: 32px 30px;
    }
    .highlight-card h3  {
        font-size: 1.9375rem;
        margin-top: 18px;
    }
    .highlight-card p  {
        font-size: 0.875rem;
    }
    .card-visual  {
        margin-top: 36px;
        min-width: 0;
    }
    .mini-canvas  {
        inset-inline-start: 4px;
    }
    .layers-panel  {
        inset-inline-end: 28px;
    }
    .schedule-preview  {
        margin-top: 15px;
    }
    .network-mini  {
        margin-top: 33px;
    }
    .card-more  {
        bottom: 16px;
        inset-inline-end: 17px;
    }
    .studio-grid  {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .studio-copy  {
        max-width: 600px;
    }
    .studio-copy h2  {
        font-size: 3.25rem;
        max-width: 620px;
    }
    .editor-figure  {
        width: min(100%, 660px);
        margin-inline: auto;
    }
    .editor-shell, [dir="rtl"] .editor-shell  {
        transform: none;
    }
    .editor-canvas  {
        aspect-ratio: 16 / 9;
    }
    .editor-palette  {
        width: 74px;
    }
    .editor-workarea  {
        padding-inline: 25px;
    }
    .editor-body  {
        min-height: 360px;
    }
    .editor-selection  {
        font-size: 2.5rem;
        top: 82px;
        inset-inline-start: 25px;
    }
    .editor-canvas .coffee-cup  {
        transform: scale(.7) rotate(-22deg);
        top: 78px;
        left: 45px;
    }
    .content-grid  {
        column-gap: 30px;
        row-gap: 42px;
        grid-template-columns: repeat(2, 1fr);
    }
    .network-grid  {
        grid-template-columns: 1fr;
    }
    .network-copy  {
        max-width: 620px;
    }
    .network-dashboard  {
        width: min(100%, 500px);
        margin-inline: auto;
        transform: none;
    }
    .operator-note  {
        grid-column: auto;
    }
    .solution-art  {
        padding: 30px;
    }
    .solution-copy  {
        padding: 30px;
    }
    .solution-copy h3  {
        font-size: 1.75rem;
    }
    .solution-copy > p  {
        font-size: 0.875rem;
    }
    .solution-poster  {
        width: 240px;
        height: 300px;
    }
    .solution-poster > strong  {
        font-size: 3.3125rem;
    }
    .solution-tabs a  {
        padding-inline: 14px;
    }
    .poster-sculpture i  {
        left: 70px;
    }
    .poster-sculpture i:nth-child(2)  {
        left: 50px;
    }
    .poster-sculpture i:nth-child(3)  {
        left: 72px;
    }
    .solution-food .poster-sculpture i  {
        left: 58px;
    }
    .solution-hotel .poster-sculpture i  {
        left: 55px;
    }
    .workflow-grid  {
        gap: 35px;
    }
    .faq-grid  {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .faq-grid .section-heading  {
        margin-bottom: 25px;
    }
    .footer-main  {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
    .footer-info  {
        grid-column: 2 / 4;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px 25px;
    }
    .footer-info strong  {
        flex-basis: 100%;
        margin-bottom: 0;
    }
}

@media (max-width: 700px)  {
    .site-header:not(.nav-enhanced)  {
        height: auto;
    }
    .site-header:not(.nav-enhanced) .nav-inner  {
        flex-wrap: wrap;
        padding-block: 15px;
    }
    .site-header:not(.nav-enhanced) .main-nav  {
        position: static;
        order: 3;
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        box-shadow: none;
        border: 0;
    }
    .site-header:not(.nav-enhanced) .main-nav a  {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
    .site-header:not(.nav-enhanced) .menu-toggle  {
        display: none;
    }
    .container  {
        width: calc(100% - 40px);
    }
    .site-header  {
        height: 65px;
    }
    .nav-inner  {
        gap: 15px;
    }
    .nav-actions  {
        gap: 15px;
    }
    .nav-actions .button  {
        display: none;
    }
    .menu-toggle  {
        display: block;
    }
    .language-link  {
        min-width: 42px;
        justify-content: center;
    }
    .main-nav  {
        position: absolute;
        top: 65px;
        left: 0;
        right: 0;
        padding: 12px 25px 23px;
        background: #fafafbf8;
        box-shadow: 0 12px 17px #00000008;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid #e8e8ec;
    }
    .main-nav a  {
        font-size: 1rem;
        padding: 12px 8px;
    }
    .nav-enhanced .main-nav  {
        display: none;
    }
    .nav-enhanced .main-nav.is-open  {
        display: flex;
    }
    .hero  {
        padding-top: 48px;
    }
    .hero-copy > .eyebrow  {
        font-size: 0.5625rem;
        margin-bottom: 20px;
    }
    [dir="rtl"] .hero-copy > .eyebrow  {
        font-size: 0.6875rem;
    }
    .hero h1  {
        font-size: clamp(2.625rem, 8.3vw, 3.6875rem);
        letter-spacing: -.065em;
    }
    .hero-description  {
        font-size: 1rem;
        max-width: 400px;
        margin: 23px auto 0;
    }
    .hero-description br  {
        display: none;
    }
    .hero-actions  {
        margin-top: 25px;
        gap: 16px;
        flex-wrap: wrap;
    }
    .hero-actions .button  {
        font-size: 0.8125rem;
        padding: 12px 18px;
    }
    .hero-actions .text-link  {
        font-size: 0.8125rem;
        gap: 6px;
    }
    .hero-actions .icon  {
        width: 17px;
        height: 17px;
    }
    .hero-note  {
        margin-top: 16px;
        font-size: 0.625rem;
    }
    .hero-stage  {
        height: 330px;
        max-width: 530px;
        margin-top: 37px;
    }
    .main-display  {
        width: 82%;
        height: auto;
        left: 4%;
        top: 20px;
        padding: 6px 6px 0;
        border-radius: 10px;
    }
    .display-content  {
        height: auto;
        aspect-ratio: 1.86;
        border-radius: 4px;
    }
    .device-chin  {
        height: 16px;
        font-size: 0.25rem;
    }
    .display-topline  {
        top: 16px;
        left: 19px;
        right: 19px;
    }
    .sample-brand  {
        font-size: 1.1875rem;
    }
    .sample-brand > span  {
        font-size: 0.4375rem;
    }
    .display-time  {
        font-size: 0.5625rem;
    }
    .display-time > span  {
        font-size: 0.4375rem;
        margin-left: 8px;
    }
    .display-copy  {
        top: 65px;
        inset-inline-start: 24px;
    }
    .display-eyebrow  {
        font-size: 0.375rem;
    }
    .display-heading  {
        font-size: 2rem;
        margin-top: 7px;
    }
    .display-description  {
        font-size: 0.375rem;
        margin-top: 9px;
        max-width: 145px;
    }
    .display-bottom  {
        height: 23px;
        font-size: 0.3125rem;
        padding-inline: 16px;
    }
    .display-bottom > span:last-child  {
        font-size: 0.25rem;
    }
    .coffee-cup  {
        transform: scale(.52) rotate(-22deg);
        top: 73px;
        left: 38px;
    }
    .art-orbit  {
        transform: scale(.5);
        transform-origin: 20% 20%;
    }
    .art-leaf  {
        transform: scale(.55) rotate(-30deg);
        transform-origin: 0 0;
        left: 8px;
        bottom: 16px;
    }
    .leaf-two  {
        transform: scale(.55) rotate(52deg);
        left: 50px;
        bottom: 27px;
    }
    .display-stand  {
        top: 250px;
        width: 170px;
        left: calc(45% - 85px);
        height: 34px;
    }
    .portrait-display  {
        width: 119px;
        height: 210px;
        right: 7px;
        top: 95px;
        border-width: 5px;
        border-radius: 8px;
    }
    .portrait-content  {
        padding: 11px 8px;
    }
    .portrait-content > span  {
        font-size: 0.3125rem;
    }
    .portrait-content > strong  {
        font-size: 1.0625rem;
        margin-top: 7px;
    }
    .sculpture  {
        transform: scale(.56) rotate(-15deg);
        left: -24px;
        bottom: 20px;
    }
    .portrait-content > small  {
        font-size: 0.3125rem;
        bottom: 28px;
    }
    .portrait-content > b  {
        font-size: 0.25rem;
        bottom: 14px;
    }
    .connection-card  {
        top: 3px;
        left: 12px;
        padding: 9px 12px;
        gap: 8px;
        border-radius: 10px;
    }
    .connection-icon  {
        width: 23px;
        height: 23px;
    }
    .connection-icon .icon  {
        width: 13px;
        height: 13px;
    }
    .floating-card strong  {
        font-size: 0.5rem;
    }
    .floating-card div > span  {
        font-size: 0.375rem;
    }
    .connection-card > .status-dot  {
        margin-inline-start: 3px;
        width: 4px;
        height: 4px;
    }
    .sync-card  {
        bottom: 10px;
        left: 15px;
        border-radius: 10px;
        padding: 10px 13px;
        gap: 8px;
    }
    .sync-card > .icon  {
        width: 19px;
        height: 19px;
    }
    .sync-wave  {
        display: none;
    }
    [data-scene="hotel"] .coffee-cup  {
        width: 94px;
        height: 138px;
        top: 57px;
        left: 38px;
        box-shadow: inset 0 0 0 8px #a09278, inset 0 0 0 10px #d6c5a6, inset 0 0 24px 20px #514c47, 10px 10px 20px #0003;
    }
    [data-scene="retail"] .coffee-cup  {
        transform: scale(.52) rotate(35deg);
    }
    .segmented-control button  {
        font-size: 0.75rem;
        padding-inline: 20px;
    }
    .benefits-strip  {
        margin-top: 40px;
        padding-block: 24px;
        gap: 16px 23px;
    }
    .benefits-strip > span  {
        font-size: 0.625rem;
    }
    .benefits-strip .icon  {
        width: 14px;
        height: 14px;
    }
    .section-heading  {
        margin-bottom: 35px;
    }
    h2  {
        font-size: 2.4375rem;
    }
    .section-heading > p:last-child:not(.eyebrow), .section-description  {
        font-size: 1rem;
    }
    .eyebrow  {
        font-size: 0.625rem;
        margin-bottom: 15px;
    }
    [dir="rtl"] .eyebrow  {
        font-size: 0.75rem;
    }
    .highlight-card  {
        min-height: 294px;
    }
    .card-copy  {
        padding: 27px 22px;
    }
    .highlight-card h3  {
        font-size: 1.75rem;
    }
    .highlight-card p  {
        font-size: 0.8125rem;
    }
    .card-label  {
        font-size: 0.5625rem;
    }
    .card-visual  {
        margin-top: 40px;
    }
    .mini-canvas  {
        width: 175px;
        height: 145px;
        top: 25px;
        inset-inline-start: -10px;
    }
    .selection-box  {
        font-size: 1.5625rem;
        top: 54px;
        left: 13px;
    }
    .mini-cup  {
        width: 70px;
        height: 70px;
        right: 5px;
        top: 46px;
        border-width: 7px;
    }
    .mini-cursor  {
        left: 88px;
        top: 110px;
    }
    .layers-panel  {
        width: 100px;
        inset-inline-end: 10px;
        top: 107px;
        padding: 10px;
    }
    .layers-panel b  {
        font-size: 0.5625rem;
        margin-bottom: 5px;
    }
    .layers-panel span  {
        font-size: 0.5rem;
        margin-top: 7px;
    }
    .layers-panel .icon  {
        width: 10px;
        height: 10px;
    }
    .schedule-preview  {
        margin: 26px 12px 0;
        padding: 15px 10px;
    }
    .schedule-caption  {
        font-size: 0.5rem;
    }
    .schedule-slot  {
        padding: 9px 7px;
        font-size: 0.5rem;
        gap: 8px;
    }
    .schedule-slot time  {
        font-size: 0.4375rem;
    }
    .schedule-slot i  {
        display: none;
    }
    .network-mini  {
        margin: 44px 10px 0;
    }
    .network-source  {
        width: 115px;
        font-size: 0.5rem;
        padding: 12px 8px;
    }
    .network-source b  {
        font-size: 0.5rem;
    }
    .network-branches  {
        gap: 5px;
    }
    .network-branches > div  {
        padding: 12px 3px;
        width: 55px;
    }
    .network-branches span  {
        font-size: 0.4375rem;
    }
    .network-branches .icon  {
        width: 19px;
        height: 19px;
    }
    .studio-copy h2  {
        font-size: 2.6875rem;
    }
    .studio-copy .section-description  {
        font-size: 1rem;
    }
    .check-list li  {
        font-size: 0.8125rem;
    }
    .studio-grid  {
        gap: 40px;
    }
    .editor-toolbar  {
        padding-inline: 11px;
        gap: 8px;
        font-size: 0.5rem;
        height: 43px;
    }
    .editor-save  {
        font-size: 0.4375rem;
    }
    .editor-body  {
        min-height: 255px;
    }
    .editor-palette  {
        width: 57px;
        padding: 13px 7px;
    }
    .editor-palette > span  {
        font-size: 0.4375rem;
        margin-bottom: 8px;
    }
    .editor-palette > div  {
        margin-block: 6px;
        padding-block: 7px;
    }
    .editor-palette small  {
        font-size: 0.4375rem;
    }
    .editor-palette .icon  {
        width: 14px;
        height: 14px;
    }
    .editor-workarea  {
        padding-inline: 13px;
    }
    .editor-canvas  {
        aspect-ratio: 1.5;
    }
    .editor-canvas-brand  {
        font-size: 1.0625rem;
        top: 14px;
        left: 15px;
    }
    .editor-selection  {
        font-size: 1.625rem;
        inset-inline-start: 12px;
        padding: 5px;
        top: 70px;
    }
    .editor-canvas .coffee-cup  {
        transform: scale(.44) rotate(-22deg);
        top: 63px;
        left: 23px;
    }
    .editor-canvas .art-leaf  {
        bottom: 17px;
        transform: scale(.4) rotate(-30deg);
    }
    .editor-canvas .leaf-two  {
        bottom: 20px;
        transform: scale(.4) rotate(50deg);
    }
    .editor-layerbar  {
        padding: 9px 12px;
        gap: 7px;
        font-size: 0.5rem;
    }
    .editor-canvas-footer  {
        font-size: 0.3125rem;
        padding: 7px 13px;
    }
    .content-grid  {
        margin-top: 45px;
        gap: 35px 25px;
    }
    .content-feature h3  {
        font-size: 1.1875rem;
    }
    .content-feature p  {
        font-size: 0.8125rem;
    }
    .feature-symbol  {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        margin-bottom: 17px;
    }
    .feature-symbol .icon  {
        width: 21px;
        height: 21px;
    }
    .integrations  {
        margin-top: 45px;
        padding-top: 30px;
    }
    .integrations ul  {
        gap: 9px;
    }
    .integrations li  {
        padding: 8px 12px;
        font-size: 0.625rem;
    }
    .network-grid  {
        gap: 38px;
    }
    .network-dashboard  {
        padding: 21px;
    }
    .network-features p  {
        font-size: 0.8125rem;
    }
    .operator-note  {
        align-items: flex-start;
    }
    .operator-note p  {
        font-size: 0.75rem;
    }
    .solutions-tabs  {
        gap: 8px;
        margin-bottom: 25px;
    }
    .solutions-tabs a  {
        font-size: 0.6875rem;
        padding: 10px 13px;
        gap: 5px;
    }
    .solutions-tabs .icon  {
        width: 14px;
        height: 14px;
    }
    .solution-panel  {
        grid-template-columns: 1fr;
    }
    .solution-art  {
        min-height: 335px;
        padding: 25px;
    }
    .solution-poster  {
        width: 235px;
        height: 280px;
    }
    .solution-copy  {
        padding: 32px;
    }
    .solution-copy h3  {
        max-width: none;
        font-size: 1.875rem;
    }
    .solution-copy > p  {
        font-size: 0.9375rem;
        margin-top: 17px;
    }
    .solution-copy ul  {
        margin-top: 20px;
    }
    .solution-copy .eyebrow  {
        margin-bottom: 13px;
    }
    .solutions-more  {
        font-size: 0.75rem;
    }
    .solution-poster > strong  {
        top: 53px;
    }
    .poster-sculpture i  {
        bottom: 40px;
    }
    .poster-sculpture i:nth-child(2)  {
        bottom: 101px;
    }
    .poster-sculpture i:nth-child(3)  {
        bottom: 151px;
    }
    .workflow-grid  {
        gap: 22px;
    }
    .workflow-grid h3  {
        font-size: 1.5rem;
    }
    .workflow-grid p  {
        font-size: 0.8125rem;
    }
    .faq-section h2  {
        font-size: 2.25rem;
    }
    .faq-list summary  {
        font-size: 0.9375rem;
        gap: 16px;
        padding-block: 22px;
    }
    .faq-list details > p  {
        font-size: 0.875rem;
        padding-inline-end: 15px;
    }
    .closing-section  {
        padding-block: 55px 85px;
    }
    .closing-section h2  {
        font-size: 2.4375rem;
    }
    .closing-section .container > p:not(.eyebrow)  {
        font-size: 0.9375rem;
    }
    .footer-main  {
        grid-template-columns: repeat(2, 1fr);
        gap: 38px 25px;
    }
    .footer-brand  {
        grid-column: 1 / -1;
    }
    .footer-brand > p  {
        max-width: 340px;
    }
    .footer-info  {
        grid-column: 1 / -1;
        gap: 15px 23px;
    }
    .footer-bottom  {
        flex-direction: column;
        gap: 8px;
        font-size: 0.625rem;
    }
}

@media (max-width: 450px)  {
    .hero h1  {
        font-size: 2.6875rem;
    }
    [lang="en"] .hero h1  {
        font-size: 2.375rem;
    }
    .hero-stage  {
        height: 277px;
    }
    .main-display  {
        top: 24px;
        width: 84%;
        left: 3%;
    }
    .display-copy  {
        top: 52px;
        inset-inline-start: 17px;
    }
    .display-heading  {
        font-size: 1.625rem;
    }
    .display-eyebrow  {
        font-size: 0.3125rem;
    }
    .display-description  {
        font-size: 0.3125rem;
        max-width: 113px;
        margin-top: 7px;
    }
    .display-topline  {
        top: 14px;
        left: 16px;
        right: 16px;
    }
    .sample-brand  {
        font-size: 1rem;
    }
    .display-time  {
        font-size: 0.4375rem;
    }
    .display-time > span  {
        font-size: 0.375rem;
    }
    .coffee-cup  {
        transform: scale(.43) rotate(-22deg);
        top: 62px;
        left: 25px;
    }
    .art-leaf  {
        transform: scale(.4) rotate(-30deg);
        bottom: 18px;
        left: 0;
    }
    .leaf-two  {
        transform: scale(.4) rotate(52deg);
        left: 35px;
        bottom: 25px;
    }
    .portrait-display  {
        width: 99px;
        height: 174px;
        top: 86px;
        right: 9px;
        border-width: 4px;
    }
    .portrait-content  {
        padding-top: 6px;
    }
    .portrait-content > strong  {
        font-size: 0.875rem;
        margin-top: 5px;
    }
    .portrait-content > span  {
        font-size: 0.25rem;
    }
    .sculpture  {
        transform: scale(.44) rotate(-15deg);
        left: -29px;
        bottom: 4px;
    }
    .portrait-content > small  {
        font-size: 0.25rem;
        bottom: 24px;
    }
    .portrait-content > b  {
        font-size: 0.1875rem;
        bottom: 12px;
    }
    .display-stand  {
        top: 198px;
        height: 30px;
        width: 150px;
        left: calc(44% - 75px);
    }
    .connection-card  {
        top: 10px;
        left: 8px;
        padding: 7px 10px;
    }
    .connection-card > .status-dot  {
        display: none;
    }
    .sync-card  {
        left: 16px;
        bottom: 0;
    }
    .floating-card strong  {
        font-size: 0.4375rem;
    }
    .floating-card div > span  {
        font-size: 0.3125rem;
    }
    .display-bottom  {
        height: 21px;
        font-size: 0.25rem;
    }
    .display-bottom > span:last-child  {
        font-size: 0.1875rem;
    }
    .preview-controls  {
        padding-top: 20px;
    }
    .preview-controls > p  {
        font-size: 0.6875rem;
    }
    .segmented-control button  {
        font-size: 0.6875rem;
        padding-inline: 18px;
    }
    [data-scene="retail"] .coffee-cup  {
        transform: scale(.43) rotate(35deg);
    }
    [data-scene="hotel"] .coffee-cup  {
        width: 79px;
        height: 112px;
        top: 49px;
        left: 25px;
    }
    .highlight-card  {
        display: block;
        min-height: 485px;
    }
    .card-copy  {
        padding: 30px 27px 0;
    }
    .highlight-card h3  {
        font-size: 2.0625rem;
    }
    .highlight-card p  {
        font-size: 0.875rem;
    }
    .card-visual  {
        height: 226px;
        margin-top: 18px;
    }
    .mini-canvas  {
        width: 225px;
        height: 166px;
        inset-inline-start: 18px;
        top: 21px;
    }
    .selection-box  {
        font-size: 2rem;
    }
    .mini-cup  {
        width: 95px;
        height: 95px;
        top: 40px;
    }
    .mini-cursor  {
        left: 105px;
        top: 120px;
    }
    .layers-panel  {
        width: 122px;
        inset-inline-end: 18px;
        top: 60px;
        padding: 13px;
    }
    .layers-panel b  {
        font-size: 0.625rem;
    }
    .layers-panel span  {
        font-size: 0.5625rem;
        margin-top: 10px;
    }
    .layers-panel .icon  {
        width: 12px;
        height: 12px;
    }
    .schedule-preview  {
        margin: 25px 26px 0;
        padding: 17px;
    }
    .schedule-caption  {
        font-size: 0.625rem;
    }
    .schedule-slot  {
        padding: 9px 12px;
        font-size: 0.625rem;
        gap: 17px;
    }
    .schedule-slot time  {
        font-size: 0.5625rem;
    }
    .network-mini  {
        margin: 33px 28px 0;
    }
    .network-source  {
        width: 142px;
        padding: 13px;
    }
    .network-source b  {
        font-size: 0.625rem;
    }
    .network-branches > div  {
        width: 75px;
        padding: 12px 4px;
    }
    .network-branches span  {
        font-size: 0.5625rem;
    }
    .network-branches .icon  {
        width: 23px;
        height: 23px;
    }
    .studio-copy h2  {
        font-size: 2.375rem;
    }
    .editor-palette  {
        width: 45px;
        padding-inline: 5px;
    }
    .editor-palette > span  {
        font-size: 0.375rem;
    }
    .editor-palette small  {
        font-size: 0.375rem;
    }
    .editor-palette > div  {
        padding-block: 6px;
    }
    .editor-workarea  {
        padding-inline: 10px;
    }
    .editor-body  {
        min-height: 234px;
    }
    .editor-selection  {
        font-size: 1.375rem;
        top: 55px;
        inset-inline-start: 9px;
    }
    .editor-canvas .coffee-cup  {
        transform: scale(.32) rotate(-22deg);
        left: 21px;
        top: 54px;
    }
    .editor-canvas-brand  {
        font-size: 0.9375rem;
    }
    .editor-canvas .art-leaf  {
        transform: scale(.3) rotate(-30deg);
        left: 3px;
    }
    .editor-canvas .leaf-two  {
        transform: scale(.3) rotate(50deg);
        left: 35px;
    }
    .editor-canvas-footer  {
        font-size: 0.25rem;
    }
    .editor-save  {
        padding-inline: 6px;
    }
    .editor-save .icon  {
        display: none;
    }
    .content-grid  {
        gap: 33px 22px;
    }
    .content-feature h3  {
        font-size: 1.125rem;
    }
    .content-feature p  {
        font-size: 0.8125rem;
    }
    .workflow-grid  {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .workflow-grid article  {
        display: grid;
        grid-template-columns: 32px 1fr;
        gap: 8px 14px;
        padding-top: 21px;
    }
    .step-number  {
        padding-top: 4px;
    }
    .workflow-grid h3  {
        margin: 0;
        font-size: 1.625rem;
    }
    .workflow-grid p  {
        grid-column: 2;
        margin-top: 3px;
        font-size: 0.875rem;
    }
    .closing-section h2  {
        font-size: 2.125rem;
    }
}

@media (max-width: 360px)  {
    .container  {
        width: calc(100% - 32px);
    }
    .hero h1  {
        font-size: 2.3125rem;
    }
    [lang="en"] .hero h1  {
        font-size: 2.0625rem;
    }
    .hero-actions  {
        gap: 8px;
    }
    .hero-actions .button  {
        font-size: 0.75rem;
        padding-inline: 14px;
    }
    .hero-actions .text-link  {
        font-size: 0.75rem;
    }
    .hero-description  {
        font-size: 0.9375rem;
    }
    .hero-stage  {
        height: 250px;
    }
    .display-heading  {
        font-size: 1.4375rem;
    }
    .display-copy  {
        top: 45px;
    }
    .display-description  {
        max-width: 100px;
    }
    .coffee-cup  {
        transform: scale(.37) rotate(-22deg);
        top: 51px;
        left: 20px;
    }
    .portrait-display  {
        width: 91px;
        height: 161px;
        top: 76px;
    }
    .portrait-content > strong  {
        font-size: 0.8125rem;
    }
    .display-stand  {
        top: 179px;
    }
    .display-time > span  {
        display: none;
    }
    .content-grid  {
        grid-template-columns: 1fr;
    }
    .content-feature p  {
        font-size: 0.875rem;
    }
    .solution-copy  {
        padding: 26px;
    }
    .solution-copy h3  {
        font-size: 1.75rem;
    }
    .network-dashboard  {
        padding: 16px;
    }
    .dashboard-location  {
        gap: 8px;
        padding: 10px 8px;
    }
    .dashboard-location b  {
        font-size: 0.625rem;
    }
    .location-status  {
        font-size: 0.5rem;
    }
    .closing-section h2  {
        font-size: 1.875rem;
    }
}

@media (max-width: 700px)  {

    /* Keep the portrait screen over the artwork, clear of the Hebrew headline. */
    [dir="rtl"] .main-display  {
        left: auto;
        right: 4%;
    }
    [dir="rtl"] .portrait-display  {
        right: auto;
        left: 7px;
    }
    [dir="rtl"] .connection-card  {
        left: auto;
        right: 12px;
    }
    [dir="rtl"] .sync-card  {
        left: auto;
        right: 15px;
    }
    [dir="rtl"] .display-stand  {
        left: calc(55% - 85px);
    }
}

@media (max-width: 450px)  {
    [dir="rtl"] .display-stand  {
        left: calc(55% - 75px);
    }
}

@media (prefers-reduced-motion: reduce)  {
    .highlight-card:hover, .button:hover  {
        transform: none;
    }
}

@media print  {
    .site-header  {
        position: static;
    }
    .nav-actions, .preview-controls, .card-more, .closing-section, .footer-info, .skip-link  {
        display: none;
    }
    .container  {
        width: 100%;
    }
    .section  {
        padding-block: 30px;
    }
    .hero  {
        padding-top: 20px;
    }
    .hero-stage  {
        break-inside: avoid;
    }
    .reveal-ready  {
        opacity: 1;
        transform: none;
    }
    .solution-panel[hidden]  {
        display: grid !important;
    }
    .solution-panel, .highlight-card, .content-feature, .workflow-grid article  {
        break-inside: avoid;
    }
    .studio-section  {
        print-color-adjust: exact;
    }
    .faq-list details > p  {
        display: block;
    }
    .site-footer  {
        padding-top: 30px;
    }
}