:root {
    --blue: #1677ff;
    --blue-bright: #42a5ff;
    --blue-dark: #0b3f98;
    --blue-deep: #062b70;
    --blue-soft: #eaf5ff;
    --cyan-soft: #dff5ff;
    --text: #10213f;
    --muted: #60708a;
    --white: #ffffff;
    --surface: #f7fbff;
    --border: #d9eaff;
    --shadow-soft: 0 18px 45px rgba(14, 91, 196, 0.10);
    --shadow-strong: 0 24px 60px rgba(14, 91, 196, 0.18);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 10% 10%, rgba(66, 165, 255, 0.12), transparent 26%),
        radial-gradient(circle at 90% 18%, rgba(22, 119, 255, 0.10), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.container {
    width: min(1160px, calc(100% - 32px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.90);
    border-bottom: 1px solid rgba(217, 234, 255, 0.95);
    backdrop-filter: blur(16px);
}

.header-inner {
    min-height: 76px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--blue-dark);
}

.brand img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(22, 119, 255, 0.20);
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.main-nav a {
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: var(--blue);
}

.language-switcher {
    display: flex;
    gap: 5px;
    padding: 4px;
    background: var(--blue-soft);
    border-radius: 999px;
}

.language-switcher a {
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.language-switcher a.active {
    color: var(--blue);
    background: var(--white);
    box-shadow: 0 5px 14px rgba(22, 119, 255, 0.14);
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 86px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(247,251,255,0.95)),
        url("/static/images/twitter_banner.webp") center/cover no-repeat;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.86) 44%, rgba(255,255,255,0.34) 100%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 72px;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(55,163,255,0.28), rgba(22,119,255,0.05) 62%, transparent 72%);
    filter: blur(10px);
}

.hero-logo {
    position: relative;
    z-index: 2;
    width: min(390px, 90%);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid rgba(255,255,255,0.88);
    box-shadow:
        0 30px 70px rgba(10, 62, 150, 0.22),
        0 0 0 1px rgba(22,119,255,0.10);
}

.hero-content {
    max-width: 650px;
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.hero h1 {
    margin: 0;
    max-width: 680px;
    font-size: clamp(44px, 6.4vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--blue-deep);
}

.lead {
    max-width: 680px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 14px;
    font-weight: 900;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

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

.button.primary {
    color: var(--white);
    background: linear-gradient(135deg, var(--blue), var(--blue-bright));
    box-shadow: var(--shadow-strong);
}

.button.secondary {
    color: var(--blue-dark);
    background: rgba(255,255,255,0.90);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.hero-points span {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--blue-dark);
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(180, 216, 255, 0.85);
    font-size: 13px;
    font-weight: 800;
}

.section {
    padding: 78px 0;
}

.section-soft {
    background:
        linear-gradient(180deg, rgba(240, 248, 255, 0.88), rgba(255, 255, 255, 0.96));
    border-top: 1px solid rgba(217, 234, 255, 0.82);
    border-bottom: 1px solid rgba(217, 234, 255, 0.82);
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(34px, 4.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--blue-deep);
}

.section-copy {
    margin: 18px 0 0;
    max-width: 520px;
    color: var(--muted);
    line-height: 1.7;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-card {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    padding: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,255,0.94));
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.feature-card::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66,165,255,0.18), transparent 70%);
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(22,119,255,0.28);
    box-shadow: var(--shadow-strong);
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 26px;
    border-radius: 15px;
    color: var(--white);
    background: linear-gradient(135deg, var(--blue), var(--blue-bright));
    box-shadow: 0 14px 28px rgba(22,119,255,0.20);
    font-size: 20px;
    font-weight: 900;
}

.feature-card h3 {
    margin: 0 0 12px;
    font-size: 23px;
    color: var(--blue-deep);
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.feature-card a {
    position: absolute;
    left: 28px;
    bottom: 26px;
    z-index: 2;
    color: var(--blue);
    font-weight: 900;
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
}

.faq-heading {
    position: sticky;
    top: 116px;
}

.faq-list {
    display: grid;
    gap: 14px;
}

details {
    padding: 20px 22px;
    background: rgba(255,255,255,0.94);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(16, 33, 63, 0.06);
}

summary {
    cursor: pointer;
    font-weight: 900;
    color: var(--blue-deep);
}

details p {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.info-section {
    padding-top: 26px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.info-card {
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,247,255,0.94));
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
}

.info-number {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.info-card h3 {
    margin: 0 0 10px;
    color: var(--blue-deep);
    font-size: 20px;
}

.info-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.site-footer {
    margin-top: 70px;
    padding: 42px 0;
    background: linear-gradient(180deg, #0b3f98, #062b70);
    color: rgba(255,255,255,0.92);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 32px;
    align-items: start;
}

.footer-brand {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-brand img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.72);
}

.footer-brand strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
    letter-spacing: 0.05em;
}

.footer-brand p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
}

.footer-links,
.footer-meta {
    display: grid;
    gap: 10px;
    font-size: 14px;
}

