/* =========================================================
   CLOUDBENCH
   ========================================================= */


/* English-only product page */

#arthouseLanguageSelect,
#arthouseMobileLanguageSelect,
#languageSelect,
#mobileLanguageSelect,
label[for="arthouseLanguageSelect"],
label[for="arthouseMobileLanguageSelect"],
label[for="languageSelect"],
label[for="mobileLanguageSelect"] {
    display: none !important;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

body .reveal {
    opacity: 0;

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

    transition:
        opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay:
        var(--reveal-delay, 0ms);

    will-change:
        opacity,
        transform;
}


body .reveal.reveal-left {
    transform:
        translate3d(-34px, 0, 0);
}


body .reveal.reveal-right {
    transform:
        translate3d(34px, 0, 0);
}


body .reveal.reveal-scale {
    transform:
        translate3d(0, 18px, 0)
        scale(0.975);
}


body .reveal.is-visible {
    opacity: 1;

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


/* =========================================================
   HERO
   ========================================================= */

.cb-hero {
    --cb-blue: #4b91ff;
    --cb-blue-deep: #286bcf;
    --cb-cyan: #62c5ff;
    --cb-indigo: #657cff;

    --cb-heading: #102036;

    --cb-text:
        rgba(52, 71, 95, 0.69);

    --cb-strong:
        rgba(25, 43, 66, 0.90);

    --cb-line:
        rgba(41, 87, 135, 0.10);

    --cb-card:
        rgba(255, 255, 255, 0.66);

    --cb-pointer-x: 74%;
    --cb-pointer-y: 18%;

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(54px, 5.4vw, 80px)
        0
        clamp(70px, 7vw, 100px);

    background:
        radial-gradient(
            circle at 14% 2%,
            rgba(97, 181, 255, 0.17),
            transparent 31rem
        ),

        radial-gradient(
            circle at 89% 18%,
            rgba(101, 124, 255, 0.12),
            transparent 31rem
        ),

        linear-gradient(
            180deg,
            #f9fcff 0%,
            #f0f6fd 54%,
            #f7faff 100%
        );
}


/* Mouse-following glow */

.cb-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            600px circle
            at var(--cb-pointer-x)
            var(--cb-pointer-y),
            rgba(70, 157, 255, 0.15),
            rgba(92, 111, 255, 0.055) 35%,
            transparent 72%
        );
}


/* Very subtle pattern */

.cb-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(50, 93, 140, 0.022) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(50, 93, 140, 0.022) 1px,
            transparent 1px
        );

    background-size:
        48px
        48px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.72),
            transparent 76%
        );
}


.cb-hero > .container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 40px),
            1240px
        );

    max-width: none;

    margin-inline: auto;
}


/* =========================================================
   DECORATIVE ORBS
   ========================================================= */

.cb-hero-orb {
    position: absolute;

    z-index: -1;

    border-radius: 999px;

    pointer-events: none;

    filter:
        blur(22px);
}


.cb-hero-orb-one {
    width: 420px;
    height: 420px;

    left: -250px;
    top: 20%;

    background:
        rgba(71, 161, 255, 0.09);
}


.cb-hero-orb-two {
    width: 410px;
    height: 410px;

    right: -245px;
    top: 8%;

    background:
        rgba(103, 114, 255, 0.075);
}


/* =========================================================
   COPY
   ========================================================= */

.cb-hero-copy {
    width:
        min(
            100%,
            990px
        );

    margin-inline: auto;

    text-align: center;
}


.cb-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 37px;

    margin-bottom: 18px;

    padding:
        5px
        14px
        5px
        7px;

    border:
        1px solid
        rgba(61, 135, 226, 0.17);

    border-radius: 999px;

    color: #276ec3;

    background:
        rgba(76, 152, 243, 0.065);

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

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


.cb-eyebrow-icon {
    display: grid;

    place-items: center;

    width: 25px;
    height: 25px;

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #56b2ff,
            #537cff
        );

    box-shadow:
        0
        7px
        18px
        rgba(56, 126, 230, 0.22);

    font-size: 0.67rem;
}


.cb-hero h1 {
    width:
        min(
            100%,
            1020px
        );

    margin:
        0
        auto;

    color:
        var(--cb-heading);

    font-size:
        clamp(
            2.9rem,
            5.5vw,
            5.55rem
        );

    font-weight: 840;

    line-height: 0.97;

    letter-spacing: -0.06em;
}


.cb-gradient-text {
    display: inline-block;

    color: transparent;

    background:
        linear-gradient(
            105deg,
            #265fae 0%,
            #338be9 36%,
            #57aaff 62%,
            #6879ef 100%
        );

    -webkit-background-clip: text;

    background-clip: text;
}


.cb-hero-description {
    width:
        min(
            100%,
            790px
        );

    margin:
        21px
        auto
        0;

    color:
        var(--cb-text);

    font-size:
        clamp(
            0.98rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.72;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.cb-hero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    justify-content: center;

    gap: 10px;

    margin-top: 24px;
}


.cb-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 52px;

    padding:
        0
        19px;

    border:
        1px solid
        transparent;

    border-radius: 13px;

    font-size: 0.91rem;

    font-weight: 740;

    text-decoration: none;

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


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


.cb-button-primary {
    min-width: 188px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #419bff,
            #5379f1
        );

    box-shadow:
        0
        15px
        40px
        rgba(54, 120, 223, 0.21);
}


.cb-button-primary:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #52a8ff,
            #647ff4
        );
}


.cb-button-primary > i {
    font-size: 1.43rem;
}


.cb-button-copy {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1.03;
}


.cb-button-copy small {
    margin-bottom: 2px;

    font-size: 0.62rem;

    font-weight: 600;

    opacity: 0.76;
}


.cb-button-copy strong {
    font-size: 0.96rem;

    font-weight: 820;
}


.cb-button-secondary {
    color:
        var(--cb-strong);

    border-color:
        rgba(39, 72, 107, 0.11);

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

    box-shadow:
        0
        8px
        24px
        rgba(50, 78, 111, 0.035);

    backdrop-filter:
        blur(12px);
}


