/*
 * Yubeen App Downloads
 * Page-only bundle for /support/app-downloads/
 * Version 1.0 — externalized from approved Elementor Screens 01–03
 *
 * Scope:
 * - Screen 01: Hero / unified download entry
 * - Screen 02: QR download / scan flow / direct-open action
 * - Screen 03: Support CTA
 *
 * Runtime principles:
 * - No third-party animation library.
 * - No continuous background animation.
 * - Screen 02/03 reveal states are driven by app-downloads.js.
 * - QR image itself is never filtered, transformed, blurred or faded.
 */

/* ========================================================================== */
/* SCREEN 01 — HERO                                                           */
/* ========================================================================== */

.yb-app-hero-v5 {
    --yb-red: #e31e24;
    --yb-white: #ffffff;
    --yb-text: rgba(255,255,255,.90);
    --yb-muted: rgba(255,255,255,.74);
    --yb-border: rgba(255,255,255,.18);
    --yb-border-hover: rgba(255,255,255,.34);
    --yb-button: rgba(12,14,16,.50);
    --yb-button-hover: rgba(18,20,22,.68);
    --yb-max: 1440px;
    --yb-hero-height: 530px;

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: var(--yb-hero-height);
    overflow: hidden;
    color: var(--yb-white);
    background-image: url('/wp-content/uploads/2026/09/yubeen-app-hero-desktop-2560x1440-v1.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 58% 49%;
    font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.yb-app-hero-v5,
.yb-app-hero-v5 *,
.yb-app-hero-v5 *::before,
.yb-app-hero-v5 *::after {
    box-sizing: border-box;
}

.yb-app-hero-v5::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(3,5,7,.34) 0%,
        rgba(3,5,7,.26) 22%,
        rgba(3,5,7,.15) 38%,
        rgba(3,5,7,.06) 50%,
        rgba(3,5,7,0) 64%,
        rgba(3,5,7,0) 100%
    );
}

.yb-app-hero-v5::after { display: none; }

.yb-app-hero-v5__inner {
    display: flex;
    align-items: center;
    width: min(calc(100% - 96px), var(--yb-max));
    min-height: var(--yb-hero-height);
    margin: 0 auto;
    padding: 56px 0 44px;
}

/*
 * Desktop optical balance:
 * text occupies the upper part of this internal column while the CTA group
 * uses margin-top:auto to settle lower in the Hero. This keeps the left side
 * from reading as one dense block in the vertical centre.
 */
.yb-app-hero-v5__copy {
    display: flex;
    flex-direction: column;
    width: min(600px, 46%);
    min-height: calc(var(--yb-hero-height) - 130px);
}

@keyframes ybAppHeroV5Reveal {
    from { opacity: 0; transform: translate3d(0,11px,0); }
    to   { opacity: 1; transform: translate3d(0,0,0); }
}

.yb-app-hero-v5__eyebrow,
.yb-app-hero-v5__title,
.yb-app-hero-v5__intro,
.yb-app-hero-v5__actions {
    opacity: 0;
    animation-name: ybAppHeroV5Reveal;
    animation-duration: 540ms;
    animation-timing-function: cubic-bezier(.20,.68,.28,1);
    animation-fill-mode: forwards;
}

.yb-app-hero-v5__eyebrow { animation-delay: 40ms; }
.yb-app-hero-v5__title    { animation-delay: 110ms; }
.yb-app-hero-v5__intro    { animation-delay: 185ms; }
.yb-app-hero-v5__actions  { animation-delay: 260ms; }

.yb-app-hero-v5__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--yb-red);
    font-size: 10px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.yb-app-hero-v5__eyebrow::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    background: var(--yb-red);
}

.yb-app-hero-v5__title {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 4vw, 64px);
    font-weight: 620;
    line-height: 1.01;
    letter-spacing: -.05em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.16);
}

.yb-app-hero-v5__intro {
    max-width: 520px;
    margin: 18px 0 0;
    color: var(--yb-muted);
    font-size: 15px;
    font-weight: 420;
    line-height: 1.58;
    letter-spacing: -.01em;
    text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

.yb-app-hero-v5__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: auto;
    padding-top: 34px;
}

.yb-app-hero-v5__store {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    min-height: 56px;
    padding: 8px 15px 8px 13px;
    overflow: hidden;
    border: 1px solid var(--yb-border);
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%), var(--yb-button);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.10);
    text-decoration: none;
    transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.yb-app-hero-v5__store::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 34px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(227,30,36,.95), rgba(227,30,36,0));
}

.yb-app-hero-v5__store::after {
    content: "";
    position: absolute;
    top: -65%;
    left: -38%;
    width: 24%;
    height: 230%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.025) 34%, rgba(255,255,255,.14) 48%, rgba(255,255,255,.055) 56%, rgba(255,255,255,0) 74%);
    transform: translate3d(-220%,0,0) rotate(8deg);
    transition: transform 640ms cubic-bezier(.22,.64,.26,1), opacity 120ms ease;
}

.yb-app-hero-v5__store-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.028);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.yb-app-hero-v5__store-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 118px;
}

