/* ==========================================================================
   SOURCE: 00_Global_CSS — style block 1
   ========================================================================== */
:root {
    --yb-bg: #050505;
    --yb-bg-soft: #0b0b0d;
    --yb-panel: #101012;
    --yb-panel-soft: rgba(255, 255, 255, 0.045);

    --yb-text: #ffffff;
    --yb-text-soft: #d4d4d8;
    --yb-text-muted: #929298;

    --yb-accent: #e31e24;
    --yb-accent-hover: #ff2b31;

    --yb-line: rgba(255, 255, 255, 0.14);
    --yb-line-soft: rgba(255, 255, 255, 0.08);

    --yb-content-width: 1440px;
    --yb-radius-small: 4px;
    --yb-radius-medium: 10px;

    --yb-font:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;
}

html {
    scroll-behavior: smooth;
}

.yb-product-page,
.yb-product-page * {
    box-sizing: border-box;
}

.yb-product-page {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    overflow-y: visible;
    background: var(--yb-bg);
    color: var(--yb-text);
    font-family: var(--yb-font);
}

.yb-product-page img {
    display: block;
    max-width: 100%;
}

.yb-product-page a {
    color: inherit;
}

.yb-section-inner {
    position: relative;
    width: min(
        var(--yb-content-width),
        calc(100% - 64px)
    );
    margin: 0 auto;
}

.yb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 25px;
    border: 1px solid transparent;
    border-radius: var(--yb-radius-small);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.yb-button:hover {
    transform: translateY(-2px);
}

.yb-button--primary {
    background: var(--yb-accent);
    color: #ffffff;
}

.yb-button--primary:hover {
    background: var(--yb-accent-hover);
    color: #ffffff;
}

.yb-button--secondary {
    border-color: var(--yb-line);
    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.yb-button--secondary:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.yb-product-page .yubeen-spec-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
}

.yb-product-page .yubeen-spec-unit {
    margin-left: 0.18em;
    font-size: 0.72em;
    font-weight: 500;
    color: inherit;
}

@media (max-width: 1024px) {
    .yb-section-inner {
        width: min(
            var(--yb-content-width),
            calc(100% - 48px)
        );
    }
}

@media (max-width: 767px) {
    .yb-section-inner {
        width: min(
            var(--yb-content-width),
            calc(100% - 32px)
        );
    }

    .yb-button {
        min-height: 48px;
        padding: 0 20px;
    }
}


/* =========================================================
   HIDDEN PRODUCT SPECIFICATION SOURCE
   参数表保留在DOM中供Bridge读取，但不显示、不占页面空间。
   ========================================================= */

#product-specs {
    display: none !important;
}

/* ==========================================================================
   SOURCE: 01_Hero_HTML — style block 1
   ========================================================================== */
/* ==========================================================
   01_Hero_ST35Pro
   Version 2.0 — Immersive Editorial Hero
   ========================================================== */

.yb-hero--st35pro,
.yb-hero--st35pro * {
    box-sizing: border-box;
}

.yb-hero--st35pro {
    --hero-bg: #030303;
    --hero-text: #ffffff;
    --hero-soft: rgba(255, 255, 255, 0.72);
    --hero-muted: rgba(255, 255, 255, 0.42);
    --hero-line: rgba(255, 255, 255, 0.14);
    --hero-line-soft: rgba(255, 255, 255, 0.08);
    --hero-red: var(--yb-accent, #e31e24);

    position: relative;

    width: 100%;
    height: clamp(680px, calc(100svh - 78px), 840px);
    min-height: 680px;

    overflow: hidden;

    background: var(--hero-bg);
    color: var(--hero-text);

    isolation: isolate;
}


/* ==========================================================
   Centered stage
   ========================================================== */

.yb-hero--st35pro .yb-hero__stage {
    --hero-pointer-x: 0;
    --hero-pointer-y: 0;

    position: relative;

    width: 100%;
    max-width: 1920px;
    height: 100%;

    margin: 0 auto;

    overflow: hidden;

    background: #040507;

    isolation: isolate;
}


/* ==========================================================
   Full-stage image
   ========================================================== */

.yb-hero--st35pro .yb-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    background: #07101b;
}

.yb-hero--st35pro .yb-hero__media img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;

    /*
     * Winter field composition:
     * visual subject sits on the right side,
     * so keep more of the right-hand image visible.
     */
    object-position: 62% center;

    transform:
        translate3d(
            calc(var(--hero-pointer-x) * -10px),
            calc(var(--hero-pointer-y) * -6px),
            0
        )
        scale(1.035);

    filter:
        saturate(1.08)
        contrast(1.02)
        brightness(1.06);

    will-change: transform;

    animation:
        ybHeroImageReveal
        1.25s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

    transition:
        transform
        240ms
        ease-out;
}


/* ==========================================================
   Image blending
   The left side remains readable while the product and person
   stay visible on the right without a separate black panel.
   ========================================================== */

.yb-hero--st35pro .yb-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    /*
     * Winter composition:
     * content is on the left, so readability is strongest
     * on the left and fades toward the product on the right.
     */
    background:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, 0.90) 0%,
            rgba(3, 3, 3, 0.82) 14%,
            rgba(2, 3, 5, 0.62) 30%,
            rgba(0, 0, 0, 0.30) 45%,
            rgba(0, 0, 0, 0.08) 58%,
            rgba(0, 0, 0, 0.01) 72%,
            rgba(0, 0, 0, 0.00) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.00) 38%,
            rgba(0, 0, 0, 0.00) 64%,
            rgba(0, 0, 0, 0.34) 100%
        );
}

.yb-hero--st35pro .yb-hero__vignette {
    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    box-shadow:
        inset 0 0 90px rgba(0, 0, 0, 0.18),
        inset 0 -80px 90px rgba(0, 0, 0, 0.30);

    background:
        radial-gradient(
            circle at 62% 48%,
            transparent 0%,
            transparent 58%,
            rgba(0, 0, 0, 0.08) 80%,
            rgba(0, 0, 0, 0.23) 100%
        );
}

.yb-hero--st35pro .yb-hero__grain {
    position: absolute;
    inset: 0;
    z-index: 3;

    opacity: 0.08;

    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 0,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 6px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.008) 0,
            rgba(255, 255, 255, 0.008) 1px,
            transparent 1px,
            transparent 5px
        );
}


/* ==========================================================
   Ambient movement
   ========================================================== */

.yb-hero--st35pro .yb-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: 3;

    overflow: hidden;

    pointer-events: none;
}

.yb-hero--st35pro .yb-hero__ambient-red {
    position: absolute;
    top: 12%;
    right: 8%;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(227, 30, 36, 0.13) 0%,
            rgba(227, 30, 36, 0.03) 36%,
            rgba(227, 30, 36, 0) 72%
        );

    filter: blur(22px);

    transform:
        translate3d(
            calc(var(--hero-pointer-x) * 13px),
            calc(var(--hero-pointer-y) * 9px),
            0
        );

    animation:
        ybHeroRedGlow
        11s
        ease-in-out
        infinite;
}

.yb-hero--st35pro .yb-hero__ambient-cool {
    position: absolute;
    left: 20%;
    bottom: -26%;

    width: 620px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(69, 104, 160, 0.14) 0%,
            rgba(69, 104, 160, 0) 70%
        );

    filter: blur(42px);

    transform:
        translate3d(
            calc(var(--hero-pointer-x) * -8px),
            calc(var(--hero-pointer-y) * -5px),
            0
        );

    animation:
        ybHeroCoolGlow
        14s
        ease-in-out
        infinite;
}


/* ==========================================================
   Editorial index
   ========================================================== */

.yb-hero--st35pro .yb-hero__index {
    position: absolute;
    top: clamp(24px, 3vw, 42px);
    right: clamp(28px, 3.5vw, 58px);
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.yb-hero--st35pro .yb-hero__index span {
    color: var(--hero-red);
}

.yb-hero--st35pro .yb-hero__index i {
    width: 25px;
    height: 1px;

    background: rgba(255, 255, 255, 0.24);
}

.yb-hero--st35pro .yb-hero__index small {
    font: inherit;
}


/* ==========================================================
   Content
   ========================================================== */

.yb-hero--st35pro .yb-hero__inner {
    position: relative;
    z-index: 5;

    display: grid;

    /*
     * Winter composition:
     * editorial content on the left,
     * product / person remain visible on the right.
     */
    grid-template-columns:
        minmax(500px, 48%)
        minmax(0, 52%);

    align-items: center;

    height: 100%;
    min-height: 0;
}

.yb-hero--st35pro .yb-hero__content {
    grid-column: 1;

    width: 100%;
    max-width: 680px;

    padding:
        clamp(72px, 7vh, 94px)
        clamp(22px, 2.4vw, 42px)
        clamp(64px, 6vh, 80px)
        0;
}

.yb-hero--st35pro .yb-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 19px;

    color: rgba(255, 255, 255, 0.66);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.yb-hero--st35pro .yb-hero__eyebrow-line {
    width: 33px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--hero-red);
}

.yb-hero--st35pro .yb-hero__title {
    margin: 0 0 10px;

    color: #ffffff;

    font-size:
        clamp(
            78px,
            7.2vw,
            112px
        );

    font-weight: 820;
    line-height: 0.88;
    letter-spacing: -0.072em;

    text-shadow:
        0 16px 34px
        rgba(0, 0, 0, 0.32);
}

.yb-hero--st35pro .yb-hero__title .yubeen-spec-value {
    display: inline;
}

.yb-hero--st35pro .yb-hero__tagline {
    display: grid;
    gap: 1px;

    margin: 0 0 22px;

    color: #ffffff;

    font-size:
        clamp(
            28px,
            2.65vw,
            43px
        );

    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.yb-hero--st35pro .yb-hero__tagline-muted {
    color: rgba(255, 255, 255, 0.54);
}

.yb-hero--st35pro .yb-hero__description {
    max-width: 535px;

    margin: 0 0 29px;

    color: var(--hero-soft);

    font-size: 15px;
    line-height: 1.72;
}


/* ==========================================================
   CTA buttons
   ========================================================== */

.yb-hero--st35pro .yb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;

    margin-bottom: 43px;
}

.yb-hero--st35pro .yb-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 48px;

    padding: 0 21px;

    border-radius: 2px;

    font-size: 12px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: 0.015em;

    text-decoration: none;

    transition:
        color 190ms ease,
        background-color 190ms ease,
        border-color 190ms ease,
        transform 190ms ease,
        box-shadow 190ms ease;
}

.yb-hero--st35pro .yb-hero__button i {
    font-style: normal;

    transition:
        transform
        190ms
        ease;
}

.yb-hero--st35pro .yb-hero__button:hover {
    transform: translateY(-2px);
}

.yb-hero--st35pro .yb-hero__button:hover i {
    transform: translate3d(3px, 3px, 0);
}

.yb-hero--st35pro .yb-hero__button--primary {
    border: 1px solid var(--hero-red);

    background: var(--hero-red);
    color: #ffffff;

    box-shadow:
        0 14px 34px
        rgba(227, 30, 36, 0.18);
}

.yb-hero--st35pro .yb-hero__button--primary:hover {
    border-color: #ff3137;

    background: #ff3137;

    box-shadow:
        0 18px 38px
        rgba(227, 30, 36, 0.25);
}

.yb-hero--st35pro .yb-hero__button--secondary {
    border:
        1px
        solid
        rgba(255, 255, 255, 0.25);

    background:
        rgba(4, 5, 7, 0.28);

    color:
        rgba(255, 255, 255, 0.86);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.yb-hero--st35pro .yb-hero__button--secondary:hover {
    border-color:
        rgba(255, 255, 255, 0.52);

    background:
        rgba(255, 255, 255, 0.075);

    color: #ffffff;
}


/* ==========================================================
   Dynamic specification rail
   This is deliberately less box-like than the old table.
   ========================================================== */

.yb-hero--st35pro .yb-hero__specs {
    position: relative;

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

    max-width: 650px;

    border-top:
        1px
        solid
        var(--hero-line);

    border-bottom:
        1px
        solid
        var(--hero-line);
}

.yb-hero--st35pro .yb-hero__specs::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 78px;
    height: 2px;

    background: var(--hero-red);
}

.yb-hero--st35pro .yb-hero__spec {
    position: relative;

    min-width: 0;

    padding:
        20px
        18px
        20px
        0;
}

.yb-hero--st35pro .yb-hero__spec:not(:first-child) {
    padding-left: 20px;
}

.yb-hero--st35pro .yb-hero__spec:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 18px;
    right: 0;
    bottom: 18px;

    width: 1px;

    background:
        var(--hero-line-soft);
}

.yb-hero--st35pro .yb-hero__spec-number {
    display: block;

    margin-bottom: 10px;

    color: var(--hero-red);

    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.13em;
}

.yb-hero--st35pro .yb-hero__spec-label {
    display: block;

    margin-bottom: 7px;

    color: var(--hero-muted);

    font-size: 9px;
    font-weight: 760;
    line-height: 1.3;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.yb-hero--st35pro .yb-hero__spec-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    min-height: 25px;

    color: #ffffff;

    font-size:
        clamp(
            17px,
            1.4vw,
            22px
        );

    font-weight: 740;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.yb-hero--st35pro .yb-hero__spec-divider {
    color: var(--hero-red);
    font-weight: 420;
}

.yb-hero--st35pro .yb-hero__spec-value .yubeen-spec-unit {
    color: inherit;

    font-size: 0.66em;
    font-weight: 560;
}


/* ==========================================================
   Scene caption
   ========================================================== */

.yb-hero--st35pro .yb-hero__scene-caption {
    position: absolute;
    left: clamp(28px, 4vw, 70px);
    bottom: clamp(25px, 3vw, 46px);
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 13px;

    max-width: 330px;
}

.yb-hero--st35pro .yb-hero__scene-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border:
        2px
        solid
        rgba(255, 255, 255, 0.78);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(227, 30, 36, 0.14);
}

.yb-hero--st35pro .yb-hero__scene-caption div {
    display: grid;
    gap: 4px;
}

.yb-hero--st35pro .yb-hero__scene-caption small {
    color: var(--hero-red);

    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yb-hero--st35pro .yb-hero__scene-caption strong {
    color:
        rgba(255, 255, 255, 0.62);

    font-size: 9px;
    font-weight: 680;
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ==========================================================
   Scroll indicator
   ========================================================== */

.yb-hero--st35pro .yb-hero__scroll {
    position: absolute;
    right: clamp(21px, 2vw, 34px);
    bottom: clamp(27px, 3vw, 46px);
    z-index: 6;

    display: flex;
    align-items: center;
    gap: 10px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color
        180ms
        ease;
}

.yb-hero--st35pro .yb-hero__scroll:hover {
    color: #ffffff;
}

.yb-hero--st35pro .yb-hero__scroll i {
    display: block;

    width: 42px;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.34);
}

.yb-hero--st35pro .yb-hero__scroll b {
    color: var(--hero-red);

    font-size: 13px;
    font-weight: 500;

    animation:
        ybHeroScrollArrow
        1.7s
        ease-in-out
        infinite;
}


/* ==========================================================
   Initial reveal
   ========================================================== */

.yb-hero--st35pro .yb-hero__reveal {
    opacity: 0;

    transform:
        translate3d(0, 22px, 0);

    animation:
        ybHeroContentReveal
        0.72s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

.yb-hero--st35pro .yb-hero__reveal--1 {
    animation-delay: 0.10s;
}

.yb-hero--st35pro .yb-hero__reveal--2 {
    animation-delay: 0.17s;
}

.yb-hero--st35pro .yb-hero__reveal--3 {
    animation-delay: 0.24s;
}

.yb-hero--st35pro .yb-hero__reveal--4 {
    animation-delay: 0.31s;
}

.yb-hero--st35pro .yb-hero__reveal--5 {
    animation-delay: 0.38s;
}

.yb-hero--st35pro .yb-hero__reveal--6 {
    animation-delay: 0.45s;
}


/* ==========================================================
   Desktop adaptations
   ========================================================== */

@media (min-width: 1600px) {

    .yb-hero--st35pro .yb-hero__inner {
        grid-template-columns:
            minmax(520px, 46%)
            minmax(0, 54%);
    }

    .yb-hero--st35pro .yb-hero__content {
        max-width: 700px;
    }

    .yb-hero--st35pro .yb-hero__title {
        font-size: 110px;
    }

}


@media
    (min-width: 1280px)
    and
    (max-width: 1599px) {

    .yb-hero--st35pro {
        height: clamp(680px, calc(100svh - 78px), 760px);
    }

    .yb-hero--st35pro .yb-hero__content {
        max-width: 620px;

        padding-left: 0;
        padding-right: 27px;
    }

    .yb-hero--st35pro .yb-hero__title {
        font-size:
            clamp(
                82px,
                7vw,
                99px
            );
    }

    .yb-hero--st35pro .yb-hero__tagline {
        font-size:
            clamp(
                28px,
                2.6vw,
                38px
            );
    }

}


@media
    (min-width: 1025px)
    and
    (max-width: 1279px) {

    .yb-hero--st35pro {
        height: 680px;
        min-height: 680px;
    }

    .yb-hero--st35pro .yb-hero__inner {
        grid-template-columns:
            minmax(455px, 53%)
            minmax(0, 47%);
    }

    .yb-hero--st35pro .yb-hero__content {
        max-width: 555px;

        padding-left: 0;
        padding-right: 22px;
    }

    .yb-hero--st35pro .yb-hero__title {
        font-size: 76px;
    }

    .yb-hero--st35pro .yb-hero__tagline {
        font-size: 29px;
    }

    .yb-hero--st35pro .yb-hero__description {
        font-size: 14px;
    }

    .yb-hero--st35pro .yb-hero__actions {
        margin-bottom: 34px;
    }

}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1024px) {

    .yb-hero--st35pro {
        height: 720px;
        min-height: 720px;
    }

    .yb-hero--st35pro .yb-hero__inner {
        grid-template-columns:
            minmax(400px, 58%)
            minmax(0, 42%);
    }

    .yb-hero--st35pro .yb-hero__content {
        max-width: 550px;

        padding:
            76px
            18px
            66px
            0;
    }

    .yb-hero--st35pro .yb-hero__title {
        font-size:
            clamp(
                65px,
                8vw,
                82px
            );
    }

    .yb-hero--st35pro .yb-hero__tagline {
        font-size: 29px;
    }

    .yb-hero--st35pro .yb-hero__description {
        font-size: 14px;
    }

    .yb-hero--st35pro .yb-hero__scene-caption {
        display: none;
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

    .yb-hero--st35pro {
        height: auto;
        min-height: 820px;
    }

    .yb-hero--st35pro .yb-hero__stage {
        min-height: 820px;
    }

    .yb-hero--st35pro .yb-hero__media img {
        object-position: center top;

        transform:
            scale(1.025);

        filter:
            saturate(1.06)
            contrast(1.02)
            brightness(1.04);
    }

    .yb-hero--st35pro .yb-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.00) 0%,
                rgba(0, 0, 0, 0.03) 31%,
                rgba(0, 0, 0, 0.32) 52%,
                rgba(2, 2, 3, 0.78) 72%,
                rgba(3, 3, 3, 0.92) 100%
            );
    }

    .yb-hero--st35pro .yb-hero__vignette {
        box-shadow:
            inset 0 -110px 110px rgba(0, 0, 0, 0.38);
    }

    .yb-hero--st35pro .yb-hero__index {
        top: 20px;
        right: 18px;
    }

    .yb-hero--st35pro .yb-hero__index small,
    .yb-hero--st35pro .yb-hero__index i {
        display: none;
    }

    .yb-hero--st35pro .yb-hero__inner {
        display: flex;
        align-items: flex-end;

        min-height: 820px;
    }

    .yb-hero--st35pro .yb-hero__content {
        width: 100%;
        max-width: none;

        padding:
            370px
            0
            42px;
    }

    .yb-hero--st35pro .yb-hero__eyebrow {
        margin-bottom: 13px;

        font-size: 9px;
    }

    .yb-hero--st35pro .yb-hero__title {
        margin-bottom: 8px;

        font-size:
            clamp(
                56px,
                17vw,
                78px
            );
    }

    .yb-hero--st35pro .yb-hero__tagline {
        margin-bottom: 16px;

        font-size:
            clamp(
                25px,
                7.8vw,
                31px
            );
    }

    .yb-hero--st35pro .yb-hero__description {
        margin-bottom: 23px;

        font-size: 13px;
        line-height: 1.62;
    }

    .yb-hero--st35pro .yb-hero__actions {
        margin-bottom: 28px;
    }

    .yb-hero--st35pro .yb-hero__button {
        flex: 1 1 145px;

        min-height: 47px;

        padding: 0 15px;

        font-size: 11px;
    }

    .yb-hero--st35pro .yb-hero__spec {
        padding:
            16px
            8px
            16px
            0;
    }

    .yb-hero--st35pro .yb-hero__spec:not(:first-child) {
        padding-left: 9px;
    }

    .yb-hero--st35pro .yb-hero__spec:not(:last-child)::after {
        top: 15px;
        bottom: 15px;
    }

    .yb-hero--st35pro .yb-hero__spec-number {
        margin-bottom: 7px;

        font-size: 6px;
    }

    .yb-hero--st35pro .yb-hero__spec-label {
        margin-bottom: 5px;

        font-size: 7px;
        letter-spacing: 0.05em;
    }

    .yb-hero--st35pro .yb-hero__spec-value {
        min-height: 19px;

        font-size: 12px;
    }

    .yb-hero--st35pro .yb-hero__scroll,
    .yb-hero--st35pro .yb-hero__scene-caption {
        display: none;
    }

}


/* Very small mobile */
@media (max-width: 390px) {

    .yb-hero--st35pro {
        min-height: 900px;
    }

    .yb-hero--st35pro .yb-hero__stage,
    .yb-hero--st35pro .yb-hero__inner {
        min-height: 900px;
    }

    .yb-hero--st35pro .yb-hero__content {
        padding-top: 360px;
    }

    .yb-hero--st35pro .yb-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .yb-hero--st35pro .yb-hero__specs {
        grid-template-columns: 1fr;
    }

    .yb-hero--st35pro .yb-hero__spec,
    .yb-hero--st35pro .yb-hero__spec:not(:first-child) {
        padding:
            12px
            0;
    }

    .yb-hero--st35pro .yb-hero__spec:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: auto;
        height: 1px;
    }

}


/* ==========================================================
   Ultra-wide
   ========================================================== */

@media (min-width: 1921px) {

    .yb-hero--st35pro {
        height: 840px;
        min-height: 840px;
    }

    .yb-hero--st35pro .yb-hero__stage {
        max-width: 1920px;
    }

}


/* ==========================================================
   Animation
   ========================================================== */

@keyframes ybHeroImageReveal {

    from {
        opacity: 0;

        transform:
            scale(1.08);
    }

    to {
        opacity: 1;
    }

}

@keyframes ybHeroContentReveal {

    from {
        opacity: 0;

        transform:
            translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);
    }

}

@keyframes ybHeroRedGlow {

    0%,
    100% {
        opacity: 0.74;

        transform:
            translate3d(
                calc(var(--hero-pointer-x) * 13px),
                calc(var(--hero-pointer-y) * 9px),
                0
            )
            scale(1);
    }

    50% {
        opacity: 1;

        transform:
            translate3d(
                calc(var(--hero-pointer-x) * 13px - 18px),
                calc(var(--hero-pointer-y) * 9px + 14px),
                0
            )
            scale(1.08);
    }

}

@keyframes ybHeroCoolGlow {

    0%,
    100% {
        transform:
            translate3d(
                calc(var(--hero-pointer-x) * -8px),
                calc(var(--hero-pointer-y) * -5px),
                0
            );
    }

    50% {
        transform:
            translate3d(
                calc(var(--hero-pointer-x) * -8px + 26px),
                calc(var(--hero-pointer-y) * -5px - 14px),
                0
            );
    }

}

@keyframes ybHeroScrollArrow {

    0%,
    100% {
        transform:
            translateY(-2px);
    }

    50% {
        transform:
            translateY(4px);
    }

}


/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .yb-hero--st35pro .yb-hero__media img,
    .yb-hero--st35pro .yb-hero__ambient-red,
    .yb-hero--st35pro .yb-hero__ambient-cool,
    .yb-hero--st35pro .yb-hero__reveal,
    .yb-hero--st35pro .yb-hero__scroll b {
        animation: none !important;
        transition: none !important;
    }

    .yb-hero--st35pro .yb-hero__reveal {
        opacity: 1;

        transform: none;
    }

}


/* ==========================================================================
   SOURCE: 01B_Page_Navigation_HTML — style block 1
   ========================================================================== */
/* =========================================================================
     ST35PRO PAGE NAVIGATION v1.3 — MINIMAL SECTION RAIL

     Why this version:
     - The previous floating rounded card looked like an extra app widget.
     - This version removes the large rounded container and heavy box shadow.
     - The navigation becomes a thin editorial section index integrated into
       the page, with evenly distributed items and a restrained red indicator.
     ========================================================================= */

  #yb-st35pro-pagenav-v13 {
    --yb-pnav-red: #ed1c2b;
    --yb-pnav-bg: rgba(8, 11, 16, 0.72);
    --yb-pnav-bg-fixed: rgba(8, 11, 16, 0.92);
    --yb-pnav-line: rgba(255, 255, 255, 0.08);
    --yb-pnav-text: rgba(255, 255, 255, 0.60);
    --yb-pnav-text-hover: rgba(255, 255, 255, 0.88);
    --yb-pnav-height: 48px;

    position: relative;
    z-index: 70;
    width: 100%;
    min-width: 0;
    color-scheme: dark;
    font-family: inherit;
  }

  #yb-st35pro-pagenav-v13,
  #yb-st35pro-pagenav-v13 * {
    box-sizing: border-box;
  }

  /* -------------------------------------------------------------------------
     OUTER BAR
     No floating card and no large radius. The bar reads as part of the page.
     ------------------------------------------------------------------------- */
  #yb-st35pro-pagenav-v13 .yb-pnav13__bar {
    position: relative;
    z-index: 80;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    border-bottom: 1px solid var(--yb-pnav-line);
    background:
      linear-gradient(
        180deg,
        rgba(12, 16, 22, 0.74) 0%,
        rgba(8, 11, 16, 0.68) 100%
      );
    transition:
      background-color 180ms ease,
      box-shadow 180ms ease,
      border-color 180ms ease;
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__bar.is-fixed {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
    background: var(--yb-pnav-bg-fixed);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__inner {
    width: min(1180px, calc(100% - 52px));
    margin: 0 auto;
  }

  /* -------------------------------------------------------------------------
     SECTION RAIL
     On desktop, items distribute across the full width so the row feels
     intentional instead of left-clustered inside a large empty container.
     ------------------------------------------------------------------------- */
  #yb-st35pro-pagenav-v13 .yb-pnav13__scroller {
    display: flex;
    width: 100%;
    min-height: var(--yb-pnav-height);
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__scroller::-webkit-scrollbar {
    display: none;
  }

  /* -------------------------------------------------------------------------
     LINKS
     No pill backgrounds. Active state uses white text and a short red rail.
     ------------------------------------------------------------------------- */
  #yb-st35pro-pagenav-v13 .yb-pnav13__link {
    display: inline-flex;
    position: relative;
    min-height: var(--yb-pnav-height);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 1px 8px 0;
    color: var(--yb-pnav-text) !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.004em;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
      color 150ms ease,
      opacity 150ms ease;
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__link::after {
    position: absolute;
    right: 30%;
    bottom: -1px;
    left: 30%;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: var(--yb-pnav-red);
    content: "";
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: center;
    transition:
      opacity 150ms ease,
      transform 180ms ease;
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__link:hover {
    color: var(--yb-pnav-text-hover) !important;
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__link:focus-visible {
    outline: 1px solid rgba(237, 28, 43, 0.55);
    outline-offset: -5px;
    border-radius: 5px;
    color: #ffffff !important;
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__link.is-active {
    color: #ffffff !important;
  }

  #yb-st35pro-pagenav-v13 .yb-pnav13__link.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* -------------------------------------------------------------------------
     TARGET OFFSET
     JavaScript rewrites this based on the actual visible header heights.
     ------------------------------------------------------------------------- */
  #st35pro-overview,
  #st35pro-image-modes,
  #st35pro-ranging-ballistics,
  #st35pro-image-enhancement,
  #st35pro-high-sensitivity,
  #st35pro-field-operation,
  #st35pro-accessories,
  #st35pro-technical-data,
  #st35pro-downloads,
  #st35pro-inquiry {
    scroll-margin-top: 140px;
  }

  /* -------------------------------------------------------------------------
     TABLET
     Switch from full-width distribution to a natural horizontal rail.
     ------------------------------------------------------------------------- */
  @media (max-width: 1080px) {
    #yb-st35pro-pagenav-v13 .yb-pnav13__scroller {
      width: max-content;
      min-width: 100%;
      justify-content: flex-start;
      gap: 22px;
    }

    #yb-st35pro-pagenav-v13 .yb-pnav13__link {
      padding-right: 0;
      padding-left: 0;
    }

    #yb-st35pro-pagenav-v13 .yb-pnav13__link::after {
      right: 10%;
      left: 10%;
    }
  }

  @media (max-width: 767px) {
    #yb-st35pro-pagenav-v13 {
      --yb-pnav-height: 46px;
    }

    #yb-st35pro-pagenav-v13 .yb-pnav13__inner {
      width: 100%;
    }

    #yb-st35pro-pagenav-v13 .yb-pnav13__scroller {
      min-height: var(--yb-pnav-height);
      gap: 21px;
      padding: 0 16px;
      scroll-padding-inline: 16px;
    }

    #yb-st35pro-pagenav-v13 .yb-pnav13__link {
      min-height: var(--yb-pnav-height);
      font-size: 11.5px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #yb-st35pro-pagenav-v13 *,
    #yb-st35pro-pagenav-v13 *::before,
    #yb-st35pro-pagenav-v13 *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }

/* ==========================================================================
   SOURCE: 02_Pinned_Product_Story_HTML — style block 1
   ========================================================================== */
/* =============================================================================
   SCREEN 02 — CLEAN CONSOLIDATED CSS
   There are no legacy v1.4/v1.5/v1.8 override blocks below this stylesheet.
   ============================================================================= */

.yb-story--st35pro,
.yb-story--st35pro * {
    box-sizing: border-box;
}

.yb-story--st35pro {
    --story-bg: #05080b;
    --story-text: #ffffff;
    --story-soft: #d9dde3;
    --story-muted: #aeb6bf;
    --story-line: rgba(255, 255, 255, 0.20);
    --story-line-soft: rgba(255, 255, 255, 0.09);
    --story-accent: var(--yb-accent, #e31e24);
    --story-sticky-top: 0px;

    position: relative;
    width: 100%;
    overflow: clip;
    isolation: isolate;

    color: var(--story-text);
    background: var(--story-bg);

    font-family: var(
        --yb-font,
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif
    );

    scroll-margin-top: 90px;
}

.yb-story--st35pro .yb-story__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* -----------------------------------------------------------------------------
   01. Sticky stage
   ----------------------------------------------------------------------------- */

.yb-story--st35pro .yb-story__sticky {
    position: sticky;
    top: var(--story-sticky-top);
    z-index: 1;

    width: 100%;
    height: calc(100vh - var(--story-sticky-top));
    height: calc(100svh - var(--story-sticky-top));

    min-height: 620px;
    overflow: hidden;

    background: var(--story-bg);
}

.yb-story--st35pro .yb-story__stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 75%,
            rgba(58, 102, 145, 0.18),
            transparent 44%
        ),
        radial-gradient(
            circle at 70% 80%,
            rgba(141, 20, 34, 0.08),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #05070a 0%,
            #08111a 58%,
            #040608 100%
        );
}

