/* =========================================================================================================
第一屏开始========================================================================================================= */

/* =========================================================================================================
   WARRANTY & SERVICE — HERO SECTION
   ---------------------------------------------------------------------------------------------------------
   File:
   CSS - Yubeen Warranty Service

   Purpose:
   - First screen of the Warranty & Service page.
   - Builds a dark, professional service-center hero section.
   - Uses structured service cards instead of product-heavy visuals.
   - No JavaScript required for this screen.
   ========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. HERO OUTER SECTION
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-hero {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 760px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at 10% 18%, rgba(215, 25, 32, 0.20) 0%, transparent 30%),
        radial-gradient(circle at 82% 34%, rgba(255, 255, 255, 0.070) 0%, transparent 30%),
        linear-gradient(135deg, #05070b 0%, #0b1017 46%, #05070b 100%) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px) !important;

    background-size: 72px 72px !important;

    opacity: 0.28 !important;

    pointer-events: none !important;
}

.yubeen-ws-hero::after {
    content: "" !important;

    position: absolute !important;
    right: -160px !important;
    top: 82px !important;

    width: 620px !important;
    height: 620px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(255, 43, 50, 0.22) !important;

    box-shadow:
        0 0 0 90px rgba(255, 43, 50, 0.030),
        0 0 0 180px rgba(255, 43, 50, 0.018) !important;

    pointer-events: none !important;
}


/* ---------------------------------------------------------------------------------------------------------
   02. HERO INNER LAYOUT
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-hero-inner {
    position: relative !important;
    z-index: 3 !important;

    width: min(86vw, 1280px) !important;
    max-width: 1280px !important;

    min-height: 760px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.88fr) !important;

    align-items: center !important;

    gap: 92px !important;

    margin: 0 auto !important;
    padding: 118px 0 94px 0 !important;

    box-sizing: border-box !important;
}

.yubeen-ws-hero-content {
    width: 100% !important;
    max-width: 610px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    box-sizing: border-box !important;
}

.yubeen-ws-hero-visual {
    width: 100% !important;
    max-width: 560px !important;

    justify-self: end !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   03. BREADCRUMB
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 10px !important;

    margin: 0 0 28px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.52) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
}

.yubeen-ws-breadcrumb a {
    color: rgba(255, 255, 255, 0.58) !important;

    text-decoration: none !important;

    transition: color 0.22s ease !important;
}

.yubeen-ws-breadcrumb a:hover {
    color: #ffffff !important;
}

.yubeen-ws-breadcrumb span {
    color: rgba(255, 255, 255, 0.28) !important;
}

.yubeen-ws-breadcrumb strong {
    color: #ff2b32 !important;

    font-weight: 850 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   04. TITLE + LEAD
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-hero-title,
.yubeen-ws-hero-title .elementor-heading-title {
    max-width: 610px !important;

    margin: 0 0 24px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: clamp(56px, 5vw, 84px) !important;
    line-height: 0.98 !important;
    font-weight: 880 !important;

    letter-spacing: -2.4px !important;
}

.yubeen-ws-hero-lead,
.yubeen-ws-hero-lead p {
    max-width: 560px !important;

    margin: 0 0 38px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.74) !important;

    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 540 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   05. HERO CTA BUTTONS
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-hero-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 16px !important;

    margin: 0 0 38px 0 !important;
    padding: 0 !important;
}

.yubeen-ws-btn {
    min-height: 54px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    padding: 0 26px !important;

    border-radius: 12px !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    text-decoration: none !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        color 0.22s ease !important;
}

.yubeen-ws-btn-primary {
    background: linear-gradient(135deg, #ff2b32 0%, #d71920 100%) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 43, 50, 0.72) !important;

    box-shadow:
        0 18px 36px rgba(215, 25, 32, 0.32) !important;
}

.yubeen-ws-btn-primary:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 24px 48px rgba(215, 25, 32, 0.40) !important;
}

.yubeen-ws-btn-secondary {
    background: rgba(255, 255, 255, 0.045) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

.yubeen-ws-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;

    border-color: rgba(255, 255, 255, 0.34) !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   06. TRUST NOTES
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-trust-notes {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 16px !important;

    width: 100% !important;
    max-width: 520px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-ws-trust-note {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 14px !important;
}

.yubeen-ws-trust-note > span {
    width: 40px !important;
    height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    color: #ff2b32 !important;

    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.yubeen-ws-trust-note svg {
    width: 20px !important;
    height: 20px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-trust-note strong {
    display: block !important;

    margin: 0 0 4px 0 !important;

    color: #ffffff !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 820 !important;
}

.yubeen-ws-trust-note em {
    display: block !important;

    color: rgba(255, 255, 255, 0.56) !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-style: normal !important;
    font-weight: 500 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   07. RIGHT SERVICE CARD
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-service-card {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 30px !important;

    overflow: hidden !important;

    border-radius: 28px !important;

    background:
        radial-gradient(circle at 80% 12%, rgba(215, 25, 32, 0.20) 0%, transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.080) 0%, rgba(255, 255, 255, 0.035) 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-service-card::before {
    content: "" !important;

    position: absolute !important;
    right: -120px !important;
    top: -120px !important;

    width: 340px !important;
    height: 340px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(255, 43, 50, 0.20) !important;

    pointer-events: none !important;
}

.yubeen-ws-service-card-head {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) auto !important;

    align-items: center !important;

    gap: 14px !important;

    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}

.yubeen-ws-status-dot {
    width: 10px !important;
    height: 10px !important;

    display: inline-block !important;

    border-radius: 50% !important;

    background: #ff2b32 !important;

    box-shadow:
        0 0 0 6px rgba(255, 43, 50, 0.14) !important;
}

.yubeen-ws-service-card-head strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 840 !important;
}

.yubeen-ws-service-card-head em {
    display: block !important;

    color: rgba(255, 255, 255, 0.54) !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.yubeen-ws-service-badge {
    min-height: 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 12px !important;

    border-radius: 999px !important;

    color: #ffffff !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    background: rgba(255, 43, 50, 0.16) !important;
    border: 1px solid rgba(255, 43, 50, 0.30) !important;
}


/* Flow steps */
.yubeen-ws-service-flow {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 12px !important;

    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

.yubeen-ws-service-step {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 16px !important;

    min-height: 82px !important;

    padding: 18px !important;

    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.040) !important;
    border: 1px solid rgba(255, 255, 255, 0.085) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-service-step.is-active {
    background:
        radial-gradient(circle at 0% 50%, rgba(215, 25, 32, 0.20) 0%, transparent 50%),
        rgba(255, 255, 255, 0.055) !important;

    border-color: rgba(255, 43, 50, 0.32) !important;
}

.yubeen-ws-service-step > span {
    color: #ff2b32 !important;

    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 880 !important;

    letter-spacing: -0.6px !important;
}

.yubeen-ws-service-step strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 820 !important;
}

.yubeen-ws-service-step em {
    display: block !important;

    color: rgba(255, 255, 255, 0.54) !important;

    font-size: 12.5px !important;
    line-height: 1.42 !important;
    font-style: normal !important;
    font-weight: 500 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   SERVICE CARD INTERACTION STATES
   ---------------------------------------------------------------------------------------------------------
   Purpose:
   - Makes the service process steps feel interactive.
   - Works with JS - Yubeen Warranty Service.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-service-step {
    cursor: pointer !important;
}

.yubeen-ws-service-step:hover {
    background:
        radial-gradient(circle at 0% 50%, rgba(215, 25, 32, 0.14) 0%, transparent 50%),
        rgba(255, 255, 255, 0.052) !important;

    border-color: rgba(255, 255, 255, 0.16) !important;
}

.yubeen-ws-service-step:focus {
    outline: none !important;

    border-color: rgba(255, 43, 50, 0.42) !important;
}

/* Summary strip */
.yubeen-ws-service-summary {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    overflow: hidden !important;

    border-radius: 18px !important;

    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.085) !important;
}