.footer-links a {
    color: rgba(255,255,255,0.86);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-meta {
    color: rgba(255,255,255,0.68);
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 980px) {
    .main-nav {
        display: none;
    }

    .header-inner {
        grid-template-columns: 1fr auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .hero-visual {
        order: 2;
    }

    .hero-content {
        order: 1;
        max-width: 760px;
    }

    .hero-logo {
        width: min(330px, 82vw);
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .faq-heading {
        position: static;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(100% - 24px, 1160px);
    }

    .site-header {
        position: static;
    }

    .header-inner {
        min-height: 68px;
        gap: 12px;
    }

    .brand {
        font-size: 15px;
    }

    .brand img {
        width: 36px;
        height: 36px;
    }

    .language-switcher a {
        padding: 7px 9px;
        font-size: 12px;
    }

    .hero {
        padding: 66px 0 58px;
    }

    .hero h1 {
        font-size: clamp(40px, 13vw, 58px);
    }

    .lead {
        font-size: 17px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero-points {
        gap: 8px;
    }

    .section {
        padding: 58px 0;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* COMPACT HERO OVERRIDE 17.06.2026 */
.hero {
    padding: 62px 0 58px;
    background:
        radial-gradient(circle at 8% 48%, rgba(66,165,255,0.16), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(22,119,255,0.10), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
}

.hero::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.38), rgba(255,255,255,0.08));
}

.hero-grid {
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    gap: 52px;
}

.hero-visual {
    justify-content: flex-start;
    transform: translateX(-18px);
}

.hero-glow {
    width: 300px;
    height: 300px;
    background:
        radial-gradient(
            circle,
            rgba(55,163,255,0.20),
            rgba(22,119,255,0.04) 62%,
            transparent 72%
        );
}

.hero-logo {
    width: min(305px, 82%);
    opacity: 0.88;
    filter: saturate(0.88) brightness(1.06);
    border-width: 7px;
    box-shadow:
        0 24px 55px rgba(10,62,150,0.16),
        0 0 0 1px rgba(22,119,255,0.08);
}

.hero-content {
    max-width: 690px;
}

.hero h1 {
    max-width: 650px;
    font-size: clamp(42px, 5.2vw, 66px);
    line-height: 1.04;
}

.lead {
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.62;
}

.hero-actions {
    margin-top: 27px;
}

.hero-points {
    margin-top: 20px;
}

/* =========================================================
   CLEAN DESKTOP BACKGROUND + HERO FOUNDATION 26.06.2026
   Replaces old 20-21.06 desktop/background/hero experiments.

   Final accepted desktop foundation:
   - one monolith body background
   - transparent header/hero/sections
   - right-side hero text
   - centered Explore title over 4 desktop cards
   - desktop card image grid
   - mobile-specific behavior remains controlled by later clean blocks
   ========================================================= */

html,
body {
    min-height: 100%;
    margin: 0;
    background-color: #dcebff !important;
}

body {
    background-image: url("/static/images/dropcodeshub-site-bg.webp?v=clean-desktop-foundation-26-06-1") !important;
    background-size: cover !important;
    background-position: center -22px !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.site-header,
header,
.hero,
main,
.section-soft,
section,
.content-section,
.cards-section,
.explore-section {
    background: transparent !important;
    background-image: none !important;
}

.site-header {
    position: relative !important;
    z-index: 30 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.site-header::before,
.site-header::after,
header::before,
header::after,
.hero::before,
.hero::after,
.section-soft::before,
.section-soft::after,
.explore-section::before,
.explore-section::after,
.cards-section::before,
.cards-section::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

.hero-visual,
.hero-glow,
.hero-logo {
    display: none !important;
}

.hero {
    min-height: 640px !important;
    padding: 58px 0 54px !important;
    overflow: visible !important;
}

.hero-grid {
    min-height: 560px !important;
    display: grid !important;
    grid-template-columns: 49% 51% !important;
    align-items: center !important;
    gap: 28px !important;
}

.hero-content,
.hero-copy {
    grid-column: 2 !important;
    max-width: 660px !important;
    width: 100% !important;
    justify-self: start !important;
    text-align: left !important;
    transform: translateX(-55px) !important;
    padding-left: 0 !important;
}

.hero h1 {
    max-width: 660px !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(48px, 4.1vw, 74px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    font-weight: 700 !important;
    white-space: normal !important;
}

html[lang="es-MX"] .hero h1 {
    font-size: clamp(42px, 3.72vw, 66px) !important;
    line-height: 1.06 !important;
    max-width: 640px !important;
}

.hero p,
.hero .lead {
    max-width: 590px !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

.hero-points,
.hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

.section-soft {
    padding-top: 4px !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    overflow: visible !important;
}

.section-soft .container {
    position: relative !important;
    z-index: 1 !important;
}

.section-heading,
.section-soft .section-heading {
    max-width: 1180px !important;
    width: min(1180px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.section-heading h2,
.section-soft h2,
.explore-section h2,
.faq-section h2 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.card-image-grid,
.feature-grid.card-image-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;

    position: relative !important;
    left: 50% !important;
    width: min(1180px, calc(100vw - 40px)) !important;
    max-width: none !important;
    transform: translateX(-50%) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.image-card,
.feature-grid.card-image-grid .image-card {
    display: block !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 1px solid rgba(19, 73, 150, 0.12) !important;
    box-shadow: 0 14px 34px rgba(31, 81, 160, 0.12) !important;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease !important;
    text-decoration: none !important;
}

.image-card:hover,
.feature-grid.card-image-grid .image-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(22,119,255,0.28) !important;
    box-shadow: 0 18px 42px rgba(31, 81, 160, 0.18) !important;
}

.image-card img,
.image-card .desktop-card-image,
.feature-grid.card-image-grid .image-card .desktop-card-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.card,
details,
.faq-item,
.info-card {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Tablet safety. Phone portrait/landscape are controlled by later clean blocks. */
@media (max-width: 980px) {
    body {
        background-size: 150% auto !important;
        background-position: center top !important;
    }

    .hero {
        min-height: auto !important;
        padding: 42px 0 50px !important;
    }

    .hero-grid {
        display: block !important;
        min-height: auto !important;
    }

    .hero-content,
    .hero-copy {
        grid-column: auto !important;
        transform: none !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .card-image-grid,
    .feature-grid.card-image-grid {
        left: auto !important;
        width: 100% !important;
        transform: none !important;
        gap: 18px !important;
    }
}


/* =========================================================
   CLEAN MOBILE PORTRAIT CARDS 26.06.2026
   Replaces old 21-23.06 mobile card experiments.

   Final accepted mobile portrait mode:
   - 2 columns
   - square PNG cards
   - no HTML text overlay
   - image fills the tile
   - landscape mobile is controlled later by the landscape block
   ========================================================= */

.mobile-card-content {
    display: none;
}

@media (max-width: 600px) and (orientation: portrait) {
    .feature-grid.card-image-grid,
    .card-image-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: calc(100vw - 32px) !important;
        max-width: 390px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        gap: 12px !important;

        align-items: start !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    .feature-grid.card-image-grid .image-card,
    .card-image-grid .image-card {
        display: block !important;
        position: relative !important;

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

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 1 / 1 !important;

        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;

        border-radius: 24px !important;
        overflow: hidden !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: 0 10px 24px rgba(31, 81, 160, 0.14) !important;

        text-decoration: none !important;
    }

    .feature-grid.card-image-grid .image-card::before,
    .feature-grid.card-image-grid .image-card::after,
    .card-image-grid .image-card::before,
    .card-image-grid .image-card::after {
        content: none !important;
        display: none !important;
    }

    .feature-grid.card-image-grid .image-card .desktop-card-image,
    .card-image-grid .image-card .desktop-card-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

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

        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;

        object-fit: fill !important;
        object-position: center center !important;

        border-radius: 24px !important;
        transform: none !important;
        margin: 0 !important;

        pointer-events: none !important;
    }

    .feature-grid.card-image-grid .mobile-card-content,
    .feature-grid.card-image-grid .mobile-card-icon-wrap,
    .feature-grid.card-image-grid .mobile-card-icon,
    .feature-grid.card-image-grid .mobile-card-title,
    .feature-grid.card-image-grid .mobile-card-description,
    .feature-grid.card-image-grid .mobile-card-cta,
    .card-image-grid .mobile-card-content,
    .card-image-grid .mobile-card-icon-wrap,
    .card-image-grid .mobile-card-icon,
    .card-image-grid .mobile-card-title,
    .card-image-grid .mobile-card-description,
    .card-image-grid .mobile-card-cta {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}


/* =========================================================
   CLEAN MOBILE PORTRAIT FOUNDATION 26.06.2026
   Replaces old 24.06 mobile portrait background/header/button experiments.

   Keeps:
   - portrait background image
   - compact portrait header
   - Open Drop Hub button
   - language switcher
   - hidden duplicate hero CTA on portrait mobile
   ========================================================= */

.mobile-header-hub-button {
    display: none;
}

.mobile-header-hub-button,
.hero-actions .telegram-button {
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    height: 38px !important;
    min-height: 38px !important;

    padding: 0 14px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #1f7cff, #35b7ff) !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.22) !important;
}

.mobile-header-hub-button:hover,
.mobile-header-hub-button:active,
.hero-actions .telegram-button:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.mobile-header-hub-button .telegram-button-icon,
.hero-actions .telegram-button .telegram-button-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex: 0 0 16px !important;
}

.mobile-header-hub-button svg,
.hero-actions .telegram-button svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    fill: currentColor !important;
}

@media (max-width: 980px) and (orientation: portrait) {
    html,
    body {
        overflow-x: hidden !important;
    }

    body {
        background-image: url("/static/images/mobile-portrait-bg.webp?v=clean-portrait-foundation-26-06-1") !important;
        background-size: 100% auto !important;
        background-position: center 0 !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: #dcebff !important;
    }

    .site-header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        overflow: visible !important;
    }

    .site-header .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 42px !important;
        overflow: visible !important;
    }

    .site-header .brand {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header .main-nav {
        display: none !important;
    }

    .site-header .mobile-header-hub-button {
        display: inline-flex !important;
        position: static !important;
        margin: 0 auto 0 0 !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: max-content !important;
        max-height: 38px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .site-header .language-switcher {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
    }

    .site-header .language-switcher a {
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero {
        padding-top: 54px !important;
        padding-bottom: 34px !important;
        min-height: auto !important;
    }

    .hero-copy {
        text-align: center !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero h1 {
        font-size: clamp(26px, 6.8vw, 32px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;
        max-width: 310px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    .hero .lead {
        font-size: 14px !important;
        line-height: 1.5 !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero .hero-actions {
        display: none !important;
    }
}


/* =========================================================
   FINAL RESPONSIVE OVERRIDES CLEAN CONSOLIDATED 26.06.2026
   Google 3 visual foundation cleanup.

   This block replaces accumulated experimental override patches.
   It keeps the final accepted behavior for:
   - mobile portrait
   - desktop header hub button
   - footer Telegram icon
   - FAQ/info cleanup
   - mobile landscape header and 4x2 card layout
   ========================================================= */


/* ---------- Shared Telegram icon animation ---------- */

@keyframes telegramIconPulseStrong25 {
    0% {
        transform: scale(0.88);
        opacity: 0.84;
    }
    50% {
        transform: scale(1.24);
        opacity: 1;
    }
    100% {
        transform: scale(0.88);
        opacity: 0.84;
    }
}

.hero-actions .telegram-button .telegram-button-icon,
.mobile-header-hub-button .telegram-button-icon,
.footer-brand-title-link .footer-brand-telegram-icon {
    animation-name: telegramIconPulseStrong25 !important;
    animation-duration: 1.65s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    transform-origin: center center !important;
    will-change: transform, opacity !important;
}

.hero-actions .telegram-button .telegram-button-icon svg,
.mobile-header-hub-button .telegram-button-icon svg,
.footer-brand-title-link .footer-brand-telegram-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    fill: currentColor !important;
}


/* ---------- Global cleanup ---------- */

.faq-heading .eyebrow {
    display: none !important;
}

.info-card .info-number {
    display: none !important;
}

.info-card h3 {
    margin-top: 0 !important;
}

.hero-badges,
.hero-badge-row,
.hero-badges-row,
.hero-pills,
.hero-pill-row,
.hero-chips,
.hero-chip-row,
.hero-tags,
.hero-tag-row,
.hero-trust,
.hero-trust-row,
.hero-proof,
.hero-proof-row,
.hero-micro-points,
.hero-mini-points,
.hero-highlights,
.hero-support,
.hero-support-row,
.hero-cta-support,
.hero-cta-meta,
.hero-meta-row,
.hero-feature-tags,
.hero-feature-row {
    display: none !important;
}


/* ---------- Footer brand Telegram link/icon ---------- */

.footer-brand-title-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: inherit !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.footer-brand-title-link strong {
    display: inline-block !important;
    line-height: 1 !important;
}

.footer-brand-title-link .footer-brand-telegram-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: #229ED9 !important;
    position: relative !important;
    top: -2px !important;
    line-height: 0 !important;
}

.footer-brand-title-link:hover,
.footer-brand-title-link:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.92 !important;
}


/* ---------- Mobile portrait final foundation ---------- */

@media (max-width: 980px) and (orientation: portrait) {
    body {
        background-image: url("/static/images/mobile-portrait-bg.webp?v=clean-portrait-26-06-1") !important;
        background-size: 100% auto !important;
        background-position: center 0 !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: #dcebff !important;
    }

    html[lang="es-MX"] .hero h1 {
        font-size: clamp(26px, 6.8vw, 32px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;
        max-width: 310px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }
}


/* ---------- Desktop header hub button ---------- */

@media (min-width: 981px) {
    .site-header {
        position: relative !important;
        overflow: visible !important;
    }

    .site-header,
    .site-header .container,
    .site-header .header-inner,
    .site-header .nav-shell,
    .site-header .navbar,
    .site-header .topbar {
        overflow: visible !important;
    }

    .site-header .brand,
    .site-header .site-brand,
    .site-header .brand-wrap,
    .site-header .brand-lockup,
    .site-header .brand-logo,
    .site-header .brand-mark,
    .site-header .brand-copy,
    .site-header .header-brand,
    .site-header .header-logo,
    .site-header .logo-wrap,
    .site-header .top-rated-badge,
    .site-header .brand-kicker,
    .site-header .brand-title {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header .mobile-header-hub-button,
    .site-header a.mobile-header-hub-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        position: absolute !important;
        left: 24px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;

        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 13px !important;
        box-sizing: border-box !important;
        border-radius: 999px !important;
        aspect-ratio: auto !important;

        white-space: nowrap !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .site-header .mobile-header-hub-button span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    .site-header .mobile-header-hub-button > span:not(.telegram-button-icon) {
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
    }

    .site-header .mobile-header-hub-button .telegram-button-icon {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        flex: 0 0 16px !important;
    }

    .site-header .language-switcher {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .site-header .language-switcher a {
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero-actions {
        display: none !important;
    }

    .desktop-header-hub-button {
        display: none !important;
    }
}


/* ---------- Mobile landscape foundation ---------- */

@media (max-width: 980px) and (orientation: landscape) {
    html,
    body {
        overflow-x: hidden !important;
    }

    body {
        background-image: url("/static/images/mobile-portrait-bg.webp?v=clean-landscape-26-06-1") !important;
        background-size: 100vw auto !important;
        background-position: center 0 !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: #dcebff !important;
    }

    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        overflow: visible !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .site-header .container,
    .site-header .header-inner,
    .site-header .nav-shell,
    .site-header .navbar,
    .site-header .topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 42px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-header .brand,
    .site-header .site-brand,
    .site-header .brand-wrap,
    .site-header .brand-lockup,
    .site-header .brand-logo,
    .site-header .brand-mark,
    .site-header .brand-copy,
    .site-header .header-brand,
    .site-header .header-logo,
    .site-header .logo-wrap,
    .site-header .top-rated-badge,
    .site-header .brand-kicker,
    .site-header .brand-title {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header nav,
    .site-header .nav,
    .site-header .nav-links,
    .site-header .desktop-nav,
    .site-header .main-nav {
        display: none !important;
    }

    .site-header .mobile-header-hub-button,
    .site-header a.mobile-header-hub-button {
        display: inline-flex !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;

        order: 1 !important;
        margin: 0 auto 0 0 !important;

        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 14px !important;
        border-radius: 999px !important;
        box-sizing: border-box !important;

        white-space: nowrap !important;
        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 5 !important;
    }

    .site-header .mobile-header-hub-button > span:not(.telegram-button-icon) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .site-header .mobile-header-hub-button .telegram-button-icon {
        display: inline-flex !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        flex: 0 0 16px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .site-header .language-switcher {
        display: inline-flex !important;
        position: static !important;
        order: 2 !important;
        margin-left: auto !important;
        margin-right: 0 !important;

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

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 5 !important;
    }

    .site-header .language-switcher a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .hero {
        min-height: auto !important;
        padding-top: 42px !important;
        padding-bottom: 32px !important;
    }

    .hero-copy {
        max-width: 390px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero h1,
    html[lang="es-MX"] .hero h1 {
        font-size: clamp(26px, 6.8vw, 32px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;
        max-width: 330px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    .hero p,
    .hero-subtitle,
    .hero-description {
        font-size: 14px !important;
        line-height: 1.5 !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-actions {
        display: none !important;
    }

    .feature-grid.card-image-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 10px !important;

        width: 88vw !important;
        max-width: 760px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .feature-grid.card-image-grid .image-card {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: relative !important;

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

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 1 / 1 !important;

        padding: 3px !important;
        box-sizing: border-box !important;

        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .feature-grid.card-image-grid .image-card::before,
    .feature-grid.card-image-grid .image-card::after {
        display: none !important;
        content: none !important;
    }

    .feature-grid.card-image-grid .mobile-card-content,
    .feature-grid.card-image-grid .mobile-card-icon-wrap,
    .feature-grid.card-image-grid .mobile-card-icon,
    .feature-grid.card-image-grid .mobile-card-title,
    .feature-grid.card-image-grid .mobile-card-description,
    .feature-grid.card-image-grid .mobile-card-cta {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .feature-grid.card-image-grid .image-card .desktop-card-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;
        inset: auto !important;

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

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

        border-radius: 14px !important;

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

        pointer-events: none !important;
    }

    section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}


/* ---------- Mobile/tablet shared safety ---------- */

@media (max-width: 980px) {
    .faq-heading .eyebrow {
        display: none !important;
    }
}


/* OPEN DROP HUB BUTTON COLOR RESTORE 26.06.2026
   Restores Open Drop Hub button to match the light-blue language switcher panel.
   Affects desktop, mobile portrait and mobile landscape.
*/
.mobile-header-hub-button,
.site-header .mobile-header-hub-button,
.site-header a.mobile-header-hub-button,
.hero-actions .telegram-button {
    color: #1f7cff !important;
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.10) !important;
}

.mobile-header-hub-button:hover,
.mobile-header-hub-button:active,
.site-header .mobile-header-hub-button:hover,
.site-header .mobile-header-hub-button:active,
.site-header a.mobile-header-hub-button:hover,
.site-header a.mobile-header-hub-button:active,
.hero-actions .telegram-button:hover,
.hero-actions .telegram-button:active {
    color: #1268dd !important;
    background: #d8ebff !important;
    border-color: rgba(117, 176, 238, 0.52) !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.12) !important;
}

.mobile-header-hub-button .telegram-button-icon,
.site-header .mobile-header-hub-button .telegram-button-icon,
.site-header a.mobile-header-hub-button .telegram-button-icon,
.hero-actions .telegram-button .telegram-button-icon {
    color: #229ED9 !important;
}

/* =========================================================
   TRIAL SEO ANSWER PAGE 26.06.2026
   Test page for /en/answers/what-are-casino-drop-codes/
   Uses existing Drop Codes Hub visual system.
   ========================================================= */

.seo-answer-page main {
    overflow: hidden;
}

.seo-answer-container {
    width: min(1180px, calc(100vw - 40px));
    margin-left: auto;
    margin-right: auto;
}

.seo-answer-hero {
    padding: 54px 0 28px;
    background: transparent !important;
}

.seo-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 22px;
    color: rgba(8, 44, 98, 0.62);
    font-size: 13px;
    font-weight: 700;
}

.seo-breadcrumbs a {
    color: #0b65e8;
    text-decoration: none;
}

.seo-answer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    align-items: start;
}

.seo-kicker {
    margin: 0 0 8px;
    color: #0b65e8;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.seo-answer-copy h1 {
    max-width: 760px;
    margin: 0;
    color: #062c73;
    font-size: clamp(42px, 4.4vw, 68px);
    line-height: 1.03;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.seo-lead {
    max-width: 720px;
    margin: 18px 0 0;
    color: rgba(6, 44, 115, 0.76);
    font-size: 19px;
    line-height: 1.55;
    font-weight: 500;
}

.seo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    color: rgba(6, 44, 115, 0.64);
    font-size: 13px;
    font-weight: 700;
}

.seo-telegram-panel {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    padding: 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 80% 20%, rgba(78, 185, 255, 0.36), transparent 34%),
        linear-gradient(135deg, #0747d8 0%, #7b2cff 100%);
    color: #fff;
    box-shadow: 0 20px 44px rgba(31, 81, 160, 0.22);
}

.seo-telegram-panel h2 {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.12;
    color: #fff;
}

.seo-telegram-panel p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
}

.seo-telegram-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
}

.seo-telegram-icon svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.seo-telegram-button,
.seo-final-button {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 14px;
    background: #ffffff;
    color: #0b65e8;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.seo-quick-answer {
    position: relative;
    margin-top: 28px;
    padding: 24px 30px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(117, 176, 238, 0.30);
    box-shadow: 0 18px 42px rgba(31, 81, 160, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.seo-quick-label {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    color: #075fe8;
    font-size: 18px;
}

.seo-quick-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #0b65e8, #3db8ff);
}

.seo-quick-answer p {
    max-width: 860px;
    margin: 0;
    color: rgba(6, 34, 86, 0.84);
    font-size: 18px;
    line-height: 1.62;
}

.seo-platform-section {
    padding-top: 20px !important;
    padding-bottom: 42px !important;
}

.seo-platform-section .section-copy {
    margin-top: 8px;
    color: rgba(6, 44, 115, 0.66);
    font-size: 16px;
}

.seo-full-answer-section,
.seo-related-section,
.seo-final-cta-section {
    padding: 36px 0;
    background: transparent !important;
}

.seo-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    align-items: start;
}

.seo-full-answer-card,
.seo-checklist-card,
.seo-related-card {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(117, 176, 238, 0.26);
    box-shadow: 0 18px 42px rgba(31, 81, 160, 0.11);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.seo-full-answer-card {
    padding: 32px;
}

.seo-full-answer-card h2,
.seo-related-card h2,
.seo-final-cta h2 {
    margin: 0 0 18px;
    color: #062c73;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.seo-full-answer-card p {
    margin: 0 0 18px;
    color: rgba(6, 34, 86, 0.82);
    font-size: 17px;
    line-height: 1.72;
}

.seo-inline-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    align-items: center;
    margin: 26px 0;
    padding: 18px 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(11, 101, 232, 0.12), rgba(61, 184, 255, 0.12));
    border: 1px solid rgba(117, 176, 238, 0.32);
}

.seo-inline-cta strong {
    color: #062c73;
    font-size: 18px;
}

.seo-inline-cta span {
    color: rgba(6, 34, 86, 0.70);
    font-size: 15px;
}

.seo-inline-cta a {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: #fff;
    background: #0b65e8;
    text-decoration: none;
    font-weight: 900;
    white-space: nowrap;
}

.seo-checklist-card {
    padding: 26px;
}

.seo-checklist-card h3 {
    margin: 0 0 16px;
    color: #062c73;
    font-size: 22px;
}

.seo-checklist-card ul {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.seo-checklist-card li {
    position: relative;
    padding-left: 28px;
    color: rgba(6, 34, 86, 0.80);
    font-size: 15px;
    line-height: 1.45;
}

.seo-checklist-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b65e8;
    background: rgba(11, 101, 232, 0.10);
    font-size: 12px;
    font-weight: 900;
}

.seo-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.seo-related-card {
    padding: 26px;
}

.seo-related-card a:not(.seo-telegram-button) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    color: #0b65e8;
    text-decoration: none;
    font-weight: 800;
    border-bottom: 1px solid rgba(117, 176, 238, 0.20);
}

.seo-related-card a:not(.seo-telegram-button)::after {
    content: "→";
}

.seo-related-card p {
    color: rgba(6, 34, 86, 0.78);
    font-size: 16px;
    line-height: 1.55;
}

.seo-related-card-strong {
    background:
        radial-gradient(circle at 80% 20%, rgba(78, 185, 255, 0.20), transparent 34%),
        rgba(255, 255, 255, 0.78);
}

.seo-faq-section {
    padding-top: 28px !important;
    padding-bottom: 36px !important;
}

.seo-final-cta {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 30px 34px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 86% 20%, rgba(255,255,255,0.26), transparent 28%),
        linear-gradient(135deg, #0b65e8 0%, #8e2dff 100%);
    box-shadow: 0 22px 50px rgba(31, 81, 160, 0.20);
}

.seo-final-cta h2 {
    color: #fff;
    margin-bottom: 8px;
}

.seo-final-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 16px;
}

@media (max-width: 980px) {
    .seo-answer-container {
        width: min(100% - 28px, 760px);
    }

    .seo-answer-hero {
        padding-top: 34px;
    }

    .seo-answer-top,
    .seo-content-layout,
    .seo-related-grid {
        grid-template-columns: 1fr;
    }

    .seo-answer-copy h1 {
        font-size: clamp(32px, 8vw, 48px);
        text-align: center;
    }

    .seo-lead,
    .seo-meta,
    .seo-breadcrumbs {
        justify-content: center;
        text-align: center;
    }

    .seo-telegram-panel {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .seo-inline-cta {
        grid-template-columns: 1fr;
    }

    .seo-inline-cta a {
        grid-row: auto;
        justify-content: center;
    }

    .seo-final-cta {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .seo-answer-hero {
        padding-top: 24px;
    }

    .seo-quick-answer,
    .seo-full-answer-card,
    .seo-checklist-card,
    .seo-related-card {
        border-radius: 22px;
        padding: 20px;
    }

    .seo-telegram-panel {
        border-radius: 22px;
        padding: 18px;
    }
}

/* =========================================================
   SEO ANSWER DESKTOP NORMALIZE STEP 1 26.06.2026
   Desktop visual cleanup for trial SEO page.
   Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page {
        position: relative;
    }

    body.seo-answer-page .site-header {
        background: transparent !important;
    }

    body.seo-answer-page main {
        position: relative;
        overflow: hidden;
    }

    body.seo-answer-page main::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(
                90deg,
                rgba(238, 247, 255, 0.62) 0%,
                rgba(238, 247, 255, 0.18) 34%,
                rgba(238, 247, 255, 0.20) 66%,
                rgba(238, 247, 255, 0.56) 100%
            );
    }

    body.seo-answer-page main > section {
        position: relative;
        z-index: 1;
    }

    body.seo-answer-page .seo-answer-container {
        width: min(1180px, calc(100vw - 80px));
    }

    body.seo-answer-page .seo-answer-hero {
        padding-top: 72px;
        padding-bottom: 30px;
    }

    body.seo-answer-page .seo-answer-top {
        grid-template-columns: minmax(0, 760px) 350px;
        gap: 52px;
        align-items: start;
    }

    body.seo-answer-page .seo-answer-copy h1 {
        max-width: 760px;
        font-size: clamp(50px, 4.7vw, 72px);
        line-height: 0.98;
    }

    body.seo-answer-page .seo-lead {
        max-width: 760px;
        margin-top: 22px;
    }

    body.seo-answer-page .seo-telegram-panel {
        margin-top: 16px;
    }

    body.seo-answer-page .seo-quick-answer {
        margin-top: 34px;
        padding: 26px 34px;
    }

    body.seo-answer-page .seo-platform-section {
        padding-top: 18px !important;
        padding-bottom: 46px !important;
    }

    body.seo-answer-page .seo-platform-section .section-heading {
        margin-bottom: 30px;
    }

    body.seo-answer-page .seo-card-grid {
        margin-top: 0;
    }

    body.seo-answer-page .seo-full-answer-section {
        padding-top: 42px;
        padding-bottom: 34px;
    }

    body.seo-answer-page .seo-content-layout {
        grid-template-columns: minmax(0, 760px) 340px;
        gap: 36px;
        justify-content: center;
    }

    body.seo-answer-page .seo-full-answer-card {
        padding: 32px 34px;
    }

    body.seo-answer-page .seo-checklist-card {
        padding: 26px 26px 28px;
    }

    body.seo-answer-page .seo-related-section {
        padding-top: 34px;
        padding-bottom: 36px;
    }

    body.seo-answer-page .seo-related-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 30px;
    }

    body.seo-answer-page .seo-faq-section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    body.seo-answer-page .seo-faq-section .faq-layout {
        display: block !important;
    }

    body.seo-answer-page .seo-faq-section .faq-heading {
        max-width: 720px;
        margin: 0 auto 26px !important;
        text-align: center;
    }

    body.seo-answer-page .seo-faq-section .faq-heading h2 {
        margin-bottom: 10px;
        color: #062c73;
        font-size: 42px;
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    body.seo-answer-page .seo-faq-section .section-copy {
        margin: 0 auto;
        color: rgba(6, 44, 115, 0.68);
        font-size: 17px;
    }

    body.seo-answer-page .seo-faq-section .faq-list {
        max-width: 820px;
        margin: 0 auto;
    }

    body.seo-answer-page .seo-final-cta-section {
        padding-top: 34px;
        padding-bottom: 78px;
    }

    body.seo-answer-page .seo-final-cta {
        padding: 32px 40px;
    }

    body.seo-answer-page .site-footer {
        position: relative;
        z-index: 2;
        padding: 44px 0 42px !important;
        background: #073f92 !important;
        color: #ffffff;
        overflow: hidden;
    }

    body.seo-answer-page .site-footer .footer-inner {
        width: min(1180px, calc(100vw - 80px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(140px, 0.7fr) minmax(220px, 0.9fr);
        gap: 56px;
        align-items: start;
    }

    body.seo-answer-page .footer-brand-title-link {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: #ffffff;
        text-decoration: none;
        font-weight: 900;
        letter-spacing: 0.03em;
    }

    body.seo-answer-page .footer-brand-title-link img {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        object-fit: contain !important;
        display: block !important;
        border-radius: 50%;
    }

    body.seo-answer-page .footer-brand-title-link span {
        line-height: 1.1;
    }

    body.seo-answer-page .footer-brand-telegram-icon {
        color: #42c8ff;
    }

    body.seo-answer-page .site-footer p {
        margin: 12px 0 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 15px;
        line-height: 1.5;
    }

    body.seo-answer-page .footer-links {
        display: grid;
        gap: 10px;
    }

    body.seo-answer-page .footer-links a {
        color: #ffffff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
    }

    body.seo-answer-page .footer-meta {
        display: grid;
        gap: 8px;
    }

    body.seo-answer-page .footer-meta p {
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 15px;
    }
}

/* =========================================================
   SEO ANSWER DESKTOP NORMALIZE STEP 2 26.06.2026
   Softer background, tighter desktop rhythm.
   Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page main::before {
        background:
            linear-gradient(
                90deg,
                rgba(238, 247, 255, 0.92) 0%,
                rgba(238, 247, 255, 0.82) 18%,
                rgba(238, 247, 255, 0.52) 34%,
                rgba(238, 247, 255, 0.22) 58%,
                rgba(238, 247, 255, 0.42) 78%,
                rgba(238, 247, 255, 0.74) 100%
            ),
            linear-gradient(
                180deg,
                rgba(238, 247, 255, 0.18) 0%,
                rgba(238, 247, 255, 0.02) 34%,
                rgba(238, 247, 255, 0.06) 72%,
                rgba(238, 247, 255, 0.24) 100%
            );
    }

    body.seo-answer-page .seo-answer-container {
        width: min(1160px, calc(100vw - 92px));
    }

    body.seo-answer-page .seo-answer-hero {
        padding-top: 62px;
        padding-bottom: 22px;
    }

    body.seo-answer-page .seo-breadcrumbs {
        margin-bottom: 18px;
    }

    body.seo-answer-page .seo-answer-top {
        grid-template-columns: minmax(0, 730px) 330px;
        gap: 66px;
    }

    body.seo-answer-page .seo-answer-copy h1 {
        max-width: 730px;
        font-size: clamp(50px, 4.35vw, 66px);
        line-height: 1;
    }

    body.seo-answer-page .seo-lead {
        max-width: 760px;
        margin-top: 20px;
        font-size: 18px;
    }

    body.seo-answer-page .seo-meta {
        margin-top: 16px;
    }

    body.seo-answer-page .seo-telegram-panel {
        width: 330px;
        justify-self: end;
        margin-top: 12px;
        padding: 20px;
        border-radius: 24px;
    }

    body.seo-answer-page .seo-quick-answer {
        margin-top: 30px;
        padding: 24px 32px;
    }

    body.seo-answer-page .seo-platform-section {
        padding-top: 10px !important;
        padding-bottom: 34px !important;
    }

    body.seo-answer-page .seo-platform-section .section-heading {
        margin-bottom: 24px;
    }

    body.seo-answer-page .seo-platform-section .section-heading h2 {
        font-size: clamp(42px, 4vw, 56px);
        line-height: 1.04;
    }

    body.seo-answer-page .seo-platform-section .section-copy {
        margin-top: 6px;
    }

    body.seo-answer-page .seo-card-grid {
        width: min(1120px, calc(100vw - 110px));
        gap: 18px;
    }

    body.seo-answer-page .seo-full-answer-section {
        padding-top: 28px;
        padding-bottom: 26px;
    }

    body.seo-answer-page .seo-content-layout {
        grid-template-columns: minmax(0, 730px) 320px;
        gap: 34px;
    }

    body.seo-answer-page .seo-full-answer-card {
        padding: 30px 32px;
    }

    body.seo-answer-page .seo-full-answer-card h2,
    body.seo-answer-page .seo-related-card h2 {
        font-size: 31px;
    }

    body.seo-answer-page .seo-checklist-card {
        padding: 24px;
        border-radius: 26px;
    }

    body.seo-answer-page .seo-related-section {
        padding-top: 28px;
        padding-bottom: 24px;
    }

    body.seo-answer-page .seo-faq-section {
        padding-top: 22px !important;
        padding-bottom: 28px !important;
    }

    body.seo-answer-page .seo-faq-section .faq-heading {
        margin-bottom: 22px !important;
    }

    body.seo-answer-page .seo-final-cta-section {
        padding-top: 22px;
        padding-bottom: 64px;
    }

    body.seo-answer-page .seo-final-cta {
        width: min(1120px, 100%);
        margin-left: auto;
        margin-right: auto;
        padding: 30px 38px;
    }

    body.seo-answer-page .site-footer {
        padding-top: 40px !important;
        padding-bottom: 38px !important;
    }
}

/* =========================================================
   SEO TELEGRAM ICON SYNC FIX 26.06.2026
   Sync top CTA Telegram icon with header Open Drop Hub pulse.
   Replace footer arrow visual with Telegram plane styling.
   Telegram scripts are not touched.
   ========================================================= */

@keyframes seoHubPulseSync26 {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 8px 22px rgba(31, 124, 255, 0.18),
            0 0 0 rgba(66, 200, 255, 0);
    }
    50% {
        transform: translateY(-1px) scale(1.035);
        box-shadow:
            0 12px 30px rgba(31, 124, 255, 0.30),
            0 0 18px rgba(66, 200, 255, 0.34);
    }
}

@keyframes seoWhitePlaneGlowSync26 {
    0%, 100% {
        opacity: 0.92;
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.82));
    }
}

@keyframes seoFooterPlaneGlowSync26 {
    0%, 100% {
        opacity: 0.82;
        filter: drop-shadow(0 0 0 rgba(66, 200, 255, 0));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(66, 200, 255, 0.72));
    }
}

body.seo-answer-page .mobile-header-hub-button,
body.seo-answer-page .seo-telegram-icon {
    animation: seoHubPulseSync26 2.35s ease-in-out infinite !important;
    transform-origin: center center;
    will-change: transform, box-shadow;
}

body.seo-answer-page .seo-telegram-icon svg {
    fill: #ffffff !important;
    animation: seoWhitePlaneGlowSync26 2.35s ease-in-out infinite !important;
    will-change: opacity, filter;
}

body.seo-answer-page .footer-brand-telegram-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    color: #42c8ff !important;
    animation: seoFooterPlaneGlowSync26 2.35s ease-in-out infinite !important;
    will-change: opacity, filter;
}

body.seo-answer-page .footer-brand-telegram-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: currentColor !important;
}

@media (max-width: 980px) {
    body.seo-answer-page .mobile-header-hub-button,
    body.seo-answer-page .seo-telegram-icon,
    body.seo-answer-page .seo-telegram-icon svg,
    body.seo-answer-page .footer-brand-telegram-icon {
        animation-duration: 2.35s !important;
    }
}

/* =========================================================
   SEO TELEGRAM RHYTHM FINAL 26.06.2026
   Use the existing header Telegram icon rhythm.
   Footer icon stays static for cleaner conversion.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .mobile-header-hub-button,
body.seo-answer-page .site-header .mobile-header-hub-button,
body.seo-answer-page .site-header a.mobile-header-hub-button {
    animation: none !important;
}

body.seo-answer-page .site-header .mobile-header-hub-button .telegram-button-icon,
body.seo-answer-page .site-header a.mobile-header-hub-button .telegram-button-icon,
body.seo-answer-page .seo-telegram-icon {
    animation-name: telegramIconPulseStrong25 !important;
    animation-duration: 1.65s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    transform-origin: center center !important;
    will-change: transform, box-shadow, filter !important;
}

body.seo-answer-page .seo-telegram-icon svg {
    fill: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
}

body.seo-answer-page .footer-brand-telegram-icon {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    color: #42c8ff !important;
}

body.seo-answer-page .footer-brand-title-link:hover .footer-brand-telegram-icon {
    filter: drop-shadow(0 0 7px rgba(66, 200, 255, 0.58)) !important;
    transform: translateY(-1px) !important;
}

body.seo-answer-page .footer-brand-telegram-icon svg {
    fill: currentColor !important;
}

/* =========================================================
   SEO PLANE ONLY CTA FIX 26.06.2026
   Top CTA card uses only white Telegram plane, no square background.
   Footer plane remains static.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-telegram-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

body.seo-answer-page .seo-telegram-icon svg {
    width: 38px !important;
    height: 38px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    animation-name: telegramIconPulseStrong25 !important;
    animation-duration: 1.65s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.36)) !important;
    will-change: transform, filter !important;
}

body.seo-answer-page .footer-brand-telegram-icon,
body.seo-answer-page .footer-brand-telegram-icon svg {
    animation: none !important;
}

body.seo-answer-page .footer-brand-telegram-icon {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* =========================================================
   SEO CTA HOVER LIFT 26.06.2026
   Unified hover lift for SEO page CTA buttons and footer brand.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .site-header .mobile-header-hub-button,
body.seo-answer-page .site-header a.mobile-header-hub-button,
body.seo-answer-page .seo-telegram-button,
body.seo-answer-page .seo-inline-cta a,
body.seo-answer-page .seo-final-button,
body.seo-answer-page .footer-brand-title-link {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        filter 180ms ease !important;
    transform: translateY(0) !important;
    will-change: transform;
}

/* Header Open Drop Hub button */
body.seo-answer-page .site-header .mobile-header-hub-button:hover,
body.seo-answer-page .site-header a.mobile-header-hub-button:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 14px 28px rgba(31, 124, 255, 0.22),
        0 0 18px rgba(66, 200, 255, 0.20) !important;
}

body.seo-answer-page .site-header .mobile-header-hub-button:active,
body.seo-answer-page .site-header a.mobile-header-hub-button:active {
    transform: translateY(-1px) !important;
}

/* All Open Drop Hub CTA buttons inside the SEO page */
body.seo-answer-page .seo-telegram-button:hover,
body.seo-answer-page .seo-inline-cta a:hover,
body.seo-answer-page .seo-final-button:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 16px 30px rgba(7, 67, 151, 0.24),
        0 0 18px rgba(66, 200, 255, 0.18) !important;
}

body.seo-answer-page .seo-telegram-button:active,
body.seo-answer-page .seo-inline-cta a:active,
body.seo-answer-page .seo-final-button:active {
    transform: translateY(-1px) !important;
}

/* Keyboard focus should also feel clickable */
body.seo-answer-page .site-header .mobile-header-hub-button:focus-visible,
body.seo-answer-page .seo-telegram-button:focus-visible,
body.seo-answer-page .seo-inline-cta a:focus-visible,
body.seo-answer-page .seo-final-button:focus-visible,
body.seo-answer-page .footer-brand-title-link:focus-visible {
    outline: 3px solid rgba(66, 200, 255, 0.42);
    outline-offset: 4px;
}

/* Footer brand: lift the full logo + text + Telegram plane together */
body.seo-answer-page .footer-brand-title-link {
    width: fit-content;
}

body.seo-answer-page .footer-brand-title-link:hover {
    transform: translateY(-3px) !important;
    filter: none !important;
    box-shadow: none !important;
}

body.seo-answer-page .footer-brand-title-link:active {
    transform: translateY(-1px) !important;
}

/* Remove old footer icon-only glow/lift so the whole footer brand moves as one object */
body.seo-answer-page .footer-brand-title-link:hover .footer-brand-telegram-icon,
body.seo-answer-page .footer-brand-title-link:hover .footer-brand-telegram-icon svg {
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

body.seo-answer-page .footer-brand-telegram-icon {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* =========================================================
   SEO DESKTOP VISUAL FIXES STEP 3 26.06.2026
   Header alignment, remove Answer kicker, card-section heading,
   footer brand hover only on text + Telegram plane.
   Telegram scripts are not touched.
   ========================================================= */

/* 1) Keep header Open Drop Hub button aligned with language switcher */
body.seo-answer-page .site-header .header-inner {
    align-items: center !important;
}

body.seo-answer-page .site-header .mobile-header-hub-button,
body.seo-answer-page .site-header a.mobile-header-hub-button {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: auto !important;
    position: relative !important;
    transform: translateY(0) !important;
}

body.seo-answer-page .site-header .mobile-header-hub-button:hover,
body.seo-answer-page .site-header a.mobile-header-hub-button:hover {
    transform: translateY(-3px) !important;
}

body.seo-answer-page .site-header .mobile-header-hub-button:active,
body.seo-answer-page .site-header a.mobile-header-hub-button:active {
    transform: translateY(-1px) !important;
}

/* 2) Remove small "Answer" label above H1 */
body.seo-answer-page .seo-kicker {
    display: none !important;
}

/* 3) Make card section title cleaner: hide big H2, promote description */
body.seo-answer-page .seo-platform-section .section-heading {
    text-align: center !important;
    margin-bottom: 28px !important;
}

body.seo-answer-page .seo-platform-section .section-heading h2 {
    display: none !important;
}

body.seo-answer-page .seo-platform-section .section-copy {
    max-width: 760px !important;
    margin: 0 auto !important;
    color: #062c73 !important;
    font-size: clamp(30px, 3vw, 38px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    font-weight: 800 !important;
    text-align: center !important;
}

/* 4) Footer: avatar stays still, only text + Telegram plane lift */
body.seo-answer-page .footer-brand-title-link,
body.seo-answer-page .footer-brand-title-link:hover,
body.seo-answer-page .footer-brand-title-link:active {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

body.seo-answer-page .footer-brand-title-link > img {
    transform: none !important;
    transition: none !important;
}

body.seo-answer-page .footer-brand-title-link > span:not(.footer-brand-telegram-icon),
body.seo-answer-page .footer-brand-title-link > .footer-brand-telegram-icon {
    transition:
        transform 180ms ease,
        color 180ms ease !important;
    transform: translateY(0) !important;
    will-change: transform;
}

body.seo-answer-page .footer-brand-title-link:hover > span:not(.footer-brand-telegram-icon),
body.seo-answer-page .footer-brand-title-link:hover > .footer-brand-telegram-icon {
    transform: translateY(-3px) !important;
    filter: none !important;
    box-shadow: none !important;
}

body.seo-answer-page .footer-brand-title-link:active > span:not(.footer-brand-telegram-icon),
body.seo-answer-page .footer-brand-title-link:active > .footer-brand-telegram-icon {
    transform: translateY(-1px) !important;
}

body.seo-answer-page .footer-brand-title-link:hover .footer-brand-telegram-icon,
body.seo-answer-page .footer-brand-title-link:hover .footer-brand-telegram-icon svg {
    filter: none !important;
    box-shadow: none !important;
}

/* =========================================================
   SEO HEADER RESTORE ONLY 26.06.2026
   Restore SEO page header positioning only.
   Other SEO page blocks are not touched.
   Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .site-header {
        height: auto !important;
        min-height: 64px !important;
        padding: 18px 0 0 !important;
        background: transparent !important;
    }

    body.seo-answer-page .site-header .container.header-inner,
    body.seo-answer-page .site-header .header-inner {
        position: relative !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        max-width: 1180px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Header left CTA returns to the left edge of the header container */
    body.seo-answer-page .site-header .mobile-header-hub-button,
    body.seo-answer-page .site-header a.mobile-header-hub-button {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: auto !important;
        align-self: auto !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 5 !important;
    }

    body.seo-answer-page .site-header .mobile-header-hub-button:hover,
    body.seo-answer-page .site-header a.mobile-header-hub-button:hover,
    body.seo-answer-page .site-header .mobile-header-hub-button:active,
    body.seo-answer-page .site-header a.mobile-header-hub-button:active {
        transform: none !important;
    }

    /* Language panel returns to the right edge of the header container */
    body.seo-answer-page .site-header .language-switcher {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 5 !important;
    }

    /* Center nav/brand should not push left and right controls */
    body.seo-answer-page .site-header .brand,
    body.seo-answer-page .site-header .main-nav {
        position: static !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
}

/* =========================================================
   SEO HEADER OPEN DROP HUB HOVER ONLY 26.06.2026
   Adds card-style hover lift only to the left Open Drop Hub header button.
   Header layout, language switcher and other blocks are not touched.
   Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .site-header .mobile-header-hub-button,
    body.seo-answer-page .site-header a.mobile-header-hub-button {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: auto !important;
        margin: 0 !important;
        transition:
            transform 180ms ease,
            box-shadow 180ms ease,
            background-color 180ms ease,
            color 180ms ease !important;
        transform: translateY(0) !important;
        will-change: transform, box-shadow;
    }

    body.seo-answer-page .site-header .mobile-header-hub-button:hover,
    body.seo-answer-page .site-header a.mobile-header-hub-button:hover {
        transform: translateY(-3px) !important;
        box-shadow:
            0 14px 28px rgba(31, 124, 255, 0.22),
            0 0 18px rgba(66, 200, 255, 0.18) !important;
    }

    body.seo-answer-page .site-header .mobile-header-hub-button:active,
    body.seo-answer-page .site-header a.mobile-header-hub-button:active {
        transform: translateY(-1px) !important;
    }

    body.seo-answer-page .site-header .language-switcher {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* =========================================================
   SEO INLINE CTA BUTTON WIDTH FIX 26.06.2026
   Fixes Open Drop Hub button width inside How casino drop codes work block.
   Header, cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-inline-cta a {
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-inline-cta a {
        justify-self: start !important;
        width: auto !important;
        max-width: max-content !important;
    }
}

/* =========================================================
   SEO INLINE CTA MINI BLOCK FIX 26.06.2026
   Makes the Want faster alerts CTA a compact vertical mini-block.
   Header, cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-inline-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: fit-content !important;
    max-width: min(520px, 100%) !important;
    margin: 24px 0 26px !important;
    padding: 18px 20px 20px !important;
    gap: 8px !important;
    border-radius: 22px !important;
}

body.seo-answer-page .seo-inline-cta strong {
    display: block !important;
    margin: 0 !important;
    color: #062c73 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

body.seo-answer-page .seo-inline-cta span {
    display: block !important;
    margin: 0 0 6px !important;
    color: rgba(6, 34, 86, 0.70) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

body.seo-answer-page .seo-inline-cta a {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    justify-self: start !important;
    grid-row: auto !important;
    padding: 0 18px !important;
    min-height: 40px !important;
    white-space: nowrap !important;
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-inline-cta {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   SEO INLINE CTA ONE LINE TEST 26.06.2026
   Tests compact one-line layout for the Want faster alerts mini CTA.
   Header, cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-inline-cta {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 24px 0 26px !important;
        padding: 14px 16px !important;
        gap: 14px !important;
        border-radius: 18px !important;
        white-space: nowrap !important;
    }

    body.seo-answer-page .seo-inline-cta strong {
        display: inline-flex !important;
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.seo-answer-page .seo-inline-cta span {
        display: inline-flex !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.seo-answer-page .seo-inline-cta a {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        min-height: 38px !important;
        padding: 0 18px !important;
        align-self: center !important;
        justify-self: start !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-inline-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    body.seo-answer-page .seo-inline-cta strong,
    body.seo-answer-page .seo-inline-cta span {
        white-space: normal !important;
        line-height: 1.35 !important;
    }
}

/* =========================================================
   SEO INLINE CTA TEXT BALANCE 26.06.2026
   Makes "Watch drops in real time." closer to main article text.
   Header, cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-inline-cta span {
        color: rgba(6, 34, 86, 0.82) !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
    }

    body.seo-answer-page .seo-inline-cta strong {
        font-size: 17px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
    }
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-inline-cta span {
        color: rgba(6, 34, 86, 0.82) !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
    }
}

/* =========================================================
   SEO RELATED CTA CARD EXPAND 26.06.2026
   Moves CTA meaning from article inline mini-block to Best next step card.
   Header, cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-related-grid {
    align-items: stretch !important;
}

body.seo-answer-page .seo-related-card {
    height: 100% !important;
}

body.seo-answer-page .seo-related-card-strong {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 100% !important;
}

body.seo-answer-page .seo-related-card-strong h2 {
    margin-bottom: 8px !important;
}

body.seo-answer-page .seo-related-card-strong .seo-next-step-label {
    margin: 0 0 14px !important;
    color: #0b65e8 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

body.seo-answer-page .seo-related-card-strong p:not(.seo-next-step-label) {
    margin: 0 0 22px !important;
    color: rgba(6, 34, 86, 0.82) !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
    font-weight: 500 !important;
}

body.seo-answer-page .seo-related-card-strong .seo-telegram-button {
    width: fit-content !important;
    max-width: max-content !important;
    margin-top: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

/* =========================================================
   SEO BEST NEXT STEP BUTTON UP 26.06.2026
   Moves Open Drop Hub button higher inside Want faster alerts card.
   Header, article, cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-related-card-strong .seo-telegram-button {
    margin-top: 14px !important;
    margin-bottom: auto !important;
    align-self: flex-start !important;
}

/* =========================================================
   SEO BEST NEXT STEP TITLE GAP 26.06.2026
   Adds more space between "Want faster alerts?" and "Best next step".
   Header, article, platform cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-related-card-strong h2 {
    margin-bottom: 18px !important;
}

body.seo-answer-page .seo-related-card-strong .seo-next-step-label {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

/* =========================================================
   SEO BEST NEXT STEP TITLE GAP MORE 26.06.2026
   Makes right-card title spacing closer to Related answers card.
   Header, article, platform cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-related-card-strong h2 {
    margin-bottom: 34px !important;
}

body.seo-answer-page .seo-related-card-strong .seo-next-step-label {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

/* =========================================================
   SEO MAIN H1 SIZE BALANCE 26.06.2026
   Makes main H1 smaller, but still larger than platform section title.
   Header, cards, related blocks and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-answer-copy h1 {
        max-width: 700px !important;
        font-size: clamp(44px, 3.65vw, 58px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.04em !important;
    }

    body.seo-answer-page .seo-lead {
        max-width: 700px !important;
        margin-top: 18px !important;
        font-size: 19px !important;
        line-height: 1.55 !important;
        color: rgba(6, 44, 115, 0.82) !important;
    }

    body.seo-answer-page .seo-platform-section .section-copy {
        font-size: clamp(30px, 3vw, 38px) !important;
        line-height: 1.12 !important;
    }
}

/* =========================================================
   SEO CTA CARDS BLUE WHITE 26.06.2026
   Makes top and final CTA cards lighter: blue to white, no purple.
   Header, platform cards, article and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

/* Top CTA card near H1 */
body.seo-answer-page .seo-telegram-panel {
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.22), transparent 30%),
        linear-gradient(
            135deg,
            #1687f4 0%,
            #55bfff 42%,
            #dff5ff 78%,
            #ffffff 100%
        ) !important;
    border: 1px solid rgba(117, 176, 238, 0.34) !important;
    color: #062c73 !important;
    box-shadow:
        0 18px 38px rgba(31, 81, 160, 0.16),
        0 0 20px rgba(66, 200, 255, 0.10) !important;
}

body.seo-answer-page .seo-telegram-panel h2 {
    color: #062c73 !important;
}

body.seo-answer-page .seo-telegram-panel p {
    color: rgba(6, 44, 115, 0.76) !important;
}

body.seo-answer-page .seo-telegram-panel .seo-telegram-icon svg {
    fill: #ffffff !important;
    filter:
        drop-shadow(0 0 8px rgba(6, 44, 115, 0.22))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.42)) !important;
}

body.seo-answer-page .seo-telegram-panel .seo-telegram-button {
    background: #0b65e8 !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 24px rgba(11, 101, 232, 0.22),
        0 0 14px rgba(66, 200, 255, 0.16) !important;
}

/* Final bottom CTA card */
body.seo-answer-page .seo-final-cta {
    background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.68), transparent 30%),
        linear-gradient(
            135deg,
            #1687f4 0%,
            #5ac4ff 40%,
            #e6f8ff 78%,
            #ffffff 100%
        ) !important;
    border: 1px solid rgba(117, 176, 238, 0.34) !important;
    color: #062c73 !important;
    box-shadow:
        0 18px 40px rgba(31, 81, 160, 0.15),
        0 0 22px rgba(66, 200, 255, 0.10) !important;
}

body.seo-answer-page .seo-final-cta h2 {
    color: #062c73 !important;
}

body.seo-answer-page .seo-final-cta p {
    color: rgba(6, 44, 115, 0.76) !important;
}

body.seo-answer-page .seo-final-button {
    background: #0b65e8 !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 24px rgba(11, 101, 232, 0.22),
        0 0 14px rgba(66, 200, 255, 0.16) !important;
}

body.seo-answer-page .seo-final-button:hover,
body.seo-answer-page .seo-telegram-panel .seo-telegram-button:hover {
    box-shadow:
        0 16px 30px rgba(11, 101, 232, 0.26),
        0 0 18px rgba(66, 200, 255, 0.20) !important;
}

/* =========================================================
   SEO REMOVE CTA RIGHT BLUE STRIPE 26.06.2026
   Removes visible blue stripe on right edge of top and final CTA cards.
   Header, article, platform cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-telegram-panel {
    background:
        linear-gradient(
            135deg,
            #1687f4 0%,
            #65caff 38%,
            #e7f8ff 72%,
            #ffffff 100%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    overflow: hidden !important;
}

body.seo-answer-page .seo-final-cta {
    background:
        linear-gradient(
            135deg,
            #1687f4 0%,
            #65caff 38%,
            #eaf9ff 72%,
            #ffffff 100%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    overflow: hidden !important;
}

/* Keep the right edge visually calm and white */
body.seo-answer-page .seo-telegram-panel::after,
body.seo-answer-page .seo-final-cta::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 18%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.72));
    border-radius: inherit;
}

body.seo-answer-page .seo-telegram-panel,
body.seo-answer-page .seo-final-cta {
    position: relative !important;
}

body.seo-answer-page .seo-telegram-panel > *,
body.seo-answer-page .seo-final-cta > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   SEO CTA BUTTONS MATCH HEADER 26.06.2026
   Makes top and final CTA buttons match the left header Open Drop Hub button.
   Header, article, platform cards and footer are not touched.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-telegram-panel .seo-telegram-button,
body.seo-answer-page .seo-final-button {
    background: #e3f1ff !important;
    color: #1f7cff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    box-shadow:
        0 10px 22px rgba(31, 124, 255, 0.14),
        0 0 14px rgba(66, 200, 255, 0.10) !important;
}

body.seo-answer-page .seo-telegram-panel .seo-telegram-button:hover,
body.seo-answer-page .seo-final-button:hover {
    background: #eef8ff !important;
    color: #0b65e8 !important;
    border-color: rgba(117, 176, 238, 0.58) !important;
    box-shadow:
        0 16px 30px rgba(31, 124, 255, 0.20),
        0 0 18px rgba(66, 200, 255, 0.18) !important;
}

body.seo-answer-page .seo-telegram-panel .seo-telegram-button:active,
body.seo-answer-page .seo-final-button:active {
    background: #d8ecff !important;
}

/* =========================================================
   SEO RELATED CTA BUTTON MATCH HEADER 26.06.2026
   Makes the Want faster alerts card button match the header Open Drop Hub button.
   Button position and card spacing are not changed.
   Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-related-card-strong .seo-telegram-button {
    background: #e3f1ff !important;
    color: #1f7cff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    box-shadow:
        0 10px 22px rgba(31, 124, 255, 0.14),
        0 0 14px rgba(66, 200, 255, 0.10) !important;
}

body.seo-answer-page .seo-related-card-strong .seo-telegram-button:hover {
    background: #eef8ff !important;
    color: #0b65e8 !important;
    border-color: rgba(117, 176, 238, 0.58) !important;
    box-shadow:
        0 16px 30px rgba(31, 124, 255, 0.20),
        0 0 18px rgba(66, 200, 255, 0.18) !important;
}

body.seo-answer-page .seo-related-card-strong .seo-telegram-button:active {
    background: #d8ecff !important;
}

/* =========================================================
   HOME DESKTOP WATERMARK LOGO SOFTEN 26.06.2026
   Softens/washes out the large homepage background logo on desktop.
   SEO answer page, mobile, cards, footer and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-desktop-logo-soften {
        position: relative !important;
    }

    body.home-desktop-logo-soften::before {
        content: "";
        position: absolute;
        left: 0;
        top: 74px;
        width: min(620px, 36vw);
        height: 980px;
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(
                circle at 26% 34%,
                rgba(255, 255, 255, 0.72) 0%,
                rgba(255, 255, 255, 0.56) 34%,
                rgba(255, 255, 255, 0.24) 58%,
                rgba(255, 255, 255, 0) 78%
            ),
            linear-gradient(
                90deg,
                rgba(238, 248, 255, 0.56) 0%,
                rgba(238, 248, 255, 0.34) 46%,
                rgba(238, 248, 255, 0) 100%
            );
    }

    body.home-desktop-logo-soften .site-header,
    body.home-desktop-logo-soften main,
    body.home-desktop-logo-soften footer {
        position: relative;
        z-index: 1;
    }
}

/* =========================================================
   HOME DESKTOP GLOBAL SOFT WASH 26.06.2026
   Replaces local logo wash with one subtle page-wide wash layer.
   SEO answer page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /* Disable previous local left-side wash if the old class is still cached anywhere */
    body.home-desktop-logo-soften::before {
        content: none !important;
        display: none !important;
    }

    body.home-global-soft-wash {
        position: relative !important;
    }

    /* One soft layer over the whole desktop background, not only around the logo */
    body.home-global-soft-wash::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(245, 251, 255, 0.20) 0%,
                rgba(245, 251, 255, 0.16) 42%,
                rgba(245, 251, 255, 0.18) 100%
            ),
            radial-gradient(
                circle at 8% 34%,
                rgba(255, 255, 255, 0.20) 0%,
                rgba(255, 255, 255, 0.12) 34%,
                rgba(255, 255, 255, 0) 68%
            );
    }

    body.home-global-soft-wash .site-header,
    body.home-global-soft-wash main,
    body.home-global-soft-wash footer {
        position: relative;
        z-index: 1;
    }

    /* Very soft header wash so the header does not look like a separate strip */
    body.home-global-soft-wash .site-header {
        isolation: isolate;
    }

    body.home-global-soft-wash .site-header::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: rgba(245, 251, 255, 0.10);
    }

    body.home-global-soft-wash .site-header > * {
        position: relative;
        z-index: 1;
    }
}