.yb-app-hero-v5__store-copy small {
    margin-bottom: 4px;
    color: rgba(255,255,255,.42);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.yb-app-hero-v5__store-copy strong {
    color: #fff;
    font-size: 13.5px;
    font-weight: 640;
    line-height: 1.12;
}

.yb-app-hero-v5__store-arrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    margin-left: auto;
    border-radius: 50%;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.045);
    font-size: 14px;
    transition: color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

@media (hover:hover) and (pointer:fine) {
    .yb-app-hero-v5__store:hover {
        border-color: var(--yb-border-hover);
        background-color: var(--yb-button-hover);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 28px rgba(0,0,0,.15);
    }
    .yb-app-hero-v5__store:hover::after {
        opacity: 1;
        transform: translate3d(650%,0,0) rotate(8deg);
    }
    .yb-app-hero-v5__store:hover .yb-app-hero-v5__store-icon {
        border-color: rgba(255,255,255,.23);
        background: rgba(255,255,255,.055);
    }
    .yb-app-hero-v5__store:hover .yb-app-hero-v5__store-arrow {
        color: #fff;
        background: rgba(255,255,255,.075);
        transform: translateX(2px);
    }
}

.yb-app-hero-v5__store:focus-visible {
    outline: 2px solid var(--yb-red);
    outline-offset: 4px;
}

@media (min-width:1600px) {
    .yb-app-hero-v5 {
        --yb-hero-height: 560px;
        background-position: 58% 48%;
    }
    .yb-app-hero-v5__inner { padding: 60px 0 48px; }
    .yb-app-hero-v5__title { font-size: clamp(52px, 3.8vw, 68px); }
}

@media (max-width:1180px) {
    .yb-app-hero-v5 {
        --yb-hero-height: 500px;
        background-position: 62% 49%;
    }
    .yb-app-hero-v5__inner {
        width: min(calc(100% - 64px), var(--yb-max));
        padding: 48px 0 38px;
    }
    .yb-app-hero-v5__copy {
        width: min(530px, 52%);
        min-height: calc(var(--yb-hero-height) - 150px);
    }
    .yb-app-hero-v5__title { font-size: clamp(44px, 4.6vw, 56px); }
    .yb-app-hero-v5__intro {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.54;
    }
    .yb-app-hero-v5__actions {
        gap: 10px;
        margin-top: auto;
        padding-top: 26px;
    }
    .yb-app-hero-v5__store {
        min-width: 205px;
        min-height: 53px;
    }
}

@media (max-width:900px) and (min-width:701px) {
    .yb-app-hero-v5 {
        --yb-hero-height: 480px;
        background-position: 68% 50%;
    }
    .yb-app-hero-v5::before {
        background: linear-gradient(90deg, rgba(3,5,7,.40) 0%, rgba(3,5,7,.30) 32%, rgba(3,5,7,.16) 52%, rgba(3,5,7,.05) 68%, rgba(3,5,7,0) 82%, rgba(3,5,7,0) 100%);
    }
    .yb-app-hero-v5__inner {
        width: calc(100% - 48px);
        padding: 40px 0 32px;
    }
    .yb-app-hero-v5__copy {
        width: 56%;
        max-width: 470px;
        min-height: auto;
    }
    .yb-app-hero-v5__eyebrow { margin-bottom: 14px; }
    .yb-app-hero-v5__title { font-size: 42px; }
    .yb-app-hero-v5__intro {
        margin-top: 15px;
        font-size: 13.5px;
    }
    .yb-app-hero-v5__actions {
        margin-top: 18px;
        padding-top: 0;
    }
    .yb-app-hero-v5__store {
        min-width: 190px;
        min-height: 50px;
        padding-right: 13px;
    }
}

@media (max-width:700px) {
    .yb-app-hero-v5 {
        --yb-hero-height: 520px;
        background-image: url('/wp-content/uploads/2026/09/yubeen-app-hero-mobile-1792x2240-v1.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 67% 46%;
    }
    .yb-app-hero-v5::before {
        background: linear-gradient(180deg, rgba(3,5,7,.32) 0%, rgba(3,5,7,.24) 24%, rgba(3,5,7,.13) 44%, rgba(3,5,7,.04) 62%, rgba(3,5,7,0) 78%, rgba(3,5,7,0) 100%);
    }
    .yb-app-hero-v5__inner {
        align-items: flex-start;
        width: calc(100% - 36px);
        margin: 0 auto;
        padding: 30px 0 20px;
    }
    .yb-app-hero-v5__copy {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-height: calc(var(--yb-hero-height) - 50px);
    }
    .yb-app-hero-v5__eyebrow,
    .yb-app-hero-v5__title,
    .yb-app-hero-v5__intro,
    .yb-app-hero-v5__actions {
        animation-duration: 470ms;
    }
    .yb-app-hero-v5__eyebrow {
        margin-bottom: 11px;
        font-size: 9px;
    }
    .yb-app-hero-v5__eyebrow::before {
        width: 23px;
        flex-basis: 23px;
    }
    .yb-app-hero-v5__title {
        max-width: 420px;
        font-size: clamp(35px, 10vw, 42px);
        line-height: 1.01;
    }
    .yb-app-hero-v5__intro {
        max-width: 420px;
        margin-top: 13px;
        font-size: 13px;
        line-height: 1.48;
    }
    .yb-app-hero-v5__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        max-width: 310px;
        margin-top: auto;
        padding-top: 28px;
    }
    .yb-app-hero-v5__store {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 6px 13px 6px 11px;
        border-radius: 7px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 14px rgba(0,0,0,.07);
    }
    .yb-app-hero-v5__store::after { display: none; }
    .yb-app-hero-v5__store-icon {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
    }
    .yb-app-hero-v5__store-copy {
        flex: 1;
        min-width: 0;
    }
    .yb-app-hero-v5__store-copy small { font-size: 7.8px; }
    .yb-app-hero-v5__store-copy strong { font-size: 12.5px; }
}