.yubeen-ws-service-summary div {
    padding: 18px !important;

    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.yubeen-ws-service-summary div:last-child {
    border-right: none !important;
}

.yubeen-ws-service-summary span {
    display: block !important;

    margin: 0 0 6px 0 !important;

    color: rgba(255, 255, 255, 0.44) !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

.yubeen-ws-service-summary strong {
    display: block !important;

    color: #ffffff !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 780 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   08. RESPONSIVE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .yubeen-ws-hero-inner {
        grid-template-columns: 1fr !important;

        gap: 58px !important;

        padding: 118px 0 86px 0 !important;
    }

    .yubeen-ws-hero-content,
    .yubeen-ws-hero-visual {
        max-width: 720px !important;

        justify-self: start !important;
    }

    .yubeen-ws-hero-title,
    .yubeen-ws-hero-title .elementor-heading-title {
        font-size: clamp(52px, 7vw, 76px) !important;
    }
}

@media (max-width: 767px) {
    .yubeen-ws-hero {
        min-height: auto !important;
    }

    .yubeen-ws-hero-inner {
        width: min(88vw, 560px) !important;

        min-height: auto !important;

        padding: 110px 0 72px 0 !important;

        gap: 42px !important;
    }

    .yubeen-ws-breadcrumb {
        margin-bottom: 22px !important;

        font-size: 11px !important;
        gap: 8px !important;
    }

    .yubeen-ws-hero-title,
    .yubeen-ws-hero-title .elementor-heading-title {
        font-size: 46px !important;
        line-height: 1.03 !important;
        letter-spacing: -1.5px !important;
    }

    .yubeen-ws-hero-lead,
    .yubeen-ws-hero-lead p {
        font-size: 15.5px !important;
        line-height: 1.65 !important;
    }

    .yubeen-ws-hero-actions {
        width: 100% !important;

        gap: 12px !important;
    }

    .yubeen-ws-btn {
        width: 100% !important;
    }

    .yubeen-ws-service-card {
        padding: 22px !important;

        border-radius: 24px !important;
    }

    .yubeen-ws-service-card-head {
        grid-template-columns: 14px minmax(0, 1fr) !important;
    }

    .yubeen-ws-service-badge {
        grid-column: 2 !important;

        justify-self: start !important;

        margin-top: 6px !important;
    }

    .yubeen-ws-service-step {
        grid-template-columns: 44px minmax(0, 1fr) !important;

        padding: 16px !important;
    }

    .yubeen-ws-service-step > span {
        font-size: 21px !important;
    }

    .yubeen-ws-service-summary {
        grid-template-columns: 1fr !important;
    }

    .yubeen-ws-service-summary div {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .yubeen-ws-service-summary div:last-child {
        border-bottom: none !important;
    }
}

/* =========================================================================================================
第一屏结束========================================================================================================= */

/* =========================================================================================================
第二屏开始========================================================================================================= */
/* =========================================================================================================
   WARRANTY & SERVICE — COVERAGE SECTION
   ---------------------------------------------------------------------------------------------------------
   File:
   CSS - Yubeen Warranty Service

   Purpose:
   - Second screen of the Warranty & Service page.
   - Explains general warranty coverage, exclusions, and required information.
   - Uses a light background to create rhythm after the dark hero.
   ========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. SECTION BASE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-coverage-section {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 96px 0 104px 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at 88% 10%, rgba(215, 25, 32, 0.070) 0%, transparent 30%),
        radial-gradient(circle at 12% 84%, rgba(10, 14, 20, 0.055) 0%, transparent 32%),
        linear-gradient(180deg, #f6f7f9 0%, #ffffff 48%, #f3f4f6 100%) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-coverage-section::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        linear-gradient(rgba(17, 19, 24, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 19, 24, 0.035) 1px, transparent 1px) !important;

    background-size: 72px 72px !important;

    opacity: 0.16 !important;

    pointer-events: none !important;
}

.yubeen-ws-coverage-inner {
    position: relative !important;
    z-index: 2 !important;

    width: min(86vw, 1280px) !important;
    max-width: 1280px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 38px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   02. HEADER
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-coverage-header {
    width: 100% !important;
    max-width: 780px !important;

    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.yubeen-ws-light-kicker {
    display: inline-block !important;

    margin: 0 0 18px 0 !important;
    padding: 0 !important;

    color: #d71920 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.yubeen-ws-coverage-header h2 {
    max-width: 760px !important;

    margin: 0 0 22px 0 !important;
    padding: 0 !important;

    color: #111318 !important;

    font-size: 46px !important;
    line-height: 1.05 !important;
    font-weight: 880 !important;

    letter-spacing: -1.6px !important;
}

.yubeen-ws-coverage-header p {
    max-width: 720px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(17, 19, 24, 0.62) !important;

    font-size: 16px !important;
    line-height: 1.68 !important;
    font-weight: 520 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   03. COVERAGE GRID
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-coverage-grid {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 26px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-ws-coverage-card {
    position: relative !important;

    min-height: 430px !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 30px !important;

    overflow: hidden !important;

    border-radius: 24px !important;

    background: #ffffff !important;

    border: 1px solid rgba(17, 19, 24, 0.10) !important;

    box-shadow:
        0 22px 56px rgba(17, 19, 24, 0.09) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-coverage-card::before {
    content: "" !important;

    position: absolute !important;
    right: -120px !important;
    top: -120px !important;

    width: 260px !important;
    height: 260px !important;

    border-radius: 50% !important;

    opacity: 0.9 !important;

    pointer-events: none !important;
}

.yubeen-ws-coverage-card-positive::before {
    background: radial-gradient(circle, rgba(215, 25, 32, 0.12) 0%, transparent 66%) !important;
}

.yubeen-ws-coverage-card-warning::before {
    background: radial-gradient(circle, rgba(17, 19, 24, 0.10) 0%, transparent 66%) !important;
}

.yubeen-ws-coverage-card-info::before {
    background: radial-gradient(circle, rgba(215, 25, 32, 0.095) 0%, transparent 66%) !important;
}

.yubeen-ws-coverage-card-head {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 18px !important;

    margin: 0 0 26px 0 !important;
    padding: 0 !important;
}

.yubeen-ws-coverage-icon {
    width: 54px !important;
    height: 54px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 18px !important;

    color: #d71920 !important;

    background: rgba(215, 25, 32, 0.075) !important;
    border: 1px solid rgba(215, 25, 32, 0.18) !important;
}

.yubeen-ws-coverage-icon svg {
    width: 28px !important;
    height: 28px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-coverage-card-head span:not(.yubeen-ws-coverage-icon) {
    display: block !important;

    margin: 0 0 7px 0 !important;

    color: #d71920 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 1.4px !important;
}

.yubeen-ws-coverage-card h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: #111318 !important;

    font-size: 23px !important;
    line-height: 1.18 !important;
    font-weight: 860 !important;

    letter-spacing: -0.5px !important;
}

.yubeen-ws-coverage-card p {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 0 24px 0 !important;
    padding: 0 !important;

    color: rgba(17, 19, 24, 0.62) !important;

    font-size: 14.5px !important;
    line-height: 1.65 !important;
    font-weight: 520 !important;
}

.yubeen-ws-coverage-card ul {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;

    margin: auto 0 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.yubeen-ws-coverage-card li {
    position: relative !important;

    margin: 0 !important;
    padding: 0 0 0 24px !important;

    color: rgba(17, 19, 24, 0.74) !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 560 !important;
}

.yubeen-ws-coverage-card li::before {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    top: 8px !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: #d71920 !important;
    box-shadow: 0 0 0 5px rgba(215, 25, 32, 0.10) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   04. NOTICE BAR
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-coverage-notice {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) auto !important;

    align-items: center !important;

    gap: 22px !important;

    margin: 14px 0 0 0 !important;
    padding: 24px 28px !important;

    border-radius: 22px !important;

    background:
        radial-gradient(circle at 92% 0%, rgba(215, 25, 32, 0.12) 0%, transparent 34%),
        #111318 !important;

    border: 1px solid rgba(17, 19, 24, 0.12) !important;

    box-shadow:
        0 24px 56px rgba(17, 19, 24, 0.14) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-notice-icon {
    width: 52px !important;
    height: 52px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 17px !important;

    color: #ff2b32 !important;

    background: rgba(255, 43, 50, 0.12) !important;
    border: 1px solid rgba(255, 43, 50, 0.24) !important;
}

.yubeen-ws-notice-icon svg {
    width: 27px !important;
    height: 27px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-coverage-notice strong {
    display: block !important;

    margin: 0 0 7px 0 !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 840 !important;
}

.yubeen-ws-coverage-notice p {
    max-width: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 520 !important;
}

.yubeen-ws-coverage-notice a {
    min-height: 46px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    white-space: nowrap !important;

    padding: 0 20px !important;

    border-radius: 12px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 820 !important;

    background: linear-gradient(135deg, #ff2b32 0%, #d71920 100%) !important;

    border: 1px solid rgba(255, 43, 50, 0.68) !important;

    box-shadow:
        0 18px 34px rgba(215, 25, 32, 0.26) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease !important;
}

.yubeen-ws-coverage-notice a:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 24px 46px rgba(215, 25, 32, 0.34) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   05. RESPONSIVE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .yubeen-ws-coverage-grid {
        grid-template-columns: 1fr !important;
    }

    .yubeen-ws-coverage-card {
        min-height: auto !important;
    }

    .yubeen-ws-coverage-notice {
        grid-template-columns: 56px minmax(0, 1fr) !important;
    }

    .yubeen-ws-coverage-notice a {
        grid-column: 2 !important;

        justify-self: start !important;

        margin-top: 6px !important;
    }
}

@media (max-width: 767px) {
    .yubeen-ws-coverage-section {
        padding: 68px 0 76px 0 !important;
    }

    .yubeen-ws-coverage-inner {
        width: min(88vw, 560px) !important;

        gap: 30px !important;
    }

    .yubeen-ws-coverage-header h2 {
        font-size: 34px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
    }

    .yubeen-ws-coverage-header p {
        font-size: 15px !important;
    }

    .yubeen-ws-coverage-card {
        padding: 24px !important;
        border-radius: 22px !important;
    }

    .yubeen-ws-coverage-card-head {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 15px !important;
    }

    .yubeen-ws-coverage-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .yubeen-ws-coverage-card h3 {
        font-size: 21px !important;
    }

    .yubeen-ws-coverage-notice {
        grid-template-columns: 1fr !important;

        padding: 24px !important;
    }

    .yubeen-ws-coverage-notice a {
        grid-column: auto !important;

        width: 100% !important;

        margin-top: 4px !important;
    }
}


/* =========================================================================================================
第二屏结束========================================================================================================= */

/* =========================================================================================================
第三屏开始========================================================================================================= */
/* =========================================================================================================
   WARRANTY & SERVICE — SERVICE PREPARATION SECTION
   ---------------------------------------------------------------------------------------------------------
   Screen:
   - "Before You Submit a Service Request"

   Purpose:
   - Build a service request preparation section with a left checklist and right request-pack card.
   - Support interactive checklist states controlled by JS.
   - Support attachment-type selection states controlled by JS.
   - Keep the right information card visually stable and text sharp.
   - Keep the product image as a subtle motion media card.

   Structure:
   - Optional Elementor wrapper: .yubeen-ws-prep-section
   - Optional inner wrapper:     .yubeen-ws-prep-inner
   - Main HTML section:          .yubeen-ws-prep-block

   Important:
   - Product image is controlled by CSS variable on .yubeen-ws-prep-block:
     --yubeen-prep-bg: url(...);
     --yubeen-prep-bg-pos: 46% 50%;

   JS dependencies:
   - [data-prep-widget]
   - [data-prep-step]
   - [data-prep-progress]
   - [data-prep-status]
   - [data-prep-active-index]
   - [data-prep-active-title]
   - [data-prep-active-text]
   - [data-prep-attachment]
   - [data-prep-attachment-status]
   - [data-prep-submit]
   ========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. OUTER SECTION BACKGROUND
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - This wrapper may be an Elementor container around the HTML block.
   - It creates the light technical background, soft red glow, and subtle grid.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-section {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at 6% 10%, rgba(215, 25, 32, 0.075) 0%, transparent 30%),
        radial-gradient(circle at 92% 22%, rgba(11, 17, 24, 0.055) 0%, transparent 32%),
        linear-gradient(180deg, #f6f7f9 0%, #ffffff 48%, #f2f4f7 100%) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-section::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        linear-gradient(rgba(17, 19, 24, 0.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 19, 24, 0.030) 1px, transparent 1px) !important;

    background-size: 72px 72px !important;
    opacity: 0.13 !important;

    pointer-events: none !important;
}

.yubeen-ws-prep-section::after {
    content: "" !important;

    position: absolute !important;
    right: -160px !important;
    top: 58px !important;

    width: 520px !important;
    height: 520px !important;

    border-radius: 50% !important;

    background: radial-gradient(circle, rgba(215, 25, 32, 0.085) 0%, transparent 68%) !important;

    pointer-events: none !important;
}


/* ---------------------------------------------------------------------------------------------------------
   02. INNER WIDTH WRAPPER
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - Use this only if the Elementor structure has an inner container.
   - The main .yubeen-ws-prep-block can also work without this wrapper.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-inner {
    position: relative !important;
    z-index: 2 !important;

    width: min(90vw, 1480px) !important;
    max-width: 1480px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   03. MAIN TWO-COLUMN LAYOUT
   ---------------------------------------------------------------------------------------------------------
   Left:
   - Copy, heading, checklist, note.

   Right:
   - Product image media card.
   - Floating Service Request Pack card.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-block {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(420px, 0.9fr) minmax(620px, 1.1fr) !important;

    align-items: center !important;
    gap: 72px !important;

    margin: 0 auto !important;
    padding: 92px 0 88px 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}

/* Disable old decorative pseudo-elements on the main block. */
.yubeen-ws-prep-block::before,
.yubeen-ws-prep-block::after {
    display: none !important;
}


/* ---------------------------------------------------------------------------------------------------------
   04. LEFT COPY AREA
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-copy {
    position: relative !important;
    z-index: 3 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-ws-prep-kicker {
    display: inline-block !important;

    margin: 0 0 18px 0 !important;
    padding: 0 !important;

    color: #d71920 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.yubeen-ws-prep-copy h2 {
    max-width: 610px !important;

    margin: 0 0 22px 0 !important;
    padding: 0 !important;

    color: #111318 !important;

    font-size: 56px !important;
    line-height: 1.04 !important;
    font-weight: 880 !important;

    letter-spacing: -1.9px !important;
}

.yubeen-ws-prep-copy > p {
    max-width: 540px !important;

    margin: 0 0 30px 0 !important;
    padding: 0 !important;

    color: rgba(17, 19, 24, 0.62) !important;

    font-size: 17px !important;
    line-height: 1.68 !important;
    font-weight: 520 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   05. LEFT CHECKLIST
   ---------------------------------------------------------------------------------------------------------
   Interaction states controlled by JS:
   - .is-active    = last clicked / current focus item
   - .is-prepared  = checked item; multiple items can be prepared
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-checklist {
    width: 100% !important;
    max-width: 560px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 12px !important;

    margin: 0 0 18px 0 !important;
    padding: 0 !important;
}

.yubeen-ws-prep-check-item {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;

    align-items: center !important;
    gap: 16px !important;

    min-height: 76px !important;

    margin: 0 !important;
    padding: 14px 18px !important;

    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.76) !important;

    border: 1px solid rgba(17, 19, 24, 0.08) !important;

    box-shadow: 0 14px 34px rgba(17, 19, 24, 0.055) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    cursor: pointer !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-check-item:hover {
    transform: translateY(-2px) !important;

    border-color: rgba(215, 25, 32, 0.18) !important;

    box-shadow: 0 18px 42px rgba(17, 19, 24, 0.075) !important;
}

/* Current focus item. Only one item should feel like the current focus. */
.yubeen-ws-prep-check-item.is-active {
    border-color: rgba(215, 25, 32, 0.42) !important;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 245, 0.92)) !important;

    box-shadow:
        0 18px 44px rgba(215, 25, 32, 0.09),
        0 14px 34px rgba(17, 19, 24, 0.055) !important;
}