/* =========================================================
   HOME WASH HEADER FAQ FIX 26.06.2026
   Softens global wash, restores desktop header button position,
   and fixes homepage FAQ spacing/text scale.
   SEO answer page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /* Fully disable the previous local left-side logo wash */
    body.home-desktop-logo-soften::before {
        content: none !important;
        display: none !important;
    }

    /* Much softer page-wide wash, closer to the SEO page feeling */
    body.home-global-soft-wash::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(247, 252, 255, 0.075) 0%,
                rgba(247, 252, 255, 0.055) 42%,
                rgba(247, 252, 255, 0.065) 100%
            ),
            radial-gradient(
                circle at 9% 34%,
                rgba(255, 255, 255, 0.095) 0%,
                rgba(255, 255, 255, 0.052) 36%,
                rgba(255, 255, 255, 0) 70%
            ) !important;
    }

    /* Remove the separate header strip from the previous version */
    body.home-global-soft-wash .site-header::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
    }

    body.home-global-soft-wash .site-header {
        position: relative !important;
        z-index: 10 !important;
        isolation: auto !important;
    }

    body.home-global-soft-wash .site-header .container.header-inner {
        position: relative !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Restore left header button position */
    body.home-global-soft-wash .site-header .mobile-header-hub-button {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        transform: translateY(0) !important;
        z-index: 3 !important;
    }

    body.home-global-soft-wash .site-header .mobile-header-hub-button:hover {
        transform: translateY(-3px) !important;
    }

    body.home-global-soft-wash .site-header .language-switcher {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        z-index: 3 !important;
    }

    body.home-global-soft-wash .site-header .desktop-nav {
        position: relative !important;
        z-index: 2 !important;
    }

    /* FAQ: prevent questions from sitting too close to the title */
    body.home-global-soft-wash .faq-section .faq-list,
    body.home-global-soft-wash .faq-section .faq-accordion,
    body.home-global-soft-wash .faq-list,
    body.home-global-soft-wash .faq-accordion,
    body.home-global-soft-wash .faq-items {
        margin-top: 42px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .faq-section details,
    body.home-global-soft-wash .faq-section .faq-item,
    body.home-global-soft-wash .faq-list details,
    body.home-global-soft-wash .faq-accordion details {
        position: relative !important;
        z-index: 2 !important;
    }

    /* FAQ subtitle / description: slightly larger, still calm grey-blue */
    body.home-global-soft-wash .faq-section .section-copy,
    body.home-global-soft-wash .faq-section .section-subtitle,
    body.home-global-soft-wash .faq-section .section-description,
    body.home-global-soft-wash .faq-section h2 + p,
    body.home-global-soft-wash #faq .section-copy,
    body.home-global-soft-wash #faq .section-subtitle,
    body.home-global-soft-wash #faq .section-description,
    body.home-global-soft-wash #faq h2 + p {
        font-size: 19px !important;
        line-height: 1.55 !important;
        color: rgba(6, 44, 115, 0.66) !important;
        letter-spacing: -0.01em !important;
    }
}

/* =========================================================
   HOME HEADER FAQ FOOTER ALIGN FIX 26.06.2026
   Restores desktop header vertical alignment,
   fixes homepage FAQ overlap,
   and syncs homepage footer brand hover with SEO page.
   SEO answer page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /* Keep the wash subtle and remove any separate header overlay strip */
    body.home-global-soft-wash::before {
        background:
            linear-gradient(
                180deg,
                rgba(247, 252, 255, 0.055) 0%,
                rgba(247, 252, 255, 0.040) 42%,
                rgba(247, 252, 255, 0.048) 100%
            ),
            radial-gradient(
                circle at 9% 34%,
                rgba(255, 255, 255, 0.065) 0%,
                rgba(255, 255, 255, 0.038) 36%,
                rgba(255, 255, 255, 0) 70%
            ) !important;
    }

    body.home-global-soft-wash .site-header::after {
        content: none !important;
        display: none !important;
    }

    /* Restore desktop header layout without forcing elements to top:0 */
    body.home-global-soft-wash .site-header {
        position: relative !important;
        z-index: 10 !important;
        isolation: auto !important;
    }

    body.home-global-soft-wash .site-header .container.header-inner {
        position: relative !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 64px !important;
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.home-global-soft-wash .site-header .mobile-header-hub-button {
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
    }

    body.home-global-soft-wash .site-header .mobile-header-hub-button:hover {
        transform: translateY(calc(-50% - 3px)) !important;
    }

    body.home-global-soft-wash .site-header .language-switcher {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
    }

    body.home-global-soft-wash .site-header .desktop-nav {
        position: relative !important;
        z-index: 2 !important;
    }

    /* FAQ: precise homepage section fix */
    body.home-global-soft-wash .home-faq-fixed {
        position: relative !important;
    }

    body.home-global-soft-wash .home-faq-fixed h2 {
        position: relative !important;
        z-index: 3 !important;
        margin-bottom: 16px !important;
    }

    body.home-global-soft-wash .home-faq-fixed h2 + p {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 0 !important;
        margin-bottom: 58px !important;
        font-size: 19px !important;
        line-height: 1.55 !important;
        color: rgba(6, 44, 115, 0.66) !important;
        letter-spacing: -0.01em !important;
    }

    body.home-global-soft-wash .home-faq-fixed .faq-list,
    body.home-global-soft-wash .home-faq-fixed .faq-accordion,
    body.home-global-soft-wash .home-faq-fixed .faq-items,
    body.home-global-soft-wash .home-faq-fixed .accordion,
    body.home-global-soft-wash .home-faq-fixed [class*="faq"],
    body.home-global-soft-wash .home-faq-fixed details:first-of-type {
        margin-top: 0 !important;
        top: auto !important;
        transform: none !important;
    }

    body.home-global-soft-wash .home-faq-fixed details:first-of-type,
    body.home-global-soft-wash .home-faq-fixed .faq-item:first-of-type,
    body.home-global-soft-wash .home-faq-fixed .accordion-item:first-of-type {
        margin-top: 0 !important;
    }

    body.home-global-soft-wash .home-faq-fixed details,
    body.home-global-soft-wash .home-faq-fixed .faq-item,
    body.home-global-soft-wash .home-faq-fixed .accordion-item {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Homepage footer brand hover same logic as SEO page:
       avatar static, text + small plane lift together */
    body.home-global-soft-wash .footer-brand-title-link,
    body.home-global-soft-wash .footer-brand-title-link:hover,
    body.home-global-soft-wash .footer-brand-title-link:focus {
        transform: none !important;
    }

    body.home-global-soft-wash .footer-brand-title-link img,
    body.home-global-soft-wash .footer-brand-title-link:hover img {
        transform: none !important;
    }

    body.home-global-soft-wash .footer-brand-title-link span,
    body.home-global-soft-wash .footer-brand-title-link svg,
    body.home-global-soft-wash .footer-brand-title-link .footer-plane,
    body.home-global-soft-wash .footer-brand-title-link .telegram-plane {
        display: inline-block !important;
        transition: transform 180ms ease, filter 180ms ease !important;
    }

    body.home-global-soft-wash .footer-brand-title-link:hover span,
    body.home-global-soft-wash .footer-brand-title-link:hover svg,
    body.home-global-soft-wash .footer-brand-title-link:hover .footer-plane,
    body.home-global-soft-wash .footer-brand-title-link:hover .telegram-plane {
        transform: translateY(-3px) !important;
    }
}

/* =========================================================
   HOME HEADER FAQ FOOTER EXACT SYNC 26.06.2026
   Restores homepage desktop header to previous vertical logic,
   pushes FAQ questions below title/description,
   and syncs footer brand hover with SEO page.
   SEO answer page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /* Header: return to old desktop positioning logic */
    body.home-global-soft-wash .site-header {
        height: auto !important;
        min-height: 64px !important;
        padding: 18px 0 0 !important;
        position: relative !important;
        z-index: 10 !important;
        isolation: auto !important;
    }

    body.home-global-soft-wash .site-header::after {
        content: none !important;
        display: none !important;
    }

    body.home-global-soft-wash .site-header .container.header-inner {
        position: relative !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.home-global-soft-wash .site-header .mobile-header-hub-button {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        transform: translateY(0) !important;
        z-index: 3 !important;
    }

    body.home-global-soft-wash .site-header .mobile-header-hub-button:hover {
        transform: translateY(-3px) !important;
    }

    body.home-global-soft-wash .site-header .language-switcher {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        transform: translateY(0) !important;
        z-index: 3 !important;
    }

    body.home-global-soft-wash .site-header .desktop-nav {
        position: relative !important;
        z-index: 2 !important;
    }

    /* FAQ: force the question block lower, below title + description */
    body.home-global-soft-wash .home-faq-fixed {
        position: relative !important;
        overflow: visible !important;
    }

    body.home-global-soft-wash .home-faq-fixed h2 {
        position: relative !important;
        z-index: 4 !important;
        margin-bottom: 14px !important;
    }

    body.home-global-soft-wash .home-faq-fixed h2 + p {
        position: relative !important;
        z-index: 4 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        font-size: 19px !important;
        line-height: 1.55 !important;
        color: rgba(6, 44, 115, 0.66) !important;
        letter-spacing: -0.01em !important;
    }

    body.home-global-soft-wash .home-faq-fixed .faq-list,
    body.home-global-soft-wash .home-faq-fixed .faq-accordion,
    body.home-global-soft-wash .home-faq-fixed .faq-items,
    body.home-global-soft-wash .home-faq-fixed .accordion,
    body.home-global-soft-wash .home-faq-fixed .faq-grid > :last-child,
    body.home-global-soft-wash .home-faq-fixed .faq-layout > :last-child,
    body.home-global-soft-wash .home-faq-fixed .section-grid > :last-child {
        margin-top: 86px !important;
        padding-top: 0 !important;
        position: relative !important;
        top: auto !important;
        transform: none !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .home-faq-fixed details:first-of-type,
    body.home-global-soft-wash .home-faq-fixed .faq-item:first-of-type,
    body.home-global-soft-wash .home-faq-fixed .accordion-item:first-of-type {
        margin-top: 86px !important;
        position: relative !important;
        top: auto !important;
        transform: none !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .home-faq-fixed details,
    body.home-global-soft-wash .home-faq-fixed .faq-item,
    body.home-global-soft-wash .home-faq-fixed .accordion-item {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Footer brand: same mechanics as SEO page */
    body.home-global-soft-wash .footer-brand-title-link,
    body.home-global-soft-wash .footer-brand-title-link:hover,
    body.home-global-soft-wash .footer-brand-title-link:focus {
        transform: none !important;
    }

    body.home-global-soft-wash .footer-brand-title-link img,
    body.home-global-soft-wash .footer-brand-title-link:hover img,
    body.home-global-soft-wash .footer-brand-title-link:focus img {
        transform: none !important;
        transition: none !important;
    }

    body.home-global-soft-wash .footer-brand-title-link span,
    body.home-global-soft-wash .footer-brand-title-link svg,
    body.home-global-soft-wash .footer-brand-title-link .footer-plane,
    body.home-global-soft-wash .footer-brand-title-link .telegram-plane {
        display: inline-block !important;
        transition: transform 180ms ease, filter 180ms ease !important;
    }

    body.home-global-soft-wash .footer-brand-title-link:hover span,
    body.home-global-soft-wash .footer-brand-title-link:hover svg,
    body.home-global-soft-wash .footer-brand-title-link:hover .footer-plane,
    body.home-global-soft-wash .footer-brand-title-link:hover .telegram-plane {
        transform: translateY(-3px) !important;
    }
}

/* =========================================================
   HOME FAQ HARD FIX FOOTER SEO SYNC 26.06.2026
   Hard-fixes homepage FAQ overlap and syncs footer brand hover with SEO page.
   Header, wash, platform cards and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /* FAQ: force normal vertical flow inside the real FAQ section */
    body.home-global-soft-wash .home-faq-hard-fix {
        position: relative !important;
        overflow: visible !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .container,
    body.home-global-soft-wash .home-faq-hard-fix .section-inner,
    body.home-global-soft-wash .home-faq-hard-fix .faq-inner,
    body.home-global-soft-wash .home-faq-hard-fix .faq-grid,
    body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix h2 {
        position: relative !important;
        z-index: 5 !important;
        margin-bottom: 14px !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix h2 + p {
        position: relative !important;
        z-index: 5 !important;
        margin-top: 0 !important;
        margin-bottom: 72px !important;
        font-size: 19px !important;
        line-height: 1.55 !important;
        color: rgba(6, 44, 115, 0.66) !important;
        letter-spacing: -0.01em !important;
        max-width: 760px !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list,
    body.home-global-soft-wash .home-faq-hard-fix .faq-accordion,
    body.home-global-soft-wash .home-faq-hard-fix .faq-items,
    body.home-global-soft-wash .home-faq-hard-fix .accordion,
    body.home-global-soft-wash .home-faq-hard-fix .faq-cards {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix details,
    body.home-global-soft-wash .home-faq-hard-fix .faq-item,
    body.home-global-soft-wash .home-faq-hard-fix .accordion-item,
    body.home-global-soft-wash .home-faq-hard-fix .faq-card {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        z-index: 2 !important;
    }

    /* If FAQ questions are not wrapped in a known faq-list container */
    body.home-global-soft-wash .home-faq-hard-fix details:first-of-type,
    body.home-global-soft-wash .home-faq-hard-fix .faq-item:first-of-type,
    body.home-global-soft-wash .home-faq-hard-fix .accordion-item:first-of-type,
    body.home-global-soft-wash .home-faq-hard-fix .faq-card:first-of-type {
        margin-top: 0 !important;
    }

    /* Footer brand: SEO-page mechanics on homepage */
    body.home-global-soft-wash footer .footer-brand-title-link,
    body.home-global-soft-wash footer .footer-brand-title-link:hover,
    body.home-global-soft-wash footer .footer-brand-title-link:focus,
    body.home-global-soft-wash footer a:has(img),
    body.home-global-soft-wash footer a:has(img):hover,
    body.home-global-soft-wash footer a:has(img):focus {
        transform: none !important;
    }

    body.home-global-soft-wash footer .footer-brand-title-link img,
    body.home-global-soft-wash footer .footer-brand-title-link:hover img,
    body.home-global-soft-wash footer a:has(img) img,
    body.home-global-soft-wash footer a:has(img):hover img {
        transform: none !important;
        transition: none !important;
    }

    body.home-global-soft-wash footer .footer-brand-title-link span,
    body.home-global-soft-wash footer .footer-brand-title-link svg,
    body.home-global-soft-wash footer a:has(img) span,
    body.home-global-soft-wash footer a:has(img) svg {
        display: inline-block !important;
        transition: transform 180ms ease, filter 180ms ease !important;
    }

    body.home-global-soft-wash footer .footer-brand-title-link:hover span,
    body.home-global-soft-wash footer .footer-brand-title-link:hover svg,
    body.home-global-soft-wash footer a:has(img):hover span,
    body.home-global-soft-wash footer a:has(img):hover svg {
        transform: translateY(-3px) !important;
    }
}

/* =========================================================
   HOME FAQ SUBTITLE SEO STYLE 26.06.2026
   Makes homepage FAQ subtitle closer to SEO answer page text style.
   FAQ layout/spacing, header, cards, footer and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-faq-hard-fix h2 + p,
    body.home-global-soft-wash .home-faq-hard-fix .section-copy,
    body.home-global-soft-wash .home-faq-hard-fix .section-subtitle,
    body.home-global-soft-wash .home-faq-hard-fix .section-description {
        max-width: 780px !important;
        font-size: 20px !important;
        line-height: 1.58 !important;
        font-weight: 500 !important;
        color: rgba(6, 44, 115, 0.72) !important;
        letter-spacing: -0.012em !important;
    }
}

/* =========================================================
   HOME PLATFORM HEADING FORCED BREAK 26.06.2026
   Forces homepage platform heading into:
   Choose a platform or open
   Telegram alerts directly.
   Header, FAQ, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .platform-section .section-copy,
    body.home-global-soft-wash .cards-section .section-copy,
    body.home-global-soft-wash .hub-section .section-copy,
    body.home-global-soft-wash .explore-section .section-copy {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    body.home-global-soft-wash .platform-section .section-copy::before,
    body.home-global-soft-wash .cards-section .section-copy::before,
    body.home-global-soft-wash .hub-section .section-copy::before,
    body.home-global-soft-wash .explore-section .section-copy::before {
        content: "Choose a platform or open\A Telegram alerts directly.";
        display: block !important;
        white-space: pre-line !important;
        font-size: clamp(30px, 3vw, 38px) !important;
        line-height: 1.12 !important;
        font-weight: 900 !important;
        letter-spacing: -0.035em !important;
    }
}

/* =========================================================
   HOME HERO TITLE AND CARDS LIFT 26.06.2026
   Updates desktop homepage visual rhythm:
   hero title sits higher, platform cards start higher.
   Header button, FAQ, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /* Lift the hero text area a little higher */
    body.home-global-soft-wash .hero-copy,
    body.home-global-soft-wash .home-hero-copy,
    body.home-global-soft-wash .brand-hero-copy,
    body.home-global-soft-wash .hero-content,
    body.home-global-soft-wash .home-hero-content,
    body.home-global-soft-wash .brand-hero-content {
        transform: translateY(-34px) !important;
    }

    /* Keep hero title strong but slightly tighter after the new wording */
    body.home-global-soft-wash .hero-copy h1,
    body.home-global-soft-wash .home-hero-copy h1,
    body.home-global-soft-wash .brand-hero-copy h1,
    body.home-global-soft-wash .hero-content h1,
    body.home-global-soft-wash .home-hero-content h1,
    body.home-global-soft-wash .brand-hero-content h1,
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .home-hero h1,
    body.home-global-soft-wash .brand-hero h1 {
        line-height: 1.03 !important;
        letter-spacing: -0.045em !important;
    }

    /* Pull the platform/card section upward so first row is visible on page open */
    body.home-global-soft-wash section:has(.platform-card),
    body.home-global-soft-wash section:has(.hub-card),
    body.home-global-soft-wash section:has(.brand-card),
    body.home-global-soft-wash section:has(.cards-grid),
    body.home-global-soft-wash section:has(.platform-grid),
    body.home-global-soft-wash section:has(.hub-grid),
    body.home-global-soft-wash section:has(.brand-card-grid),
    body.home-global-soft-wash .platform-section,
    body.home-global-soft-wash .cards-section,
    body.home-global-soft-wash .hub-section,
    body.home-global-soft-wash .explore-section {
        margin-top: -74px !important;
        padding-top: 20px !important;
    }

    /* Keep the heading close to the cards after lifting the whole block */
    body.home-global-soft-wash section:has(.platform-card) h2,
    body.home-global-soft-wash section:has(.hub-card) h2,
    body.home-global-soft-wash section:has(.brand-card) h2,
    body.home-global-soft-wash section:has(.cards-grid) h2,
    body.home-global-soft-wash section:has(.platform-grid) h2,
    body.home-global-soft-wash section:has(.hub-grid) h2,
    body.home-global-soft-wash section:has(.brand-card-grid) h2,
    body.home-global-soft-wash .platform-section h2,
    body.home-global-soft-wash .cards-section h2,
    body.home-global-soft-wash .hub-section h2,
    body.home-global-soft-wash .explore-section h2 {
        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }
}

/* =========================================================
   HOME EXACT HERO PLATFORM LIFT 28.06.2026
   Uses exact template classes:
   .home-main-hero and .home-platform-cards-section.
   Header, FAQ, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /* Lift the whole hero area by reducing its vertical space */
    body.home-global-soft-wash .home-main-hero {
        min-height: 540px !important;
        padding-top: 18px !important;
        padding-bottom: 4px !important;
    }

    body.home-global-soft-wash .home-main-hero .hero-grid {
        min-height: 455px !important;
        align-items: center !important;
    }

    /* Keep the previous horizontal placement, but lift the title block upward */
    body.home-global-soft-wash .home-main-hero .hero-content {
        transform: translate(-35px, -58px) !important;
    }

    body.home-global-soft-wash .home-main-hero h1 {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        line-height: 1.03 !important;
        letter-spacing: -0.045em !important;
    }

    body.home-global-soft-wash .home-main-hero .lead {
        margin-top: 0 !important;
        margin-bottom: 22px !important;
    }

    /* Pull the exact cards section upward */
    body.home-global-soft-wash .home-platform-cards-section {
        margin-top: -96px !important;
        padding-top: 0 !important;
        padding-bottom: 30px !important;
    }

    body.home-global-soft-wash .home-platform-cards-section .section-heading {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
        padding-top: 0 !important;
    }

    body.home-global-soft-wash .home-platform-cards-section h2 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid {
        margin-top: 0 !important;
    }
}

/* =========================================================
   HOME HERO TITLE EXACT TWO LINES 28.06.2026
   Exact real structure from rendered homepage:
   .home-main-hero .hero-content h1
   Forces title to:
   Drop Codes, Guides
   Real-Time Alerts
   Header, cards, FAQ, footer, SEO page and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-main-hero .hero-content h1 {
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        font-size: clamp(54px, 4.85vw, 72px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        text-wrap: initial !important;
    }

    body.home-global-soft-wash .home-main-hero .hero-content h1 br {
        display: block !important;
        content: "" !important;
    }
}

/* =========================================================
   HOME CARDS SOFT ATTENTION MOTION 28.06.2026
   Subtle conversion motion for homepage image cards:
   one card at a time softly lifts and returns.
   Desktop only. No blinking. No shaking.
   Header, hero, FAQ, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card {
        animation-name: homeCardSoftLift;
        animation-duration: 18s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        will-change: translate;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(1) {
        animation-delay: 0s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(2) {
        animation-delay: 9s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(3) {
        animation-delay: 4.5s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(4) {
        animation-delay: 13.5s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(5) {
        animation-delay: 2.2s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(6) {
        animation-delay: 11.2s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(7) {
        animation-delay: 6.8s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:nth-child(8) {
        animation-delay: 15.6s;
    }

    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:hover,
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card:focus-visible {
        animation-play-state: paused;
        translate: 0 0;
    }
}

@keyframes homeCardSoftLift {
    0% {
        translate: 0 0;
    }

    5% {
        translate: 0 -8px;
    }

    10% {
        translate: 0 -8px;
    }

    16% {
        translate: 0 0;
    }

    100% {
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .image-card {
        animation: none !important;
        translate: 0 0 !important;
    }
}

/* =========================================================
   HOME FAQ DISABLE STICKY 28.06.2026
   Fixes homepage FAQ heading sticking at viewport top and
   questions/next section visually sliding over it.
   Exact real structure:
   .home-faq-hard-fix .faq-heading + .faq-list
   Hero, cards motion, header, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-faq-hard-fix,
    body.home-global-soft-wash .home-faq-hard-fix .container,
    body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
    body.home-global-soft-wash .home-faq-hard-fix .section-heading,
    body.home-global-soft-wash .home-faq-hard-fix .faq-heading,
    body.home-global-soft-wash .home-faq-hard-fix h2,
    body.home-global-soft-wash .home-faq-hard-fix .section-copy,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        translate: none !important;
        z-index: auto !important;
        overflow: visible !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix {
        isolation: auto !important;
        padding-top: 88px !important;
        padding-bottom: 82px !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-heading {
        display: block !important;
        margin-bottom: 54px !important;
        padding-bottom: 0 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-heading h2 {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-heading .section-copy {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix + .info-section {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 0 !important;
        padding-top: 70px !important;
    }
}

/* =========================================================
   HOME LOGO SOFT MATTE VEIL 28.06.2026
   Adds a very soft matte veil over the large background logo area.
   No sharp rectangle, no blur, no visible hard boundary.
   Hero text, cards, FAQ, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-main-hero {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
    }

    body.home-global-soft-wash .home-main-hero::before {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: 0;

        /*
           Big smooth ellipse over the background logo/avatar area.
           The edges fade out slowly, so there is no visible border.
        */
        left: -13vw;
        top: -90px;
        width: 58vw;
        height: 760px;

        background:
            radial-gradient(
                ellipse at 48% 46%,
                rgba(247, 252, 255, 0.34) 0%,
                rgba(247, 252, 255, 0.28) 26%,
                rgba(247, 252, 255, 0.16) 48%,
                rgba(247, 252, 255, 0.075) 64%,
                rgba(247, 252, 255, 0.00) 82%
            );

        opacity: 1 !important;
    }

    body.home-global-soft-wash .home-main-hero .hero-grid,
    body.home-global-soft-wash .home-main-hero .hero-content {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* =========================================================
   ES-MX HERO TITLE TWO LINES LIKE EN 28.06.2026
   Mexican homepage H1 uses the same two-line logic as EN:
   Códigos, guías
   Alertas en tiempo real
   Header, cards, FAQ, footer, EN page, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    html[lang="es-MX"] body.home-global-soft-wash .home-main-hero .hero-content h1 {
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        font-size: clamp(54px, 4.85vw, 72px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        text-wrap: initial !important;
    }

    html[lang="es-MX"] body.home-global-soft-wash .home-main-hero .hero-content h1 br {
        display: block !important;
    }
}

/* =========================================================
   ES-MX PLATFORM HEADING TWO LINES 28.06.2026
   Forces ES-MX card block H2 into:
   Elige una plataforma o abre
   las alertas de Telegram directamente.
   EN page, hero, cards, FAQ, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    html[lang="es-MX"] body.home-global-soft-wash .home-platform-cards-section .section-heading h2 {
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-wrap: initial !important;
    }

    html[lang="es-MX"] body.home-global-soft-wash .home-platform-cards-section .section-heading h2 br {
        display: block !important;
    }
}

/* =========================================================
   HOME FAQ SOFT NO FIXED BACKGROUND 28.06.2026
   Removes fixed-background behavior.
   Keeps page background scrolling naturally, while reducing FAQ open layout jump.
   Hero, cards, ES-MX texts, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    html {
        overflow-anchor: auto !important;
    }

    body.home-global-soft-wash {
        background-attachment: scroll !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        overflow-anchor: auto !important;
    }

    /*
       Important: keep the soft wash layer independent,
       but do NOT force the real page background to fixed.
    */
    body.home-global-soft-wash::before {
        transform: none !important;
        translate: none !important;
    }

    /*
       FAQ click fix: prevent browser scroll anchoring/repaint jump
       inside the FAQ only, without freezing the whole background.
    */
    body.home-global-soft-wash .home-faq-hard-fix,
    body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
    body.home-global-soft-wash .home-faq-hard-fix .faq-heading,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list,
    body.home-global-soft-wash .home-faq-hard-fix details,
    body.home-global-soft-wash .home-faq-hard-fix summary,
    body.home-global-soft-wash .home-faq-hard-fix details p {
        overflow-anchor: none !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix details {
        contain: layout paint !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix details[open] {
        contain: layout paint !important;
    }
}

/* =========================================================
   HOME FAQ NO BACKGROUND REPAINT 28.06.2026
   Fixes visible background movement when FAQ <details> open.
   Does NOT use fixed background.
   Exact real structure:
   .home-faq-hard-fix .faq-list details
   Hero, cards, card motion, EN/ES-MX texts, footer, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /*
       Keep the main page background scrolling naturally,
       but size it by viewport width, not by changing page height.
       This prevents FAQ open/close from recalculating the background.
    */
    body.home-global-soft-wash {
        background-attachment: scroll !important;
        background-size: 100vw auto !important;
        background-position: center -22px !important;
        background-repeat: no-repeat !important;
    }

    /*
       FAQ cards: remove glass/backdrop behavior only here.
       The previous translucent + backdrop-filter effect made the background
       visually repaint when answers opened.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] {
        background: rgba(255, 255, 255, 0.985) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        contain: none !important;
        transform: none !important;
        will-change: auto !important;
        isolation: isolate !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details p {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    /*
       Keep FAQ opening smooth, but only the text/card height changes.
       No background animation/repaint effect.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow-anchor: none !important;
    }
}

/* =========================================================
   HOME FAQ RESERVE ANSWER SPACE 28.06.2026
   Prevents lower info cards/footer from jumping when FAQ answers open.
   Exact structure:
   .home-faq-hard-fix .faq-list details
   Background remains natural scroll, not fixed.
   Hero, cards, card motion, texts, footer styling, SEO page, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /*
       Reserve enough vertical space for one opened FAQ answer.
       This stops the next section and footer from moving on click.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        min-height: 382px !important;
        align-content: start !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix {
        min-height: 690px !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details {
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details p {
        margin-bottom: 0 !important;
    }

    /*
       Keep the lower block visually independent.
       It should not slide over or jump when FAQ changes.
    */
    body.home-global-soft-wash .home-faq-hard-fix + .info-section {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 0 !important;
    }
}

/* =========================================================
   HOME FAQ HOVER OVERLAY 28.06.2026
   Desktop FAQ answers open on hover and float above the layout.
   Answers no longer push lower FAQ rows, info cards or footer.
   Mobile click behavior stays unchanged.
   Exact structure:
   .home-faq-hard-fix .faq-list details > summary + p
   Hero, platform cards, footer styling, SEO page and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        position: relative !important;
        overflow: visible !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details {
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
        cursor: pointer !important;
        contain: none !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] {
        z-index: 40 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
        position: relative !important;
        z-index: 2 !important;
    }

    /*
       Answer becomes a floating panel.
       It is removed from document flow, so lower rows do not move.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details > p {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 10px) !important;
        z-index: 45 !important;

        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 18px 22px 20px !important;

        background: rgba(255, 255, 255, 0.985) !important;
        border: 1px solid rgba(30, 110, 210, 0.14) !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 42px rgba(15, 87, 171, 0.16) !important;

        color: rgba(6, 44, 115, 0.76) !important;
        line-height: 1.55 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: auto !important;

        transform: translateY(-4px) !important;
        transition:
            opacity 160ms ease,
            transform 160ms ease,
            visibility 160ms ease !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        will-change: opacity, transform !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] > p,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover > p {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /*
       Make sure the next section/footer never jumps because FAQ answer is overlayed.
    */
    body.home-global-soft-wash .home-faq-hard-fix + .info-section {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* =========================================================
   HOME FAQ SHARED HOVER CARD 28.06.2026
   Keeps desktop FAQ hover behavior, but visually returns
   the old single-card expansion feeling:
   question + answer share one common background.
   Lower rows/cards/footer do not move.
   Mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        position: relative !important;
        overflow: visible !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details {
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
        background: rgba(255, 255, 255, 0.985) !important;
        border: 1px solid rgba(30, 110, 210, 0.12) !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 34px rgba(15, 87, 171, 0.08) !important;
        isolation: isolate !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] {
        z-index: 60 !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /*
       This pseudo-element is the "expanded card" background.
       It visually extends the same FAQ card downward without changing layout height.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details::after {
        content: "";
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: -82px !important;
        z-index: 0 !important;
        pointer-events: none !important;

        background: rgba(255, 255, 255, 0.985) !important;
        border: 1px solid rgba(30, 110, 210, 0.14) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 42px rgba(15, 87, 171, 0.14) !important;

        opacity: 0 !important;
        transform: translateY(-3px) !important;
        transition:
            opacity 160ms ease,
            transform 160ms ease !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover::after,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open]::after {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
        position: relative !important;
        z-index: 2 !important;
        background: transparent !important;
    }

    /*
       Answer is still out of flow, so lower rows do not move.
       But it no longer has its own separate background.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details > p {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 2px) !important;
        z-index: 2 !important;

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

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

        color: rgba(6, 44, 115, 0.76) !important;
        line-height: 1.55 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-4px) !important;
        transition:
            opacity 160ms ease,
            transform 160ms ease,
            visibility 160ms ease !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover > p,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] > p {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* =========================================================
   HOME FAQ ANSWER TEXT LARGER 28.06.2026
   Makes FAQ answer text slightly larger inside the hover-expanded card.
   FAQ mechanics, shared background, footer, hero, cards, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details > p {
        font-size: 18px !important;
        line-height: 1.62 !important;
        font-weight: 500 !important;
        letter-spacing: -0.008em !important;
    }
}

/* =========================================================
   HOME FAQ COMPACT HOVER EXPANSION 28.06.2026
   Reduces the height of the white expanded FAQ background.
   Keeps hover mechanics and shared-card visual style.
   Footer, hero, cards, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /*
       Was visually too tall after answer text was increased.
       Reduce the shared expanded card area closer to old click-open height.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details::after {
        bottom: -58px !important;
        border-radius: 22px !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details > p {
        top: calc(100% - 1px) !important;
        padding: 0 22px 12px !important;
        line-height: 1.56 !important;
    }
}

/* =========================================================
   HOME SMALL COPY MATCH HERO LEAD 28.06.2026
   Aligns FAQ subtitle with its heading and makes small copy
   closer to the hero lead size.
   FAQ hover mechanics, footer, hero, platform cards, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /*
       FAQ subtitle under "Frequently Asked Questions":
       centered under the title, same visual scale as hero lead.
    */
    body.home-global-soft-wash .home-faq-hard-fix .faq-heading {
        text-align: center !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-heading .section-copy,
    body.home-global-soft-wash .home-faq-hard-fix .section-copy {
        display: block !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;

        font-size: 21px !important;
        line-height: 1.58 !important;
        font-weight: 500 !important;
        letter-spacing: -0.012em !important;
        color: rgba(6, 44, 115, 0.72) !important;
    }

    /*
       Bottom info-card descriptions:
       Wager / Claims / Drop Value / How to Redeem.
    */
    body.home-global-soft-wash .info-section .info-card p {
        font-size: 19px !important;
        line-height: 1.58 !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        color: rgba(6, 44, 115, 0.72) !important;
    }
}

/* =========================================================
   SEO ANSWERS DIRECTORY SECTION 28.06.2026
   Reuses SEO answer page visual for /en/answers/ and /en/answers/{slug}/.
   Adds clickable answer-list cards.
   Homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-answers-directory-section {
    padding-top: 86px !important;
    padding-bottom: 86px !important;
}

body.seo-answer-page .seo-answer-link-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 0 !important;
}

body.seo-answer-page .seo-answer-link-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-decoration: none !important;

    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(30, 110, 210, 0.12) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 36px rgba(15, 87, 171, 0.08) !important;

    padding: 22px 24px !important;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease !important;
}

body.seo-answer-page .seo-answer-link-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(11, 101, 232, 0.24) !important;
    box-shadow: 0 22px 48px rgba(15, 87, 171, 0.14) !important;
    background: rgba(255,255,255,0.985) !important;
}

body.seo-answer-page .seo-answer-link-question {
    color: #073f92 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
}

body.seo-answer-page .seo-answer-link-summary {
    color: rgba(6, 44, 115, 0.68) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

body.seo-answer-page .seo-answers-directory-section .faq-heading h2 {
    margin-bottom: 16px !important;
}

body.seo-answer-page .seo-answers-directory-section .section-copy {
    max-width: 640px !important;
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-answers-directory-section {
        padding-top: 52px !important;
        padding-bottom: 56px !important;
    }

    body.seo-answer-page .seo-answer-link-card {
        padding: 18px 18px !important;
        border-radius: 18px !important;
    }

    body.seo-answer-page .seo-answer-link-question {
        font-size: 17px !important;
    }

    body.seo-answer-page .seo-answer-link-summary {
        font-size: 15px !important;
    }
}

/* =========================================================
   SEO FEATURED ANSWER CARD IN ANSWERS 28.06.2026
   Makes the original ready SEO answer visible on /en/answers/
   as the main featured answer before the rest of the list.
   Homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

body.seo-answer-page .seo-featured-answer-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-decoration: none !important;

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

    background:
        linear-gradient(135deg, rgba(255,255,255,0.985), rgba(236,247,255,0.96)) !important;
    border: 1px solid rgba(30, 110, 210, 0.16) !important;
    border-radius: 28px !important;
    box-shadow: 0 22px 54px rgba(15, 87, 171, 0.12) !important;

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

body.seo-answer-page .seo-featured-answer-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(11, 101, 232, 0.28) !important;
    box-shadow: 0 30px 68px rgba(15, 87, 171, 0.18) !important;
}

body.seo-answer-page .seo-featured-answer-label {
    width: max-content !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(11, 101, 232, 0.10) !important;
    color: #0b65e8 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

body.seo-answer-page .seo-featured-answer-title {
    color: #073f92 !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
}

body.seo-answer-page .seo-featured-answer-copy {
    max-width: 920px !important;
    color: rgba(6, 44, 115, 0.74) !important;
    font-size: 19px !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
    letter-spacing: -0.012em !important;
}

body.seo-answer-page .seo-featured-answer-cta {
    width: max-content !important;
    margin-top: 6px !important;
    padding: 13px 18px !important;
    border-radius: 999px !important;
    background: #e3f1ff !important;
    color: #073f92 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    box-shadow: 0 12px 28px rgba(11, 101, 232, 0.14) !important;
}

body.seo-answer-page .seo-featured-answer-card:hover .seo-featured-answer-cta {
    background: #eef8ff !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-featured-answer-card {
        padding: 22px 20px !important;
        border-radius: 22px !important;
    }

    body.seo-answer-page .seo-featured-answer-title {
        font-size: 26px !important;
    }

    body.seo-answer-page .seo-featured-answer-copy {
        font-size: 16px !important;
    }
}

/* =========================================================
   SEO TOP MORE ANSWERS PANEL 28.06.2026
   Moves More Answers to the top right, directly under the top CTA.
   Shows only question rows, no short-answer summaries.
   Removes need for lower More Answers section.
   Homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-answer-side-rail {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        min-width: 0 !important;
    }

    body.seo-answer-page .seo-answer-side-rail .seo-telegram-panel {
        width: 100% !important;
        margin: 0 !important;
    }

    body.seo-answer-page .seo-top-answers-card {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;

        background: rgba(255,255,255,0.965) !important;
        border: 1px solid rgba(30, 110, 210, 0.13) !important;
        border-radius: 26px !important;
        box-shadow: 0 20px 48px rgba(15, 87, 171, 0.11) !important;

        padding: 22px 22px 20px !important;
    }

    body.seo-answer-page .seo-top-answers-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    body.seo-answer-page .seo-top-answers-head h2 {
        margin: 0 !important;
        color: #073f92 !important;
        font-size: 24px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        letter-spacing: -0.035em !important;
    }

    body.seo-answer-page .seo-top-answers-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    body.seo-answer-page .seo-top-answer-row {
        display: block !important;
        padding: 13px 0 !important;

        color: #073f92 !important;
        text-decoration: none !important;
        font-size: 16.5px !important;
        line-height: 1.32 !important;
        font-weight: 800 !important;
        letter-spacing: -0.012em !important;

        border-top: 1px solid rgba(30, 110, 210, 0.10) !important;
        transition:
            color 160ms ease,
            transform 160ms ease,
            padding-left 160ms ease !important;
    }

    body.seo-answer-page .seo-top-answer-row:hover {
        color: #0b65e8 !important;
        transform: translateX(3px) !important;
        padding-left: 4px !important;
    }

    body.seo-answer-page .seo-answers-directory-section {
        display: none !important;
    }

    body.seo-answer-page .seo-featured-answer-card {
        display: none !important;
    }
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-answer-side-rail {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    body.seo-answer-page .seo-top-answers-card {
        background: rgba(255,255,255,0.965) !important;
        border: 1px solid rgba(30, 110, 210, 0.13) !important;
        border-radius: 22px !important;
        box-shadow: 0 16px 36px rgba(15, 87, 171, 0.10) !important;
        padding: 18px 18px 16px !important;
    }

    body.seo-answer-page .seo-top-answers-head h2 {
        margin: 0 0 10px !important;
        color: #073f92 !important;
        font-size: 22px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        letter-spacing: -0.03em !important;
    }

    body.seo-answer-page .seo-top-answers-list {
        display: flex !important;
        flex-direction: column !important;
    }

    body.seo-answer-page .seo-top-answer-row {
        display: block !important;
        padding: 12px 0 !important;
        color: #073f92 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        line-height: 1.34 !important;
        font-weight: 800 !important;
        border-top: 1px solid rgba(30, 110, 210, 0.10) !important;
    }

    body.seo-answer-page .seo-answers-directory-section,
    body.seo-answer-page .seo-featured-answer-card {
        display: none !important;
    }
}

/* =========================================================
   SEO ANSWERS QUICK LEFT OF SIDE RAIL 28.06.2026
   Places Quick Answer inside the left column, aligned beside
   the top CTA + More Answers side rail.
   Homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-answer-top {
        grid-template-columns: minmax(0, 740px) 350px !important;
        gap: 56px !important;
        align-items: start !important;
    }

    body.seo-answer-page .seo-answer-copy {
        min-width: 0 !important;
    }

    body.seo-answer-page .seo-answer-copy .seo-quick-answer,
    body.seo-answer-page .seo-answer-copy-quick {
        width: 100% !important;
        max-width: 720px !important;
        box-sizing: border-box !important;

        margin-top: 28px !important;
        margin-bottom: 0 !important;
        padding: 24px 30px !important;
    }

    body.seo-answer-page .seo-answer-side-rail {
        width: 350px !important;
        justify-self: end !important;
        align-self: start !important;
    }

    body.seo-answer-page .seo-answer-side-rail .seo-telegram-panel,
    body.seo-answer-page .seo-answer-side-rail .seo-top-answers-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-answer-copy .seo-quick-answer,
    body.seo-answer-page .seo-answer-copy-quick {
        margin-top: 22px !important;
    }
}

/* =========================================================
   SEO ANSWERS FOOTER UP TO GLOW LINE 28.06.2026
   Removes the light gap before the lower blue footer on Answers/SEO pages.
   Footer height is not changed.
   Quick Answer, More Answers, hero, cards, homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page main {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.seo-answer-page .seo-final-cta-section {
        padding-bottom: 24px !important;
        margin-bottom: 0 !important;
    }

    body.seo-answer-page .seo-final-cta {
        margin-bottom: 0 !important;
    }

    body.seo-answer-page .site-footer {
        margin-top: -28px !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   SEO ANSWERS FOOTER SLIGHTLY LOWER 28.06.2026
   Lowers the blue footer slightly so it no longer overlaps
   the "Want faster alerts and better drops?" CTA block.
   Footer height is not changed.
   Quick Answer, More Answers, hero, cards, homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-final-cta-section {
        padding-bottom: 36px !important;
        margin-bottom: 0 !important;
    }

    body.seo-answer-page .seo-final-cta {
        margin-bottom: 0 !important;
    }

    body.seo-answer-page .site-footer {
        margin-top: -12px !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   SEO MORE ANSWERS FAST LINE BREAK 28.06.2026
   Prevents layout jump in More Answers when hovering the
   "Why do drop codes expire so fast?" row.
   Keeps visual hover movement via transform, without changing layout width.
   Homepage, footer, Quick Answer, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-top-answer-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.seo-answer-page .seo-top-answer-row:hover {
        transform: translateX(3px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.seo-answer-page .seo-top-answer-row-expire br {
        display: block !important;
    }
}

/* =========================================================
   SEO PLATFORM CARDS SOFT ATTENTION MOTION 28.06.2026
   Adds the same subtle card motion from homepage to SEO/Answers platform cards.
   One card at a time softly lifts and returns.
   Desktop only. No blinking. No shaking.
   More Answers, Quick Answer, footer, homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-card-grid .image-card {
        animation-name: seoCardSoftLift;
        animation-duration: 18s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        will-change: translate;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(1) {
        animation-delay: 0s;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(2) {
        animation-delay: 9s;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(3) {
        animation-delay: 4.5s;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(4) {
        animation-delay: 13.5s;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(5) {
        animation-delay: 2.2s;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(6) {
        animation-delay: 11.2s;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(7) {
        animation-delay: 6.8s;
    }

    body.seo-answer-page .seo-card-grid .image-card:nth-child(8) {
        animation-delay: 15.6s;
    }

    body.seo-answer-page .seo-card-grid .image-card:hover,
    body.seo-answer-page .seo-card-grid .image-card:focus-visible {
        animation-play-state: paused;
        translate: 0 0;
    }
}

@keyframes seoCardSoftLift {
    0% {
        translate: 0 0;
    }

    5% {
        translate: 0 -8px;
    }

    10% {
        translate: 0 -8px;
    }

    16% {
        translate: 0 0;
    }

    100% {
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.seo-answer-page .seo-card-grid .image-card {
        animation: none !important;
        translate: 0 0 !important;
    }
}

/* =========================================================
   SEO MORE ANSWERS ABOVE CTA 28.06.2026
   Places More Answers above the right CTA card on Answers/SEO pages.
   CTA moves lower, closer to the platform cards area.
   Quick Answer, cards motion, footer, homepage, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-answer-side-rail {
        gap: 20px !important;
    }

    body.seo-answer-page .seo-answer-side-rail .seo-top-answers-card {
        order: 1 !important;
    }

    body.seo-answer-page .seo-answer-side-rail .seo-telegram-panel {
        order: 2 !important;
    }
}

@media (max-width: 980px) {
    body.seo-answer-page .seo-answer-side-rail .seo-top-answers-card {
        order: 1 !important;
    }

    body.seo-answer-page .seo-answer-side-rail .seo-telegram-panel {
        order: 2 !important;
    }
}


/* =========================================================
   SEO CLEAN HOME BACKGROUND 28.06.2026
   Clean reset after header/background experiment.
   SEO/Answers page uses the same full-page background image logic as homepage.
   Header, hero and content sections are transparent so there are no separate color strips.
   No extra white-wash is added here.
   Homepage, More Answers, CTA, Quick Answer, footer, cards motion and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page {
        position: relative !important;
        min-height: 100vh !important;

        background-color: #f5fbff !important;
        background-image: url("/static/images/dropcodeshub-site-bg.webp") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center -22px !important;
        background-attachment: scroll !important;
    }

    body.seo-answer-page::before,
    body.seo-answer-page::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
    }

    body.seo-answer-page .site-header {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.seo-answer-page .site-header::before,
    body.seo-answer-page .site-header::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
    }

    body.seo-answer-page .seo-answer-hero,
    body.seo-answer-page .seo-platform-section,
    body.seo-answer-page .seo-full-answer-section,
    body.seo-answer-page .seo-related-section,
    body.seo-answer-page .seo-faq-section,
    body.seo-answer-page .seo-final-cta-section {
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page main,
    body.seo-answer-page .site-header,
    body.seo-answer-page .site-footer,
    body.seo-answer-page .container,
    body.seo-answer-page .seo-answer-container {
        position: relative !important;
    }

    body.seo-answer-page main,
    body.seo-answer-page .site-header,
    body.seo-answer-page .site-footer {
        z-index: 1 !important;
    }

    body.seo-answer-page .container,
    body.seo-answer-page .seo-answer-container {
        z-index: 2 !important;
    }
}

/* =========================================================
   SEO NO BACKGROUND WHITE WASH 28.06.2026
   Removes background whitening/soft-wash only from SEO/Answers pages.
   Keeps one full-page background image like homepage.
   Homepage, cards, More Answers, Quick Answer, footer and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page {
        background-color: #f5fbff !important;
        background-image: url("/static/images/dropcodeshub-site-bg.webp") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center -22px !important;
        background-attachment: scroll !important;
    }

    body.seo-answer-page::before,
    body.seo-answer-page::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page .site-header,
    body.seo-answer-page .seo-answer-hero,
    body.seo-answer-page .seo-platform-section,
    body.seo-answer-page .seo-full-answer-section,
    body.seo-answer-page .seo-related-section,
    body.seo-answer-page .seo-faq-section,
    body.seo-answer-page .seo-final-cta-section {
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page .site-header::before,
    body.seo-answer-page .site-header::after,
    body.seo-answer-page .seo-answer-hero::before,
    body.seo-answer-page .seo-answer-hero::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        background-image: none !important;
    }
}

/* =========================================================
   SEO DISABLE MAIN WHITE WASH LAYER 28.06.2026
   Disables old SEO main::before light overlay that was still whitening the background.
   Keeps one full-page background image visible on SEO/Answers pages.
   Homepage, More Answers, Quick Answer, CTA, footer, card motion and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page main::before,
    body.seo-answer-page main::after,
    body.seo-answer-page .section-soft::before,
    body.seo-answer-page .section-soft::after,
    body.seo-answer-page .seo-platform-section::before,
    body.seo-answer-page .seo-platform-section::after,
    body.seo-answer-page .seo-answer-hero::before,
    body.seo-answer-page .seo-answer-hero::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page main {
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page main > section,
    body.seo-answer-page .seo-answer-hero,
    body.seo-answer-page .seo-platform-section,
    body.seo-answer-page .seo-full-answer-section,
    body.seo-answer-page .seo-final-cta-section {
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page {
        background-color: #f5fbff !important;
        background-image: url("/static/images/dropcodeshub-site-bg.webp") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center -22px !important;
        background-attachment: scroll !important;
    }
}

/* =========================================================
   SEO REMOVE HEADER WHITE LINE 28.06.2026
   Removes the visible divider line between SEO/Answers header and background.
   Background image, More Answers, Quick Answer, CTA, footer, cards motion and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .site-header {
        border-bottom: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page .site-header::before,
    body.seo-answer-page .site-header::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page .seo-answer-hero {
        border-top: 0 !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   SEO FULL PAGE WATERMARK WASH 28.06.2026
   Adds a controlled full-page soft white veil over the SEO background image.
   Purpose: make the large background logo feel like a watermark.
   No blur, no filter, no brightness flash: sharp background edges remain visible.
   Layer sits above the background image and below header/content/cards.
   Homepage, card motion, More Answers, Quick Answer, CTA, footer and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page {
        position: relative !important;
        isolation: isolate !important;

        background-color: #f5fbff !important;
        background-image: url("/static/images/dropcodeshub-site-bg.webp") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center -22px !important;
        background-attachment: scroll !important;
    }

    body.seo-answer-page::before {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        /*
           Soft watermark veil:
           - no blur
           - no filter
           - no hard rectangle
           - the logo remains sharp, just more matte/white.
        */
        background:
            linear-gradient(
                180deg,
                rgba(248, 252, 255, 0.44) 0%,
                rgba(248, 252, 255, 0.40) 42%,
                rgba(248, 252, 255, 0.34) 100%
            ),
            radial-gradient(
                ellipse at 50% 28%,
                rgba(255, 255, 255, 0.30) 0%,
                rgba(255, 255, 255, 0.22) 36%,
                rgba(255, 255, 255, 0.12) 62%,
                rgba(255, 255, 255, 0.00) 86%
            ) !important;
    }

    body.seo-answer-page::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page .site-header,
    body.seo-answer-page main,
    body.seo-answer-page .site-footer {
        position: relative !important;
        z-index: 2 !important;
    }

    body.seo-answer-page .site-header,
    body.seo-answer-page .seo-answer-hero,
    body.seo-answer-page .seo-platform-section,
    body.seo-answer-page .seo-full-answer-section,
    body.seo-answer-page .seo-final-cta-section {
        background: transparent !important;
        background-image: none !important;
    }

    body.seo-answer-page main::before,
    body.seo-answer-page main::after,
    body.seo-answer-page .site-header::before,
    body.seo-answer-page .site-header::after,
    body.seo-answer-page .seo-answer-hero::before,
    body.seo-answer-page .seo-answer-hero::after,
    body.seo-answer-page .section-soft::before,
    body.seo-answer-page .section-soft::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        background-image: none !important;
    }
}

/* =========================================================
   SEO WATERMARK WASH STRONGER 28.06.2026
   Stronger matte white veil for SEO/Answers background.
   Makes the background logo/avatar act more like a watermark.
   No blur, no filter, no glow: edges stay sharp, only intensity is reduced.
   Homepage, More Answers, Quick Answer, CTA, footer, card motion and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page::before {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        background:
            linear-gradient(
                180deg,
                rgba(248, 252, 255, 0.58) 0%,
                rgba(248, 252, 255, 0.54) 42%,
                rgba(248, 252, 255, 0.48) 100%
            ),
            radial-gradient(
                ellipse at 50% 28%,
                rgba(255, 255, 255, 0.40) 0%,
                rgba(255, 255, 255, 0.32) 34%,
                rgba(255, 255, 255, 0.20) 62%,
                rgba(255, 255, 255, 0.04) 86%,
                rgba(255, 255, 255, 0.00) 100%
            ) !important;
    }

    body.seo-answer-page .site-header,
    body.seo-answer-page main,
    body.seo-answer-page .site-footer {
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   SEO WATERMARK WASH EXTRA STRONG 28.06.2026
   Stronger full-page matte white veil for SEO/Answers background.
   Goal: background logo/avatar becomes closer to a watermark.
   No blur, no brightness flash, no filter: edges remain sharp.
   Homepage, cards, More Answers, Quick Answer, CTA, footer and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page::before {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        background:
            linear-gradient(
                180deg,
                rgba(248, 252, 255, 0.68) 0%,
                rgba(248, 252, 255, 0.64) 42%,
                rgba(248, 252, 255, 0.58) 100%
            ),
            radial-gradient(
                ellipse at 50% 28%,
                rgba(255, 255, 255, 0.50) 0%,
                rgba(255, 255, 255, 0.42) 34%,
                rgba(255, 255, 255, 0.28) 62%,
                rgba(255, 255, 255, 0.10) 86%,
                rgba(255, 255, 255, 0.02) 100%
            ) !important;
    }

    body.seo-answer-page .site-header,
    body.seo-answer-page main,
    body.seo-answer-page .site-footer {
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   SEO WATERMARK WASH MATTE STRONG 28.06.2026
   Stronger but non-bright matte veil for SEO/Answers background.
   Makes the background logo/avatar look more like a watermark.
   Uses soft milk-blue tones instead of pure white glare.
   No blur, no filter, no glow: logo edges remain sharp.
   Homepage, cards, More Answers, Quick Answer, CTA, footer and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page::before {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        background:
            linear-gradient(
                180deg,
                rgba(241, 248, 252, 0.78) 0%,
                rgba(241, 248, 252, 0.74) 42%,
                rgba(241, 248, 252, 0.68) 100%
            ),
            radial-gradient(
                ellipse at 50% 28%,
                rgba(244, 250, 253, 0.58) 0%,
                rgba(244, 250, 253, 0.48) 34%,
                rgba(235, 246, 252, 0.34) 62%,
                rgba(226, 240, 250, 0.16) 86%,
                rgba(226, 240, 250, 0.04) 100%
            ),
            linear-gradient(
                90deg,
                rgba(236, 246, 252, 0.20) 0%,
                rgba(236, 246, 252, 0.12) 52%,
                rgba(236, 246, 252, 0.08) 100%
            ) !important;
    }

    body.seo-answer-page .site-header,
    body.seo-answer-page main,
    body.seo-answer-page .site-footer {
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   SEO WATERMARK LEFT TO RIGHT FADE 28.06.2026
   Strong matte watermark wash on the left, smoothly fading to normal background on the right.
   No blur, no glow, no bright flash: only a controlled milk-blue matte veil.
   Homepage, cards, More Answers, Quick Answer, CTA, footer and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page::before {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        background:
            radial-gradient(
                ellipse at 20% 30%,
                rgba(244, 250, 253, 0.46) 0%,
                rgba(244, 250, 253, 0.34) 28%,
                rgba(236, 246, 252, 0.18) 52%,
                rgba(236, 246, 252, 0.04) 76%,
                rgba(236, 246, 252, 0.00) 100%
            ),
            linear-gradient(
                90deg,
                rgba(241, 248, 252, 0.84) 0%,
                rgba(241, 248, 252, 0.80) 18%,
                rgba(241, 248, 252, 0.64) 38%,
                rgba(241, 248, 252, 0.42) 56%,
                rgba(241, 248, 252, 0.20) 72%,
                rgba(241, 248, 252, 0.07) 88%,
                rgba(241, 248, 252, 0.00) 100%
            ) !important;
    }

    body.seo-answer-page .site-header,
    body.seo-answer-page main,
    body.seo-answer-page .site-footer {
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   HOME SEO HEADER MAIN NAV SYNC 28.06.2026
   Syncs desktop header positioning between homepage and SEO/Answers pages.
   Uses the real nav class: .main-nav.
   Fixes visual drift where SEO nav can sit too far right.
   Background, watermark wash, cards, FAQ, CTA, footer, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .site-header,
    body.seo-answer-page .site-header {
        height: auto !important;
        min-height: 64px !important;
        padding: 18px 0 0 !important;
        position: relative !important;
        z-index: 10 !important;
        background: transparent !important;
        background-image: none !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    body.home-global-soft-wash .site-header::before,
    body.home-global-soft-wash .site-header::after,
    body.seo-answer-page .site-header::before,
    body.seo-answer-page .site-header::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.home-global-soft-wash .site-header .container.header-inner,
    body.home-global-soft-wash .site-header .header-inner,
    body.seo-answer-page .site-header .container.header-inner,
    body.seo-answer-page .site-header .header-inner {
        position: relative !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        max-width: 1180px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        justify-content: initial !important;
    }

    body.home-global-soft-wash .site-header .brand,
    body.seo-answer-page .site-header .brand {
        grid-column: 2 !important;
        justify-self: center !important;
        position: relative !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 4 !important;
    }

    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        grid-column: 2 !important;
        justify-self: center !important;
        position: relative !important;
        margin: 0 !important;
        transform: translateX(0) !important;
        z-index: 3 !important;
    }

    /*
       If brand and nav are both visible in the same center column,
       keep the nav visually centered as a group and prevent old auto-margins
       from pushing it to the right.
    */
    body.home-global-soft-wash .site-header .brand + .mobile-header-hub-button + .main-nav,
    body.seo-answer-page .site-header .brand + .mobile-header-hub-button + .main-nav {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.home-global-soft-wash .site-header .mobile-header-hub-button,
    body.home-global-soft-wash .site-header a.mobile-header-hub-button,
    body.seo-answer-page .site-header .mobile-header-hub-button,
    body.seo-answer-page .site-header a.mobile-header-hub-button {
        grid-column: 1 !important;
        justify-self: start !important;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: translateY(0) !important;
        z-index: 5 !important;
    }

    body.home-global-soft-wash .site-header .language-switcher,
    body.seo-answer-page .site-header .language-switcher {
        grid-column: 3 !important;
        justify-self: end !important;
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 5 !important;
    }
}

/* =========================================================
   RAISE DESKTOP HEADER NAV LINKS 28.06.2026
   Raises only desktop header navigation links:
   Codes / Guides / Answers / Telegram.
   Background, watermark wash, header side controls, cards, CTA, footer, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        transform: translateY(-8px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.home-global-soft-wash .site-header .main-nav .nav-link,
    body.seo-answer-page .site-header .main-nav .nav-link {
        transform: translateY(0) !important;
    }
}

/* =========================================================
   CENTER HEADER NAV SAME LINE 28.06.2026
   Places desktop header navigation back into the header line.
   Left: Open Drop Hub
   Center: Codes / Guides / Answers / Telegram
   Right: language panel
   Background, watermark wash, cards, CTA, FAQ, footer, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .site-header,
    body.seo-answer-page .site-header {
        min-height: 64px !important;
        padding: 18px 0 0 !important;
    }

    body.home-global-soft-wash .site-header .container.header-inner,
    body.home-global-soft-wash .site-header .header-inner,
    body.seo-answer-page .site-header .container.header-inner,
    body.seo-answer-page .site-header .header-inner {
        position: relative !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        max-width: 1180px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Left button: same header line */
    body.home-global-soft-wash .site-header .mobile-header-hub-button,
    body.home-global-soft-wash .site-header a.mobile-header-hub-button,
    body.seo-answer-page .site-header .mobile-header-hub-button,
    body.seo-answer-page .site-header a.mobile-header-hub-button {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
    }

    /* Center nav: exact center of the header line */
    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 0 !important;
        bottom: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        z-index: 4 !important;
    }

    body.home-global-soft-wash .site-header .main-nav .nav-link,
    body.seo-answer-page .site-header .main-nav .nav-link {
        height: 38px !important;
        min-height: 38px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        transform: none !important;
    }

    /* Right language panel: same header line */
    body.home-global-soft-wash .site-header .language-switcher,
    body.seo-answer-page .site-header .language-switcher {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        bottom: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
    }

    body.home-global-soft-wash .site-header .mobile-header-hub-button:hover,
    body.home-global-soft-wash .site-header a.mobile-header-hub-button:hover,
    body.seo-answer-page .site-header .mobile-header-hub-button:hover,
    body.seo-answer-page .site-header a.mobile-header-hub-button:hover {
        transform: translateY(-3px) !important;
    }
}

/* =========================================================
   INCREASE DESKTOP HEADER NAV TEXT 28.06.2026
   Slightly increases desktop header navigation text:
   Codes / Guides / Answers / Telegram.
   Positioning, background, watermark wash, side buttons, cards, CTA, footer, mobile and Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .site-header .main-nav .nav-link,
    body.seo-answer-page .site-header .main-nav .nav-link {
        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
        height: 39px !important;
        min-height: 39px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        gap: 11px !important;
    }
}


/* =========================================================
   CANONICAL SHARED SCROLLING BACKGROUND 28.06.2026
   Single source of truth for desktop homepage + SEO/Answers background.
   Fixes logo jumping by removing cover-scaling from page height.
   The background layer scrolls with content and is width-locked.
   Accepted left shift is preserved: calc(50% - 57px).
   Header/nav/text/cards/CTA/footer/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    html {
        background-color: #f5fbff !important;
    }

    body.home-global-soft-wash,
    body.seo-answer-page {
        position: relative !important;
        isolation: isolate !important;
        min-height: 100vh !important;
        background-color: #f5fbff !important;
        background-image: none !important;
        background: #f5fbff !important;
        overflow-x: hidden !important;
    }

    /*
       ONE shared scrolling background layer for both pages.
       Important:
       - position:absolute, not fixed
       - height follows the page
       - image size is width-based, not height/cover-based
       - therefore home and SEO cannot calculate different logo positions
    */
    body.home-global-soft-wash::before,
    body.seo-answer-page::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        background-image:
            radial-gradient(
                ellipse at 20% 30%,
                rgba(244, 250, 253, 0.46) 0%,
                rgba(244, 250, 253, 0.34) 28%,
                rgba(236, 246, 252, 0.18) 52%,
                rgba(236, 246, 252, 0.04) 76%,
                rgba(236, 246, 252, 0.00) 100%
            ),
            linear-gradient(
                90deg,
                rgba(241, 248, 252, 0.84) 0%,
                rgba(241, 248, 252, 0.80) 18%,
                rgba(241, 248, 252, 0.64) 38%,
                rgba(241, 248, 252, 0.42) 56%,
                rgba(241, 248, 252, 0.20) 72%,
                rgba(241, 248, 252, 0.07) 88%,
                rgba(241, 248, 252, 0.00) 100%
            ),
            url("/static/images/dropcodeshub-site-bg.webp") !important;

        background-repeat: no-repeat, no-repeat, no-repeat !important;
        background-size: 100% 100vh, 100% 100vh, 100vw auto !important;
        background-position: 0 0, 0 0, calc(50% - 57px) -22px !important;
        background-attachment: scroll, scroll, scroll !important;
    }

    body.home-global-soft-wash::after,
    body.seo-answer-page::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        background-image: none !important;
    }

    body.home-global-soft-wash .site-header,
    body.home-global-soft-wash main,
    body.home-global-soft-wash .site-footer,
    body.seo-answer-page .site-header,
    body.seo-answer-page main,
    body.seo-answer-page .site-footer {
        position: relative !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .site-header,
    body.home-global-soft-wash .home-main-hero,
    body.home-global-soft-wash .home-platform-cards-section,
    body.home-global-soft-wash .home-faq-hard-fix,
    body.home-global-soft-wash .info-section,
    body.home-global-soft-wash .section,
    body.home-global-soft-wash .section-soft,
    body.seo-answer-page .site-header,
    body.seo-answer-page .seo-answer-hero,
    body.seo-answer-page .seo-platform-section,
    body.seo-answer-page .seo-full-answer-section,
    body.seo-answer-page .seo-final-cta-section,
    body.seo-answer-page .section,
    body.seo-answer-page .section-soft {
        background: transparent !important;
        background-image: none !important;
    }

    body.home-global-soft-wash main::before,
    body.home-global-soft-wash main::after,
    body.home-global-soft-wash .site-header::before,
    body.home-global-soft-wash .site-header::after,
    body.home-global-soft-wash .home-main-hero::before,
    body.home-global-soft-wash .home-main-hero::after,
    body.home-global-soft-wash .section-soft::before,
    body.home-global-soft-wash .section-soft::after,
    body.seo-answer-page main::before,
    body.seo-answer-page main::after,
    body.seo-answer-page .site-header::before,
    body.seo-answer-page .site-header::after,
    body.seo-answer-page .seo-answer-hero::before,
    body.seo-answer-page .seo-answer-hero::after,
    body.seo-answer-page .section-soft::before,
    body.seo-answer-page .section-soft::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: 0 !important;
    }
}