.yb-story--st35pro .yb-story__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    opacity: 0.045;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 0,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 11px
        );
}

/* -----------------------------------------------------------------------------
   02. Product image stage
   ----------------------------------------------------------------------------- */

.yb-story--st35pro .yb-story__product-stage {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    width: 100%;
    height: min(64%, 760px);
    min-height: 500px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: hidden;
    pointer-events: none;
}

.yb-story--st35pro .yb-story__product-glow {
    position: absolute;
    bottom: -4%;
    left: 50%;
    z-index: 0;

    width: min(78%, 1380px);
    height: 50%;

    transform: translateX(-50%);
    filter: blur(28px);

    background:
        radial-gradient(
            ellipse at 44% 54%,
            rgba(69, 116, 160, 0.18) 0%,
            rgba(30, 67, 101, 0.09) 42%,
            transparent 72%
        ),
        radial-gradient(
            ellipse at 68% 64%,
            rgba(151, 25, 37, 0.10) 0%,
            transparent 58%
        );
}

.yb-story--st35pro .yb-story__product-picture {
    position: relative;
    z-index: 2;

    width: min(94vw, 2240px);
    height: 100%;

    margin: 0 auto;
    overflow: hidden;

    /*
       The approved mounted-product v5 scene is the non-JavaScript fallback.
       This keeps the pinned background visible before the preload script runs.
    */
    opacity: 1;
    background-color: transparent;
    background-image: var(
        --yb-story-product-url,
        url("/wp-content/uploads/2026/08/st35pro-mounted-real-rail-studio-desktop-v5.webp")
    );
    background-repeat: no-repeat;
    background-position: center 57%;
    background-size: cover;

    filter:
        brightness(1.08)
        contrast(1.025)
        saturate(1.01);

    transform: scale(1.015) translateY(-1.5%);
    transition: opacity 0.32s ease;
}

.yb-story--st35pro .yb-story__product-picture.is-ready {
    opacity: 1;
}

/* Product edge blending */
.yb-story--st35pro .yb-story__product-picture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(4, 6, 9, 0.48) 0%,
            rgba(4, 6, 9, 0.16) 14%,
            rgba(4, 6, 9, 0.02) 28%,
            transparent 40%
        ),
        linear-gradient(
            90deg,
            rgba(4, 6, 9, 0.72) 0%,
            rgba(4, 6, 9, 0.16) 9%,
            transparent 20%,
            transparent 80%,
            rgba(4, 6, 9, 0.16) 91%,
            rgba(4, 6, 9, 0.72) 100%
        );
}

.yb-story--st35pro .yb-story__product-stage::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    height: 19%;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(4, 6, 9, 0.06) 30%,
            rgba(4, 6, 9, 0.34) 70%,
            rgba(4, 6, 9, 0.82) 100%
        );
}

.yb-story--st35pro .yb-story__product-shadow {
    position: absolute;
    right: 16%;
    bottom: 1%;
    left: 16%;
    z-index: 1;

    height: 14%;
    filter: blur(16px);

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.62),
            transparent 72%
        );
}

.yb-story--st35pro .yb-story__baseline {
    position: absolute;
    right: 11%;
    bottom: 3%;
    left: 11%;
    z-index: 4;

    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(227, 30, 36, 0.20) 50%,
            rgba(255, 255, 255, 0.08) 80%,
            transparent
        );
}

/* -----------------------------------------------------------------------------
   02A. Full mounted-product scene

   The 2560 × 1600 v5 image already contains the approved product position,
   real mounting relationship, studio background and contact shadows. This
   mode therefore uses the complete sticky stage, avoids cover-cropping and
   disables the synthetic cutout-stage effects.
   ----------------------------------------------------------------------------- */

.yb-story--st35pro .yb-story__product-stage--scene {
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

.yb-story--st35pro
.yb-story__product-stage--scene
.yb-story__product-picture--scene {
    width: 100%;
    height: 100%;
    margin: 0;

    background-color: #000002;
    background-position: 46% 70%;
    background-size: clamp(680px, 50vw, 1600px) auto;

    filter:
        brightness(1.045)
        contrast(1.02)
        saturate(0.97);

    transform: none;
}

.yb-story--st35pro
.yb-story__product-stage--scene
.yb-story__product-picture--scene::before {
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 11, 0.18) 0%,
            transparent 18%,
            transparent 88%,
            rgba(5, 8, 11, 0.24) 100%
        ),
        linear-gradient(
            90deg,
            rgba(5, 8, 11, 0.82) 0%,
            rgba(5, 8, 11, 0.22) 9%,
            transparent 18%,
            transparent 82%,
            rgba(5, 8, 11, 0.22) 91%,
            rgba(5, 8, 11, 0.82) 100%
        );
}

.yb-story--st35pro
.yb-story__product-stage--scene
.yb-story__product-glow,
.yb-story--st35pro
.yb-story__product-stage--scene
.yb-story__product-shadow,
.yb-story--st35pro
.yb-story__product-stage--scene
.yb-story__baseline {
    display: none;
}

.yb-story--st35pro .yb-story__product-stage--scene::after {
    height: 12%;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(4, 6, 9, 0.04) 42%,
            rgba(4, 6, 9, 0.52) 100%
        );
}

.yb-story--st35pro .yb-story__stage-caption {
    position: absolute;
    right: 5.4%;
    bottom: 5.4%;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;

    color: rgba(255, 255, 255, 0.44);
    text-align: right;
    text-transform: uppercase;
}

.yb-story--st35pro .yb-story__stage-caption span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.yb-story--st35pro .yb-story__stage-caption strong {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* -----------------------------------------------------------------------------
   03. Foreground flow and two chapter heights
   ----------------------------------------------------------------------------- */

.yb-story--st35pro .yb-story__flow {
    position: relative;
    z-index: 3;

    /*
       PRODUCT-FIRST SEQUENCE
       ----------------------
       The sticky stage already occupies one full viewport in normal flow.
       Keeping margin-top at 0 means the product is shown first by itself.
       Stage 1 only begins to enter after the user scrolls, while the product
       remains pinned behind it.

       Do not use the old negative margin here; that pulled Stage 1 into the
       opening viewport and made the image and text appear simultaneously.
    */
    margin-top: 0;
}

.yb-story--st35pro .yb-story__chapter {
    position: relative;

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

    overflow: visible;
    background: transparent;
}

.yb-story--st35pro .yb-story__chapter--introduction {
    min-height: clamp(600px, 72vh, 750px);
    min-height: clamp(600px, 72svh, 750px);

    padding:
        clamp(68px, 8vh, 92px)
        32px
        clamp(66px, 8vh, 88px);
}

.yb-story--st35pro .yb-story__chapter--features {
    min-height: clamp(760px, 92vh, 960px);
    min-height: clamp(760px, 92svh, 960px);

    padding:
        clamp(78px, 9vh, 104px)
        32px
        clamp(92px, 11vh, 126px);
}

.yb-story--st35pro .yb-story__chapter-scrim {
    position: absolute;
    top: -60px;
    right: 0;
    bottom: -60px;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.yb-story--st35pro
.yb-story__chapter--introduction
.yb-story__chapter-scrim {
    background:
        linear-gradient(
            180deg,
            rgba(5, 9, 14, 0.52) 0%,
            rgba(5, 9, 14, 0.35) 32%,
            rgba(5, 9, 14, 0.18) 65%,
            rgba(5, 9, 14, 0.05) 88%,
            transparent 100%
        );
}

.yb-story--st35pro
.yb-story__chapter--features
.yb-story__chapter-scrim {
    background:
        linear-gradient(
            180deg,
            rgba(5, 9, 14, 0.49) 0%,
            rgba(5, 9, 14, 0.31) 36%,
            rgba(5, 9, 14, 0.15) 69%,
            rgba(5, 9, 14, 0.04) 91%,
            transparent 100%
        );
}

/* -----------------------------------------------------------------------------
   03A. Foreground content entrance

   The structural delay comes from .yb-story__flow { margin-top: 0 }.
   This transition only softens the moment each content group becomes visible;
   it does not control layout or replace the sticky behaviour.
   ----------------------------------------------------------------------------- */

.yb-story--st35pro .yb-story__copy,
.yb-story--st35pro .yb-story__features {
    opacity: 1;
    transform: none;
}

.yb-story--st35pro.is-scroll-sequenced .yb-story__copy,
.yb-story--st35pro.is-scroll-sequenced .yb-story__features {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.52s ease,
        transform 0.58s cubic-bezier(0.2, 0.72, 0.2, 1);
}

.yb-story--st35pro.is-scroll-sequenced .yb-story__copy.is-visible,
.yb-story--st35pro.is-scroll-sequenced .yb-story__features.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   04. Stage 1 copy
   ----------------------------------------------------------------------------- */

.yb-story--st35pro .yb-story__copy {
    position: relative;
    z-index: 2;

    width: min(1160px, calc(100% - 32px));
    margin: 0 auto;
    text-align: center;
}

.yb-story--st35pro .yb-story__system-statement {
    max-width: 1100px;
    margin: 0 auto 22px;

    color: #ffffff;
    font-size: clamp(31px, 3vw, 46px);
    font-weight: 720;
    line-height: 1.10;
    letter-spacing: -0.032em;
    text-wrap: pretty;
}

.yb-story--st35pro .yb-story__system-support {
    width: min(1000px, 100%);
    margin: 0 auto;

    display: grid;
    gap: 10px;
}

.yb-story--st35pro .yb-story__system-support p {
    margin: 0;

    color: #c7cdd4;
    font-size: clamp(15px, 1.04vw, 17px);
    line-height: 1.62;
}

.yb-story--st35pro .yb-story__system-support p:last-child {
    color: #aeb6bf;
}

/* -----------------------------------------------------------------------------
   05. Stage 2 open feature grid
   ----------------------------------------------------------------------------- */

.yb-story--st35pro .yb-story__features {
    position: relative;
    z-index: 2;

    width: min(1260px, 100%);
    margin: 0 auto;
}

.yb-story--st35pro .yb-story__feature-grid {
    width: min(1280px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(52px, 6.5vw, 108px);
    row-gap: clamp(46px, 6vh, 66px);
}

.yb-story--st35pro .yb-story__feature {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 8px;
    text-align: center;
}

/* Open icon presentation: larger transparent icons with no visible frame. */
.yb-story--st35pro .yb-story__feature-visual {
    position: relative;

    width: 146px;
    height: 126px;
    flex: 0 0 auto;

    margin: 0 0 10px;
    overflow: visible;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    transition: transform 0.18s ease;
}

.yb-story--st35pro .yb-story__feature:hover .yb-story__feature-visual {
    transform: translateY(-2px);
}

.yb-story--st35pro .yb-story__feature-visual img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

    width: 126px;
    height: 116px;

    object-fit: contain;
    object-position: center;

    opacity: 0;
    filter: brightness(1.08) contrast(1.05);
    transform: translate(-50%, -50%) scale(0.985);

    transition:
        opacity 0.22s ease,
        transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.yb-story--st35pro
.yb-story__feature-visual.is-loaded
img {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Per-icon optical compensation keeps all six symbols visually equal. */
.yb-story--st35pro
.yb-story__feature[data-feature="optics"]
.yb-story__feature-visual img {
    width: 116px;
    height: 116px;
}

.yb-story--st35pro
.yb-story__feature[data-feature="thermal"]
.yb-story__feature-visual img {
    width: 132px;
    height: 116px;
}

.yb-story--st35pro
.yb-story__feature[data-feature="realtime"]
.yb-story__feature-visual img {
    width: 136px;
    height: 116px;
}

.yb-story--st35pro
.yb-story__feature[data-feature="rangefinding"]
.yb-story__feature-visual img {
    width: 142px;
    height: 118px;
}

.yb-story--st35pro
.yb-story__feature[data-feature="ballistics"]
.yb-story__feature-visual img {
    width: 136px;
    height: 118px;
}

.yb-story--st35pro
.yb-story__feature[data-feature="zoom"]
.yb-story__feature-visual img {
    width: 120px;
    height: 116px;
}

.yb-story--st35pro .yb-story__feature-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    opacity: 0.72;
    transition: opacity 0.18s ease;
}

.yb-story--st35pro
.yb-story__feature-visual.is-loaded
.yb-story__feature-placeholder {
    opacity: 0;
}

.yb-story--st35pro .yb-story__feature-placeholder i {
    display: block;
    width: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.68);
}

.yb-story--st35pro .yb-story__feature-placeholder i:nth-child(1) {
    height: 13px;
}

.yb-story--st35pro .yb-story__feature-placeholder i:nth-child(2) {
    height: 25px;
    background: var(--story-accent);
}

.yb-story--st35pro .yb-story__feature-placeholder i:nth-child(3) {
    height: 18px;
}

.yb-story--st35pro .yb-story__feature h3 {
    width: 100%;
    max-width: 350px;
    min-height: 0;

    margin: 0 0 12px;

    color: #ffffff;
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 680;
    line-height: 1.28;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.yb-story--st35pro .yb-story__feature-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px 5px;

    min-height: 22px;
    margin: 0;

    color: var(--story-accent);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.4;
}

.yb-story--st35pro .yb-story__feature-value em {
    color: rgba(255, 255, 255, 0.62);
    font-style: normal;
    font-weight: 500;
}

.yb-story--st35pro .yb-story__feature-value [hidden] {
    display: none !important;
}

.yb-story--st35pro .yb-story__exit {
    position: relative;
    z-index: 2;

    min-height: clamp(110px, 15vh, 190px);
    min-height: clamp(110px, 15svh, 190px);

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(4, 6, 9, 0.42) 65%,
            var(--story-bg) 100%
        );
}

/* -----------------------------------------------------------------------------
   06. Tablet
   ----------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1100px) {

    .yb-story--st35pro .yb-story__product-stage {
        height: min(61%, 700px);
        min-height: 470px;
    }

    .yb-story--st35pro .yb-story__product-picture {
        width: 98vw;
    }

    .yb-story--st35pro .yb-story__product-stage--scene {
        height: 100%;
        min-height: 0;
    }

    .yb-story--st35pro
    .yb-story__product-stage--scene
    .yb-story__product-picture--scene {
        width: 100%;
        background-position: 46% 62%;
        background-size: auto 94%;
        transform: none;
    }

    .yb-story--st35pro .yb-story__chapter--introduction {
        min-height: clamp(620px, 78svh, 780px);
        padding: 72px 28px 84px;
    }

    .yb-story--st35pro .yb-story__chapter--features {
        min-height: clamp(940px, 108svh, 1160px);
        padding: 86px 28px 116px;
    }

    .yb-story--st35pro .yb-story__feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 42px;
        row-gap: 54px;
    }

    .yb-story--st35pro .yb-story__feature-visual {
        width: 132px;
        height: 116px;
    }

    .yb-story--st35pro .yb-story__feature-visual img {
        width: 112px;
        height: 106px;
    }
}

/* -----------------------------------------------------------------------------
   07. Mobile
   Sticky behaviour is intentionally disabled for reliable touch scrolling.
   Both required content stages remain in the document flow.
   ----------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .yb-story--st35pro {
        overflow: hidden;
        scroll-margin-top: 70px;
    }

    .yb-story--st35pro .yb-story__sticky {
        position: relative;
        top: auto;

        height: clamp(500px, 67svh, 650px);
        min-height: 0;
    }

    .yb-story--st35pro .yb-story__flow {
        margin-top: 0;
    }

    .yb-story--st35pro .yb-story__product-stage {
        height: 74%;
        min-height: 370px;
    }

    .yb-story--st35pro .yb-story__product-picture {
        width: 128vw;
        background-position: center 61%;
        transform: scale(1.03);
    }

    .yb-story--st35pro .yb-story__product-stage--scene {
        height: 100%;
        min-height: 0;
    }

    .yb-story--st35pro
    .yb-story__product-stage--scene
    .yb-story__product-picture--scene {
        width: 100%;
        background-position: 47% 62%;
        background-size: auto 92%;
        transform: none;
    }

    .yb-story--st35pro .yb-story__stage-caption {
        display: none;
    }

    .yb-story--st35pro .yb-story__chapter--introduction,
    .yb-story--st35pro .yb-story__chapter--features {
        min-height: auto;
    }

    .yb-story--st35pro .yb-story__chapter--introduction {
        padding: 68px 20px 76px;
    }

    .yb-story--st35pro .yb-story__chapter--features {
        padding: 78px 20px 94px;
    }

    .yb-story--st35pro .yb-story__chapter-scrim {
        top: 0;
        bottom: 0;

        background:
            linear-gradient(
                180deg,
                rgba(5, 8, 12, 0.99),
                rgba(7, 12, 18, 0.96)
            ) !important;
    }

    .yb-story--st35pro .yb-story__system-statement {
        max-width: 680px;
        margin-bottom: 18px;
        font-size: clamp(25px, 7vw, 33px);
        line-height: 1.18;
    }

    .yb-story--st35pro .yb-story__system-support {
        gap: 10px;
    }

    .yb-story--st35pro .yb-story__system-support p {
        font-size: 14px;
        line-height: 1.63;
    }

    .yb-story--st35pro .yb-story__feature-grid {
        grid-template-columns: 1fr;
        row-gap: 44px;
    }

    .yb-story--st35pro .yb-story__feature-visual {
        width: 116px;
        height: 104px;
        margin-bottom: 10px;
    }

    .yb-story--st35pro .yb-story__feature-visual img {
        width: 100px;
        height: 96px;
    }

    .yb-story--st35pro .yb-story__feature h3 {
        min-height: 0;
        margin-bottom: 7px;
        font-size: 19px;
    }

    .yb-story--st35pro .yb-story__exit {
        min-height: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yb-story--st35pro .yb-story__product-picture,
    .yb-story--st35pro .yb-story__feature-visual img,
    .yb-story--st35pro .yb-story__copy,
    .yb-story--st35pro .yb-story__features {
        transition: none;
    }
}

/* ==========================================================================
   SOURCE: 03_Image_Modes_HTML — style block 1
   ========================================================================== */
/* ==========================================================
   03_Image_Modes_ST35Pro
   Six-palette thermal comparison — image-led grid
   ========================================================== */

.yb-modes--st35pro {
    --yb-modes-bg: #020304;
    --yb-modes-text: #ffffff;
    --yb-modes-muted: #9b9fa7;
    --yb-modes-soft: #d7d9dd;
    --yb-modes-line: rgba(255, 255, 255, 0.12);
    --yb-modes-accent: var(--yb-accent, #e31e24);

    position: relative;
    width: 100%;

    overflow: hidden;
    isolation: isolate;

    /*
    Reduced top spacing keeps the section connected to
    the previous product-story screen.
    */
    padding:
        clamp(54px, 4.4vw, 76px)
        0
        clamp(68px, 4.8vw, 92px);

    background: var(--yb-modes-bg);
    color: var(--yb-modes-text);

    scroll-margin-top: 90px;
}

.yb-modes--st35pro .yb-modes__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 54%,
            rgba(32, 55, 83, 0.13) 0%,
            rgba(14, 25, 40, 0.055) 36%,
            transparent 69%
        ),
        linear-gradient(
            180deg,
            #020304 0%,
            #030507 45%,
            #020304 100%
        );
}

.yb-modes--st35pro .yb-modes__inner {
    width: min(1640px, calc(100% - 64px));
    margin: 0 auto;
}

/* ==========================================================
   Header
   ========================================================== */

/* ==========================================================
   Section introduction

   Editorial two-column layout:
   - Left: concise heading
   - Right: supporting explanation
   - No floating eyebrow or presentation-style title
   ========================================================== */

.yb-modes--st35pro .yb-modes__header {
    position: relative;

    width: min(1280px, 100%);

    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.72fr);

    align-items: end;
    gap: clamp(54px, 6vw, 100px);

    margin:
        0
        auto
        clamp(30px, 3vw, 44px);

    text-align: left;
}

/*
The red accent belongs directly to the heading block.
A vertical line feels more integrated than a floating
horizontal chapter marker.
*/
.yb-modes--st35pro .yb-modes__title-block {
    position: relative;

    padding-left:
        clamp(22px, 2vw, 30px);
}

.yb-modes--st35pro .yb-modes__title-block::before {
    content: "";

    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            var(--yb-modes-accent) 0%,
            rgba(227, 30, 36, 0.28) 100%
        );
}

/* Main title */
.yb-modes--st35pro .yb-modes__heading {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(48px, 4.3vw, 70px);

    font-weight: 750;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

/* Second line */
.yb-modes--st35pro .yb-modes__heading span {
    display: block;

    margin-top: 5px;

    color: #aeb2b9;
}

/*
The introduction is separated with a restrained vertical line.
This balances the large heading without creating another card.
*/
.yb-modes--st35pro .yb-modes__intro-block {
    padding:
        4px
        0
        4px
        clamp(24px, 2.4vw, 34px);

    border-left:
        1px
        solid
        rgba(255, 255, 255, 0.12);
}

.yb-modes--st35pro .yb-modes__intro {
    max-width: 500px;

    margin: 0;

    color: var(--yb-modes-muted);

    font-size: 15px;
    line-height: 1.72;
}



/* ==========================================================
   Thermal palette gallery

   Desktop:
   - Six equal-comparison panels
   - 3 × 2 grid
   - Final source images all use the same 3:2 framing
   ========================================================== */

.yb-modes--st35pro .yb-modes__gallery {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 4px;

    width: 100%;
    height: auto;

    overflow: hidden;

    background: #050608;

    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.08);
}

.yb-modes--st35pro .yb-modes__panel {
    position: relative;
    min-width: 0;

    display: block;
    overflow: hidden;

    /*
    The six supplied palette images use a common 3:2 composition.
    Matching the panel ratio preserves the complete scene and keeps
    all modes directly comparable.
    */
    aspect-ratio: 3 / 2;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    outline: 0;

    background: #07090c;
    color: #ffffff;
    text-align: left;
    cursor: pointer;

    /*
    Panel dimensions never change after selection.
    This prevents layout jumping across all six modes.
    */
    transition:
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

/* Active indicator: a restrained red line, not a resized panel. */
.yb-modes--st35pro .yb-modes__panel::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;

    height: 3px;

    background: var(--yb-modes-accent);

    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: center;

    transition:
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
}

.yb-modes--st35pro .yb-modes__panel.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.yb-modes--st35pro .yb-modes__panel:focus-visible {
    box-shadow:
        inset 0 0 0 2px rgba(227, 30, 36, 0.72);
}

.yb-modes--st35pro .yb-modes__panel-media,
.yb-modes--st35pro .yb-modes__panel-shade {
    position: absolute;
    inset: 0;
}

.yb-modes--st35pro .yb-modes__panel-media {
    z-index: 0;

    /*
    Final palette sources share the same 3:2 scene framing.
    The panel uses the same ratio, so no per-mode crop offset is needed.
    */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /*
    Inactive panels remain fully readable.
    The active state is emphasized subtly rather than by crushing brightness.
    */
    filter: brightness(0.90);
    transform: scale(1.018);

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}

/* ==========================================================
   Six thermal palette classes

   Final source images use the same scene framing, so all modes
   share one centered crop policy.
   ========================================================== */

.yb-modes--st35pro .yb-modes__panel--white,
.yb-modes--st35pro .yb-modes__panel--black,
.yb-modes--st35pro .yb-modes__panel--red,
.yb-modes--st35pro .yb-modes__panel--fusion,
.yb-modes--st35pro .yb-modes__panel--iron,
.yb-modes--st35pro .yb-modes__panel--green {
    --yb-panel-pos-x: 50%;
}