@media (max-width:420px) {
    .yb-app-hero-v5 {
        --yb-hero-height: 500px;
        background-position: 69% 48%;
    }
    .yb-app-hero-v5__inner {
        width: calc(100% - 30px);
        padding: 27px 0 18px;
    }
    .yb-app-hero-v5__eyebrow { margin-bottom: 10px; }
    .yb-app-hero-v5__title { font-size: clamp(33px, 10.4vw, 40px); }
    .yb-app-hero-v5__intro {
        margin-top: 12px;
        font-size: 12.8px;
        line-height: 1.46;
    }
    .yb-app-hero-v5__actions { padding-top: 26px; }
}

@media (max-width:360px) {
    .yb-app-hero-v5 {
        --yb-hero-height: 480px;
        background-position: 71% 48%;
    }
    .yb-app-hero-v5__inner {
        width: calc(100% - 26px);
        padding: 25px 0 17px;
    }
    .yb-app-hero-v5__title { font-size: 32px; }
    .yb-app-hero-v5__intro { font-size: 12.3px; }
    .yb-app-hero-v5__actions { padding-top: 22px; }
    .yb-app-hero-v5__store { min-height: 44px; }
}

@media (max-height:650px) and (min-width:701px) {
    .yb-app-hero-v5 { --yb-hero-height: 470px; }
    .yb-app-hero-v5__inner { padding: 38px 0 30px; }
    .yb-app-hero-v5__intro { margin-top: 15px; }
    .yb-app-hero-v5__actions {
        margin-top: auto;
        padding-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yb-app-hero-v5__eyebrow,
    .yb-app-hero-v5__title,
    .yb-app-hero-v5__intro,
    .yb-app-hero-v5__actions {
        opacity: 1;
        animation: none;
        transform: none;
    }
    .yb-app-hero-v5__store,
    .yb-app-hero-v5__store-icon,
    .yb-app-hero-v5__store-arrow { transition: none; }
    .yb-app-hero-v5__store::after { display: none; }
}


/* ========================================================================== */
/* SCREEN 02 — OFFICIAL QR DOWNLOAD                                           */
/* ========================================================================== */

.yb-app-download-v3 {
    --yb-red: #e31e24;
    --yb-bg: #f7f5f1;
    --yb-bg-top: #faf9f6;
    --yb-card: rgba(255,255,255,.82);
    --yb-ink: #151718;
    --yb-muted: #666a6d;
    --yb-soft: #8a8d8f;
    --yb-line: rgba(20,23,24,.10);
    --yb-line-hover: rgba(20,23,24,.17);
    --yb-max: 1440px;

    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--yb-ink);
    background: linear-gradient(180deg, var(--yb-bg-top) 0%, var(--yb-bg) 100%);
    font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.yb-app-download-v3,
.yb-app-download-v3 *,
.yb-app-download-v3 *::before,
.yb-app-download-v3 *::after { box-sizing: border-box; }

.yb-app-download-v3__inner {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(320px,.70fr);
    align-items: start;
    gap: 84px;
    width: min(calc(100% - 96px), var(--yb-max));
    margin: 0 auto;
    padding: 68px 0 64px;
}

.yb-app-download-v3__copy {
    max-width: 670px;
    padding-top: 32px;
}

.yb-app-download-v3__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 18px;
    color: #6f7172;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.yb-app-download-v3__eyebrow::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    background: var(--yb-red);
}