/* =========================================================
   FULL PAGE MATTE WASH FIX 28.06.2026
   Extends the same soft matte left-to-right wash across the whole page,
   including the card sections and lower content.
   Keeps the accepted background image position: calc(50% - 57px) -22px.
   Header/nav/text/cards/CTA/footer/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash,
    body.seo-answer-page {
        background-color: #f5fbff !important;
        background-image: none !important;
        background: #f5fbff !important;
    }

    body.home-global-soft-wash::before,
    body.seo-answer-page::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        background-image:
            radial-gradient(
                ellipse at 20% 30%,
                rgba(244, 250, 253, 0.46) 0%,
                rgba(244, 250, 253, 0.34) 28%,
                rgba(236, 246, 252, 0.18) 52%,
                rgba(236, 246, 252, 0.04) 76%,
                rgba(236, 246, 252, 0.00) 100%
            ),
            linear-gradient(
                90deg,
                rgba(241, 248, 252, 0.84) 0%,
                rgba(241, 248, 252, 0.80) 18%,
                rgba(241, 248, 252, 0.64) 38%,
                rgba(241, 248, 252, 0.42) 56%,
                rgba(241, 248, 252, 0.20) 72%,
                rgba(241, 248, 252, 0.07) 88%,
                rgba(241, 248, 252, 0.00) 100%
            ),
            url("/static/images/dropcodeshub-site-bg.webp") !important;

        /*
           Important fix:
           Wash layers now cover 100% of the page height, not only 100vh.
           Background image remains width-locked, so home and SEO stay aligned.
        */
        background-size: 100% 100%, 100% 100%, 100vw auto !important;
        background-position: 0 0, 0 0, calc(50% - 57px) -22px !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
        background-attachment: scroll, scroll, scroll !important;
    }

    body.home-global-soft-wash::after,
    body.seo-answer-page::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        background-image: none !important;
    }

    body.home-global-soft-wash .site-header,
    body.home-global-soft-wash main,
    body.home-global-soft-wash .site-footer,
    body.seo-answer-page .site-header,
    body.seo-answer-page main,
    body.seo-answer-page .site-footer {
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   ENLARGE BACKGROUND AFTER LEFT SHIFT 28.06.2026
   Fixes the right-side bald/white strip caused by the accepted 57px left shift.
   The image is enlarged by 114px and right-aligned:
   - center stays visually 57px left
   - right edge remains covered
   - bottom gets extra image height as well
   Matte wash remains full-page.
   Header/nav/text/cards/CTA/footer/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash::before,
    body.seo-answer-page::before {
        background-size:
            100% 100%,
            100% 100%,
            calc(100vw + 114px) auto !important;

        background-position:
            0 0,
            0 0,
            100% -22px !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat !important;

        background-color: #f5fbff !important;
    }

    body.home-global-soft-wash,
    body.seo-answer-page {
        background-color: #f5fbff !important;
        overflow-x: hidden !important;
    }

    html {
        background-color: #f5fbff !important;
        overflow-x: hidden !important;
    }
}

