/* Mobile-only density and readability pass for the public homepage. */

.order-audience-router__mobile-hint,
.order-modes__mobile-hint {
    display: none;
}

@media (max-width: 700px) {
    html {
        scroll-padding-top: 82px;
    }

    .order-hero.order-hero--duo {
        padding: 80px 8px 14px;
    }

    .or-hero-duo {
        gap: 10px;
    }

    .or-hero-service {
        min-height: 700px;
        border-radius: 22px;
    }

    .or-hero-service--scan {
        min-height: 680px;
    }

    .or-hero-service--shop {
        min-height: 780px;
        background-position: 47% 112%;
    }

    .or-hero-service--shop::before {
        background:
            linear-gradient(90deg, rgba(255, 250, 244, .96) 0%, rgba(255, 249, 241, .86) 48%, rgba(255, 249, 241, .28) 68%, rgba(255, 249, 241, .05) 88%),
            linear-gradient(180deg, rgba(255, 251, 246, .26), transparent 66%, rgba(255, 247, 238, .5) 100%);
    }

    .or-hero-service__content,
    .or-hero-service--shop .or-hero-service__content {
        padding: 24px 20px 0;
    }

    .or-hero-service--scan .or-hero-service__content {
        padding-top: 30px;
    }

    .or-hero-service__eyebrow {
        margin-bottom: 8px;
        font-size: 8px;
        letter-spacing: 1.25px;
    }

    .or-hero-service__content h2,
    .or-hero-service--shop .or-hero-service__content h2 {
        max-width: 330px;
        font-size: clamp(34px, 10vw, 43px);
        line-height: 1.1;
        letter-spacing: -2.6px;
    }

    .or-hero-service__rule {
        width: 46px;
        height: 4px;
        margin-top: 18px;
    }

    .or-hero-service__points {
        gap: 9px;
        margin-top: 16px;
    }

    .or-hero-service__points li {
        max-width: 330px;
        padding-left: 27px;
        font-size: 13px;
        line-height: 1.45;
    }

    .or-hero-service__points li::before {
        width: 19px;
        height: 19px;
        font-size: 10px;
    }

    .or-hero-service__button {
        height: 48px;
        margin-top: 17px;
        padding: 0 16px;
        border-radius: 11px;
        font-size: 12px;
    }

    .or-hero-service__button svg {
        width: 18px;
        height: 18px;
    }

    .or-scan-story {
        right: 10px;
        bottom: 12px;
        left: 10px;
        min-height: 220px;
    }

    .or-scan-metric--pos {
        width: 53%;
        min-height: 100px;
        padding: 11px;
    }

    .or-scan-metric--shortage {
        width: 44%;
        min-height: 94px;
        padding: 11px;
    }

    .or-scan-metric__head {
        font-size: 11px;
    }

    .or-scan-metric__head b {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

    .or-scan-metric__body {
        grid-template-columns: 43px minmax(0, 1fr);
        gap: 6px;
        margin-top: 5px;
    }

    .or-scan-metric__body > img {
        width: 43px;
        height: 48px;
    }

    .or-mini-sales-chart svg {
        height: 27px;
    }

    .or-product-row {
        margin-top: 10px;
    }

    .or-product-row i {
        height: 36px;
    }

    .or-product-row i::before {
        height: 22px;
    }

    .or-scan-route > span {
        min-height: 25px;
        font-size: 9px;
    }

    .or-scan-route__list > div {
        min-height: 52px;
        padding: 6px 5px;
        border-radius: 11px;
    }

    .or-scan-route__list img {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        border-radius: 8px;
    }

    .or-scan-route__list strong {
        font-size: 8px;
    }

    .or-shop-benefit-tags {
        margin-top: 14px;
    }

    .or-shop-benefit-tags span {
        min-height: 28px;
        padding: 0 9px;
        font-size: 8px;
    }

    .or-hero-service__description {
        max-width: 320px;
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.52;
    }

    .or-hero-service__description span + span {
        margin-top: 9px;
    }

    .or-shop-profit-card {
        top: auto;
        right: auto;
        bottom: 208px;
        left: 14px;
        width: 165px;
        padding: 12px 12px 8px;
        border-radius: 15px;
    }

    .or-shop-profit-card > strong {
        margin-top: 5px;
        font-size: 16px;
    }

    .or-shop-profit-card svg {
        height: 36px;
        margin-top: 5px;
    }

    .or-shop-managed-card {
        display: none;
    }

    .or-shop-dashboard {
        right: 10px;
        bottom: 12px;
        left: 10px;
        min-height: 184px;
        border-radius: 16px;
    }

    .or-shop-dashboard__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding: 8px;
    }

    .or-shop-product-card,
    .or-shop-number-card {
        min-height: 76px;
        padding: 7px;
        border-radius: 10px;
    }

    .or-demo-product,
    .or-bar-chart,
    .or-line-chart,
    .or-shop-dashboard__tasks {
        display: none;
    }

    .or-shop-product-card > strong,
    .or-shop-product-card > span {
        margin-top: 9px;
    }

    .or-shop-number-card > strong {
        margin-top: 15px;
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .order-audience-router,
    .order-scan-section--scan,
    .order-modes,
    .order-comparison,
    .order-proof,
    .order-faq,
    .order-cta {
        scroll-margin-top: 82px;
    }

    .order-audience-router {
        padding: 54px 0 58px;
    }

    .order-audience-router__inner {
        width: 100%;
    }

    .order-audience-router__heading {
        margin-bottom: 16px;
        padding: 0 20px;
    }

    .order-audience-router__label {
        margin-bottom: 12px;
        padding: 7px 12px;
        font-size: 12px;
    }

    .order-audience-router__heading h2 {
        font-size: 29px;
        line-height: 1.25;
        letter-spacing: -1.7px;
    }

    .order-audience-router__mobile-hint,
    .order-modes__mobile-hint {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 20px 14px;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }

    .order-audience-router__mobile-hint::before,
    .order-modes__mobile-hint::before {
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        border-radius: 50%;
        color: #2563eb;
        background: #eff6ff;
        content: "\2194";
        font-size: 13px;
    }

    .order-audience-router__cards,
    .order-modes__cards {
        display: grid;
        grid-template-columns: none !important;
        grid-auto-columns: min(84vw, 360px);
        grid-auto-flow: column;
        gap: 12px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 20px 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .order-audience-router__cards::-webkit-scrollbar,
    .order-modes__cards::-webkit-scrollbar {
        display: none;
    }

    .order-audience-router__cards:focus-visible,
    .order-modes__cards:focus-visible {
        outline: 3px solid rgba(37, 99, 235, .3);
        outline-offset: -3px;
    }

    .order-audience-router__card,
    .order-modes__card {
        scroll-snap-align: start;
    }

    .order-audience-router__card {
        min-height: 365px;
        padding: 22px 20px;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(20, 30, 60, .07);
    }

    .order-audience-router__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .order-audience-router__icon svg {
        width: 24px;
        height: 24px;
    }

    .order-audience-router__tag {
        margin-top: 12px;
        padding: 4px 9px;
        font-size: 11px;
    }

    .order-audience-router__card h3 {
        margin-top: 10px;
        font-size: 19px;
        line-height: 1.32;
    }

    .order-audience-router__card ul {
        gap: 7px;
        margin-top: 14px;
    }

    .order-audience-router__card li {
        padding-left: 18px;
        font-size: 13px;
        line-height: 1.45;
    }

    .order-audience-router__link {
        padding-top: 15px;
        font-size: 13px;
    }

    .order-scan-v2 {
        gap: 22px;
        width: calc(100% - 32px);
        padding: 56px 0 48px;
    }

    .order-scan-v2__number {
        margin-bottom: 13px;
        font-size: 11px;
    }

    .order-scan-v2__copy h2 {
        font-size: 40px;
        line-height: 1.08;
        letter-spacing: -2.6px;
    }

    .order-scan-v2__lead {
        margin-top: 20px;
        padding-left: 14px;
        font-size: 16px;
    }

    .order-scan-v2__text {
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.62;
    }

    .order-scan-v2__note {
        min-height: 76px;
        margin-top: 18px;
        padding: 12px;
        border-radius: 14px;
    }

    .order-scan-v2__note-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }

    .order-scan-v2__visual {
        min-height: 480px;
    }

    .order-scan-v2__scene {
        right: -27%;
        width: 145%;
    }

    .order-scan-v2__steps {
        gap: 7px;
    }

    .order-scan-v2__steps li {
        min-height: 66px;
        gap: 7px;
        padding: 7px 8px;
        border-radius: 13px;
    }

    .order-scan-v2__step-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .order-scan-v2__step-icon img,
    .order-scan-v2__steps li:nth-child(2) .order-scan-v2__step-icon img,
    .order-scan-v2__steps li:nth-child(3) .order-scan-v2__step-icon img {
        width: 30px;
        height: 30px;
    }

    .order-scan-v2__steps strong {
        font-size: 11px;
    }

    .order-modes {
        padding: 56px 0 58px !important;
    }

    .order-modes__inner {
        width: 100% !important;
    }

    .order-modes__heading {
        margin-bottom: 18px;
        padding: 0 20px;
    }

    .order-modes__label {
        margin-bottom: 11px;
        font-size: 12px;
    }

    .order-modes__heading h2 {
        font-size: 30px;
        line-height: 1.18;
        letter-spacing: -1.8px;
    }

    .order-modes__heading p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.58;
    }

    .order-modes__card {
        min-height: 320px;
        padding: 20px;
        border-radius: 17px;
    }

    .order-modes__card h3 {
        margin: 19px 0 10px;
        font-size: 23px;
    }

    .order-modes__card p,
    .order-modes__card li {
        font-size: 13px;
        line-height: 1.5;
    }

    .order-modes__card ul {
        gap: 8px;
        margin-top: 16px;
    }

    .order-modes__card li {
        padding-left: 26px;
    }

    .order-modes__note {
        width: calc(100% - 40px);
        margin: 14px 20px 0;
        padding: 15px 16px;
        border-radius: 14px;
    }

    .order-modes__note strong {
        font-size: 14px;
    }

    .order-modes__note span {
        font-size: 12px;
    }

    .order-comparison {
        padding: 56px 0 58px !important;
    }

    .order-comparison__inner {
        width: calc(100% - 32px) !important;
    }

    .order-comparison__heading {
        margin-bottom: 24px;
    }

    .order-comparison__section-no {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .order-comparison h2 {
        margin-bottom: 12px;
        font-size: 30px !important;
        line-height: 1.2;
        letter-spacing: -1.8px !important;
    }

    .order-comparison__heading p {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.58;
    }

    .order-comparison__table {
        overflow: visible;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .order-comparison__body {
        display: grid;
        gap: 10px;
    }

    .order-comparison__row {
        border-radius: 13px !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .08) !important;
    }

    .order-comparison__old,
    .order-comparison__new {
        min-height: 58px !important;
        padding: 9px 11px !important;
        font-size: 12px !important;
    }

    .order-comparison__old {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    .order-comparison__new {
        grid-template-columns: 40px minmax(0, 1fr) 24px !important;
    }

    .order-comparison__old::before,
    .order-comparison__new::before {
        margin-bottom: 1px;
        font-size: 11px;
    }

    .order-comparison__new strong {
        font-size: 13px;
    }

    .order-comparison__icon {
        width: 34px !important;
        height: 34px !important;
    }

    .order-comparison__icon svg {
        width: 34px;
        height: 34px;
    }

    .order-comparison__check {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .order-proof {
        padding: 56px 0 60px !important;
    }

    .order-proof__inner {
        width: calc(100% - 32px) !important;
    }

    .order-proof__section-no {
        font-size: 12px;
    }

    .order-proof h2 {
        margin: 18px 0 24px;
        font-size: 30px !important;
        line-height: 1.18;
        letter-spacing: -1.8px !important;
    }

    .order-proof__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .order-proof__metric {
        display: grid;
        min-height: 132px !important;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        padding: 14px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 16px;
        text-align: left;
    }

    .order-proof__icon {
        grid-row: 1 / 3;
        width: 42px;
        height: 42px;
        margin: 0;
        border-radius: 12px;
        font-size: 21px;
    }

    .order-proof__value {
        min-height: 0;
        align-self: end;
        justify-content: flex-start;
        padding-left: 10px;
    }

    .order-proof__value strong {
        font-size: 29px;
        letter-spacing: -1.8px;
    }

    .order-proof__value span {
        margin-left: 3px;
        font-size: 15px;
        letter-spacing: -.7px;
    }

    .order-proof__label {
        align-self: start;
        margin-top: 6px;
        padding-left: 10px;
        font-size: 11px;
        line-height: 1.35;
    }

    .order-faq {
        padding: 56px 0 60px !important;
    }

    .order-faq__inner {
        width: calc(100% - 32px) !important;
    }

    .order-faq__heading {
        gap: 12px;
        margin-bottom: 24px;
    }

    .order-faq__section-no {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .order-faq h2 {
        font-size: 30px !important;
        letter-spacing: -1.8px !important;
    }

    .order-faq__heading p {
        font-size: 13px;
        line-height: 1.58;
    }

    .order-faq details {
        border-radius: 13px;
    }

    .order-faq summary {
        min-height: 58px;
        grid-template-columns: 36px minmax(0, 1fr) 30px;
        gap: 8px;
        padding: 10px 12px;
    }

    .order-faq__question-no {
        font-size: 15px;
    }

    .order-faq summary strong {
        font-size: 13px;
        line-height: 1.4;
    }

    .order-faq__toggle {
        width: 30px;
        height: 30px;
    }

    .order-faq__answer {
        margin: 0 10px 10px;
        padding: 15px;
        border-radius: 11px;
    }

    .order-faq__answer p {
        font-size: 12px;
        line-height: 1.65;
    }

    .order-cta {
        min-height: 0 !important;
        padding: 56px 0 60px !important;
    }

    .order-cta__inner {
        width: calc(100% - 24px) !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .order-cta__content {
        gap: 26px !important;
        padding: 24px 20px !important;
        border-radius: 22px !important;
    }

    .order-cta h2 {
        font-size: 31px !important;
        line-height: 1.14;
        letter-spacing: -2px !important;
    }

    .order-cta__copy > p {
        margin: 18px 0 0;
        padding: 0;
        font-size: 13px !important;
        line-height: 1.62;
    }

    .order-contact {
        padding: 20px 16px;
        border-radius: 17px !important;
    }

    .order-contact__heading {
        gap: 5px;
        margin-bottom: 17px;
    }

    .order-contact__heading strong {
        font-size: 20px;
    }

    .order-contact__heading span,
    .order-contact__fields label > span {
        font-size: 12px;
    }

    .order-contact__fields {
        gap: 11px;
    }

    .order-contact input {
        height: 44px;
    }

    .order-contact textarea {
        min-height: 96px;
    }

    .order-contact input,
    .order-contact textarea {
        padding: 10px 12px;
        font-size: 13px;
    }

    .order-cta__button {
        min-height: 50px;
        margin-top: 15px;
        padding: 0 16px;
        font-size: 15px;
    }
}

@media (max-width: 430px) {
    .or-hero-service--scan {
        min-height: 650px;
    }

    .or-hero-service--shop {
        min-height: 740px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .order-audience-router__cards,
    .order-modes__cards {
        scroll-behavior: auto;
    }
}