.yb-app-download-v3__title {
    max-width: 650px;
    margin: 0;
    color: var(--yb-ink);
    font-size: clamp(42px,3.7vw,60px);
    font-weight: 620;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.yb-app-download-v3__intro {
    max-width: 580px;
    margin: 22px 0 0;
    color: var(--yb-muted);
    font-size: 16px;
    font-weight: 420;
    line-height: 1.65;
    letter-spacing: -.01em;
}

.yb-app-download-v3__steps {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0;
    max-width: 590px;
    margin-top: 30px;
    border-top: 1px solid var(--yb-line);
    border-bottom: 1px solid var(--yb-line);
}

.yb-app-download-v3__step {
    position: relative;
    min-height: 88px;
    padding: 17px 25px 16px 0;
}

.yb-app-download-v3__step + .yb-app-download-v3__step {
    padding-left: 28px;
    border-left: 1px solid var(--yb-line);
}

.yb-app-download-v3__step-number {
    display: block;
    margin-bottom: 8px;
    color: var(--yb-red);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .14em;
}

.yb-app-download-v3__step strong {
    display: block;
    margin-bottom: 4px;
    color: var(--yb-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.yb-app-download-v3__step span:last-child {
    display: block;
    color: var(--yb-soft);
    font-size: 11.5px;
    font-weight: 420;
    line-height: 1.5;
}

/* Static, masked technical field: intentionally no animation. */
.yb-app-download-v3__technical-field {
    position: relative;
    width: 100%;
    max-width: 590px;
    height: 102px;
    margin-top: 18px;
    overflow: hidden;
    background-image: radial-gradient(circle, rgba(20,23,24,.070) 1px, transparent 1.15px);
    background-size: 19px 19px;
    -webkit-mask-image: radial-gradient(ellipse 92% 120% at 8% 4%, #000 0%, rgba(0,0,0,.88) 36%, rgba(0,0,0,.43) 64%, transparent 88%);
    mask-image: radial-gradient(ellipse 92% 120% at 8% 4%, #000 0%, rgba(0,0,0,.88) 36%, rgba(0,0,0,.43) 64%, transparent 88%);
}

.yb-app-download-v3__flow-track {
    position: absolute;
    top: 20px;
    left: 0;
    width: 82%;
    height: 1px;
    background: linear-gradient(90deg, rgba(20,23,24,.15) 0%, rgba(20,23,24,.11) 58%, rgba(20,23,24,.04) 100%);
}

.yb-app-download-v3__flow-track::after {
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid rgba(20,23,24,.18);
    border-right: 1px solid rgba(20,23,24,.18);
    transform: rotate(45deg);
}

.yb-app-download-v3__flow-node {
    position: absolute;
    z-index: 2;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f7f5f1;
    border: 1px solid rgba(20,23,24,.24);
}

.yb-app-download-v3__flow-node--1 { left: 0; border-color: rgba(227,30,36,.65); background: var(--yb-red); }
.yb-app-download-v3__flow-node--2 { left: 48%; }
.yb-app-download-v3__flow-node--3 { right: 0; }

.yb-app-download-v3__flow-signal {
    position: absolute;
    z-index: 3;
    top: -1px;
    left: 0;
    width: 58px;
    height: 3px;
    border-radius: 99px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(227,30,36,0) 0%, rgba(227,30,36,.20) 20%, rgba(227,30,36,.95) 55%, rgba(227,30,36,.25) 78%, rgba(227,30,36,0) 100%);
    box-shadow: 0 0 10px rgba(227,30,36,.12);
}

@keyframes ybAppScanFlow {
    0%   { left: 0; opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: calc(100% - 58px); opacity: 0; }
}

.yb-app-download-v3.yb-motion-ready.is-inview .yb-app-download-v3__flow-signal {
    animation: ybAppScanFlow 940ms cubic-bezier(.22,.62,.28,1) 650ms 1 both;
}

.yb-app-download-v3__visual {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.yb-app-download-v3__qr-card {
    position: relative;
    width: min(100%,360px);
    padding: 19px 19px 21px;
    overflow: hidden;
    border: 1px solid var(--yb-line);
    border-radius: 13px;
    background: var(--yb-card);
    box-shadow: 0 16px 42px rgba(17,20,21,.050);
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.yb-app-download-v3__qr-card::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: -1px;
    left: 19px;
    width: 40px;
    height: 2px;
    background: var(--yb-red);
    pointer-events: none;
}

.yb-app-download-v3__border-sweep {
    position: absolute;
    z-index: 6;
    top: -1px;
    left: 0;
    width: 72px;
    height: 2px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(227,30,36,0), rgba(227,30,36,.20), rgba(227,30,36,.96), rgba(227,30,36,.22), rgba(227,30,36,0));
}

@keyframes ybAppQrSweep {
    0%   { opacity: 0; transform: translate3d(-85px,0,0); }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(390px,0,0); }
}

.yb-app-download-v3.yb-motion-ready.is-inview .yb-app-download-v3__border-sweep {
    animation: ybAppQrSweep 780ms cubic-bezier(.22,.62,.28,1) 1500ms 1 both;
}

.yb-app-download-v3__qr-glare {
    position: absolute;
    z-index: 1;
    top: -60%;
    left: -45%;
    width: 28%;
    height: 225%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.045) 57%, rgba(255,255,255,0) 75%);
    transform: translate3d(-220%,0,0) rotate(7deg);
    transition: transform 680ms cubic-bezier(.22,.62,.28,1), opacity 120ms ease;
}

@media (hover:hover) and (pointer:fine) {
    .yb-app-download-v3__qr-card:hover {
        border-color: var(--yb-line-hover);
        transform: translateY(-2px);
        box-shadow: 0 20px 48px rgba(17,20,21,.075);
    }
    .yb-app-download-v3__qr-card:hover .yb-app-download-v3__qr-glare {
        opacity: 1;
        transform: translate3d(660%,0,0) rotate(7deg);
    }
}

.yb-app-download-v3__qr-frame {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(20,23,24,.065);
    border-radius: 9px;
    background: #fff;
}

.yb-app-download-v3__qr-image {
    display: block;
    width: 100%;
    max-width: 270px;
    height: auto;
    margin: 0;
    object-fit: contain;
    image-rendering: auto;
}

.yb-app-download-v3__qr-meta {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: 17px;
}

.yb-app-download-v3__qr-meta-copy { min-width: 0; }

.yb-app-download-v3__qr-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--yb-red);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.yb-app-download-v3__qr-name {
    display: block;
    color: var(--yb-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.yb-app-download-v3__qr-hint {
    flex: 0 0 auto;
    max-width: 105px;
    color: var(--yb-soft);
    font-size: 9px;
    font-weight: 450;
    line-height: 1.4;
    text-align: right;
}

/* Direct same-device path. Desktop stays secondary; Mobile becomes primary. */
.yb-app-download-v3__open-download {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 40px;
    margin-top: 15px;
    padding: 0 13px;
    border: 1px solid rgba(20,23,24,.10);
    border-radius: 7px;
    color: var(--yb-ink);
    background: rgba(255,255,255,.44);
    text-decoration: none;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.yb-app-download-v3__open-download-label {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}

.yb-app-download-v3__open-download-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 50%;
    color: rgba(20,23,24,.60);
    background: rgba(20,23,24,.045);
    font-size: 12px;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

@media (hover:hover) and (pointer:fine) {
    .yb-app-download-v3__open-download:hover {
        border-color: rgba(20,23,24,.20);
        background: rgba(255,255,255,.72);
        transform: translateY(-1px);
    }
    .yb-app-download-v3__open-download:hover .yb-app-download-v3__open-download-arrow {
        color: var(--yb-red);
        background: rgba(227,30,36,.07);
        transform: translateX(2px);
    }
}

.yb-app-download-v3__open-download:focus-visible {
    outline: 2px solid var(--yb-red);
    outline-offset: 3px;
}

/* JS-safe reveal: no JS = fully visible. */
.yb-app-download-v3.yb-motion-ready .yb-app-download-v3__reveal {
    opacity: 0;
    transform: translate3d(0,11px,0);
    transition: opacity 500ms cubic-bezier(.20,.68,.28,1), transform 500ms cubic-bezier(.20,.68,.28,1);
}

.yb-app-download-v3.yb-motion-ready.is-inview .yb-app-download-v3__reveal {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.yb-app-download-v3__reveal--eyebrow { transition-delay: 0ms !important; }
.yb-app-download-v3__reveal--title    { transition-delay: 65ms !important; }
.yb-app-download-v3__reveal--intro    { transition-delay: 125ms !important; }
.yb-app-download-v3__reveal--steps    { transition-delay: 190ms !important; }
.yb-app-download-v3__reveal--field    { transition-delay: 255ms !important; }
.yb-app-download-v3__reveal--qr       { transition-delay: 220ms !important; }

@media (min-width:1600px) {
    .yb-app-download-v3__inner {
        gap: 104px;
        padding: 74px 0 70px;
    }
    .yb-app-download-v3__copy { padding-top: 38px; }
    .yb-app-download-v3__qr-card { width: 370px; }
    .yb-app-download-v3__qr-image { max-width: 278px; }
    .yb-app-download-v3__technical-field { height: 110px; }
}

@media (max-width:1180px) {
    .yb-app-download-v3__inner {
        grid-template-columns: minmax(0,1fr) minmax(300px,.68fr);
        gap: 52px;
        width: min(calc(100% - 64px), var(--yb-max));
        padding: 58px 0;
    }
    .yb-app-download-v3__copy { padding-top: 22px; }
    .yb-app-download-v3__title { font-size: clamp(40px,4.4vw,52px); }
    .yb-app-download-v3__intro { font-size: 15px; }
    .yb-app-download-v3__technical-field {
        height: 88px;
        margin-top: 16px;
    }
    .yb-app-download-v3__qr-card {
        width: min(100%,340px);
        padding: 18px 18px 20px;
    }
    .yb-app-download-v3__qr-image { max-width: 255px; }
}

@media (max-width:900px) {
    .yb-app-download-v3__inner {
        grid-template-columns: minmax(0,1fr) minmax(260px,300px);
        gap: 36px;
        width: calc(100% - 48px);
        padding: 50px 0;
    }
    .yb-app-download-v3__copy { padding-top: 10px; }
    .yb-app-download-v3__title { font-size: 42px; }
    .yb-app-download-v3__intro {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.58;
    }
    .yb-app-download-v3__steps { margin-top: 26px; }
    .yb-app-download-v3__step {
        min-height: 84px;
        padding-top: 15px;
        padding-bottom: 14px;
    }
    .yb-app-download-v3__technical-field {
        height: 72px;
        margin-top: 14px;
    }
    .yb-app-download-v3__flow-track { width: 76%; }
    .yb-app-download-v3__visual { padding-top: 6px; }
    .yb-app-download-v3__qr-card { width: 100%; }
    .yb-app-download-v3__qr-frame { padding: 12px; }
    .yb-app-download-v3__qr-image { max-width: 235px; }
}

@media (max-width:700px) {
    .yb-app-download-v3__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: calc(100% - 36px);
        padding: 42px 0 43px;
    }
    .yb-app-download-v3__copy {
        display: contents;
        padding-top: 0;
    }
    .yb-app-download-v3__eyebrow {
        order: 1;
        align-self: stretch;
        margin-bottom: 14px;
        font-size: 9px;
    }
    .yb-app-download-v3__title {
        order: 2;
        align-self: stretch;
        max-width: 100%;
        font-size: clamp(34px,9.5vw,42px);
        line-height: 1.03;
    }
    .yb-app-download-v3__intro {
        order: 3;
        align-self: stretch;
        max-width: 100%;
        margin-top: 15px;
        font-size: 13.5px;
        line-height: 1.55;
    }
    .yb-app-download-v3__visual {
        order: 4;
        width: 100%;
        margin-top: 25px;
        padding-top: 0;
        justify-content: center;
    }
    .yb-app-download-v3__qr-card {
        width: min(100%,330px);
        padding: 15px 15px 18px;
        border-radius: 11px;
    }
    .yb-app-download-v3__qr-frame {
        padding: 11px;
        border-radius: 8px;
    }
    .yb-app-download-v3__qr-image { max-width: 250px; }
    .yb-app-download-v3__qr-meta {
        gap: 14px;
        margin-top: 14px;
    }
    .yb-app-download-v3__qr-name { font-size: 14px; }
    .yb-app-download-v3__qr-hint { display: none; }
    .yb-app-download-v3__open-download {
        min-height: 46px;
        margin-top: 14px;
        padding: 0 15px;
        border-color: var(--yb-red);
        color: #fff;
        background: var(--yb-red);
        box-shadow: 0 8px 22px rgba(227,30,36,.13);
    }
    .yb-app-download-v3__open-download-label { font-size: 11.5px; }
    .yb-app-download-v3__open-download-arrow {
        color: #fff;
        background: rgba(255,255,255,.12);
    }
    .yb-app-download-v3__steps {
        order: 5;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        margin-top: 27px;
    }
    .yb-app-download-v3__step {
        min-height: auto;
        padding: 16px 0;
    }
    .yb-app-download-v3__step + .yb-app-download-v3__step {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--yb-line);
    }
    .yb-app-download-v3__technical-field,
    .yb-app-download-v3__qr-glare { display: none; }
}

@media (max-width:420px) {
    .yb-app-download-v3__inner {
        width: calc(100% - 30px);
        padding: 37px 0 39px;
    }
    .yb-app-download-v3__title { font-size: clamp(32px,9.6vw,38px); }
    .yb-app-download-v3__intro { font-size: 13px; }
    .yb-app-download-v3__visual { margin-top: 22px; }
    .yb-app-download-v3__qr-card {
        width: min(100%,315px);
        padding: 13px 13px 16px;
    }
    .yb-app-download-v3__qr-frame { padding: 9px; }
    .yb-app-download-v3__qr-image { max-width: 235px; }
    .yb-app-download-v3__steps { margin-top: 23px; }
}

@media (max-width:360px) {
    .yb-app-download-v3__inner {
        width: calc(100% - 26px);
        padding: 33px 0 35px;
    }
    .yb-app-download-v3__title { font-size: 31px; }
    .yb-app-download-v3__qr-image { max-width: 218px; }
}

@media (prefers-reduced-motion: reduce) {
    .yb-app-download-v3.yb-motion-ready .yb-app-download-v3__reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .yb-app-download-v3__flow-signal,
    .yb-app-download-v3__border-sweep,
    .yb-app-download-v3__qr-glare { display: none !important; }
    .yb-app-download-v3__qr-card,
    .yb-app-download-v3__open-download,
    .yb-app-download-v3__open-download-arrow { transition: none !important; }
}


/* ========================================================================== */
/* SCREEN 03 — SUPPORT CTA                                                    */
/* ========================================================================== */

.yb-app-support-v2 {
    --yb-red: #e31e24;
    --yb-red-light: #f02a31;
    --yb-bg: #0b0d0f;
    --yb-bg-deep: #080a0c;
    --yb-white: #ffffff;
    --yb-text: rgba(255,255,255,.88);
    --yb-muted: rgba(255,255,255,.57);
    --yb-soft: rgba(255,255,255,.34);
    --yb-line: rgba(255,255,255,.11);
    --yb-line-hover: rgba(255,255,255,.27);
    --yb-max: 1440px;

    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    color: var(--yb-white);
    background: linear-gradient(108deg, var(--yb-bg-deep) 0%, #0b0d0f 57%, #110b0d 100%);
    font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.yb-app-support-v2,
.yb-app-support-v2 *,
.yb-app-support-v2 *::before,
.yb-app-support-v2 *::after { box-sizing: border-box; }

.yb-app-support-v2::before {
    content: "";
    position: absolute;
    z-index: -2;
    right: -150px;
    bottom: -230px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(227,30,36,.105) 0%, rgba(227,30,36,.045) 36%, rgba(227,30,36,0) 72%);
}

.yb-app-support-v2::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 46%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.1px);
    background-size: 24px 24px;
    opacity: .22;
    -webkit-mask-image: radial-gradient(ellipse 82% 120% at 100% 55%, #000 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.24) 68%, transparent 90%);
    mask-image: radial-gradient(ellipse 82% 120% at 100% 55%, #000 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.24) 68%, transparent 90%);
}

.yb-app-support-v2__inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) 190px;
    align-items: center;
    gap: 76px;
    width: min(calc(100% - 96px), var(--yb-max));
    margin: 0 auto;
    padding: 61px 0 59px;
}

.yb-app-support-v2__content { max-width: 820px; }

.yb-app-support-v2__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 17px;
    color: rgba(255,255,255,.50);
    font-size: 9.5px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.yb-app-support-v2__eyebrow::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    background: var(--yb-red);
}