/*
Fallback gradients remain visible until the final thermal images are uploaded.
The URL layer automatically appears above the fallback when the file exists.
*/
.yb-modes--st35pro .yb-modes__panel--white .yb-modes__panel-media {
    background-image:
        var(--yb-panel-image),
        radial-gradient(circle at 62% 48%, #f2f2f2 0 5%, #8f969e 14%, transparent 28%),
        radial-gradient(circle at 38% 63%, #c9ced3 0 4%, #4a5057 14%, transparent 31%),
        linear-gradient(135deg, #11151a, #363d44 48%, #090b0e);
}

.yb-modes--st35pro .yb-modes__panel--black .yb-modes__panel-media {
    background-image:
        var(--yb-panel-image),
        radial-gradient(circle at 62% 48%, #050607 0 6%, #727981 16%, transparent 30%),
        radial-gradient(circle at 38% 63%, #111316 0 5%, #9aa0a7 17%, transparent 33%),
        linear-gradient(135deg, #d9dde0, #767d84 48%, #24282d);
}

/* ==========================================================
   Red Hot image

   The uploaded image is the primary layer.
   The gradients below are only fallback visuals in case the
   image file is temporarily unavailable.
   ========================================================== */

.yb-modes--st35pro
.yb-modes__panel--red
.yb-modes__panel-media {
    background-image:
        var(--yb-panel-image),

        /* Warm target fallback */
        radial-gradient(
            circle at 61% 49%,
            rgba(255, 88, 55, 0.96) 0 5%,
            rgba(198, 25, 33, 0.88) 13%,
            rgba(85, 11, 18, 0.48) 25%,
            transparent 36%
        ),

        /* Dark neutral environment fallback */
        linear-gradient(
            135deg,
            #101317 0%,
            #292e34 48%,
            #090b0e 100%
        );
}

.yb-modes--st35pro .yb-modes__panel--fusion .yb-modes__panel-media {
    background-image:
        var(--yb-panel-image),
        radial-gradient(circle at 62% 48%, #fff35c 0 5%, #ff7a28 12%, #b72078 22%, transparent 34%),
        radial-gradient(circle at 38% 63%, #ffe15a 0 4%, #f1572f 12%, #4c1e7e 25%, transparent 36%),
        linear-gradient(135deg, #15134a, #482364 42%, #0c2445 76%, #05070c);
}

.yb-modes--st35pro .yb-modes__panel--iron .yb-modes__panel-media {
    background-image:
        var(--yb-panel-image),
        radial-gradient(circle at 61% 49%, #fff0a0 0 5%, #ff7a24 12%, #e22a24 22%, transparent 35%),
        linear-gradient(135deg, #17114a 0%, #2b1663 48%, #09152d 100%);
}

.yb-modes--st35pro .yb-modes__panel--green .yb-modes__panel-media {
    background-image:
        var(--yb-panel-image),
        radial-gradient(circle at 61% 49%, #f4fff4 0 5%, #66ff79 12%, #19a94d 23%, transparent 36%),
        linear-gradient(135deg, #06120d 0%, #17482e 48%, #07100b 100%);
}

.yb-modes--st35pro
.yb-modes__panel:hover
.yb-modes__panel-media,
.yb-modes--st35pro
.yb-modes__panel:focus-visible
.yb-modes__panel-media {
    filter: brightness(0.97);
    transform: scale(1.008);
}

.yb-modes--st35pro
.yb-modes__panel.is-active
.yb-modes__panel-media {
    filter: brightness(1);
    transform: scale(1);
}

.yb-modes--st35pro .yb-modes__panel-shade {
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 37%,
            rgba(0, 0, 0, 0.13) 62%,
            rgba(0, 0, 0, 0.80) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.20),
            transparent 30%,
            transparent 72%,
            rgba(0, 0, 0, 0.16)
        );
}

.yb-modes--st35pro .yb-modes__panel-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 13px;

    padding:
        clamp(24px, 2.7vw, 42px)
        clamp(23px, 2.5vw, 40px);
}

.yb-modes--st35pro .yb-modes__panel-index {
    grid-row: 1;

    padding-top: 5px;

    color: var(--yb-modes-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.yb-modes--st35pro .yb-modes__panel-content strong {
    color: #ffffff;

    font-size: clamp(21px, 1.75vw, 31px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;

    opacity: 0.72;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.yb-modes--st35pro
.yb-modes__panel:hover
.yb-modes__panel-content strong,
.yb-modes--st35pro
.yb-modes__panel:focus-visible
.yb-modes__panel-content strong {
    opacity: 0.90;
}

.yb-modes--st35pro
.yb-modes__panel.is-active
.yb-modes__panel-content strong {
    opacity: 1;
}

/* ==========================================================
   Footer line
   ========================================================== */

.yb-modes--st35pro .yb-modes__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;

    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid var(--yb-modes-line);
}

.yb-modes--st35pro .yb-modes__active-copy {
    max-width: 760px;
    margin: 0;

    /*
    STABLE DESCRIPTION HEIGHT
    Reserve two lines for every mode so switching between a short
    description and the longer Red Hot description cannot change
    the section height.
    */
    min-height: calc(2 * 1.7em);

    color: var(--yb-modes-muted);
    font-size: 14px;
    line-height: 1.7;
}

.yb-modes--st35pro .yb-modes__instruction {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;

    color: rgba(255, 255, 255, 0.46);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.yb-modes--st35pro .yb-modes__instruction span {
    width: 34px;
    height: 1px;
    background: var(--yb-modes-accent);
}

/* ==========================================================
   Tablet — 2 × 3 gallery
   ========================================================== */

@media
    (min-width: 768px)
    and
    (max-width: 1100px) {

    .yb-modes--st35pro .yb-modes__inner {
        width: calc(100% - 48px);
    }

    .yb-modes--st35pro .yb-modes__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.78fr);

        gap: 42px;
    }

    .yb-modes--st35pro .yb-modes__heading {
        font-size: clamp(46px, 5.5vw, 60px);
    }

    .yb-modes--st35pro .yb-modes__intro {
        font-size: 14px;
    }

    /*
    Six modes become a 2 × 3 layout on tablets.
    This keeps every palette large enough for direct comparison.
    */
    .yb-modes--st35pro .yb-modes__gallery {
        display: grid;

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

        gap: 4px;

        height: auto;
    }

    .yb-modes--st35pro .yb-modes__panel {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

}

/* ==========================================================
   Mobile — horizontal snap gallery
   ========================================================== */

@media (max-width: 767px) {

    .yb-modes--st35pro {
        padding: 78px 0 82px;
        scroll-margin-top: 70px;
    }

    .yb-modes--st35pro .yb-modes__inner {
        width: 100%;
    }

    .yb-modes--st35pro .yb-modes__header {
        width: calc(100% - 40px);
    
        display: block;
    
        margin:
            0
            auto
            34px;
    
        text-align: left;
    }
    
    .yb-modes--st35pro .yb-modes__title-block {
        padding-left: 19px;
    }
    
    .yb-modes--st35pro
    .yb-modes__title-block::before {
        top: 5px;
        bottom: 5px;
        width: 2px;
    }
    
    .yb-modes--st35pro .yb-modes__heading {
        font-size: 44px;
        line-height: 1;
    }
    
    .yb-modes--st35pro .yb-modes__intro-block {
        margin-top: 24px;
    
        padding:
            21px
            0
            0;
    
        border-top:
            1px
            solid
            rgba(255, 255, 255, 0.10);
    
        border-left: 0;
    }
    
    .yb-modes--st35pro .yb-modes__intro {
        max-width: none;
    
        font-size: 14px;
    }


    .yb-modes--st35pro .yb-modes__gallery {
        display: flex;
        align-items: flex-start;
        gap: 10px;

        height: auto;

        padding: 0 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        background: transparent;
    }

    .yb-modes--st35pro .yb-modes__gallery::-webkit-scrollbar {
        display: none;
    }

    .yb-modes--st35pro .yb-modes__panel,
    .yb-modes--st35pro .yb-modes__panel.is-active {
        flex: 0 0 84vw;
        aspect-ratio: 3 / 2;
        scroll-snap-align: center;
    }

    .yb-modes--st35pro .yb-modes__panel-media {
        filter: brightness(0.96);
    }

    .yb-modes--st35pro
    .yb-modes__panel.is-active
    .yb-modes__panel-media {
        filter: brightness(1);
    }

    .yb-modes--st35pro .yb-modes__footer {
        width: calc(100% - 40px);
        margin: 22px auto 0;
        padding-top: 22px;
    }

    .yb-modes--st35pro .yb-modes__instruction {
        display: none;
    }

    /*
    Mobile copy may wrap to three lines because the available width
    is narrower. Reserving three lines keeps swipe-mode changes stable.
    */
    .yb-modes--st35pro .yb-modes__active-copy {
        min-height: calc(3 * 1.7em);
    }

}

@media (max-width: 390px) {

    .yb-modes--st35pro .yb-modes__heading {
        font-size: 39px;
    }

    .yb-modes--st35pro .yb-modes__gallery {
        height: auto;
    }

}

/* ==========================================================
   Motion accessibility
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .yb-modes--st35pro .yb-modes__panel,
    .yb-modes--st35pro .yb-modes__panel::after,
    .yb-modes--st35pro .yb-modes__panel-media,
    .yb-modes--st35pro .yb-modes__panel-content strong {
        transition: none;
    }

}

/* ==========================================================================
   SOURCE: 04_Ranging_Ballistics_HTML — style block 1
   ========================================================================== */
/* ==========================================================
   ST35Pro Actual UI Experience — Version 4.4
   Exact-reticle reference calibration
   Updated: 2026-08-09

   Reference canvas:
   1344 × 1008 (4:3)

   Important:
   - The device viewport keeps 4:3.
   - HUD spacing is expressed with container-query units so it scales
     from the supplied reference instead of being visually enlarged.
   - Web interaction controls live outside the device viewport.
   ========================================================== */

.yb-ui-v3--st35pro {
    --yb-ui-bg: #020304;
    --yb-ui-panel: #080a0d;
    --yb-ui-text: #ffffff;
    --yb-ui-muted: #a7abb3;
    --yb-ui-line: rgba(255, 255, 255, 0.14);
    --yb-ui-line-soft: rgba(255, 255, 255, 0.075);
    --yb-ui-accent: var(--yb-accent, #e31e24);
    --yb-ui-green: #00c815;
    --yb-ui-yellow: #ffe600;

    position: relative;
    width: 100%;

    overflow: hidden;
    isolation: isolate;

    padding:
        clamp(44px, 3.5vw, 64px)
        0
        clamp(48px, 3.7vw, 68px);

    background:
        linear-gradient(
            180deg,
            #020304 0%,
            #030507 14%,
            #030507 86%,
            #020304 100%
        );

    color: var(--yb-ui-text);

    scroll-margin-top: 90px;
}

.yb-ui-v3--st35pro *,
.yb-ui-v3--st35pro *::before,
.yb-ui-v3--st35pro *::after {
    box-sizing: border-box;
}

.yb-ui-v3--st35pro button {
    font: inherit;
}

.yb-ui-v3--st35pro [data-yb-spec-state="linked"] {
    color: inherit;
}

.yb-ui-v3--st35pro [data-yb-spec-state="missing"] {
    color: rgba(255, 255, 255, 0.34);
}

.yb-ui-v3--st35pro .yb-ui-v3__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 24% 54%,
            rgba(24, 40, 61, 0.14) 0%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 88% 71%,
            rgba(74, 11, 17, 0.085) 0%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #020304 0%,
            #030507 54%,
            #020304 100%
        );
}

.yb-ui-v3--st35pro .yb-ui-v3__inner {
    width: min(1320px, calc(100vw - 40px));
    margin: 0 auto;
}


/* ==========================================================
   Section header
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__header {
    width: min(1320px, 100%);

    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.72fr);

    align-items: end;
    gap: clamp(42px, 4.8vw, 78px);

    margin:
        0
        auto
        clamp(26px, 2.5vw, 38px);
}

.yb-ui-v3--st35pro .yb-ui-v3__title-wrap {
    position: relative;
    padding-left: clamp(22px, 2vw, 30px);
}

.yb-ui-v3--st35pro .yb-ui-v3__title-wrap::before {
    content: "";

    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            var(--yb-ui-accent) 0%,
            rgba(227, 30, 36, 0.28) 100%
        );
}

.yb-ui-v3--st35pro .yb-ui-v3__heading {
    max-width: 790px;
    margin: 0;

    color: #ffffff;
    font-size: clamp(42px, 3.45vw, 58px);
    font-weight: 750;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.yb-ui-v3--st35pro .yb-ui-v3__heading span {
    display: block;
    margin-top: 5px;

    color: #b8bcc3;
}

.yb-ui-v3--st35pro .yb-ui-v3__intro-wrap {
    padding:
        4px
        0
        4px
        clamp(24px, 2.4vw, 34px);

    border-left:
        1px
        solid
        rgba(255, 255, 255, 0.12);
}

.yb-ui-v3--st35pro .yb-ui-v3__intro {
    max-width: 530px;
    margin: 0;

    color: var(--yb-ui-muted);
    font-size: 14px;
    line-height: 1.62;
}


/* ==========================================================
   Main module
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__module {
    width: min(1320px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        clamp(300px, 25.5vw, 340px);

    align-items: stretch;
    gap: 2px;

    border:
        1px
        solid
        var(--yb-ui-line-soft);

    background: #050608;
}

.yb-ui-v3--st35pro .yb-ui-v3__stage-column {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: #000000;
}


/* ==========================================================
   4:3 reference-proportion viewport
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__viewport {
    --yb-reticle-x: 50%;
    --yb-reticle-y: 50%;
    --yb-impact-drop: 0px;
    --yb-impact-wind: 0px;
    --yb-scene-scale: 1;

    position: relative;

    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;

    overflow: hidden;
    isolation: isolate;

    container-type: size;

    background: #000000;

    outline: 0;
    cursor: crosshair;

    touch-action: none;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;

    font-variant-numeric: tabular-nums;
}

.yb-ui-v3--st35pro .yb-ui-v3__viewport:focus-visible {
    outline:
        1px
        solid
        rgba(227, 30, 36, 0.72);

    outline-offset: -1px;
}


/* ==========================================================
   Thermal scene — original Screen 03 scene restored
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__viewport::before {
    content: "";
    position: absolute;
    inset: -2%;
    z-index: 0;
    pointer-events: none;
    background-image: var(--yb-ui-scene);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(8px) brightness(0.60) contrast(1.02);
    transform: scale(1.03);
}

.yb-ui-v3--st35pro .yb-ui-v3__scene {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image:
        var(--yb-ui-scene),
        linear-gradient(
            135deg,
            #0d1116,
            #333942 50%,
            #07090c
        );

    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 94% auto, cover;

    /*
    Keep the original thermal look instead of converting another
    palette image into grayscale.
    */
    filter:
        brightness(0.96)
        contrast(1.04);

    transform:
        scale(var(--yb-scene-scale));

    transform-origin:
        50%
        50%;

    transition:
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.30s ease;
}

.yb-ui-v3--st35pro .yb-ui-v3__viewport:hover .yb-ui-v3__scene {
    filter:
        brightness(0.99)
        contrast(1.04);
}

.yb-ui-v3--st35pro .yb-ui-v3__shade {
    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at var(--yb-reticle-x) var(--yb-reticle-y),
            transparent 0%,
            transparent 54%,
            rgba(0, 0, 0, 0.05) 75%,
            rgba(0, 0, 0, 0.16) 100%
        );
}


/* ==========================================================
   Device HUD
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__device-hud {
    position: absolute;
    inset: 0;
    z-index: 8;

    pointer-events: none;

    color: #ffffff;

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, 0.86);
}


/* Top bar:
   sampled from the supplied reference.
   The thermal scene must not show through behind the status row. */

.yb-ui-v3--st35pro .yb-ui-v3__topbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;

    height: 6.35cqh;

    background:
        linear-gradient(
            180deg,
            rgb(58, 58, 58) 0%,
            rgb(44, 44, 44) 34%,
            rgb(26, 26, 26) 70%,
            rgb(13, 13, 13) 100%
        );
}

.yb-ui-v3--st35pro .yb-ui-v3__topbar-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.96);
}


/* ==========================================================
   Top-left magnification
   Reference position approximately x=27, y=14 on 1344×1008.
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__zoom-readout {
    position: absolute;
    top: 1.25cqh;
    left: 2.0cqw;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: 2.55cqw;

    padding: 0;

    border: 0;
    background: transparent;
    color: #ffffff;

    cursor: pointer;
    pointer-events: auto;
}

.yb-ui-v3--st35pro .yb-ui-v3__zoom-readout img {
    display: block;

    width: 3.0cqw;
    height: 3.0cqw;

    object-fit: contain;
}

.yb-ui-v3--st35pro .yb-ui-v3__zoom-readout strong {
    font-size: 1.78cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.yb-ui-v3--st35pro .yb-ui-v3__zoom-readout:hover,
.yb-ui-v3--st35pro .yb-ui-v3__zoom-readout:focus-visible {
    outline:
        1px
        solid
        rgba(255, 255, 255, 0.16);

    outline-offset: 0.35cqw;
}


/* ==========================================================
   Date / time
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__datetime {
    position: absolute;
    top: 2.05cqh;
    left: 52.08cqw;
    z-index: 14;

    display: flex;
    align-items: center;
    gap: 7.5cqw;

    color: rgba(255, 255, 255, 0.98);

    font-size: 1.58cqw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;

    transform:
        translateX(-50%);
}


/* ==========================================================
   Top-right status row
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__status {
    position: absolute;
    inset: 0;
    z-index: 16;

    pointer-events: none;
}

/*
Reference-calibrated positions from the supplied 1344 × 1008 UI:
HD        ≈ x902 y11  40×40
Wi-Fi     ≈ x993 y9   51×51
Compass   ≈ x1075 y10 40×40
Arrow     ≈ x1128 y6  52×52
Battery   ≈ x1230 y1  63×63

The arrow asset already contains the separator line.
*/

.yb-ui-v3--st35pro .yb-ui-v3__status-image {
    position: absolute;

    display: block;

    object-fit: contain;
}

.yb-ui-v3--st35pro .yb-ui-v3__status-image--hd {
    left: 67.11cqw;
    top: 1.09cqh;

    width: 2.98cqw;
    height: 2.98cqw;
}

.yb-ui-v3--st35pro .yb-ui-v3__status-image--wifi {
    left: 73.88cqw;
    top: 0.78cqh;

    /*
    UI polish (same plugin version):
    keep Wi-Fi fully inside the 6.35cqh status bar and align it with
    the adjacent HD / compass / direction indicators.
    */
    width: 4.55cqh;
    height: 4.55cqh;
}

.yb-ui-v3--st35pro .yb-ui-v3__status-image--compass {
    left: 79.99cqw;
    top: 0.99cqh;

    width: 2.98cqw;
    height: 2.98cqw;
}

.yb-ui-v3--st35pro .yb-ui-v3__status-image--direction {
    left: 83.93cqw;
    top: 0.60cqh;

    width: 3.87cqw;
    height: 3.87cqw;
}

.yb-ui-v3--st35pro .yb-ui-v3__status-image--battery {
    left: 91.52cqw;
    top: 0.83cqh;

    /* Slightly reduced so it no longer dominates the status row. */
    width: 4.70cqh;
    height: 4.70cqh;
}


/* ==========================================================
   Heading / bearing scale
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__heading-scale {
    position: absolute;
    top: 6.45cqh;
    left: 50%;
    z-index: 12;

    display: block;

    /*
    v0.27.2:
    The scale begins immediately below the top status-bar divider and is
    slightly larger without consuming extra central scene space.
    */
    width: 36.2cqw;
    height: auto;

    object-fit: contain;

    transform:
        translateX(-50%);
}

.yb-ui-v3--st35pro .yb-ui-v3__heading-value {
    position: absolute;
    top: 21.65cqh;
    left: 50%;
    z-index: 13;

    color: #ffffff;

    font-size: 1.86cqw;
    font-weight: 500;
    line-height: 1;

    transform:
        translateX(-50%);
}


/* ==========================================================
   Top-right information card
   Reference: near-flush to the right edge.
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__device-card {
    position: absolute;
    top: 8.43cqh;
    right: 0.12cqw;
    z-index: 14;

    width: 14.65cqw;
    min-width: 0;

    padding:
        1.24cqh
        1.02cqw
        1.18cqh;

    border-radius: 0.35cqw;
    background: rgba(5, 5, 5, 0.86);
    color: #ffffff;
}

.yb-ui-v3--st35pro .yb-ui-v3__zeroing-distance {
    display: block;
    margin-bottom: 1.05cqh;
    font-size: 1.66cqw;
    font-weight: 500;
    line-height: 1;
}

.yb-ui-v3--st35pro .yb-ui-v3__device-card-row {
    display: flex;
    align-items: center;
    gap: 0.56cqw;
    min-height: 1.78cqw;
    margin-bottom: 0.95cqh;
    color: rgba(255, 255, 255, 0.94);
    font-size: 1.38cqw;
    font-weight: 500;
    line-height: 1;
}

.yb-ui-v3--st35pro .yb-ui-v3__device-card-lock {
    flex: 0 0 auto;
    width: 1.58cqw;
    height: 1.58cqw;
    border: 0.15cqw solid var(--yb-ui-green);
    border-radius: 0.34cqw;
}

.yb-ui-v3--st35pro .yb-ui-v3__device-card-drop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55cqw;

    padding-top: 0.8cqh;

    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.08);

    color:
        rgba(255, 255, 255, 0.88);
}

.yb-ui-v3--st35pro .yb-ui-v3__device-card-drop > span {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.08cqw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.yb-ui-v3--st35pro .yb-ui-v3__device-card-drop strong {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.36cqw;
    font-weight: 600;
}



/* ==========================================================
   Right-side inclination UI
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__tilt-scale {
    position: absolute;
    top: 36.7cqh;
    right: 0.08cqw;
    left: auto;
    z-index: 12;

    display: block;

    width: 5.55cqw;
    height: auto;

    object-fit: contain;
}

.yb-ui-v3--st35pro .yb-ui-v3__tilt-value {
    position: absolute;

    top: 56.15cqh;
    right: 6.05cqw;
    left: auto;
    z-index: 13;

    color: #ffffff;

    font-size: 1.82cqw;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;

    text-shadow:
        0 0.08cqw 0.22cqw
        rgba(0, 0, 0, 0.92);
}


.yb-ui-v3--st35pro .yb-ui-v3__level-angle {
    position: absolute;
    right: 4.85cqw;
    left: auto;
    top: 75.2cqh;
    z-index: 12;

    display: block;

    width: 3.87cqw;
    height: 3.87cqw;

    object-fit: contain;
}


/* ==========================================================
   Reticle
   Reference horizontal drawn width ≈ 54% of the 1344 canvas.
   The container is larger because its SVG drawing occupies 86%.
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__reticle {
    position: absolute;
    left: var(--yb-reticle-x);
    top: var(--yb-reticle-y);
    z-index: 10;

    /* 2048 × 2048 clean reticle asset; visible width ≈ 50% of screen. */
    width: 52cqw;
    aspect-ratio: 1 / 1;

    pointer-events: none;

    /* Red cross inside asset ≈ X49.82% / Y43.36%. */
    transform: translate(-49.82%, -43.36%);

    filter: drop-shadow(0 0.08cqw 0.08cqw rgba(0, 0, 0, 0.90));

    transition:
        left 0.16s ease,
        top 0.16s ease;
}




/* Red centre */









.yb-ui-v3--st35pro .yb-ui-v3__reticle-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* Green range lock:
   The supplied reference puts it only about 5% of screen height
   above the centre, not near the top quarter of the reticle. */

.yb-ui-v3--st35pro .yb-ui-v3__range-lock {
    position: absolute;
    left: 45.35%;
    top: 37.00%;
    width: 1.28cqw;
    height: 1.28cqw;
    border: 0.14cqw solid var(--yb-ui-green);
    box-shadow: 0 0 0 0.07cqw rgba(0, 0, 0, 0.72);
    transform: translate(-50%, -50%);
}


/* Transparent measurement text beside the green box */

.yb-ui-v3--st35pro .yb-ui-v3__range-near {
    position: absolute;
    left: calc(45.35% + 1.55cqw);
    top: 37.00%;
    display: flex;
    align-items: baseline;
    gap: 0.16cqw;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-size: 1.58cqw;
    font-weight: 650;
    line-height: 1;
    text-shadow: 0 0.08cqw 0.26cqw rgba(0, 0, 0, 0.98);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.18s ease;
}

.yb-ui-v3--st35pro .yb-ui-v3__range-near small {
    font-size: 1.02cqw;
    font-weight: 500;
}

.yb-ui-v3--st35pro
.yb-ui-v3__viewport[data-has-range="true"]
.yb-ui-v3__range-near {
    opacity: 1;
}

.yb-ui-v3--st35pro .yb-ui-v3__range-near.is-measuring {
    animation:
        yb-ui-v3-range-pulse
        0.50s
        ease;
}

@keyframes yb-ui-v3-range-pulse {
    0% {
        color: #ffffff;
    }

    45% {
        color: var(--yb-ui-green);
    }

    100% {
        color: #ffffff;
    }
}


/* ==========================================================
   Yellow ballistic impact reference
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__impact {
    position: absolute;
    left: var(--yb-reticle-x);
    top: var(--yb-reticle-y);
    z-index: 11;
    width: 52cqw;
    aspect-ratio: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transform:
        translate(-49.82%, -43.36%)
        translate(var(--yb-impact-wind), var(--yb-impact-drop));
    transition:
        transform 0.22s ease,
        opacity 0.16s ease;
}

.yb-ui-v3--st35pro
.yb-ui-v3__viewport[data-ballistic="true"]
.yb-ui-v3__impact {
    opacity: 1;
}


.yb-ui-v3--st35pro .yb-ui-v3__impact[hidden] {
    display: none !important;
}

.yb-ui-v3--st35pro .yb-ui-v3__impact-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}



.yb-ui-v3--st35pro .yb-ui-v3__impact-x::before,


.yb-ui-v3--st35pro .yb-ui-v3__impact-x::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* ==========================================================
   Web-only controls outside the device view
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__web-controls {
    flex: 0 0 auto;

    padding:
        6px
        8px
        7px;

    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.10);

    background:
        #05070a;
}

.yb-ui-v3--st35pro .yb-ui-v3__feedback {
    min-height: 12px;

    margin:
        0
        0
        5px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.10em;
}

.yb-ui-v3--st35pro .yb-ui-v3__operations {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 5px;
}

.yb-ui-v3--st35pro .yb-ui-v3__operation {
    min-width: 0;

    display: grid;
    grid-template-columns:
        30px
        minmax(0, 1fr);

    align-items: center;
    gap: 8px;

    min-height: 38px;

    padding:
        6px
        8px;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.14);

    background:
        #07090c;

    color: #ffffff;

    text-align: left;
    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}

.yb-ui-v3--st35pro .yb-ui-v3__operation:hover,
.yb-ui-v3--st35pro .yb-ui-v3__operation:focus-visible,
.yb-ui-v3--st35pro .yb-ui-v3__operation.is-active {
    border-color:
        rgba(255, 255, 255, 0.38);

    background:
        #0d1015;
}

.yb-ui-v3--st35pro
.yb-ui-v3__operation[data-ballistic].is-active {
    /*
    Active state is intentionally restrained: no yellow outline.
    A slightly lifted neutral background is enough to communicate ON.
    */
    border-color:
        rgba(255, 255, 255, 0.24);

    background:
        #151a20;

    color:
        #ffffff;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.025);
}

.yb-ui-v3--st35pro .yb-ui-v3__operation-key {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.34);

    color: #ffffff;

    font-size: 14px;
    line-height: 1;
}

.yb-ui-v3--st35pro .yb-ui-v3__operation-copy {
    min-width: 0;
}

.yb-ui-v3--st35pro .yb-ui-v3__operation-copy strong,
.yb-ui-v3--st35pro .yb-ui-v3__operation-copy small {
    display: block;
}

.yb-ui-v3--st35pro .yb-ui-v3__operation-copy strong {
    margin-bottom: 2px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 650;
    line-height: 1.15;
}

.yb-ui-v3--st35pro .yb-ui-v3__operation-copy small {
    color:
        rgba(255, 255, 255, 0.43);

    font-size: 7px;
    line-height: 1.15;
}


/* ==========================================================
   Right explanatory rail
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__rail {
    position: relative;

    min-width: 0;

    padding:
        28px
        30px
        24px;

    background:
        linear-gradient(
            180deg,
            #0a0d11 0%,
            #080a0d 100%
        );

    color: #ffffff;
}

.yb-ui-v3--st35pro .yb-ui-v3__rail-heading {
    padding-bottom: 24px;

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.14);
}

.yb-ui-v3--st35pro .yb-ui-v3__rail-heading > span {
    display: block;

    margin-bottom: 9px;

    color: var(--yb-ui-accent);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.yb-ui-v3--st35pro .yb-ui-v3__rail-heading > strong {
    display: block;

    color: #ffffff;

    font-size: clamp(24px, 2.0vw, 31px);
    font-weight: 650;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.yb-ui-v3--st35pro .yb-ui-v3__steps {
    margin-top: 4px;
}

.yb-ui-v3--st35pro .yb-ui-v3__step {
    display: grid;
    grid-template-columns:
        27px
        minmax(0, 1fr);

    gap: 8px;

    padding:
        18px
        0;

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.11);
}

.yb-ui-v3--st35pro .yb-ui-v3__step > span {
    color:
        rgba(255, 255, 255, 0.36);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.yb-ui-v3--st35pro .yb-ui-v3__step strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 650;
    line-height: 1.18;
}

.yb-ui-v3--st35pro .yb-ui-v3__step p {
    margin: 0;

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

    font-size: 11.5px;
    line-height: 1.50;
}

.yb-ui-v3--st35pro .yb-ui-v3__notice {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 25px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 9.5px;
    line-height: 1.45;
}


/* ==========================================================
   Linked capabilities
   ========================================================== */

.yb-ui-v3--st35pro .yb-ui-v3__capabilities {
    width: min(1570px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px
        solid
        var(--yb-ui-line-soft);

    border-top: 0;

    background:
        #07090c;
}

.yb-ui-v3--st35pro .yb-ui-v3__capabilities > span {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding:
        13px
        18px
        14px;

    border-right:
        1px
        solid
        rgba(255, 255, 255, 0.11);
}

.yb-ui-v3--st35pro .yb-ui-v3__capabilities > span:last-child {
    border-right: 0;
}

.yb-ui-v3--st35pro .yb-ui-v3__capabilities strong {
    color:
        rgba(255, 255, 255, 0.50);

    font-size: 9px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.yb-ui-v3--st35pro .yb-ui-v3__capabilities em {
    color: #ffffff;

    font-size: clamp(16px, 1.25vw, 20px);
    font-style: normal;
    font-weight: 650;
    line-height: 1.1;
}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1100px) {

    .yb-ui-v3--st35pro .yb-ui-v3__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.76fr);

        gap: 34px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__module {
        grid-template-columns:
            minmax(0, 1fr)
            230px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__rail {
        padding:
            24px
            20px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__notice {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__operation {
        grid-template-columns:
            26px
            minmax(0, 1fr);

        gap: 5px;
        padding:
            5px
            6px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__operation-key {
        width: 24px;
        height: 24px;
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

    .yb-ui-v3--st35pro {
        padding:
            34px
            0
            44px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__inner {
        width:
            calc(
                100% -
                24px
            );
    }

    .yb-ui-v3--st35pro .yb-ui-v3__header {
        display: block;

        margin-bottom: 22px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__heading {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            );
    }

    .yb-ui-v3--st35pro .yb-ui-v3__intro-wrap {
        margin-top: 22px;

        padding:
            0
            0
            0
            18px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__module {
        display: block;
    }

    /*
    Keep the actual device view 4:3 even on mobile.
    The UI components shrink proportionally with cqw/cqh.
    */
    .yb-ui-v3--st35pro .yb-ui-v3__viewport {
        aspect-ratio: 4 / 3;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__web-controls {
        padding:
            7px
            7px
            8px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__feedback {
        font-size: 7px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__operations {
        gap: 3px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__operation {
        display: block;

        min-height: 46px;

        padding:
            5px
            3px;

        text-align: center;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__operation-key {
        width: 22px;
        height: 22px;

        margin:
            0
            auto
            4px;

        font-size: 12px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__operation-copy strong {
        font-size: 7px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__operation-copy small {
        display: none;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__rail {
        min-height: 0;

        padding:
            25px
            22px
            28px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__notice {
        position: static;

        margin-top: 22px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__capabilities {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .yb-ui-v3--st35pro .yb-ui-v3__capabilities > span:nth-child(2) {
        border-right: 0;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__capabilities > span:nth-child(-n + 2) {
        border-bottom:
            1px
            solid
            rgba(255, 255, 255, 0.11);
    }

}


/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .yb-ui-v3--st35pro .yb-ui-v3__scene,
    .yb-ui-v3--st35pro .yb-ui-v3__reticle,
    .yb-ui-v3--st35pro .yb-ui-v3__impact,
    .yb-ui-v3--st35pro .yb-ui-v3__operation {
        transition: none;
    }

}

/* ==========================================================================
   SOURCE: 05_AI_Super_Resolution_HTML — style block 1
   ========================================================================== */
/* =============================================================================
   SCREEN 05 V4.4 — BLUE-GOLD SPLIT EDITORIAL FIELD PROOF
   Namespace: .yb-ai42
   All selectors are scoped to this section.
   ============================================================================= */

.yb-ai42,
.yb-ai42 *,
.yb-ai42 *::before,
.yb-ai42 *::after {
    box-sizing: border-box;
}

.yb-ai42 {
    --yb-ai42-red: var(--yb-accent, #ef2436);
    --yb-ai42-white: #ffffff;
    --yb-ai42-soft: #c8cdd4;
    --yb-ai42-muted: #9ea6b0;
    --yb-ai42-line: rgba(255, 255, 255, 0.16);

    width: 100%;
    overflow: hidden;
    isolation: isolate;

    color: var(--yb-ai42-white);
    background:
        radial-gradient(circle at 78% 76%, rgba(68, 92, 125, 0.10), transparent 35%),
        linear-gradient(180deg, #030405 0%, #071019 58%, #030405 100%);

    font-family: Inter, Arial, "Helvetica Neue", Helvetica, sans-serif;
    scroll-margin-top: 90px;
}

.yb-ai42 h2,
.yb-ai42 h3,
.yb-ai42 p,
.yb-ai42 figure {
    margin: 0;
}

.yb-ai42 img {
    display: block;
    width: 100%;
}

.yb-ai42__inner {
    width: min(1480px, calc(100% - 64px));
    margin: 0 auto;
    padding: clamp(76px, 6.6vw, 106px) 0 clamp(68px, 5.7vw, 90px);
}

/* -----------------------------------------------------------------------------
   01. Unified editorial header
   ----------------------------------------------------------------------------- */

.yb-ai42__header {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.72fr);
    align-items: end;
    gap: clamp(48px, 6vw, 88px);

    width: 100%;
    margin-bottom: clamp(30px, 3vw, 44px);
}

.yb-ai42__heading,
.yb-ai42__intro-block {
    min-width: 0;
}

.yb-ai42__eyebrow {
    margin-bottom: 14px;
    color: #d4d9df;
    font-size: 10px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.yb-ai42__title {
    max-width: 810px;
    color: #ffffff;
    font-size: clamp(43px, 4.25vw, 67px);
    font-weight: 770;
    line-height: 0.99;
    letter-spacing: -0.047em;
}

.yb-ai42__title span {
    display: block;
    color: #afb6bf;
}

.yb-ai42__intro-block {
    padding-left: clamp(24px, 2.7vw, 40px);
    border-left: 1px solid var(--yb-ai42-line);
}

.yb-ai42__intro {
    max-width: 560px;
    margin-bottom: 17px;
    color: var(--yb-ai42-soft);
    font-size: clamp(14px, 1.02vw, 17px);
    line-height: 1.66;
}

.yb-ai42__native-spec {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #c8cdd3;
    font-size: 11px;
    font-weight: 650;
}

.yb-ai42__native-spec::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--yb-ai42-red);
}

.yb-ai42__native-spec strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 760;
}

/* -----------------------------------------------------------------------------
   02. Split editorial stage
   The image and proof rail are separate columns, so the colour image remains
   unobstructed and this screen does not repeat Screen 06's overlay structure.
   ----------------------------------------------------------------------------- */

.yb-ai42__stage {
    display: grid;

    /* Approximately 68% field image / 32% proof rail on large screens. */
    grid-template-columns: minmax(0, 2.08fr) minmax(360px, 1fr);

    /* A deliberate fixed visual range prevents the two stacked proof frames
       from stretching this section into an oversized chapter. */
    height: clamp(620px, 43vw, 710px);

    overflow: hidden;
    background: #090d12;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-ai42__field {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #17202a;
}

.yb-ai42__field-image {
    position: absolute;
    inset: 0;

    background-repeat: no-repeat;
    background-size: cover;
    /* Keeps the eye and objective lens inside the useful crop while giving
       the product slightly more breathing room than the previous version. */
    background-position: 45% center;

    opacity: 0;

    /*
       Base correction:
       - slightly reduces the orange saturation of the generated image;
       - preserves overall brightness;
       - adds a small amount of local contrast for product readability.
    */
    filter: brightness(1.04) saturate(0.90) contrast(1.035);
    transition: opacity 420ms ease;
}

.yb-ai42__field-image.is-loaded {
    opacity: 1;
}

.yb-ai42__field-image.is-missing {
    opacity: 1;
    filter: none;
    background:
        radial-gradient(circle at 38% 44%, #263340 0%, #111923 48%, #070b10 100%);
}


/*
   Blue-gold spatial treatment
   ---------------------------
   The generated source is strongly orange. A uniform hue shift would also alter
   skin and the product housing, so the colour correction is spatial instead:
   cooler blue is concentrated in the sky and distant landscape, while a very
   restrained warm highlight remains around the sunset. No dark overlay is used.
*/
.yb-ai42__field-tone {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(72, 151, 205, 0.24) 0%,
            rgba(48, 112, 160, 0.12) 36%,
            rgba(23, 57, 86, 0.03) 58%,
            transparent 72%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 38%,
            rgba(45, 104, 151, 0.07) 58%,
            rgba(30, 78, 119, 0.15) 100%
        ),
        radial-gradient(
            circle at 76% 36%,
            rgba(255, 221, 168, 0.14),
            transparent 31%
        );

    background-blend-mode: soft-light, soft-light, screen;
    mix-blend-mode: soft-light;
    opacity: 0.84;
}

/* A restrained edge fade helps the image meet the proof rail without covering
   the person or product with a dark mask. */
.yb-ai42__field-edge {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 80%, rgba(4, 8, 12, 0.10) 100%),
        linear-gradient(180deg, transparent 84%, rgba(2, 5, 8, 0.10) 100%);
}

/* -----------------------------------------------------------------------------
   03. Independent same-frame proof rail
   ----------------------------------------------------------------------------- */

.yb-ai42__proof {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(22px, 2vw, 30px);

    /* Lighter than the previous rail: still distinct, but no longer a large
       dark card competing with the bright field photograph. */
    background:
        radial-gradient(circle at 74% 13%, rgba(76, 99, 129, 0.08), transparent 34%),
        linear-gradient(180deg, #0b1118 0%, #070b10 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.yb-ai42__proof-header {
    margin-bottom: 14px;
}

.yb-ai42__proof-header p {
    margin-bottom: 5px;
    color: #aab2bc;
    font-size: 9px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yb-ai42__proof-header h3 {
    color: #ffffff;
    font-size: clamp(18px, 1.25vw, 23px);
    font-weight: 720;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.yb-ai42__proof-list {
    display: grid;
    gap: 13px;
}

.yb-ai42__proof-card {
    min-width: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.yb-ai42__proof-card--enhanced {
    border-color: rgba(255, 255, 255, 0.18);
}

.yb-ai42__proof-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #11151a;
}

.yb-ai42__proof-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* Critical clarity rule: never scale or animate the bitmap. */
    transform: none;
    transition: none;
    filter: brightness(1.04) contrast(1.03);
    image-rendering: auto;
}

.yb-ai42__proof-caption {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 11px 9px;
}

.yb-ai42__proof-index {
    flex: 0 0 auto;
    color: var(--yb-ai42-red);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.10em;
}

.yb-ai42__proof-caption > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yb-ai42__proof-caption strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.2;
}

.yb-ai42__proof-caption small {
    color: #adb5bf;
    font-size: 10px;
    line-height: 1.35;
}


/* -----------------------------------------------------------------------------
   Medium desktop / tablet landscape
   ----------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .yb-ai42__inner {
        width: min(100% - 48px, 1120px);
    }

    .yb-ai42__header {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 0.78fr);
        gap: 38px;
    }

    .yb-ai42__stage {
        grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.82fr);
        height: 620px;
    }

    .yb-ai42__proof {
        padding: 24px;
    }
}

/* -----------------------------------------------------------------------------
   Tablet portrait
   The outdoor image remains first; proof cards move below it in two columns.
   ----------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .yb-ai42__inner {
        width: calc(100% - 36px);
        padding: 66px 0 74px;
    }

    .yb-ai42__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 24px;
    }

    .yb-ai42__intro-block {
        max-width: 720px;
        padding-left: 18px;
    }

    .yb-ai42__stage {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .yb-ai42__field {
        aspect-ratio: 16 / 9;
    }

    .yb-ai42__field-image {
        background-position: 37% center;
    }

    .yb-ai42__proof {
        border-top: 1px solid rgba(255, 255, 255, 0.13);
        border-left: 0;
    }

    .yb-ai42__proof-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* -----------------------------------------------------------------------------
   Mobile
   ----------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .yb-ai42 {
        scroll-margin-top: 70px;
    }

    .yb-ai42__inner {
        width: calc(100% - 24px);
        padding: 58px 0 64px;
    }

    .yb-ai42__header {
        margin-bottom: 26px;
    }

    .yb-ai42__title {
        font-size: clamp(38px, 11vw, 51px);
        line-height: 1.01;
    }

    .yb-ai42__intro {
        font-size: 13px;
        line-height: 1.6;
    }

    .yb-ai42__field {
        aspect-ratio: 4 / 3;
    }

    .yb-ai42__field-image {
        background-position: 40% center;
    }

    .yb-ai42__field-tone {
        opacity: 0.70;
    }

    .yb-ai42__proof {
        padding: 17px 13px 18px;
    }

    .yb-ai42__proof-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yb-ai42__field-image {
        transition: none !important;
    }
}

/* ==========================================================================
   SOURCE: 06_High_Sensitivity_HTML — style block 1
   ========================================================================== */
/* =============================================================================
   SCREEN 06 V7.4 — REFINED FIELD EVIDENCE
   Namespace: .yb-hs73
   ============================================================================= */

.yb-hs73,
.yb-hs73 *,
.yb-hs73 *::before,
.yb-hs73 *::after {
    box-sizing: border-box;
}

.yb-hs73 {
    --yb-hs73-red: var(--yb-accent, #ef2436);
    --yb-hs73-white: #ffffff;
    --yb-hs73-soft: #c8cdd4;
    --yb-hs73-muted: #9ea6b0;
    --yb-hs73-line: rgba(255, 255, 255, 0.16);

    width: 100%;
    overflow: hidden;
    isolation: isolate;

    padding: clamp(76px, 6.6vw, 106px) clamp(16px, 3.2vw, 50px) clamp(52px, 4.4vw, 72px);

    color: var(--yb-hs73-white);
    background: #020304;
    font-family: Inter, Arial, "Helvetica Neue", Helvetica, sans-serif;
    scroll-margin-top: 90px;
}

.yb-hs73 h2,
.yb-hs73 p,
.yb-hs73 figure {
    margin: 0;
}

.yb-hs73 img {
    display: block;
    width: 100%;
}

.yb-hs73__inner {
    width: min(100%, 1480px);
    margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   01. Unified editorial header
   ----------------------------------------------------------------------------- */

.yb-hs73__header {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.72fr);
    align-items: end;
    gap: clamp(48px, 6vw, 88px);

    width: 100%;
    margin-bottom: clamp(30px, 3vw, 44px);
}

.yb-hs73__heading,
.yb-hs73__intro-block {
    min-width: 0;
}

.yb-hs73__eyebrow {
    margin-bottom: 14px;
    color: #d4d9df;
    font-size: 10px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.yb-hs73__title {
    max-width: 850px;
    color: #ffffff;
    font-size: clamp(43px, 4.25vw, 67px);
    font-weight: 770;
    line-height: 0.99;
    letter-spacing: -0.047em;
}

.yb-hs73__title span {
    display: block;
    color: #afb6bf;
}

.yb-hs73__intro-block {
    padding-left: clamp(24px, 2.7vw, 40px);
    border-left: 1px solid var(--yb-hs73-line);
}

.yb-hs73__intro {
    max-width: 560px;
    color: var(--yb-hs73-soft);
    font-size: clamp(14px, 1.02vw, 17px);
    line-height: 1.66;
}

/* -----------------------------------------------------------------------------
   02. Full-width field stage
   ----------------------------------------------------------------------------- */

.yb-hs73__stage {
    position: relative;
    width: 100%;

    /* Compact desktop range: large enough for the field image and evidence,
       but no longer another near-Hero-height chapter. */
    height: clamp(590px, 43vw, 650px);

    overflow: hidden;
    isolation: isolate;
    background: #090b0e;
}

.yb-hs73__main-visual {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: 48% 50%;

    opacity: 0;
    filter: brightness(1.045) saturate(1.025);
    transition: opacity 420ms ease;
}

.yb-hs73__main-visual.is-loaded {
    opacity: 1;
}

.yb-hs73__main-visual.is-missing {
    opacity: 1;
    filter: none;
    background:
        radial-gradient(circle at 28% 46%, #1a2026 0%, #090b0e 48%, #020304 100%);
}

/* Localised right-side shade only. */
.yb-hs73__right-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(2, 3, 5, 0.00) 0%,
            rgba(2, 3, 5, 0.00) 57%,
            rgba(2, 3, 5, 0.05) 66%,
            rgba(2, 3, 5, 0.17) 79%,
            rgba(2, 3, 5, 0.40) 100%
        );
}

/* -----------------------------------------------------------------------------
   03. In-image evidence overlay
   ----------------------------------------------------------------------------- */

.yb-hs73__evidence {
    position: absolute;
    z-index: 3;
    top: 50%;

    /* Slightly narrower and closer to the right edge, keeping the evidence
       clear of the user's face and the principal product silhouette. */
    right: clamp(18px, 2.2vw, 34px);
    width: clamp(500px, 38%, 590px);
    transform: translateY(-39%);
}

/* Dynamic specification badges */
.yb-hs73__badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 114px;
    gap: 12px;
    margin-bottom: 14px;
}

.yb-hs73__badge {
    position: relative;
    display: none;
    height: 114px;
    min-height: 114px;
    padding: 12px 12px 11px;
    overflow: hidden;

    grid-template-rows: 31px minmax(0, 1fr) 15px;
    justify-items: center;
    align-items: center;

    color: #fff;
    background:
        linear-gradient(145deg, rgba(17, 20, 25, 0.58), rgba(7, 9, 13, 0.43));
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 9px;
    backdrop-filter: blur(5px) saturate(110%);
    -webkit-backdrop-filter: blur(5px) saturate(110%);
}

.yb-hs73__badge.is-active {
    display: grid;
}

.yb-hs73__badge-label {
    align-self: center;
    color: #fff;
    font-size: 21px;
    font-weight: 790;
    line-height: 1;
    letter-spacing: -0.04em;
}

.yb-hs73__badge-value {
    align-self: center;
    color: #fff;
    font-size: clamp(21px, 1.5vw, 27px);
    font-weight: 790;
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.yb-hs73__badge--netd .yb-hs73__badge-value {
    color: var(--yb-hs73-red);
}

.yb-hs73__badge-value--resolution {
    font-size: clamp(19px, 1.35vw, 24px);
}

.yb-hs73__badge small {
    align-self: end;
    color: #a5aab2;
    font-size: 8px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
}

.yb-hs73__matrix {
    display: grid;
    grid-template-columns: repeat(3, 7px);
    grid-template-rows: repeat(3, 7px);
    gap: 4px;
    align-self: center;
}

.yb-hs73__matrix i {
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.82);
}

.yb-hs73__matrix i:nth-child(5) {
    background: var(--yb-hs73-red);
    border-color: var(--yb-hs73-red);
}

.yb-hs73__pitch-icon {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: center;
}

.yb-hs73__pitch-icon i {
    width: 8px;
    height: 23px;
    border: 1px solid rgba(255, 255, 255, 0.76);
}

.yb-hs73__pitch-icon i:nth-child(2) {
    height: 33px;
    border-color: var(--yb-hs73-red);
}

/* Same-scene proof images */
.yb-hs73__thermal-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.yb-hs73__thermal {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #0a0c0f;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.yb-hs73__thermal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 56%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0.64) 100%);
}

.yb-hs73__thermal img {
    width: 100%;
    aspect-ratio: 1.64 / 1;
    object-fit: cover;
    object-position: center;

    /* No scaling: preserve source-image sharpness. */
    transform: none;
    transition: none;
    image-rendering: auto;
}

.yb-hs73__thermal figcaption {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 10px;
    left: 12px;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.yb-hs73__thermal figcaption strong {
    color: #fff;
    font-size: 12px;
    font-weight: 740;
    line-height: 1.15;
}

.yb-hs73__thermal figcaption span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1.2;
}


/* -----------------------------------------------------------------------------
   Entrance motion
   ----------------------------------------------------------------------------- */

.yb-hs73__header,
.yb-hs73__stage {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 620ms ease,
        transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.yb-hs73__stage {
    transition-delay: 80ms;
}

.yb-hs73.is-visible .yb-hs73__header,
.yb-hs73.is-visible .yb-hs73__stage {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   Medium desktop / tablet landscape
   ----------------------------------------------------------------------------- */

@media (max-width: 1240px) {
    .yb-hs73__header {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 0.78fr);
        gap: 38px;
    }

    .yb-hs73__stage {
        height: clamp(570px, 54vw, 640px);
    }

    .yb-hs73__main-visual {
        background-position: 43% 50%;
    }

    .yb-hs73__evidence {
        right: 18px;
        width: min(43%, 550px);
    }

    .yb-hs73__badges {
        grid-auto-rows: 110px;
    }

    .yb-hs73__badge {
        height: 110px;
        min-height: 110px;
    }
}

/* -----------------------------------------------------------------------------
   Tablet portrait
   On smaller screens the image appears first and evidence enters normal flow.
   ----------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .yb-hs73 {
        padding: 62px 16px 68px;
    }

    .yb-hs73__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 24px;
        margin-bottom: 30px;
    }

    .yb-hs73__intro-block {
        max-width: 720px;
        padding-left: 18px;
    }

    .yb-hs73__title {
        font-size: clamp(38px, 8vw, 54px);
        line-height: 1.01;
    }

    .yb-hs73__stage {
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
        overflow: visible;
        background: transparent;
    }

    .yb-hs73__main-visual {
        position: relative;
        inset: auto;
        height: clamp(345px, 64vw, 500px);
        background-position: 38% 50%;
    }

    .yb-hs73__right-shade {
        display: none;
    }

    .yb-hs73__evidence {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        margin-top: 22px;
        transform: none;
    }

    .yb-hs73__badges {
        grid-auto-rows: 114px;
    }

    .yb-hs73__badge {
        height: 114px;
        min-height: 114px;
        background:
            linear-gradient(145deg, rgba(24, 27, 33, 0.78), rgba(8, 10, 14, 0.70));
    }
}

/* -----------------------------------------------------------------------------
   Small mobile
   ----------------------------------------------------------------------------- */

@media (max-width: 520px) {
    .yb-hs73 {
        padding: 54px 11px 60px;
        scroll-margin-top: 70px;
    }

    .yb-hs73__title {
        font-size: clamp(35px, 10vw, 46px);
    }

    .yb-hs73__intro {
        font-size: 13px;
        line-height: 1.58;
    }

    .yb-hs73__main-visual {
        height: clamp(290px, 81vw, 380px);
    }

    .yb-hs73__evidence {
        margin-top: 16px;
    }

    .yb-hs73__badges {
        grid-auto-rows: 104px;
        gap: 8px;
        margin-bottom: 10px;
    }

    .yb-hs73__badge {
        height: 104px;
        min-height: 104px;
        grid-template-rows: 30px minmax(0, 1fr) 14px;
        padding: 11px 7px 10px;
        border-radius: 7px;
    }

    .yb-hs73__badge-label {
        font-size: 19px;
    }

    .yb-hs73__badge-value {
        font-size: 18px;
    }

    .yb-hs73__badge-value--resolution {
        font-size: 15px;
    }

    .yb-hs73__badge small {
        font-size: 6px;
    }

    .yb-hs73__matrix {
        grid-template-columns: repeat(3, 5px);
        grid-template-rows: repeat(3, 5px);
        gap: 3px;
    }

    .yb-hs73__matrix i {
        width: 5px;
        height: 5px;
    }

    .yb-hs73__thermal-pair {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .yb-hs73__thermal figcaption strong {
        font-size: 11px;
    }

    .yb-hs73__thermal figcaption span {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yb-hs73__header,
    .yb-hs73__stage,
    .yb-hs73__main-visual {
        transition: none !important;
    }

    .yb-hs73__header,
    .yb-hs73__stage {
        opacity: 1;
        transform: none;
    }
}

/* =============================================================================
   ST35PRO CONTENT-INTEGRITY REVISION — SCREEN 05 V4.5 / SCREEN 06 V7.5

   The legacy comparison selectors remain above only so an in-progress Elementor
   handoff fails safely. The current markup and runtime use the verified feature
   and specification panels below. Unverified comparison imagery is suppressed
   before JavaScript initialisation and is removed from the DOM by st35pro.js.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Screen 05 — AI Super Resolution without simulated output proof
   ----------------------------------------------------------------------------- */

.yb-ai42__proof-header,
.yb-ai42__proof-list {
    display: none !important;
}

.yb-ai42__intro {
    margin-bottom: 0;
}

.yb-ai42__stage {
    grid-template-columns: minmax(0, 1.72fr) minmax(380px, 0.88fr);
    height: clamp(570px, 40vw, 650px);
}

.yb-ai42__field-image {
    background-position: 50% center;
    filter: brightness(0.96) saturate(0.92) contrast(1.035);
}

.yb-ai42__field-tone {
    background:
        linear-gradient(
            180deg,
            rgba(54, 102, 142, 0.15) 0%,
            rgba(30, 65, 94, 0.06) 48%,
            transparent 74%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 60%,
            rgba(6, 12, 18, 0.12) 100%
        );
    background-blend-mode: soft-light, normal;
    mix-blend-mode: normal;
    opacity: 0.72;
}

.yb-ai42__feature {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(28px, 2.4vw, 38px);
    padding: clamp(30px, 3vw, 48px);
    background:
        radial-gradient(circle at 78% 16%, rgba(78, 111, 148, 0.12), transparent 34%),
        linear-gradient(180deg, #0b1118 0%, #06090d 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.yb-ai42__feature h3,
.yb-ai42__feature p,
.yb-ai42__feature dl,
.yb-ai42__feature dt,
.yb-ai42__feature dd {
    margin: 0;
}

.yb-ai42__feature-copy {
    display: grid;
    gap: 13px;
}

.yb-ai42__feature-kicker {
    color: #aeb7c2;
    font-size: 9px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.yb-ai42__feature-copy h3 {
    max-width: 470px;
    color: #ffffff;
    font-size: clamp(25px, 2vw, 34px);
    font-weight: 740;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.yb-ai42__feature-copy > p:last-child {
    max-width: 500px;
    color: #bdc5ce;
    font-size: 14px;
    line-height: 1.65;
}

.yb-ai42__feature-facts {
    display: grid;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.yb-ai42__feature-facts > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.72fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.yb-ai42__feature-facts dt {
    color: #aab2bc;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yb-ai42__feature-facts dd {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.yb-ai42__feature-facts strong {
    color: #ffffff;
    font-size: clamp(17px, 1.3vw, 21px);
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.yb-ai42__feature-facts span {
    color: #9fa8b3;
    font-size: 10px;
    line-height: 1.35;
}

.yb-ai42__feature-note {
    position: relative;
    padding-left: 14px;
    color: #aeb6c0;
    font-size: 10px;
    line-height: 1.5;
}

.yb-ai42__feature-note::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yb-ai42-red);
}

/* -----------------------------------------------------------------------------
   Screen 06 — specification-led sensitivity presentation
   ----------------------------------------------------------------------------- */

.yb-hs73__thermal-pair {
    display: none !important;
}

.yb-hs73 h3 {
    margin: 0;
}

.yb-hs73__main-visual {
    background-position: 50% center;
    filter: brightness(0.88) saturate(0.88) contrast(1.04);
}

.yb-hs73__right-shade {
    background:
        linear-gradient(
            90deg,
            rgba(2, 3, 5, 0.00) 0%,
            rgba(2, 3, 5, 0.00) 46%,
            rgba(2, 3, 5, 0.14) 62%,
            rgba(2, 3, 5, 0.52) 100%
        );
}

.yb-hs73__evidence {
    top: 50%;
    right: clamp(22px, 3vw, 50px);
    width: clamp(500px, 38%, 590px);
    transform: translateY(-50%);
}

.yb-hs73__badges {
    margin-bottom: 12px;
}

.yb-hs73__context {
    padding: clamp(24px, 2.2vw, 34px);
    background:
        linear-gradient(145deg, rgba(15, 19, 25, 0.76), rgba(5, 8, 12, 0.68));
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 9px;
    backdrop-filter: blur(7px) saturate(108%);
    -webkit-backdrop-filter: blur(7px) saturate(108%);
}

.yb-hs73__context p,
.yb-hs73__context h3 {
    margin: 0;
}

.yb-hs73__context-kicker {
    margin-bottom: 11px !important;
    color: #b3bbc5;
    font-size: 9px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.yb-hs73__context h3 {
    max-width: 500px;
    margin-bottom: 12px;
    color: #ffffff;
    font-size: clamp(23px, 1.85vw, 31px);
    font-weight: 740;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.yb-hs73__context > p:last-child {
    max-width: 500px;
    color: #bdc5ce;
    font-size: 13px;
    line-height: 1.62;
}

@media (max-width: 1180px) {
    .yb-ai42__stage {
        grid-template-columns: minmax(0, 1.42fr) minmax(350px, 0.88fr);
        height: 600px;
    }

    .yb-ai42__feature {
        padding: 30px;
    }
}

@media (max-width: 900px) {
    .yb-ai42__stage {
        grid-template-columns: 1fr;
        height: auto;
    }

    .yb-ai42__feature {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-left: 0;
    }
}

@media (max-width: 860px) {
    .yb-hs73__evidence {
        width: auto;
        transform: none;
    }

    .yb-hs73__context {
        background:
            linear-gradient(145deg, rgba(22, 26, 33, 0.86), rgba(7, 10, 14, 0.82));
    }
}

@media (max-width: 600px) {
    .yb-ai42__feature {
        gap: 25px;
        padding: 26px 19px 28px;
    }

    .yb-ai42__feature-copy h3 {
        font-size: 25px;
    }

    .yb-ai42__feature-copy > p:last-child {
        font-size: 13px;
        line-height: 1.58;
    }

    .yb-ai42__feature-facts > div {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 0;
    }
}

@media (max-width: 520px) {
    .yb-hs73__context {
        padding: 22px 18px;
        border-radius: 7px;
    }

    .yb-hs73__context h3 {
        font-size: 23px;
    }

    .yb-hs73__context > p:last-child {
        font-size: 12px;
        line-height: 1.58;
    }
}

/* ==========================================================================
   SOURCE: 07_Field_Ready_Operation_HTML — style block 1
   ========================================================================== */
/* ==============================================================
   07_Field_Ready_Operation_ST35Pro
   Revision — Photo Primary + Minimal Technical Field
   Namespace: .yb-control-v3--st35pro
   ============================================================== */

.yb-control-v3--st35pro {
    --yb-control-v3-bg: #060a10;
    --yb-control-v3-bg-deep: #030609;
    --yb-control-v3-text: #f7f9fc;
    --yb-control-v3-soft: #c8d0da;
    --yb-control-v3-muted: #9ca7b5;
    --yb-control-v3-faint: rgba(222, 232, 244, 0.44);
    --yb-control-v3-line: rgba(220, 231, 244, 0.15);
    --yb-control-v3-line-soft: rgba(220, 231, 244, 0.08);
    --yb-control-v3-steel: #a7b9cf;
    --yb-control-v3-accent: var(--yb-accent, #e31e24);

    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    padding: clamp(52px, 4vw, 72px) 0 clamp(26px, 2.2vw, 38px);
    background: var(--yb-control-v3-bg);
    color: var(--yb-control-v3-text);
    scroll-margin-top: 90px;
}

.yb-control-v3--st35pro,
.yb-control-v3--st35pro * {
    box-sizing: border-box;
}

.yb-control-v3--st35pro button {
    font: inherit;
}

/* --------------------------------------------------------------
   Continuous ambient field
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__ambient {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 78% 44%,
            rgba(77, 108, 148, 0.24) 0%,
            rgba(42, 66, 95, 0.14) 32%,
            rgba(20, 32, 49, 0.06) 56%,
            transparent 74%
        ),
        radial-gradient(
            ellipse at 92% 9%,
            rgba(129, 151, 180, 0.08) 0%,
            transparent 43%
        ),
        linear-gradient(
            180deg,
            #080d14 0%,
            #09111a 48%,
            #071019 78%,
            #05090e 100%
        );
}

.yb-control-v3--st35pro .yb-control-v3__ambient::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: min(55vw, 900px);
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(135, 160, 193, 0.025) 44%,
        rgba(135, 160, 193, 0.08) 100%
    );
    pointer-events: none;
}

.yb-control-v3--st35pro .yb-control-v3__ambient::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(5, 9, 14, 0.44)
    );
}

/* --------------------------------------------------------------
   Decorative blueprint field
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__blueprint {
    position: absolute;
    top: 24px;
    right: -3%;
    z-index: -1;
    width: min(72vw, 1260px);
    height: calc(100% - 52px);
    pointer-events: none;
    opacity: 0.095;
}

.yb-control-v3--st35pro .yb-control-v3__blueprint-main {
    fill: none;
    stroke: rgba(174, 196, 223, 0.20);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}


.yb-control-v3--st35pro .yb-control-v3__blueprint-points {
    fill: rgba(189, 209, 233, 0.34);
}

.yb-control-v3--st35pro .yb-control-v3__inner {
    width: min(1580px, calc(100% - 64px));
    margin: 0 auto;
}

/* --------------------------------------------------------------
   Continuous stage
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__stage {
    position: relative;
    min-height: clamp(670px, 42.5vw, 748px);
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 76% 46%,
            rgba(102, 133, 171, 0.095),
            rgba(47, 69, 96, 0.03) 44%,
            transparent 73%
        );
}


/* --------------------------------------------------------------
   Editorial typography
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__editorial {
    position: relative;
    z-index: 12;
    width: min(37%, 530px);
    padding: clamp(34px, 3vw, 50px) 0 0 clamp(10px, 1vw, 18px);
    pointer-events: none;
}

.yb-control-v3--st35pro .yb-control-v3__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    color: rgba(232, 238, 246, 0.68);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.yb-control-v3--st35pro .yb-control-v3__eyebrow span {
    position: relative;
    width: 34px;
    height: 1px;
    flex: 0 0 auto;
    background: var(--yb-control-v3-accent);
}

.yb-control-v3--st35pro .yb-control-v3__eyebrow span::after {
    content: "";
    position: absolute;
    top: -2px;
    right: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yb-control-v3-accent);
}

.yb-control-v3--st35pro .yb-control-v3__heading {
    max-width: 530px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 3.3vw, 59px);
    font-weight: 760;
    line-height: 1.01;
    letter-spacing: -0.048em;
}

.yb-control-v3--st35pro .yb-control-v3__heading span {
    display: block;
    color: #c1c8d1;
}

.yb-control-v3--st35pro .yb-control-v3__intro {
    max-width: 485px;
    margin: clamp(20px, 1.8vw, 27px) 0 0;
    color: var(--yb-control-v3-muted);
    font-size: 15px;
    line-height: 1.68;
}

.yb-control-v3--st35pro .yb-control-v3__current {
    position: relative;
    max-width: 480px;
    min-height: 152px;
    margin-top: clamp(34px, 2.7vw, 44px);
    padding: 18px 0 0 21px;
    border-top: 1px solid var(--yb-control-v3-line);
}

.yb-control-v3--st35pro .yb-control-v3__current::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 3px;
    left: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        var(--yb-control-v3-accent),
        rgba(227, 30, 36, 0.08)
    );
}

.yb-control-v3--st35pro .yb-control-v3__current-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

.yb-control-v3--st35pro .yb-control-v3__current-number {
    color: var(--yb-control-v3-accent);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
}

.yb-control-v3--st35pro .yb-control-v3__current-context {
    color: rgba(226, 233, 242, 0.50);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.145em;
    text-transform: uppercase;
}

.yb-control-v3--st35pro .yb-control-v3__current-body {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
}

.yb-control-v3--st35pro .yb-control-v3__current-glyph {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border: 1px solid rgba(199, 214, 232, 0.27);
    border-radius: 50%;
}

.yb-control-v3--st35pro .yb-control-v3__current-glyph::before,
.yb-control-v3--st35pro .yb-control-v3__current-glyph::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(199, 214, 232, 0.40);
    transform: translate(-50%, -50%);
}

.yb-control-v3--st35pro .yb-control-v3__current-glyph::before {
    width: 31px;
    height: 1px;
}

.yb-control-v3--st35pro .yb-control-v3__current-glyph::after {
    width: 1px;
    height: 31px;
}

.yb-control-v3--st35pro .yb-control-v3__current-glyph i {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(227, 30, 36, 0.78);
    border-radius: 50%;
}

.yb-control-v3--st35pro .yb-control-v3__current-title {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 720;
    line-height: 1.18;
    letter-spacing: -0.024em;
    transition: opacity 150ms ease, transform 150ms ease;
}

.yb-control-v3--st35pro .yb-control-v3__current-copy {
    min-height: calc(3 * 1.58em);
    max-width: 425px;
    margin: 10px 0 0;
    color: rgba(219, 225, 234, 0.88);
    font-size: 13.5px;
    line-height: 1.58;
    transition: opacity 150ms ease, transform 150ms ease;
}

.yb-control-v3--st35pro .yb-control-v3__current.is-updating .yb-control-v3__current-title,
.yb-control-v3--st35pro .yb-control-v3__current.is-updating .yb-control-v3__current-copy {
    opacity: 0;
    transform: translateY(5px);
}

/* --------------------------------------------------------------
   Product scene
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__visual {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

.yb-control-v3--st35pro .yb-control-v3__scene-layer {
    --parallax-x: 0px;
    --parallax-y: 0px;

    position: absolute;
    inset: -8px;
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.yb-control-v3--st35pro .yb-control-v3__image {
    position: absolute;
    display: block;
    max-width: none !important;
    user-select: none;
    pointer-events: none;
}

/* The supplied photo remains untouched. Its black background is feathered into
   the shared canvas instead of being regenerated or cut out. */
.yb-control-v3--st35pro .yb-control-v3__image--main {
    z-index: 3;
    top: 6%;
    right: -1.5%;
    width: 70% !important;
    height: 86% !important;
    object-fit: contain !important;
    object-position: center center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
    opacity: 0;
    filter:
        brightness(1.18)
        contrast(0.92)
        saturate(0.92);
    transform: translate3d(0, 0, 0) scale(0.985);
    transform-origin: 58% 50%;
    transition:
        opacity 420ms ease,
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 420ms ease;
    will-change: opacity, transform;
}

/* The real product photo stays primary for all four features. */
.yb-control-v3--st35pro
.yb-control-v3__stage[data-active-view="main"]
.yb-control-v3__image--main {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Keep the camera locked between feature changes so hotspot coordinates
   remain physically anchored to the same product geometry. */
/* --------------------------------------------------------------
   Active point treatment
   The previous large elliptical trace was removed. The selected
   component is indicated only by the compact hotspot itself.
   -------------------------------------------------------------- */

/* --------------------------------------------------------------
   Text protection / photo feathering
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__image-blend {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(5, 9, 14, 0.96) 0%,
            rgba(5, 9, 14, 0.78) 16%,
            rgba(5, 9, 14, 0.39) 28%,
            rgba(5, 9, 14, 0.08) 39%,
            transparent 49%
        ),
        linear-gradient(
            180deg,
            rgba(5, 9, 14, 0.12) 0%,
            transparent 24%,
            transparent 72%,
            rgba(5, 9, 14, 0.44) 100%
        );
}

/* --------------------------------------------------------------
   Hotspots
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__hotspot {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 9;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78);
    pointer-events: none;
    transition: opacity 230ms ease, transform 230ms ease;
}

.yb-control-v3--st35pro
.yb-control-v3__stage.is-visible
.yb-control-v3__hotspot {
    transition-delay: var(--delay);
}

.yb-control-v3--st35pro
.yb-control-v3__stage[data-active-view="main"]
.yb-control-v3__hotspot[data-hotspot-view="main"] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.yb-control-v3--st35pro .yb-control-v3__hotspot-marker {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(232, 239, 248, 0.46);
    border-radius: 50%;
    background: rgba(6, 11, 17, 0.70);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(4px);
    transition:
        border-color 190ms ease,
        background-color 190ms ease,
        box-shadow 190ms ease,
        transform 190ms ease;
}


.yb-control-v3--st35pro .yb-control-v3__hotspot-marker i {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.9);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.055em;
}

.yb-control-v3--st35pro .yb-control-v3__hotspot-line {
    position: absolute;
    top: 50%;
    left: calc(100% - 1px);
    width: 32px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(227, 30, 36, 0.72),
        rgba(225, 236, 248, 0.12)
    );
    opacity: 0;
    transform: translateY(-50%) scaleX(0.55);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity 170ms ease, transform 170ms ease;
}

.yb-control-v3--st35pro .yb-control-v3__hotspot-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 24px);
    min-width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(246, 249, 253, 0.9);
    font-size: 9.5px;
    font-weight: 730;
    line-height: 1;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translate(-5px, -50%);
    pointer-events: none;
    transition: opacity 170ms ease, transform 170ms ease;
}


.yb-control-v3--st35pro .yb-control-v3__hotspot:hover .yb-control-v3__hotspot-marker,
.yb-control-v3--st35pro .yb-control-v3__hotspot:focus-visible .yb-control-v3__hotspot-marker {
    transform: scale(1.06);
    border-color: rgba(255, 255, 255, 0.94);
}

.yb-control-v3--st35pro .yb-control-v3__hotspot:hover .yb-control-v3__hotspot-line,
.yb-control-v3--st35pro .yb-control-v3__hotspot:focus-visible .yb-control-v3__hotspot-line,
.yb-control-v3--st35pro .yb-control-v3__hotspot.is-active .yb-control-v3__hotspot-line {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
}

.yb-control-v3--st35pro .yb-control-v3__hotspot:hover .yb-control-v3__hotspot-label,
.yb-control-v3--st35pro .yb-control-v3__hotspot:focus-visible .yb-control-v3__hotspot-label,
.yb-control-v3--st35pro .yb-control-v3__hotspot.is-active .yb-control-v3__hotspot-label {
    opacity: 1;
    transform: translate(0, -50%);
}

.yb-control-v3--st35pro .yb-control-v3__hotspot:focus-visible {
    outline: none;
}

.yb-control-v3--st35pro .yb-control-v3__hotspot:focus-visible .yb-control-v3__hotspot-marker {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.14),
        0 9px 26px rgba(0, 0, 0, 0.24);
}

.yb-control-v3--st35pro .yb-control-v3__hotspot.is-active .yb-control-v3__hotspot-marker {
    border-color: rgba(227, 30, 36, 0.96);
    background: rgba(9, 12, 17, 0.88);
    box-shadow:
        0 0 0 2px rgba(227, 30, 36, 0.10),
        0 6px 18px rgba(0, 0, 0, 0.26);
}

/* --------------------------------------------------------------
   Feature rail
   -------------------------------------------------------------- */
.yb-control-v3--st35pro .yb-control-v3__feature-rail {
    --rail-offset: 0%;

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 13;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 92px;
    border-top: 1px solid var(--yb-control-v3-line);
    background: linear-gradient(
        180deg,
        rgba(5, 9, 14, 0.14),
        rgba(5, 9, 14, 0.72)
    );
}

.yb-control-v3--st35pro .yb-control-v3__feature-rail::before {
    content: "";
    position: absolute;
    top: -1px;
    left: var(--rail-offset);
    width: 25%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(227, 30, 36, 0.98) 0,
        rgba(227, 30, 36, 0.98) 22px,
        rgba(227, 30, 36, 0.34) 58px,
        rgba(232, 239, 247, 0.30) 100%
    );
    transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yb-control-v3--st35pro .yb-control-v3__feature {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin: 0;
    padding: 0 24px;
    border: 0;
    background: transparent;
    color: rgba(228, 235, 244, 0.57);
    text-align: left;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
}

.yb-control-v3--st35pro .yb-control-v3__feature::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;
    width: 1px;
    background: var(--yb-control-v3-line-soft);
}

.yb-control-v3--st35pro .yb-control-v3__feature:first-child::before {
    display: none;
}

.yb-control-v3--st35pro .yb-control-v3__feature::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 24px;
    width: 18px;
    height: 1px;
    background: transparent;
    box-shadow: 26px 0 0 transparent;
    transition:
        width 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.yb-control-v3--st35pro .yb-control-v3__feature-number {
    color: rgba(226, 234, 244, 0.54);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    transition: color 180ms ease;
}

.yb-control-v3--st35pro .yb-control-v3__feature strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 710;
    line-height: 1.25;
    letter-spacing: 0.008em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yb-control-v3--st35pro .yb-control-v3__feature-node {
    position: absolute;
    top: -4px;
    left: 24px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(220, 231, 244, 0.38);
    border-radius: 50%;
    background: var(--yb-control-v3-bg);
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.yb-control-v3--st35pro .yb-control-v3__feature:hover,
.yb-control-v3--st35pro .yb-control-v3__feature:focus-visible {
    color: rgba(255, 255, 255, 0.94);
}

.yb-control-v3--st35pro .yb-control-v3__feature:focus-visible {
    outline: 1px solid rgba(225, 234, 245, 0.46);
    outline-offset: -2px;
}

.yb-control-v3--st35pro .yb-control-v3__feature.is-active {
    color: #ffffff;
}

.yb-control-v3--st35pro .yb-control-v3__feature.is-active::after {
    width: 23px;
    background: var(--yb-control-v3-accent);
    box-shadow: 31px 0 0 rgba(229, 237, 247, 0.34);
}

.yb-control-v3--st35pro .yb-control-v3__feature.is-active .yb-control-v3__feature-number {
    color: var(--yb-control-v3-accent);
}

.yb-control-v3--st35pro .yb-control-v3__feature.is-active .yb-control-v3__feature-node {
    border-color: var(--yb-control-v3-accent);
    background: var(--yb-control-v3-accent);
    box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.08);
}

/* --------------------------------------------------------------
   Tablet
   -------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
    .yb-control-v3--st35pro .yb-control-v3__inner {
        width: calc(100% - 48px);
    }

    .yb-control-v3--st35pro .yb-control-v3__stage {
        min-height: 685px;
    }

    .yb-control-v3--st35pro .yb-control-v3__editorial {
        width: min(43%, 455px);
        padding-top: 38px;
    }

    .yb-control-v3--st35pro .yb-control-v3__heading {
        font-size: 46px;
    }

    .yb-control-v3--st35pro .yb-control-v3__intro {
        max-width: 410px;
        font-size: 14px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current {
        max-width: 420px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current-copy {
        min-height: calc(4 * 1.58em);
        font-size: 13px;
    }

    .yb-control-v3--st35pro .yb-control-v3__image--main {
        right: -4%;
        width: 73% !important;
    }


    .yb-control-v3--st35pro .yb-control-v3__hotspot-label,
    .yb-control-v3--st35pro .yb-control-v3__hotspot-line {
        display: none;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature {
        padding: 0 15px;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature::after,
    .yb-control-v3--st35pro .yb-control-v3__feature-node {
        left: 15px;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature strong {
        font-size: 11px;
    }
}

/* --------------------------------------------------------------
   Mobile
   -------------------------------------------------------------- */
@media (max-width: 767px) {
    .yb-control-v3--st35pro {
        padding: 52px 0 34px;
        scroll-margin-top: 70px;
    }

    .yb-control-v3--st35pro .yb-control-v3__blueprint {
        top: 332px;
        right: -46%;
        width: 154%;
        height: 455px;
        opacity: 0.11;
    }

    .yb-control-v3--st35pro .yb-control-v3__inner {
        width: calc(100% - 32px);
    }

    .yb-control-v3--st35pro .yb-control-v3__stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
    }

    .yb-control-v3--st35pro .yb-control-v3__editorial {
        position: relative;
        z-index: 12;
        width: 100%;
        padding: 0 0 30px;
        pointer-events: auto;
    }

    .yb-control-v3--st35pro .yb-control-v3__heading {
        max-width: 430px;
        font-size: clamp(39px, 11.2vw, 47px);
    }

    .yb-control-v3--st35pro .yb-control-v3__intro {
        max-width: 470px;
        font-size: 14.5px;
        line-height: 1.64;
    }

    .yb-control-v3--st35pro .yb-control-v3__current {
        max-width: none;
        min-height: 155px;
        margin-top: 27px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current-body {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 11px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current-glyph {
        width: 21px;
        height: 21px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current-glyph::before {
        width: 27px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current-glyph::after {
        height: 27px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current-title {
        font-size: 20px;
    }

    .yb-control-v3--st35pro .yb-control-v3__current-copy {
        min-height: calc(4 * 1.58em);
        max-width: 440px;
        font-size: 13px;
    }

    .yb-control-v3--st35pro .yb-control-v3__visual {
        position: relative;
        inset: auto;
        order: 2;
        height: clamp(350px, 88vw, 465px);
        margin: 0 -16px;
        overflow: hidden;
    }

    .yb-control-v3--st35pro .yb-control-v3__scene-layer {
        inset: -5px;
    }

    .yb-control-v3--st35pro .yb-control-v3__image--main {
        top: 4%;
        right: -13%;
        width: 112% !important;
        height: 88% !important;
        filter:
            brightness(1.16)
            contrast(0.93)
            saturate(0.92);
    }




    .yb-control-v3--st35pro .yb-control-v3__image-blend {
        background:
            linear-gradient(
                90deg,
                rgba(5, 9, 14, 0.18) 0%,
                transparent 32%,
                transparent 100%
            ),
            linear-gradient(
                180deg,
                rgba(5, 9, 14, 0.08) 0%,
                transparent 18%,
                transparent 70%,
                rgba(5, 9, 14, 0.36) 100%
            );
    }

    .yb-control-v3--st35pro .yb-control-v3__hotspot {
        width: 32px;
        height: 32px;
    }

    .yb-control-v3--st35pro .yb-control-v3__hotspot-label,
    .yb-control-v3--st35pro .yb-control-v3__hotspot-line {
        display: none;
    }

    .yb-control-v3--st35pro
    .yb-control-v3__hotspot[data-feature="objective"] {
        --x: 31.5% !important;
        --y: 57% !important;
    }

    .yb-control-v3--st35pro
    .yb-control-v3__hotspot[data-feature="ranging"] {
        --x: 55.5% !important;
        --y: 57.2% !important;
    }

    .yb-control-v3--st35pro
    .yb-control-v3__hotspot[data-feature="power"] {
        --x: 57.5% !important;
        --y: 68.2% !important;
    }

    .yb-control-v3--st35pro
    .yb-control-v3__hotspot[data-feature="controls"][data-hotspot-view="main"] {
        --x: 61% !important;
        --y: 34% !important;
    }



    .yb-control-v3--st35pro .yb-control-v3__feature-rail {
        position: relative;
        inset: auto;
        order: 3;
        display: flex;
        min-height: 80px;
        overflow-x: auto;
        border-bottom: 1px solid var(--yb-control-v3-line-soft);
        scrollbar-width: none;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature-rail::before {
        display: none;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature-rail::-webkit-scrollbar {
        display: none;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature {
        flex: 0 0 168px;
        min-height: 80px;
        padding: 0 15px;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature::before {
        top: 22px;
        bottom: 22px;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature::after,
    .yb-control-v3--st35pro .yb-control-v3__feature-node {
        left: 15px;
    }

    .yb-control-v3--st35pro .yb-control-v3__feature strong {
        font-size: 11.5px;
        white-space: normal;
    }
}

/* --------------------------------------------------------------
   Motion accessibility
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .yb-control-v3--st35pro .yb-control-v3__scene-layer,
    .yb-control-v3--st35pro .yb-control-v3__image,
    .yb-control-v3--st35pro .yb-control-v3__hotspot,
    .yb-control-v3--st35pro .yb-control-v3__hotspot-marker,
    .yb-control-v3--st35pro .yb-control-v3__hotspot-line,
    .yb-control-v3--st35pro .yb-control-v3__hotspot-label,
    .yb-control-v3--st35pro .yb-control-v3__feature,
    .yb-control-v3--st35pro .yb-control-v3__feature-rail::before,
    .yb-control-v3--st35pro .yb-control-v3__current-copy,
    .yb-control-v3--st35pro .yb-control-v3__current-title {
        transition: none !important;
    }
}

/* ==========================================================================
   SOURCE: 08_Included_Accessories_HTML — style block 1
   ========================================================================== */
/* =============================================================================
   SCREEN 08 — INCLUDED ACCESSORIES V4.1
   Every selector is scoped to #st35pro-included-accessories.
   ============================================================================= */

#st35pro-included-accessories,
#st35pro-included-accessories * {
    box-sizing: border-box;
}

#st35pro-included-accessories {
    --acc41-bg: #040506;
    --acc41-bg-soft: #090c10;
    --acc41-text: #ffffff;
    --acc41-soft: rgba(255, 255, 255, 0.70);
    --acc41-muted: rgba(255, 255, 255, 0.40);
    --acc41-line: rgba(255, 255, 255, 0.11);
    --acc41-accent: var(--yb-accent, #ef2436);

    --acc41-card: #f3f3f1;
    --acc41-card-text: #25282d;
    --acc41-card-soft: #666b73;

    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;

    padding:
        clamp(46px, 4vw, 62px)
        0
        clamp(42px, 3.6vw, 56px);

    color: var(--acc41-text);
    background:
        radial-gradient(circle at 20% 48%, rgba(75, 104, 148, 0.07), transparent 31%),
        radial-gradient(circle at 78% 78%, rgba(239, 36, 54, 0.035), transparent 28%),
        linear-gradient(180deg, #030405 0%, #06080b 58%, #050608 100%);

    font-family: Inter, Arial, "Helvetica Neue", Helvetica, sans-serif;
    scroll-margin-top: 88px;
}

#st35pro-included-accessories button {
    font: inherit;
}

#st35pro-included-accessories h2,
#st35pro-included-accessories h3,
#st35pro-included-accessories p,
#st35pro-included-accessories dl,
#st35pro-included-accessories dd,
#st35pro-included-accessories figure {
    margin: 0;
}

#st35pro-included-accessories img {
    display: block;
    max-width: 100%;
}

#st35pro-included-accessories .yb-acc41__ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

#st35pro-included-accessories .yb-acc41__glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.42;
}

#st35pro-included-accessories .yb-acc41__glow--left {
    top: 24%;
    left: -11%;
    width: 420px;
    height: 420px;
    background: rgba(73, 101, 144, 0.12);
}

#st35pro-included-accessories .yb-acc41__glow--right {
    right: 7%;
    bottom: -29%;
    width: 520px;
    height: 350px;
    background: rgba(239, 36, 54, 0.045);
}

#st35pro-included-accessories .yb-acc41__inner {
    width: min(1280px, calc(100% - 64px));
    margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   01. Header
   ----------------------------------------------------------------------------- */

#st35pro-included-accessories .yb-acc41__header {
    width: min(100%, 880px);
    margin: 0 auto clamp(24px, 2.4vw, 34px);
    text-align: center;
}

#st35pro-included-accessories .yb-acc41__eyebrow {
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#st35pro-included-accessories .yb-acc41__title {
    color: #ffffff;
    font-size: clamp(39px, 3.2vw, 54px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.045em;
}

#st35pro-included-accessories .yb-acc41__header-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 15px;
}

#st35pro-included-accessories .yb-acc41__header-meta p {
    color: var(--acc41-soft);
    font-size: 13px;
    line-height: 1.5;
}

#st35pro-included-accessories .yb-acc41__header-meta > span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#st35pro-included-accessories .yb-acc41__header-meta strong {
    color: var(--acc41-accent);
    font-size: 13px;
    font-weight: 800;
}

/* -----------------------------------------------------------------------------
   02. Carousel stage
   ----------------------------------------------------------------------------- */

#st35pro-included-accessories .yb-acc41__stage {
    position: relative;
    display: grid;
    grid-template-columns:
        44px
        minmax(300px, 0.46fr)
        minmax(340px, 0.54fr)
        44px;
    grid-template-areas: "prev visual detail next";
    align-items: center;
    gap: clamp(22px, 2.7vw, 38px);
    min-height: clamp(318px, 24vw, 372px);
    outline: none;
}

#st35pro-included-accessories .yb-acc41__stage:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.28);
    outline-offset: 9px;
}

/* Product card */
#st35pro-included-accessories .yb-acc41__visual {
    grid-area: visual;
    display: grid;
    justify-items: center;
    min-width: 0;
}

#st35pro-included-accessories .yb-acc41__card {
    position: relative;
    width: min(100%, 340px);
    min-height: 298px;
    overflow: hidden;

    border-radius: 13px;
    color: var(--acc41-card-text);
    background: linear-gradient(145deg, #f7f7f5 0%, #ececea 100%);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30);

    transform: translate3d(0, 0, 0);
    transition:
        opacity 180ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

#st35pro-included-accessories .yb-acc41__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 34%);
}

#st35pro-included-accessories .yb-acc41__card.is-changing {
    opacity: 0;
    transform: translate3d(-13px, 4px, 0) scale(0.985);
}

#st35pro-included-accessories .yb-acc41__card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 14px 18px 0;
}

#st35pro-included-accessories .yb-acc41__card-number {
    color: rgba(37, 40, 45, 0.36);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

#st35pro-included-accessories .yb-acc41__quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 25px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--acc41-accent);
    background: rgba(239, 36, 54, 0.09);
    font-size: 10px;
    font-weight: 800;
}

#st35pro-included-accessories .yb-acc41__media {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    height: 198px;
    padding: 7px 22px 3px;
}

#st35pro-included-accessories .yb-acc41__product-shadow {
    position: absolute;
    bottom: 25px;
    left: 50%;
    width: 176px;
    height: 30px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(21, 23, 27, 0.15), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

#st35pro-included-accessories .yb-acc41__image {
    position: relative;
    z-index: 2;
    width: 88%;
    height: 90%;
    max-width: none;
    object-fit: contain;
    user-select: none;
    pointer-events: none;

    filter: drop-shadow(0 13px 16px rgba(0, 0, 0, 0.16));
    transform: translate3d(0, 0, 0) scale(var(--acc41-image-scale, 1));
    transition:
        opacity 180ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

#st35pro-included-accessories .yb-acc41__card.is-changing .yb-acc41__image {
    opacity: 0;
    transform: translate3d(13px, -2px, 0) scale(calc(var(--acc41-image-scale, 1) * 0.98));
}

#st35pro-included-accessories .yb-acc41__image-fallback {
    position: relative;
    z-index: 3;
    color: #777c83;
    font-size: 11px;
    text-align: center;
}

#st35pro-included-accessories .yb-acc41__card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 10px 18px 16px;
}

#st35pro-included-accessories .yb-acc41__card-name {
    overflow: hidden;
    color: var(--acc41-card-soft);
    font-size: 14px;
    font-weight: 560;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#st35pro-included-accessories .yb-acc41__card-index {
    flex: 0 0 auto;
    color: rgba(37, 40, 45, 0.32);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.10em;
}

/* Detail area */
#st35pro-included-accessories .yb-acc41__detail {
    grid-area: detail;
    position: relative;
    max-width: 520px;
    min-width: 0;
    padding: 18px 0 18px clamp(0px, 1vw, 14px);
    transition:
        opacity 170ms ease,
        transform 280ms ease;
}

#st35pro-included-accessories .yb-acc41__detail.is-changing {
    opacity: 0;
    transform: translate3d(13px, 0, 0);
}

#st35pro-included-accessories .yb-acc41__detail-meta {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

#st35pro-included-accessories .yb-acc41__detail-number {
    color: var(--acc41-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

#st35pro-included-accessories .yb-acc41__detail-category {
    color: rgba(255, 255, 255, 0.40);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#st35pro-included-accessories .yb-acc41__detail-title {
    max-width: 500px;
    color: #ffffff;
    font-size: clamp(34px, 3.25vw, 52px);
    font-weight: 735;
    line-height: 0.99;
    letter-spacing: -0.049em;
}

#st35pro-included-accessories .yb-acc41__detail-copy {
    max-width: 455px;
    min-height: calc(2 * 1.65em);
    margin-top: clamp(16px, 1.6vw, 22px);
    color: var(--acc41-soft);
    font-size: 13.5px;
    line-height: 1.65;
}

#st35pro-included-accessories .yb-acc41__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    max-width: 470px;
    margin-top: clamp(19px, 1.8vw, 25px);
    border-top: 1px solid var(--acc41-line);
    border-bottom: 1px solid var(--acc41-line);
}

#st35pro-included-accessories .yb-acc41__facts > div {
    min-width: 0;
    padding: 13px 16px 13px 0;
}

#st35pro-included-accessories .yb-acc41__facts > div + div {
    padding-left: 18px;
    border-left: 1px solid var(--acc41-line);
}

#st35pro-included-accessories .yb-acc41__facts dt {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

#st35pro-included-accessories .yb-acc41__facts dd {
    color: #ffffff;
    font-size: 13px;
    font-weight: 680;
    line-height: 1.25;
}

#st35pro-included-accessories .yb-acc41__fact-quantity {
    color: var(--acc41-accent);
}

#st35pro-included-accessories .yb-acc41__detail-note {
    max-width: 450px;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    line-height: 1.5;
}

/* Arrows */
#st35pro-included-accessories .yb-acc41__arrow {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.60);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition:
        color 170ms ease,
        border-color 170ms ease,
        background-color 170ms ease,
        transform 170ms ease;
}

#st35pro-included-accessories .yb-acc41__arrow--prev { grid-area: prev; }
#st35pro-included-accessories .yb-acc41__arrow--next { grid-area: next; }

#st35pro-included-accessories .yb-acc41__arrow:hover,
#st35pro-included-accessories .yb-acc41__arrow:focus-visible {
    color: #ffffff;
    border-color: var(--acc41-accent);
    background: var(--acc41-accent);
}

#st35pro-included-accessories .yb-acc41__arrow--prev:hover { transform: translateX(-2px); }
#st35pro-included-accessories .yb-acc41__arrow--next:hover { transform: translateX(2px); }

#st35pro-included-accessories .yb-acc41__arrow:focus-visible {
    outline: 2px solid rgba(239, 36, 54, 0.30);
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   03. Bottom navigation
   ----------------------------------------------------------------------------- */

#st35pro-included-accessories .yb-acc41__navigation {
    display: grid;
    grid-template-columns: auto minmax(110px, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: min(100%, 880px);
    margin: 18px auto 0;
}

#st35pro-included-accessories .yb-acc41__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

#st35pro-included-accessories .yb-acc41__dot {
    width: 7px;
    height: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.23);
    cursor: pointer;
    transition:
        width 180ms ease,
        border-radius 180ms ease,
        background-color 180ms ease;
}

#st35pro-included-accessories .yb-acc41__dot.is-active {
    width: 25px;
    border-radius: 999px;
    background: var(--acc41-accent);
}

#st35pro-included-accessories .yb-acc41__dot:focus-visible {
    outline: 2px solid rgba(239, 36, 54, 0.34);
    outline-offset: 3px;
}

#st35pro-included-accessories .yb-acc41__progress {
    position: relative;
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.10);
}

#st35pro-included-accessories .yb-acc41__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--acc41-accent);
    transform: scaleX(0);
    transform-origin: left center;
}