/* Prepared state. Multiple items can be prepared at the same time. */
.yubeen-ws-prep-check-item.is-prepared {
    border-color: rgba(215, 25, 32, 0.26) !important;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 246, 247, 0.88)) !important;
}

.yubeen-ws-prep-check-icon {
    width: 46px !important;
    height: 46px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 15px !important;

    color: #ff2b32 !important;

    background: rgba(215, 25, 32, 0.075) !important;
    border: 1px solid rgba(215, 25, 32, 0.12) !important;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}

.yubeen-ws-prep-check-item.is-prepared .yubeen-ws-prep-check-icon {
    color: #ffffff !important;

    background: #d71920 !important;
    border-color: #d71920 !important;

    box-shadow: 0 12px 28px rgba(215, 25, 32, 0.22) !important;
}

.yubeen-ws-prep-check-icon svg {
    width: 24px !important;
    height: 24px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-prep-check-item strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #111318 !important;

    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 840 !important;
}

.yubeen-ws-prep-check-item em {
    display: block !important;

    color: rgba(17, 19, 24, 0.56) !important;

    font-size: 13.5px !important;
    line-height: 1.42 !important;
    font-style: normal !important;
    font-weight: 520 !important;
}

.yubeen-ws-prep-check-number {
    color: rgba(17, 19, 24, 0.22) !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    transition: color 0.22s ease !important;
}