.yb-app-support-v2__title {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px,3.4vw,54px);
    font-weight: 620;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.yb-app-support-v2__intro {
    max-width: 650px;
    margin: 17px 0 0;
    color: var(--yb-muted);
    font-size: 15px;
    font-weight: 420;
    line-height: 1.62;
    letter-spacing: -.01em;
}

.yb-app-support-v2__actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
}

.yb-app-support-v2__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 47px;
    padding: 0 16px;
    overflow: hidden;
    border: 1px solid var(--yb-line);
    border-radius: 7px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.022);
    text-decoration: none;
    transition: border-color 190ms ease, background-color 190ms ease, color 190ms ease, transform 190ms ease;
}

.yb-app-support-v2__action > * {
    position: relative;
    z-index: 3;
}

.yb-app-support-v2__icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.018);
    transition: border-color 190ms ease, color 190ms ease, background-color 190ms ease;
}

.yb-app-support-v2__icon svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yb-app-support-v2__label {
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1;
}

.yb-app-support-v2__arrow {
    display: inline-block;
    margin-left: 4px;
    color: rgba(255,255,255,.42);
    font-size: 13px;
    transition: transform 190ms ease, color 190ms ease;
}

@media (hover:hover) and (pointer:fine) {
    .yb-app-support-v2__action:not(.yb-app-support-v2__action--primary):hover {
        color: #fff;
        border-color: var(--yb-line-hover);
        background: rgba(255,255,255,.048);
        transform: translateY(-1px);
    }
    .yb-app-support-v2__action:not(.yb-app-support-v2__action--primary):hover .yb-app-support-v2__icon {
        border-color: rgba(255,255,255,.20);
        color: #fff;
        background: rgba(255,255,255,.035);
    }
    .yb-app-support-v2__action:not(.yb-app-support-v2__action--primary):hover .yb-app-support-v2__arrow {
        color: #fff;
        transform: translateX(3px);
    }
}