#st35pro-included-accessories .yb-acc41__progress.is-running span {
    animation: ybAcc41Progress 2.8s linear forwards;
}

#st35pro-included-accessories .yb-acc41__package-note {
    color: rgba(255, 255, 255, 0.40);
    font-size: 8px;
    line-height: 1.4;
    text-align: right;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 1020px) {
    #st35pro-included-accessories .yb-acc41__inner {
        width: calc(100% - 48px);
    }

    #st35pro-included-accessories .yb-acc41__stage {
        grid-template-columns:
            40px
            minmax(270px, 0.48fr)
            minmax(300px, 0.52fr)
            40px;
        gap: 22px;
    }

    #st35pro-included-accessories .yb-acc41__card {
        min-height: 286px;
    }

    #st35pro-included-accessories .yb-acc41__media {
        height: 188px;
    }
}

@media (max-width: 767px) {
    #st35pro-included-accessories {
        padding: 48px 0 50px;
        scroll-margin-top: 70px;
    }

    #st35pro-included-accessories .yb-acc41__inner {
        width: calc(100% - 28px);
    }

    #st35pro-included-accessories .yb-acc41__header {
        margin-bottom: 24px;
    }

    #st35pro-included-accessories .yb-acc41__title {
        font-size: clamp(37px, 10.8vw, 47px);
    }

    #st35pro-included-accessories .yb-acc41__header-meta {
        gap: 9px 16px;
    }

    #st35pro-included-accessories .yb-acc41__stage {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        grid-template-areas:
            "prev visual next"
            ". detail .";
        gap: 18px 10px;
        min-height: 0;
    }

    #st35pro-included-accessories .yb-acc41__card {
        width: min(100%, 340px);
    }

    #st35pro-included-accessories .yb-acc41__detail {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        padding: 3px 4px 0;
        text-align: center;
    }

    #st35pro-included-accessories .yb-acc41__detail-meta {
        justify-content: center;
    }

    #st35pro-included-accessories .yb-acc41__detail-title {
        margin: 0 auto;
        font-size: 38px;
    }

    #st35pro-included-accessories .yb-acc41__detail-copy {
        min-height: 0;
        margin: 15px auto 0;
        font-size: 13px;
        line-height: 1.6;
    }

    #st35pro-included-accessories .yb-acc41__facts {
        margin: 18px auto 0;
        text-align: left;
    }

    #st35pro-included-accessories .yb-acc41__detail-note {
        margin: 12px auto 0;
    }

    #st35pro-included-accessories .yb-acc41__navigation {
        grid-template-columns: auto minmax(70px, 1fr);
        margin-top: 22px;
    }

    #st35pro-included-accessories .yb-acc41__package-note {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (max-width: 450px) {
    #st35pro-included-accessories .yb-acc41__stage {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
    }

    #st35pro-included-accessories .yb-acc41__arrow {
        width: 34px;
        height: 34px;
    }

    #st35pro-included-accessories .yb-acc41__card {
        min-height: 272px;
    }

    #st35pro-included-accessories .yb-acc41__media {
        height: 176px;
    }

    #st35pro-included-accessories .yb-acc41__facts {
        grid-template-columns: 1fr;
    }

    #st35pro-included-accessories .yb-acc41__facts > div {
        padding: 12px 0;
    }

    #st35pro-included-accessories .yb-acc41__facts > div + div {
        padding-left: 0;
        border-top: 1px solid var(--acc41-line);
        border-left: 0;
    }
}