.cb-button-secondary:hover {
    color:
        #172d48;

    border-color:
        rgba(61, 138, 226, 0.22);

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


/* =========================================================
   QUICK FACTS
   ========================================================= */

.cb-quick-facts {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 7px;

    width: fit-content;

    max-width: 100%;

    margin:
        17px
        auto
        0;

    padding: 7px;

    border:
        1px solid
        var(--cb-line);

    border-radius: 14px;

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

    box-shadow:
        0
        12px
        30px
        rgba(44, 78, 112, 0.04);

    backdrop-filter:
        blur(15px);
}


.cb-quick-fact {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 28px;

    padding:
        0
        8px;

    color:
        var(--cb-strong);

    font-size: 0.73rem;

    font-weight: 690;
}


.cb-quick-fact i {
    color:
        var(--cb-blue);

    font-size: 0.72rem;
}


.cb-quick-divider {
    display: block;

    width: 1px;
    height: 19px;

    margin-inline: 2px;

    background:
        var(--cb-line);
}


.cb-quick-spec {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    padding:
        0
        9px;

    border-radius: 8px;

    color: #2c71be;

    background:
        rgba(69, 146, 235, 0.08);

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: 0.04em;
}


/* =========================================================
   DEVICE SCREENSHOT
   ========================================================= */

.cb-device-showcase {
    position: relative;

    width:
        min(
            100%,
            1120px
        );

    margin:
        clamp(28px, 3vw, 41px)
        auto
        0;
}


.cb-device-stage {
    position: relative;

    width: 100%;

    overflow: visible;

    background: transparent;
}


.cb-device-glow {
    position: absolute;

    z-index: 0;

    width: 74%;
    height: 54%;

    left: 13%;
    top: 23%;

    border-radius: 999px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(74, 168, 255, 0.14),
            rgba(96, 115, 255, 0.10)
        );

    filter:
        blur(100px);
}


.cb-device-art {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

    background: transparent;

    filter:
        drop-shadow(
            0
            28px
            34px
            rgba(28, 42, 62, 0.22)
        );

    transition:
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}


.cb-device-stage:hover
.cb-device-art {
    transform:
        translateY(-5px)
        scale(1.006);

    filter:
        drop-shadow(
            0
            36px
            42px
            rgba(28, 42, 62, 0.27)
        );
}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.cb-hero-highlights {
    display: grid;

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

    gap: 10px;

    width:
        min(
            100%,
            1060px
        );

    margin:
        10px
        auto
        0;

    scroll-margin-top: 100px;
}


.cb-highlight-card {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-width: 0;

    padding: 16px;

    border:
        1px solid
        var(--cb-line);

    border-radius: 16px;

    background:
        var(--cb-card);

    box-shadow:
        0
        13px
        30px
        rgba(43, 72, 105, 0.045);

    backdrop-filter:
        blur(15px);

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


.cb-highlight-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(64, 145, 236, 0.20);

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

    box-shadow:
        0
        18px
        38px
        rgba(37, 76, 119, 0.07);
}


.cb-highlight-icon {
    display: grid;

    place-items: center;

    flex:
        0 0 36px;

    width: 36px;
    height: 36px;

    border-radius: 11px;

    color: #3a89dd;

    background:
        linear-gradient(
            145deg,
            rgba(70, 158, 245, 0.12),
            rgba(95, 107, 242, 0.07)
        );

    border:
        1px solid
        rgba(70, 148, 230, 0.10);
}


.cb-highlight-card h2 {
    margin:
        1px
        0
        5px;

    color:
        var(--cb-heading);

    font-size: 0.88rem;

    font-weight: 790;

    letter-spacing: -0.02em;
}