.yb-app-support-v2__action--primary {
    border-color: rgba(227,30,36,.70);
    color: #fff;
    background: linear-gradient(180deg,#e7232a 0%,#d71920 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 9px 25px rgba(227,30,36,.14);
}

.yb-app-support-v2__action--primary::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.30),rgba(255,255,255,0));
}

.yb-app-support-v2__action--primary::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -70%;
    left: -38%;
    width: 24%;
    height: 240%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.035) 34%, rgba(255,255,255,.22) 49%, rgba(255,255,255,.06) 58%, rgba(255,255,255,0) 76%);
    transform: translate3d(-220%,0,0) rotate(8deg);
    transition: transform 620ms cubic-bezier(.22,.62,.28,1), opacity 110ms ease;
}

.yb-app-support-v2__action--primary .yb-app-support-v2__icon {
    border-color: rgba(255,255,255,.23);
    color: #fff;
    background: rgba(255,255,255,.065);
}

.yb-app-support-v2__action--primary .yb-app-support-v2__arrow { color: rgba(255,255,255,.76); }

@media (hover:hover) and (pointer:fine) {
    .yb-app-support-v2__action--primary:hover {
        border-color: rgba(255,92,97,.88);
        background: linear-gradient(180deg,#ed2a31 0%,#de1d24 100%);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(227,30,36,.20);
    }
    .yb-app-support-v2__action--primary:hover::after {
        opacity: 1;
        transform: translate3d(660%,0,0) rotate(8deg);
    }
    .yb-app-support-v2__action--primary:hover .yb-app-support-v2__arrow {
        color: #fff;
        transform: translateX(3px);
    }
}

.yb-app-support-v2__action:focus-visible {
    outline: 2px solid var(--yb-red);
    outline-offset: 4px;
}

.yb-app-support-v2__marker {
    position: relative;
    justify-self: end;
    width: 170px;
    padding: 18px 0 5px;
    border-top: 1px solid rgba(255,255,255,.105);
}

.yb-app-support-v2__marker::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--yb-red);
}

