/* ==========================================================================
   Desktop Hero Redesign (Landing v5.2)
   New, self-contained styles. Prefixed with .dt- so nothing existing is touched.
   NOTE: text selectors are scoped under .dt-hero (two classes) so they win over
   the global `.welcome h1 { font-size:4.8rem }` rule in landing.css.
   ========================================================================== */

.dt-hero {
    position: relative;
    z-index: 0;
    background: transparent;
    padding: 24px 0 30px;
}

/* Full-bleed dark background: breaks out of the Bootstrap .container to span the
   whole viewport width, and extends upward behind the header (z-index:-1 keeps it
   behind the nav and hero content while covering the .welcome nebula). */
.dt-hero::before {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: calc(100% + 220px);
    background: url('https://dz5tyoxl8h44g.cloudfront.net/xp-background-nlp.png') center top / cover no-repeat, #0c0620;
    z-index: -1;
    pointer-events: none;
}

/* Left separator line: the native .welcome::before (at left:100px) paints as the
   section's first child, so our full-bleed dark .dt-hero::before covers it inside
   this section (while .welcome::after, the right line, paints last and stays on
   top). Replace it with a real full-height line on .welcome that paints above the
   dark background — same coordinate system as .welcome::after, so both sides span
   the whole section identically and form matching intersections at every boundary.
   The native .welcome::before (left line) normally paints behind our dark
   .dt-hero::before; lifting it to z-index:2 makes it show on top — and, unlike a
   separate element, it keeps ALL of landing.css's responsive positioning
   (100px > 30px at <=1500px, hidden at <=767px), staying in lockstep with the
   right line (.welcome::after) at every breakpoint. */
.welcome::before {
    z-index: 2;
}

/* The full-bleed .dt-hero::before uses 100vw (which includes the scrollbar width),
   so clip any resulting horizontal overflow at the section without affecting
   vertical overflow or creating a scroll container. */
.welcome {
    overflow-x: clip;
}

/* Navbar spacing (index page, all breakpoints) */
.welcome header .navbar {
    margin-top: 0px;
}

.dt-hero-inner {
    max-width: 1880px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

/* ---------------- FIRST HALF : heading block ---------------- */
.dt-hero-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0 8px;
    /* keep the heading + CTA buttons stacked above the overlapping mockup so they
       stay clickable (mockup uses a negative margin and covers this area) */
    position: relative;
    z-index: 3;
}

.dt-hero .dt-hero-title {
    /* first line only: fixed 33px (2.0625rem @ 16px root). The "Now on Desktop"
       accent span below keeps the previous responsive clamp. */
    font-size: 2.0rem;
    line-height: 1.2;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 18px;
    letter-spacing: 0.2px;
    /* reuse the existing inline SVG inner-shadow filter used by the old hero h1 */
    filter: url(#h1-inner-shadow-strong);
}

.dt-hero-title-accent {
    /* unchanged size — the h1 is now a fixed 33px, so restate the old clamp here */
    font-size: clamp(1.68rem, 2.4vw, 2.63rem);
    background: linear-gradient(90deg, #8ea2ff 0%, #b9a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #9db0ff;
}

.dt-hero .dt-hero-subtitle {
    font-size: 1.48rem;
    font-weight: 500;
    color: #4ea8ff;
    line-height: 1.3;
    margin: 0 0 2px;
    filter: url(#h3-inner-shadow-top);
}

.dt-hero .dt-hero-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    font-weight: 400;
    color: #c9c7d6;
    max-width: 620px;
    margin: 0 auto 25px;
}

/* ---- Buttons ---- */
.dt-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    /* tighter gap below the buttons so the "Desktop Experience..." line sits up
       closer to the heading block */
    margin-bottom: 20px;
}

/* Default (no-JS / Windows & other desktop): show Windows, hide Mac.
   The inline toggle script in Index.cshtml adjusts this per user agent. */
.dt-hero-cta .dt-cta-mac {
    display: none;
}

/* Mac-desktop swap: the inline script tags the CTA row instead of writing inline
   styles, so the mobile media query can still show both buttons. */
.dt-hero-cta.is-mac .dt-cta-win { display: none; }

.dt-hero-cta.is-mac .dt-cta-mac { display: inline-flex; }

/* "Available for ..." button labels are mobile-only (see the <768px block) */
.dt-btn-label-m { display: none; }

/* Mobile-only line break inside the desktop-promo title. It lives in the
   hero_desktop_title strings (home-multilingual.js) because the i18n layer owns
   that markup; display:none makes a <br> stop breaking the line. */
.dt-mbr { display: none; }

/* The "Voice of Freedom" hero replaces this one below 768px */
.dt-mhero { display: none; }

.dt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1;
    padding: 12px 17px;
    border-radius: 22px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    white-space: nowrap;
}