@keyframes ybAcc41Progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    #st35pro-included-accessories .yb-acc41__card,
    #st35pro-included-accessories .yb-acc41__image,
    #st35pro-included-accessories .yb-acc41__detail,
    #st35pro-included-accessories .yb-acc41__progress span {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SOURCE: 09_Specifications_Comparison_HTML — style block 1
   ========================================================================== */
/*
     * v1.6 Apple Clean Light
     * Goals:
     * 1. Keep the proven unified technical-spec logic.
     * 2. Move the visual style closer to Apple / iPhone UI language:
     *    cleaner spacing, softer cards, brighter surfaces, restrained borders,
     *    lighter typography hierarchy, and calmer controls.
     * 3. Stay connected to the surrounding product page through subtle
     *    dark-to-red ambient background tints rather than a heavy dark table.
     */
    #yb-techspec-v16 {
        --ts-red: #e0202b;
        --ts-red-soft: rgba(224, 32, 43, .10);
        --ts-ink: #15171b;
        --ts-ink-2: #2b3139;
        --ts-text: #1d1f23;
        --ts-text-soft: #606775;
        --ts-page: #f5f5f7;
        --ts-surface: rgba(255, 255, 255, .88);
        --ts-surface-strong: #ffffff;
        --ts-surface-soft: #fafafb;
        --ts-surface-soft-2: #f0f2f5;
        --ts-line: rgba(20, 24, 28, .08);
        --ts-line-strong: rgba(20, 24, 28, .14);
        --ts-shadow: 0 16px 40px rgba(16, 22, 30, .08);
        --ts-shadow-soft: 0 8px 24px rgba(16, 22, 30, .05);
        --ts-difference: #fff5f6;
        --yb-model-count: 1;

        position: relative;
        width: 100%;
        overflow: hidden;
        isolation: isolate;
        background:
            radial-gradient(circle at 0% 15%, rgba(140, 12, 22, .12), transparent 28%),
            radial-gradient(circle at 88% 10%, rgba(31, 65, 118, .08), transparent 32%),
            linear-gradient(180deg, #0b0d12 0, #0b0d12 16px, var(--ts-page) 16px, var(--ts-page) calc(100% - 16px), #0b0d12 calc(100% - 16px), #0b0d12 100%);
        color: var(--ts-text);
        color-scheme: light;
        font-family: inherit;
    }

    #yb-techspec-v16,
    #yb-techspec-v16 * {
        box-sizing: border-box;
    }

    #yb-techspec-v16 .yb-ts16__inner {
        width: min(1180px, calc(100% - 52px));
        margin: 0 auto;
        padding: 56px 0 54px;
    }

    #yb-techspec-v16 .yb-ts16__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(390px, 470px);
        gap: 34px;
        align-items: end;
        margin-bottom: 18px;
    }

    #yb-techspec-v16 .yb-ts16__eyebrow {
        position: relative;
        margin: 0 0 10px;
        padding-left: 20px;
        color: var(--ts-red);
        font-size: 10px;
        font-weight: 760;
        line-height: 1.2;
        letter-spacing: .18em;
    }

    #yb-techspec-v16 .yb-ts16__eyebrow::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 2px;
        background: var(--ts-red);
        content: "";
        transform: translateY(-50%);
        border-radius: 999px;
    }

    #yb-techspec-v16 .yb-ts16__title {
        margin: 0;
        color: var(--ts-ink) !important;
        font-size: clamp(38px, 4vw, 54px);
        font-weight: 680;
        line-height: .98;
        letter-spacing: -.05em;
    }

    #yb-techspec-v16 .yb-ts16__intro {
        max-width: 640px;
        margin: 12px 0 0;
        color: var(--ts-text-soft) !important;
        font-size: 14px;
        line-height: 1.56;
    }

    #yb-techspec-v16 .yb-ts16__controls {
        display: grid;
        grid-template-columns: .88fr 1.12fr;
        gap: 12px;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 20px;
        background: rgba(255,255,255,.62) !important;
        box-shadow: var(--ts-shadow-soft);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    #yb-techspec-v16 .yb-ts16__control {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 6px;
    }

    #yb-techspec-v16 .yb-ts16__control-label {
        padding-left: 4px;
        color: #7b828d !important;
        font-size: 9px;
        font-weight: 740;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    #yb-techspec-v16 .yb-ts16__locked-model,
    #yb-techspec-v16 .yb-ts16__select {
        width: 100%;
        min-height: 44px;
        border: 1px solid rgba(17, 20, 25, .10) !important;
        border-radius: 13px;
        background: rgba(255,255,255,.86) !important;
        color: var(--ts-ink) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
        font: inherit;
    }

    #yb-techspec-v16 .yb-ts16__locked-model {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 14px;
        font-size: 18px;
        font-weight: 680;
        letter-spacing: -.02em;
    }

    #yb-techspec-v16 .yb-ts16__locked-model small {
        display: inline-flex;
        min-height: 20px;
        align-items: center;
        padding: 0 8px;
        border-radius: 999px;
        background: #eff2f5 !important;
        color: #818793 !important;
        font-size: 8px;
        font-weight: 760;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    #yb-techspec-v16 .yb-ts16__select {
        padding: 0 40px 0 14px;
        cursor: pointer;
        font-size: 18px;
        letter-spacing: -.02em;
    }

    #yb-techspec-v16 .yb-ts16__select option {
        background: #ffffff;
        color: var(--ts-ink);
    }

    #yb-techspec-v16 .yb-ts16__select:focus {
        border-color: rgba(224, 32, 43, .45) !important;
        outline: 3px solid rgba(224, 32, 43, .10);
    }

    #yb-techspec-v16 .yb-ts16__toolbar {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
        padding: 0 4px;
    }

    #yb-techspec-v16 .yb-ts16__summary {
        color: #767d88 !important;
        font-size: 11px;
        line-height: 1.5;
    }

    #yb-techspec-v16 .yb-ts16__toolbar-right,
    #yb-techspec-v16 .yb-ts16__comparison-actions,
    #yb-techspec-v16 .yb-ts16__view-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    #yb-techspec-v16 .yb-ts16__comparison-actions[hidden] {
        display: none !important;
    }

    #yb-techspec-v16 .yb-ts16__button {
        min-height: 32px;
        padding: 0 13px;
        border: 1px solid rgba(17, 20, 25, .10) !important;
        border-radius: 999px;
        background: rgba(255,255,255,.82) !important;
        color: #343a41 !important;
        box-shadow: 0 2px 7px rgba(16,22,30,.035);
        cursor: pointer;
        font: inherit;
        font-size: 10px;
        font-weight: 660;
        transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
    }

    #yb-techspec-v16 .yb-ts16__button:hover:not(:disabled) {
        border-color: rgba(224, 32, 43, .35) !important;
        color: var(--ts-red) !important;
        background: #ffffff !important;
        transform: translateY(-1px);
    }

    #yb-techspec-v16 .yb-ts16__button--reset {
        border-color: transparent !important;
        background: transparent !important;
        color: #8a919b !important;
        box-shadow: none;
    }

    #yb-techspec-v16 .yb-ts16__button--reset:hover:not(:disabled) {
        color: var(--ts-red) !important;
        background: transparent !important;
    }

    #yb-techspec-v16 .yb-ts16__button:disabled {
        opacity: .42;
        cursor: default;
        transform: none;
    }

    #yb-techspec-v16 .yb-ts16__toggle {
        display: inline-flex;
        min-height: 31px;
        align-items: center;
        gap: 8px;
        color: #4e5560 !important;
        cursor: pointer;
        font-size: 10px;
        font-weight: 660;
    }

    #yb-techspec-v16 .yb-ts16__toggle input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    #yb-techspec-v16 .yb-ts16__toggle-track {
        position: relative;
        width: 36px;
        height: 21px;
        border: 1px solid rgba(17, 20, 25, .10) !important;
        border-radius: 999px;
        background: #dde2e7 !important;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    }

    #yb-techspec-v16 .yb-ts16__toggle-track::after {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 2px 5px rgba(0,0,0,.15);
        content: "";
        transition: transform .18s ease;
    }

    #yb-techspec-v16 .yb-ts16__toggle input:checked + .yb-ts16__toggle-track {
        background: rgba(224, 32, 43, .92) !important;
        border-color: rgba(224, 32, 43, .92) !important;
    }

    #yb-techspec-v16 .yb-ts16__toggle input:checked + .yb-ts16__toggle-track::after {
        transform: translateX(15px);
    }

    #yb-techspec-v16 .yb-ts16__status {
        padding: 14px 18px;
        border: 1px solid rgba(17,20,25,.08) !important;
        border-radius: 16px;
        background: rgba(255,255,255,.72) !important;
        color: var(--ts-text-soft) !important;
        box-shadow: var(--ts-shadow-soft);
        font-size: 12px;
        line-height: 1.55;
    }

    #yb-techspec-v16 .yb-ts16__status[data-type="error"] {
        border-color: rgba(224, 32, 43, .25) !important;
        background: #fff7f8 !important;
        color: #a11a24 !important;
    }

    #yb-techspec-v16 .yb-ts16__content {
        overflow: hidden;
        border: 1px solid rgba(17,20,25,.08) !important;
        border-radius: 24px;
        background: rgba(255,255,255,.82) !important;
        box-shadow: var(--ts-shadow);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #yb-techspec-v16 .yb-ts16__table-scroll {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-color: #c3c8d0 #eef1f4;
    }

    #yb-techspec-v16 .yb-ts16__table {
        min-width: 0;
    }

    #yb-techspec-v16.is-comparing .yb-ts16__table {
        min-width: 760px;
    }

    #yb-techspec-v16 .yb-ts16__model-row,
    #yb-techspec-v16 .yb-ts16__field-row {
        display: grid;
        grid-template-columns: minmax(230px, .82fr) repeat(var(--yb-model-count), minmax(0, 1fr));
    }

    #yb-techspec-v16 .yb-ts16__model-row {
        border-bottom: 1px solid var(--ts-line);
        background: rgba(255,255,255,.75) !important;
    }

    #yb-techspec-v16 .yb-ts16__model-label {
        display: flex;
        align-items: flex-end;
        padding: 16px 16px 14px;
        background: rgba(246,247,249,.92) !important;
        color: #8a919b !important;
        font-size: 9px;
        font-weight: 760;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    #yb-techspec-v16 .yb-ts16__model-card {
        display: flex;
        min-width: 0;
        gap: 12px;
        align-items: center;
        padding: 14px 16px;
        border-left: 1px solid var(--ts-line) !important;
        background: transparent !important;
    }

    #yb-techspec-v16 .yb-ts16__model-image {
        display: flex;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid rgba(17,20,25,.07);
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff, #f3f4f6);
    }

    #yb-techspec-v16 .yb-ts16__model-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #yb-techspec-v16 .yb-ts16__model-copy {
        min-width: 0;
    }

    #yb-techspec-v16 .yb-ts16__model-name {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        align-items: center;
        margin: 0 0 2px;
        color: var(--ts-ink) !important;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    #yb-techspec-v16 .yb-ts16__model-meta {
        margin: 0 0 5px;
        color: #7d838d !important;
        font-size: 10px;
        line-height: 1.35;
    }

    #yb-techspec-v16 .yb-ts16__current-badge {
        display: inline-flex;
        min-height: 18px;
        align-items: center;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--ts-red) !important;
        color: #ffffff !important;
        font-size: 7px;
        font-weight: 760;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    #yb-techspec-v16 .yb-ts16__model-link {
        color: #343941 !important;
        font-size: 9px;
        font-weight: 650;
        text-decoration: none;
    }

    #yb-techspec-v16 .yb-ts16__model-link:hover {
        color: var(--ts-red) !important;
    }

    #yb-techspec-v16 .yb-ts16__group {
        border-top: 1px solid rgba(17,20,25,.06);
    }

    #yb-techspec-v16 .yb-ts16__group:first-of-type {
        border-top: 0;
    }

    #yb-techspec-v16 .yb-ts16__group-button,
    #yb-techspec-v16 .yb-ts16__group-static {
        display: grid;
        position: relative;
        width: 100%;
        min-height: 44px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 0 16px;
        border: 0 !important;
        background: rgba(249,250,251,.78) !important;
        color: #2c3138 !important;
        text-align: left;
        font: inherit;
    }

    #yb-techspec-v16 .yb-ts16__group-button {
        cursor: pointer;
    }

    #yb-techspec-v16 .yb-ts16__group-button::before,
    #yb-techspec-v16 .yb-ts16__group-static::before {
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 0;
        width: 2px;
        background: transparent;
        content: "";
        border-radius: 999px;
    }

    #yb-techspec-v16 .yb-ts16__group-button:hover {
        background: #f5f6f8 !important;
    }

    #yb-techspec-v16 .yb-ts16__group-button[aria-expanded="true"] {
        background: linear-gradient(90deg, #222832 0%, #2f3743 100%) !important;
        color: #ffffff !important;
    }

    #yb-techspec-v16 .yb-ts16__group-button[aria-expanded="true"]::before {
        background: var(--ts-red);
    }

    #yb-techspec-v16 .yb-ts16__group-title {
        display: flex;
        min-width: 0;
        gap: 8px;
        align-items: center;
        font-size: 10px;
        font-weight: 760;
        line-height: 1.3;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    #yb-techspec-v16 .yb-ts16__group-count {
        display: inline-flex;
        min-width: 20px;
        height: 18px;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border-radius: 999px;
        background: rgba(37,44,52,.08) !important;
        color: #757b85 !important;
        font-size: 8px;
        letter-spacing: 0;
    }

    #yb-techspec-v16 .yb-ts16__group-button[aria-expanded="true"] .yb-ts16__group-count {
        background: rgba(255,255,255,.12) !important;
        color: rgba(255,255,255,.8) !important;
    }

    #yb-techspec-v16 .yb-ts16__chevron {
        position: relative;
        width: 16px;
        height: 16px;
        color: #8a9099;
    }

    #yb-techspec-v16 .yb-ts16__group-button[aria-expanded="true"] .yb-ts16__chevron {
        color: rgba(255,255,255,.92);
    }

    #yb-techspec-v16 .yb-ts16__chevron::before,
    #yb-techspec-v16 .yb-ts16__chevron::after {
        position: absolute;
        top: 7px;
        left: 3px;
        width: 10px;
        height: 1.5px;
        border-radius: 999px;
        background: currentColor;
        content: "";
        transition: transform .18s ease;
    }

    #yb-techspec-v16 .yb-ts16__chevron::after {
        transform: rotate(90deg);
    }

    #yb-techspec-v16 .yb-ts16__group-button[aria-expanded="true"] .yb-ts16__chevron::after {
        transform: rotate(0);
    }

    #yb-techspec-v16 .yb-ts16__panel[hidden] {
        display: none;
    }

    #yb-techspec-v16 .yb-ts16__field-row {
        border-top: 1px solid rgba(17,20,25,.06);
    }

    #yb-techspec-v16 .yb-ts16__panel .yb-ts16__field-row:first-child {
        border-top: 0;
    }

    #yb-techspec-v16 .yb-ts16__field-label,
    #yb-techspec-v16 .yb-ts16__value {
        min-width: 0;
        padding: 13px 16px;
        font-size: 12px;
        line-height: 1.42;
    }

    #yb-techspec-v16 .yb-ts16__field-label {
        display: flex;
        align-items: center;
        background: rgba(250,250,251,.92) !important;
        color: #2d3137 !important;
        font-weight: 620;
    }

    #yb-techspec-v16 .yb-ts16__value {
        display: flex;
        align-items: center;
        border-left: 1px solid rgba(17,20,25,.06) !important;
        background: rgba(255,255,255,.82) !important;
        color: #353941 !important;
        font-weight: 520;
        overflow-wrap: anywhere;
    }

    #yb-techspec-v16 .yb-ts16__value.is-different {
        background: linear-gradient(180deg, #fff7f8, #fff3f4) !important;
        box-shadow: inset 2px 0 0 var(--ts-red);
    }

    #yb-techspec-v16 .yb-ts16__value.is-not-published {
        color: #9aa1aa !important;
    }

    #yb-techspec-v16 .yb-ts16__value.is-not-applicable {
        background: #f7f8fa !important;
        color: #8a919b !important;
    }

    #yb-techspec-v16 .yb-ts16__value.is-supported {
        color: #2f353b !important;
        font-weight: 620;
    }

    #yb-techspec-v16 .yb-ts16__value.is-not-supported {
        color: #8b9199 !important;
    }

    #yb-techspec-v16 .yb-ts16__empty {
        padding: 28px 18px;
        color: var(--ts-text-soft) !important;
        text-align: center;
        font-size: 11px;
    }

    @media (max-width: 980px) {
        #yb-techspec-v16 .yb-ts16__header {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        #yb-techspec-v16 .yb-ts16__controls {
            max-width: 720px;
        }

        #yb-techspec-v16 .yb-ts16__toolbar {
            align-items: flex-start;
            flex-direction: column;
        }

        #yb-techspec-v16 .yb-ts16__toolbar-right {
            width: 100%;
            justify-content: space-between;
        }
    }

    @media (max-width: 767px) {
        #yb-techspec-v16 {
            background:
                radial-gradient(circle at 0% 15%, rgba(140, 12, 22, .12), transparent 22%),
                radial-gradient(circle at 88% 10%, rgba(31, 65, 118, .08), transparent 28%),
                linear-gradient(180deg, #0b0d12 0, #0b0d12 10px, var(--ts-page) 10px, var(--ts-page) calc(100% - 10px), #0b0d12 calc(100% - 10px), #0b0d12 100%);
        }

        #yb-techspec-v16 .yb-ts16__inner {
            width: 100%;
            padding: 40px 0 42px;
        }

        #yb-techspec-v16 .yb-ts16__header,
        #yb-techspec-v16 .yb-ts16__toolbar,
        #yb-techspec-v16 .yb-ts16__status {
            margin-right: 16px;
            margin-left: 16px;
        }

        #yb-techspec-v16 .yb-ts16__title {
            font-size: 36px;
        }

        #yb-techspec-v16 .yb-ts16__controls {
            grid-template-columns: 1fr;
            border-radius: 18px;
        }

        #yb-techspec-v16 .yb-ts16__toolbar-right,
        #yb-techspec-v16 .yb-ts16__view-actions {
            width: 100%;
        }

        #yb-techspec-v16 .yb-ts16__view-actions .yb-ts16__button {
            flex: 1;
        }

        #yb-techspec-v16 .yb-ts16__comparison-actions {
            width: 100%;
            justify-content: space-between;
        }

        #yb-techspec-v16 .yb-ts16__content {
            border-radius: 20px;
        }

        #yb-techspec-v16 .yb-ts16__model-row,
        #yb-techspec-v16 .yb-ts16__field-row {
            grid-template-columns: minmax(126px, .8fr) repeat(var(--yb-model-count), minmax(170px, 1fr));
        }

        #yb-techspec-v16:not(.is-comparing) .yb-ts16__model-row,
        #yb-techspec-v16:not(.is-comparing) .yb-ts16__field-row {
            grid-template-columns: minmax(126px, .8fr) minmax(0, 1.2fr);
        }

        #yb-techspec-v16 .yb-ts16__model-label,
        #yb-techspec-v16 .yb-ts16__model-card,
        #yb-techspec-v16 .yb-ts16__field-label,
        #yb-techspec-v16 .yb-ts16__value {
            padding: 10px;
        }

        #yb-techspec-v16 .yb-ts16__model-image {
            width: 44px;
            height: 44px;
            flex-basis: 44px;
        }

        #yb-techspec-v16 .yb-ts16__group-button,
        #yb-techspec-v16 .yb-ts16__group-static {
            min-height: 43px;
            padding: 0 12px;
        }

        #yb-techspec-v16 .yb-ts16__field-label,
        #yb-techspec-v16 .yb-ts16__value {
            font-size: 11px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #yb-techspec-v16 *,
        #yb-techspec-v16 *::before,
        #yb-techspec-v16 *::after {
            transition-duration: .01ms !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
        }
    }
    
    
    
    /* =========================================================
   v1.6.1 Visual Finishing Patch
   作用：
   1. 单型号状态取消横向滚动条
   2. 降低粉红色背景
   3. 减少模块上下高度
   4. 让展开分组颜色更柔和
   5. 缩小参数名称列宽度
   ========================================================= */