.yubeen-ws-prep-check-item.is-prepared .yubeen-ws-prep-check-number {
    color: #d71920 !important;
}

.yubeen-ws-prep-check-item.is-prepared .yubeen-ws-prep-check-number::after {
    content: " ✓" !important;
}


/* ---------------------------------------------------------------------------------------------------------
   06. KEYBOARD ACCESSIBILITY
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - Works with HTML role="button" and tabindex="0".
   - JS also supports Enter and Space keys.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-check-item:focus-visible,
.yubeen-ws-prep-attachment-card:focus-visible {
    outline: 3px solid rgba(215, 25, 32, 0.28) !important;
    outline-offset: 3px !important;
}


/* ---------------------------------------------------------------------------------------------------------
   07. LEFT NOTE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-note {
    width: 100% !important;
    max-width: 560px !important;

    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;

    align-items: center !important;
    gap: 14px !important;

    margin: 0 !important;
    padding: 18px !important;

    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(17, 19, 24, 0.08) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-note span {
    width: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    color: #5f6b7a !important;

    background: rgba(17, 19, 24, 0.035) !important;
    border: 1px solid rgba(17, 19, 24, 0.10) !important;
}

.yubeen-ws-prep-note svg {
    width: 20px !important;
    height: 20px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-prep-note p {
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(17, 19, 24, 0.58) !important;

    font-size: 13.5px !important;
    line-height: 1.48 !important;
    font-weight: 520 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   08. RIGHT VISUAL AREA
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - Product image is rendered as .yubeen-ws-prep-visual::before.
   - JS may apply very subtle movement to --prep-media-x / --prep-media-y.
   - The white card itself should stay stable to avoid text blur.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-visual {
    position: relative !important;
    z-index: 3 !important;

    min-height: 580px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: none !important;

    box-sizing: border-box !important;
}

/* Product media card. */
.yubeen-ws-prep-visual::before {
    content: "" !important;

    position: absolute !important;

    top: 74px !important;
    right: -12px !important;

    width: 76% !important;
    height: 430px !important;

    border-radius: 30px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.16) 0%,
            rgba(0, 0, 0, 0.04) 34%,
            rgba(0, 0, 0, 0.00) 100%
        ),
        var(--yubeen-prep-bg) !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: var(--yubeen-prep-bg-pos, 46% 50%) !important;

    box-shadow: 0 30px 80px rgba(17, 19, 24, 0.16) !important;

    transform:
        translate3d(var(--prep-media-x, 0px), var(--prep-media-y, 0px), 0)
        scale(1.01) !important;

    transition: transform 0.22s ease !important;

    z-index: 1 !important;
    pointer-events: none !important;
}

/* Soft red atmosphere behind the product image. */
.yubeen-ws-prep-visual::after {
    content: "" !important;

    position: absolute !important;

    right: 14% !important;
    bottom: 70px !important;

    width: 360px !important;
    height: 180px !important;

    border-radius: 999px !important;

    background: rgba(215, 25, 32, 0.10) !important;
    filter: blur(48px) !important;

    z-index: 0 !important;
    pointer-events: none !important;
}


/* ---------------------------------------------------------------------------------------------------------
   09. SERVICE REQUEST PACK CARD
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - This card contains text, so it should not use 3D tilt.
   - Keeping transform disabled prevents slight font blur.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-pack {
    position: relative !important;
    z-index: 4 !important;

    width: min(60%, 420px) !important;

    margin: 0 0 0 -18px !important;
    padding: 24px !important;

    border-radius: 28px !important;

    background: rgba(255, 255, 255, 0.96) !important;

    border: 1px solid rgba(20, 24, 32, 0.07) !important;

    box-shadow:
        0 28px 74px rgba(20, 24, 32, 0.14),
        0 8px 24px rgba(20, 24, 32, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    transform: none !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-pack,
.yubeen-ws-prep-pack * {
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
}


/* ---------------------------------------------------------------------------------------------------------
   10. PACK HEADER
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-pack-head {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;

    align-items: center !important;
    gap: 16px !important;

    margin: 0 0 20px 0 !important;
    padding: 0 0 20px 0 !important;

    border-bottom: 1px solid rgba(17, 19, 24, 0.10) !important;
}

.yubeen-ws-prep-pack-icon {
    position: relative !important;

    width: 48px !important;
    height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 16px !important;

    color: #ff2b32 !important;

    background: rgba(215, 25, 32, 0.075) !important;
    border: 1px solid rgba(215, 25, 32, 0.12) !important;
}

/* Subtle ambient pulse. */
.yubeen-ws-prep-pack-icon::after {
    content: "" !important;

    position: absolute !important;
    inset: -5px !important;

    border-radius: 20px !important;

    border: 1px solid rgba(215, 25, 32, 0.18) !important;

    opacity: 0 !important;

    animation: yubeenPrepPulse 2.8s ease-in-out infinite !important;
}

