/* ==========================================================================
   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: 36px; }
    /* 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: 56px;
        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.6;
        font-weight: 400;
        color: #c9c7d6;
        max-width: 340px;
        margin: 0 auto 20px;
    }

    /* All three badges on every device, stacked one per line at their own size -
       three across squeezes them to ~90px on a small phone, which reads as noise. */
    .dt-mhero-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
    }

    .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: 46px;
        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;
        /* the phone overlaps the store badge once pulled up, so let clicks through */
        pointer-events: none;
        margin-top: -80px;
    }

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

    .dt-mhero-available {
        font-size: 1rem;
        font-weight: 400;
        color: #d5d3e0;
        margin: -50px 0 18px;
    }

    /* round platform icons - everything except the badge platform above */
    .dt-mhero-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        /* the discs overlap in the design; the negative margin lives on every disc
           (below) rather than here so the row stays centred whichever one is hidden */
        gap: 0;
        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;
        /* each disc slides 4px under its neighbours - later ones paint on top, so
           the ring reads as crossing into the previous circle. The fill must stay
           opaque or the overlap shows through. */
        margin: 0 -4px;
        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: 13% !important;
    }

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