/* 背景改得更中性，只保留很淡的品牌红色气氛 */
#yb-techspec-v16 {
    background:
        radial-gradient(
            circle at 0% 14%,
            rgba(224, 32, 43, 0.05),
            transparent 23%
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(47, 67, 102, 0.04),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #0b0d12 0,
            #0b0d12 10px,
            #f6f6f7 10px,
            #f6f6f7 calc(100% - 10px),
            #0b0d12 calc(100% - 10px),
            #0b0d12 100%
        );
}

/* 稍微缩短模块顶部和底部，不压缩参数内容 */
#yb-techspec-v16 .yb-ts16__inner {
    padding-top: 48px;
    padding-bottom: 46px;
}

/* 缩短标题区与工具区之间的距离 */
#yb-techspec-v16 .yb-ts16__header {
    margin-bottom: 14px;
}

/* 大表格圆角略微收敛，减少“超大手机卡片”感 */
#yb-techspec-v16 .yb-ts16__content {
    border-radius: 20px;
    box-shadow:
        0 14px 34px rgba(16, 22, 30, 0.065);
}

/*
 * 单型号时不出现横向滚动条。
 * 用户选择对比型号后，才允许参数表内部横向滑动。
 */
#yb-techspec-v16 .yb-ts16__table-scroll {
    overflow-x: hidden;
}

#yb-techspec-v16.is-comparing
.yb-ts16__table-scroll {
    overflow-x: auto;
}

/* 缩小左侧参数名称列，把更多空间留给参数值 */
#yb-techspec-v16 .yb-ts16__model-row,
#yb-techspec-v16 .yb-ts16__field-row {
    grid-template-columns:
        minmax(205px, 0.7fr)
        repeat(
            var(--yb-model-count),
            minmax(0, 1fr)
        );
}

/* 展开状态使用稍亮的石墨蓝灰，不再接近纯黑 */
#yb-techspec-v16
.yb-ts16__group-button[aria-expanded="true"] {
    background:
        linear-gradient(
            90deg,
            #303640 0%,
            #39414d 100%
        ) !important;
}

/* 关闭状态再柔和一点 */
#yb-techspec-v16 .yb-ts16__group-button,
#yb-techspec-v16 .yb-ts16__group-static {
    background:
        rgba(247, 248, 250, 0.9) !important;
}

/* 参数行稍微紧凑一点，但保持阅读性 */
#yb-techspec-v16 .yb-ts16__field-label,
#yb-techspec-v16 .yb-ts16__value {
    padding-top: 11px;
    padding-bottom: 11px;
}

/* 手机端仍只在对比状态允许表格内部横向滑动 */
@media (max-width: 767px) {
    #yb-techspec-v16 .yb-ts16__inner {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    #yb-techspec-v16 .yb-ts16__table-scroll {
        overflow-x: hidden;
    }

    #yb-techspec-v16.is-comparing
    .yb-ts16__table-scroll {
        overflow-x: auto;
    }

    #yb-techspec-v16 .yb-ts16__model-row,
    #yb-techspec-v16 .yb-ts16__field-row {
        grid-template-columns:
            minmax(118px, 0.72fr)
            repeat(
                var(--yb-model-count),
                minmax(165px, 1fr)
            );
    }

    #yb-techspec-v16:not(.is-comparing)
    .yb-ts16__model-row,
    #yb-techspec-v16:not(.is-comparing)
    .yb-ts16__field-row {
        grid-template-columns:
            minmax(118px, 0.72fr)
            minmax(0, 1.28fr);
    }
}

/* ==========================================================================
   SOURCE: 10_Downloads_HTML — style block 1
   ========================================================================== */
/* ========================================================================== 
   SCREEN 10 — APPLE-EDITORIAL RESOURCE CARDS
   Namespace limited to .yb-doc151--st35pro
   ========================================================================== */

.yb-doc151--st35pro {
    --yb-doc151-bg: #090c11;
    --yb-doc151-card: rgba(255, 255, 255, 0.038);
    --yb-doc151-card-hover: rgba(255, 255, 255, 0.055);
    --yb-doc151-border: rgba(255, 255, 255, 0.075);
    --yb-doc151-border-hover: rgba(255, 255, 255, 0.14);
    --yb-doc151-text: #f5f5f7;
    --yb-doc151-soft: #aeb4bd;
    --yb-doc151-muted: #727a86;
    --yb-doc151-red: var(--yb-accent, #e51f2b);

    position: relative;
    isolation: isolate;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
    padding: clamp(34px, 2.8vw, 44px) 0;
    background:
        linear-gradient(
            180deg,
            rgba(8, 11, 15, 0.96) 0%,
            rgba(10, 13, 18, 1) 100%
        );
    color: var(--yb-doc151-text);
    scroll-margin-top: 90px;
}

.yb-doc151--st35pro,
.yb-doc151--st35pro * {
    box-sizing: border-box;
}

.yb-doc151--st35pro .yb-doc151__ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 6% 100%,
            rgba(154, 16, 30, 0.075) 0%,
            rgba(106, 10, 22, 0.025) 32%,
            transparent 61%
        ),
        radial-gradient(
            circle at 94% 6%,
            rgba(46, 70, 105, 0.055) 0%,
            transparent 47%
        );
}

.yb-doc151--st35pro .yb-doc151__inner {
    /* Match Screen 09 Technical Specifications content width exactly. */
    width: min(1180px, calc(100% - 52px));
    margin: 0 auto;
}

/* Header */

.yb-doc151--st35pro .yb-doc151__header {
    max-width: 760px;
    margin-bottom: 20px;
}

.yb-doc151--st35pro .yb-doc151__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: rgba(245, 245, 247, 0.54);
    font-size: 9px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.yb-doc151--st35pro .yb-doc151__eyebrow > span {
    position: relative;
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: var(--yb-doc151-red);
}

.yb-doc151--st35pro .yb-doc151__eyebrow > span::after {
    position: absolute;
    top: 50%;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--yb-doc151-red);
    content: "";
    transform: translateY(-50%);
}

.yb-doc151--st35pro .yb-doc151__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.048em;
}

.yb-doc151--st35pro .yb-doc151__intro {
    max-width: 560px;
    margin: 10px 0 0;
    color: var(--yb-doc151-soft);
    font-size: 14px;
    line-height: 1.58;
}

/* Resource grid */

.yb-doc151--st35pro .yb-doc151__resources {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: min(100%, 820px);
    margin: 0 auto;
}

.yb-doc151--st35pro .yb-doc151__resource {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 28px;
    min-width: 0;
    min-height: 210px;
    padding: 22px 26px;
    border: 1px solid var(--yb-doc151-border);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.044) 0%,
            rgba(255, 255, 255, 0.028) 100%
        );
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.022);
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 200ms ease,
        background-color 200ms ease,
        box-shadow 260ms ease;
}

.yb-doc151--st35pro .yb-doc151__resource:hover,
.yb-doc151--st35pro .yb-doc151__resource:focus-within {
    transform: translateY(-3px);
    border-color: var(--yb-doc151-border-hover);
    background: var(--yb-doc151-card-hover);
    box-shadow:
        0 25px 58px rgba(0, 0, 0, 0.21),
        inset 0 1px 0 rgba(255, 255, 255, 0.036);
}

/* Preview */

.yb-doc151--st35pro .yb-doc151__preview-link {
    display: block;
    align-self: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.yb-doc151--st35pro .yb-doc151__preview {
    min-width: 0;
    margin: 0;
}

.yb-doc151--st35pro .yb-doc151__preview-surface {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 1.42 / 1;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            #f3f3f0 0%,
            #e6e7e5 100%
        );
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 280ms ease;
}

.yb-doc151--st35pro .yb-doc151__preview-link:hover .yb-doc151__preview-surface,
.yb-doc151--st35pro .yb-doc151__preview-link:focus-visible .yb-doc151__preview-surface {
    transform: scale(1.015);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.29),
        inset 0 1px 0 rgba(255, 255, 255, 0.43);
}

.yb-doc151--st35pro .yb-doc151__preview-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.58);
    outline-offset: 4px;
    border-radius: 15px;
}

.yb-doc151--st35pro .yb-doc151__preview img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.yb-doc151--st35pro .yb-doc151__preview img.is-missing {
    display: none;
}

.yb-doc151--st35pro .yb-doc151__fallback {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    padding: 16px;
    color: #555b64;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.10em;
    text-align: center;
    text-transform: uppercase;
}

.yb-doc151--st35pro .yb-doc151__preview img.is-missing + .yb-doc151__fallback {
    display: grid;
}

/* Copy */

.yb-doc151--st35pro .yb-doc151__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 0;
}

.yb-doc151--st35pro .yb-doc151__type {
    margin: 0 0 7px;
    color: var(--yb-doc151-red);
    font-size: 9px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yb-doc151--st35pro .yb-doc151__resource-title {
    max-width: 340px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(21px, 1.42vw, 25px);
    font-weight: 680;
    line-height: 1.12;
    letter-spacing: -0.032em;
}

.yb-doc151--st35pro .yb-doc151__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    color: var(--yb-doc151-muted);
    font-size: 9px;
    font-weight: 680;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.yb-doc151--st35pro .yb-doc151__meta i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

/* Actions */

.yb-doc151--st35pro .yb-doc151__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    align-items: center;
}

.yb-doc151--st35pro .yb-doc151__preview-action,
.yb-doc151--st35pro .yb-doc151__download-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    transition:
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 200ms ease;
}

.yb-doc151--st35pro .yb-doc151__preview-action svg,
.yb-doc151--st35pro .yb-doc151__download-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Quiet secondary action: Apple-like text link, not a second heavy button. */
.yb-doc151--st35pro .yb-doc151__preview-action {
    min-height: 34px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: rgba(245, 245, 247, 0.70);
    font-size: 10px;
    font-weight: 690;
}

.yb-doc151--st35pro .yb-doc151__preview-action:hover,
.yb-doc151--st35pro .yb-doc151__preview-action:focus-visible {
    color: #ffffff;
    transform: translateY(-1px);
}

/* One clear primary action. */
.yb-doc151--st35pro .yb-doc151__download-action {
    min-height: 36px;
    padding: 0 17px;
    border: 1px solid var(--yb-doc151-red);
    border-radius: 999px;
    background: var(--yb-doc151-red);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(229, 31, 43, 0.17);
    font-size: 10px;
    font-weight: 720;
}

.yb-doc151--st35pro .yb-doc151__download-action:hover,
.yb-doc151--st35pro .yb-doc151__download-action:focus-visible {
    border-color: #f23540;
    background: #f23540;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(229, 31, 43, 0.27);
}

.yb-doc151--st35pro .yb-doc151__preview-action:focus-visible,
.yb-doc151--st35pro .yb-doc151__download-action:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.62);
    outline-offset: 3px;
}

/* Responsive */

@media (max-width: 1080px) {
    .yb-doc151--st35pro .yb-doc151__resources {
        width: min(100%, 780px);
        grid-template-columns: 1fr;
    }

    .yb-doc151--st35pro .yb-doc151__resource {
        grid-template-columns: minmax(170px, 200px) minmax(0, 1fr);
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .yb-doc151--st35pro {
        padding: 36px 0;
        scroll-margin-top: 70px;
    }

    .yb-doc151--st35pro .yb-doc151__inner {
        width: calc(100% - 32px);
    }

    .yb-doc151--st35pro .yb-doc151__header {
        margin-bottom: 20px;
    }

    .yb-doc151--st35pro .yb-doc151__title {
        font-size: 40px;
    }

    .yb-doc151--st35pro .yb-doc151__intro {
        font-size: 13px;
    }

    .yb-doc151--st35pro .yb-doc151__resource {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px 20px;
        border-radius: 20px;
    }

    .yb-doc151--st35pro .yb-doc151__preview {
        width: min(100%, 320px);
    }

    .yb-doc151--st35pro .yb-doc151__resource-title {
        max-width: none;
        font-size: 24px;
    }
}

@media (max-width: 430px) {
    .yb-doc151--st35pro .yb-doc151__actions {
        justify-content: space-between;
        gap: 10px;
    }

    .yb-doc151--st35pro .yb-doc151__download-action {
        padding: 0 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yb-doc151--st35pro .yb-doc151__resource,
    .yb-doc151--st35pro .yb-doc151__preview-surface,
    .yb-doc151--st35pro .yb-doc151__preview-action,
    .yb-doc151--st35pro .yb-doc151__download-action {
        transition: none !important;
    }
}

/* ==========================================================================
   SOURCE: 11_Product_Inquiry_HTML — style block 1
   ========================================================================== */
/* =========================================================
   YUBEEN THERMAL PRODUCT INQUIRY
   DARK PRODUCT-PAGE VERSION

   Namespace:
   yb-th-*

   不影响：
   - General Inquiry
   - Contact Page
   - Partner Cooperation
   - Optical Scope Product Inquiry
========================================================= */
/* =========================================================
   01. THERMAL SECTION
========================================================= */
.yb-th-section {
    width: 100%;
    position: relative !important;
    overflow: hidden !important;
    min-height: auto !important;
    padding:
        clamp(48px, 5vw, 76px) 24px !important;
    background:
        radial-gradient(circle at 12% 18%,
            rgba(255, 40, 34, 0.09),
            transparent 31%),
        radial-gradient(circle at 89% 87%,
            rgba(255, 40, 34, 0.07),
            transparent 28%),
        linear-gradient(135deg,
            #06080c 0%,
            #0a0e14 48%,
            #08070b 100%) !important;
}

/* Decorative background glow */
.yb-th-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);
    background-size: 54px 54px;
    mask-image:
        linear-gradient(to bottom,
            transparent,
            rgba(0, 0, 0, .65),
            transparent);
}

.yb-th-form-host {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   02. RESET
========================================================= */
.yb-th-product-inquiry,
.yb-th-product-inquiry * {
    box-sizing: border-box;
}

.yb-th-product-inquiry .wpcf7,
.yb-th-product-inquiry .wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.yb-th-product-inquiry p {
    margin: 0 !important;
}

.yb-th-product-inquiry br {
    display: none !important;
}

/* =========================================================
   03. MAIN LAYOUT
========================================================= */
.yb-th-product-inquiry {
    display: grid !important;
    grid-template-columns:
        minmax(320px, 390px) minmax(0, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #ffffff;
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}

/* =========================================================
   04. LEFT PRODUCT PANEL
========================================================= */
.yb-th-side {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 650px;
    padding:
        clamp(32px, 3vw, 44px);
    background:
        radial-gradient(circle at 100% 100%,
            rgba(255, 38, 31, .18),
            transparent 40%),
        linear-gradient(150deg,
            rgba(13, 18, 25, .99),
            rgba(8, 11, 16, .99) 58%,
            rgba(24, 7, 11, .99));
    border:
        1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, .36);
}

/* Decorative rings */
.yb-th-side::before {
    content: "";
    position: absolute;
    right: -112px;
    top: -112px;
    width: 250px;
    height: 250px;
    border:
        1px solid rgba(255, 49, 42, .20);
    border-radius: 50%;
    box-shadow:
        0 0 0 42px rgba(255, 49, 42, .035),
        0 0 0 84px rgba(255, 49, 42, .022);
    z-index: -1;
}

.yb-th-side::after {
    content: "";
    position: absolute;
    right: -84px;
    bottom: -94px;
    width: 230px;
    height: 230px;
    border:
        1px solid rgba(255, 49, 42, .16);
    border-radius: 50%;
    z-index: -1;
}

.yb-th-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
    color: #ff3932;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .22em;
}

.yb-th-eyebrow::after {
    content: "";
    width: 42px;
    height: 1px;
    background:
        linear-gradient(to right,
            #ff3932,
            transparent);
}

.yb-th-model-label {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .43);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .13em;
}

.yb-th-model-value {
    margin-bottom: 22px;
    color: #ff4a43;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
}

.yb-th-side__title {
    margin: 0 0 22px !important;
    color: #ffffff;
    font-size:
        clamp(34px, 3.2vw, 48px);
    line-height: .98;
    font-weight: 780;
    letter-spacing: -.045em;
}

.yb-th-side__title span {
    color: #ff4b44;
}

.yb-th-side__description {
    max-width: 300px;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 400;
}

.yb-th-side__points {
    display: grid;
    gap: 18px;
    margin-top: 44px;
}

.yb-th-point {
    display: grid;
    grid-template-columns:
        38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.yb-th-point__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #ff4a43;
    background:
        rgba(255, 46, 39, .08);
    border:
        1px solid rgba(255, 58, 50, .31);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.yb-th-point strong {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .94);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
}

.yb-th-point small {
    display: block;
    color: rgba(255, 255, 255, .46);
    font-size: 10px;
    line-height: 1.45;
}

/* =========================================================
   05. RIGHT FORM CARD
========================================================= */
.yb-th-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 650px;
    padding:
        clamp(28px, 3vw, 38px);
    background:
        linear-gradient(145deg,
            rgba(15, 20, 28, .97),
            rgba(9, 13, 19, .985));
    border:
        1px solid rgba(255, 255, 255, .10);
    border-radius: 24px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.yb-th-card::before {
    content: "";
    position: absolute;
    right: -90px;
    top: -90px;
    width: 240px;
    height: 240px;
    background:
        radial-gradient(circle,
            rgba(255, 47, 40, .11),
            transparent 68%);
    pointer-events: none;
}

/* =========================================================
   06. FORM HEADING
========================================================= */
.yb-th-card__heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.yb-th-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #ff453e;
    background:
        rgba(255, 50, 43, .095);
    border:
        1px solid rgba(255, 66, 59, .24);
    border-radius: 50%;
}

.yb-th-card__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yb-th-card__heading h3 {
    margin: 0 0 5px !important;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 760;
    letter-spacing: -.025em;
}