@keyframes yubeenPrepPulse {
    0% {
        transform: scale(0.92);
        opacity: 0;
    }

    35% {
        opacity: 0.55;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

.yubeen-ws-prep-pack-icon svg {
    width: 25px !important;
    height: 25px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-prep-pack-head strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #111318 !important;

    font-size: 20px !important;
    line-height: 1.18 !important;
    font-weight: 860 !important;
}

.yubeen-ws-prep-pack-head em {
    display: block !important;

    color: rgba(17, 19, 24, 0.54) !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
    font-style: normal !important;
    font-weight: 520 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   11. PACK METRICS
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-pack-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    margin: 0 0 14px 0 !important;
}

.yubeen-ws-prep-pack-metrics div {
    min-height: 92px !important;

    padding: 13px !important;

    border-radius: 15px !important;

    background: rgba(17, 19, 24, 0.030) !important;
    border: 1px solid rgba(17, 19, 24, 0.060) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-pack-metrics span {
    display: block !important;

    margin: 0 0 8px 0 !important;

    color: rgba(17, 19, 24, 0.54) !important;

    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 760 !important;
}

.yubeen-ws-prep-pack-metrics strong {
    display: block !important;

    color: #d71920 !important;

    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 880 !important;
}

/* Middle metric contains longer status text. */
.yubeen-ws-prep-pack-metrics div:nth-child(2) strong {
    min-height: 32px !important;

    color: #111318 !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
}

.yubeen-ws-prep-pack-metrics em {
    display: block !important;

    margin-top: 4px !important;

    color: rgba(17, 19, 24, 0.50) !important;

    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-style: normal !important;
}


/* ---------------------------------------------------------------------------------------------------------
   12. PROGRESS BAR
   ---------------------------------------------------------------------------------------------------------
   JS updates [data-prep-progress] width from 0% to 100%.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-progress {
    position: relative !important;

    width: 100% !important;
    height: 8px !important;

    margin: 0 0 14px 0 !important;

    border-radius: 999px !important;

    overflow: hidden !important;

    background: rgba(17, 19, 24, 0.065) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-progress span {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    width: 0% !important;
    height: 100% !important;

    border-radius: inherit !important;

    background: linear-gradient(90deg, #ff2b32 0%, #d71920 100%) !important;

    box-shadow: 0 0 18px rgba(215, 25, 32, 0.36) !important;

    transition: width 0.28s ease !important;
}


/* ---------------------------------------------------------------------------------------------------------
   13. ACTIVE DETAIL CARD
   ---------------------------------------------------------------------------------------------------------
   Notes:
   - Shows the most recently clicked checklist item.
   - Fixed min-height prevents layout jumping when text changes.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-active-detail {
    min-height: 84px !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;

    align-items: center !important;
    gap: 12px !important;

    margin: 0 0 14px 0 !important;
    padding: 13px 14px !important;

    border-radius: 16px !important;

    background: rgba(17, 19, 24, 0.035) !important;
    border: 1px solid rgba(17, 19, 24, 0.065) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-active-detail > span {
    width: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    color: #ffffff !important;
    background: #d71920 !important;

    font-size: 13px !important;
    font-weight: 850 !important;
}

.yubeen-ws-prep-active-detail strong {
    display: block !important;

    min-height: 17px !important;

    margin: 0 0 4px 0 !important;

    color: #111318 !important;

    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
}

.yubeen-ws-prep-active-detail em {
    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    min-height: 32px !important;

    color: rgba(17, 19, 24, 0.54) !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    font-style: normal !important;
}


/* ---------------------------------------------------------------------------------------------------------
   14. ATTACHMENTS AREA
   ---------------------------------------------------------------------------------------------------------
   Interaction states controlled by JS:
   - .is-selected = user has selected this attachment type as available to prepare.
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-attachments {
    margin: 0 0 14px 0 !important;
    padding: 16px !important;

    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(17, 19, 24, 0.075) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-attachments > strong {
    display: block !important;

    margin: 0 0 14px 0 !important;

    color: #111318 !important;

    font-size: 14.5px !important;
    line-height: 1.25 !important;
    font-weight: 840 !important;
}

.yubeen-ws-prep-attachment-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
}

.yubeen-ws-prep-attachment-grid div,
.yubeen-ws-prep-attachment-card {
    min-height: 94px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px 8px !important;

    border-radius: 15px !important;

    background: rgba(215, 25, 32, 0.040) !important;
    border: 1px solid rgba(215, 25, 32, 0.070) !important;

    text-align: center !important;

    cursor: pointer !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-attachment-card:hover {
    transform: translateY(-2px) !important;

    border-color: rgba(215, 25, 32, 0.20) !important;

    box-shadow: 0 12px 26px rgba(215, 25, 32, 0.08) !important;
}

.yubeen-ws-prep-attachment-card.is-selected {
    background: rgba(215, 25, 32, 0.085) !important;

    border-color: rgba(215, 25, 32, 0.28) !important;
}

.yubeen-ws-prep-attachment-grid span {
    width: 32px !important;
    height: 32px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 8px 0 !important;

    color: #ff2b32 !important;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-radius 0.22s ease !important;
}

.yubeen-ws-prep-attachment-card.is-selected span {
    color: #ffffff !important;

    background: #d71920 !important;
    border-radius: 50% !important;
}

.yubeen-ws-prep-attachment-grid svg {
    width: 24px !important;
    height: 24px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-prep-attachment-grid strong {
    display: block !important;

    margin: 0 0 4px 0 !important;

    color: #111318 !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 820 !important;
}

.yubeen-ws-prep-attachment-grid em {
    color: rgba(17, 19, 24, 0.50) !important;

    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-style: normal !important;
}

.yubeen-ws-prep-attachment-status {
    margin: 12px 0 0 0 !important;
    padding: 0 !important;

    color: rgba(17, 19, 24, 0.50) !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 560 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   15. SECURE NOTE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-secure {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;

    align-items: center !important;
    gap: 14px !important;

    margin: 0 0 14px 0 !important;
    padding: 15px !important;

    border-radius: 18px !important;

    background: rgba(215, 25, 32, 0.075) !important;
    border: 1px solid rgba(215, 25, 32, 0.13) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-prep-secure > span {
    width: 44px !important;
    height: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 15px !important;

    color: #ff2b32 !important;

    background: rgba(255, 255, 255, 0.54) !important;
    border: 1px solid rgba(215, 25, 32, 0.12) !important;
}

.yubeen-ws-prep-secure svg {
    width: 24px !important;
    height: 24px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-prep-secure strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #d71920 !important;

    font-size: 14.5px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
}

.yubeen-ws-prep-secure em {
    display: block !important;

    color: rgba(17, 19, 24, 0.58) !important;

    font-size: 12.5px !important;
    line-height: 1.42 !important;
    font-style: normal !important;
}


/* ---------------------------------------------------------------------------------------------------------
   16. SUBMIT BUTTON
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-prep-submit {
    min-height: 52px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    gap: 10px !important;

    border-radius: 13px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    background: linear-gradient(135deg, #ff2b32 0%, #d71920 100%) !important;

    border: 1px solid rgba(255, 43, 50, 0.70) !important;

    box-shadow: 0 18px 38px rgba(215, 25, 32, 0.30) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease !important;
}

.yubeen-ws-prep-submit:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 24px 48px rgba(215, 25, 32, 0.38) !important;
}

/* Stronger button state when all 5 checklist items are prepared. */
.yubeen-ws-prep-submit.is-ready {
    box-shadow:
        0 22px 48px rgba(215, 25, 32, 0.42),
        0 0 0 6px rgba(215, 25, 32, 0.08) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   17. RESPONSIVE — TABLET
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .yubeen-ws-prep-inner {
        width: min(90vw, 1180px) !important;
    }

    .yubeen-ws-prep-block {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
        padding: 80px 0 88px 0 !important;
    }

    .yubeen-ws-prep-copy h2,
    .yubeen-ws-prep-copy > p,
    .yubeen-ws-prep-checklist,
    .yubeen-ws-prep-note {
        max-width: 720px !important;
    }

    .yubeen-ws-prep-visual {
        min-height: 560px !important;
    }

    .yubeen-ws-prep-pack {
        width: min(86%, 520px) !important;
        margin: 0 auto !important;
    }
}


/* ---------------------------------------------------------------------------------------------------------
   18. RESPONSIVE — MOBILE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .yubeen-ws-prep-section {
        padding: 0 !important;
    }

    .yubeen-ws-prep-inner {
        width: min(88vw, 560px) !important;
    }

    .yubeen-ws-prep-block {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 68px 0 78px 0 !important;
    }

    .yubeen-ws-prep-copy h2 {
        font-size: 36px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
    }

    .yubeen-ws-prep-copy > p {
        font-size: 15px !important;
    }

    .yubeen-ws-prep-check-item {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        min-height: auto !important;
    }

    .yubeen-ws-prep-check-number {
        display: none !important;
    }

    .yubeen-ws-prep-visual {
        min-height: auto !important;
        display: block !important;
        padding: 0 !important;
    }

    .yubeen-ws-prep-pack {
        width: 100% !important;
        padding: 22px !important;
        border-radius: 24px !important;
    }

    .yubeen-ws-prep-pack-metrics {
        grid-template-columns: 1fr !important;
    }

    .yubeen-ws-prep-pack-metrics div {
        min-height: auto !important;
    }

    .yubeen-ws-prep-attachment-grid {
        grid-template-columns: 1fr !important;
    }

    .yubeen-ws-prep-attachment-grid div,
    .yubeen-ws-prep-attachment-card {
        min-height: 92px !important;
    }

    .yubeen-ws-prep-secure {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }
}


/* ---------------------------------------------------------------------------------------------------------
   19. REDUCED MOTION ACCESSIBILITY
   --------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .yubeen-ws-prep-check-item,
    .yubeen-ws-prep-attachment-card,
    .yubeen-ws-prep-submit,
    .yubeen-ws-prep-visual::before,
    .yubeen-ws-prep-progress span {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .yubeen-ws-prep-pack-icon::after {
        display: none !important;
    }
}
/* =========================================================================================================
第三屏结束========================================================================================================= */
/* =========================================================================================================
第四屏开始========================================================================================================= */
/* =========================================================================================================
   WARRANTY & SERVICE — SUPPORT ROUTING SECTION
   ---------------------------------------------------------------------------------------------------------
   Purpose:
   - Final action-routing screen before the footer.
   - Guides users to the correct next step after reading warranty scope and preparation information.
   - Uses one main action plus three compact route rows.
   - No product image is used here to avoid visual repetition with previous screens.
   - No JavaScript required.
   ---------------------------------------------------------------------------------------------------------
   Elementor:
   - Outer Elementor Container class: yubeen-ws-routing-elementor
   - HTML section class: yubeen-ws-routing-section
   ========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. ELEMENTOR WRAPPER RESET
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-elementor {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}


/* ---------------------------------------------------------------------------------------------------------
   02. SECTION BASE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-section {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 96px 0 104px 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at 8% 15%, rgba(215, 25, 32, 0.075) 0%, transparent 30%),
        radial-gradient(circle at 94% 72%, rgba(215, 25, 32, 0.050) 0%, transparent 28%),
        linear-gradient(180deg, #f6f7f9 0%, #ffffff 48%, #f4f6f8 100%) !important;

    box-sizing: border-box !important;
}


/* Light technical grid. Keep it subtle to avoid a PPT feeling. */
.yubeen-ws-routing-section::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        linear-gradient(rgba(17, 19, 24, 0.020) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 19, 24, 0.020) 1px, transparent 1px) !important;

    background-size: 78px 78px !important;

    opacity: 0.16 !important;

    pointer-events: none !important;
}


/* Soft routing atmosphere arc on the left-bottom side. */
.yubeen-ws-routing-section::after {
    content: "" !important;

    position: absolute !important;
    left: -180px !important;
    bottom: -220px !important;

    width: 640px !important;
    height: 640px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(215, 25, 32, 0.10) !important;

    box-shadow:
        0 0 0 82px rgba(215, 25, 32, 0.024),
        0 0 0 164px rgba(215, 25, 32, 0.016) !important;

    pointer-events: none !important;
}


.yubeen-ws-routing-inner {
    position: relative !important;
    z-index: 2 !important;

    width: min(92vw, 1520px) !important;
    max-width: 1520px !important;

    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: minmax(340px, 0.74fr) minmax(760px, 1.26fr) !important;

    align-items: center !important;

    gap: 78px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   03. LEFT COPY
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-copy {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.yubeen-ws-routing-kicker {
    display: inline-block !important;

    margin: 0 0 24px 0 !important;

    color: #d71920 !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
}

.yubeen-ws-routing-copy h2 {
    max-width: 520px !important;

    margin: 0 0 22px 0 !important;

    color: #080a0f !important;

    font-size: clamp(44px, 3.35vw, 50px) !important;
    line-height: 1.05 !important;
    font-weight: 880 !important;

    letter-spacing: -1.55px !important;
}

.yubeen-ws-routing-copy > p {
    max-width: 480px !important;

    margin: 0 0 48px 0 !important;

    color: rgba(17, 19, 24, 0.64) !important;

    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 520 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   04. LEFT ROUTING STEPS
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-steps {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 28px !important;

    margin: 0 0 44px 0 !important;
    padding: 0 !important;
}


/* Vertical connection line */
.yubeen-ws-routing-steps::before {
    content: "" !important;

    position: absolute !important;
    left: 38px !important;
    top: 58px !important;
    bottom: 58px !important;

    width: 1px !important;

    background: linear-gradient(
        180deg,
        rgba(17, 19, 24, 0.06) 0%,
        rgba(215, 25, 32, 0.25) 48%,
        rgba(17, 19, 24, 0.06) 100%
    ) !important;

    pointer-events: none !important;
}

.yubeen-ws-routing-step {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.yubeen-ws-routing-step-icon {
    position: relative !important;
    z-index: 2 !important;

    width: 76px !important;
    height: 76px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    color: #ff2b32 !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 100%) !important;

    border: 1px solid rgba(17, 19, 24, 0.08) !important;

    box-shadow:
        0 18px 42px rgba(17, 19, 24, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease !important;
}

.yubeen-ws-routing-step:hover .yubeen-ws-routing-step-icon {
    transform: translateY(-3px) scale(1.03) !important;
    color: #d71920 !important;

    box-shadow:
        0 22px 48px rgba(215, 25, 32, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.yubeen-ws-routing-step-icon svg {
    width: 31px !important;
    height: 31px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-routing-step strong {
    display: block !important;

    margin: 0 0 8px 0 !important;

    color: #111318 !important;

    font-size: 20px !important;
    line-height: 1.22 !important;
    font-weight: 860 !important;
}

.yubeen-ws-routing-step strong span {
    display: inline-block !important;

    min-width: 34px !important;

    margin-right: 8px !important;

    color: #d71920 !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 880 !important;
    letter-spacing: 0.4px !important;
}

.yubeen-ws-routing-step em {
    display: block !important;

    max-width: 390px !important;

    color: rgba(17, 19, 24, 0.60) !important;

    font-size: 15.5px !important;
    line-height: 1.58 !important;
    font-style: normal !important;
    font-weight: 520 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   05. LEFT NOTE
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-note {
    width: min(100%, 420px) !important;

    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 22px !important;

    padding: 24px !important;

    border-radius: 22px !important;

    background: rgba(255, 255, 255, 0.68) !important;

    border: 1px solid rgba(17, 19, 24, 0.08) !important;

    box-shadow:
        0 18px 44px rgba(17, 19, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-routing-note > span {
    width: 56px !important;
    height: 56px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    color: #d71920 !important;

    background: rgba(215, 25, 32, 0.075) !important;
    border: 1px solid rgba(215, 25, 32, 0.12) !important;
}

.yubeen-ws-routing-note svg {
    width: 27px !important;
    height: 27px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-routing-note strong {
    display: block !important;

    margin: 0 0 7px 0 !important;

    color: #111318 !important;

    font-size: 16px !important;
    line-height: 1.32 !important;
    font-weight: 860 !important;
}

.yubeen-ws-routing-note em {
    display: block !important;

    color: rgba(17, 19, 24, 0.58) !important;

    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-style: normal !important;
    font-weight: 520 !important;
}


/* ---------------------------------------------------------------------------------------------------------
   06. RIGHT PANEL
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-panel {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 40px !important;

    border-radius: 32px !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.80) 100%) !important;

    border: 1px solid rgba(17, 19, 24, 0.08) !important;

    box-shadow:
        0 34px 96px rgba(17, 19, 24, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    box-sizing: border-box !important;
}

.yubeen-ws-routing-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    margin: 0 0 24px 0 !important;
}

.yubeen-ws-routing-panel-head > span:first-child {
    color: #d71920 !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.yubeen-ws-routing-secure-badge {
    min-height: 42px !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 10px !important;

    padding: 0 16px !important;

    border-radius: 14px !important;

    color: rgba(17, 19, 24, 0.70) !important;

    background: rgba(255, 255, 255, 0.76) !important;

    border: 1px solid rgba(17, 19, 24, 0.08) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 720 !important;

    box-sizing: border-box !important;
}

.yubeen-ws-routing-secure-badge svg {
    width: 19px !important;
    height: 19px !important;

    color: #d71920 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ---------------------------------------------------------------------------------------------------------
   07. PRIMARY ACTION CARD
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-primary {
    position: relative !important;

    min-height: 326px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;

    align-items: center !important;

    gap: 32px !important;

    margin: 0 0 18px 0 !important;
    padding: 36px !important;

    border-radius: 26px !important;

    background:
        radial-gradient(circle at 82% 50%, rgba(215, 25, 32, 0.10) 0%, transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 246, 246, 0.72) 100%) !important;

    border: 1px solid rgba(215, 25, 32, 0.44) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease !important;
}

.yubeen-ws-routing-primary:hover {
    transform: translateY(-3px) !important;

    border-color: rgba(215, 25, 32, 0.62) !important;

    box-shadow:
        0 20px 52px rgba(215, 25, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.yubeen-ws-routing-primary-copy {
    position: relative !important;
    z-index: 2 !important;
}

.yubeen-ws-routing-recommended {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 28px !important;

    margin: 0 0 18px 0 !important;
    padding: 0 13px !important;

    border-radius: 999px !important;

    color: #d71920 !important;

    background: rgba(215, 25, 32, 0.085) !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 0.4px !important;
}

.yubeen-ws-routing-primary h3 {
    margin: 0 0 12px 0 !important;

    color: #080a0f !important;

    font-size: 35px !important;
    line-height: 1.14 !important;
    font-weight: 880 !important;

    letter-spacing: -0.9px !important;
}

.yubeen-ws-routing-primary p {
    margin: 0 0 24px 0 !important;

    color: rgba(17, 19, 24, 0.62) !important;

    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 520 !important;
}

.yubeen-ws-routing-primary-points {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin: 0 0 28px 0 !important;
}

.yubeen-ws-routing-primary-points span {
    display: flex !important;
    align-items: flex-start !important;

    gap: 10px !important;

    color: rgba(17, 19, 24, 0.72) !important;

    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 620 !important;
}

.yubeen-ws-routing-primary-points svg {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin-top: 1px !important;

    color: #ff2b32 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-routing-primary-button {
    min-height: 60px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    padding: 0 40px !important;

    border-radius: 15px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    background: linear-gradient(135deg, #ff2b32 0%, #d71920 100%) !important;

    border: 1px solid rgba(255, 43, 50, 0.72) !important;

    box-shadow:
        0 20px 42px rgba(215, 25, 32, 0.32) !important;

    font-size: 17.5px !important;
    line-height: 1 !important;
    font-weight: 860 !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease !important;
}

.yubeen-ws-routing-primary-button:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 24px 48px rgba(215, 25, 32, 0.40) !important;
}

.yubeen-ws-routing-primary-button span {
    transition: transform 0.22s ease !important;
}

.yubeen-ws-routing-primary-button:hover span {
    transform: translateX(4px) !important;
}


/* Smaller and more semantic core visual.
   The center icon now represents document confirmation, not the Yubeen logo. */
.yubeen-ws-routing-orbit {
    position: relative !important;
    z-index: 1 !important;

    width: 220px !important;
    height: 220px !important;

    margin: 0 auto !important;

    border-radius: 50% !important;

    background:
        radial-gradient(circle, rgba(215, 25, 32, 0.075) 0%, rgba(215, 25, 32, 0.026) 32%, transparent 64%) !important;

    border: 1px solid rgba(215, 25, 32, 0.085) !important;
}

.yubeen-ws-routing-orbit::before,
.yubeen-ws-routing-orbit::after {
    content: "" !important;

    position: absolute !important;
    inset: 34px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(215, 25, 32, 0.10) !important;
}

.yubeen-ws-routing-orbit::after {
    inset: 66px !important;

    border-style: dashed !important;
    opacity: 0.48 !important;
}

.yubeen-ws-routing-orbit-core {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 66px !important;
    height: 66px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    color: rgba(215, 25, 32, 0.86) !important;

    background:
        linear-gradient(180deg, #ffffff 0%, #fff6f6 100%) !important;

    box-shadow:
        0 12px 28px rgba(215, 25, 32, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.yubeen-ws-routing-orbit-core svg {
    width: 34px !important;
    height: 34px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-routing-orbit i {
    position: absolute !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: rgba(255, 43, 50, 0.78) !important;

    box-shadow: 0 0 0 5px rgba(215, 25, 32, 0.07) !important;
}

.yubeen-ws-routing-orbit i:nth-child(2) {
    left: 30px !important;
    top: 72px !important;
}

.yubeen-ws-routing-orbit i:nth-child(3) {
    right: 36px !important;
    top: 48px !important;
}

.yubeen-ws-routing-orbit i:nth-child(4) {
    right: 22px !important;
    bottom: 70px !important;
}

.yubeen-ws-routing-orbit i:nth-child(5) {
    left: 56px !important;
    bottom: 38px !important;
}




/* ---------------------------------------------------------------------------------------------------------
   08. ROUTE ROWS — COMPRESSED HEIGHT
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-list {
    display: flex !important;
    flex-direction: column !important;

    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-ws-routing-row {
    position: relative !important;

    min-height: 84px !important;

    display: grid !important;
    grid-template-columns: 54px 54px minmax(0, 1fr) 184px !important;

    align-items: center !important;

    gap: 18px !important;

    padding: 12px 20px !important;

    border-radius: 18px !important;

    color: inherit !important;
    text-decoration: none !important;

    background: rgba(255, 255, 255, 0.74) !important;

    border: 1px solid rgba(17, 19, 24, 0.075) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;

    overflow: hidden !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease !important;

    box-sizing: border-box !important;
}

.yubeen-ws-routing-row::before {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 3px !important;

    background: #d71920 !important;

    transform: scaleY(0) !important;
    transform-origin: center !important;

    transition: transform 0.22s ease !important;
}

.yubeen-ws-routing-row:hover {
    transform: translateY(-3px) !important;

    background: rgba(255, 255, 255, 0.92) !important;

    border-color: rgba(215, 25, 32, 0.22) !important;

    box-shadow:
        0 16px 42px rgba(17, 19, 24, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

.yubeen-ws-routing-row:hover::before {
    transform: scaleY(1) !important;
}

.yubeen-ws-routing-row-number {
    color: #d71920 !important;

    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 880 !important;
}

.yubeen-ws-routing-row-icon {
    width: 50px !important;
    height: 50px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    color: #d71920 !important;

    background: rgba(215, 25, 32, 0.065) !important;

    border: 1px solid rgba(215, 25, 32, 0.10) !important;
}

.yubeen-ws-routing-row-icon svg {
    width: 26px !important;
    height: 26px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.yubeen-ws-routing-row-copy strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #111318 !important;

    font-size: 18px !important;
    line-height: 1.22 !important;
    font-weight: 860 !important;
}

.yubeen-ws-routing-row-copy em {
    display: block !important;

    max-width: 430px !important;

    color: rgba(17, 19, 24, 0.68) !important;

    font-size: 14px !important;
    line-height: 1.46 !important;
    font-style: normal !important;
    font-weight: 560 !important;
}

/* Route row action area
   Purpose:
   - Make the right-side action text more clickable.
   - Keep the compact route-row style.
   - Do not turn it into a heavy button, otherwise it will compete with the main CTA. */
.yubeen-ws-routing-row-action {
    position: relative !important;

    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 13px !important;

    padding-left: 26px !important;

    border-left: 1px dashed rgba(17, 19, 24, 0.13) !important;

    color: #d71920 !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}

.yubeen-ws-routing-row-action b {
    margin-left: 2px !important;

    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 640 !important;

    transition: transform 0.22s ease !important;
}

.yubeen-ws-routing-row:hover .yubeen-ws-routing-row-action b {
    transform: translateX(5px) !important;
}


/* Bottom auxiliary process link
   Purpose:
   - Keep it as a light secondary link, not a bottom bar.
   - Align it to the right side of the routing panel.
   - Slightly increase readability so it does not look like leaked small text. */
.yubeen-ws-routing-process-link {
    width: fit-content !important;

    display: inline-flex !important;
    align-items: center !important;

    align-self: flex-end !important;

    gap: 10px !important;

    margin: 24px 0 0 0 !important;

    color: rgba(17, 19, 24, 0.72) !important;
    text-decoration: none !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 780 !important;

    border-bottom: 1px dashed rgba(17, 19, 24, 0.30) !important;

    transition:
        color 0.22s ease,
        border-color 0.22s ease !important;
}

.yubeen-ws-routing-process-link span {
    color: #d71920 !important;

    transition: transform 0.22s ease !important;
}

.yubeen-ws-routing-process-link:hover {
    color: #d71920 !important;

    border-color: rgba(215, 25, 32, 0.45) !important;
}

.yubeen-ws-routing-process-link:hover span {
    transform: translateX(4px) !important;
}


/* ---------------------------------------------------------------------------------------------------------
   09. ACCESSIBILITY
   --------------------------------------------------------------------------------------------------------- */

.yubeen-ws-routing-primary-button:focus-visible,
.yubeen-ws-routing-row:focus-visible,
.yubeen-ws-routing-process-link:focus-visible {
    outline: 3px solid rgba(215, 25, 32, 0.32) !important;
    outline-offset: 4px !important;
}


/* ---------------------------------------------------------------------------------------------------------
   10. ANCHOR SCROLL OFFSET
   --------------------------------------------------------------------------------------------------------- */

#warranty-coverage,
#service-process {
    scroll-margin-top: 110px !important;
}


/* ---------------------------------------------------------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .yubeen-ws-routing-inner {
        grid-template-columns: minmax(320px, 0.78fr) minmax(620px, 1.22fr) !important;
        gap: 56px !important;
    }

    .yubeen-ws-routing-panel {
        padding: 30px !important;
    }

    .yubeen-ws-routing-primary {
        grid-template-columns: 1fr 220px !important;
    }

    .yubeen-ws-routing-orbit {
        width: 220px !important;
        height: 220px !important;
    }
}


@media (max-width: 1100px) {
    .yubeen-ws-routing-section {
        padding: 82px 0 92px 0 !important;
    }

    .yubeen-ws-routing-inner {
        grid-template-columns: 1fr !important;
        gap: 52px !important;
    }

    .yubeen-ws-routing-copy h2,
    .yubeen-ws-routing-copy > p {
        max-width: 720px !important;
    }

    .yubeen-ws-routing-steps {
        max-width: 720px !important;
    }

    .yubeen-ws-routing-note {
        width: min(100%, 620px) !important;
    }

    .yubeen-ws-routing-primary {
        grid-template-columns: 1fr 240px !important;
    }
}


@media (max-width: 767px) {
    .yubeen-ws-routing-section {
        padding: 68px 0 76px 0 !important;
    }

    .yubeen-ws-routing-inner {
        width: min(88vw, 560px) !important;
        gap: 38px !important;
    }

    .yubeen-ws-routing-copy h2 {
        font-size: 39px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
    }

    .yubeen-ws-routing-copy > p {
        margin-bottom: 36px !important;

        font-size: 15.5px !important;
        line-height: 1.65 !important;
    }

    .yubeen-ws-routing-steps {
        gap: 22px !important;
        margin-bottom: 30px !important;
    }

    .yubeen-ws-routing-steps::before {
        left: 27px !important;
        top: 46px !important;
        bottom: 46px !important;
    }

    .yubeen-ws-routing-step {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .yubeen-ws-routing-step-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .yubeen-ws-routing-step-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .yubeen-ws-routing-step strong {
        font-size: 17px !important;
    }

    .yubeen-ws-routing-step strong span {
        display: block !important;
        margin: 0 0 5px 0 !important;
    }

    .yubeen-ws-routing-step em {
        font-size: 14px !important;
    }

    .yubeen-ws-routing-note {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        padding: 18px !important;
    }

    .yubeen-ws-routing-note > span {
        width: 44px !important;
        height: 44px !important;
    }

    .yubeen-ws-routing-panel {
        padding: 20px !important;
        border-radius: 24px !important;
    }

    .yubeen-ws-routing-panel-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .yubeen-ws-routing-primary {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        padding: 24px !important;
    }

    .yubeen-ws-routing-primary h3 {
        font-size: 27px !important;
    }

    .yubeen-ws-routing-primary-points {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .yubeen-ws-routing-orbit {
        display: none !important;
    }

    .yubeen-ws-routing-primary-button {
        width: 100% !important;
    }

    .yubeen-ws-routing-row {
        grid-template-columns: 42px 50px minmax(0, 1fr) !important;
        gap: 14px !important;
        min-height: auto !important;
        padding: 16px !important;
    }

    .yubeen-ws-routing-row-number {
        font-size: 20px !important;
    }

    .yubeen-ws-routing-row-icon {
        width: 46px !important;
        height: 46px !important;
    }

    .yubeen-ws-routing-row-icon svg {
        width: 23px !important;
        height: 23px !important;
    }

    .yubeen-ws-routing-row-action {
        grid-column: 2 / 4 !important;

        min-height: auto !important;

        justify-content: flex-start !important;

        padding: 10px 0 0 0 !important;

        border-left: 0 !important;
        border-top: 1px dashed rgba(17, 19, 24, 0.12) !important;
    }

    .yubeen-ws-routing-process-link {
        margin-left: 0 !important;
    }
}


/* =========================================================================================================
第四屏结束========================================================================================================= */
/* =========================================================================================================
   SITE ASSETS v0.15.0 — LOCAL URL NORMALIZATION
   The Elementor markup currently carries the same image as a Local absolute URL in an inline custom property.
   Keep the visual unchanged while making the asset portable to the production host.
   ========================================================================================================= */
.yubeen-ws-prep-block[data-prep-widget] {
    --yubeen-prep-bg: url("/wp-content/uploads/2026/07/ChatGPT-Image-2026年7月9日-09_40_11.png") !important;
}


/* =========================================================================================================
   SITE ASSETS v0.16.0 — WARRANTY ROUTING ACTION LABEL FIX
   Keep compact routing action labels such as “View Downloads” on one line.
   On mobile the action area already spans the lower row, so nowrap remains safe.
   ========================================================================================================= */
.yubeen-ws-routing-row-action {
    white-space: nowrap !important;
}