.dt-btn-primary {
    background: linear-gradient(90deg, #4b52ff 0%, #6a52ff 100%);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 8px 24px rgba(75, 82, 255, 0.35);
}

    .dt-btn-primary:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(75, 82, 255, 0.5);
    }

.dt-btn-outline {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    border: 1px solid #8ea6ff;
}

    .dt-btn-outline:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-color: #a9bcff;
    }

.dt-btn-primary .fa-apple {
    font-size: 1.05rem;
}

.dt-hero .dt-hero-experience {
    font-size: 0.90rem;
    font-weight: 500;
    color: #8ea6ff;
    line-height: 1.3;
    margin: 0;
    filter: url(#h3-inner-shadow-top);
    margin-bottom: 20px
}

/* ---------------- Panel : mockup + stores ---------------- */
.dt-panel {
    position: relative;
    border-radius: 0;
    background: transparent;
    border: none;
    padding: 0 20px 22px;
    margin-top: 0;
}

.dt-mockup-wrap {
    text-align: center;
    /* pull up so the mockup sits right below the heading (its glow overlaps) */
    margin-top: -80px;
    /* the image is non-interactive; its (mostly transparent) box overlaps the CTA
       buttons after being pulled up, so let clicks pass through to the buttons */
    pointer-events: none;
}

.dt-mockup {
    /* 88% (not 100%) so the mockup renders a little smaller at every width, not
       just on screens wide enough to hit the max-width cap. The cap is the same
       88% of the previous 1820px. */
    width: 84%;
    max-width: 1600px;
    height: auto;
    display: inline-block;
}

.dt-panel .dt-available-label {
    font-size: 1rem;
    font-weight: 500;
    color: white;
    margin: -30px 0 20px;
}

/* ---- store button row ---- */
.dt-store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}

.dt-store-link {
    display: inline-block;
    transition: transform 0.2s ease;
}

    .dt-store-link:hover {
        transform: translateY(-2px);
    }

    .dt-store-link img {
        height: 44px;
        width: auto;
        display: block;
    }

/* ---------------- SECOND HALF : cards ---------------- */
.dt-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    margin-top: 44px;
    margin-bottom: 80px;
}

.dt-card {
    flex: 1 1 360px;
    max-width: 440px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* NIST card */
.dt-card .dt-card-intro {
    font-size: 0.92rem;
    color: #d8d6e6;
    margin: 0 0 12px;
}

.dt-nist-logo {
    max-width: 140px;
    height: auto;
    margin-bottom: 14px;
}

.dt-card .dt-nist-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #98cfff;
    margin: 0 0 12px;
    line-height: 1.3;
}

.dt-card .dt-nist-desc {
    font-size: 0.88rem;
    color: #b9b7c8;
    margin: 0 0 22px;
}

.dt-nist-btn {
    margin-top: auto;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 500;
    border-color: #8090f7;
}

/* XAVE card : wordmark logo + supporting text only (no heading) */
.dt-xave-icon {
    width: auto;
    height: 40px;
    margin-bottom: 18px;
}

.dt-xave-badge {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    margin-bottom: 18px;
}

.dt-card .dt-xave-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
    max-width: 320px;
    margin: 0 0 24px;
}