.cb-highlight-card p {
    margin: 0;

    color:
        var(--cb-text);

    font-size: 0.73rem;

    line-height: 1.55;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.cb-hero {
    --cb-heading: #f7faff;

    --cb-text:
        rgba(220, 230, 242, 0.70);

    --cb-strong:
        rgba(239, 246, 255, 0.90);

    --cb-line:
        rgba(255, 255, 255, 0.10);

    --cb-card:
        rgba(255, 255, 255, 0.045);

    background:
        radial-gradient(
            circle at 14% 2%,
            rgba(66, 153, 255, 0.13),
            transparent 31rem
        ),

        radial-gradient(
            circle at 89% 18%,
            rgba(98, 107, 255, 0.11),
            transparent 31rem
        ),

        linear-gradient(
            180deg,
            #07101c 0%,
            #0a1422 54%,
            #09111c 100%
        );
}


html[data-theme="dark"]
.cb-eyebrow {
    color: #84c7ff;

    border-color:
        rgba(80, 166, 255, 0.20);

    background:
        rgba(62, 145, 239, 0.065);

    box-shadow: none;
}


html[data-theme="dark"]
.cb-gradient-text {
    background:
        linear-gradient(
            105deg,
            #9fd8ff 0%,
            #68b6ff 43%,
            #7185ff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;
}


html[data-theme="dark"]
.cb-button-secondary {
    color:
        var(--cb-strong);

    border-color:
        rgba(255, 255, 255, 0.11);

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


html[data-theme="dark"]
.cb-button-secondary:hover {
    color: #ffffff;

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


html[data-theme="dark"]
.cb-quick-facts {
    background:
        rgba(255, 255, 255, 0.035);

    box-shadow: none;
}


html[data-theme="dark"]
.cb-quick-spec {
    color: #91cdff;

    background:
        rgba(68, 155, 246, 0.08);
}


html[data-theme="dark"]
.cb-device-art {
    filter:
        drop-shadow(
            0
            28px
            34px
            rgba(0, 0, 0, 0.31)
        );
}


html[data-theme="dark"]
.cb-highlight-card {
    box-shadow: none;
}


html[data-theme="dark"]
.cb-highlight-card:hover {
    background:
        rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"]
.contacts-sort-block {
    background:
        rgba(255, 255, 255, 0.04);

    box-shadow: none;
}


html[data-theme="dark"]
.contacts-actions-strip {
    background:
        linear-gradient(
            135deg,
            rgba(55, 146, 239, 0.07),
            rgba(89, 101, 239, 0.045)
        );
}


html[data-theme="dark"]
.contacts-action-buttons span {
    color: #80c4ff;

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

    border-color:
        rgba(255, 255, 255, 0.09);
}


html[data-theme="dark"]
.contacts-action-buttons span:hover {
    background:
        rgba(255, 255, 255, 0.075);

    box-shadow: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .cb-hero-highlights {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 760px) {

    .cb-hero {
        padding:
            45px
            0
            64px;
    }


    .cb-hero > .container {
        width:
            min(
                calc(100% - 28px),
                1240px
            );
    }


    .cb-hero h1 {
        font-size:
            clamp(
                2.5rem,
                11vw,
                4rem
            );

        line-height: 0.99;
    }


    .cb-hero-description {
        margin-top: 18px;

        font-size: 0.96rem;

        line-height: 1.65;
    }


    .cb-hero-actions {
        margin-top: 21px;
    }


    .cb-device-showcase {
        width: 100%;

        max-width: 100%;

        margin-top: 29px;
    }


    .cb-device-art {
        width: 100%;

        max-width: 100%;

        height: auto;
    }


    .cb-hero-highlights {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 8px;
    }

}


@media (max-width: 580px) {

    .cb-eyebrow {
        margin-bottom: 14px;

        font-size: 0.65rem;
    }


    .cb-hero-actions {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .cb-button {
        width: 100%;
    }


    .cb-quick-facts {
        width: 100%;

        gap: 4px;

        padding: 6px;
    }


    .cb-quick-fact {
        flex:
            1
            1
            auto;

        justify-content: center;
    }


    .cb-quick-divider {
        display: none;
    }


    .cb-device-showcase,
    .cb-device-stage,
    .cb-device-art {
        width: 100%;

        max-width: 100%;
    }

}


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

    body .reveal,
    body .reveal.reveal-left,
    body .reveal.reveal-right,
    body .reveal.reveal-scale {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .cb-device-stage:hover
    .cb-device-art {
        transform: none;
    }

}



/* =========================================================
   FEATURE SECTIONS
   One shared system for the five sections below the hero:
   workspace, import, create & edit, export and backups.
   ========================================================= */

.contacts-workspace-section,
.contact-import-section,
.contact-editor-section,
.contact-export-section,
.contact-backup-section {
    --fs-heading: #102036;
    --fs-text: rgba(52, 71, 95, 0.72);
    --fs-strong: rgba(25, 43, 66, 0.92);
    --fs-muted: rgba(52, 71, 95, 0.56);
    --fs-line: rgba(41, 87, 135, 0.11);
    --fs-card: rgba(255, 255, 255, 0.78);
    --fs-card-solid: #ffffff;
    --fs-chip: rgba(240, 246, 253, 0.95);
    --fs-accent: #397fc9;
    --fs-accent-soft: rgba(75, 145, 255, 0.10);
    --fs-shadow: 0 14px 34px rgba(43, 72, 105, 0.06);
    --fs-bg-a: #fbfdff;
    --fs-bg-b: #f3f8fd;

    --fs-gap: clamp(36px, 4.6vw, 72px);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(72px, 7.5vw, 112px) 0;

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

    background:
        linear-gradient(180deg, var(--fs-bg-a) 0%, var(--fs-bg-b) 100%);

    scroll-margin-top: 80px;
}


/* Alternate tone so each section reads as its own block */

.contact-import-section,
.contact-export-section {
    --fs-bg-a: #f2f7fd;
    --fs-bg-b: #eef4fb;
}


/* Soft pointer glow (positions set by vcardviewer.js) */

.contacts-workspace-section::before,
.contact-import-section::before,
.contact-editor-section::before,
.contact-export-section::before,
.contact-backup-section::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            560px circle at var(--fs-glow-x, 50%) var(--fs-glow-y, 40%),
            rgba(70, 157, 255, 0.11),
            rgba(92, 111, 255, 0.035) 38%,
            transparent 70%
        );
}

.contacts-workspace-section {
    --fs-glow-x: var(--workspace-pointer-x, 26%);
    --fs-glow-y: var(--workspace-pointer-y, 38%);
}

.contact-import-section {
    --fs-glow-x: var(--import-pointer-x, 74%);
    --fs-glow-y: var(--import-pointer-y, 38%);
}

.contact-editor-section {
    --fs-glow-x: var(--editor-pointer-x, 26%);
    --fs-glow-y: var(--editor-pointer-y, 38%);
}

.contact-export-section {
    --fs-glow-x: var(--export-pointer-x, 74%);
    --fs-glow-y: var(--export-pointer-y, 38%);
}

.contact-backup-section {
    --fs-glow-x: var(--backup-pointer-x, 26%);
    --fs-glow-y: var(--backup-pointer-y, 38%);
}


/* Decorative blobs are replaced by the glow above */

.contacts-workspace-decoration,
.contact-import-decoration,
.contact-editor-decoration,
.contact-export-decoration,
.contact-backup-decoration,
.contacts-workspace-media-glow,
.contact-import-media-glow,
.contact-editor-media-glow,
.contact-export-media-glow,
.contact-backup-media-glow {
    display: none;
}


/* =========================================================
   GRID LAYOUT
   Copy wrappers use display: contents so every block can be
   placed on one grid: intro beside the screenshot, detail
   rows full width underneath.
   ========================================================= */

.contacts-workspace-layout,
.contact-import-layout,
.contact-editor-layout,
.contact-export-layout,
.contact-backup-layout {
    display: grid;

    width: min(calc(100% - 40px), 1200px);
    max-width: none;
    margin-inline: auto;
    padding: 0;

    column-gap: var(--fs-gap);
    row-gap: 0;

    align-items: start;
}


.contacts-workspace-left,
.contacts-workspace-copy,
.contact-import-copy,
.contact-editor-copy,
.contact-export-copy,
.contact-backup-copy {
    display: contents;
}


/* Copy left, screenshot right */

.contact-import-layout,
.contact-export-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr auto auto auto;
    grid-template-areas:
        ".       media"
        "eyebrow media"
        "title   media"
        "desc    media"
        "panel   media"
        ".       media"
        "cards   cards"
        "flow    flow"
        "note    note";
}


/* Screenshot left, copy right */

.contact-editor-layout,
.contact-backup-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: 1fr auto auto auto auto 1fr auto auto auto;
    grid-template-areas:
        "media .      "
        "media eyebrow"
        "media title  "
        "media desc   "
        "media panel  "
        "media .      "
        "cards cards  "
        "flow  flow   "
        "note  note   ";
}


.contacts-workspace-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: 1fr auto auto auto auto 1fr auto auto auto;
    grid-template-areas:
        "media    .      "
        "media    eyebrow"
        "media    title  "
        "media    desc   "
        "media    panel  "
        "media    .      "
        "overview overview"
        "cards    cards  "
        "flow     flow   ";
}


/* Area assignments */

.contacts-workspace-section .cb-section-eyebrow,
.contact-import-section .cb-section-eyebrow,
.contact-editor-section .cb-section-eyebrow,
.contact-export-section .cb-section-eyebrow,
.contact-backup-section .cb-section-eyebrow {
    grid-area: eyebrow;
}

.contacts-workspace-title,
.contact-import-title,
.contact-editor-title,
.contact-export-title,
.contact-backup-title {
    grid-area: title;
}

.contacts-workspace-description,
.contact-import-description,
.contact-editor-description,
.contact-export-description,
.contact-backup-description {
    grid-area: desc;
}

.contacts-actions-strip,
.contact-import-scope,
.contact-editor-identity,
.contact-export-selection,
.contact-backup-protection {
    grid-area: panel;
}

.contacts-workspace-media,
.contact-import-media,
.contact-editor-media,
.contact-export-media,
.contact-backup-media {
    grid-area: media;
}

.contacts-panel-overview {
    grid-area: overview;
}

.contacts-workspace-feature-grid,
.contact-import-feature-grid,
.contact-editor-feature-grid,
.contact-export-format-grid,
.contact-backup-location-grid {
    grid-area: cards;
}

.contacts-sort-block,
.contact-import-workflow,
.contact-editor-company,
.contact-export-flow,
.contact-backup-flow {
    grid-area: flow;
}

.contact-editor-mode-strip,
.contact-backup-note {
    grid-area: note;
}


/* =========================================================
   INTRO COPY
   ========================================================= */

.cb-section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 10px;

    margin: 0 0 18px;

    color: var(--fs-accent, #397fc9);

    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.cb-section-eyebrow-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 10px;

    color: #ffffff;
    font-size: 0.82rem;

    background: linear-gradient(135deg, #4ca7ff, #577cf0);

    box-shadow: 0 9px 24px rgba(54, 126, 226, 0.20);
}


.contacts-workspace-title,
.contact-import-title,
.contact-editor-title,
.contact-export-title,
.contact-backup-title {
    max-width: 20ch;
    margin: 0;

    color: var(--fs-heading);

    font-size: clamp(2.1rem, 3.3vw, 3.15rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.04em;

    text-wrap: balance;
}


.contacts-workspace-title span,
.contact-import-title span,
.contact-editor-title span,
.contact-export-title span,
.contact-backup-title span {
    display: block;

    background: linear-gradient(105deg, #2f86e8 0%, #5b72f2 100%);
    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.contacts-workspace-description,
.contact-import-description,
.contact-editor-description,
.contact-export-description,
.contact-backup-description {
    max-width: 540px;
    margin: 18px 0 0;

    color: var(--fs-text);

    font-size: 1.04rem;
    line-height: 1.7;
}


/* =========================================================
   SCREENSHOTS
   ========================================================= */

.contacts-workspace-media,
.contact-import-media,
.contact-editor-media,
.contact-export-media,
.contact-backup-media {
    position: relative;

    align-self: center;

    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
    background: none;
    box-shadow: none;
}


.contacts-workspace-media img,
.contact-import-media img,
.contact-editor-media img,
.contact-export-media img,
.contact-backup-media img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;

    filter: drop-shadow(0 26px 40px rgba(28, 58, 96, 0.14));

    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}


.contacts-workspace-media:hover img,
.contact-import-media:hover img,
.contact-editor-media:hover img,
.contact-export-media:hover img,
.contact-backup-media:hover img {
    transform: translateY(-4px);
}


/* =========================================================
   INTRO PANEL (beside the screenshot)
   ========================================================= */

.contacts-actions-strip,
.contact-import-scope,
.contact-editor-identity,
.contact-export-selection,
.contact-backup-protection {
    margin-top: 28px;
    padding: 18px;

    border: 1px solid var(--fs-line);
    border-radius: 18px;

    background: var(--fs-card);
    box-shadow: var(--fs-shadow);

    backdrop-filter: blur(14px);
}


/* Shared heading row inside panels */

.contact-import-scope-label,
.contact-export-selection-heading,
.contacts-sort-heading,
.contact-editor-company-heading,
.contacts-actions-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-import-scope-label {
    display: block;
}

.contact-import-scope-label strong,
.contact-export-selection-heading strong,
.contacts-sort-heading strong,
.contact-editor-company-heading strong,
.contacts-actions-label strong,
.contact-editor-identity-copy strong,
.contact-backup-protection strong {
    display: block;

    color: var(--fs-strong);

    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.3;
}

.contact-import-scope-label span,
.contact-export-selection-heading span:not(.contact-export-selection-icon),
.contacts-sort-heading span:not(.contacts-sort-heading-icon),
.contact-editor-company-heading span:not(.contact-editor-company-icon),
.contacts-actions-label span {
    display: block;
    margin-top: 2px;

    color: var(--fs-muted);

    font-size: 0.84rem;
    line-height: 1.45;
}


/* Small gradient icon tile used across panels and cards */

.contact-export-selection-icon,
.contacts-sort-heading-icon,
.contact-editor-company-icon,
.contact-editor-identity-icon,
.contact-backup-protection-icon,
.contacts-workspace-feature-icon,
.contact-import-feature-icon,
.contact-editor-feature-icon,
.contact-export-format-icon,
.contact-backup-location-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    color: #ffffff;
    font-size: 0.95rem;

    background: linear-gradient(135deg, #4ca7ff, #577cf0);
    box-shadow: 0 8px 20px rgba(54, 126, 226, 0.20);
}


/* Workspace: contact actions */

.contacts-actions-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.contacts-actions-label {
    display: block;
}

.contacts-action-buttons {
    display: flex;
    gap: 8px;
}

.contacts-action-buttons span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid var(--fs-line);
    border-radius: 50%;

    color: var(--fs-accent);
    background: var(--fs-accent-soft);

    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.contacts-action-buttons span:hover {
    transform: translateY(-2px);

    color: #ffffff;
    background: linear-gradient(135deg, #4ca7ff, #577cf0);
}


/* Import: scope choices */

.contact-import-scope-options {
    display: grid;
    gap: 8px;

    margin-top: 14px;
}

.contact-import-scope-option {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 14px;

    border: 1px solid var(--fs-line);
    border-radius: 12px;

    background: var(--fs-chip);

    transition: border-color 160ms ease, background 160ms ease;
}

.contact-import-scope-option strong {
    display: block;

    color: var(--fs-strong);

    font-size: 0.88rem;
    font-weight: 700;
}

.contact-import-scope-option div span {
    display: block;

    color: var(--fs-muted);

    font-size: 0.8rem;
}

.contact-import-radio {
    position: relative;
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    border: 2px solid rgba(57, 127, 201, 0.35);
    border-radius: 50%;

    background: var(--fs-card-solid);
}

.contact-import-scope-option.is-selected {
    border-color: rgba(64, 145, 236, 0.40);
    background: var(--fs-accent-soft);
}

.contact-import-scope-option.is-selected .contact-import-radio {
    border-color: #3f8ef0;
}

.contact-import-scope-option.is-selected .contact-import-radio::after {
    content: "";

    position: absolute;
    inset: 3px;

    border-radius: 50%;

    background: #3f8ef0;
}


/* Export: selection chips, Workspace: sort chips,
   Editor: name / company chips */

.contact-export-selection-options,
.contacts-sort-options,
.contact-editor-name-tags,
.contact-editor-company-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-export-selection-options {
    margin-top: 14px;
}

.contact-export-selection-options span,
.contacts-sort-options span,
.contact-editor-name-tags span,
.contact-editor-company-fields span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 12px;

    border: 1px solid var(--fs-line);
    border-radius: 999px;

    color: var(--fs-strong);
    background: var(--fs-chip);

    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
}

.contact-export-selection-options span i,
.contacts-sort-options span i,
.contact-editor-company-fields span i {
    color: var(--fs-accent);
    font-size: 0.78rem;
}

.contact-export-selection-options span.is-selected {
    border-color: transparent;

    color: #ffffff;
    background: linear-gradient(135deg, #4ca7ff, #577cf0);
}

.contact-export-selection-options span.is-selected i {
    color: #ffffff;
}


/* Editor: identity */

.contact-editor-identity {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
}

.contact-editor-identity-copy p,
.contact-backup-protection p {
    margin: 4px 0 0;

    color: var(--fs-text);

    font-size: 0.88rem;
    line-height: 1.55;
}

.contact-editor-name-tags {
    grid-column: 2;
    margin-top: 8px;
}


/* Backup: protection */

.contact-backup-protection {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}


/* =========================================================
   FEATURE CARDS (full-width row)
   ========================================================= */

.contacts-workspace-feature-grid,
.contact-import-feature-grid,
.contact-editor-feature-grid,
.contact-export-format-grid,
.contact-backup-location-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-top: 14px;
}

.contact-import-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* First full-width row gets the space below the intro */

.contacts-panel-overview,
.contact-import-feature-grid,
.contact-editor-feature-grid,
.contact-export-format-grid,
.contact-backup-location-grid {
    margin-top: clamp(40px, 4.5vw, 64px);
}


.contacts-workspace-feature,
.contact-import-feature,
.contact-editor-feature,
.contact-export-format,
.contact-backup-location {
    display: flex;
    flex-direction: column;
    gap: 14px;

    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 20px;

    border: 1px solid var(--fs-line);
    border-radius: 18px;

    background: var(--fs-card);
    box-shadow: var(--fs-shadow);

    backdrop-filter: blur(14px);

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

.contact-import-feature {
    flex-direction: row;
    align-items: flex-start;
}

.contacts-workspace-feature:hover,
.contact-import-feature:hover,
.contact-editor-feature:hover,
.contact-export-format:hover,
.contact-backup-location:hover {
    transform: translateY(-3px);

    border-color: rgba(64, 145, 236, 0.24);
    box-shadow: 0 18px 38px rgba(43, 72, 105, 0.09);
}

.contacts-workspace-feature h3,
.contact-import-feature h3,
.contact-editor-feature h3,
.contact-export-format h3,
.contact-backup-location h3 {
    margin: 0;

    color: var(--fs-strong);

    font-size: 1rem;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.contacts-workspace-feature p,
.contact-import-feature p,
.contact-editor-feature p,
.contact-export-format p,
.contact-backup-location p {
    margin: 6px 0 0;

    color: var(--fs-text);

    font-size: 0.88rem;
    line-height: 1.55;
}


/* =========================================================
   DETAIL STRIPS (steps, panels, notes)
   ========================================================= */

.contacts-panel-overview,
.contacts-sort-block,
.contact-import-workflow,
.contact-editor-company,
.contact-editor-mode-strip,
.contact-export-flow,
.contact-backup-flow,
.contact-backup-note {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 14px;
    padding: 16px 20px;

    border: 1px solid var(--fs-line);
    border-radius: 18px;

    background: var(--fs-card);
    box-shadow: var(--fs-shadow);

    backdrop-filter: blur(14px);
}


/* Workspace: three-panel overview */

.contacts-panel-item,
.contact-import-step,
.contact-export-flow-step,
.contact-backup-flow-step,
.contact-editor-mode {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    gap: 12px;

    min-width: 0;
}

.contacts-panel-item strong,
.contact-import-step strong,
.contact-export-flow-step strong,
.contact-backup-flow-step strong,
.contact-editor-mode strong {
    display: block;

    color: var(--fs-strong);

    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.3;
}

.contacts-panel-item span:not(.contacts-panel-number),
.contact-import-step small,
.contact-export-flow-step small,
.contact-backup-flow-step small,
.contact-editor-mode small {
    display: block;
    margin-top: 2px;

    color: var(--fs-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* Numbered / icon badges inside strips */

.contacts-panel-number,
.contact-import-step > span,
.contact-export-flow-step > span,
.contact-backup-flow-step > span,
.contact-editor-mode > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    color: var(--fs-accent);
    background: var(--fs-accent-soft);

    font-size: 0.85rem;
    font-weight: 800;
}

.contacts-panel-divider,
.contact-editor-mode-divider {
    flex: 0 0 1px;
    align-self: stretch;

    background: var(--fs-line);
}

.contact-import-arrow,
.contact-export-flow-arrow,
.contact-backup-flow-arrow {
    flex: 0 0 auto;

    color: rgba(57, 127, 201, 0.45);
    font-size: 0.85rem;
}


/* Workspace: sort block, Editor: company */

.contacts-sort-block,
.contact-editor-company {
    justify-content: space-between;
    flex-wrap: wrap;
}

.contacts-sort-heading,
.contact-editor-company-heading {
    flex: 0 0 auto;
}

.contacts-sort-options,
.contact-editor-company-fields {
    justify-content: flex-end;
}


/* Backup note */

.contact-backup-note {
    padding: 14px 20px;
}

.contact-backup-note i {
    color: var(--fs-accent);
}

.contact-backup-note p {
    margin: 0;

    color: var(--fs-text);

    font-size: 0.88rem;
    line-height: 1.5;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .contacts-workspace-section,
html[data-theme="dark"] .contact-import-section,
html[data-theme="dark"] .contact-editor-section,
html[data-theme="dark"] .contact-export-section,
html[data-theme="dark"] .contact-backup-section {
    --fs-heading: #f7faff;
    --fs-text: rgba(220, 230, 242, 0.70);
    --fs-strong: rgba(239, 246, 255, 0.92);
    --fs-muted: rgba(220, 230, 242, 0.52);
    --fs-line: rgba(255, 255, 255, 0.09);
    --fs-card: rgba(255, 255, 255, 0.045);
    --fs-card-solid: #0e1a2a;
    --fs-chip: rgba(255, 255, 255, 0.05);
    --fs-accent: #84c7ff;
    --fs-accent-soft: rgba(84, 165, 255, 0.12);
    --fs-shadow: none;
    --fs-bg-a: #09111c;
    --fs-bg-b: #0a1422;
}

html[data-theme="dark"] .contact-import-section,
html[data-theme="dark"] .contact-export-section {
    --fs-bg-a: #0b1523;
    --fs-bg-b: #0c1828;
}

html[data-theme="dark"] .contacts-workspace-title span,
html[data-theme="dark"] .contact-import-title span,
html[data-theme="dark"] .contact-editor-title span,
html[data-theme="dark"] .contact-export-title span,
html[data-theme="dark"] .contact-backup-title span {
    background-image: linear-gradient(105deg, #6cc0ff 0%, #8d9bff 100%);
}

html[data-theme="dark"] .contacts-workspace-media img,
html[data-theme="dark"] .contact-import-media img,
html[data-theme="dark"] .contact-editor-media img,
html[data-theme="dark"] .contact-export-media img,
html[data-theme="dark"] .contact-backup-media img {
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.45));
}

html[data-theme="dark"] .contact-import-scope-option.is-selected {
    border-color: rgba(108, 192, 255, 0.35);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .contacts-workspace-feature-grid,
    .contact-editor-feature-grid,
    .contact-export-format-grid,
    .contact-backup-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contacts-sort-options,
    .contact-editor-company-fields {
        justify-content: flex-start;
    }
}


@media (max-width: 960px) {

    .contacts-workspace-layout,
    .contact-import-layout,
    .contact-editor-layout,
    .contact-export-layout,
    .contact-backup-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "eyebrow"
            "title"
            "desc"
            "media"
            "panel"
            "overview"
            "cards"
            "flow"
            "note";
    }

    .contacts-workspace-title,
    .contact-import-title,
    .contact-editor-title,
    .contact-export-title,
    .contact-backup-title {
        max-width: 22ch;
    }

    .contacts-workspace-media,
    .contact-import-media,
    .contact-editor-media,
    .contact-export-media,
    .contact-backup-media {
        margin-top: 32px;
    }

    .contacts-panel-overview,
    .contact-import-feature-grid,
    .contact-editor-feature-grid,
    .contact-export-format-grid,
    .contact-backup-location-grid {
        margin-top: 14px;
    }

    .contacts-actions-strip,
    .contact-import-scope,
    .contact-editor-identity,
    .contact-export-selection,
    .contact-backup-protection {
        margin-top: 24px;
    }
}


@media (max-width: 720px) {

    .contacts-panel-overview,
    .contact-import-workflow,
    .contact-export-flow,
    .contact-backup-flow,
    .contact-editor-mode-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .contacts-panel-divider,
    .contact-editor-mode-divider {
        flex-basis: auto;
        height: 1px;
    }

    .contact-import-arrow,
    .contact-export-flow-arrow,
    .contact-backup-flow-arrow {
        align-self: flex-start;
        margin-left: 10px;

        transform: rotate(90deg);
    }

    .contact-import-feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


@media (max-width: 580px) {

    .contacts-workspace-section,
    .contact-import-section,
    .contact-editor-section,
    .contact-export-section,
    .contact-backup-section {
        padding: 60px 0;
    }

    .contacts-workspace-layout,
    .contact-import-layout,
    .contact-editor-layout,
    .contact-export-layout,
    .contact-backup-layout {
        width: calc(100% - 32px);
    }

    .contacts-workspace-feature-grid,
    .contact-editor-feature-grid,
    .contact-export-format-grid,
    .contact-backup-location-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contacts-workspace-feature,
    .contact-editor-feature,
    .contact-export-format,
    .contact-backup-location {
        flex-direction: row;
        align-items: flex-start;
    }

    .contacts-actions-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-editor-identity {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-editor-name-tags {
        grid-column: 1;
    }

    .contact-export-selection-options span,
    .contacts-sort-options span,
    .contact-editor-company-fields span {
        white-space: normal;
    }
}


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

    .contacts-workspace-media:hover img,
    .contact-import-media:hover img,
    .contact-editor-media:hover img,
    .contact-export-media:hover img,
    .contact-backup-media:hover img,
    .contacts-workspace-feature:hover,
    .contact-import-feature:hover,
    .contact-editor-feature:hover,
    .contact-export-format:hover,
    .contact-backup-location:hover {
        transform: none;
    }
}


/* =========================================================
   FINAL APP STORE CTA
   Same structure as the StreamCamera download card,
   in the vCard Viewer blue palette.
   ========================================================= */

.cb-final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(72px, 7vw, 110px) 0;

    border-top: 1px solid rgba(41, 87, 135, 0.08);

    background: linear-gradient(180deg, #f6f9fd, #fbfcfe);
}

.cb-final-cta > .container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 40px), 1160px);
    max-width: none;
    margin-inline: auto;
}


/* Card */

.cb-final-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(24px, 3.5vw, 48px);
    align-items: center;

    padding: clamp(28px, 4vw, 48px);

    border: 1px solid rgba(41, 87, 135, 0.10);
    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(98, 181, 255, 0.20),
            rgba(255, 255, 255, 0.84) 47%,
            rgba(101, 124, 255, 0.12)
        );

    box-shadow: 0 28px 70px rgba(43, 72, 105, 0.09);

    backdrop-filter: blur(18px);
}

.cb-final-glow {
    position: absolute;
    z-index: -1;

    border-radius: 999px;

    pointer-events: none;

    filter: blur(75px);
}

.cb-final-glow-blue {
    width: 360px;
    height: 360px;
    left: -140px;
    top: -180px;

    background: rgba(76, 167, 255, 0.20);
}

.cb-final-glow-indigo {
    width: 330px;
    height: 330px;
    right: -120px;
    bottom: -190px;

    background: rgba(101, 124, 255, 0.16);
}


/* App icon */

.cb-final-icon-wrap {
    position: relative;
    flex: 0 0 auto;

    width: clamp(94px, 9vw, 122px);
    height: clamp(94px, 9vw, 122px);

    border-radius: 25%;

    filter: drop-shadow(0 20px 26px rgba(28, 58, 96, 0.22));

    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cb-final-icon-wrap:hover {
    transform: translateY(-4px) rotate(-2deg) scale(1.025);
}

.cb-final-icon-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    object-fit: cover;
}


/* Copy */

.cb-final-copy {
    min-width: 0;
}

.cb-final-kicker {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 11px;

    color: #2f74c0;

    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.cb-final-dot {
    display: block;
    flex: 0 0 7px;

    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: #3f8ef0;

    box-shadow: 0 0 0 4px rgba(63, 142, 240, 0.14);
}

.cb-final-copy h2 {
    max-width: 670px;
    margin: 0;

    color: #102036;

    font-size: clamp(2.1rem, 4vw, 4rem);
    font-weight: 830;
    line-height: 0.99;
    letter-spacing: -0.052em;
}

.cb-final-copy h2 span {
    color: transparent;

    background: linear-gradient(105deg, #1f6fd0 0%, #3f8ef0 48%, #5b6cf0 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.cb-final-copy > p {
    max-width: 680px;
    margin: 15px 0 0;

    color: rgba(47, 58, 74, 0.70);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* Feature pills */

.cb-final-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 16px;
}

.cb-final-specs span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 31px;
    padding: 0 9px;

    border: 1px solid rgba(41, 87, 135, 0.10);
    border-radius: 999px;

    color: rgba(25, 43, 66, 0.82);
    background: rgba(255, 255, 255, 0.64);

    font-size: 0.64rem;
    font-weight: 700;
}

.cb-final-specs i {
    color: #3f8ef0;

    font-size: 0.62rem;
}


/* Action */

.cb-final-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;

    min-width: 224px;
}

.cb-final-store-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    min-width: 224px;
    padding: 13px 20px;

    border: 1px solid rgba(76, 150, 255, 0.40);
    border-radius: 15px;

    color: #ffffff;
    background: linear-gradient(135deg, #4ca7ff, #577cf0);

    text-decoration: none;

    box-shadow: 0 17px 42px rgba(54, 126, 226, 0.24);

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.cb-final-store-button:hover {
    color: #ffffff;

    transform: translateY(-3px);

    background: linear-gradient(135deg, #5db2ff, #6689f5);

    box-shadow: 0 24px 52px rgba(54, 126, 226, 0.32);
}

.cb-final-store-button:focus-visible {
    outline: 3px solid rgba(76, 150, 255, 0.42);
    outline-offset: 4px;
}

.cb-final-store-button > i {
    font-size: 1.72rem;
}

.cb-final-store-button > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    line-height: 1.04;
}

.cb-final-store-button small {
    font-size: 0.62rem;
    font-weight: 580;

    opacity: 0.8;
}

.cb-final-store-button strong {
    font-size: 1rem;
    font-weight: 820;
}


/* Platform notes */

.cb-final-devices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px 10px;

    max-width: 260px;
}

.cb-final-devices span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: rgba(42, 52, 66, 0.67);

    font-size: 0.62rem;
    font-weight: 660;
}

.cb-final-devices i {
    color: #3f8ef0;

    font-size: 0.61rem;
}


/* Dark theme */

html[data-theme="dark"] .cb-final-cta {
    border-top-color: rgba(255, 255, 255, 0.07);

    background: linear-gradient(180deg, #09111c 0%, #070d16 100%);
}

html[data-theme="dark"] .cb-final-card {
    border-color: rgba(255, 255, 255, 0.11);

    background:
        linear-gradient(
            135deg,
            rgba(76, 167, 255, 0.09),
            rgba(255, 255, 255, 0.035) 47%,
            rgba(101, 124, 255, 0.08)
        );

    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .cb-final-icon-wrap {
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.32));
}

html[data-theme="dark"] .cb-final-kicker {
    color: #84c7ff;
}

html[data-theme="dark"] .cb-final-copy h2 {
    color: #f7faff;
}

html[data-theme="dark"] .cb-final-copy h2 span {
    background-image: linear-gradient(105deg, #a8dcff 0%, #6cc0ff 44%, #8d9bff 100%);
}

html[data-theme="dark"] .cb-final-copy > p {
    color: rgba(220, 230, 242, 0.69);
}

html[data-theme="dark"] .cb-final-specs span {
    border-color: rgba(255, 255, 255, 0.09);

    color: rgba(239, 246, 255, 0.82);
    background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .cb-final-specs i,
html[data-theme="dark"] .cb-final-devices i {
    color: #84c7ff;
}

html[data-theme="dark"] .cb-final-devices span {
    color: rgba(220, 230, 242, 0.64);
}


/* Responsive */

@media (max-width: 980px) {

    .cb-final-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 24px 28px;
    }

    .cb-final-action {
        grid-column: 1 / -1;

        width: 100%;

        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .cb-final-store-button {
        width: auto;
    }

    .cb-final-devices {
        justify-content: flex-start;
        max-width: none;
    }
}


@media (max-width: 680px) {

    .cb-final-cta {
        padding: 62px 0;
    }

    .cb-final-cta > .container {
        width: calc(100% - 28px);
    }

    .cb-final-card {
        grid-template-columns: 1fr;
        gap: 22px;

        padding: 25px;

        border-radius: 23px;

        text-align: center;
    }

    .cb-final-icon-wrap {
        margin-inline: auto;
    }

    .cb-final-kicker {
        justify-content: center;
    }

    .cb-final-copy h2,
    .cb-final-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .cb-final-specs {
        justify-content: center;
    }

    .cb-final-action {
        grid-column: auto;

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

    .cb-final-store-button {
        width: 100%;
        max-width: 340px;
    }

    .cb-final-devices {
        justify-content: center;
    }
}


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

    .cb-final-icon-wrap:hover,
    .cb-final-store-button:hover {
        transform: none;
    }
}


/* =========================================================
   CLOUDBENCH FEATURE SECTIONS

   Added for the CloudBench product page. The hero, highlight
   and final-CTA rules above come from the shared product
   layout; these cover the screenshot sections in between.
   ========================================================= */

.cb-feature-section {
    --cb-blue: #4b91ff;
    --cb-cyan: #62c5ff;
    --cb-indigo: #657cff;

    --cb-f-heading: #102036;

    --cb-f-text:
        rgba(52, 71, 95, 0.72);

    --cb-f-line:
        rgba(16, 32, 54, 0.10);

    --cb-f-card:
        rgba(255, 255, 255, 0.72);

    position: relative;

    padding: 92px 0;

    overflow: hidden;
}

html[data-theme="dark"]
.cb-feature-section {
    --cb-f-heading: #f7faff;

    --cb-f-text:
        rgba(220, 230, 242, 0.72);

    --cb-f-line:
        rgba(150, 180, 220, 0.16);

    --cb-f-card:
        rgba(20, 30, 46, 0.56);
}

.cb-feature-section.cb-feature-tinted::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(75, 145, 255, 0.10),
            transparent 58%
        );

    pointer-events: none;
}

.cb-feature-grid {
    display: grid;

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

    gap: 56px;

    align-items: center;

    position: relative;
}

.cb-feature-grid.cb-feature-reverse
.cb-feature-copy {
    order: 2;
}

.cb-feature-title {
    font-size:
        clamp(1.75rem, 2.6vw, 2.4rem);

    font-weight: 700;

    line-height: 1.18;

    letter-spacing: -0.015em;

    color: var(--cb-f-heading);

    margin: 18px 0 16px;
}

.cb-feature-description {
    font-size: 1.03rem;

    line-height: 1.68;

    color: var(--cb-f-text);

    margin-bottom: 26px;
}

.cb-feature-list {
    list-style: none;

    padding: 0;
    margin: 0;

    display: grid;

    gap: 14px;
}

.cb-feature-list li {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    font-size: 0.97rem;

    line-height: 1.55;

    color: var(--cb-f-text);
}

.cb-feature-list i {
    flex: none;

    margin-top: 3px;

    font-size: 0.92rem;

    color: var(--cb-blue);
}

.cb-feature-list strong {
    color: var(--cb-f-heading);

    font-weight: 650;
}

.cb-feature-shot {
    position: relative;

    border-radius: 20px;

    overflow: hidden;

    border:
        1px solid var(--cb-f-line);

    box-shadow:
        0 26px 70px
        rgba(16, 38, 76, 0.18);

    background: var(--cb-f-card);
}

.cb-feature-shot img {
    display: block;

    width: 100%;
    height: auto;
}

.cb-trust-grid {
    display: grid;

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

    gap: 20px;
}

.cb-trust-card {
    padding: 26px 24px;

    border-radius: 18px;

    border:
        1px solid var(--cb-f-line);

    background: var(--cb-f-card);
}

.cb-trust-card i {
    font-size: 1.15rem;

    color: var(--cb-blue);

    margin-bottom: 14px;

    display: block;
}

.cb-trust-card h3 {
    font-size: 1.05rem;

    font-weight: 650;

    color: var(--cb-f-heading);

    margin-bottom: 8px;
}

.cb-trust-card p {
    font-size: 0.94rem;

    line-height: 1.6;

    color: var(--cb-f-text);

    margin: 0;
}

@media (max-width: 991px) {

    .cb-feature-section {
        padding: 64px 0;
    }

    .cb-feature-grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 34px;
    }

    .cb-feature-grid.cb-feature-reverse
    .cb-feature-copy {
        order: 0;
    }

    .cb-trust-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}