.yb-th-card__heading p {
    color: rgba(255, 255, 255, .50);
    font-size: 11px;
    line-height: 1.45;
}

/* =========================================================
   07. FORM GRID
========================================================= */
.yb-th-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 13px;
}

.yb-th-field {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.yb-th-field--full {
    display: block;
    width: 100%;
    margin-top: 14px;
}

.yb-th-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .84);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 650;
}

.yb-th-label em {
    color: #ff433c;
    font-style: normal;
}

.yb-th-label small {
    color: rgba(255, 255, 255, .38);
    font-size: 9px;
    font-weight: 500;
}

/* CF7 wrapper */
.yb-th-product-inquiry .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* =========================================================
   08. INPUTS
========================================================= */
.yb-th-product-inquiry input.yb-th-control,
.yb-th-product-inquiry select.yb-th-control,
.yb-th-product-inquiry textarea.yb-th-control {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        rgba(255, 255, 255, .045) !important;
    border:
        1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .018) !important;
    outline: none !important;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease !important;
    box-sizing: border-box !important;
}

.yb-th-product-inquiry input.yb-th-control,
.yb-th-product-inquiry select.yb-th-control {
    height: 43px !important;
    min-height: 43px !important;
    padding:
        0 13px !important;
}

.yb-th-product-inquiry input.yb-th-control::placeholder,
.yb-th-product-inquiry textarea.yb-th-control::placeholder {
    color:
        rgba(255, 255, 255, .29) !important;
    -webkit-text-fill-color:
        rgba(255, 255, 255, .29) !important;
    opacity: 1 !important;
}

.yb-th-product-inquiry input.yb-th-control:focus,
.yb-th-product-inquiry select.yb-th-control:focus,
.yb-th-product-inquiry textarea.yb-th-control:focus {
    background:
        rgba(255, 255, 255, .065) !important;
    border-color:
        rgba(255, 68, 60, .70) !important;
    box-shadow:
        0 0 0 3px rgba(255, 48, 41, .09) !important;
}

/* Autofill */
.yb-th-product-inquiry input.yb-th-control:-webkit-autofill,
.yb-th-product-inquiry input.yb-th-control:-webkit-autofill:hover,
.yb-th-product-inquiry input.yb-th-control:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #ffffff !important;
    -webkit-box-shadow:
        0 0 0 1000px #11161d inset !important;
    caret-color:
        #ffffff !important;
}

/* =========================================================
   09. SELECTS
========================================================= */
.yb-th-product-inquiry select.yb-th-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 38px !important;
    cursor: pointer;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23989da6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:
        no-repeat !important;
    background-position:
        right 14px center !important;
    background-size:
        11px 7px !important;
}

/* Placeholder state */
.yb-th-product-inquiry select.yb-th-select.yb-th-is-placeholder {
    color:
        rgba(255, 255, 255, .38) !important;
    -webkit-text-fill-color:
        rgba(255, 255, 255, .38) !important;
    font-size:
        11.5px !important;
    font-style:
        italic !important;
}

/* Selected state */
.yb-th-product-inquiry select.yb-th-select:not(.yb-th-is-placeholder) {
    color:
        #ffffff !important;
    -webkit-text-fill-color:
        #ffffff !important;
    font-style:
        normal !important;
}

.yb-th-product-inquiry select.yb-th-select option {
    color:
        #11151a !important;
    -webkit-text-fill-color:
        #11151a !important;
    background:
        #ffffff !important;
    font-size:
        13px !important;
    font-style:
        normal !important;
}

/* =========================================================
   10. MESSAGE
========================================================= */
.yb-th-product-inquiry textarea.yb-th-textarea {
    width: 100% !important;
    min-height: 98px !important;
    height: 98px !important;
    max-height: 180px !important;
    padding:
        12px 13px !important;
    line-height:
        1.5 !important;
    resize:
        vertical !important;
}

.yb-th-field-note {
    display: block;
    margin-top: 6px;
    color:
        rgba(255, 255, 255, .33);
    font-size:
        9px;
    line-height:
        1.4;
}

/* =========================================================
   11. ATTACHMENT + SUBMIT
========================================================= */
.yb-th-bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin-top: 16px;
}

.yb-th-file {
    display: block;
    min-width: 0;
}

.yb-th-file-control {
    display: block;
    width: 100% !important;
    padding:
        6px !important;
    color:
        rgba(255, 255, 255, .43) !important;
    background:
        rgba(255, 255, 255, .035) !important;
    border:
        1px solid rgba(255, 255, 255, .12) !important;
    border-radius:
        10px !important;
    font-size:
        10px !important;
}

.yb-th-file-control::file-selector-button {
    margin-right:
        10px;
    padding:
        7px 13px;
    color:
        #ff655f;
    background:
        rgba(255, 56, 49, .09);
    border:
        1px solid rgba(255, 74, 67, .31);
    border-radius:
        8px;
    font-family:
        inherit;
    font-size:
        10px;
    font-weight:
        700;
    cursor:
        pointer;
}

.yb-th-file-note {
    display:
        block;
    margin-top:
        5px;
    color:
        rgba(255, 255, 255, .29);
    font-size:
        8.5px;
    line-height:
        1.4;
}

.yb-th-submit-area {
    display:
        flex;
    flex-direction:
        column;
    align-items:
        flex-end;
    gap:
        6px;
}

.yb-th-product-inquiry input.yb-th-submit[type="submit"] {
    min-width:
        190px;
    height:
        43px !important;
    padding:
        0 25px !important;
    color:
        #ffffff !important;
    -webkit-text-fill-color:
        #ffffff !important;
    background:
        linear-gradient(135deg,
            #ff3029,
            #df1d18) !important;
    border:
        1px solid rgba(255, 79, 72, .72) !important;
    border-radius:
        10px !important;
    font-family:
        inherit !important;
    font-size:
        11px !important;
    font-weight:
        750 !important;
    cursor:
        pointer !important;
    box-shadow:
        0 12px 27px rgba(235, 32, 26, .21) !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}

.yb-th-product-inquiry input.yb-th-submit[type="submit"]:hover {
    transform:
        translateY(-1px);
    filter:
        brightness(1.08);
    box-shadow:
        0 16px 34px rgba(235, 32, 26, .29) !important;
}

.yb-th-submit-note {
    color:
        rgba(255, 255, 255, .32);
    font-size:
        8.5px;
    line-height:
        1.3;
    text-align:
        right;
}

/* CF7 spinner */
.yb-th-product-inquiry .wpcf7-spinner {
    position:
        absolute !important;
}

.yb-th-product-inquiry .yb-th-field--grid-full {
    grid-column: 1 / -1;
}

/* =========================================================
   12. PRIVACY CONSENT
========================================================= */
.yb-th-consent {
    position:
        relative;
    z-index:
        1;
    margin-top:
        14px;
    padding-top:
        12px;
    border-top:
        1px solid rgba(255, 255, 255, .08);
    color:
        rgba(255, 255, 255, .42);
    font-size:
        9px;
    line-height:
        1.5;
}

.yb-th-consent .wpcf7-list-item {
    margin:
        0 !important;
}

.yb-th-consent label {
    display:
        flex;
    align-items:
        flex-start;
    gap:
        8px;
}

.yb-th-consent input[type="checkbox"] {
    flex:
        0 0 auto;
    width:
        14px;
    height:
        14px;
    margin:
        1px 0 0 !important;
    accent-color:
        #ff342d;
}

.yb-th-consent a {
    color:
        #ff5a54;
    text-decoration:
        underline;
}

/* =========================================================
   13. VALIDATION AND RESPONSE
========================================================= */
.yb-th-product-inquiry .wpcf7-not-valid {
    border-color:
        rgba(255, 90, 84, .82) !important;
}

.yb-th-product-inquiry .wpcf7-not-valid-tip {
    display:
        block;
    margin-top:
        5px;
    color:
        #ff817c;
    font-size:
        9px;
    line-height:
        1.35;
}

.yb-th-product-inquiry .wpcf7-response-output {
    grid-column:
        1 / -1;
    margin:
        14px 0 0 !important;
    padding:
        11px 14px !important;
    color:
        rgba(255, 255, 255, .88) !important;
    background:
        rgba(25, 115, 67, .16) !important;
    border:
        1px solid rgba(53, 184, 105, .55) !important;
    border-radius:
        9px !important;
    font-size:
        11px !important;
    line-height:
        1.45 !important;
}

.yb-th-product-inquiry form.invalid .wpcf7-response-output,
.yb-th-product-inquiry form.failed .wpcf7-response-output,
.yb-th-product-inquiry form.spam .wpcf7-response-output {
    background:
        rgba(155, 41, 35, .17) !important;
    border-color:
        rgba(255, 84, 77, .55) !important;
}

/* =========================================================
   14. TABLET
========================================================= */
@media (max-width: 1024px) {
    .yb-th-product-inquiry {
        grid-template-columns:
            320px minmax(0, 1fr) !important;
    }

    .yb-th-side,
    .yb-th-card {
        min-height:
            620px;
    }

    .yb-th-grid {
        grid-template-columns:
            1fr;
    }
}

/* =========================================================
   15. MOBILE
========================================================= */
@media (max-width: 767px) {
    .yb-th-section {
        padding:
            32px 18px !important;
    }

    .yb-th-product-inquiry {
        grid-template-columns:
            1fr !important;
        gap:
            16px !important;
    }

    .yb-th-side {
        min-height:
            auto;
        padding:
            28px 24px;
    }

    .yb-th-side__title {
        font-size:
            36px;
    }

    .yb-th-side__description {
        max-width:
            100%;
    }

    .yb-th-side__points {
        margin-top:
            32px;
    }

    .yb-th-card {
        min-height:
            auto;
        padding:
            24px 18px;
    }

    .yb-th-grid {
        grid-template-columns:
            1fr;
        row-gap:
            12px;
    }

    .yb-th-field--full {
        margin-top:
            12px;
    }

    .yb-th-bottom {
        grid-template-columns:
            1fr;
        align-items:
            stretch;
    }

    .yb-th-submit-area {
        align-items:
            stretch;
    }

    .yb-th-product-inquiry input.yb-th-submit[type="submit"] {
        width:
            100%;
        min-width:
            0;
    }

    .yb-th-submit-note {
        text-align:
            center;
    }
}

/* =========================================================
   THERMAL FORM WIDTH AND CONFLICT CORRECTION
========================================================= */
/* 清除 Elementor 父级宽度限制 */
.yb-th-section,
.yb-th-section>.e-con-inner,
.yb-th-section .yb-th-form-host,
.yb-th-section .elementor-widget-shortcode,
.yb-th-section .elementor-widget-shortcode>.elementor-widget-container,
.yb-th-section .elementor-shortcode,
.yb-th-section .wpcf7 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 保证主布局达到设计宽度 */
.yb-th-section .yb-th-product-inquiry {
    display: grid !important;
    grid-template-columns:
        minmax(330px, 390px) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
}

/* 强制文本输入框使用 Thermal 圆角样式，
   避免被旧的下划线 CSS 覆盖 */
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="text"],
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="email"],
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="tel"] {
    width: 100% !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 13px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* 强制 textarea 使用新样式 */
.yb-th-form-host .yb-th-product-inquiry textarea.yb-th-control {
    width: 100% !important;
    min-height: 98px !important;
    height: 98px !important;
    padding: 12px 13px !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 10px !important;
}

/* 防止附件区域被压成竖条 */
.yb-th-form-host .yb-th-product-inquiry .yb-th-file,
.yb-th-form-host .yb-th-product-inquiry .yb-th-file .wpcf7-form-control-wrap,
.yb-th-form-host .yb-th-product-inquiry input[type="file"] {
    width: 100% !important;
    min-width: 0 !important;
}

/* 平板宽度时改为上下两张卡片，
   不要把两张卡片强行挤在同一行 */
@media(max-width:1100px) {
    .yb-th-section .yb-th-product-inquiry {
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
    }

    .yb-th-section .yb-th-side {
        min-height: auto !important;
    }
}

/* 手机 */
@media(max-width:767px) {
    .yb-th-section .yb-th-product-inquiry {
        max-width: 100% !important;
    }
}

.yb-th-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    column-gap: 14px;
    align-items: start;
}

.yb-th-submit-area {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
}

.yb-th-submit {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin: 0;
}

.yb-th-submit-note {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
}

/* =========================================================
   THERMAL FORM — AUTOFILL AND FILLED INPUT FIX
   修复 Chrome / Edge 自动填充后的浅蓝色背景
========================================================= */
/* 告诉浏览器当前区域使用暗色表单控件 */
.yb-th-product-inquiry {
    color-scheme: dark;
}

/* 普通状态和填写后状态统一 */
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="text"],
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="email"],
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="tel"] {
    color: #f4f6f8 !important;
    -webkit-text-fill-color: #f4f6f8 !important;
    background-color: #171c24 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    caret-color: #ffffff !important;
    opacity: 1 !important;
}

/* 提示文字比真实填写内容更浅 */
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control::placeholder {
    color: rgba(255, 255, 255, .32) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .32) !important;
    opacity: 1 !important;
}

/* Chrome / Edge / Safari 自动填充 */
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control:-webkit-autofill,
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control:-webkit-autofill:hover,
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control:-webkit-autofill:focus,
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control:-webkit-autofill:active {
    color: #f4f6f8 !important;
    -webkit-text-fill-color: #f4f6f8 !important;
    background-color: #171c24 !important;
    -webkit-box-shadow:
        0 0 0 1000px #171c24 inset !important;
    box-shadow:
        0 0 0 1000px #171c24 inset !important;
    border:
        1px solid rgba(255, 255, 255, .18) !important;
    caret-color: #ffffff !important;
    transition:
        background-color 99999s ease-out 0s !important;
}

/* 自动填充字段获得焦点时使用红色边框 */
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control:-webkit-autofill:focus {
    border-color:
        rgba(255, 65, 58, .82) !important;
    -webkit-box-shadow:
        0 0 0 1000px #171c24 inset,
        0 0 0 3px rgba(255, 48, 41, .10) !important;
    box-shadow:
        0 0 0 1000px #171c24 inset,
        0 0 0 3px rgba(255, 48, 41, .10) !important;
}

/* Firefox 自动填充 */
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control:-moz-autofill {
    color: #f4f6f8 !important;
    background-color: #171c24 !important;
    box-shadow:
        0 0 0 1000px #171c24 inset !important;
    border-color:
        rgba(255, 255, 255, .18) !important;
}

/* 普通手动输入时的 Focus */
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="text"]:focus,
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="email"]:focus,
.yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="tel"]:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #191f28 !important;
    border-color:
        rgba(255, 65, 58, .82) !important;
    box-shadow:
        0 0 0 3px rgba(255, 48, 41, .10) !important;
    outline: none !important;
}

/* =========================================================
   THERMAL COMMERCIAL FIELDS
   Native CSS + JavaScript conditional display
========================================================= */
/* Inquiry Type 默认横跨整行 */
.yb-th-product-inquiry .yb-th-field--grid-full {
    grid-column: 1 / -1;
}

/* 商业信息外层默认隐藏 */
.yb-th-product-inquiry .yb-th-commercial-wrap {
    display: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* hidden 属性必须绝对隐藏，防止主题样式覆盖 */
.yb-th-product-inquiry .yb-th-commercial-wrap[hidden] {
    display: none !important;
}

/* 满足条件后显示 */
.yb-th-product-inquiry .yb-th-commercial-wrap.yb-th-commercial-visible {
    display: block;
}

/* 数量和周期保持两列 */
.yb-th-product-inquiry .yb-th-commercial-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 13px;
    width: 100%;
    max-width: 100%;
    margin-top: 13px;
}

/* 显示动画 */
.yb-th-product-inquiry .yb-th-commercial-wrap.yb-th-commercial-visible .yb-th-commercial-grid {
    animation:
        ybThCommercialReveal .22s ease both;
}

@keyframes ybThCommercialReveal {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 平板和手机 */
@media(max-width:767px) {
    .yb-th-product-inquiry .yb-th-commercial-grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
}


/* =========================================================
   BLOCK A.1 — DESKTOP SCALE-UP OVERRIDE
   Purpose:
   - Enlarge the complete inquiry layout on desktop.
   - Increase form-field readability and operating comfort.
   - Preserve all CF7 fields, JavaScript logic and responsive behavior.
   - Applies only above 1100px; tablet/mobile rules remain unchanged.
========================================================= */
@media (min-width: 1101px) {

    /* 01. Enlarge the complete two-column layout */
    .yb-th-section .yb-th-product-inquiry,
    .yb-th-product-inquiry {
        grid-template-columns:
            minmax(390px, 430px) minmax(0, 1fr) !important;
        gap: 28px !important;
        max-width: 1380px !important;
    }

    /* 02. Give the section slightly more horizontal breathing room */
    .yb-th-section {
        padding:
            clamp(54px, 5vw, 82px) 32px !important;
    }

    /* 03. Enlarge both primary panels */
    .yb-th-side,
    .yb-th-card {
        min-height: 720px !important;
    }

    .yb-th-side {
        padding:
            clamp(38px, 3.1vw, 52px) !important;
    }

    .yb-th-card {
        padding:
            clamp(34px, 3vw, 46px) !important;
    }

    /* 04. Increase the left editorial hierarchy */
    .yb-th-eyebrow {
        margin-bottom: 32px;
        font-size: 11.5px;
    }

    .yb-th-model-label {
        font-size: 10.5px;
    }

    .yb-th-model-value {
        margin-bottom: 24px;
        font-size: 23px;
    }

    .yb-th-side__title {
        margin-bottom: 24px !important;
        font-size:
            clamp(40px, 3.35vw, 56px);
        line-height: 1;
    }

    .yb-th-side__description {
        max-width: 340px;
        font-size: 14px;
        line-height: 1.68;
    }

    .yb-th-side__points {
        gap: 20px;
        margin-top: 48px;
    }

    .yb-th-point {
        grid-template-columns:
            42px minmax(0, 1fr);
        gap: 14px;
    }

    .yb-th-point__number {
        width: 40px;
        height: 40px;
        font-size: 10.5px;
    }

    .yb-th-point strong {
        font-size: 13px;
    }

    .yb-th-point small {
        font-size: 11px;
        line-height: 1.48;
    }

    /* 05. Enlarge the form heading */
    .yb-th-card__heading {
        gap: 16px;
        margin-bottom: 26px;
    }

    .yb-th-card__icon {
        width: 52px;
        height: 52px;
    }

    .yb-th-card__icon svg {
        width: 25px;
        height: 25px;
    }

    .yb-th-card__heading h3 {
        margin-bottom: 6px !important;
        font-size: 25px;
    }

    .yb-th-card__heading p {
        font-size: 12.5px;
        line-height: 1.5;
    }

    /* 06. Increase form spacing and label readability */
    .yb-th-grid {
        column-gap: 18px;
        row-gap: 16px;
    }

    .yb-th-field--full {
        margin-top: 17px;
    }

    .yb-th-label {
        margin-bottom: 7px;
        font-size: 12px;
    }

    .yb-th-label small {
        font-size: 9.5px;
    }

    /* 07. Enlarge all text/select controls */
    .yb-th-product-inquiry input.yb-th-control,
    .yb-th-product-inquiry select.yb-th-control,
    .yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="text"],
    .yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="email"],
    .yb-th-form-host .yb-th-product-inquiry input.yb-th-control[type="tel"] {
        height: 48px !important;
        min-height: 48px !important;
        padding:
            0 15px !important;
        border-radius: 11px !important;
        font-size: 13px !important;
    }

    .yb-th-product-inquiry select.yb-th-select {
        padding-right: 42px !important;
        background-position:
            right 16px center !important;
    }

    .yb-th-product-inquiry select.yb-th-select.yb-th-is-placeholder {
        font-size: 12.5px !important;
    }

    /* 08. Enlarge the requirements field without making the screen excessive */
    .yb-th-product-inquiry textarea.yb-th-textarea,
    .yb-th-form-host .yb-th-product-inquiry textarea.yb-th-control {
        min-height: 116px !important;
        height: 116px !important;
        max-height: 210px !important;
        padding:
            14px 15px !important;
        border-radius: 11px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .yb-th-field-note {
        margin-top: 7px;
        font-size: 9.5px;
    }

    /* 09. Enlarge attachment and submit area */
    .yb-th-bottom {
        grid-template-columns:
            minmax(0, 1fr) 230px;
        column-gap: 18px;
        gap: 18px;
        margin-top: 18px;
    }

    .yb-th-file-control {
        min-height: 48px;
        padding: 7px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
    }

    .yb-th-file-control::file-selector-button {
        margin-right: 11px;
        padding: 8px 14px;
        font-size: 11px;
    }

    .yb-th-file-note {
        margin-top: 6px;
        font-size: 9px;
    }

    .yb-th-submit-area {
        padding-top: 21px;
    }

    .yb-th-product-inquiry input.yb-th-submit[type="submit"],
    .yb-th-submit {
        width: 100% !important;
        min-width: 210px !important;
        height: 48px !important;
        min-height: 48px !important;
        line-height: 48px !important;
        padding:
            0 26px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
    }

    .yb-th-submit-note {
        margin-top: 8px;
        font-size: 9.5px;
    }

    /* 10. Slightly improve consent readability */
    .yb-th-consent {
        margin-top: 17px;
        padding-top: 14px;
        font-size: 9.5px;
    }

    .yb-th-consent input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }

    /* 11. Keep commercial conditional fields consistent */
    .yb-th-product-inquiry .yb-th-commercial-grid {
        column-gap: 18px;
        row-gap: 16px;
        margin-top: 16px;
    }
}




/* =========================================================
   BLOCK A.2 — NATURAL LEFT-COPY COMPOSITION
   Purpose:
   - Replace the oversized automatic wrapping with a deliberate three-line title.
   - Improve the wording and reading rhythm of the left editorial panel.
   - Preserve the form, field names, validation and submission logic.
========================================================= */
.yb-th-side__title .yb-th-title-line {
    display: block;
    color: #ffffff;
}

.yb-th-side__title .yb-th-title-line--accent {
    color: #ff4b44;
}

@media (min-width: 1101px) {

    .yb-th-section .yb-th-product-inquiry,
    .yb-th-product-inquiry {
        grid-template-columns:
            minmax(420px, 440px) minmax(0, 1fr) !important;
        gap: 30px !important;
        max-width: 1400px !important;
    }

    .yb-th-side {
        padding:
            44px 46px !important;
    }

    .yb-th-side__title {
        max-width: 352px;
        margin: 0 0 24px !important;
        font-size:
            clamp(42px, 2.55vw, 48px) !important;
        line-height: 1.035 !important;
        letter-spacing: -.038em !important;
        text-wrap: balance;
    }

    .yb-th-side__title .yb-th-title-line + .yb-th-title-line {
        margin-top: 2px;
    }

    .yb-th-side__description {
        max-width: 338px !important;
        font-size: 14px !important;
        line-height: 1.66 !important;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .yb-th-side__title {
        max-width: 620px;
        font-size: 44px !important;
        line-height: 1.04 !important;
    }
}

@media (max-width: 767px) {
    .yb-th-side__title {
        max-width: 340px;
        font-size: 38px !important;
        line-height: 1.04 !important;
    }

    .yb-th-side__title .yb-th-title-line + .yb-th-title-line {
        margin-top: 1px;
    }
}



/* =========================================================
   BLOCK A.3 — CURRENT MODEL TYPOGRAPHY REFINEMENT
   Purpose:
   - Replace the serif model treatment with a cleaner technical sans-serif style.
   - Keep the current model visually distinct without competing with the main title.
   - Preserve the Google Sheet / YubeenSpecBridge dynamic model value.
========================================================= */
.yb-th-model-label {
    margin-bottom: 10px !important;
    color: rgba(255, 255, 255, .46) !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
}

.yb-th-model-value {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 28px !important;
    padding: 0 0 10px;
    color: rgba(248, 249, 251, .96) !important;
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: -.022em !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: none !important;
}

.yb-th-model-value::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58px;
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #ff4039 0%,
            rgba(255, 64, 57, .72) 48%,
            rgba(255, 64, 57, 0) 100%
        );
}

.yb-th-model-value[data-yb-th-model-state="linked"] {
    opacity: 1;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .yb-th-model-value {
        margin-bottom: 24px !important;
        font-size: 24px !important;
    }
}

@media (max-width: 767px) {
    .yb-th-model-label {
        margin-bottom: 8px !important;
        font-size: 10px !important;
    }

    .yb-th-model-value {
        margin-bottom: 22px !important;
        padding-bottom: 9px;
        font-size: 22px !important;
    }

    .yb-th-model-value::after {
        width: 48px;
    }
}

/* ==========================================================================
   SOURCE: 11_Product_Inquiry_HTML — style block 2
   ========================================================================== */
/* =========================================================
01. INITIAL STATE
页面初始状态不显示字段错误
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form .wpcf7-not-valid-tip {
    display: none !important;
}

/*
即使浏览器或缓存保留了 wpcf7-not-valid，
在用户真正尝试提交前，也不显示红色错误边框。
*/
.yb-th-form-host .wpcf7 form.wpcf7-form:not(.yb-th-validation-attempted) .wpcf7-not-valid {
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
}

/* =========================================================
02. AFTER SUBMISSION ATTEMPT
只有用户点击提交后才显示字段错误
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-validation-attempted .wpcf7-not-valid-tip {
    display: block !important;
    margin-top: 5px !important;
    color: #ff817c !important;
    -webkit-text-fill-color: #ff817c !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/*
错误字段红色边框。
*/
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-validation-attempted .wpcf7-not-valid {
    border-color: rgba(255, 90, 84, .82) !important;
    box-shadow:
        0 0 0 2px rgba(255, 48, 41, .08) !important;
}

/* =========================================================
03. RESPONSE OUTPUT — DEFAULT HIDDEN
成功、失败等总提示默认隐藏
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form .wpcf7-response-output {
    display: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 18px 0 0 !important;
    padding: 13px 16px !important;
    color: #f4f7fa !important;
    -webkit-text-fill-color: #f4f7fa !important;
    background: rgba(16, 21, 28, .96) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 9px !important;
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .18) !important;
}

/*
只有 Contact Form 7 真正返回结果后，
JavaScript 才会增加 yb-th-response-ready。
*/
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready .wpcf7-response-output {
    display: block !important;
}

/* =========================================================
04. SUCCESS
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready.sent .wpcf7-response-output {
    color: #e2f8e9 !important;
    -webkit-text-fill-color: #e2f8e9 !important;
    background:
        rgba(31, 126, 70, .22) !important;
    border-color:
        rgba(65, 200, 113, .72) !important;
}

/* =========================================================
05. VALIDATION FAILURE
字段缺失、格式错误、隐私条款未勾选
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready.invalid .wpcf7-response-output,
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready.unaccepted .wpcf7-response-output {
    color: #ffe5ad !important;
    -webkit-text-fill-color: #ffe5ad !important;
    background:
        rgba(151, 99, 22, .22) !important;
    border-color:
        rgba(230, 167, 47, .72) !important;
}

/* =========================================================
06. MAIL FAILURE
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready.failed .wpcf7-response-output,
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready.aborted .wpcf7-response-output {
    color: #ffd9d7 !important;
    -webkit-text-fill-color: #ffd9d7 !important;
    background:
        rgba(157, 42, 37, .23) !important;
    border-color:
        rgba(255, 84, 77, .72) !important;
}

/* =========================================================
07. SPAM
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready.spam .wpcf7-response-output {
    color: #ffe1ca !important;
    -webkit-text-fill-color: #ffe1ca !important;
    background:
        rgba(150, 72, 28, .24) !important;
    border-color:
        rgba(242, 126, 55, .72) !important;
}

/* =========================================================
08. INITIAL / SUBMITTING STATE
防止空白长方形提前出现
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.init .wpcf7-response-output,
.yb-th-form-host .wpcf7 form.wpcf7-form.submitting .wpcf7-response-output,
.yb-th-form-host .wpcf7 form.wpcf7-form.resetting .wpcf7-response-output {
    display: none !important;
}

/* =========================================================
09. RESPONSE ANIMATION
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready .wpcf7-response-output {
    animation:
        ybThResponseReveal .22s ease both;
}

@keyframes ybThResponseReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
THERMAL FORM RESPONSE — CENTER ALIGNMENT
成功、失败、验证提示在状态框中居中显示
========================================================= */
.yb-th-form-host .wpcf7 form.wpcf7-form.yb-th-response-ready .wpcf7-response-output {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    text-align: center !important;
}

/* ==========================================================================
   ST35Pro Actual UI Experience — V4.8
   Wide Rail / Dynamic Impact final overrides
   Updated: 2026-08-10

   目标：
   - 总宽度恢复到与相邻产品屏接近的桌面宽度；
   - 左侧互动热像区域维持接近上一版的宽度；
   - 主要通过拉宽右侧说明栏增加总宽度；
   - 热像区域只显示真实源图，不使用模糊副本、边缘渐变或暗角填充；
   - 分划线与黄色落点同比再缩小一点；
   - 黄色落点根据每次测距结果产生轻微、可见的上下移动。
   ========================================================================== */