.yb-app-support-v2__marker-signal {
    position: absolute;
    z-index: 3;
    top: -1px;
    left: 0;
    width: 48px;
    height: 2px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(227,30,36,0), rgba(227,30,36,.20), rgba(255,255,255,.70), rgba(227,30,36,.45), rgba(227,30,36,0));
}

@keyframes ybAppSupportMarkerSignal {
    0%   { opacity: 0; transform: translate3d(-50px,0,0); }
    18%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(175px,0,0); }
}

.yb-app-support-v2.yb-motion-ready.is-inview .yb-app-support-v2__marker-signal {
    animation: ybAppSupportMarkerSignal 760ms cubic-bezier(.22,.62,.28,1) 660ms 1 both;
}

.yb-app-support-v2__marker-kicker {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.29);
    font-size: 8px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.yb-app-support-v2__marker-title {
    display: block;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.yb-app-support-v2__marker-index {
    display: block;
    margin-top: 13px;
    color: rgba(255,255,255,.23);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
}

.yb-app-support-v2.yb-motion-ready .yb-app-support-v2__reveal {
    opacity: 0;
    transform: translate3d(0,11px,0);
    transition: opacity 500ms cubic-bezier(.20,.68,.28,1), transform 500ms cubic-bezier(.20,.68,.28,1);
}

.yb-app-support-v2.yb-motion-ready.is-inview .yb-app-support-v2__reveal {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.yb-app-support-v2__reveal--eyebrow { transition-delay: 0ms !important; }
.yb-app-support-v2__reveal--title    { transition-delay: 65ms !important; }
.yb-app-support-v2__reveal--intro    { transition-delay: 125ms !important; }
.yb-app-support-v2__reveal--actions  { transition-delay: 195ms !important; }

.yb-app-support-v2.yb-motion-ready .yb-app-support-v2__reveal--marker {
    transform: translate3d(12px,0,0);
    transition-delay: 245ms !important;
}

.yb-app-support-v2.yb-motion-ready.is-inview .yb-app-support-v2__reveal--marker {
    transform: translate3d(0,0,0);
}

@media (min-width:1600px) {
    .yb-app-support-v2__inner {
        grid-template-columns: minmax(0,1fr) 205px;
        gap: 96px;
        padding: 66px 0 64px;
    }
    .yb-app-support-v2__marker { width: 180px; }
}

@media (max-width:1180px) {
    .yb-app-support-v2__inner {
        grid-template-columns: minmax(0,1fr) 165px;
        gap: 48px;
        width: min(calc(100% - 64px), var(--yb-max));
        padding: 54px 0 52px;
    }
    .yb-app-support-v2__title { font-size: clamp(36px,4vw,48px); }
    .yb-app-support-v2__marker { width: 145px; }
}

@media (max-width:900px) {
    .yb-app-support-v2__inner {
        grid-template-columns: 1fr;
        gap: 0;
        width: calc(100% - 48px);
        padding: 49px 0;
    }
    .yb-app-support-v2__content { max-width: 720px; }
    .yb-app-support-v2__title {
        max-width: 650px;
        font-size: 42px;
    }
    .yb-app-support-v2__marker { display: none; }
    .yb-app-support-v2::after {
        width: 60%;
        opacity: .15;
    }
}

@media (max-width:700px) {
    .yb-app-support-v2::after { display: none; }
    .yb-app-support-v2::before {
        right: -260px;
        bottom: -230px;
        width: 500px;
        height: 500px;
    }
    .yb-app-support-v2__inner {
        width: calc(100% - 36px);
        padding: 42px 0 43px;
    }
    .yb-app-support-v2__eyebrow {
        margin-bottom: 13px;
        font-size: 9px;
    }
    .yb-app-support-v2__eyebrow::before {
        width: 23px;
        flex-basis: 23px;
    }
    .yb-app-support-v2__title {
        max-width: 100%;
        font-size: clamp(32px,9vw,40px);
        line-height: 1.04;
    }
    .yb-app-support-v2__intro {
        max-width: 100%;
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.54;
    }
    .yb-app-support-v2__actions {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
        margin-top: 23px;
    }
    .yb-app-support-v2__action {
        width: 100%;
        min-height: 46px;
        padding: 0 12px;
    }
    .yb-app-support-v2__action--primary { grid-column: 1 / -1; }
    .yb-app-support-v2__action--primary::after { display: none; }
    .yb-app-support-v2__icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }
    .yb-app-support-v2__label { font-size: 10.5px; }
    .yb-app-support-v2__arrow { margin-left: auto; }
}

@media (max-width:420px) {
    .yb-app-support-v2__inner {
        width: calc(100% - 30px);
        padding: 37px 0 39px;
    }
    .yb-app-support-v2__title { font-size: clamp(30px,9.2vw,36px); }
    .yb-app-support-v2__actions { grid-template-columns: 1fr; }
    .yb-app-support-v2__action--primary { grid-column: auto; }
}

@media (max-width:360px) {
    .yb-app-support-v2__inner {
        width: calc(100% - 26px);
        padding: 34px 0 36px;
    }
    .yb-app-support-v2__title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .yb-app-support-v2.yb-motion-ready .yb-app-support-v2__reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .yb-app-support-v2__marker-signal,
    .yb-app-support-v2__action--primary::after { display: none !important; }
    .yb-app-support-v2__action,
    .yb-app-support-v2__icon,
    .yb-app-support-v2__arrow { transition: none !important; }
}