.dt-xave-stores {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

    /* equal-width columns so all three fit on a single line */
    .dt-xave-stores .dt-store-link-sm {
        flex: 1 1 0;
        min-width: 0;
    }

.dt-store-link-sm img {
    height: auto;
    width: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ---- Large screens ---- */
@media (min-width: 1500px) {
    /* smaller than the base 84% so the store badges clear the fold */
    .dt-mockup { width: 77%; }
    .dt-mockup-wrap { margin-top: -110px; }
}

/* ---- 1400px-1499.98px only: the Bootstrap container steps up to 1320px at
   1400px, so the mockup renders wider here than below 1400px, but this range
   sits just under the 1500px rule above and was falling back to the base
   -80px — leaving a gap under the "Desktop Experience..." line. ---- */
@media (min-width: 1400px) and (max-width: 1499.98px) {
    /* smaller mockup (was the base 84%) so "Also Available on" + the store
       badges clear the fold on short viewports at this width. At ~2:1 every 10%
       of width taken off the image is ~60px of height gained for the badges. */
    .dt-mockup { width: 55%; }
    /* the transparent top band shrank with the image, so ease the pull-up from
       -110px by the same ratio to keep the tagline clear */
    .dt-mockup-wrap { margin-top: -80px; }
}

/* ---- 1200px-1399.98px only ---- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .dt-mockup-wrap { margin-top: -95px; }
}

/* ==========================================================================
   Heading + store-badge size ladder
   The h1 (2rem), its "Now on Desktop" accent and the store badges (48px) were
   one size for every screen from 576px up. Step them down per breakpoint so
   they take less vertical room as the viewport narrows. Each range sets its
   own values only.
   ========================================================================== */

/* large desktops */
@media (min-width: 1400px) {
    .dt-hero .dt-hero-title { font-size: 1.85rem; }
    .dt-hero .dt-hero-title-accent { font-size: clamp(1.5rem, 2vw, 2.2rem); }
    .dt-panel .dt-available-label {
        font-size: 0.95rem;
        margin: -20px 0 20px;
    }
    .dt-store-row .dt-store-link img { height: 38px; }
}

/* small desktops */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .dt-hero .dt-hero-title { font-size: 1.75rem; }
    .dt-hero .dt-hero-title-accent { font-size: 1.65rem; }
    .dt-panel .dt-available-label { font-size: 0.92rem; }
    .dt-store-row .dt-store-link img { height: 42px; }
}

/* laptops */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .dt-hero .dt-hero-title { font-size: 1.65rem; }
    .dt-hero .dt-hero-title-accent { font-size: 1.55rem; }
    .dt-panel .dt-available-label {
        font-size: 0.9rem;
        margin: -15px 0 20px;
    }
    .dt-store-row .dt-store-link img { height: 40px; }
}

/* tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dt-hero .dt-hero-title { font-size: 1.55rem; }
    .dt-hero .dt-hero-title-accent { font-size: 1.45rem; }
    .dt-panel .dt-available-label { font-size: 0.88rem; margin: -15px 0 20px; }
    .dt-store-row .dt-store-link img { height: 38px; }
}

/* large phones (the accent line is already hidden below 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .dt-hero .dt-hero-title { font-size: 1.45rem; }
    .dt-panel .dt-available-label { font-size: 0.86rem; }
    .dt-store-row .dt-store-link img { height: 36px; }
}

@media (max-width: 991.98px) {
    .dt-hero .dt-hero-subtitle { font-size: 1.2rem; }
    .dt-hero .dt-hero-experience { font-size: 0.9rem; }
    .dt-cards-row { margin-top: -30px; }
    /* the mockup is narrow at this width, so its transparent top band is short —
       -20px left a visible gap under the "Desktop Experience..." line */
    .dt-mockup-wrap { margin-top: -60px; }
    /* Vertical separator lines are a desktop-only accent — hide both on mobile/tablet */
    .welcome::before,
    .welcome::after { display: none; }
    /* Collapsible hamburger menu grows the header and pushes .dt-hero (and its
       -220px dark ::before) down, re-exposing the old nebula behind the header.
       Give the header its own solid dark bg so the expanded menu stays covered. */
    .welcome > header { background-color: #0c0620; }
}