@media (min-width: 1101px) {

    .yb-ui-v3--st35pro .yb-ui-v3__inner {
        width: min(1480px, calc(100vw - 48px));
    }

    .yb-ui-v3--st35pro .yb-ui-v3__header,
    .yb-ui-v3--st35pro .yb-ui-v3__module,
    .yb-ui-v3--st35pro .yb-ui-v3__capabilities {
        width: 100%;
    }

    /*
    满宽 1480px 时：
    左侧约 977px，和 V4.7 的互动画面宽度接近；
    右侧约 503px，用新增宽度主要承载说明内容。
    */
    .yb-ui-v3--st35pro .yb-ui-v3__module {
        grid-template-columns:
            minmax(0, 66%)
            minmax(0, 34%);
    }

    .yb-ui-v3--st35pro .yb-ui-v3__rail {
        padding:
            32px
            36px
            30px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__rail-heading > strong {
        font-size:
            clamp(
                25px,
                1.85vw,
                31px
            );
    }

    .yb-ui-v3--st35pro .yb-ui-v3__step {
        grid-template-columns:
            31px
            minmax(0, 1fr);

        gap: 10px;

        padding:
            20px
            0;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__step > span {
        font-size: 9.5px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__step strong {
        font-size: 13.5px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__step p {
        font-size: 11.5px;
        line-height: 1.52;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__notice {
        left: 36px;
        right: 36px;
        bottom: 28px;

        font-size: 9px;
        line-height: 1.45;
    }

}


/* --------------------------------------------------------------------------
   真实热像画面：
   禁止 V4.7 的模糊背景副本、边缘渐变和暗角修饰。
   只用真实热像图片自身 cover 裁切来填满画面。
   -------------------------------------------------------------------------- */

.yb-ui-v3--st35pro .yb-ui-v3__viewport::before {
    display: none !important;
    content: none !important;
}

.yb-ui-v3--st35pro .yb-ui-v3__scene {
    inset: 0;

    background-image:
        var(--yb-ui-scene);

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    filter:
        none;

    transform:
        scale(var(--yb-scene-scale));
}

.yb-ui-v3--st35pro .yb-ui-v3__viewport:hover .yb-ui-v3__scene {
    filter: none;
}

.yb-ui-v3--st35pro .yb-ui-v3__shade {
    background: none !important;
}


/* --------------------------------------------------------------------------
   分划线 + 黄色落点：
   两张 2048×2048 素材必须严格使用同一个渲染尺寸，保持坐标重合。
   -------------------------------------------------------------------------- */

.yb-ui-v3--st35pro .yb-ui-v3__reticle,
.yb-ui-v3--st35pro .yb-ui-v3__impact {
    width: 49cqw;
}


/* --------------------------------------------------------------------------
   绿色测距框继续在白色横向分划线之外。
   -------------------------------------------------------------------------- */

.yb-ui-v3--st35pro .yb-ui-v3__range-lock {
    left: 45.35%;
    top: 35.4%;
}

.yb-ui-v3--st35pro .yb-ui-v3__range-near {
    left:
        calc(
            45.35% +
            1.55cqw
        );

    top: 35.4%;
}


/* --------------------------------------------------------------------------
   黄色落点显示和动态移动。
   hidden + data-ballistic 两层状态共同控制显隐。
   -------------------------------------------------------------------------- */

.yb-ui-v3--st35pro .yb-ui-v3__impact {
    will-change:
        transform,
        opacity;

    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.16s ease;
}

.yb-ui-v3--st35pro
.yb-ui-v3__viewport[data-ballistic="false"]
.yb-ui-v3__impact {
    opacity: 0;
}

.yb-ui-v3--st35pro
.yb-ui-v3__viewport[data-ballistic="true"]
.yb-ui-v3__impact {
    opacity: 1;
}

.yb-ui-v3--st35pro .yb-ui-v3__impact[hidden] {
    display: none !important;
}


/* --------------------------------------------------------------------------
   中等桌面宽度：
   不溢出，同时继续保持右侧说明区明显宽于 V4.7。
   -------------------------------------------------------------------------- */

@media (min-width: 1101px) and (max-width: 1399px) {

    .yb-ui-v3--st35pro .yb-ui-v3__inner {
        width:
            calc(
                100vw -
                32px
            );
    }

    .yb-ui-v3--st35pro .yb-ui-v3__module {
        grid-template-columns:
            minmax(0, 68%)
            minmax(0, 32%);
    }

    .yb-ui-v3--st35pro .yb-ui-v3__rail {
        padding:
            26px
            26px
            26px;
    }

    .yb-ui-v3--st35pro .yb-ui-v3__notice {
        left: 26px;
        right: 26px;
        bottom: 24px;
    }

}
/* ==========================================================================\n   ST35Pro v0.27.3 — Hero + Product Story visual cleanup\n   Updated: 2026-08-10\n\n   - Remove nonessential hero corner labels.\n   - Use cleaner text-only CTA buttons.\n   - Remove the Product Story lower-right stage caption.\n   - Make both Product Story chapter scrims fully transparent so the pinned\n     background remains visually continuous during scrolling.\n   ========================================================================== */\n\n/* Hero: remove the two decorative corner labels from existing Elementor HTML. */\n.yb-hero--st35pro .yb-hero__index,\n.yb-hero--st35pro .yb-hero__scene-caption {\n    display: none !important;\n}\n\n/* Hero CTA: intentionally text-only. Old arrow <i> nodes are hidden for\n   backward compatibility until Elementor HTML is replaced with the clean copy. */\n.yb-hero--st35pro .yb-hero__button {\n    gap: 0;\n    min-height: 48px;\n    padding: 0 25px;\n    border-radius: 5px;\n\n    font-size: 12px;\n    font-weight: 760;\n    letter-spacing: 0.012em;\n\n    transform: translateZ(0);\n\n    transition:\n        color 180ms ease,\n        background-color 180ms ease,\n        border-color 180ms ease,\n        transform 180ms ease,\n        box-shadow 180ms ease;\n}\n\n.yb-hero--st35pro .yb-hero__button i {\n    display: none !important;\n}\n\n.yb-hero--st35pro .yb-hero__button:hover {\n    transform: translateY(-1px);\n}\n\n.yb-hero--st35pro .yb-hero__button--primary {\n    border-color: var(--hero-red);\n    background: var(--hero-red);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255, 255, 255, 0.12),\n        0 12px 28px rgba(227, 30, 36, 0.17);\n}\n\n.yb-hero--st35pro .yb-hero__button--primary:hover {\n    border-color: #ff3137;\n    background: #ff3137;\n\n    box-shadow:\n        inset 0 1px 0 rgba(255, 255, 255, 0.14),\n        0 15px 30px rgba(227, 30, 36, 0.22);\n}\n\n.yb-hero--st35pro .yb-hero__button--secondary {\n    border-color: rgba(255, 255, 255, 0.30);\n    background: rgba(5, 7, 10, 0.18);\n\n    color: rgba(255, 255, 255, 0.90);\n\n    backdrop-filter: none;\n    -webkit-backdrop-filter: none;\n\n    box-shadow:\n        inset 0 1px 0 rgba(255, 255, 255, 0.04);\n}\n\n.yb-hero--st35pro .yb-hero__button--secondary:hover {\n    border-color: rgba(255, 255, 255, 0.50);\n    background: rgba(255, 255, 255, 0.055);\n    color: #ffffff;\n}\n\n/* Product Story: remove the redundant lower-right product label. */\n.yb-story--st35pro .yb-story__stage-caption {\n    display: none !important;\n}\n\n/* Product Story: let the two foreground chapters inherit the exact same\n   pinned background instead of placing semi-transparent dark panels over it. */\n.yb-story--st35pro .yb-story__chapter-scrim,\n.yb-story--st35pro\n.yb-story__chapter--introduction\n.yb-story__chapter-scrim,\n.yb-story--st35pro\n.yb-story__chapter--features\n.yb-story__chapter-scrim {\n    background: transparent !important;\n    opacity: 0 !important;\n}\n


/* ==========================================================================\n   Shared ST-series manual note\n   ========================================================================== */
.yb-doc151--st35pro .yb-doc151__shared-note {
    margin: 14px 0 0;
    max-width: 720px;
    padding: 12px 14px;
    border-left: 2px solid rgba(237, 31, 45, 0.72);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    line-height: 1.65;
}

.yb-doc151--st35pro .yb-doc151__shared-note strong {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 650;
}

.yb-doc151--st35pro .yb-doc151__shared-note[hidden] {
    display: none !important;
}


/* ==========================================================================
   Shared ST-series manual note — compact editorial v2
   - Smaller, quieter note for models that share the ST35Pro operating guide.
   - Intentionally overrides the earlier shared-note styling.
   ========================================================================== */
.yb-doc151--st35pro .yb-doc151__shared-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 560px;
    margin: 13px 0 0;
    padding: 11px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: rgba(245, 245, 247, 0.57);
    font-size: 11px;
    font-weight: 430;
    line-height: 1.58;
    letter-spacing: 0.002em;
}

.yb-doc151--st35pro .yb-doc151__shared-note-label {
    flex: 0 0 auto;
    margin-top: 2px;
    color: rgba(239, 43, 54, 0.92);
    font-size: 8px;
    font-weight: 780;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.yb-doc151--st35pro .yb-doc151__shared-note-text {
    min-width: 0;
    max-width: 470px;
}

.yb-doc151--st35pro .yb-doc151__shared-note strong {
    color: inherit;
    font: inherit;
}

.yb-doc151--st35pro .yb-doc151__shared-note[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .yb-doc151--st35pro .yb-doc151__shared-note {
        max-width: none;
        gap: 8px;
        font-size: 10.5px;
        line-height: 1.55;
    }
}

@media (max-width: 430px) {
    .yb-doc151--st35pro .yb-doc151__shared-note {
        display: grid;
        gap: 5px;
    }
}

/* ==========================================================================
   Thermal Product Detail v0.27.14 — hydration flash + touch pinned-story fix
   Updated: 2026-08-14

   1. Prevent copied ST-series pages from briefly showing the ST35Pro fallback
      model before Product Specs has resolved the current page model.
   2. Restore the desktop-style pinned Product Story sequence on tablet/mobile:
      the product image remains pinned as the background while chapter content
      scrolls upward over it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Model hydration guard
   Critical Hero model text renders immediately.
   Other dynamic model fields continue waiting for Product Specs hydration.
   -------------------------------------------------------------------------- */

body.yubeen-thermal-product-detail-assets-active:not(.yb-thermal-specs-ready)
[data-yb-spec="model"]:not(.yb-spec-critical) {
    visibility: hidden !important;
    opacity: 0 !important;
}

body.yubeen-thermal-product-detail-assets-active
[data-yb-spec="model"] {
    transition: opacity 160ms ease;
}

body.yubeen-thermal-product-detail-assets-active
[data-yb-spec="model"].yb-spec-critical {
    visibility: visible !important;
    opacity: 1 !important;
}

body.yubeen-thermal-product-detail-assets-active.yb-thermal-specs-ready
[data-yb-spec="model"] {
    visibility: visible !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   B. Tablet + mobile sticky-host repair
   Elementor containers with overflow hidden/clip can cancel position: sticky.
   JavaScript marks only the relevant ancestors while <= 1100px.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

    .yb-story-sticky-host {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .yb-story--st35pro {
        overflow: visible !important;
    }

    .yb-story--st35pro .yb-story__sticky {
        position: sticky !important;
        top: var(--story-sticky-top, 0px) !important;
        z-index: 1;

        height: calc(100svh - var(--story-sticky-top, 0px)) !important;
        min-height: 520px !important;
        max-height: 100svh;

        overflow: hidden !important;
    }

    .yb-story--st35pro .yb-story__stage,
    .yb-story--st35pro .yb-story__product-stage--scene {
        height: 100% !important;
        min-height: 0 !important;
    }

    .yb-story--st35pro
    .yb-story__product-stage--scene
    .yb-story__product-picture--scene {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;

        background-position: 50% 58% !important;
        background-size: auto 100% !important;

        transform: none !important;
    }

    .yb-story--st35pro .yb-story__flow {
        position: relative;
        z-index: 3;
        margin-top: 0 !important;
    }

    .yb-story--st35pro .yb-story__chapter {
        position: relative;
        z-index: 3;
        background: transparent !important;
    }

    /*
     * Use a translucent reading veil instead of the previous opaque mobile
     * panel. The mounted-product scene therefore remains visibly continuous
     * behind the foreground copy while text stays readable.
     */
    .yb-story--st35pro .yb-story__chapter-scrim,
    .yb-story--st35pro
    .yb-story__chapter--introduction
    .yb-story__chapter-scrim,
    .yb-story--st35pro
    .yb-story__chapter--features
    .yb-story__chapter-scrim {
        opacity: 1 !important;
        background:
            linear-gradient(
                180deg,
                rgba(4, 7, 10, 0.18) 0%,
                rgba(4, 7, 10, 0.40) 24%,
                rgba(4, 7, 10, 0.54) 52%,
                rgba(4, 7, 10, 0.36) 78%,
                rgba(4, 7, 10, 0.14) 100%
            ) !important;
    }

    .yb-story--st35pro .yb-story__copy,
    .yb-story--st35pro .yb-story__features {
        position: relative;
        z-index: 4;

        text-shadow:
            0 2px 12px rgba(0, 0, 0, 0.38),
            0 1px 2px rgba(0, 0, 0, 0.44);
    }
}

/* --------------------------------------------------------------------------
   C. Tablet composition
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {

    .yb-story--st35pro .yb-story__chapter--introduction {
        min-height: calc(86svh - var(--story-sticky-top, 0px)) !important;
        padding: 78px 34px 92px !important;
    }

    .yb-story--st35pro .yb-story__chapter--features {
        min-height: max(
            980px,
            calc(110svh - var(--story-sticky-top, 0px))
        ) !important;

        padding: 92px 34px 122px !important;
    }
}

/* --------------------------------------------------------------------------
   D. Mobile composition
   The sticky product stage remains active instead of returning to document
   flow. Chapter 1 then rises over the image, followed by the feature list.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .yb-story--st35pro {
        scroll-margin-top: 70px;
    }

    .yb-story--st35pro .yb-story__sticky {
        position: sticky !important;
        top: var(--story-sticky-top, 0px) !important;

        height: calc(100svh - var(--story-sticky-top, 0px)) !important;
        min-height: 500px !important;
    }

    .yb-story--st35pro
    .yb-story__product-stage--scene
    .yb-story__product-picture--scene {
        background-position: 50% 56% !important;
        background-size: auto 92% !important;
    }

    .yb-story--st35pro .yb-story__chapter--introduction {
        min-height: calc(88svh - var(--story-sticky-top, 0px)) !important;
        padding: 72px 20px 84px !important;
    }

    .yb-story--st35pro .yb-story__chapter--features {
        min-height: auto !important;
        padding: 84px 20px 108px !important;
    }

    .yb-story--st35pro .yb-story__system-statement {
        max-width: 640px;
        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.16;
    }

    .yb-story--st35pro .yb-story__system-support p {
        color: rgba(239, 243, 247, 0.86);
    }

    .yb-story--st35pro .yb-story__feature-grid {
        row-gap: 48px;
    }

    .yb-story--st35pro .yb-story__feature h3 {
        color: #ffffff;
    }
}
\n\n/* =========================================================================================================\n   Stage 3P UI calibration — ST25L zoom readout / inclination / range placement\n\n   - ST25L top-left device readout is handled in JavaScript as 1.0X / 2.0X / 4.0X / 8.0X.\n   - ST35Pro keeps the calculated total-magnification readout.\n   - The lower-right level-angle indicator is moved into the actual screen corner for both models.\n   - ST25L receives a small model-specific range-lock/readout offset matching its UI reference.\n   ========================================================================================================= */\n\n/* Both ST35Pro and ST25L: level-angle indicator belongs in the lower-right corner. */\n.yb-ui-v3--st35pro .yb-ui-v3__level-angle {\n    top: auto !important;\n    right: 1.25cqw !important;\n    bottom: 1.65cqh !important;\n}\n\n/* ST25L: range-lock marker sits slightly higher and farther left. */\n.yb-ui-v3--st35pro\n.yb-ui-v3__viewport[data-yb-ui-model="st25l"]\n.yb-ui-v3__range-lock {\n    left: 44.00%;\n    top: 35.60%;\n}\n\n/* ST25L: place the live range text to the left of the green lock, as in the real UI. */\n.yb-ui-v3--st35pro\n.yb-ui-v3__viewport[data-yb-ui-model="st25l"]\n.yb-ui-v3__range-near {\n    left: calc(44.00% - 1.55cqw);\n    top: 35.60%;\n    transform: translate(-100%, -50%);\n}\n
/* =========================================================================================================
   2026-08-14 — ST25L woodland hero composition + thermal palette image integrity
   Version remains 0.27.14.

   ST25L-specific hero goals:
   - Keep the woodland product image visually unobstructed on the left.
   - Move the complete editorial/specification content block to the right on tablet/desktop.
   - Remove full-frame gradient/vignette/grain/ambient overlays from the ST25L hero.
   - Preserve text readability with text-shadow rather than an image-covering gradient.
   - Keep the existing shared ST35Pro hero composition unchanged.

   Thermal image-modes goals (shared):
   - Remove the per-palette gradient shade layer.
   - Remove inactive/hover brightness filtering so the supplied pseudo-color images render faithfully.
   ========================================================================================================= */

/*
 * ST25L detection supports both the hydrated runtime model attribute and the
 * hidden Product Specifications source emitted by the ST25L shortcode.
 */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__overlay,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__vignette,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__grain,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__ambient {
    display: none !important;
}

/* Desktop / tablet: reserve the left side for the product image and place all hero copy on the right. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__inner {
    grid-template-columns:
        minmax(0, 52%)
        minmax(460px, 48%);
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__content {
    grid-column: 2;
    justify-self: end;

    width: 100%;
    max-width: 610px;

    padding:
        clamp(72px, 7vh, 94px)
        0
        clamp(64px, 6vh, 80px)
        clamp(30px, 3.4vw, 58px);
}

/* Readability without a full-image gradient cover. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
:is(
    .yb-hero__eyebrow,
    .yb-hero__title,
    .yb-hero__tagline,
    .yb-hero__description,
    .yb-hero__spec-label,
    .yb-hero__spec-value,
    .yb-hero__spec-number
) {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.88),
        0 10px 30px rgba(0, 0, 0, 0.46);
}

/* Keep the secondary CTA legible now that the broad dark overlay is gone. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__button--secondary {
    background: rgba(3, 5, 7, 0.58);
    border-color: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Move the Discover indicator away from the right-hand information block. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__scroll {
    right: auto;
    left: clamp(21px, 2vw, 34px);
}

@media (min-width: 1600px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__inner {
        grid-template-columns:
            minmax(0, 54%)
            minmax(500px, 46%);
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__content {
        max-width: 650px;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__inner {
        grid-template-columns:
            minmax(0, 45%)
            minmax(390px, 55%);
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__content {
        max-width: 520px;
        padding-left: 28px;
        padding-right: 0;
    }
}

/* Mobile: keep the product-biased crop and place the information block to the lower-right. */
@media (max-width: 767px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__inner {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__content {
        width: min(88%, 430px);
        max-width: 430px;
        margin-left: auto;

        padding:
            365px
            0
            42px
            clamp(18px, 5vw, 28px);
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__description {
        max-width: 360px;
    }
}

@media (max-width: 390px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__content {
        width: 92%;
        padding-top: 350px;
    }
}

/* ---------------------------------------------------------------------------------------------------------
   Image Modes / pseudo-color gallery — remove visual cover layers.
   --------------------------------------------------------------------------------------------------------- */
.yb-modes--st35pro .yb-modes__panel-shade {
    display: none !important;
    background: none !important;
}

.yb-modes--st35pro .yb-modes__panel-media,
.yb-modes--st35pro .yb-modes__panel:hover .yb-modes__panel-media,
.yb-modes--st35pro .yb-modes__panel:focus-visible .yb-modes__panel-media,
.yb-modes--st35pro .yb-modes__panel.is-active .yb-modes__panel-media {
    filter: none !important;
}

/* Retain label legibility without putting a shade over the thermal image itself. */
.yb-modes--st35pro .yb-modes__panel-content strong,
.yb-modes--st35pro .yb-modes__panel-index {
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.86),
        0 6px 18px rgba(0, 0, 0, 0.62);
}

/* =========================================================================================================
   2026-08-14 — ST25L hero zero-shadow / source-image fidelity refinement
   Version remains 0.27.14.

   User-facing intent:
   - The ST25L first screen must show the uploaded woodland image without any darkening, tint,
     gradient, vignette, grain, ambient glow, text shadow, button shadow, blur, or image color filter.
   - Keep the right-side information composition introduced in the preceding ST25L hero patch.
   - This refinement is ST25L-only; the shared ST35Pro hero remains unchanged.
   ========================================================================================================= */

/* Render the uploaded ST25L hero image with its source colors/contrast/brightness. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__media img {
    filter: none !important;
}

/* Belt-and-suspenders removal of every image-covering visual layer on ST25L. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
:is(
    .yb-hero__overlay,
    .yb-hero__vignette,
    .yb-hero__grain,
    .yb-hero__ambient,
    .yb-hero__ambient-red,
    .yb-hero__ambient-cool
) {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* No text or box shadows anywhere in the ST25L first screen. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro *,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro *::before,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro *::after {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Secondary CTA stays readable through border/typography only — no dark glass panel or blur. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__button--secondary,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__button--secondary:hover {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =========================================================================================================
   2026-08-14 — ST25L hero original-layout / soft content-side gradient
   Version remains 0.27.14.

   User-facing intent:
   - Restore/retain the original ST25L right-side typography and layout.
   - Keep the uploaded hero image itself unfiltered and free of full-screen overlays.
   - Add only a restrained local readability layer behind the content area.
   - The layer is darkest at the far right and fades smoothly to fully transparent toward the left.
   - No text shadow, box shadow, vignette, grain, ambient glow, or image color filter is reintroduced.
   ========================================================================================================= */

/* Establish a local stacking context for the ST25L content only. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__content {
    position: relative;
    isolation: isolate;
}

/* Subtle right-side readability wash. It stays local to the content region and fades out before the product. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__content::before {
    content: "";

    position: absolute;
    z-index: -1;
    pointer-events: none;

    top: clamp(28px, 3.2vh, 42px);
    right: clamp(-78px, -4vw, -30px);
    bottom: clamp(22px, 2.8vh, 38px);
    left: clamp(-82px, -5vw, -42px);

    background:
        linear-gradient(
            90deg,
            rgba(7, 10, 13, 0.00) 0%,
            rgba(7, 10, 13, 0.05) 24%,
            rgba(7, 10, 13, 0.13) 45%,
            rgba(7, 10, 13, 0.24) 68%,
            rgba(7, 10, 13, 0.34) 86%,
            rgba(7, 10, 13, 0.40) 100%
        );

    opacity: 1;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep all real content above the local gradient layer. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro
.yb-hero__content > * {
    position: relative;
    z-index: 1;
}

/* Mobile gets the same idea, but with a tighter, slightly lighter local wash. */
@media (max-width: 767px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro
    .yb-hero__content::before {
        top: 330px;
        right: -16px;
        bottom: 18px;
        left: -28px;

        background:
            linear-gradient(
                90deg,
                rgba(7, 10, 13, 0.00) 0%,
                rgba(7, 10, 13, 0.08) 30%,
                rgba(7, 10, 13, 0.18) 58%,
                rgba(7, 10, 13, 0.30) 82%,
                rgba(7, 10, 13, 0.36) 100%
            );
    }
}

/* =========================================================================================================
   2026-08-14 — ST25L hero content-side gradient / height crop / right-aligned content refinement
   Version remains 0.27.14.

   User-facing intent:
   - Keep the existing ST25L first-screen visual direction, but make it more believable and cleaner.
   - The readability shade must follow the real image height rather than appearing as a floating rectangle.
   - Preserve roughly the current shade width on the right side.
   - Reduce hero height slightly so the bottom is cropped a bit more.
   - Keep the riflescope/product position visually stable as much as possible.
   - Right-align the content itself, rather than only shifting the whole block rightward.
   - Use mostly solid text colors for better readability on the new woodland image.
   - Slightly enlarge the 01 / 02 / 03 specification numbers.
   ========================================================================================================= */

/* --- 1) Shorter hero height for ST25L, with slightly higher crop balance --- */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro {
    height: clamp(620px, calc(100svh - 84px), 760px) !important;
    min-height: 620px !important;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__stage,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__inner {
    min-height: 620px;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__media img {
    object-position: 50% 42% !important;
    transform:
        translate3d(
            calc(var(--hero-pointer-x) * -8px),
            calc(var(--hero-pointer-y) * -5px),
            0
        )
        scale(1.03) !important;
}

/* --- 2) Remove the fake content-box shade and move the readability layer to the actual image area --- */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__content::before {
    display: none !important;
    content: none !important;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(430px, 43vw, 760px);
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(8, 11, 14, 0.00) 0%,
            rgba(8, 11, 14, 0.06) 18%,
            rgba(8, 11, 14, 0.14) 36%,
            rgba(8, 11, 14, 0.24) 56%,
            rgba(8, 11, 14, 0.34) 76%,
            rgba(8, 11, 14, 0.42) 100%
        );
}

/* --- 3) Right-align the content itself, not only its placement --- */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__inner {
    grid-template-columns:
        minmax(0, 52%)
        minmax(460px, 48%) !important;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__content {
    grid-column: 2;
    justify-self: end;
    width: 100%;
    max-width: 610px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding:
        clamp(64px, 6.2vh, 84px)
        clamp(28px, 3vw, 46px)
        clamp(48px, 5vh, 68px)
        clamp(24px, 2.3vw, 38px) !important;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__eyebrow {
    justify-content: flex-end;
    color: #f3f5f6;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__tagline {
    justify-items: end;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__tagline-muted {
    color: #d1d7dc;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__description {
    max-width: 530px;
    margin-left: auto;
    color: #edf1f4;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__actions {
    justify-content: flex-end;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__specs {
    width: 100%;
    max-width: 650px;
    margin-left: auto;
}

/* Keep solid text appearance for readability on the woodland image. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__title,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__tagline,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec-value {
    color: #ffffff;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec-label {
    color: #d9dee3;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec-number {
    font-size: 8px;
    letter-spacing: 0.15em;
}

@media (min-width: 1600px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__content {
        max-width: 640px;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__inner {
        grid-template-columns:
            minmax(0, 44%)
            minmax(390px, 56%) !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__media::after {
        width: clamp(360px, 48vw, 520px);
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__content {
        max-width: 520px;
        padding-right: 24px !important;
        padding-left: 22px !important;
    }
}

/* --- 4) Mobile: slightly shorter hero, crop more from the bottom, preserve product emphasis --- */
@media (max-width: 767px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro {
        min-height: 760px !important;
        height: auto !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__stage,
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__inner {
        min-height: 760px !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__media img {
        object-position: 40% 14% !important;
        transform: scale(1.02) !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__media::after {
        width: min(86%, 390px);
        background:
            linear-gradient(
                90deg,
                rgba(8, 11, 14, 0.00) 0%,
                rgba(8, 11, 14, 0.08) 24%,
                rgba(8, 11, 14, 0.18) 48%,
                rgba(8, 11, 14, 0.30) 72%,
                rgba(8, 11, 14, 0.40) 100%
            );
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__inner {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__content {
        width: min(88%, 420px);
        max-width: 420px;
        margin-left: auto;
        align-items: flex-end;
        text-align: right;
        padding:
            318px
            18px
            34px
            16px !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__eyebrow {
        justify-content: flex-end;
        font-size: 9px;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__tagline {
        justify-items: end;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__description {
        max-width: 360px;
        margin-left: auto;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__actions {
        justify-content: flex-end;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__spec-number {
        font-size: 7px;
    }
}

@media (max-width: 390px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro {
        min-height: 736px !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__stage,
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__inner {
        min-height: 736px !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__content {
        width: 92%;
        padding-top: 306px !important;
        padding-right: 16px !important;
        padding-bottom: 30px !important;
    }
}

/* =========================================================================================================
   2026-08-14 — ST25L hero readability + specification alignment refinement
   Version remains 0.27.14.

   - Slightly deepen the existing right-side full-height readability gradient.
   - Preserve the current gradient width and full image-height behavior.
   - Right-align specification number / label / value within each rail cell.
   - Keep pseudo-color image panels free from gradient/image-darkening overlays.
   ========================================================================================================= */

/* Slightly deeper ST25L content-side wash; same width / same full image height. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__media::after {
    background:
        linear-gradient(
            90deg,
            rgba(8, 11, 14, 0.00) 0%,
            rgba(8, 11, 14, 0.08) 18%,
            rgba(8, 11, 14, 0.18) 36%,
            rgba(8, 11, 14, 0.30) 56%,
            rgba(8, 11, 14, 0.42) 76%,
            rgba(8, 11, 14, 0.50) 100%
        ) !important;
}

/* Make each specification column internally right-aligned. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec {
    text-align: right;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec-number,
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec-label {
    width: 100%;
    text-align: right;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec-value {
    width: 100%;
    justify-content: flex-end;
    text-align: right;
}

/* Keep the slightly enlarged spec index numbers. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-hero--st35pro .yb-hero__spec-number {
    font-size: 8px !important;
}

/* Mobile gradient: same full-height behavior, slightly stronger at the right edge. */
@media (max-width: 767px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__media::after {
        background:
            linear-gradient(
                90deg,
                rgba(8, 11, 14, 0.00) 0%,
                rgba(8, 11, 14, 0.10) 24%,
                rgba(8, 11, 14, 0.22) 48%,
                rgba(8, 11, 14, 0.35) 72%,
                rgba(8, 11, 14, 0.46) 100%
            ) !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-hero--st35pro .yb-hero__spec-number {
        font-size: 7px !important;
    }
}

/* =========================================================================================================
   ST25L FIELD USE — STRICT MODEL-ISOLATED OVERRIDES
   2026-08-15

   Isolation rule:
   - ST35Pro Field Use CSS above is restored byte-for-byte from the known-good
     ST35Pro Field Clean build.
   - ST25L overrides are enabled ONLY when the thermal runtime has set
     body[data-yb-thermal-current-model="ST25L"].
   - No :has(...) fallback is used here, because ST35Pro pages can contain
     comparison/specification markup for other models and that could leak an
     ST25L override onto the ST35Pro page.
   - Direct left/top values intentionally override JS-written --x/--y values.
   ========================================================================================================= */

/* ST25L only: soften all four image edges into the shared dark canvas. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-control-v3 .yb-control-v3__image-blend {
    background:
        linear-gradient(
            90deg,
            rgba(5, 9, 14, 0.90) 0%,
            rgba(5, 9, 14, 0.62) 10%,
            rgba(5, 9, 14, 0.24) 22%,
            rgba(5, 9, 14, 0.05) 34%,
            transparent 43%,
            transparent 76%,
            rgba(5, 9, 14, 0.10) 86%,
            rgba(5, 9, 14, 0.30) 94%,
            rgba(5, 9, 14, 0.48) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 9, 14, 0.50) 0%,
            rgba(5, 9, 14, 0.15) 10%,
            transparent 21%,
            transparent 77%,
            rgba(5, 9, 14, 0.18) 89%,
            rgba(5, 9, 14, 0.44) 100%
        ),
        radial-gradient(
            ellipse at center,
            transparent 60%,
            rgba(5, 9, 14, 0.06) 76%,
            rgba(5, 9, 14, 0.15) 90%,
            rgba(5, 9, 14, 0.24) 100%
        ) !important;
}

/* ST25L only — positions verified manually by the user in Elementor. */
body[data-yb-thermal-current-model="ST25L" i]
.yb-control-v3 .yb-control-v3__hotspot[data-feature="objective"] {
    left: 73% !important;
    top: 50% !important;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-control-v3 .yb-control-v3__hotspot[data-feature="ranging"] {
    left: 55% !important;
    top: 45% !important;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-control-v3 .yb-control-v3__hotspot[data-feature="power"] {
    left: 53% !important;
    top: 52% !important;
}

body[data-yb-thermal-current-model="ST25L" i]
.yb-control-v3 .yb-control-v3__hotspot[data-feature="controls"][data-hotspot-view="main"] {
    left: 65% !important;
    top: 35% !important;
}

/* Tablet keeps the same user-verified ST25L geometry. */
@media (max-width: 1024px) and (min-width: 768px) {
    body[data-yb-thermal-current-model="ST25L" i]
    .yb-control-v3 .yb-control-v3__hotspot[data-feature="objective"] {
        left: 73% !important;
        top: 50% !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-control-v3 .yb-control-v3__hotspot[data-feature="ranging"] {
        left: 55% !important;
        top: 45% !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-control-v3 .yb-control-v3__hotspot[data-feature="power"] {
        left: 53% !important;
        top: 52% !important;
    }

    body[data-yb-thermal-current-model="ST25L" i]
    .yb-control-v3 .yb-control-v3__hotspot[data-feature="controls"][data-hotspot-view="main"] {
        left: 65% !important;
        top: 35% !important;
    }
}



/* ==========================================================================
   ST-Series regression-safe performance fix v0.27.19
   Keep thermal palette requests behind the shared JS lazy-load state.
   ========================================================================== */

.yb-modes--st35pro
.yb-modes__panel:not(.yb-panel-image-loaded)
.yb-modes__panel-media {
    background-image: none !important;
}

.yb-modes--st35pro
.yb-modes__panel.yb-panel-image-loaded
.yb-modes__panel-media {
    background-image: var(--yb-panel-image, none) !important;
}

/* The Hero image is layout-stable and may paint immediately on PSI mobile.
   Dynamic Hero copy keeps its original reveal timing so late spec hydration
   does not become a visible layout shift. */
@media (max-width: 1024px) {
    .yb-hero--st35pro .yb-hero__media img {
        animation: none !important;
        opacity: 1 !important;
    }
}