/* =========================================================
   SEO PLATFORM HEADER WIDTH FIX 28.06.2026
   First step for the "How Casino Drop Codes Work" block.
   Expands the upper text/header part to the same left/right grid line as the cards.
   This reduces text wrapping and lowers the block height.
   Final CTA/footer are not touched yet.
   Background/header/nav/cards/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-platform-section {
        padding-top: 72px !important;
    }

    /*
       Align the text/header area of "How Casino Drop Codes Work"
       with the same vertical left line where the platform cards start.
    */
    body.seo-answer-page .seo-platform-section > .container,
    body.seo-answer-page .seo-platform-section .container {
        max-width: 1180px !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.seo-answer-page .seo-platform-section .section-header,
    body.seo-answer-page .seo-platform-section .section-heading,
    body.seo-answer-page .seo-platform-section .section-title-wrap,
    body.seo-answer-page .seo-platform-section .section-intro,
    body.seo-answer-page .seo-platform-section .section-copy,
    body.seo-answer-page .seo-platform-section h2,
    body.seo-answer-page .seo-platform-section h2 + p {
        max-width: 1180px !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    body.seo-answer-page .seo-platform-section h2 {
        max-width: 980px !important;
        margin-bottom: 14px !important;
    }

    body.seo-answer-page .seo-platform-section .section-copy,
    body.seo-answer-page .seo-platform-section .section-intro,
    body.seo-answer-page .seo-platform-section h2 + p {
        max-width: 1040px !important;
        margin-bottom: 28px !important;
        line-height: 1.48 !important;
    }

    /*
       Keep cards on the same grid line. This selector is intentionally repeated
       so the header and cards share one visible left edge.
    */
    body.seo-answer-page .seo-platform-section .feature-grid.card-image-grid,
    body.seo-answer-page .seo-platform-section .feature-grid.card-image-grid.seo-card-grid,
    body.seo-answer-page .seo-platform-section .seo-card-grid {
        max-width: 1180px !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   MOVE BEFORE CLAIMING CHECK RIGHT 28.06.2026
   Moves the "Before claiming, check" card to the right,
   aligning it with the visual right boundary of the cards above.
   Only SEO answer detail content layout is touched.
   Background/header/nav/platform cards/final CTA/footer/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-full-answer-section > .container,
    body.seo-answer-page .seo-full-answer-section .container {
        max-width: 1180px !important;
        width: min(1180px, calc(100vw - 40px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.seo-answer-page .seo-content-layout {
        max-width: 1180px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        column-gap: 34px !important;
        align-items: start !important;
    }

    body.seo-answer-page .seo-checklist-card {
        width: 360px !important;
        max-width: 360px !important;
        justify-self: end !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    body.seo-answer-page .seo-full-answer-card {
        min-width: 0 !important;
    }
}


/* =========================================================
   BALANCE SEO FINAL CTA SPACING 28.06.2026
   Balances the bottom SEO CTA block:
   - moves "Want faster alerts and better drops?" slightly lower than the previous raised state
   - keeps equal visual spacing above the CTA and below it before the footer
   - prevents overlap with the block above and the footer below
   Background/header/nav/platform cards/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page {
        --seo-final-cta-balanced-gap: 34px;
    }

    body.seo-answer-page .seo-final-cta-section {
        margin-top: var(--seo-final-cta-balanced-gap) !important;
        margin-bottom: var(--seo-final-cta-balanced-gap) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.seo-answer-page .seo-final-cta {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /*
       Reset the previous footer pull-up so the CTA does not climb into the footer.
       Footer height itself is not changed.
    */
    body.seo-answer-page .site-footer {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   RAISE SEO FINAL CTA 7MM 28.06.2026
   Raises only the final SEO CTA block:
   "Want faster alerts and better drops?" by about 7mm / 27px.
   Footer height/background/header/nav/cards/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-final-cta-section {
        margin-top: 7px !important;
        margin-bottom: 34px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.seo-answer-page .seo-final-cta {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   RAISE SEO FINAL CTA EXTRA 3MM 28.06.2026
   Raises only the final SEO CTA block another 3mm / about 11px.
   Previous 7mm state used margin-top: 7px.
   New position uses margin-top: -4px.
   Footer/background/header/nav/cards/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .seo-final-cta-section {
        margin-top: -4px !important;
        margin-bottom: 34px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.seo-answer-page .seo-final-cta {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   RAISE SEO FOOTER 4MM 28.06.2026
   Raises only the SEO footer about 4mm / 15px.
   Footer height is NOT changed.
   CTA/background/header/nav/cards/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .site-footer {
        margin-top: -15px !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   RAISE SEO FOOTER EXTRA 1MM 28.06.2026
   Raises only the SEO footer another 1mm / about 4px.
   Previous footer raise was -15px; new final position is -19px.
   Footer height is NOT changed.
   CTA/background/header/nav/cards/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.seo-answer-page .site-footer {
        margin-top: -19px !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   CENTER HOME HERO TEXT 28.06.2026
   Centers the main homepage hero text after the background logo shift.
   The second line / description is centered relative to the first line.
   Background/SEO/header/cards/footer/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-main-hero {
        text-align: center !important;
    }

    body.home-global-soft-wash .home-main-hero .container,
    body.home-global-soft-wash .home-main-hero .hero-container,
    body.home-global-soft-wash .home-main-hero .hero-content,
    body.home-global-soft-wash .home-main-hero .hero-copy,
    body.home-global-soft-wash .home-main-hero .hero-text,
    body.home-global-soft-wash .home-main-hero .home-hero-copy,
    body.home-global-soft-wash .home-main-hero .home-hero-text {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.home-global-soft-wash .home-main-hero h1,
    body.home-global-soft-wash .home-main-hero .hero-title,
    body.home-global-soft-wash .home-main-hero .home-hero-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 960px !important;
    }

    body.home-global-soft-wash .home-main-hero p,
    body.home-global-soft-wash .home-main-hero .hero-lead,
    body.home-global-soft-wash .home-main-hero .hero-subtitle,
    body.home-global-soft-wash .home-main-hero .hero-copy-text,
    body.home-global-soft-wash .home-main-hero .home-hero-lead,
    body.home-global-soft-wash .home-main-hero .home-hero-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 760px !important;
    }

    body.home-global-soft-wash .home-main-hero .hero-actions,
    body.home-global-soft-wash .home-main-hero .home-hero-actions,
    body.home-global-soft-wash .home-main-hero .cta-row,
    body.home-global-soft-wash .home-main-hero .button-row {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   CENTER HOME HERO BLOCK ON PAGE 28.06.2026
   Centers the entire homepage hero text block on the page.
   Previous fix centered line 2 relative to line 1; this moves the whole block itself.
   SEO/background/header/cards/footer/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-main-hero {
        text-align: center !important;
    }

    /*
       Force the hero container to center its content instead of keeping
       the text block in the old left-side column.
    */
    body.home-global-soft-wash .home-main-hero > .container,
    body.home-global-soft-wash .home-main-hero .container,
    body.home-global-soft-wash .home-main-hero .hero-container,
    body.home-global-soft-wash .home-main-hero .hero-inner,
    body.home-global-soft-wash .home-main-hero .hero-layout,
    body.home-global-soft-wash .home-main-hero .home-hero-layout {
        width: min(1180px, calc(100vw - 40px)) !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;

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

        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }

    /*
       Center the actual text block as a block, not only the text inside it.
    */
    body.home-global-soft-wash .home-main-hero .hero-content,
    body.home-global-soft-wash .home-main-hero .hero-copy,
    body.home-global-soft-wash .home-main-hero .hero-text,
    body.home-global-soft-wash .home-main-hero .home-hero-content,
    body.home-global-soft-wash .home-main-hero .home-hero-copy,
    body.home-global-soft-wash .home-main-hero .home-hero-text,
    body.home-global-soft-wash .home-main-hero .hero-main,
    body.home-global-soft-wash .home-main-hero .hero-left,
    body.home-global-soft-wash .home-main-hero .hero-copy-wrap {
        width: min(960px, calc(100vw - 40px)) !important;
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: center !important;
        align-self: center !important;
        justify-self: center !important;

        transform: none !important;
        translate: none !important;
        left: auto !important;
        right: auto !important;
    }

    body.home-global-soft-wash .home-main-hero h1,
    body.home-global-soft-wash .home-main-hero .hero-title,
    body.home-global-soft-wash .home-main-hero .home-hero-title {
        width: 100% !important;
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    body.home-global-soft-wash .home-main-hero p,
    body.home-global-soft-wash .home-main-hero .hero-lead,
    body.home-global-soft-wash .home-main-hero .hero-subtitle,
    body.home-global-soft-wash .home-main-hero .hero-copy-text,
    body.home-global-soft-wash .home-main-hero .home-hero-lead,
    body.home-global-soft-wash .home-main-hero .home-hero-subtitle {
        width: 100% !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    body.home-global-soft-wash .home-main-hero .hero-actions,
    body.home-global-soft-wash .home-main-hero .home-hero-actions,
    body.home-global-soft-wash .home-main-hero .cta-row,
    body.home-global-soft-wash .home-main-hero .button-row {
        width: 100% !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   CLEAN HOME BOTTOM SPACING 29.06.2026
   Correct bottom layout for homepage:
   FAQ block -> about 2cm gap -> lower info cards -> safe footer.
   Removes need for transform/negative footer overlap hacks.
   Hero/background/SEO/header/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    /*
       Keep FAQ stable. Do not let it push or pull the lower cards.
    */
    body.home-global-soft-wash .home-faq-hard-fix {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /*
       Lower cards section.
       The target visual gap after the 3 FAQ questions is about 2cm / 76px.
       Footer safety is handled with bottom padding, not with footer overlap.
    */
    body.home-global-soft-wash .home-faq-hard-fix + .info-section,
    body.home-global-soft-wash .info-section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 76px !important;
        padding-bottom: 76px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .info-section .container,
    body.home-global-soft-wash .info-section .info-grid {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
        translate: none !important;
    }

    body.home-global-soft-wash .info-section .info-card {
        position: relative !important;
        z-index: 2 !important;
    }

    /*
       Footer must sit naturally after the cards.
       No negative pull-up, so it cannot climb over cards.
    */
    body.home-global-soft-wash .site-footer {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}


/* =========================================================
   LIFT HOME INFO CARDS MORE 29.06.2026
   Lifts the lower homepage info cards more noticeably.
   Safe method: reduce top padding before Wager / Claims / Drop Value / How to Redeem.
   No transform, no negative margin, so footer should not overlap cards.
   SEO/background/hero/header/mobile/Telegram scripts are not touched.
   ========================================================= */

@media (min-width: 981px) {
    body.home-global-soft-wash .home-faq-hard-fix {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix + .info-section,
    body.home-global-soft-wash .info-section {
        margin-top: 0 !important;
        padding-top: 28px !important;
        padding-bottom: 76px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .info-section .container,
    body.home-global-soft-wash .info-section .info-grid {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
        translate: none !important;
    }

    body.home-global-soft-wash .site-footer {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* HOME FAQ BOTTOM CARDS LIFT 29.06.2026 */
body.home-global-soft-wash .home-faq-hard-fix {
    padding-bottom: 18px;
}

body.home-global-soft-wash .info-section {
    padding-top: 20px;
    padding-bottom: 36px;
}

body.home-global-soft-wash .info-grid {
    margin-top: 0;
}

body.home-global-soft-wash .site-footer {
    padding-top: 30px;
    padding-bottom: 24px;
}

@media (max-width: 768px) {
    body.home-global-soft-wash .home-faq-hard-fix {
        padding-bottom: 14px;
    }

    body.home-global-soft-wash .info-section {
        padding-top: 16px;
        padding-bottom: 28px;
    }

    body.home-global-soft-wash .site-footer {
        padding-top: 26px;
        padding-bottom: 20px;
    }
}

/* HOME FAQ INFO CARDS STRONG LIFT 29.06.2026 */
body.home-global-soft-wash .info-section {
    margin-top: -72px;
    padding-top: 0;
    padding-bottom: 24px;
}

body.home-global-soft-wash .info-grid {
    transform: translateY(-24px);
}

body.home-global-soft-wash .home-faq-hard-fix {
    padding-bottom: 0;
}

body.home-global-soft-wash .site-footer {
    margin-top: -18px;
    padding-top: 22px;
    padding-bottom: 18px;
}

@media (max-width: 768px) {
    body.home-global-soft-wash .info-section {
        margin-top: -42px;
        padding-bottom: 22px;
    }

    body.home-global-soft-wash .info-grid {
        transform: translateY(-12px);
    }

    body.home-global-soft-wash .site-footer {
        margin-top: -10px;
        padding-top: 22px;
        padding-bottom: 18px;
    }
}

/* HOME FAQ REAL INFO CARDS LIFT 29.06.2026 */
@media (min-width: 981px) {
    body.home-global-soft-wash .home-faq-hard-fix {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix + .info-section,
    body.home-global-soft-wash .info-section {
        margin-top: 0 !important;
        padding-top: 72px !important;
        padding-bottom: 30px !important;
    }

    body.home-global-soft-wash .info-section .container,
    body.home-global-soft-wash .info-section .info-grid {
        transform: none !important;
        translate: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home-global-soft-wash .site-footer {
        margin-top: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 16px !important;
    }
}

@media (max-width: 768px) {
    body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        height: auto !important;
        min-height: 0 !important;
    }

    body.home-global-soft-wash .info-section {
        padding-top: 32px !important;
        padding-bottom: 22px !important;
    }
}

/* HOME CONVERSION COPY 29.06.2026 */
body.home-global-soft-wash .home-main-hero .lead,
body.home-global-soft-wash .home-faq-hard-fix .section-copy,
body.home-global-soft-wash .home-platform-subcopy {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(18px, 1.45vw, 22px) !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #405a72 !important;
}

body.home-global-soft-wash .home-main-hero .lead {
    margin-top: 22px !important;
}

body.home-global-soft-wash .home-platform-cards-section .section-heading h2 {
    font-size: clamp(34px, 3.2vw, 48px) !important;
    line-height: 1.08 !important;
    margin-bottom: 12px !important;
}

body.home-global-soft-wash .home-platform-subcopy {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}

@media (max-width: 768px) {
    body.home-global-soft-wash .home-main-hero .lead,
    body.home-global-soft-wash .home-faq-hard-fix .section-copy,
    body.home-global-soft-wash .home-platform-subcopy {
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 600 !important;
    }

    body.home-global-soft-wash .home-platform-cards-section .section-heading h2 {
        font-size: 34px !important;
    }
}

/* HOME FAQ COPY MATCH HERO 29.06.2026 */
body.home-global-soft-wash .home-faq-hard-fix .section-heading .section-copy,
body.home-global-soft-wash .home-faq-hard-fix .faq-heading .section-copy,
body.home-global-soft-wash .home-faq-hard-fix p.section-copy {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(18px, 1.45vw, 22px) !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #405a72 !important;
}

@media (max-width: 768px) {
    body.home-global-soft-wash .home-faq-hard-fix .section-heading .section-copy,
    body.home-global-soft-wash .home-faq-hard-fix .faq-heading .section-copy,
    body.home-global-soft-wash .home-faq-hard-fix p.section-copy {
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 600 !important;
    }
}

/* HEADER NAV BIGGER 29.06.2026 */
@media (min-width: 981px) {
    body.home-global-soft-wash .site-header .main-nav a,
    body.home-global-soft-wash .site-header .main-nav .nav-link,
    body.seo-answer-page .site-header .main-nav a,
    body.seo-answer-page .site-header .main-nav .nav-link {
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        gap: 12px !important;
    }
}

@media (max-width: 768px) {
    body.home-global-soft-wash .site-header .main-nav a,
    body.seo-answer-page .site-header .main-nav a {
        font-size: 15px !important;
        font-weight: 850 !important;
        letter-spacing: 0 !important;
    }
}

/* Hide removed empty home hero subtitle */
.home-main-hero p:empty,
.home-main-hero .lead:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Mobile section quick nav 2026-06-30 */
@media (max-width: 760px) {
  .site-header {
    overflow: visible !important;
  }

  .site-header .main-nav {
    display: flex !important;
    position: absolute !important;
    top: 56px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 30 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    pointer-events: auto !important;
  }

  .site-header .main-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(14, 62, 118, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 10px 24px rgba(14, 62, 118, 0.10) !important;
    color: #07326f !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    backdrop-filter: blur(10px) !important;
  }

  .site-header .main-nav a[href^="https://t.me"] {
    display: none !important;
  }

  body.seo-answer-page main {
    padding-top: 42px !important;
  }
}

@media (max-width: 370px) {
  .site-header .main-nav {
    gap: 4px !important;
  }

  .site-header .main-nav a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
  }
}


/* Footer logo hard limit 2026-06-30 */
.site-footer .footer-brand {
  align-items: center !important;
}

.site-footer .footer-brand > img,
.site-footer img[src*="logo_telegram"] {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  display: block !important;
  object-fit: contain !important;
  flex: 0 0 52px !important;
  border-radius: 50% !important;
}

@media (max-width: 760px) {
  .site-footer .footer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .site-footer .footer-brand > img,
  .site-footer img[src*="logo_telegram"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px !important;
  }
}


/* Landscape phone section nav 2026-06-30 */
@media (min-width: 761px) and (max-width: 920px) and (max-height: 520px) {
  .site-header {
    overflow: visible !important;
  }

  .site-header .main-nav {
    display: flex !important;
    position: absolute !important;
    top: 56px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 30 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .site-header .main-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #07326f !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .site-header .main-nav a[href^="https://t.me"] {
    display: none !important;
  }

  body.seo-answer-page main {
    padding-top: 42px !important;
  }
}


/* Landscape phone one-line header nav 2026-06-30 */
@media (min-width: 560px) and (max-height: 520px) {
  .site-header {
    min-height: 64px !important;
    overflow: visible !important;
  }

  .site-header .main-nav {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100vw - 340px) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 35 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(10px, 2vw, 18px) !important;
  }

  .site-header .main-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #07326f !important;
    font-size: clamp(13px, 1.9vw, 16px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    backdrop-filter: none !important;
  }

  .site-header .main-nav a[href^="https://t.me"] {
    display: none !important;
  }

  body.seo-answer-page main {
    padding-top: 0 !important;
  }
}


/* Mobile nav text-only links 2026-06-30 */
@media (max-width: 760px) and (min-height: 521px) {
  .site-header .main-nav a {
    min-height: auto !important;
    padding: 4px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}


/* Mobile nav text size match CTA 2026-06-30 */
@media (max-width: 920px) {
  .site-header .main-nav a {
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 370px) {
  .site-header .main-nav a {
    font-size: 14px !important;
  }
}


/* Mobile nav visually match CTA 2026-06-30 */
@media (max-width: 920px) {
  .site-header .main-nav a {
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 340px) {
  .site-header .main-nav a {
    font-size: 15px !important;
  }
}


/* Mobile nav final visible size 2026-06-30 */
@media (max-width: 920px) {
  html body .site-header .main-nav a {
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

@media (max-width: 340px) {
  html body .site-header .main-nav a {
    font-size: 17px !important;
  }
}

/* Mobile FAQ copy desktop curtain 2026-06-30 */
body.home-global-soft-wash .home-faq-hard-fix .mobile-faq-answer-layer {
    display: none !important;
}

@media (max-width: 980px) {
    body.home-global-soft-wash .home-faq-hard-fix,
    body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        overflow-anchor: none !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        position: relative !important;
        z-index: 5 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details {
        --faq-answer-drop: 68px;
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
        cursor: pointer !important;
        contain: none !important;
        transform: none !important;
        will-change: auto !important;
        isolation: isolate !important;
        background: rgba(255, 255, 255, 0.984) !important;
        border: 1px solid rgba(30, 110, 210, 0.12) !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 34px rgba(15, 87, 171, 0.08) !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] {
        z-index: 60 !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 0 calc(-1 * var(--faq-answer-drop)) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: rgba(255, 255, 255, 0.984) !important;
        border: 1px solid rgba(30, 110, 210, 0.14) !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 42px rgba(15, 87, 171, 0.14) !important;
        opacity: 0 !important;
        transform: translateY(-3px) !important;
        transition: opacity 160ms, transform 160ms !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open]::after {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
        position: relative !important;
        z-index: 2 !important;
        background: transparent !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary::-webkit-details-marker {
        display: none !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details > p {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% - 1px) !important;
        z-index: 2 !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 22px 14px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: rgba(6, 44, 115, 0.76) !important;
        font-size: 16px !important;
        line-height: 1.56 !important;
        font-weight: 500 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: visible !important;
        transform: translateY(-4px) !important;
        transition: opacity 160ms, transform 160ms, visibility 160ms !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] > p {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix + .info-section,
    body.home-global-soft-wash .info-section {
        margin-top: 0 !important;
        padding-top: 96px !important;
        padding-bottom: 24px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.home-global-soft-wash .info-section .container,
    body.home-global-soft-wash .info-section .info-grid {
        transform: none !important;
        translate: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    html {
        background-color: #dcebff !important;
    }

    body.home-global-soft-wash {
        background-color: #dcebff !important;
        background-image: url("/static/images/mobile-portrait-bg.webp?v=clean-portrait-26-06-1") !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }
}





/* nav-active-match-hover-20260701 */
.main-nav a.active {
    color: var(--blue);
    opacity: 1;
}

.main-nav a.active::after {
    transform: scaleX(1);
    opacity: 1;
}
/* /nav-active-match-hover-20260701 */


/* mobile-nav-active-highlight-20260701 */
@media (max-width: 900px) {
    .site-header .main-nav a.active,
    .site-header .main-nav a.active:visited {
        color: var(--blue) !important;
        opacity: 1 !important;
    }

    .site-header .main-nav a.active::after {
        transform: scaleX(1) !important;
        opacity: 1 !important;
    }
}
/* /mobile-nav-active-highlight-20260701 */












/* header-pixel-slice-stable-20260702 */
:root {
    --site-header-h: 64px;
    --site-bg-h: 100vh;
    --header-slice-bg-color: #dcebff;
    --header-slice-bg-image: none;
    --header-slice-bg-size: auto;
    --header-slice-bg-position: 0 0;
    --header-slice-bg-repeat: no-repeat;
}

body {
    padding-top: 0 !important;
}

body.home-global-soft-wash .site-header,
body.seo-answer-page .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--site-header-h) !important;
    min-height: var(--site-header-h) !important;
    max-height: var(--site-header-h) !important;
    z-index: 5000 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.home-global-soft-wash main,
body.seo-answer-page main {
    margin-top: var(--site-header-h) !important;
}

body.home-global-soft-wash .site-header::after,
body.seo-answer-page .site-header::after {
    content: none !important;
    display: none !important;
}

body.home-global-soft-wash .site-header::before,
body.seo-answer-page .site-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: var(--site-bg-h) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: var(--header-slice-bg-color) !important;
    background-image: var(--header-slice-bg-image) !important;
    background-size: var(--header-slice-bg-size) !important;
    background-position: var(--header-slice-bg-position) !important;
    background-repeat: var(--header-slice-bg-repeat) !important;
    background-attachment: scroll !important;
}

body.home-global-soft-wash .site-header > *,
body.seo-answer-page .site-header > * {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 980px) {
    :root {
        --site-header-h: 98px;
    }

    body.home-global-soft-wash .site-header,
    body.seo-answer-page .site-header {
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }

    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        display: flex !important;
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        top: 56px !important;
        width: auto !important;
        height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        margin: 0 !important;
        z-index: 2 !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    :root {
        --site-header-h: 64px;
    }

    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        position: static !important;
        height: auto !important;
        width: auto !important;
    }
}
/* /header-pixel-slice-stable-20260702 */




/* landscape-header-order-20260702 */
@media (max-width: 980px) and (orientation: landscape) {
  html body .site-header .container.header-inner,
  html body .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: normal !important;
    column-gap: clamp(12px, 2.4vw, 24px) !important;
    overflow: visible !important;
  }

  html body .site-header .brand {
    display: none !important;
  }

  html body .site-header .mobile-header-hub-button,
  html body .site-header a.mobile-header-hub-button {
    grid-column: 1 !important;
    justify-self: start !important;
    order: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    position: static !important;
    transform: none !important;
  }

  html body .site-header .main-nav {
    grid-column: 2 !important;
    justify-self: center !important;
    order: 1 !important;
    display: flex !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(10px, 2vw, 18px) !important;
  }

  html body .site-header .language-switcher {
    grid-column: 3 !important;
    justify-self: end !important;
    order: 2 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    position: static !important;
    transform: none !important;
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  html body .site-header .container.header-inner,
  html body .site-header .header-inner {
    column-gap: 8px !important;
  }

  html body .site-header .main-nav {
    gap: 6px !important;
  }

  html body .site-header .main-nav a {
    font-size: 14px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  html body .site-header .mobile-header-hub-button,
  html body .site-header a.mobile-header-hub-button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
  }

  html body .site-header .language-switcher a {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}
/* /landscape-header-order-20260702 */


/* desktop-header-slice-visible-20260702 */
@media (min-width: 981px) {
  html body.home-global-soft-wash .site-header,
  html body.seo-answer-page .site-header {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
    z-index: 5000 !important;
  }

  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: var(--site-bg-h, 2200px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: var(--header-slice-bg-color, #f5fbff) !important;
    background-image: var(--header-slice-bg-image) !important;
    background-size: var(--header-slice-bg-size) !important;
    background-position: var(--header-slice-bg-position) !important;
    background-repeat: var(--header-slice-bg-repeat, no-repeat) !important;
    background-attachment: scroll !important;
  }

  html body.home-global-soft-wash .site-header::after,
  html body.seo-answer-page .site-header::after {
    content: none !important;
    display: none !important;
  }

  html body.home-global-soft-wash .site-header .header-inner,
  html body.seo-answer-page .site-header .header-inner {
    position: relative !important;
    z-index: 2 !important;
  }

  html body.home-global-soft-wash main,
  html body.seo-answer-page main {
    margin-top: 64px !important;
  }
}
/* /desktop-header-slice-visible-20260702 */


/* desktop-header-height-20260702 */
@media (min-width: 981px) {
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    --site-header-h: 72px !important;
  }

  html body.home-global-soft-wash .site-header,
  html body.seo-answer-page .site-header {
    height: 72px !important;
    min-height: 72px !important;
  }

  html body.home-global-soft-wash main,
  html body.seo-answer-page main {
    margin-top: 72px !important;
  }
}
/* /desktop-header-height-20260702 */


/* footer-plane-scale-only-20260702 */
@keyframes footerPlaneScaleOnly20260702 {
  0% {
    scale: 0.9;
    opacity: 0.86;
  }

  50% {
    scale: 1.18;
    opacity: 1;
  }

  100% {
    scale: 0.9;
    opacity: 0.86;
  }
}

html body .site-footer .footer-brand-title-link,
html body .site-footer .footer-brand-title-link:hover,
html body .site-footer .footer-brand-title-link:focus,
html body .site-footer .footer-brand-title-link:active {
  transform: none !important;
}

html body .site-footer .footer-brand-title-link > img,
html body .site-footer .footer-brand-title-link:hover > img,
html body .site-footer .footer-brand-title-link:focus > img,
html body .site-footer .footer-brand-title-link:active > img {
  transform: none !important;
}

html body .site-footer .footer-brand-title-link span,
html body .site-footer .footer-brand-title-link svg,
html body .site-footer .footer-brand-title-link:hover span,
html body .site-footer .footer-brand-title-link:hover svg,
html body .site-footer .footer-brand-title-link:focus span,
html body .site-footer .footer-brand-title-link:focus svg,
html body .site-footer .footer-brand-title-link:active span,
html body .site-footer .footer-brand-title-link:active svg {
  transform: none !important;
}

html body .site-footer .footer-brand-title-link .footer-brand-telegram-icon {
  transform: none !important;
  transform-origin: center center !important;
  animation-name: footerPlaneScaleOnly20260702 !important;
  animation-duration: 1.65s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  will-change: scale, opacity !important;
}

html body .site-footer .footer-brand-title-link:hover .footer-brand-telegram-icon,
html body .site-footer .footer-brand-title-link:focus .footer-brand-telegram-icon,
html body .site-footer .footer-brand-title-link:active .footer-brand-telegram-icon {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .site-footer .footer-brand-title-link .footer-brand-telegram-icon {
    animation: none !important;
    scale: 1 !important;
    opacity: 1 !important;
  }
}
/* /footer-plane-scale-only-20260702 */


/* footer-brand-only-no-lift-20260702 */
html body .site-footer .footer-brand-title-link,
html body .site-footer .footer-brand-title-link:hover,
html body .site-footer .footer-brand-title-link:focus,
html body .site-footer .footer-brand-title-link:active {
  transform: none !important;
}

html body .site-footer .footer-brand-title-link > img,
html body .site-footer .footer-brand-title-link > span:not(.footer-brand-telegram-icon),
html body .site-footer .footer-brand-title-link:hover > img,
html body .site-footer .footer-brand-title-link:hover > span:not(.footer-brand-telegram-icon),
html body .site-footer .footer-brand-title-link:focus > img,
html body .site-footer .footer-brand-title-link:focus > span:not(.footer-brand-telegram-icon),
html body .site-footer .footer-brand-title-link:active > img,
html body .site-footer .footer-brand-title-link:active > span:not(.footer-brand-telegram-icon) {
  transform: none !important;
}

html body .site-footer .footer-brand-title-link .footer-brand-telegram-icon,
html body .site-footer .footer-brand-title-link:hover .footer-brand-telegram-icon,
html body .site-footer .footer-brand-title-link:focus .footer-brand-telegram-icon,
html body .site-footer .footer-brand-title-link:active .footer-brand-telegram-icon {
  transform: none !important;
  transform-origin: center center !important;
}
/* /footer-brand-only-no-lift-20260702 */


/* explore-nav-20260702 */
html body .site-header .main-nav a,
html body .site-header .main-nav .explore-toggle {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  color: #53627a !important;
  font: inherit !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body .site-header .main-nav a:hover,
html body .site-header .main-nav .explore-toggle:hover,
html body .site-header .main-nav a.active,
html body .site-header .main-nav .explore-toggle.active {
  color: var(--blue, #1f7cff) !important;
}

.explore-menu[hidden] {
  display: none !important;
}

.explore-menu {
  --explore-top: var(--site-header-h, 72px);
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--explore-top) !important;
  z-index: 4990 !important;
  max-height: calc(100dvh - var(--explore-top) - 10px) !important;
  overflow: auto !important;
  padding: 10px 16px 16px !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  pointer-events: none !important;
}

.explore-menu.open {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.explore-menu-inner {
  width: min(1180px, calc(100vw - 28px)) !important;
  margin: 0 auto !important;
  padding: 14px !important;
  border: 1px solid rgba(117, 176, 238, 0.34) !important;
  border-radius: 14px !important;
  background: rgba(245, 251, 255, 0.96) !important;
  box-shadow: 0 18px 40px rgba(14, 62, 118, 0.16) !important;
  backdrop-filter: blur(14px) !important;
}

.explore-menu-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  color: #07326f !important;
}

.explore-menu-head strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.explore-close {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(227, 241, 255, 0.95) !important;
  color: #1f7cff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.explore-section-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.explore-section-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  min-height: 96px !important;
  padding: 14px !important;
  border: 1px solid rgba(117, 176, 238, 0.25) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #07326f !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(14, 62, 118, 0.08) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.explore-section-card:hover,
.explore-section-card.active {
  transform: translateY(-2px) !important;
  border-color: rgba(31, 124, 255, 0.52) !important;
  box-shadow: 0 14px 28px rgba(31, 124, 255, 0.14) !important;
}

.explore-card-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  color: #1f7cff !important;
}

.explore-card-copy {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: rgba(6, 44, 115, 0.68) !important;
}

@media (max-width: 980px) and (orientation: portrait) {
  .explore-menu {
    --explore-top: var(--site-header-h, 98px);
    padding: 8px 10px 12px !important;
  }

  .explore-menu-inner {
    width: calc(100vw - 20px) !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .explore-section-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .explore-section-card {
    min-height: 72px !important;
    padding: 12px !important;
  }

  .explore-card-title {
    font-size: 17px !important;
  }

  .explore-card-copy {
    font-size: 13px !important;
  }
}

@media (max-width: 980px) and (orientation: landscape) {
  .explore-menu {
    --explore-top: var(--site-header-h, 64px);
    padding-top: 8px !important;
  }

  .explore-section-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .explore-section-card {
    min-height: 78px !important;
    padding: 11px !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .explore-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* /explore-nav-20260702 */


/* explore-hub-clean-20260702 */
body.seo-answer-page .seo-hub-clean-lead {
    max-width: 620px;
    margin-bottom: 0;
}

@media (max-width: 720px) {
    body.seo-answer-page .seo-hub-clean-lead {
        font-size: 17px;
        line-height: 1.35;
        margin-top: 6px;
    }

    body.seo-answer-page .seo-answer-top {
        gap: 18px;
    }
}


/* question-page-clean-20260702 */
body.seo-answer-page .seo-answer-copy h1 {
    margin-bottom: 18px;
}

body.seo-answer-page .seo-answer-copy .seo-quick-answer {
    margin-top: 0;
}


/* answer-label-clean-20260702 */
body.seo-answer-page .seo-question-answer-box {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(28, 116, 210, 0.18);
    border-left: 5px solid #1674d1;
    box-shadow: 0 18px 44px rgba(28, 88, 156, 0.13);
}

body.seo-answer-page .seo-question-answer-box .seo-answer-label-clean {
    margin-bottom: 10px;
}

body.seo-answer-page .seo-question-answer-box .seo-answer-label-clean strong {
    color: #0b5fb8;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0;
}

body.seo-answer-page .seo-question-answer-box p {
    color: #10213f;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 750;
}

@media (max-width: 720px) {
    body.seo-answer-page .seo-question-answer-box .seo-answer-label-clean strong {
        font-size: 20px;
    }

    body.seo-answer-page .seo-question-answer-box p {
        font-size: 18px;
        line-height: 1.42;
    }
}


/* answer-clean-card-20260702 */
body.seo-answer-page .seo-question-answer-box {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(28, 116, 210, 0.16) !important;
    border-left: 1px solid rgba(28, 116, 210, 0.16) !important;
    box-shadow: 0 18px 44px rgba(28, 88, 156, 0.12) !important;
}


/* home-trend-faq-20260702 */
body.home-global-soft-wash .home-faq-hard-fix + .info-section {
    display: none !important;
}

body.home-global-soft-wash .home-faq-hard-fix .faq-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
    min-height: 54px;
}

@media (max-width: 920px) {
    body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        grid-template-columns: 1fr;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
        min-height: auto;
    }
}


/* home-faq-auto-height-20260702 */
body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

body.home-global-soft-wash .home-faq-hard-fix .faq-list details {
    height: auto !important;
    min-height: 0 !important;
}


/* home-faq-tight-20260702 */
body.home-global-soft-wash .home-faq-hard-fix .faq-list details {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}

body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 14px !important;
    line-height: 1.18 !important;
    display: flex !important;
    align-items: center !important;
}

body.home-global-soft-wash .home-faq-hard-fix .faq-list details > p {
    padding: 0 14px 10px !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

@media (max-width: 720px) {
    body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary {
        padding: 9px 13px !important;
        line-height: 1.16 !important;
    }

    body.home-global-soft-wash .home-faq-hard-fix .faq-list details > p {
        padding: 0 13px 10px !important;
    }
}


/* home-faq-footer-gap-20260702 */
body.home-global-soft-wash .home-faq-hard-fix {
    overflow: visible !important;
    padding-bottom: 190px !important;
    margin-bottom: 0 !important;
}

body.home-global-soft-wash .home-faq-hard-fix .container,
body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
body.home-global-soft-wash .home-faq-hard-fix .faq-list {
    overflow: visible !important;
}

body.home-global-soft-wash .home-faq-hard-fix + .info-section {
    display: none !important;
}

@media (max-width: 920px) {
    body.home-global-soft-wash .home-faq-hard-fix {
        padding-bottom: 210px !important;
    }
}

@media (max-width: 520px) {
    body.home-global-soft-wash .home-faq-hard-fix {
        padding-bottom: 230px !important;
    }
}


/* mobile-heading-hierarchy-20260702 */
@media (max-width: 720px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 46px !important;
        line-height: 0.98 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 30px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 420px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 42px !important;
        line-height: 0.98 !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 28px !important;
        line-height: 1.08 !important;
    }
}

@media (max-width: 360px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 38px !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 26px !important;
    }
}


/* mobile-heading-soft-20260702 */
@media (max-width: 720px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 36px !important;
        line-height: 1.04 !important;
        font-weight: 940 !important;
        letter-spacing: 0 !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 30px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 420px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 34px !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 29px !important;
    }
}

@media (max-width: 360px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 32px !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 27px !important;
    }
}


/* mobile-landscape-heading-20260702 */
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 36px !important;
        line-height: 1.02 !important;
        font-weight: 940 !important;
        letter-spacing: 0 !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 30px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }
}

@media (orientation: landscape) and (max-width: 740px) and (max-height: 430px) {
    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 34px !important;
    }

    body.home-global-soft-wash .section-heading h2,
    body.home-global-soft-wash .faq-heading h2,
    body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 28px !important;
    }
}


/* landscape-hero-two-lines-20260702 */
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px) {
    body.home-global-soft-wash .hero {
        min-height: auto !important;
        padding-top: 92px !important;
        padding-bottom: 24px !important;
    }

    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        max-width: 620px !important;
        font-size: 34px !important;
        line-height: 1.02 !important;
        text-wrap: balance;
    }

    body.home-global-soft-wash .hero h1 br,
    body.home-global-soft-wash .hero-title br,
    body.home-global-soft-wash .hero-content h1 br {
        display: block !important;
    }

    body.home-global-soft-wash .platform-section,
    body.home-global-soft-wash .section-soft {
        padding-top: 22px !important;
    }
}

@media (orientation: landscape) and (max-width: 740px) and (max-height: 430px) {
    body.home-global-soft-wash .hero {
        padding-top: 84px !important;
        padding-bottom: 18px !important;
    }

    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 32px !important;
        max-width: 560px !important;
    }
}


/* landscape-hero-compact-20260702 */
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px) {
    body.home-global-soft-wash .hero,
    body.home-global-soft-wash .hero-section,
    body.home-global-soft-wash .home-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 64px !important;
        padding-bottom: 8px !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    body.home-global-soft-wash .hero .container,
    body.home-global-soft-wash .hero-inner,
    body.home-global-soft-wash .hero-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 30px !important;
        line-height: 1.02 !important;
        max-width: 560px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.home-global-soft-wash .section-soft,
    body.home-global-soft-wash .platform-section,
    body.home-global-soft-wash .sections-section {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    body.home-global-soft-wash .section-heading {
        margin-bottom: 10px !important;
    }

    body.home-global-soft-wash .section-heading h2 {
        font-size: 26px !important;
        line-height: 1.05 !important;
    }
}

@media (orientation: landscape) and (max-width: 740px) and (max-height: 430px) {
    body.home-global-soft-wash .hero,
    body.home-global-soft-wash .hero-section,
    body.home-global-soft-wash .home-hero {
        padding-top: 54px !important;
        padding-bottom: 6px !important;
    }

    body.home-global-soft-wash .hero h1,
    body.home-global-soft-wash .hero-title,
    body.home-global-soft-wash .hero-content h1 {
        font-size: 28px !important;
        max-width: 520px !important;
    }

    body.home-global-soft-wash .section-heading h2 {
        font-size: 24px !important;
    }
}


/* landscape-heading-final-20260702 */
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px) {
    html body.home-global-soft-wash .hero h1,
    html body.home-global-soft-wash .hero-title,
    html body.home-global-soft-wash .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.02 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    html body.home-global-soft-wash .section-heading h2,
    html body.home-global-soft-wash .faq-heading h2,
    html body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 24px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }
}

@media (orientation: landscape) and (max-width: 740px) and (max-height: 430px) {
    html body.home-global-soft-wash .hero h1,
    html body.home-global-soft-wash .hero-title,
    html body.home-global-soft-wash .hero-content h1 {
        font-size: 30px !important;
    }

    html body.home-global-soft-wash .section-heading h2,
    html body.home-global-soft-wash .faq-heading h2,
    html body.home-global-soft-wash .home-faq-hard-fix h2 {
        font-size: 22px !important;
    }
}


/* faq-stable-hover-20260702 */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover::after {
        opacity: 0 !important;
        transform: translateY(-3px) !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover > p {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-4px) !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open]::after {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] > p {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: translateY(0) !important;
    }
}


/* explore-hub-layout-20260702 */
@media (min-width: 981px) {
    body.seo-answer-page.seo-explore-hub-page .seo-answer-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
        column-gap: 34px !important;
        row-gap: 22px !important;
        align-items: start !important;
    }

    body.seo-answer-page.seo-explore-hub-page .seo-answer-copy {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        max-width: 760px !important;
        margin: 0 !important;
    }

    body.seo-answer-page.seo-explore-hub-page .seo-answer-side-rail {
        display: contents !important;
    }

    body.seo-answer-page.seo-explore-hub-page .seo-top-answers-card {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body.seo-answer-page.seo-explore-hub-page .seo-telegram-panel {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body.seo-answer-page.seo-explore-hub-page .seo-answer-hero {
        padding-bottom: 34px !important;
    }

    body.seo-answer-page.seo-explore-hub-page .seo-platform-section {
        padding-top: 28px !important;
    }
}


/* --- FAQ_ACCORDION_FINAL_20260702_START --- */

.home-faq details.reveal,
.faq-section details.reveal,
details.reveal:has(> summary):has(> p) {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(0, 132, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(0, 70, 140, 0.08) !important;
}

.home-faq details.reveal::before,
.home-faq details.reveal::after,
.faq-section details.reveal::before,
.faq-section details.reveal::after,
details.reveal:has(> summary):has(> p)::before,
details.reveal:has(> summary):has(> p)::after {
    content: none !important;
    display: none !important;
}

.home-faq details.reveal summary,
.faq-section details.reveal summary,
details.reveal:has(> summary):has(> p) > summary {
    display: block !important;
    min-height: 0 !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    cursor: pointer !important;
    list-style: none !important;
}

.home-faq details.reveal summary::-webkit-details-marker,
.faq-section details.reveal summary::-webkit-details-marker,
details.reveal:has(> summary):has(> p) > summary::-webkit-details-marker {
    display: none !important;
}

.home-faq details.reveal:not([open]) > p,
.faq-section details.reveal:not([open]) > p,
details.reveal:has(> summary):has(> p):not([open]) > p {
    display: none !important;
    position: static !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.home-faq details.reveal[open] > p,
.faq-section details.reveal[open] > p,
details.reveal:has(> summary):has(> p)[open] > p {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    inset: auto !important;
    transform: none !important;
    padding: 2px 14px 12px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #1d3557 !important;
    font-size: clamp(15px, 1.5vw, 18px) !important;
    line-height: 1.45 !important;
}

.home-faq details.reveal[open] summary,
.faq-section details.reveal[open] summary,
details.reveal:has(> summary):has(> p)[open] > summary {
    padding-bottom: 4px !important;
}

.home-faq details.reveal:hover > p,
.faq-section details.reveal:hover > p,
details.reveal:has(> summary):has(> p):hover > p {
    pointer-events: auto !important;
}

/* --- FAQ_ACCORDION_FINAL_20260702_END --- */


/* --- FAQ_FLOW_ACCORDION_20260702_START --- */

html body.home-global-soft-wash .home-faq-hard-fix {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: clamp(64px, 6vw, 92px) !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-layout,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open],
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal[open],
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details:hover {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    contain: none !important;
    transform: none !important;
    translate: none !important;
    isolation: auto !important;
    z-index: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.984) !important;
    border: 1px solid rgba(30, 110, 210, 0.12) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(15, 87, 171, 0.08) !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details::before,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details::after,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal::before,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal::after {
    content: none !important;
    display: none !important;
    position: static !important;
    inset: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details > summary,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal > summary {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 9px 14px !important;
    margin: 0 !important;
    list-style: none !important;
    cursor: pointer !important;
    line-height: 1.22 !important;
    background: transparent !important;
    transform: none !important;
    z-index: 2 !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details > summary::-webkit-details-marker {
    display: none !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details:not([open]) > p,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal:not([open]) > p {
    display: none !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] > p,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal[open] > p {
    display: block !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 14px 13px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(6, 44, 115, 0.76) !important;
    font-size: clamp(15px, 1.45vw, 18px) !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] > summary {
    padding-bottom: 5px !important;
}

@media (max-width: 980px) {
    html body.home-global-soft-wash .home-faq-hard-fix {
        padding-bottom: 74px !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        gap: 13px !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details > summary {
        padding: 10px 13px !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details[open] > p {
        padding: 0 13px 13px !important;
        font-size: 15px !important;
        line-height: 1.42 !important;
    }
}

/* --- FAQ_FLOW_ACCORDION_20260702_END --- */


/* --- FAQ_FOOTER_STABILITY_20260702_START --- */

@media (min-width: 981px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        min-height: 390px !important;
    }
}

@media (max-width: 980px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        min-height: 470px !important;
    }
}

@media (orientation: landscape) and (max-width: 980px) and (max-height: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        min-height: 365px !important;
    }
}

/* --- FAQ_FOOTER_STABILITY_20260702_END --- */


/* --- FAQ_FULL_WIDTH_MOBILE_LANDSCAPE_20260702_START --- */

@media (max-width: 980px) {
    html body.home-global-soft-wash .home-faq-hard-fix .container,
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        align-items: stretch !important;
        width: auto !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details,
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details > summary {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- FAQ_FULL_WIDTH_MOBILE_LANDSCAPE_20260702_END --- */


/* --- FAQ_MATCH_CARDS_MOBILE_LANDSCAPE_20260703_START --- */

@media (orientation: landscape) and (max-width: 980px) and (max-height: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .container,
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        align-items: center !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        width: min(calc(100% - 54px), 760px) !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        justify-self: center !important;
        box-sizing: border-box !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details,
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }
}

/* --- FAQ_MATCH_CARDS_MOBILE_LANDSCAPE_20260703_END --- */


/* --- FAQ_MATCH_CARD_GRID_LINES_20260703_START --- */

@media (orientation: landscape) and (max-width: 980px) and (max-height: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        width: min(calc(100% - 86px), 743px) !important;
        max-width: 743px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }
}

@media (orientation: portrait) and (max-width: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .container,
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        align-items: flex-start !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        width: calc(100% - 17px) !important;
        max-width: 390px !important;
        margin-left: 12px !important;
        margin-right: auto !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- FAQ_MATCH_CARD_GRID_LINES_20260703_END --- */


/* --- FAQ_PORTRAIT_VISUAL_CARD_LINE_20260703_START --- */

@media (orientation: portrait) and (max-width: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        width: min(calc(100% - 29px), 346px) !important;
        max-width: 346px !important;
        margin-left: 12px !important;
        margin-right: auto !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details,
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- FAQ_PORTRAIT_VISUAL_CARD_LINE_20260703_END --- */


/* --- FAQ_PORTRAIT_BALANCE_20260703_START --- */

@media (orientation: portrait) and (max-width: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        width: min(calc(100% - 21px), 354px) !important;
        max-width: 354px !important;
        margin-left: 12px !important;
        margin-right: auto !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }
}

/* --- FAQ_PORTRAIT_BALANCE_20260703_END --- */


/* --- FAQ_PORTRAIT_SHIFT_RIGHT_20260703_START --- */

@media (orientation: portrait) and (max-width: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-list {
        width: min(calc(100% - 21px), 354px) !important;
        max-width: 354px !important;
        margin-left: 16px !important;
        margin-right: auto !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }
}

/* --- FAQ_PORTRAIT_SHIFT_RIGHT_20260703_END --- */


/* --- FAQ_SUBCOPY_MOBILE_LANDSCAPE_20260703_START --- */

@media (orientation: landscape) and (max-width: 980px) and (max-height: 520px) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-heading,
    html body.home-global-soft-wash .home-faq-hard-fix .section-heading {
        width: min(calc(100% - 86px), 743px) !important;
        max-width: 743px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-heading .section-copy,
    html body.home-global-soft-wash .home-faq-hard-fix .section-heading .section-copy,
    html body.home-global-soft-wash .home-faq-hard-fix p.section-copy {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 17px !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }
}

/* --- FAQ_SUBCOPY_MOBILE_LANDSCAPE_20260703_END --- */

/* LEGACY_GUIDES_ANSWERS_CLEANUP_20260703_START */
body.legacy-hub-clean .legacy-remove {
    display: none !important;
}

body.legacy-hub-clean .legacy-topic-card {
    margin-top: 24px !important;
}

body.legacy-hub-clean .legacy-topic-card h2,
body.legacy-hub-clean .legacy-topic-card h3 {
    margin-top: 0 !important;
}

body.legacy-hub-clean .seo-meta,
body.legacy-hub-clean .section-meta,
body.legacy-hub-clean .page-meta {
    display: none !important;
}

@media (min-width: 981px) {
    body.legacy-hub-clean .legacy-topic-card {
        max-width: 760px;
    }
}
/* LEGACY_GUIDES_ANSWERS_CLEANUP_20260703_END */





/* ANSWERS_TOPIC_CARD_20260703_START */
body.answers-home-topic-card .answers-home-faq-copy {
    display: none !important;
}

body.answers-home-topic-card .answers-faq-topic-card {
    width: 100% !important;
    max-width: 746px !important;
    margin-top: 22px !important;
}

body.answers-home-topic-card .answers-faq-topic-card .seo-top-answers-head {
    display: flex !important;
    align-items: center !important;
}

body.answers-home-topic-card .answers-faq-topic-card .seo-top-answer-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.answers-home-topic-card .answers-faq-topic-card .seo-top-answer-row::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 980px) {
    body.answers-home-topic-card .answers-faq-topic-card {
        max-width: 100% !important;
        margin-top: 20px !important;
    }
}
/* ANSWERS_TOPIC_CARD_20260703_END */


/* SUBTOPIC_QUESTION_HUB_CLEANUP_20260703 */
.seo-subtopic-question-hub .seo-answer-copy .seo-lead,
.seo-subtopic-question-hub .seo-answer-copy .seo-meta {
    display: none !important;
}

.seo-subtopic-question-hub .seo-answer-copy {
    padding-bottom: 0 !important;
}

.seo-subtopic-question-hub .seo-answer-top {
    row-gap: 18px;
}

/* SUBTOPIC_META_FULL_HIDE_20260703 */
html body.seo-subtopic-question-hub .seo-answer-copy .seo-meta,
html body.seo-subtopic-question-hub .seo-meta,
html body.seo-subtopic-question-hub .seo-answer-copy > .seo-meta {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html body.seo-subtopic-question-hub .seo-answer-copy {
    gap: 0 !important;
    padding-bottom: 0 !important;
}

html body.seo-subtopic-question-hub .seo-answer-copy h1 {
    margin-bottom: 0 !important;
}

/* SUBTOPIC_LEFT_GHOST_BLOCK_REMOVE_20260703 */
html body.seo-subtopic-question-hub .seo-answer-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

html body.seo-subtopic-question-hub .seo-answer-top {
    align-items: start !important;
    row-gap: 18px !important;
}

html body.seo-subtopic-question-hub .seo-top-answers-card {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
}


/* PAGE_LOAD_FLICKER_STABILIZER_20260703_START */
html body .site-header,
html body .site-header::before,
html body .site-header::after,
html body::before,
html body::after,
html body .seo-answer-hero,
html body .seo-answer-hero::before,
html body .seo-answer-hero::after,
html body .seo-top-answers-card,
html body .seo-top-answers-card::before,
html body .seo-top-answers-card::after {
    transition: none !important;
    animation: none !important;
}

html body .image-card,
html body .image-card::before,
html body .image-card::after {
    transition-property: transform, box-shadow, border-color !important;
    transition-duration: .22s !important;
    transition-timing-function: ease !important;
    animation: none !important;
}

html body .image-card img,
html body .image-card picture {
    transition: none !important;
    animation: none !important;
}
/* PAGE_LOAD_FLICKER_STABILIZER_20260703_END */


/* HEADER_SLICE_RESTORE_NO_FLASH_20260703_START */
:root {
    --header-slice-bg-color: #f5fbff;
    --header-slice-bg-image:
        radial-gradient(at 20% 30%, rgba(244, 250, 253, 0.46) 0%, rgba(244, 250, 253, 0.34) 28%, rgba(236, 246, 252, 0.18) 52%, rgba(236, 246, 252, 0.04) 76%, rgba(236, 246, 252, 0) 100%),
        linear-gradient(90deg, rgba(241, 248, 252, 0.84) 0%, rgba(241, 248, 252, 0.80) 18%, rgba(241, 248, 252, 0.64) 38%, rgba(241, 248, 252, 0.34) 60%, rgba(241, 248, 252, 0.08) 100%),
        url("/static/images/dropcodeshub-site-bg.webp?v=clean-desktop-foundation-26-06-1");
    --header-slice-bg-size: 100% 100%, 100% 100%, cover;
    --header-slice-bg-position: 0 0, 0 0, center -22px;
    --header-slice-bg-repeat: no-repeat, no-repeat, no-repeat;
}

html,
body,
body::before,
body::after,
.site-header,
.site-header::before,
.site-header::after {
    transition: none !important;
    animation: none !important;
}

body.home-global-soft-wash .site-header::before,
body.seo-answer-page .site-header::before {
    transition: none !important;
    animation: none !important;
}
/* HEADER_SLICE_RESTORE_NO_FLASH_20260703_END */


/* STATIC_DESKTOP_NAV_20260703_START */
.main-nav .desktop-section-link[data-static-desktop-nav="1"] {
    display: none !important;
}

@media (min-width: 1240px) {
    .main-nav .desktop-section-link[data-static-desktop-nav="1"] {
        display: inline-flex !important;
    }

    .main-nav .explore-toggle {
        display: none !important;
    }
}
/* STATIC_DESKTOP_NAV_20260703_END */



/* HEADER_CTA_NO_FLASH_20260703_START */
@media (min-width: 981px) {
    :root {
        --header-slice-bg-color: #f5fbff;
        --header-slice-bg-image:
            radial-gradient(ellipse at 20% 30%, rgba(244, 250, 253, 0.46) 0%, rgba(244, 250, 253, 0.34) 28%, rgba(236, 246, 252, 0.18) 52%, rgba(236, 246, 252, 0.04) 76%, rgba(236, 246, 252, 0) 100%),
            linear-gradient(90deg, rgba(241, 248, 252, 0.84) 0%, rgba(241, 248, 252, 0.80) 18%, rgba(241, 248, 252, 0.64) 38%, rgba(241, 248, 252, 0.42) 56%, rgba(241, 248, 252, 0.20) 72%, rgba(241, 248, 252, 0.07) 88%, rgba(241, 248, 252, 0) 100%),
            url("/static/images/dropcodeshub-site-bg.webp");
        --header-slice-bg-size: 100% 100%, 100% 100%, calc(100vw + 114px) auto;
        --header-slice-bg-position: 0 0, 0 0, 100% -22px;
        --header-slice-bg-repeat: no-repeat, no-repeat, no-repeat;
    }
}

@keyframes headerTelegramOpacityPulse20260703 {
    0%, 100% {
        opacity: 0.78;
        transform: none;
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.site-header .mobile-header-hub-button {
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
    will-change: auto !important;
}

.site-header .mobile-header-hub-button .telegram-button-icon {
    animation-name: headerTelegramOpacityPulse20260703 !important;
    animation-duration: 1.65s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    transform: none !important;
    will-change: opacity !important;
}

.site-header .mobile-header-hub-button .telegram-button-icon svg {
    transform: none !important;
}
/* HEADER_CTA_NO_FLASH_20260703_END */

/* VIEWPORT_STABLE_FIX_20260703_START */
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}

body.home-global-soft-wash,
body.seo-answer-page {
    overflow-anchor: none !important;
}

.site-header,
.site-header::before,
.site-header::after {
    transition: none !important;
    animation: none !important;
}
/* VIEWPORT_STABLE_FIX_20260703_END */

/* CURRENT_DESKTOP_HEADER_NAV_20260703_START */
@media (min-width: 981px) {
    html body.home-global-soft-wash .site-header .brand,
    html body.seo-answer-page .site-header .brand {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.home-global-soft-wash .site-header .container.header-inner,
    html body.home-global-soft-wash .site-header .header-inner,
    html body.seo-answer-page .site-header .container.header-inner,
    html body.seo-answer-page .site-header .header-inner {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 34px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        position: relative !important;
    }

    html body.home-global-soft-wash .site-header .mobile-header-hub-button,
    html body.home-global-soft-wash .site-header a.mobile-header-hub-button,
    html body.seo-answer-page .site-header .mobile-header-hub-button,
    html body.seo-answer-page .site-header a.mobile-header-hub-button {
        grid-column: 1 !important;
        justify-self: start !important;
        align-self: center !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
    }

    html body.home-global-soft-wash .site-header .main-nav,
    html body.seo-answer-page .site-header .main-nav {
        grid-column: 2 !important;
        justify-self: center !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        width: max-content !important;
        max-width: 100% !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    html body.home-global-soft-wash .site-header .main-nav a,
    html body.home-global-soft-wash .site-header .main-nav .explore-toggle,
    html body.seo-answer-page .site-header .main-nav a,
    html body.seo-answer-page .site-header .main-nav .explore-toggle {
        position: relative !important;
        transform: none !important;
        margin: 0 !important;
    }

    html body.home-global-soft-wash .site-header .language-switcher,
    html body.seo-answer-page .site-header .language-switcher {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: center !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
    }

    html body .seo-top-answers-list a,
    html body .related-questions a,
    html body .related-topics a,
    html body .related-topics-card a,
    html body .seo-related-card a,
    html body .seo-answer-sidebar a,
    html body aside a {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}
/* CURRENT_DESKTOP_HEADER_NAV_20260703_END */


/* MOBILE_EXPLORE_OPEN_HEADER_CLIP_FIX_20260703_START */
@media (max-width: 980px) and (orientation: portrait) {
  html.explore-menu-open .site-header {
    overflow: visible !important;
  }

  html.explore-menu-open .site-header .container.header-inner,
  html.explore-menu-open .site-header .header-inner {
    transform: translateY(31px) !important;
  }
}
/* MOBILE_EXPLORE_OPEN_HEADER_CLIP_FIX_20260703_END */


/* MOBILE_EXPLORE_PORTRAIT_RESTORE_20260703
   Restores mobile Explore popup visibility.
   Keeps desktop navigation behavior unchanged.
   Does not touch Telegram scripts, routes, domains or secrets.
*/
@media (max-width: 980px) {
    html.explore-menu-open .site-header {
        overflow: hidden !important;
    }

    html.explore-menu-open .site-header .container.header-inner,
    html.explore-menu-open .site-header .header-inner {
        transform: none !important;
    }

    html.explore-menu-open .explore-menu {
        z-index: 7000 !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    html.explore-menu-open .explore-menu-inner {
        position: relative !important;
        z-index: 1 !important;
        background: rgba(245, 251, 255, 0.98) !important;
    }
}

/* MOBILE_HEADER_BACKGROUND_SYNC_20260703
   Syncs mobile fixed header background with the page background slice.
   Does not change language switcher, nav labels, links, Telegram scripts or routes.
*/
@media (max-width: 980px) and (orientation: portrait) {
    :root {
        --site-header-h: 98px;
        --site-bg-h: 100dvh;
        --header-slice-bg-color: #dcebff;
        --header-slice-bg-image: url("/static/images/mobile-portrait-bg.webp?v=clean-portrait-26-06-1");
        --header-slice-bg-size: 100% auto;
        --header-slice-bg-position: center 0;
        --header-slice-bg-repeat: no-repeat;
    }

    body.home-global-soft-wash {
        background-image: url("/static/images/mobile-portrait-bg.webp?v=clean-portrait-26-06-1") !important;
        background-size: 100% auto !important;
        background-position: center 0 !important;
        background-repeat: no-repeat !important;
        background-color: #dcebff !important;
    }

    body.home-global-soft-wash .site-header,
    body.seo-answer-page .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--site-header-h) !important;
        overflow: hidden !important;
        background: transparent !important;
        isolation: isolate !important;
        z-index: 5000 !important;
    }

    body.home-global-soft-wash .site-header::before,
    body.seo-answer-page .site-header::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100vw !important;
        height: var(--site-bg-h) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background-color: var(--header-slice-bg-color) !important;
        background-image: var(--header-slice-bg-image) !important;
        background-size: var(--header-slice-bg-size) !important;
        background-position: var(--header-slice-bg-position) !important;
        background-repeat: var(--header-slice-bg-repeat) !important;
    }

    body.home-global-soft-wash .site-header .header-inner,
    body.seo-answer-page .site-header .header-inner,
    body.home-global-soft-wash .site-header .main-nav,
    body.seo-answer-page .site-header .main-nav {
        position: relative !important;
        z-index: 2 !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    :root {
        --site-header-h: 64px;
        --site-bg-h: 100dvh;
        --header-slice-bg-color: #dcebff;
        --header-slice-bg-image: url("/static/images/mobile-portrait-bg.webp?v=clean-landscape-26-06-1");
        --header-slice-bg-size: 100vw auto;
        --header-slice-bg-position: center 0;
        --header-slice-bg-repeat: no-repeat;
    }

    body.home-global-soft-wash {
        background-image: url("/static/images/mobile-portrait-bg.webp?v=clean-landscape-26-06-1") !important;
        background-size: 100vw auto !important;
        background-position: center 0 !important;
        background-repeat: no-repeat !important;
        background-color: #dcebff !important;
    }

    body.home-global-soft-wash .site-header,
    body.seo-answer-page .site-header {
        overflow: hidden !important;
        background: transparent !important;
        isolation: isolate !important;
    }
}

/* MOBILE_HEADER_WIDTH_RESTORE_20260703
   Restores compact mobile header content width.
   Keeps the full-width background slice and Explore popup behavior.
*/
@media (max-width: 980px) and (orientation: portrait) {
    html body.home-global-soft-wash .site-header,
    html body.seo-answer-page .site-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body.home-global-soft-wash .site-header .container.header-inner,
    html body.home-global-soft-wash .site-header .header-inner,
    html body.seo-answer-page .site-header .container.header-inner,
    html body.seo-answer-page .site-header .header-inner {
        width: min(calc(100vw - 32px), 360px) !important;
        max-width: min(calc(100vw - 32px), 360px) !important;
        height: auto !important;
        min-height: 82px !important;
        margin: 8px auto 0 !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        grid-template-areas:
            "hub lang"
            "nav nav" !important;
        column-gap: 10px !important;
        row-gap: 8px !important;
        align-items: center !important;

        overflow: visible !important;
        transform: none !important;
    }

    html body .site-header .mobile-header-hub-button {
        grid-area: hub !important;
        justify-self: start !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .site-header .language-switcher {
        grid-area: lang !important;
        justify-self: end !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
    }

    html body .site-header .main-nav {
        grid-area: nav !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-self: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        position: relative !important;
        transform: none !important;
    }
}

/* MOBILE_HOME_EXPLORE_RESTORE_20260703
   Restores the mobile Home / Explore row after compact header width restore.
*/
@media (max-width: 980px) and (orientation: portrait) {
    html body .site-header .main-nav {
        grid-area: nav !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

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

        align-items: center !important;
        justify-content: center !important;
        gap: 22px !important;

        margin: 0 auto !important;
        padding: 0 !important;
        position: relative !important;
        transform: none !important;
        pointer-events: auto !important;
        overflow: visible !important;
        z-index: 3 !important;
    }

    html body .site-header .main-nav > a:not(.desktop-section-link),
    html body .site-header .main-nav .explore-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }

    html body .site-header .main-nav .desktop-section-link[data-static-desktop-nav="1"] {
        display: none !important;
    }
}

/* MOBILE_NAV_TOP_RESTORE_20260703
   Keeps Home / Explore inside the compact fixed mobile header.
*/
@media (max-width: 980px) and (orientation: portrait) {
    html body .site-header .main-nav {
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        position: relative !important;
        grid-area: nav !important;
        align-self: start !important;
        justify-self: center !important;

        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* MOBILE_NAV_POSITION_FINAL_20260703
   Forces Home / Explore back into the compact portrait header.
*/
@media (max-width: 980px) and (orientation: portrait) {
    html body.home-global-soft-wash .site-header .main-nav,
    html body.seo-answer-page .site-header .main-nav {
        grid-area: nav !important;
        position: relative !important;

        top: 0 !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

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

        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        align-self: start !important;
        justify-self: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 22px !important;

        margin: 0 auto !important;
        padding: 0 !important;
        transform: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        z-index: 3 !important;
    }

    html body.home-global-soft-wash .site-header .main-nav > a:not(.desktop-section-link),
    html body.home-global-soft-wash .site-header .main-nav .explore-toggle,
    html body.seo-answer-page .site-header .main-nav > a:not(.desktop-section-link),
    html body.seo-answer-page .site-header .main-nav .explore-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* DESKTOP_BACKGROUND_MIRROR_EXTEND_20260703 */
@media (min-width: 981px) {
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    position: relative !important;
    isolation: isolate !important;
    overflow-x: hidden !important;
    background-color: #f5fbff !important;
  }

  html body.home-global-soft-wash::after,
  html body.seo-answer-page::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: calc(100vh - 1px) !important;
    width: 100% !important;
    height: 300vh !important;
    min-height: 2200px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #f5fbff !important;
    background-image:
      radial-gradient(ellipse at 20% 30%, rgba(74, 199, 255, 0.18), transparent 45%),
      linear-gradient(90deg, rgba(246, 252, 255, 0.94), rgba(246, 252, 255, 0.42)),
      url("/static/images/dropcodeshub-site-bg.webp") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 100% 100%, 100% 100%, calc(100vw + 114px) auto !important;
    background-position: 0 0, 0 0, 100% -22px !important;
    transform: scaleY(-1) !important;
    transform-origin: center center !important;
  }

  html body.home-global-soft-wash .site-header,
  html body.home-global-soft-wash main,
  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page .site-header,
  html body.seo-answer-page main,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* DESKTOP_BACKGROUND_LAYER_REPAIR_20260703 */
@media (min-width: 981px) {
  html,
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-color: #f5fbff !important;
    overflow-x: hidden !important;
  }

  html body.home-global-soft-wash,
  html body.seo-answer-page {
    position: relative !important;
    isolation: isolate !important;
    min-height: 100vh !important;
    background: #f5fbff !important;
  }

  html body.home-global-soft-wash::after,
  html body.seo-answer-page::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
    transform: none !important;
  }

  html body.home-global-soft-wash::before,
  html body.seo-answer-page::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #f5fbff !important;
    background-image:
      radial-gradient(ellipse at 20% 30%, rgba(244, 250, 253, 0.46) 0%, rgba(244, 250, 253, 0.34) 28%, rgba(236, 246, 252, 0.18) 52%, rgba(236, 246, 252, 0.04) 76%, rgba(236, 246, 252, 0) 100%),
      linear-gradient(90deg, rgba(241, 248, 252, 0.84) 0%, rgba(241, 248, 252, 0.80) 18%, rgba(241, 248, 252, 0.64) 38%, rgba(241, 248, 252, 0.42) 56%, rgba(241, 248, 252, 0.20) 72%, rgba(241, 248, 252, 0.07) 88%, rgba(241, 248, 252, 0) 100%),
      url("/static/images/dropcodeshub-site-bg.webp") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 100% 100%, 100% 100%, calc(100vw + 114px) 100% !important;
    background-position: 0 0, 0 0, 100% -22px !important;
    background-attachment: scroll, scroll, scroll !important;
    transform: none !important;
  }

  html body.home-global-soft-wash .site-header,
  html body.home-global-soft-wash main,
  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page .site-header,
  html body.seo-answer-page main,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 2 !important;
  }

  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page .site-footer {
    z-index: 3 !important;
    margin-bottom: 0 !important;
    background: rgb(7, 63, 146) !important;
    overflow: hidden !important;
  }
}

/* HEADER_AND_MOBILE_WASH_REPAIR_20260703 */

/* Desktop: header gets its own non-stretched background slice again */
@media (min-width: 981px) {
  html body.home-global-soft-wash .site-header,
  html body.seo-answer-page .site-header {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 720px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: #f5fbff !important;
    background-image:
      radial-gradient(ellipse at 20% 30%, rgba(244, 250, 253, 0.46) 0%, rgba(244, 250, 253, 0.34) 28%, rgba(236, 246, 252, 0.18) 52%, rgba(236, 246, 252, 0.04) 76%, rgba(236, 246, 252, 0) 100%),
      linear-gradient(90deg, rgba(241, 248, 252, 0.84) 0%, rgba(241, 248, 252, 0.80) 18%, rgba(241, 248, 252, 0.64) 38%, rgba(241, 248, 252, 0.42) 56%, rgba(241, 248, 252, 0.20) 72%, rgba(241, 248, 252, 0.07) 88%, rgba(241, 248, 252, 0) 100%),
      url("/static/images/dropcodeshub-site-bg.webp") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 100% 100%, 100% 100%, calc(100vw + 114px) auto !important;
    background-position: 0 0, 0 0, 100% -22px !important;
  }

  html body.home-global-soft-wash .site-header > *,
  html body.seo-answer-page .site-header > * {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Mobile portrait: keep current header mechanics and only add desktop-like soft wash */
@media (max-width: 980px) and (orientation: portrait) {
  :root {
    --header-slice-bg-color: #dcebff;
    --header-slice-bg-image: url("/static/images/mobile-portrait-bg.webp?v=clean-portrait-26-06-1");
    --header-slice-bg-size: 100% auto;
    --header-slice-bg-position: center 0;
    --header-slice-bg-repeat: no-repeat;
  }

  html,
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-color: #dcebff !important;
    overflow-x: hidden !important;
  }

  html body.home-global-soft-wash,
  html body.seo-answer-page {
    position: relative !important;
    isolation: isolate !important;
    min-height: 100vh !important;
    background-color: #dcebff !important;
    background-image: url("/static/images/mobile-portrait-bg.webp?v=clean-portrait-26-06-1") !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    background-position: center 0 !important;
    background-attachment: scroll !important;
  }

  html body.home-global-soft-wash::before,
  html body.seo-answer-page::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
      radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.30) 34%, rgba(255, 255, 255, 0.08) 68%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(90deg, rgba(245, 251, 255, 0.56) 0%, rgba(245, 251, 255, 0.34) 48%, rgba(245, 251, 255, 0.10) 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;
  }

  html body.home-global-soft-wash::after,
  html body.seo-answer-page::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
  }

  html body.home-global-soft-wash main,
  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page main,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 2 !important;
  }

  html body.home-global-soft-wash .site-header,
  html body.seo-answer-page .site-header {
    background: transparent !important;
    z-index: 5000 !important;
  }

  html:not(.explore-menu-open) body.home-global-soft-wash .site-header,
  html:not(.explore-menu-open) body.seo-answer-page .site-header {
    overflow: hidden !important;
  }

  html.explore-menu-open body.home-global-soft-wash .site-header,
  html.explore-menu-open body.seo-answer-page .site-header {
    overflow: visible !important;
  }
}

/* MOBILE_HEADER_WASH_MATCH_20260703 */
@media (max-width: 980px) and (orientation: portrait) {
  html body.home-global-soft-wash .site-header,
  html body.seo-answer-page .site-header {
    background: transparent !important;
    isolation: isolate !important;
    z-index: 5000 !important;
  }

  /* Keep the original header background mechanics untouched */
  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    z-index: 0 !important;
  }

  /* Add the same light wash as the page background */
  html body.home-global-soft-wash .site-header::after,
  html body.seo-answer-page .site-header::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-image:
      radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.30) 34%, rgba(255, 255, 255, 0.08) 68%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(90deg, rgba(245, 251, 255, 0.56) 0%, rgba(245, 251, 255, 0.34) 48%, rgba(245, 251, 255, 0.10) 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;
    transform: none !important;
  }

  html body.home-global-soft-wash .site-header > *,
  html body.seo-answer-page .site-header > * {
    position: relative !important;
    z-index: 2 !important;
  }

  html:not(.explore-menu-open) body.home-global-soft-wash .site-header,
  html:not(.explore-menu-open) body.seo-answer-page .site-header {
    overflow: hidden !important;
  }

  html.explore-menu-open body.home-global-soft-wash .site-header,
  html.explore-menu-open body.seo-answer-page .site-header {
    overflow: visible !important;
  }
}

/* MOBILE_HEADER_WASH_SCALE_SYNC_20260703 */
@media (max-width: 980px) and (orientation: portrait) {
  :root {
    --mobile-wash-canvas-h: 400dvh;
  }

  html body.home-global-soft-wash::before,
  html body.seo-answer-page::before {
    background-size: 100% var(--mobile-wash-canvas-h), 100% var(--mobile-wash-canvas-h) !important;
    background-position: 0 0, 0 0 !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  html body.home-global-soft-wash .site-header::after,
  html body.seo-answer-page .site-header::after {
    height: 100% !important;
    min-height: 0 !important;
    background-size: 100% var(--mobile-wash-canvas-h), 100% var(--mobile-wash-canvas-h) !important;
    background-position: 0 0, 0 0 !important;
    background-repeat: no-repeat, no-repeat !important;
  }
}

/* MOBILE_PORTRAIT_BG_LOOP_20260703 */
@media (max-width: 980px) and (orientation: portrait) {
  :root {
    --header-slice-bg-image: url("/static/images/mobile-portrait-bg-loop.webp?v=loop-20260703-1");
    --header-slice-bg-size: 100% auto;
    --header-slice-bg-position: center 0;
    --header-slice-bg-repeat: no-repeat;
  }

  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-image: url("/static/images/mobile-portrait-bg-loop.webp?v=loop-20260703-1") !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    background-position: center 0 !important;
    background-attachment: scroll !important;
  }

  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    background-image: url("/static/images/mobile-portrait-bg-loop.webp?v=loop-20260703-1") !important;
    background-size: 100% auto !important;
    background-position: center 0 !important;
    background-repeat: no-repeat !important;
  }

  html body.home-global-soft-wash::after,
  html body.seo-answer-page::after {
    content: none !important;
    display: none !important;
  }

  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 3 !important;
    overflow: hidden !important;
  }
}

/* MOBILE_FINAL_CTA_SHADOW_CLEAN_20260704 */
@media (max-width: 980px) and (orientation: portrait) {
  html body.home-global-soft-wash .seo-final-cta,
  html body.seo-answer-page .seo-final-cta {
    box-shadow: 0 0 22px rgba(66, 200, 255, 0.08) !important;
    filter: none !important;
  }
}

/* MOBILE_FINAL_CTA_FLASH_CLEAN_20260704 */
@media (max-width: 980px) and (orientation: portrait) {
  html body.home-global-soft-wash .seo-final-cta-section,
  html body.seo-answer-page .seo-final-cta-section,
  html body.home-global-soft-wash .seo-final-cta,
  html body.seo-answer-page .seo-final-cta,
  html body.home-global-soft-wash .seo-final-cta::before,
  html body.home-global-soft-wash .seo-final-cta::after,
  html body.seo-answer-page .seo-final-cta::before,
  html body.seo-answer-page .seo-final-cta::after {
    transition: none !important;
    animation: none !important;
  }

  html body.home-global-soft-wash .seo-final-cta,
  html body.seo-answer-page .seo-final-cta {
    box-shadow: none !important;
    filter: none !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    contain: paint !important;
    isolation: isolate !important;
  }

  html body.home-global-soft-wash .seo-final-cta::after,
  html body.seo-answer-page .seo-final-cta::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
    box-shadow: none !important;
  }
}

/* MOBILE_BG_WASH_INLINE_NO_FLASH_20260704 */
@media (max-width: 980px) and (orientation: portrait) {
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-color: #dcebff !important;
    background-image:
      radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.30) 34%, rgba(255, 255, 255, 0.08) 68%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(90deg, rgba(245, 251, 255, 0.56) 0%, rgba(245, 251, 255, 0.34) 48%, rgba(245, 251, 255, 0.10) 100%),
      url("/static/images/mobile-portrait-bg-loop.webp?v=loop-20260703-1") !important;
    background-repeat: no-repeat, no-repeat, repeat-y !important;
    background-size: 100% 400dvh, 100% 400dvh, 100% auto !important;
    background-position: 0 0, 0 0, center 0 !important;
    background-attachment: scroll, scroll, scroll !important;
  }

  html body.home-global-soft-wash::before,
  html body.seo-answer-page::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
  }

  html body.home-global-soft-wash main,
  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page main,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* MOBILE_BG_BAKED_WASH_NO_LAYER_20260704 */
@media (max-width: 980px) and (orientation: portrait) {
  :root {
    --header-slice-bg-color: #dcebff;
    --header-slice-bg-image: url("/static/images/mobile-portrait-bg-loop-washed.webp?v=baked-20260704-1");
    --header-slice-bg-size: 100% auto;
    --header-slice-bg-position: center 0;
    --header-slice-bg-repeat: no-repeat;
  }

  html,
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-color: #dcebff !important;
    overflow-x: hidden !important;
  }

  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-image: url("/static/images/mobile-portrait-bg-loop-washed.webp?v=baked-20260704-1") !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    background-position: center 0 !important;
    background-attachment: scroll !important;
  }

  html body.home-global-soft-wash::before,
  html body.seo-answer-page::before,
  html body.home-global-soft-wash::after,
  html body.seo-answer-page::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
  }

  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    background-image: url("/static/images/mobile-portrait-bg-loop-washed.webp?v=baked-20260704-1") !important;
    background-size: 100% auto !important;
    background-position: center 0 !important;
    background-repeat: no-repeat !important;
  }

  html body.home-global-soft-wash .site-header::after,
  html body.seo-answer-page .site-header::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
  }

  html body.home-global-soft-wash main,
  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page main,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* MOBILE_PLATFORM_TO_CTA_LINE_CLEAN_20260704 */
@media (max-width: 980px) and (orientation: portrait) {
  html body.home-global-soft-wash .seo-platform-section,
  html body.seo-answer-page .seo-platform-section {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html body.home-global-soft-wash .seo-platform-section::after,
  html body.seo-answer-page .seo-platform-section::after {
    content: none !important;
    display: none !important;
  }
}

/* DESKTOP_BG_LOOP_AND_STICKY_HEADER_20260704 */
@media (min-width: 981px) {
  html,
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-color: #f5fbff !important;
    overflow-x: hidden !important;
  }

  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-image:
      radial-gradient(ellipse at 20% 30%, rgba(244, 250, 253, 0.46) 0%, rgba(244, 250, 253, 0.34) 28%, rgba(236, 246, 252, 0.18) 52%, rgba(236, 246, 252, 0.04) 76%, rgba(236, 246, 252, 0) 100%),
      linear-gradient(90deg, rgba(241, 248, 252, 0.84) 0%, rgba(241, 248, 252, 0.80) 18%, rgba(241, 248, 252, 0.64) 38%, rgba(241, 248, 252, 0.42) 56%, rgba(241, 248, 252, 0.20) 72%, rgba(241, 248, 252, 0.07) 88%, rgba(241, 248, 252, 0) 100%),
      url("/static/images/dropcodeshub-site-bg-loop.webp?v=desktop-loop-20260704-1") !important;
    background-repeat: no-repeat, no-repeat, repeat-y !important;
    background-size: 100% 100%, 100% 100%, calc(100vw + 114px) auto !important;
    background-position: 0 0, 0 0, 100% -22px !important;
    background-attachment: scroll, scroll, scroll !important;
  }

  html body.home-global-soft-wash::before,
  html body.home-global-soft-wash::after,
  html body.seo-answer-page::before,
  html body.seo-answer-page::after {
    content: none !important;
    display: none !important;
    background: none transparent !important;
  }

  html body.home-global-soft-wash .site-header,
  html body.seo-answer-page .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
  }

  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 720px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: #f5fbff !important;
    background-image:
      radial-gradient(ellipse at 20% 30%, rgba(244, 250, 253, 0.46) 0%, rgba(244, 250, 253, 0.34) 28%, rgba(236, 246, 252, 0.18) 52%, rgba(236, 246, 252, 0.04) 76%, rgba(236, 246, 252, 0) 100%),
      linear-gradient(90deg, rgba(241, 248, 252, 0.84) 0%, rgba(241, 248, 252, 0.80) 18%, rgba(241, 248, 252, 0.64) 38%, rgba(241, 248, 252, 0.42) 56%, rgba(241, 248, 252, 0.20) 72%, rgba(241, 248, 252, 0.07) 88%, rgba(241, 248, 252, 0) 100%),
      url("/static/images/dropcodeshub-site-bg-loop.webp?v=desktop-loop-20260704-1") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 100% 100%, 100% 100%, calc(100vw + 114px) auto !important;
    background-position: 0 0, 0 0, 100% -22px !important;
  }

  html body.home-global-soft-wash .site-header > *,
  html body.seo-answer-page .site-header > *,
  html body.home-global-soft-wash main,
  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page main,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* DESKTOP_FIXED_HEADER_AND_SECTION_LINE_CLEAN_20260704 */
@media (min-width: 981px) {
  html body.home-global-soft-wash .site-header,
  html body.seo-answer-page .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 72px !important;
    z-index: 5000 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
  }

  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 720px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: #f5fbff !important;
    background-image:
      radial-gradient(ellipse at 20% 30%, rgba(244, 250, 253, 0.46) 0%, rgba(244, 250, 253, 0.34) 28%, rgba(236, 246, 252, 0.18) 52%, rgba(236, 246, 252, 0.04) 76%, rgba(236, 246, 252, 0) 100%),
      linear-gradient(90deg, rgba(241, 248, 252, 0.84) 0%, rgba(241, 248, 252, 0.80) 18%, rgba(241, 248, 252, 0.64) 38%, rgba(241, 248, 252, 0.42) 56%, rgba(241, 248, 252, 0.20) 72%, rgba(241, 248, 252, 0.07) 88%, rgba(241, 248, 252, 0) 100%),
      url("/static/images/dropcodeshub-site-bg-loop.webp?v=desktop-loop-20260704-1") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 100% 100%, 100% 100%, calc(100vw + 114px) auto !important;
    background-position: 0 0, 0 0, 100% -22px !important;
  }

  html body.home-global-soft-wash .site-header > *,
  html body.seo-answer-page .site-header > * {
    position: relative !important;
    z-index: 2 !important;
  }

  html body.home-global-soft-wash main,
  html body.seo-answer-page main {
    margin-top: 144px !important;
  }

  html.explore-menu-open body.home-global-soft-wash .site-header,
  html.explore-menu-open body.seo-answer-page .site-header {
    overflow: visible !important;
  }

  html body.home-global-soft-wash .seo-platform-section,
  html body.seo-answer-page .seo-platform-section {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html body.home-global-soft-wash .seo-platform-section::after,
  html body.seo-answer-page .seo-platform-section::after {
    content: none !important;
    display: none !important;
  }
}

/* HOME_CARD_SECTION_LINE_CLEAN_ALL_VIEWPORTS_20260704 */
html body.home-global-soft-wash .home-platform-cards-section,
html body.home-global-soft-wash .section.home-platform-cards-section,
html body.home-global-soft-wash .section-soft.home-platform-cards-section {
  border-bottom: 0 !important;
  border-block-end: 0 !important;
  box-shadow: none !important;
}

html body.home-global-soft-wash .home-platform-cards-section::before,
html body.home-global-soft-wash .home-platform-cards-section::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none transparent !important;
}

/* MOBILE_LANDSCAPE_BG_BAKED_WASH_20260704 */
@media (max-width: 980px) and (orientation: landscape) {
  :root {
    --header-slice-bg-color: #dcebff;
    --header-slice-bg-image: url("/static/images/mobile-landscape-bg-loop-washed.webp?v=baked-landscape-20260704-1");
    --header-slice-bg-size: 100vw auto;
    --header-slice-bg-position: center 0;
    --header-slice-bg-repeat: no-repeat;
  }

  html,
  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-color: #dcebff !important;
    overflow-x: hidden !important;
  }

  html body.home-global-soft-wash,
  html body.seo-answer-page {
    background-image: url("/static/images/mobile-landscape-bg-loop-washed.webp?v=baked-landscape-20260704-1") !important;
    background-repeat: repeat-y !important;
    background-size: 100vw auto !important;
    background-position: center 0 !important;
    background-attachment: scroll !important;
  }

  html body.home-global-soft-wash::before,
  html body.home-global-soft-wash::after,
  html body.seo-answer-page::before,
  html body.seo-answer-page::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
  }

  html body.home-global-soft-wash .site-header::before,
  html body.seo-answer-page .site-header::before {
    background-image: url("/static/images/mobile-landscape-bg-loop-washed.webp?v=baked-landscape-20260704-1") !important;
    background-size: 100vw auto !important;
    background-position: center 0 !important;
    background-repeat: no-repeat !important;
  }

  html body.home-global-soft-wash .site-header::after,
  html body.seo-answer-page .site-header::after {
    content: none !important;
    display: none !important;
    background: none transparent !important;
  }

  html body.home-global-soft-wash main,
  html body.home-global-soft-wash .site-footer,
  html body.seo-answer-page main,
  html body.seo-answer-page .site-footer {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* MOBILE_LANDSCAPE_SECTION_CARD_LINE_CLEAN_20260704 */
@media (max-width: 980px) and (orientation: landscape) {
  html body.home-global-soft-wash .seo-platform-section,
  html body.seo-answer-page .seo-platform-section,
  html body.home-global-soft-wash .home-platform-cards-section,
  html body.seo-answer-page .home-platform-cards-section {
    border-bottom: 0 !important;
    border-block-end: 0 !important;
    box-shadow: none !important;
  }

  html body.home-global-soft-wash .seo-platform-section::before,
  html body.home-global-soft-wash .seo-platform-section::after,
  html body.seo-answer-page .seo-platform-section::before,
  html body.seo-answer-page .seo-platform-section::after,
  html body.home-global-soft-wash .home-platform-cards-section::before,
  html body.home-global-soft-wash .home-platform-cards-section::after,
  html body.seo-answer-page .home-platform-cards-section::before,
  html body.seo-answer-page .home-platform-cards-section::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none transparent !important;
  }
}

/* MOBILE_LANDSCAPE_FINAL_CTA_SHADOW_CLEAN_20260704 */
@media (max-width: 980px) and (orientation: landscape) {
  html body.home-global-soft-wash .seo-final-cta-section,
  html body.seo-answer-page .seo-final-cta-section,
  html body.home-global-soft-wash .seo-final-cta,
  html body.seo-answer-page .seo-final-cta,
  html body.home-global-soft-wash .seo-final-cta::before,
  html body.home-global-soft-wash .seo-final-cta::after,
  html body.seo-answer-page .seo-final-cta::before,
  html body.seo-answer-page .seo-final-cta::after {
    transition: none !important;
    animation: none !important;
  }

  html body.home-global-soft-wash .seo-final-cta,
  html body.seo-answer-page .seo-final-cta {
    box-shadow: none !important;
    filter: none !important;
    border-bottom-color: transparent !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    contain: paint !important;
    isolation: isolate !important;
  }

  html body.home-global-soft-wash .seo-final-cta::after,
  html body.seo-answer-page .seo-final-cta::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none transparent !important;
    box-shadow: none !important;
  }
}

/* HEADER_FOOTER_PLANE_SYNC_20260704: header plane uses the same calm scale-only motion as footer */
.site-header .mobile-header-hub-button .telegram-button-icon,
.site-header a.mobile-header-hub-button .telegram-button-icon {
    animation-name: footerPlaneScaleOnly20260702 !important;
    animation-duration: 1.65s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    transform: none !important;
    transform-origin: center center !important;
    will-change: scale, opacity !important;
}

.site-header .mobile-header-hub-button .telegram-button-icon svg,
.site-header a.mobile-header-hub-button .telegram-button-icon svg {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .site-header .mobile-header-hub-button .telegram-button-icon,
    .site-header a.mobile-header-hub-button .telegram-button-icon {
        animation: none !important;
        scale: 1 !important;
        opacity: 1 !important;
    }
}

/* HEADER_FOOTER_PLANE_SYNC_SECTIONS_20260704: keep section-page header plane synced with footer */
body.seo-answer-page .site-header .mobile-header-hub-button .telegram-button-icon,
body.seo-answer-page .site-header a.mobile-header-hub-button .telegram-button-icon,
body.seo-explore-hub-page .site-header .mobile-header-hub-button .telegram-button-icon,
body.seo-explore-hub-page .site-header a.mobile-header-hub-button .telegram-button-icon {
    animation-name: footerPlaneScaleOnly20260702 !important;
    animation-duration: 1.65s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    transform: none !important;
    transform-origin: center center !important;
    will-change: scale, opacity !important;
}

body.seo-answer-page .site-header .mobile-header-hub-button .telegram-button-icon svg,
body.seo-answer-page .site-header a.mobile-header-hub-button .telegram-button-icon svg,
body.seo-explore-hub-page .site-header .mobile-header-hub-button .telegram-button-icon svg,
body.seo-explore-hub-page .site-header a.mobile-header-hub-button .telegram-button-icon svg {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.seo-answer-page .site-header .mobile-header-hub-button .telegram-button-icon,
    body.seo-answer-page .site-header a.mobile-header-hub-button .telegram-button-icon,
    body.seo-explore-hub-page .site-header .mobile-header-hub-button .telegram-button-icon,
    body.seo-explore-hub-page .site-header a.mobile-header-hub-button .telegram-button-icon {
        animation: none !important;
        scale: 1 !important;
        opacity: 1 !important;
    }
}

/* COMPACT_FOOTER_NO_LINKS_20260704: footer without Codes / Guides / Answers links */
html body .site-footer .footer-links {
    display: none !important;
}

html body .site-footer {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
}

html body .site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: 20px 56px !important;
}

html body .site-footer .footer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

html body .site-footer .footer-brand p {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    line-height: 1.38 !important;
}

html body .site-footer .footer-meta {
    justify-self: end !important;
    text-align: right !important;
    display: grid !important;
    gap: 5px !important;
    line-height: 1.25 !important;
}

@media (max-width: 980px) and (orientation: landscape) {
    html body .site-footer {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    html body .site-footer .footer-grid {
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        gap: 14px 26px !important;
    }

    html body .site-footer .footer-meta {
        justify-self: end !important;
        text-align: right !important;
        gap: 4px !important;
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    html body .site-footer {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    html body .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .site-footer .footer-brand {
        gap: 12px !important;
    }

    html body .site-footer .footer-brand img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    html body .site-footer .footer-brand-title-link {
        line-height: 1 !important;
    }

    html body .site-footer .footer-brand p {
        margin-top: 4px !important;
        line-height: 1.34 !important;
    }

    html body .site-footer .footer-meta {
        justify-self: start !important;
        text-align: left !important;
        gap: 4px !important;
        line-height: 1.22 !important;
    }
}

/* SECTION_FOOTER_MATCH_HOME_20260704: make section footers match compact home footer */
html body.seo-answer-page .site-footer,
html body.seo-explore-hub-page .site-footer {
    padding-top: 20px !important;
    padding-bottom: 16px !important;
}

html body.seo-answer-page .site-footer .footer-inner,
html body.seo-explore-hub-page .site-footer .footer-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: 20px 56px !important;
    width: min(1180px, calc(100vw - 80px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.seo-answer-page .site-footer .footer-inner > div:first-child,
html body.seo-explore-hub-page .site-footer .footer-inner > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
    height: auto !important;
    min-height: 0 !important;
}

html body.seo-answer-page .site-footer .footer-brand-title-link,
html body.seo-explore-hub-page .site-footer .footer-brand-title-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    line-height: 1 !important;
}

html body.seo-answer-page .site-footer .footer-brand-title-link img,
html body.seo-explore-hub-page .site-footer .footer-brand-title-link img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
}

html body.seo-answer-page .site-footer .footer-inner > div:first-child > p,
html body.seo-explore-hub-page .site-footer .footer-inner > div:first-child > p {
    margin: 0 !important;
    line-height: 1.38 !important;
}

html body.seo-answer-page .site-footer .footer-meta,
html body.seo-explore-hub-page .site-footer .footer-meta {
    justify-self: end !important;
    text-align: right !important;
    display: grid !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.25 !important;
}

html body.seo-answer-page .site-footer .footer-meta p,
html body.seo-answer-page .site-footer .footer-meta span,
html body.seo-explore-hub-page .site-footer .footer-meta p,
html body.seo-explore-hub-page .site-footer .footer-meta span {
    margin: 0 !important;
    line-height: 1.25 !important;
}

@media (max-width: 980px) and (orientation: landscape) {
    html body.seo-answer-page .site-footer,
    html body.seo-explore-hub-page .site-footer {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    html body.seo-answer-page .site-footer .footer-inner,
    html body.seo-explore-hub-page .site-footer .footer-inner {
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        gap: 14px 26px !important;
        width: min(100% - 24px, 760px) !important;
    }

    html body.seo-answer-page .site-footer .footer-meta,
    html body.seo-explore-hub-page .site-footer .footer-meta {
        justify-self: end !important;
        text-align: right !important;
        gap: 4px !important;
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    html body.seo-answer-page .site-footer,
    html body.seo-explore-hub-page .site-footer {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    html body.seo-answer-page .site-footer .footer-inner,
    html body.seo-explore-hub-page .site-footer .footer-inner {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: min(100% - 24px, 360px) !important;
    }

    html body.seo-answer-page .site-footer .footer-brand-title-link img,
    html body.seo-explore-hub-page .site-footer .footer-brand-title-link img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    html body.seo-answer-page .site-footer .footer-meta,
    html body.seo-explore-hub-page .site-footer .footer-meta {
        justify-self: start !important;
        text-align: left !important;
        gap: 4px !important;
    }
}

/* PORTRAIT_FOOTER_LOGO_CIRCLE_FIX_20260704: keep footer logo perfectly round on mobile portrait */
@media (max-width: 980px) and (orientation: portrait) {
    html body .site-footer .footer-brand > img,
    html body .site-footer .footer-brand-title-link > img {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 50% !important;
        display: block !important;
        flex: 0 0 44px !important;
        overflow: hidden !important;
    }
}


/* EN_DESKTOP_HEADER_GAP_TUNE_20260705
   English labels are wider than ES-MX, so tighten inner nav spacing and keep
   a slightly stronger visual gap between the hub button, nav group and language switcher.
*/
@media (min-width: 981px) {
    html[lang="en"] body.home-global-soft-wash .site-header .container.header-inner,
    html[lang="en"] body.home-global-soft-wash .site-header .header-inner,
    html[lang="en"] body.seo-answer-page .site-header .container.header-inner,
    html[lang="en"] body.seo-answer-page .site-header .header-inner {
        column-gap: 46px !important;
    }

    html[lang="en"] body.home-global-soft-wash .site-header .main-nav,
    html[lang="en"] body.seo-answer-page .site-header .main-nav {
        gap: 8px !important;
    }
}
/* EN_DESKTOP_HEADER_GAP_TUNE_20260705_END */

/* HEADER_MOBILE_PORTRAIT_HUB_NUDGE_20260705
   Move Open Drop Hub 2px higher only on portrait mobile.
   Desktop and mobile landscape are not touched.
*/
@media (max-width: 980px) and (orientation: portrait) {
    html body .site-header .mobile-header-hub-button,
    html body .site-header a.mobile-header-hub-button {
        align-self: center !important;
        transform: translateY(-2px) !important;
    }

    html body .site-header .language-switcher {
        align-self: center !important;
        transform: none !important;
    }
}
/* HEADER_MOBILE_PORTRAIT_HUB_NUDGE_20260705_END */

/* HEADER_LANGUAGE_SWITCHER_BORDER_SYNC_20260705
   Give the language switcher wrapper the same soft outline as Open Drop Hub.
   Keeps inner active language pill unchanged.
*/
.site-header .language-switcher {
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.10) !important;
    box-sizing: border-box !important;
}
/* HEADER_LANGUAGE_SWITCHER_BORDER_SYNC_20260705_END */

/* HEADER_LANGUAGE_ACTIVE_PILL_SHADOW_CLEAN_20260705
   The language switcher already has the shared outer border/shadow.
   Remove the inner active EN/ES pill shadow so the wrapper reads like Open Drop Hub.
*/
.site-header .language-switcher a.active {
    box-shadow: none !important;
}
/* HEADER_LANGUAGE_ACTIVE_PILL_SHADOW_CLEAN_20260705_END */

/* HEADER_LANGUAGE_SWITCHER_RIGHT_EDGE_20260705
   Match button mechanics: sharper right outline, softer/blurred left side.
*/
.site-header .language-switcher {
    position: relative !important;
    border: 1px solid rgba(117, 176, 238, 0.32) !important;
    border-left-color: rgba(117, 176, 238, 0.14) !important;
    border-right-color: rgba(117, 176, 238, 0.68) !important;
    box-shadow:
        -8px 0 18px rgba(31, 124, 255, 0.10),
        0 8px 18px rgba(31, 124, 255, 0.06) !important;
    box-sizing: border-box !important;
}

.site-header .language-switcher::after {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;
    right: -1px !important;
    bottom: 5px !important;
    width: 1px !important;
    border-radius: 999px !important;
    background: rgba(117, 176, 238, 0.72) !important;
    pointer-events: none !important;
}

.site-header .language-switcher a.active {
    box-shadow: none !important;
}
/* HEADER_LANGUAGE_SWITCHER_RIGHT_EDGE_20260705_END */

/* HEADER_LANGUAGE_SWITCHER_COPY_OPENHUB_STYLE_20260705
   Final correction: use the same outer visual layer as Open Drop Hub.
   Removes the failed artificial right-edge stripe.
*/
.site-header .language-switcher {
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    border-left-color: rgba(117, 176, 238, 0.42) !important;
    border-right-color: rgba(117, 176, 238, 0.42) !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.10) !important;
    box-sizing: border-box !important;
}

.site-header .language-switcher::before,
.site-header .language-switcher::after {
    content: none !important;
    display: none !important;
    background: none transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.site-header .language-switcher a.active {
    background: #ffffff !important;
    box-shadow: none !important;
}
/* HEADER_LANGUAGE_SWITCHER_COPY_OPENHUB_STYLE_20260705_END */

/* HEADER_LANGUAGE_ACTIVE_PILL_REMOVE_20260705
   Remove the inner white active EN/ES pill.
   The language switcher now uses only the shared outer Open Drop Hub-style shell.
*/
.site-header .language-switcher a,
.site-header .language-switcher a.active {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.site-header .language-switcher a.active {
    color: #0b65e8 !important;
    font-weight: 900 !important;
}

.site-header .language-switcher a:not(.active) {
    color: rgba(6, 34, 86, 0.58) !important;
    font-weight: 800 !important;
}
/* HEADER_LANGUAGE_ACTIVE_PILL_REMOVE_20260705_END */

/* HEADER_LANGUAGE_DROPDOWN_20260705
   Replace segmented EN|ES-MX switcher with compact dropdown-ready language selector.
   This scales cleanly for RU and future languages.
*/
.site-header details.language-switcher,
.site-header details.language-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: max-content !important;
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.10) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 20 !important;
}

.site-header details.language-switcher::before,
.site-header details.language-switcher::after,
.site-header details.language-dropdown::before,
.site-header details.language-dropdown::after {
    content: none !important;
    display: none !important;
}

.site-header .language-dropdown-trigger {
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 100% !important;
    padding: 0 12px !important;
    color: #1f7cff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

.site-header .language-dropdown-trigger::-webkit-details-marker {
    display: none !important;
}

.site-header .language-caret {
    font-size: 10px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
    opacity: 0.78 !important;
}

.site-header .language-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 112px !important;
    padding: 6px !important;
    display: grid !important;
    gap: 4px !important;
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 26px rgba(31, 124, 255, 0.14) !important;
    box-sizing: border-box !important;
    z-index: 6000 !important;
}

.site-header .language-dropdown-menu a,
.site-header .language-dropdown-menu a.active,
.site-header .language-switcher .language-dropdown-menu a,
.site-header .language-switcher .language-dropdown-menu a.active {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 32px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: rgba(6, 34, 86, 0.68) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.site-header .language-dropdown-menu a.active,
.site-header .language-switcher .language-dropdown-menu a.active {
    color: #0b65e8 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    font-weight: 900 !important;
}

.site-header:has(details.language-switcher[open]),
.site-header:has(details.language-dropdown[open]),
.site-header .header-inner:has(details.language-switcher[open]),
.site-header .header-inner:has(details.language-dropdown[open]) {
    overflow: visible !important;
}

@media (min-width: 981px) {
    .site-header details.language-switcher,
    .site-header details.language-dropdown {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }

    .site-header .language-dropdown-trigger {
        padding: 0 14px !important;
        font-size: 13px !important;
    }
}
/* HEADER_LANGUAGE_DROPDOWN_20260705_END */

/* HEADER_LANGUAGE_DROPDOWN_VISUAL_FIX_20260705
   Fixes:
   1) bigger visible caret
   2) clearer real shell outline like Open Drop Hub
   3) dropdown menu no longer clipped by header overflow
*/
.site-header details.language-switcher,
.site-header details.language-dropdown {
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.52) !important;
    outline: 1px solid rgba(255, 255, 255, 0.38) !important;
    outline-offset: -2px !important;
    box-shadow:
        inset 0 0 0 1px rgba(117, 176, 238, 0.18),
        0 8px 18px rgba(31, 124, 255, 0.10) !important;
    overflow: visible !important;
}

.site-header .language-dropdown-trigger {
    gap: 8px !important;
    padding-right: 13px !important;
}

.site-header .language-caret {
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    opacity: 0.92 !important;
    transform: translateY(-1px) !important;
}

/* fixed menu avoids clipping from sticky/fixed header overflow rules */
.site-header details.language-dropdown[open] .language-dropdown-menu,
.site-header details.language-switcher[open] .language-dropdown-menu {
    position: fixed !important;
    top: 62px !important;
    right: 16px !important;
    display: grid !important;
    min-width: 128px !important;
    padding: 7px !important;
    z-index: 99999 !important;
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.52) !important;
    outline: 1px solid rgba(255, 255, 255, 0.38) !important;
    outline-offset: -2px !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 0 0 1px rgba(117, 176, 238, 0.14),
        0 16px 34px rgba(31, 124, 255, 0.18) !important;
    overflow: visible !important;
}

.site-header details.language-dropdown[open],
.site-header details.language-switcher[open],
.site-header details.language-dropdown[open] summary,
.site-header details.language-switcher[open] summary {
    overflow: visible !important;
}

.site-header .language-dropdown-menu a,
.site-header .language-dropdown-menu a.active {
    height: 34px !important;
    min-height: 34px !important;
}

@media (min-width: 981px) {
    .site-header details.language-dropdown[open] .language-dropdown-menu,
    .site-header details.language-switcher[open] .language-dropdown-menu {
        top: 72px !important;
        right: max(20px, calc((100vw - 1180px) / 2)) !important;
    }

    .site-header .language-caret {
        font-size: 16px !important;
    }
}
/* HEADER_LANGUAGE_DROPDOWN_VISUAL_FIX_20260705_END */

/* HEADER_LANGUAGE_DROPDOWN_ANCHOR_FIX_20260705
   Corrects previous fixed dropdown:
   - menu is anchored directly under the language button
   - no page-wide fixed overlay behavior
   - header overflow opens only while dropdown is open
*/
.site-header details.language-switcher,
.site-header details.language-dropdown {
    position: relative !important;
    overflow: visible !important;
}

/* Open the menu directly under the language selector, aligned to its right edge */
.site-header details.language-dropdown[open] .language-dropdown-menu,
.site-header details.language-switcher[open] .language-dropdown-menu,
.site-header .language-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 100% !important;
    width: max-content !important;
    padding: 7px !important;
    display: grid !important;
    gap: 4px !important;
    z-index: 99999 !important;
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.52) !important;
    outline: 1px solid rgba(255, 255, 255, 0.38) !important;
    outline-offset: -2px !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 0 0 1px rgba(117, 176, 238, 0.14),
        0 16px 34px rgba(31, 124, 255, 0.18) !important;
    overflow: visible !important;
}

/* Allow the absolute dropdown to escape the header only when it is actually open */
html:has(.site-header details.language-dropdown[open]) .site-header,
html:has(.site-header details.language-switcher[open]) .site-header,
html:has(.site-header details.language-dropdown[open]) .site-header .header-inner,
html:has(.site-header details.language-switcher[open]) .site-header .header-inner,
html:has(.site-header details.language-dropdown[open]) .site-header .container.header-inner,
html:has(.site-header details.language-switcher[open]) .site-header .container.header-inner {
    overflow: visible !important;
}

/* Keep the arrow readable */
.site-header .language-caret {
    font-size: 16px !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
}

/* Keep dropdown items compact */
.site-header .language-dropdown-menu a,
.site-header .language-dropdown-menu a.active {
    min-width: 86px !important;
    height: 34px !important;
    min-height: 34px !important;
}

/* HEADER_LANGUAGE_DROPDOWN_ANCHOR_FIX_20260705_END */

/* HEADER_LANGUAGE_DROPDOWN_HEADER_BG_CLAMP_20260705
   Fix page disappearing when language dropdown opens.
   The dropdown needs header overflow visible, but header background pseudo-layers must not expand over the page.
*/
html:has(.site-header details.language-dropdown[open]) .site-header::before,
html:has(.site-header details.language-switcher[open]) .site-header::before,
html:has(.site-header details.language-dropdown[open]) .site-header::after,
html:has(.site-header details.language-switcher[open]) .site-header::after {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Keep page content above any accidental header wash while dropdown is open */
html:has(.site-header details.language-dropdown[open]) main,
html:has(.site-header details.language-switcher[open]) main,
html:has(.site-header details.language-dropdown[open]) .page-shell,
html:has(.site-header details.language-switcher[open]) .page-shell,
html:has(.site-header details.language-dropdown[open]) .home-main,
html:has(.site-header details.language-switcher[open]) .home-main {
    position: relative !important;
    z-index: 1 !important;
}

/* Keep the opened dropdown itself above the page content */
.site-header details.language-dropdown[open],
.site-header details.language-switcher[open],
.site-header details.language-dropdown[open] .language-dropdown-menu,
.site-header details.language-switcher[open] .language-dropdown-menu {
    z-index: 99999 !important;
}
/* HEADER_LANGUAGE_DROPDOWN_HEADER_BG_CLAMP_20260705_END */

/* HEADER_EXPLORE_PANEL_ONLY_UNIFIED_STYLE_20260705
   Correct version:
   - do NOT style Explore trigger
   - do NOT change Explore visibility in nav
   - style only the opened Explore panel
   - keep panel animation and unified frame style
*/

/* Opened Explore layer: same placement mechanics as before, only smoother motion */
.explore-menu {
    background: transparent !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition:
        opacity 180ms ease,
        transform 180ms ease !important;
    pointer-events: none !important;
}

.explore-menu.open,
html.explore-menu-open .explore-menu {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    animation: exploreMenuSlideDownPanelOnly20260705 190ms ease-out both !important;
}

@keyframes exploreMenuSlideDownPanelOnly20260705 {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Only the dropdown panel frame gets the unified visual style */
.explore-menu-inner {
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.52) !important;
    outline: 1px solid rgba(255, 255, 255, 0.38) !important;
    outline-offset: -2px !important;
    border-radius: 22px !important;
    box-shadow:
        inset 0 0 0 1px rgba(117, 176, 238, 0.14),
        0 18px 40px rgba(31, 124, 255, 0.16) !important;
}

/* Header inside Explore panel */
.explore-menu-head {
    align-items: center !important;
}

.explore-menu-head strong {
    color: #073f92 !important;
    font-weight: 900 !important;
}

.explore-close {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(117, 176, 238, 0.36) !important;
    color: #1f7cff !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* Cards inside the Explore panel */
.explore-section-card {
    background: rgba(255, 255, 255, 0.70) !important;
    border: 1px solid rgba(117, 176, 238, 0.32) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(31, 124, 255, 0.08) !important;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease !important;
}

.explore-section-card:hover,
.explore-section-card.active {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(117, 176, 238, 0.58) !important;
    box-shadow: 0 14px 30px rgba(31, 124, 255, 0.14) !important;
}

/* Prevent old header background layers from covering page while Explore is open */
html.explore-menu-open .site-header {
    overflow: hidden !important;
}

html.explore-menu-open .site-header::before,
html.explore-menu-open .site-header::after {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Mobile panel radius only; still no trigger styling */
@media (max-width: 980px) {
    .explore-menu-inner {
        border-radius: 20px !important;
    }

    .explore-section-card {
        border-radius: 15px !important;
    }
}
/* HEADER_EXPLORE_PANEL_ONLY_UNIFIED_STYLE_20260705_END */

/* HEADER_LANGUAGE_BORDER_COMPACT_OPENHUB_COPY_20260705
   Language selector visual fix:
   - more compact after caret
   - stronger readable shell border
   - Open Drop Hub-like soft outer/inset edge
   - no artificial right-side stripe
*/
.site-header details.language-switcher,
.site-header details.language-dropdown {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    background: #e3f1ff !important;
    border: 1px solid rgba(82, 151, 229, 0.62) !important;
    outline: 1px solid rgba(255, 255, 255, 0.52) !important;
    outline-offset: -2px !important;
    border-radius: 999px !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(82, 151, 229, 0.18),
        0 8px 18px rgba(31, 124, 255, 0.12) !important;

    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Remove old pseudo-border experiments completely */
.site-header details.language-switcher::before,
.site-header details.language-switcher::after,
.site-header details.language-dropdown::before,
.site-header details.language-dropdown::after,
.site-header .language-switcher::before,
.site-header .language-switcher::after {
    content: none !important;
    display: none !important;
    background: none transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Compact trigger: less empty space after the arrow */
.site-header .language-dropdown-trigger {
    height: 100% !important;
    padding: 0 8px 0 11px !important;
    gap: 5px !important;
    color: #1f7cff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

.site-header .language-current {
    display: inline-block !important;
    line-height: 1 !important;
}

.site-header .language-caret {
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    opacity: 0.96 !important;
    transform: translateY(-1px) !important;
    margin-right: -1px !important;
}

/* Open state: keep the shell visually consistent */
.site-header details.language-dropdown[open],
.site-header details.language-switcher[open] {
    border-color: rgba(82, 151, 229, 0.70) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(82, 151, 229, 0.20),
        0 10px 22px rgba(31, 124, 255, 0.15) !important;
}

/* Menu frame uses the same border language */
.site-header details.language-dropdown[open] .language-dropdown-menu,
.site-header details.language-switcher[open] .language-dropdown-menu,
.site-header .language-dropdown-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 100% !important;
    width: max-content !important;

    background: #e3f1ff !important;
    border: 1px solid rgba(82, 151, 229, 0.62) !important;
    outline: 1px solid rgba(255, 255, 255, 0.52) !important;
    outline-offset: -2px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 16px 34px rgba(31, 124, 255, 0.18) !important;
}

/* Desktop: still compact, not stretched */
@media (min-width: 981px) {
    .site-header details.language-switcher,
    .site-header details.language-dropdown {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    .site-header .language-dropdown-trigger {
        padding: 0 9px 0 12px !important;
        gap: 5px !important;
        font-size: 13px !important;
    }

    .site-header .language-caret {
        font-size: 15px !important;
        margin-right: -1px !important;
    }
}
/* HEADER_LANGUAGE_BORDER_COMPACT_OPENHUB_COPY_20260705_END */

/* HEADER_LANGUAGE_OPENHUB_REAL_COPY_NO_WHITE_OUTLINE_20260705
   Remove the artificial white outline/inset from language selector.
   Use the same simple visual system as Open Drop Hub:
   - light blue fill
   - blue border
   - soft blue shadow
   - no white outline
   - no inset white ring
*/
.site-header details.language-switcher,
.site-header details.language-dropdown {
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.10) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Remove all pseudo / artificial edge experiments */
.site-header details.language-switcher::before,
.site-header details.language-switcher::after,
.site-header details.language-dropdown::before,
.site-header details.language-dropdown::after,
.site-header .language-switcher::before,
.site-header .language-switcher::after,
.site-header .language-dropdown::before,
.site-header .language-dropdown::after {
    content: none !important;
    display: none !important;
    background: none transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Keep it compact on the right side after the arrow */
.site-header .language-dropdown-trigger {
    padding: 0 8px 0 11px !important;
    gap: 5px !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.site-header .language-caret {
    font-size: 14px !important;
    margin-right: -1px !important;
    opacity: 0.92 !important;
    transform: translateY(-1px) !important;
}

/* Open state: same style, only a slightly stronger blue shadow */
.site-header details.language-dropdown[open],
.site-header details.language-switcher[open] {
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    outline: 0 !important;
    box-shadow: 0 10px 22px rgba(31, 124, 255, 0.13) !important;
}

/* Dropdown menu: no white outline either */
.site-header details.language-dropdown[open] .language-dropdown-menu,
.site-header details.language-switcher[open] .language-dropdown-menu,
.site-header .language-dropdown-menu {
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: 0 16px 34px rgba(31, 124, 255, 0.16) !important;
}

/* Desktop stays compact */
@media (min-width: 981px) {
    .site-header .language-dropdown-trigger {
        padding: 0 9px 0 12px !important;
        gap: 5px !important;
    }

    .site-header .language-caret {
        font-size: 15px !important;
        margin-right: -1px !important;
    }
}
/* HEADER_LANGUAGE_OPENHUB_REAL_COPY_NO_WHITE_OUTLINE_20260705_END */

/* HEADER_LANGUAGE_SHELL_STABLE_NO_SHIFT_20260705
   Final stabilizer for the visible language button only.
   Goal:
   - same shell in closed and open state
   - no horizontal movement on click
   - no disappearing outer shell on open
   - do NOT touch dropdown menu/panel/items
*/
html body .site-header details.language-switcher,
html body .site-header details.language-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: max-content !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

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

    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.52) !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.12) !important;

    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
}

/* Same inner trigger in closed and open states, so click does not change width/position */
html body .site-header details.language-switcher > summary.language-dropdown-trigger,
html body .site-header details.language-dropdown > summary.language-dropdown-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    padding: 0 8px 0 12px !important;
    gap: 5px !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 999px !important;

    box-sizing: border-box !important;
    cursor: pointer !important;
}

/* Same arrow spacing in closed and open states */
html body .site-header details.language-switcher .language-caret,
html body .site-header details.language-dropdown .language-caret {
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    opacity: 0.92 !important;
    margin-right: -2px !important;
    transform: translateY(-1px) !important;
}

/* Remove only artificial pseudo edges on the visible shell, not the dropdown menu */
html body .site-header details.language-switcher::before,
html body .site-header details.language-switcher::after,
html body .site-header details.language-dropdown::before,
html body .site-header details.language-dropdown::after {
    content: none !important;
    display: none !important;
    background: none transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Mobile keeps the same mechanics, just slightly lower height */
@media (max-width: 980px) {
    html body .site-header details.language-switcher,
    html body .site-header details.language-dropdown {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .site-header details.language-switcher > summary.language-dropdown-trigger,
    html body .site-header details.language-dropdown > summary.language-dropdown-trigger {
        padding: 0 7px 0 11px !important;
        gap: 5px !important;
    }

    html body .site-header details.language-switcher .language-caret,
    html body .site-header details.language-dropdown .language-caret {
        font-size: 14px !important;
        margin-right: -2px !important;
    }
}
/* HEADER_LANGUAGE_SHELL_STABLE_NO_SHIFT_20260705_END */

/* HEADER_LANGUAGE_OPEN_HEADER_PSEUDO_ONLY_FIX_20260705
   Fix line/gray wash that appears when the language dropdown is open.
   IMPORTANT:
   - does NOT touch .language-dropdown-menu
   - does NOT touch summary
   - does NOT touch details positioning
   - only suppresses header pseudo background layers while language dropdown is open
*/
html:has(.site-header details.language-dropdown[open]) .site-header::after,
html:has(.site-header details.language-switcher[open]) .site-header::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

html:has(.site-header details.language-dropdown[open]) .site-header::before,
html:has(.site-header details.language-switcher[open]) .site-header::before {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* HEADER_LANGUAGE_OPEN_HEADER_PSEUDO_ONLY_FIX_20260705_END */

/* HEADER_LANGUAGE_SWITCHER_V2_20260705
   Clean isolated language switcher.
   Replaces details[open] mechanics with button + fixed menu.
   Important: uses new classes only, so old details[open]/:has(details...) rules do not fire.
*/
html body .site-header .language-switcher-v2 {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: max-content !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
}

html body .site-header .language-switcher-v2-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;

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

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

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

    color: #1f7cff !important;
    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    outline: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.10) !important;

    font: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
    transform: none !important;
}

html body .site-header .language-switcher-v2-trigger[aria-expanded="true"] {
    background: #e3f1ff !important;
    border-color: rgba(117, 176, 238, 0.42) !important;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.10) !important;
}

html body .site-header .language-switcher-v2-current {
    display: inline-block !important;
    line-height: 1 !important;
}

html body .site-header .language-switcher-v2-caret {
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    opacity: 0.92 !important;
    margin-right: -2px !important;
    transform: translateY(-1px) !important;
}

html body .language-switcher-v2-menu {
    position: fixed !important;
    display: grid !important;
    gap: 4px !important;

    min-width: 112px !important;
    width: max-content !important;
    padding: 7px !important;

    background: #e3f1ff !important;
    border: 1px solid rgba(117, 176, 238, 0.42) !important;
    outline: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 24px rgba(31, 124, 255, 0.12) !important;

    box-sizing: border-box !important;
    z-index: 999999 !important;
}

html body .language-switcher-v2-menu[hidden] {
    display: none !important;
}

html body .language-switcher-v2-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-width: 86px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;

    color: rgba(6, 34, 86, 0.68) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

html body .language-switcher-v2-menu a.active {
    color: #0b65e8 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    font-weight: 900 !important;
}

@media (max-width: 980px) {
    html body .site-header .language-switcher-v2 {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .site-header .language-switcher-v2-trigger {
        padding: 0 7px 0 11px !important;
        font-size: 12px !important;
    }

    html body .site-header .language-switcher-v2-caret {
        font-size: 14px !important;
    }
}
/* HEADER_LANGUAGE_SWITCHER_V2_20260705_END */

/* HEADER_LANGUAGE_V2_MOBILE_WIDTH_TUNE_20260705
   Slightly widen the visible language button on mobile portrait
   so EN + caret does not look too oval.
   Does not touch menu position, JS, or dropdown mechanics.
*/
@media (max-width: 980px) and (orientation: portrait) {
    html body .site-header .language-switcher-v2-trigger {
        min-width: 64px !important;
        padding: 0 10px 0 13px !important;
        gap: 6px !important;
    }

    html body .site-header .language-switcher-v2-caret {
        margin-right: -1px !important;
    }
}
/* HEADER_LANGUAGE_V2_MOBILE_WIDTH_TUNE_20260705_END */

/* HEADER_LANGUAGE_V2_MOBILE_FONT_LANDSCAPE_LAYOUT_FIX_20260705
   Fixes after language switcher v2:
   1) Mobile EN/ES-MX text was smaller than Open Drop Hub.
   2) Mobile landscape language button looked too oval.
   3) Mobile landscape Home / Explore could disappear because the header row was squeezed.
   Does NOT touch:
   - language dropdown JS
   - dropdown menu mechanics
   - desktop dropdown positioning
*/

/* Keep language text size consistent on desktop/tablet */
html body .site-header .language-switcher-v2-trigger {
    font-size: 13px !important;
    font-weight: 900 !important;
}

/* All mobile widths: do not shrink language text to 12px */
@media (max-width: 980px) {
    html body .site-header .language-switcher-v2 {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .site-header .language-switcher-v2-trigger {
        min-width: 66px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 10px 0 13px !important;
        gap: 6px !important;

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

    html body .site-header .language-switcher-v2-current {
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    html body .site-header .language-switcher-v2-caret {
        font-size: 14px !important;
        margin-right: -1px !important;
        transform: translateY(-1px) !important;
    }
}

/* Mobile landscape:
   Keep the header as one usable row:
   Open Drop Hub left, Home / Explore center, language right.
*/
@media (max-width: 980px) and (orientation: landscape) {
    html body .site-header {
        height: auto !important;
        min-height: 64px !important;
        overflow: visible !important;
    }

    html body .site-header .container.header-inner {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "hub nav lang" !important;
        align-items: center !important;
        column-gap: 10px !important;

        height: auto !important;
        min-height: 64px !important;
        overflow: visible !important;
    }

    html body .site-header .mobile-header-hub-button {
        grid-area: hub !important;
        justify-self: start !important;
        align-self: center !important;
        min-width: max-content !important;
    }

    html body .site-header .language-switcher-v2 {
        grid-area: lang !important;
        justify-self: end !important;
        align-self: center !important;

        width: max-content !important;
        min-width: 66px !important;
        max-width: max-content !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body .site-header nav,
    html body .site-header .main-nav,
    html body .site-header .header-nav,
    html body .site-header .mobile-nav,
    html body .site-header .nav-links {
        grid-area: nav !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

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

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        overflow: visible !important;
        pointer-events: auto !important;
    }

    html body .site-header nav a,
    html body .site-header nav button,
    html body .site-header .main-nav a,
    html body .site-header .main-nav button,
    html body .site-header .header-nav a,
    html body .site-header .header-nav button,
    html body .site-header .mobile-nav a,
    html body .site-header .mobile-nav button,
    html body .site-header .nav-links a,
    html body .site-header .nav-links button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }
}
/* HEADER_LANGUAGE_V2_MOBILE_FONT_LANDSCAPE_LAYOUT_FIX_20260705_END */

/* HEADER_LANGUAGE_V2_BUTTON_PROPORTION_TUNE_20260705
   Fine tune visible language button only.
   Does NOT touch:
   - dropdown menu
   - JS
   - menu position
   - mobile nav layout
*/

/* Desktop: match Open Drop Hub button height more closely */
@media (min-width: 981px) {
    html body .site-header .language-switcher-v2 {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }

    html body .site-header .language-switcher-v2-trigger {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        padding: 0 9px 0 13px !important;
        gap: 6px !important;

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

    html body .site-header .language-switcher-v2-caret {
        font-size: 17px !important;
        margin-right: -2px !important;
        transform: translateY(-1px) !important;
    }
}

/* Mobile portrait + landscape:
   keep correct height, but make the button a little narrower.
   The right side after the arrow should feel like Open Drop Hub after the B. */
@media (max-width: 980px) {
    html body .site-header .language-switcher-v2 {
        width: max-content !important;
        min-width: max-content !important;
        max-width: max-content !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .site-header .language-switcher-v2-trigger {
        min-width: 60px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 7px 0 12px !important;
        gap: 5px !important;

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

    html body .site-header .language-switcher-v2-current {
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    html body .site-header .language-switcher-v2-caret {
        font-size: 16px !important;
        margin-right: -2px !important;
        transform: translateY(-1px) !important;
    }
}

/* HEADER_LANGUAGE_V2_BUTTON_PROPORTION_TUNE_20260705_END */

/* MOBILE_BLUE_TAP_RECTANGLE_GLOBAL_FIX_20260705
   Global mobile-only fix for ugly blue tap/focus rectangles.
   Purpose:
   - remove browser blue tap highlight on mobile
   - remove accidental focus/active rectangles after touch
   - keep desktop keyboard focus-visible available
   Does NOT touch layout, menu JS, positioning, or desktop visuals.
*/

/* Main mobile/touch rule */
@media (hover: none), (pointer: coarse), (max-width: 980px) {
    html,
    body,
    html body,
    html body *,
    html body *::before,
    html body *::after {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }

    html body a,
    html body button,
    html body summary,
    html body label,
    html body input,
    html body textarea,
    html body select,
    html body [role="button"],
    html body [role="tab"],
    html body [role="link"],
    html body [tabindex],
    html body .mobile-header-hub-button,
    html body .language-switcher-v2-trigger,
    html body .language-switcher-v2-menu a,
    html body .explore-trigger,
    html body .explore-toggle,
    html body .explore-close,
    html body .main-nav a,
    html body .header-nav a,
    html body .mobile-nav a,
    html body .nav-links a,
    html body .faq-question,
    html body .faq-toggle,
    html body .accordion-trigger,
    html body .accordion-button,
    html body .tab,
    html body .tabs button,
    html body .tab-button,
    html body .card-link,
    html body .section-card,
    html body .seo-top-answer-link,
    html body .answer-card,
    html body .question-card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }

    html body a:focus,
    html body button:focus,
    html body summary:focus,
    html body label:focus,
    html body input:focus,
    html body textarea:focus,
    html body select:focus,
    html body [role="button"]:focus,
    html body [role="tab"]:focus,
    html body [role="link"]:focus,
    html body [tabindex]:focus,
    html body .mobile-header-hub-button:focus,
    html body .language-switcher-v2-trigger:focus,
    html body .language-switcher-v2-menu a:focus,
    html body .explore-trigger:focus,
    html body .explore-toggle:focus,
    html body .explore-close:focus,
    html body .main-nav a:focus,
    html body .header-nav a:focus,
    html body .mobile-nav a:focus,
    html body .nav-links a:focus,
    html body .faq-question:focus,
    html body .faq-toggle:focus,
    html body .accordion-trigger:focus,
    html body .accordion-button:focus,
    html body .tab:focus,
    html body .tabs button:focus,
    html body .tab-button:focus,
    html body .card-link:focus,
    html body .section-card:focus,
    html body .seo-top-answer-link:focus,
    html body .answer-card:focus,
    html body .question-card:focus {
        outline: none !important;
    }

    html body a:focus:not(:focus-visible),
    html body button:focus:not(:focus-visible),
    html body summary:focus:not(:focus-visible),
    html body label:focus:not(:focus-visible),
    html body input:focus:not(:focus-visible),
    html body textarea:focus:not(:focus-visible),
    html body select:focus:not(:focus-visible),
    html body [role="button"]:focus:not(:focus-visible),
    html body [role="tab"]:focus:not(:focus-visible),
    html body [role="link"]:focus:not(:focus-visible),
    html body [tabindex]:focus:not(:focus-visible),
    html body .mobile-header-hub-button:focus:not(:focus-visible),
    html body .language-switcher-v2-trigger:focus:not(:focus-visible),
    html body .language-switcher-v2-menu a:focus:not(:focus-visible),
    html body .explore-trigger:focus:not(:focus-visible),
    html body .explore-toggle:focus:not(:focus-visible),
    html body .explore-close:focus:not(:focus-visible),
    html body .faq-question:focus:not(:focus-visible),
    html body .faq-toggle:focus:not(:focus-visible),
    html body .accordion-trigger:focus:not(:focus-visible),
    html body .accordion-button:focus:not(:focus-visible),
    html body .tab:focus:not(:focus-visible),
    html body .tabs button:focus:not(:focus-visible),
    html body .tab-button:focus:not(:focus-visible),
    html body .card-link:focus:not(:focus-visible),
    html body .section-card:focus:not(:focus-visible),
    html body .seo-top-answer-link:focus:not(:focus-visible),
    html body .answer-card:focus:not(:focus-visible),
    html body .question-card:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

    html body a:active,
    html body button:active,
    html body summary:active,
    html body label:active,
    html body [role="button"]:active,
    html body [role="tab"]:active,
    html body [role="link"]:active,
    html body [tabindex]:active,
    html body .mobile-header-hub-button:active,
    html body .language-switcher-v2-trigger:active,
    html body .language-switcher-v2-menu a:active,
    html body .explore-trigger:active,
    html body .explore-toggle:active,
    html body .explore-close:active,
    html body .main-nav a:active,
    html body .header-nav a:active,
    html body .mobile-nav a:active,
    html body .nav-links a:active,
    html body .faq-question:active,
    html body .faq-toggle:active,
    html body .accordion-trigger:active,
    html body .accordion-button:active,
    html body .tab:active,
    html body .tabs button:active,
    html body .tab-button:active,
    html body .card-link:active,
    html body .section-card:active,
    html body .seo-top-answer-link:active,
    html body .answer-card:active,
    html body .question-card:active {
        outline: none !important;
    }
}

/* Desktop / mouse / keyboard: keep useful focus state */
@media (hover: hover) and (pointer: fine) {
    html body a:focus-visible,
    html body button:focus-visible,
    html body summary:focus-visible,
    html body [role="button"]:focus-visible,
    html body [role="tab"]:focus-visible,
    html body [role="link"]:focus-visible,
    html body [tabindex]:focus-visible {
        outline: 2px solid rgba(31, 124, 255, 0.42) !important;
        outline-offset: 3px !important;
    }
}

/* MOBILE_BLUE_TAP_RECTANGLE_GLOBAL_FIX_20260705_END */





/* HEADER_EXPLORE_MOBILE_TOUCH_GRAY_RESET_20260705
   Mobile/touch only:
   after closing Explore by tapping Explore again, kill sticky hover/focus blue.
   Desktop hover remains untouched.
*/
@media (hover: none), (pointer: coarse), (max-width: 980px) {
    html body .explore-mobile-touch-closed-gray,
    html body .explore-mobile-touch-closed-gray:hover,
    html body .explore-mobile-touch-closed-gray:focus,
    html body .explore-mobile-touch-closed-gray:active,
    html body .explore-mobile-touch-closed-gray[aria-expanded="false"],
    html body .site-header .explore-mobile-touch-closed-gray,
    html body .site-header .explore-mobile-touch-closed-gray:hover,
    html body .site-header .explore-mobile-touch-closed-gray:focus,
    html body .site-header .explore-mobile-touch-closed-gray:active,
    html body .site-header .explore-mobile-touch-closed-gray[aria-expanded="false"] {
        color: rgba(6, 34, 86, 0.58) !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        text-decoration: none !important;
    }
}

/* HEADER_EXPLORE_MOBILE_TOUCH_GRAY_RESET_20260705_END */

/* HEADER_EXPLORE_MOBILE_STICKY_HOVER_SPECIFIC_FIX_20260705
   Real cause:
   mobile browsers can keep :hover stuck after tap.
   Existing selector:
   html body .site-header .main-nav .explore-toggle:hover
   is more specific than the previous gray reset.
   This mobile-only rule overrides that exact selector when Explore is closed.
   Desktop hover remains untouched.
*/
@media (hover: none), (pointer: coarse), (max-width: 980px) {
    html body .site-header .main-nav .explore-toggle[aria-expanded="false"],
    html body .site-header .main-nav .explore-toggle[aria-expanded="false"]:hover,
    html body .site-header .main-nav .explore-toggle[aria-expanded="false"]:focus,
    html body .site-header .main-nav .explore-toggle[aria-expanded="false"]:active,
    html body .site-header .main-nav .explore-toggle.explore-mobile-touch-closed-gray,
    html body .site-header .main-nav .explore-toggle.explore-mobile-touch-closed-gray:hover,
    html body .site-header .main-nav .explore-toggle.explore-mobile-touch-closed-gray:focus,
    html body .site-header .main-nav .explore-toggle.explore-mobile-touch-closed-gray:active {
        color: #53627a !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }

    html body .site-header .main-nav .explore-toggle[aria-expanded="true"] {
        color: var(--blue, #1f7cff) !important;
    }
}

/* HEADER_EXPLORE_MOBILE_STICKY_HOVER_SPECIFIC_FIX_20260705_END */







/* HEADER_LANGUAGE_DROPDOWN_FIT_CONTENT_RIGHT_ALIGN_20260705
   Only the opened language dropdown panel is changed.
   The trigger/button with the arrow is NOT touched.
   Goal:
   - menu width follows content: EN / ES-MX
   - right edge of menu aligns to right edge of trigger
   - no wide loose frame on desktop/mobile portrait/mobile landscape
*/
html body .language-switcher-v2-menu[hidden] {
    display: none !important;
}

html body .language-switcher-v2-menu:not([hidden]) {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: max-content !important;
    min-width: max-content !important;
    max-width: calc(100vw - 16px) !important;

    padding: 6px !important;
    box-sizing: border-box !important;
}

html body .language-switcher-v2-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    white-space: nowrap !important;
    box-sizing: border-box !important;

    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Slightly tighter on mobile, still based on ES-MX text length */
@media (max-width: 980px) {
    html body .language-switcher-v2-menu:not([hidden]) {
        padding: 5px !important;
        max-width: calc(100vw - 12px) !important;
    }

    html body .language-switcher-v2-menu a {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}

/* HEADER_LANGUAGE_DROPDOWN_FIT_CONTENT_RIGHT_ALIGN_20260705_END */