/* Landing-page showcase: no outer card, balanced columns and a visible responsive phone. */

.home-mobile-category-host {
    display: none;
}

.qrcode-home .home-hero-showcase {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.qrcode-home .home-showcase-body {
    display: grid !important;
    grid-template-areas: "preview controls" !important;
    grid-template-columns: 410px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(28px, 2.6vw, 40px) !important;
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding: 0 !important;
}

.qrcode-home .home-preview-stack,
.qrcode-home .home-type-stack {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.qrcode-home .home-hero-subtitle {
    max-width: 680px;
    margin: 4px auto 0;
    color: #33354d;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    text-align: center;
}

.qrcode-home .home-type-stack .home-showcase-types {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}

.qrcode-home .home-type-stack .home-type-card {
    min-height: 96px !important;
    padding: 18px !important;
    border-color: rgba(49, 93, 222, .14) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 10px 26px rgba(25, 46, 105, .055) !important;
}

.qrcode-home .home-type-stack .home-type-icon {
    position: relative !important;
    isolation: isolate;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(69, 105, 224, .13) !important;
    border-radius: 12px !important;
    color: #0051bb !important;
    background: linear-gradient(145deg, #f1f6ff 0%, #e7eeff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -8px 18px rgba(49, 93, 222, .035), 0 8px 18px rgba(49, 93, 222, .08) !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.qrcode-home .home-type-stack .home-type-icon svg {
    position: relative;
    z-index: 2;
    display: block;
    width: 20px;
    height: 20px;
    stroke-width: 2;
    filter: drop-shadow(0 2px 3px rgba(49, 93, 222, .10));
    transition: transform .2s ease !important;
}

.qrcode-home .home-type-stack .home-type-icon::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 1px 4px rgba(31, 79, 196, .08);
    pointer-events: none;
}


/* Give every QR type a recognizable visual accent. */

.qrcode-home .home-showcase-types .home-type-link:nth-child(1) .home-type-icon {
    color: #0051bb !important;
    background: linear-gradient(145deg, #eff4ff, #e5edff) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(2) .home-type-icon {
    color: #1465d8 !important;
    background: linear-gradient(145deg, #eef8ff, #e1f0ff) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(3) .home-type-icon {
    color: #6a4bd8 !important;
    background: linear-gradient(145deg, #f5f1ff, #ece6ff) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(4) .home-type-icon {
    color: #087f78 !important;
    background: linear-gradient(145deg, #ecfbf8, #ddf6f1) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(5) .home-type-icon {
    color: #c27a08 !important;
    background: linear-gradient(145deg, #fff9e9, #fff0c9) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(6) .home-type-icon {
    color: #dc4b64 !important;
    background: linear-gradient(145deg, #fff1f4, #ffe4e9) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(7) .home-type-icon {
    color: #7c4bd1 !important;
    background: linear-gradient(145deg, #f7f0ff, #eee3ff) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(8) .home-type-icon {
    color: #16805d !important;
    background: linear-gradient(145deg, #effbf5, #def6ea) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(9) .home-type-icon {
    color: #d34e86 !important;
    background: linear-gradient(145deg, #fff1f7, #ffe2ee) !important;
}

.qrcode-home .home-showcase-types .home-type-link:nth-child(10) .home-type-icon {
    color: #0051bb !important;
    background: linear-gradient(145deg, #eff4ff, #e3ebff) !important;
}


/* Keep every category icon in the primary brand colour. */

.qrcode-home .home-showcase-types .home-type-link .home-type-icon {
    color: #fff !important;
    border-color: rgba(49, 93, 222, .24) !important;
    background: linear-gradient(145deg, #4169e1 0%, #0051bb 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px rgba(49, 93, 222, .18) !important;
}

.qrcode-home .home-showcase-types .home-type-link .home-type-icon::after {
    background: rgba(255, 255, 255, .3) !important;
}

.qrcode-home .home-type-stack .home-type-meta strong {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.qrcode-home .home-type-stack .home-type-meta small {
    font-size: 13px !important;
}

.qrcode-home .home-type-stack .home-type-card:hover,
.qrcode-home .home-type-stack .home-type-card.active {
    border-color: #6f8cff !important;
    background: linear-gradient(145deg, #fff, #f3f6ff) !important;
    box-shadow: 0 15px 32px rgba(47, 88, 214, .13) !important;
}

.qrcode-home .home-showcase-types .home-type-link .home-type-card.active .home-type-icon {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(145deg, #4169e1 0%, #174fc4 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -10px 18px rgba(0, 45, 145, .16), 0 11px 24px rgba(31, 79, 196, .28) !important;
    transform: translateY(-1px);
}

.qrcode-home .home-showcase-types .home-type-link .home-type-card.active .home-type-icon::after {
    background: rgba(255, 255, 255, .32);
}

.qrcode-home .home-type-stack .home-type-card:hover .home-type-icon svg,
.qrcode-home .home-type-stack .home-type-card.active .home-type-icon svg {
    transform: scale(1.08);
    filter: drop-shadow(0 2px 3px rgba(20, 44, 110, .14));
}

.qrcode-home .home-type-stack .home-type-meta strong,
.qrcode-home .home-type-stack .home-type-meta small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

.qrcode-home .home-type-stack .home-type-link,
.qrcode-home .home-type-stack .home-type-card {
    width: 100% !important;
    min-width: 0 !important;
}

.qrcode-home .home-hero-phone .home-qr-preview {
    width: 22em !important;
    height: 44em !important;
    min-height: 44em !important;
    max-height: 44em !important;
    transform: scale(0.94) !important;
    transform-origin: top center !important;
}

.qrcode-home .home-hero-phone .home-qr-preview>[id^="qrcase"],
.qrcode-home .home-hero-phone .home-qr-preview .iphonex {
    width: 22em !important;
    height: 44em !important;
    min-height: 44em !important;
    max-height: 44em !important;
    box-sizing: border-box !important;
}

.qrcode-home .home-hero-phone .home-qr-preview>[id^="qrcase"] {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.qrcode-home .home-hero-phone .home-qr-preview .iphonex {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    transition: box-shadow .2s ease !important;
}

.qrcode-home .home-hero-phone .home-qr-preview [class$="-preview-screen"],
.qrcode-home .home-hero-phone .home-qr-preview .product-preview-screen {
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.qrcode-home .home-preview-stack .home-hero-phone {
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 450px !important;
    max-width: 100% !important;
    min-height: 41.5em !important;
    margin-inline: auto !important;
    overflow: visible !important;
    overflow-anchor: none;
    filter: none !important;
    box-shadow: none !important;
}

.qrcode-home .home-hero-phone .home-qr-preview,
.qrcode-home .home-hero-phone .home-qr-preview * {
    overflow-anchor: none;
}

.qrcode-home .home-preview-stack {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.qrcode-home .home-type-stack {
    position: relative !important;
    z-index: 2 !important;
}

@media (min-width: 1100px) {
    .qrcode-home .home-preview-stack .home-hero-phone {
        position: relative !important;
        min-height: 46.75em !important;
    }
    .qrcode-home .home-preview-stack .home-hero-phone .home-qr-preview {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        transform: scale(1.06) !important;
        transform-origin: top center !important;
    }
    .qrcode-home .home-preview-stack,
    .qrcode-home .home-type-stack {
        align-self: start !important;
        margin-top: 0 !important;
    }
    .qrcode-home .home-type-stack {
        display: flex !important;
        flex-direction: column !important;
        align-self: start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
    .qrcode-home .home-type-stack .home-showcase-types {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }
    .qrcode-home .home-type-stack .home-type-link,
    .qrcode-home .home-type-stack .home-type-card {
        height: 100% !important;
    }
    .qrcode-home .home-type-stack .home-type-actions {
        gap: 0 !important;
        padding-top: 0 !important;
    }
    .qrcode-home .home-type-stack .home-type-actions .home-hero-actions {
        margin-top: 4px !important;
    }
}

@media (max-width: 1099.98px) {
    .qrcode-home .home-showcase-body {
        grid-template-areas: "preview" "controls" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
    }
    .qrcode-home .home-preview-stack,
    .qrcode-home .home-type-stack {
        width: min(100%, 720px) !important;
        margin-inline: auto !important;
    }
    .qrcode-home .home-preview-stack {
        overflow: visible !important;
    }
    .qrcode-home .home-type-stack .home-showcase-types {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    main.qrcode-home {
        display: none !important;
    }
    .home-mobile-category-host {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
        gap: 0 !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 30px 16px 38px;
        overflow: visible !important;
        background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
        z-index: 1 !important;
        isolation: isolate;
    }
    .home-mobile-category-heading {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: min(100%, 560px);
        height: auto !important;
        margin: 0 auto 20px;
        overflow: visible !important;
        text-align: center;
    }
    .home-mobile-category-heading>span {
        display: none !important;
        align-items: center;
        min-height: 32px;
        padding: 0 14px;
        border: 1px solid rgba(49, 93, 222, .18);
        border-radius: 17px;
        color: #0051bb;
        background: rgba(255, 255, 255, .86);
        font-size: 11px;
        font-weight: 600;
        box-shadow: 0 8px 22px rgba(25, 46, 105, .06);
    }
    .home-mobile-category-heading>span i {
        display: block;
        flex: 0 0 7px;
        width: 7px;
        height: 7px;
        margin-right: 7px;
        border-radius: 50%;
        background: #0051bb;
        box-shadow: 0 0 0 5px rgba(49, 93, 222, .10);
    }
    .home-mobile-category-heading h2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 12px 0 6px;
        color: #101828;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.2;
    }
    .home-mobile-category-heading p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 auto;
        color: #33354d;
        font-size: 13px;
        line-height: 1.55;
    }
    .home-mobile-category-content {
        display: block !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: min(100%, 560px);
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto;
        overflow: visible !important;
    }
    .home-mobile-category-host .home-type-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .home-mobile-category-host .home-type-stack>.home-hero-copy {
        display: none !important;
    }
    .home-mobile-category-host .home-showcase-types,
    .home-mobile-category-host .home-type-actions {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    .home-mobile-category-host .home-showcase-types {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .home-mobile-category-host+main.qrcode-home+.home-advantages-host,
    .home-mobile-category-host~.site-footer {
        position: relative !important;
        inset: auto !important;
        clear: both !important;
        width: 100% !important;
        margin-top: 0 !important;
        transform: none !important;
    }
    .home-mobile-category-host~.site-footer {
        z-index: 0 !important;
        padding-top: 34px !important;
    }
    .home-mobile-category-host~.site-footer .footer-cta-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }
    .home-mobile-category-host .home-type-link,
    .home-mobile-category-host .home-type-card {
        position: static !important;
        transform: none;
    }
    .qrcode-home,
    .qrcode-home .home-hero,
    .qrcode-home .home-hero-grid,
    .qrcode-home .home-hero-copy,
    .qrcode-home .home-hero-showcase,
    .qrcode-home .home-showcase-body,
    .qrcode-home .home-preview-stack,
    .qrcode-home .home-type-stack,
    .qrcode-home .home-showcase-types,
    .qrcode-home .home-type-actions {
        visibility: visible !important;
        opacity: 1 !important;
    }
    .qrcode-home .home-hero-grid>*,
    .qrcode-home .home-showcase-body>* {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .qrcode-home .home-hero {
        display: block !important;
        padding: 28px 0 48px !important;
    }
    .qrcode-home .home-hero .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 16px !important;
    }
    .qrcode-home .home-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }
    .qrcode-home .home-hero-copy {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .qrcode-home .home-kicker {
        display: inline-flex !important;
        max-width: 100%;
        font-size: 10px;
    }
    .qrcode-home .home-hero-copy h1 {
        display: block !important;
        margin: 18px auto 0 !important;
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    .qrcode-home .home-hero-subtitle {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.55;
    }
    .qrcode-home .home-hero-showcase {
        display: block !important;
        position: relative !important;
        z-index: 2 !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    .qrcode-home .home-showcase-body {
        gap: 24px !important;
    }
    .qrcode-home .home-hero-phone .home-qr-preview {
        transform: scale(0.82) !important;
    }
    .qrcode-home .home-preview-stack .home-hero-phone {
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 575px !important;
    }
    .qrcode-home .home-type-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
    }
    .qrcode-home .home-showcase-types {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .qrcode-home .home-showcase-types .home-type-card {
        min-height: 82px !important;
        padding: 12px !important;
    }
    .qrcode-home .home-type-stack .home-type-icon {
        flex-basis: 48px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
    }
    .qrcode-home .home-type-stack .home-type-icon svg {
        width: 25px;
        height: 25px;
    }
    .qrcode-home .home-showcase-types .home-type-meta small {
        display: none;
    }
    .qrcode-home .home-type-actions {
        display: flex !important;
    }
}

@media (max-width: 419.98px) {
    .home-mobile-category-host {
        min-height: 0 !important;
    }
    .qrcode-home .home-hero-phone .home-qr-preview {
        transform: scale(0.72) !important;
    }
    .qrcode-home .home-preview-stack .home-hero-phone {
        min-height: 510px !important;
    }
    .qrcode-home .home-showcase-types {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* The heading belongs to the category column, beside the phone preview. */

@media (min-width: 768px) {
    .qrcode-home .home-hero-grid {
        display: block !important;
    }
    .qrcode-home .home-type-stack>.home-hero-copy {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 24px !important;
        transform: none !important;
        text-align: center !important;
    }
    .qrcode-home .home-type-stack>.home-hero-copy h1 {
        max-width: none !important;
        margin: 0 0 8px !important;
        font-size: clamp(24px, 2.2vw, 24px) !important;
        line-height: 1.18 !important;
    }
    .qrcode-home .home-type-stack>.home-hero-copy .home-hero-subtitle {
        max-width: none !important;
        margin: 0 auto !important;
        font-weight: 400 !important;
        font-size: 16px !important;
    }
}

@media (max-width: 767.98px) {
    main.qrcode-home {
        display: block !important;
    }
    main.qrcode-home>.home-hero {
        display: none !important;
    }
}