/* ==========================================================================
   MOBILE VIEW (<768px)
   Two structural differences from desktop:
     1. the hero leads with the "Voice of Freedom" block (.dt-mhero) instead of
        the desktop promo;
     2. the desktop promo (.dt-desktop-block) is relocated below the
        certification cards by the script after .sliderSec in Index.cshtml, and
        is only shown once it lands (.dt-desktop-block-moved).
   Because the block leaves .dt-hero when it moves, every rule scoped
   ".dt-hero .x" has to be restated as ".dt-desktop-block .x" down here - still
   two classes, so it keeps beating ".welcome h1" from landing.css.
   ========================================================================== */
@media (max-width: 767.98px) {
    .dt-mhero { display: block; }
    .dt-desktop-block { display: none; }
    /* flex (not block) so the mobile order below can rearrange the children */
    .dt-desktop-block.dt-desktop-block-moved { display: flex; }

    /* ---------------- Mobile hero : Voice of Freedom ---------------- */
    .dt-mhero-logo {
        display: block;
        width: 52px;
        height: auto;
        margin: 4px auto 16px;
    }

    .dt-mhero .dt-mhero-title {
        font-size: 1.85rem;
        font-weight: 400;
        line-height: 1.15;
        color: #ffffff;
        margin: 0 0 14px;
        letter-spacing: 0.2px;
        /* the same inner-shadow filter the desktop h1 uses */
        filter: url(#h1-inner-shadow-strong);
    }

    .dt-mhero-accent {
        display: block;
        font-size: 3.6rem;
        font-weight: 500;
        line-height: 1.05;
        background: linear-gradient(90deg, #8ea2ff 0%, #b9a6ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #9db0ff;
    }

    .dt-mhero .dt-mhero-subtitle {
        font-size: 1.05rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 1.4;
        margin: 0 0 16px;
        /* plain text - no inner-shadow filter here, just the two coloured words */
    }

    .dt-mh-private { color: #8090f7; }
    .dt-mh-encrypted { color: #16b3bd; }

    .dt-mhero .dt-mhero-desc {
        font-size: 0.8rem;
        line-height: 1.3;
        font-weight: 400;
        color: #c9c7d6;
        max-width: 340px;
        margin: 0 auto 20px;
    }

    /* One badge only - the store for the visitor's own device. The rest of the
       platforms live in the "Also Available on" icon row right below it. */
    .dt-mhero-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    /* the two badges that are not the visitor's platform drop out; with no
       attribute yet (script not run / unknown UA) the App Store badge stands,
       matching the icon row's default */
    .dt-mhero:not([data-platform]) .dt-mstore-android,
    .dt-mhero:not([data-platform]) .dt-mstore-apk,
    .dt-mhero[data-platform="ios"] .dt-mstore-android,
    .dt-mhero[data-platform="ios"] .dt-mstore-apk,
    .dt-mhero[data-platform="android"] .dt-mstore-ios,
    .dt-mhero[data-platform="android"] .dt-mstore-apk,
    .dt-mhero[data-platform="apk"] .dt-mstore-ios,
    .dt-mhero[data-platform="apk"] .dt-mstore-android { display: none; }

    .dt-mhero-cta .dt-mstore {
        display: block;
        transition: transform 0.2s ease;
    }

    .dt-mhero-cta .dt-mstore:hover { transform: translateY(-2px); }

    .dt-mhero-cta .dt-mstore img {
        height: 52px;
        width: auto;
        display: block;
    }

    /* the phone fills ~60% of the image (transparent sides), so scale it past the
       container and centre it; the overflow is clipped by .welcome overflow-x:clip */
    .dt-mhero-mockup-wrap {
        text-align: center;
        pointer-events: none;
        margin-top: -60px;
    }

    .dt-mhero-mockup {
        display: block;
        width: 150%;
        max-width: none;
        margin-left: -25%;
        height: auto;
    }

    /* sits directly under the single store badge now, above the mockup */
    .dt-mhero-available {
        font-size: 1rem;
        font-weight: 400;
        color: #d5d3e0;
        margin: 30px 0 14px;
    }

    /* round platform icons - everything except the badge platform above */
    .dt-mhero-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    /* Bigger, flatter discs than a plain icon button - the brand marks inside sit
       at their own colours (Play stays four-colour, Windows brand blue, APK the
       lavender document outline), so the disc itself stays neutral. */
    .dt-micon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #191926;
        border: 1.5px solid rgba(160, 168, 255, 0.20);
        color: #ffffff;
        font-size: 1.45rem;
        text-decoration: none;
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

        .dt-micon:hover {
            z-index: 1;
            transform: translateY(-2px);
            background: #23233a;
            color: #ffffff;
        }

    /* one optical size for all three marks: the SVG boxes are sized by height and
       the Windows glyph is tuned to match, so no mark reads bigger than the others */
    .dt-micon-svg {
        width: 29px;
        height: 29px;
        display: block;
    }

    /* the APK document is drawn with currentColor, so tint it here */
    .dt-micon-apk { color: #b9b7f0; }
    /* taller box than the square marks - the document shape is portrait, and the
       viewBox is trimmed to the stroked artwork so its ink matches Play/Windows */
    .dt-micon-svg-apk { width: 32px; height: 32px; }

        /* a right-pointing triangle is mass-heavy on the left, so geometric centring
           reads as off-centre; nudge it back to the optical centre */
        .dt-micon-svg-play { transform: translateX(1.5px); }

        /* SVG text does not inherit the page font by default - without this the
           APK label falls back to the browser serif */
        .dt-micon-svg-apk text {
            font-family: inherit;
            letter-spacing: 0.2px;
        }
    .dt-micon-win { color: #45a6f5; font-size: 1.85rem; }

    /* the badge platform drops out of this row */
    .dt-mhero:not([data-platform]) .dt-micon-ios,
    .dt-mhero[data-platform="ios"] .dt-micon-ios,
    .dt-mhero[data-platform="android"] .dt-micon-android,
    .dt-mhero[data-platform="apk"] .dt-micon-apk { display: none; }
    /* ---------------- Desktop promo, relocated below the cards ----------------
       The mobile order is heading > tagline > mockup > buttons, but the markup
       keeps the buttons inside .dt-hero-head (above the mockup) for desktop.
       display:contents lifts the head children into this flex column so they can
       be ordered around the mockup without touching the DOM. */
    .dt-desktop-block-moved {
        position: relative;
        z-index: 0;
        flex-direction: column;
        align-items: center;
        padding: 32px 0 8px;
        text-align: center;
    }

        .dt-desktop-block-moved .dt-hero-head { display: contents; }
        .dt-desktop-block-moved .dt-hero-title { order: 1; }
        .dt-desktop-block-moved .dt-hero-experience { order: 2; }

        .dt-desktop-block-moved .dt-panel {
            order: 3;
            width: 100%;
        }

        .dt-desktop-block-moved .dt-hero-cta {
            order: 4;
            width: 75%;
        }

        /* no background of its own: the block stays inside .dt-hero, whose
           full-bleed dark ::before already covers it. */

    .dt-desktop-block .dt-mbr { display: inline; }

    .dt-desktop-block .dt-hero-title {
        font-size: 2.8rem;
        font-weight: 400;
        line-height: 1.25;
        color: #ffffff;
        margin: 0 0 10px;
        letter-spacing: 0.2px;
        filter: url(#h1-inner-shadow-strong);
    }

    .dt-desktop-block .dt-hero-title-accent {
        display: block;
        font-size: 3.2rem;
        font-weight: 600;
        margin-top: 8px;
    }

    .dt-desktop-block .dt-hero-experience {
        font-size: 1.05rem;
        font-weight: 500;
        color: #4ea8ff;
        line-height: 1.4;
        /* narrow enough to break over two lines, as the design does */
        max-width: 250px;
        margin: 0 auto -40px;
        filter: url(#h3-inner-shadow-top);
    }

    /* the subtitle, description and store row belong to the mobile hero instead */
    .dt-desktop-block .dt-hero-subtitle,
    .dt-desktop-block .dt-hero-desc,
    .dt-desktop-block .dt-available-label,
    .dt-desktop-block .dt-store-row { display: none; }

    /* both download buttons, MacOS first; browser login is desktop-only. The
       .is-mac override has to be beaten here - on mobile both buttons show. */
    .dt-hero-cta .dt-cta-mac,
    .dt-hero-cta.is-mac .dt-cta-mac { display: inline-flex; order: 1; }
    .dt-hero-cta .dt-cta-win,
    .dt-hero-cta.is-mac .dt-cta-win { display: inline-flex; order: 2; }
    .dt-hero-cta .dt-cta-login { display: none; }

    /* the shorter mobile wording replaces "Download for ..." */
    #dtBtnWinLabel,
    #dtBtnMacLabel { display: none; }
    .dt-btn-label-m { display: inline; }

    .dt-desktop-block .dt-hero-cta {
        gap: 14px;
        margin-bottom: 90px;
    }

        .dt-desktop-block .dt-btn {
            font-size: 0.95rem;
            gap: 10px;
            padding: 14px 24px;
            max-width: 330px;
            /* fully rounded ends whatever the button height works out to */
            border-radius: 999px;
        }

            .dt-desktop-block .dt-btn i {
                font-size: 1.15rem;
            }

        /* two distinct button colours in the design: MacOS keeps the indigo
           gradient, Windows takes the lighter blue */
        .dt-desktop-block .dt-cta-win {
            background: linear-gradient(90deg, #2f9dee 0%, #47b4ff 100%);
            box-shadow: 0 8px 24px rgba(55, 164, 240, 0.32);
        }

            .dt-desktop-block .dt-cta-win:hover {
                box-shadow: 0 12px 30px rgba(55, 164, 240, 0.45);
            }

    /* the combo mockup fits the column here - no negative pull, this block has no
       overlapping glow to hide at this size */
    .dt-desktop-block .dt-panel { padding: 0; }
    .dt-desktop-block .dt-mockup-wrap { margin-top: 0; margin-bottom: 18px; }

    /* the design runs the mockup much larger than the column, letting it bleed off
       the right edge; .welcome{overflow-x:clip} crops the overflow */
    .dt-desktop-block .dt-mockup {
        display: block;
        width: 228%;
        max-width: none;
        margin-left: -11%;
        height: auto;
    }
}

@media (max-width: 575.98px) {
    .dt-hero { padding: 24px 0 5px; }
    .welcome header .navbar { margin-bottom: 5px; }

    /* mobile hero type ladder for small phones */
    .dt-mhero .dt-mhero-title { font-size: 1.6rem; }
    .dt-mhero-accent { font-size: 3.5rem; }
    .dt-mhero .dt-mhero-subtitle { font-size: 1.2rem; }

    /* full-width download buttons in the relocated desktop block */
    .dt-btn { width: 100%; max-width: 320px; padding: 12px 22px; }
    .dt-desktop-block .dt-hero-title { font-size: 1.6rem; }
    .dt-desktop-block .dt-hero-title-accent { font-size: 2.25rem; }

    /* XAVE row: keep 3 equal columns, preserve aspect ratio (no forced height) */
    .dt-xave-stores .dt-store-link-sm img { width: 100%; height: auto; }
    .dt-card { padding: 24px 20px; }
    .dt-card .dt-nist-title { font-size: 1.15rem; }
    .dt-card .dt-xave-text { font-size: 1.05rem; }
}

/* Override the ≤768px header logo width (was 80% in index.css) -> 90% */
@media (max-width: 768px) {
    .welcome > header .navbar .navbar-brand .logo-header-combined {
        width: 90%;
        margin-bottom: 5px;
    }
}

/* Desktop header logo at full width (index.css sets 55% from 769px up) */
@media (min-width: 769px) {
    .welcome > header .navbar .navbar-brand .logo-header-combined {
        width: 55%;
    }
}

/* ==========================================================================
   Floating pills (index page, <=500px where index.css makes them position:fixed)
   The mobile hero already carries all three store badges, so the Download pill
   would be redundant on that first screen: only "Upgrade to Gold" shows there,
   in the lower slot. Once the hero scrolls out of view the inline script tags
   <body class="dt-show-download"> and Download appears under it, with the pair
   sitting lower than the original 16%/10% positions.
   ========================================================================== */
@media (max-width: 500px) {
    /* first screen: Upgrade only, taking the slot Download used to have */
    .xpal-store-links .floating-sec-1 {
        bottom: 5% !important;
    }

    .xpal-store-links .floating-sec:not(.floating-sec-1) {
        display: none;
    }

    /* scrolled past the hero: both pills, Download below Upgrade */
    body.dt-show-download .xpal-store-links .floating-sec-1 {
        bottom: calc(5% + 60px) !important;
    }

    body.dt-show-download .xpal-store-links .floating-sec:not(.floating-sec-1) {
        display: block;
        bottom: 5%;
    }
}

/* Mobile view: show BOTH store icons in the "We DO NOT collect any Data" section.
   footer.js writes inline display styles per user agent (iOS would see only the App
   Store icon, Android only Play), so forcing them on needs !important. */
@media (max-width: 767.98px) {
    /* Equal width/height so border-radius:50% gives a circle - the shared padding
       (17px 18px) around glyphs of differing heights made these ellipses. */
    .data_not_collected .store-icons .ios-link-footer,
    .data_not_collected .store-icons .android-link-footer {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 66px;
        height: 66px;
        padding: 0;
    }

        /* the small offset disc behind each glyph would peek out once the anchor
           itself is the circle */
        .data_not_collected .store-icons > a::after {
            display: none;
        }

        .data_not_collected .store-icons > a img {
            width: 30px;
            height: auto;
        }

            /* nudge the Play triangle to its optical centre */
            .data_not_collected .store-icons .android-link-footer img {
                margin-left: 5px;
                margin-bottom: 0;
            }
}

/* Mobile view: the "App Privacy / Data Not Collected" artwork already fills its
   column, but the PNG carries wide transparent margins so the card reads small.
   Scale it past the column and clip the (transparent) overflow at the wrapper so
   the page never gains a horizontal scrollbar. */
@media (max-width: 767.98px) {
    /* the wrapper is justify-content:end, so an oversized image would hang off to
       the left - centre it here and let the overflow split evenly instead */
    .data_not_collected .col-inner.app-privacy-img {
        overflow-x: clip;
        justify-content: center;
    }

    .data_not_collected .col-inner.app-privacy-img img {
        width: 122%;
        max-width: none;
        margin-left: 0;
    }
}

/* Flicker Mode artwork (mobile view). modified.css steps this image 80% (<=320px)
   / 70% (321-375px) / 52% (up to 500px) - the last step leaves it noticeably small
   on a normal phone, so raise just that range and restate the centring. */
@media (max-width: 767.98px) {
    /* Size the IMG, not just the wrapper: the wrapper was already 92% wide but the
       image only filled ~87% of it. min() keeps it just inside the viewport on a
       phone and inside the Bootstrap container on a wide tablet. */
    .feature-two .flicker-mobile-image,
    .feature-two .flicker-main-image {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

        .feature-two .flicker-mobile-image img,
        .feature-two .flicker-main-image img {
            display: block;
            width: min(92vw, 460px);
            max-width: none;
            height: auto;
            margin-left: calc((min(92vw, 460px) - 100%) / -2);
        }
}

/* Mobile view: drop the App Store / Google Play badges from the footer - the hero
   already carries all three download badges. index.css and style.css both reveal
   .security-mobile1 with display:flex !important at <=768px, so this has to match
   that breakpoint and out-weigh them (this file loads last). Desktop keeps its own
   .store-icons pair untouched. */
@media (max-width: 768px) {
    footer .security-mobile1 {
        display: none !important;
    }
}

/* Keep "Sanitizer"" together on mobile. The mark now sits inside the same span
   (no whitespace between word and <sub>, so there is no break opportunity); this
   rule is the belt-and-braces guard if that markup is ever reflowed. */
@media (max-width: 767.98px) {
    .distiller-head .distiller-head-pink {
        white-space: nowrap;
    }

        /* gold label for Upgrade to Gold, white for Download */
        .xpal-store-links .floating-sec-1 .floating-label {
            color: #e7cf8f !important;
        }
}

/* "View List >" under Secure Development Practices (mobile certification section).
   Targeted by id because .award-anchor is shared with the other certification
   buttons and only this one takes this treatment. */
a#awards-10c.award-anchor {
    display: inline-block;
    margin-top: 20px;
    color: #ffffff;
    font-size: 11px;
    text-decoration: none;
    border: 1px solid #8090F7;
    padding: 3px 43px;
    border-radius: 50px;
    position: relative;
    top: -6px;
    margin-left: 80px;
}

/* ==========================================================================
   Tablet certification row (501-767px, section.awards-section-tablet)
   The four DEKRA pills share one flex row (.dekra-anchor-main-tablet, gap 20px)
   which is too narrow for "View Certification 2026 >" - the label wrapped and the
   year escaped the pill border. Keep each label on one line and let the row flow
   onto a second line instead. Only this range is affected.
   ========================================================================== */
@media (min-width: 501px) and (max-width: 767.98px) {
    .awards-section-tablet .award-anchor-mobile-dekra,
    .awards-section-tablet .award-anchor-tablet-dekra {
        white-space: nowrap;
    }

    /* 2x2 grid rather than a wrapping flex row: the row indent came from
       .award-first-anchor{margin-left:52px} on the FIRST pill only, so a wrapped
       fourth pill fell outside the indent. Indent the block instead and all four
       line up under the paragraph, matching the CASA pair above. */
    .awards-section-tablet .dekra-anchor-main-tablet {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 8px 12px;
        margin-left: 52px;
    }

        .awards-section-tablet .award-first-anchor {
            margin-left: 0;
        }
}

/* ==========================================================================
   Floating actions redesign (<=500px): each action is one horizontal glass
   pill - round icon on the left, label on the right. The gold/blue pill chrome
   from index.css + landing.css is stripped off (both cloudfront icons already
   carry their own disc); the dark tint + blur on .floating-inner IS the button.
   Both pills share one width so their right edges and icons line up.
   ========================================================================== */
@media (max-width: 500px) {
    .xpal-store-links .floating-sec,
    .xpal-store-links .floating-sec.floating-sec-1 {
        /* flush to the viewport edge, as in the design - the pill is a tab hanging
           off the right side, not a free-floating rounded chip */
        right: 0;
        /* the glass lives on .floating-inner, so the anchor itself is bare */
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        text-align: left;
    }

    /* the pill itself */
    .xpal-store-links .floating-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        /* beats the markup's Bootstrap .justify-content-center: centring pushed the
           shorter "Download" row right while the wider two-line "Upgrade to Gold"
           row pinned left, so the two icons never lined up */
        justify-content: flex-start !important;
        gap: 5px;
        /* shared width: "Upgrade to Gold" wraps to two lines inside it rather than
           making that pill wider than Download */
        width: 135px;
        /* tight around the icon - in the design the disc nearly fills the pill
           height, so only the label side gets real padding */
        padding: 0px 0px 0px 0px;
        /* left end only: the right end is cut off by the viewport edge */
        border-radius: 29px 0 0 29px;
        /* dark tint, not a light frosted wash - the page behind is near-black */
        background: rgba(10, 7, 26, 0.62);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-right: 0;
    }

    /* round icon, left of the label */
    .xpal-store-links .apk-icon-container {
        flex: 0 0 auto;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 50% !important;
    }

        /* beats landing.css's .floating-sec-1 img{width:64%} and index.css's
           .floating-sec img{width:100%} */
        .xpal-store-links .apk-icon-container img {
            display: block;
            width: 32px !important;
            height: 32px !important;
            object-fit: contain;
            margin: 0 !important;
            padding: 0 !important;
        }

    .xpal-store-links .floating-label {
        text-align: left;
        color: #fff !important;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
    }
}

/* The " on "Photo & Video Sanitizer" only (321-375px). Scoped to the distiller
   heading - .td-mark-g is shared with the Terminate/Wipeout marks. */
@media (min-width: 321px) and (max-width: 375px) {
    .distiller-head .distiller-head-pink sub.td-mark-g.line-hgt000 {
        right: 10px;
        top: 10px;
        font-size: 16px;
    }
}