:root {
    /* Derived from the canonical 1881px WebP at its rendered card widths. */
    --dch-visual-radius: 6px;
    --dch-visual-radius-compact: 4px;
    --dch-card-silhouette-radius: clamp(4px, 1.2vw, 6px);
}

/* Active rounded rectangular surfaces share one geometry across viewports. */
.image-card,
.feature-card,
.info-card,
.content-card,
.answers-faq-topic-card,
.legacy-topic-card,
.dch-ai-search__panel,
.dch-ai-search__input,
.dch-ai-search__submit,
.dch-ai-search__result,
.seo-top-answers-card,
.seo-top-answer-row,
.seo-quick-answer,
.seo-answer-copy-quick,
.seo-question-answer-box,
.seo-full-answer-card,
.seo-checklist-card,
.seo-final-cta,
.seo-telegram-panel,
.seo-answer-card,
.seo-topic-card,
.seo-subtopic-card,
.seo-question-card,
.seo-subtopic-question-card,
.seo-related-card,
.seo-related-panel,
.seo-content-card,
.seo-section-card,
.seo-answers-directory-card,
.question-card,
.topic-card,
.subtopic-card,
.answer-card,
.section-card,
.seo-card,
.explore-toggle,
.explore-menu-inner,
.explore-section-card,
.language-switcher-v2,
.language-switcher-v2-trigger,
.language-switcher-v2-menu,
.language-switcher-v2-menu a,
    .desktop-update-notice__inner {
    border-radius: var(--dch-visual-radius) !important;
}

html body .image-card,
html body .feature-card,
html body .info-card,
html body .content-card,
html body .answers-faq-topic-card,
html body .legacy-topic-card,
html body .dch-ai-search__panel,
html body .dch-ai-search__input,
html body .dch-ai-search__submit,
html body .dch-ai-search__result,
html body .seo-top-answers-card,
html body .seo-top-answer-row,
html body .seo-quick-answer,
html body .seo-answer-copy-quick,
html body .seo-question-answer-box,
html body .seo-full-answer-card,
html body .seo-checklist-card,
html body .seo-final-cta,
html body .seo-telegram-panel,
html body .seo-answer-card,
html body .seo-topic-card,
html body .seo-subtopic-card,
html body .seo-question-card,
html body .seo-subtopic-question-card,
html body .seo-related-card,
html body .seo-related-panel,
html body .seo-content-card,
html body .seo-section-card,
html body .seo-answers-directory-card,
html body .question-card,
html body .topic-card,
html body .subtopic-card,
html body .answer-card,
html body .section-card,
html body .seo-card,
html body .explore-toggle,
html body .explore-menu-inner,
html body .explore-section-card,
html body .language-switcher-v2,
html body .language-switcher-v2-trigger,
html body .language-switcher-v2-menu,
html body .language-switcher-v2-menu a,
    html body .desktop-update-notice__inner {
    border-radius: var(--dch-visual-radius) !important;
}

html body .site-header .language-switcher-v2 .language-switcher-v2-trigger,
html body .site-header .language-switcher-v2 .language-switcher-v2-menu,
html body .site-header .language-switcher-v2 .language-switcher-v2-menu a,
    html body.seo-answer-page .seo-top-answers-card,
html body.seo-answer-page .seo-top-answer-row,
html body.seo-answer-page .seo-quick-answer,
html body.seo-answer-page .seo-answer-copy-quick,
html body.seo-answer-page .seo-question-answer-box,
html body.seo-answer-page .seo-full-answer-card,
html body.seo-answer-page .seo-checklist-card,
html body.seo-answer-page .seo-related-card,
html body.seo-answer-page .seo-final-cta,
    html body.seo-answer-page .seo-telegram-panel {
    border-radius: var(--dch-visual-radius) !important;
}

@media (min-width: 981px) {
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(1) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(1) > .image-card { animation-delay: 0s; }
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(2) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(2) > .image-card { animation-delay: 9s; }
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(3) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(3) > .image-card { animation-delay: 4.5s; }
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(4) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(4) > .image-card { animation-delay: 13.5s; }
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(5) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(5) > .image-card { animation-delay: 2.2s; }
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(6) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(6) > .image-card { animation-delay: 11.2s; }
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(7) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(7) > .image-card { animation-delay: 6.8s; }
    body.home-global-soft-wash .home-platform-cards-section .feature-grid.card-image-grid .dch-project-card-shell:nth-child(8) > .image-card,
    body.seo-answer-page .seo-card-grid .dch-project-card-shell:nth-child(8) > .image-card { animation-delay: 15.6s; }
}

.home-faq-hard-fix .faq-layout,
.seo-faq-section .faq-layout {
    box-sizing: border-box;
    padding: clamp(22px, 4vw, 42px) !important;
    border: 1px solid rgba(116, 178, 231, 0.5) !important;
    border-radius: var(--dch-visual-radius) !important;
    background: rgba(246, 251, 255, 0.88) !important;
    box-shadow: 0 16px 38px rgba(36, 92, 144, 0.1) !important;
}

.home-faq-hard-fix .faq-heading,
.home-faq-hard-fix .faq-heading h2,
.home-faq-hard-fix .faq-heading .eyebrow,
.seo-faq-section .faq-heading,
.seo-faq-section .faq-heading h2,
.seo-faq-section .faq-heading .eyebrow {
    text-align: left !important;
}

.home-faq-hard-fix .faq-list details,
.seo-faq-section .faq-list details,
.faq-list details {
    border-radius: var(--dch-visual-radius-compact) !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details,
html body.seo-answer-page .seo-faq-section .faq-list details,
html body .faq-list details {
    border-radius: var(--dch-visual-radius-compact) !important;
}

.home-faq-hard-fix .faq-list details summary,
.seo-faq-section .faq-list details summary,
.faq-list details summary {
    border-radius: var(--dch-visual-radius-compact) !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-list details summary,
html body.seo-answer-page .seo-faq-section .faq-list details summary,
html body .faq-list details summary {
    border-radius: var(--dch-visual-radius-compact) !important;
}

/* The desktop expanded FAQ surface is painted by this pseudo-element. */
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details::after {
    border-radius: var(--dch-visual-radius-compact) !important;
}

/*
 * The terminal FAQ flow styles paint the white row on <details> itself and
 * include state selectors such as [open], .reveal and :hover.  Match those
 * states so their legacy 22px radius cannot win the cascade.
 */
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,
html body.home-global-soft-wash .home-faq-hard-fix .faq-list details.reveal:hover {
    border-radius: var(--dch-visual-radius-compact) !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,
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 {
    border-radius: var(--dch-visual-radius-compact) !important;
}

@media (max-width: 980px) {
    html body.home-global-soft-wash .home-faq-hard-fix > .faq-layout,
    html body.seo-answer-page .seo-faq-section > .faq-layout {
        width: min(720px, calc(100vw - 32px)) !important;
        max-width: 720px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        align-items: stretch !important;
        background-clip: padding-box !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-list,
    html body.seo-answer-page .seo-faq-section .faq-list {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }
}

.dch-project-card-shell {
    display: contents;
}

.dch-portrait-flip-card {
    display: none;
}

/*
 * The canonical WebPs own the visible card edge via alpha.  The former
 * .image-card surface was still painting white behind transparent corners on
 * desktop and landscape, so the standard sibling must stay unpainted.
 */
html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard {
    display: block !important;
    box-sizing: border-box !important;
    aspect-ratio: 1881 / 473 !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard > .desktop-card-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1881 / 473 !important;
    object-fit: fill !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Horizontal canonical artwork needs room to remain legible outside portrait. */
@media (min-width: 981px) {
    html body .feature-grid.card-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    html body .feature-grid.card-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard {
        display: block !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard > .desktop-card-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1881 / 473 !important;
        object-fit: fill !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
}

/* Compact controls retain their intended pill language. */
html body .mobile-header-hub-button,
html body .telegram-button,
html body .seo-final-button,
html body .seo-telegram-button {
    border-radius: 999px !important;
}

/* The AI panel is a surface; its controls are deliberately one step tighter. */
html body .dch-ai-search__input,
html body .dch-ai-search__submit,
html body .dch-ai-search__result {
    border-radius: var(--dch-visual-radius-compact) !important;
}

@media (max-width: 600px) and (orientation: portrait) {
    .dch-project-card-shell {
        display: block;
        min-width: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Portrait has one rendered card branch: the flip-card article only. */
    html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body .feature-grid.card-image-grid > .dch-project-card-shell > .dch-portrait-flip-card {
        position: relative;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 100%;
        aspect-ratio: 1881 / 473;
        min-width: 0;
        border-radius: 0;
        background: transparent;
        perspective: 1200px;
        contain: layout;
        isolation: isolate;
    }

    .dch-portrait-flip-card__inner {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: transparent;
        transform-style: preserve-3d;
        transition: transform 520ms cubic-bezier(0.22, 0.72, 0.24, 1);
    }

    .dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__inner {
        transform: rotateX(180deg);
    }

    .dch-portrait-flip-card__face {
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 0;
        border-radius: var(--dch-card-silhouette-radius);
        -webkit-clip-path: inset(0 round var(--dch-card-silhouette-radius));
        clip-path: inset(0 round var(--dch-card-silhouette-radius));
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .dch-portrait-flip-card__front {
        display: block;
        margin: 0;
        padding: 0;
        color: #071d3d;
        background: transparent;
        cursor: pointer;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }

    .dch-portrait-flip-card__art {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 0;
        background: transparent;
        pointer-events: none;
        user-select: none;
    }

    .dch-project-card-shell::before,
    .dch-project-card-shell::after,
    .dch-portrait-flip-card::before,
    .dch-portrait-flip-card::after,
    .dch-portrait-flip-card__inner::before,
    .dch-portrait-flip-card__inner::after,
    .dch-portrait-flip-card__front::before,
    .dch-portrait-flip-card__front::after {
        content: none !important;
        display: none !important;
    }

    html body .dch-ai-search > .container {
        width: min(560px, calc(100vw - 32px)) !important;
        max-width: 560px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .dch-portrait-flip-card__front-info {
        position: absolute;
        top: 50%;
        right: 14.5%;
        left: 27.5%;
        z-index: 1;
        display: grid;
        gap: clamp(1px, 0.6vw, 4px);
        transform: translateY(-50%);
        color: #0a315d;
        font-family: Inter, Arial, sans-serif;
        font-size: clamp(9px, 2.7vw, 14px);
        font-weight: 750;
        line-height: 1.15;
        letter-spacing: 0;
        text-align: left;
        white-space: nowrap;
        pointer-events: none;
    }

    .dch-portrait-flip-card__front-info span:nth-child(2) {
        color: #087ad4;
    }

    .dch-portrait-flip-card__front-info span:nth-child(3) {
        color: #148768;
    }

    .dch-portrait-flip-card__back {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(6px, 2vw, 16px);
        padding: clamp(7px, 2.4vw, 16px) clamp(9px, 3vw, 22px);
        color: #f7fbff;
        background:
            linear-gradient(135deg, rgba(14, 46, 83, 0.98), rgba(16, 93, 151, 0.96));
        box-shadow: inset 0 0 0 1px rgba(154, 220, 255, 0.72);
        transform: rotateX(180deg);
    }

    .dch-portrait-flip-card__back-copy {
        display: grid;
        min-width: 0;
        gap: clamp(1px, 0.45vw, 3px);
        font-family: Inter, Arial, sans-serif;
        font-size: clamp(8.5px, 2.55vw, 13px);
        font-weight: 650;
        line-height: 1.12;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .dch-portrait-flip-card__back-copy strong {
        overflow: hidden;
        color: #ffffff;
        font-size: clamp(10px, 3vw, 16px);
        font-weight: 850;
        text-overflow: ellipsis;
    }

    .dch-portrait-flip-card__back-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(3px, 1vw, 7px);
    }

    .dch-portrait-flip-card__back-actions a {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 5px clamp(9px, 2.4vw, 15px);
        border: 1px solid rgba(255, 255, 255, 0.74);
        border-radius: var(--dch-visual-radius-compact);
        color: #072e57;
        background: #ffffff;
        font-family: Inter, Arial, sans-serif;
        font-size: clamp(8.5px, 2.4vw, 12px);
        font-weight: 850;
        line-height: 1;
        letter-spacing: 0;
        text-decoration: none;
        white-space: nowrap;
    }

    .dch-portrait-flip-card__back-actions button {
        display: inline-grid;
        width: 25px;
        height: 25px;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        color: #ffffff;
        background: rgba(3, 27, 52, 0.44);
        font: 800 17px/1 Inter, Arial, sans-serif;
        cursor: pointer;
    }

    .dch-portrait-flip-card__front:focus-visible,
    .dch-portrait-flip-card__back-actions a:focus-visible,
    .dch-portrait-flip-card__back-actions button:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: -5px;
        box-shadow: 0 0 0 2px #087fe2;
    }
}

/* Outside portrait, only the direct standard-link branch participates. */
@media (min-width: 601px), (orientation: landscape) {
    html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body .feature-grid.card-image-grid > .dch-project-card-shell > .dch-portrait-flip-card {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 600px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
    .dch-portrait-flip-card__inner {
        transition-duration: 1ms;
    }
}

/* DROP_WEB_4_TERRA_ONLY_REMAINING_V4_NO_EXPLORE_START */
:root {
    --dch-interactive-accent: #0b5fb8;
    --dch-interactive-accent-hover: #0750a2;
}

/* The accepted flip architecture now owns project cards at every viewport. */
html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body .feature-grid.card-image-grid > .dch-project-card-shell > .dch-portrait-flip-card,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > .dch-portrait-flip-card {
    position: relative;
    display: block !important;
    visibility: visible !important;
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 1200 / 330;
    overflow: visible;
    pointer-events: auto !important;
    contain: layout;
    isolation: isolate;
}

.dch-portrait-flip-card__inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--dch-visual-radius);
    transform-style: preserve-3d;
    transition: transform 520ms cubic-bezier(0.22, 0.72, 0.24, 1);
}

.dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__inner {
    transform: rotateX(180deg);
}

.dch-portrait-flip-card__face {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: var(--dch-visual-radius);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.dch-portrait-flip-card__front {
    display: block;
    margin: 0;
    padding: 0;
    color: #071d3d;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.dch-portrait-flip-card__art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.dch-project-card-shell::before,
.dch-project-card-shell::after,
.dch-portrait-flip-card::before,
.dch-portrait-flip-card::after,
.dch-portrait-flip-card__inner::before,
.dch-portrait-flip-card__inner::after,
.dch-portrait-flip-card__front::before,
.dch-portrait-flip-card__front::after {
    content: none !important;
    display: none !important;
}

.dch-portrait-flip-card__front-info {
    position: absolute;
    top: 50%;
    right: 14.5%;
    left: 27.5%;
    display: grid;
    gap: clamp(1px, 0.45vw, 3px);
    transform: translateY(-50%);
    color: #071d3d;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(10px, 1.55vw, 16px);
    font-weight: 780;
    line-height: 1.16;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    pointer-events: none;
}

.dch-portrait-flip-card__front-info span:nth-child(2) { color: #087ad4; }
.dch-portrait-flip-card__front-info span:nth-child(3) { color: #148768; }

.dch-portrait-flip-card__back {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(6px, 2vw, 16px);
    padding: clamp(12px, 3vw, 28px) clamp(13px, 4vw, 38px);
    color: #ffffff;
    background: linear-gradient(135deg, #0b3c76 0%, #087fe2 100%);
    box-shadow: inset 0 0 0 1px rgba(154, 220, 255, 0.72);
    transform: rotateX(180deg);
}

.dch-portrait-flip-card__back-copy {
    display: grid;
    min-width: 0;
    gap: clamp(1px, 0.45vw, 3px);
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(9px, 1.15vw, 13px);
    font-weight: 650;
    line-height: 1.14;
    letter-spacing: 0;
    white-space: nowrap;
}

.dch-portrait-flip-card__back-copy strong {
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(11px, 1.6vw, 18px);
    font-weight: 850;
    text-overflow: ellipsis;
}

.dch-portrait-flip-card__back-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(3px, 1vw, 7px);
}

.dch-portrait-flip-card__back-actions a {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(8px, 2.4vw, 15px);
    color: #0b62bb;
    background: #ffffff;
    border-radius: 999px;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(9px, 1.1vw, 13px);
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.dch-portrait-flip-card__back-actions button {
    display: inline-grid;
    width: 25px;
    height: 25px;
    place-items: center;
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    font: 800 17px/1 Inter, Arial, sans-serif;
    cursor: pointer;
}

.dch-portrait-flip-card__front:focus-visible,
.dch-portrait-flip-card__back-actions a:focus-visible,
.dch-portrait-flip-card__back-actions button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -5px;
    box-shadow: 0 0 0 2px var(--dch-interactive-accent);
}

@media (prefers-reduced-motion: reduce) {
    .dch-portrait-flip-card__inner { transition-duration: 1ms; }
}

/* FAQ and Ask AI share a single left-aligned panel rhythm. */
html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 22px 22px 50px !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-heading {
    margin: 0 0 14px !important;
}

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

html body.home-global-soft-wash .home-faq-hard-fix .faq-heading-full {
    display: none !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .faq-heading-short {
    display: inline !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .home-faq-all-answers-link {
    margin-bottom: 4px !important;
}

.dch-ai-search__label--sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dch-ai-search__input::placeholder {
    color: #405a72 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
}

/* Shared interactive accent; this changes colour only, never Explore mechanics. */
html body .site-header .mobile-header-hub-button .telegram-button-icon,
html body .site-header .mobile-header-hub-button .telegram-button-icon svg,
html body .site-header .mobile-header-hub-button .telegram-button-icon svg path,
html body .site-header .main-nav a.active,
html body .site-header .main-nav a[aria-current="page"],
html body .site-header .explore-toggle.active,
html body .site-header .language-switcher-v2-current,
html body .language-switcher-v2-menu a.active,
html body.home-global-soft-wash .home-faq-hard-fix .home-faq-all-answers-link,
html body .dch-ai-search__submit,
html body .seo-final-button,
html body .seo-related-card-strong .seo-telegram-button {
    color: var(--dch-interactive-accent) !important;
}

html body .site-header .mobile-header-hub-button .telegram-button-icon svg,
html body .site-header .mobile-header-hub-button .telegram-button-icon svg path {
    fill: var(--dch-interactive-accent) !important;
}

html body .dch-ai-search__submit,
html body .seo-final-button,
html body .seo-related-card-strong .seo-telegram-button {
    border-color: rgba(11, 95, 184, 0.34) !important;
    box-shadow: 0 10px 22px rgba(11, 95, 184, 0.14) !important;
}

html body .dch-ai-search__submit:hover:not(:disabled),
html body .seo-final-button:hover,
html body .seo-related-card-strong .seo-telegram-button:hover {
    color: var(--dch-interactive-accent-hover) !important;
    border-color: rgba(7, 80, 162, 0.48) !important;
}

html body .site-header .language-switcher-v2-trigger {
    border-radius: 5px !important;
}

html body .seo-final-button,
html body .seo-related-card-strong .seo-telegram-button {
    border-radius: 4px !important;
}

@media (max-width: 980px) and (orientation: portrait) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        padding: 18px 22px 40px !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-heading {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        padding: 16px 16px 30px !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        padding: 18px 22px 42px !important;
    }

    html body.home-global-soft-wash .home-faq-hard-fix .faq-heading {
        margin-bottom: 12px !important;
    }
}
/* DROP_WEB_4_TERRA_ONLY_REMAINING_V4_NO_EXPLORE_END */

/* DROP_WEB_4_TERRA_POST_DEPLOY_REGRESSION_COLOR_PANEL_FIX_START */
/* Match the exact legacy standard-card selector so its desktop media query
   cannot re-enable a second visible renderer. */
html body .feature-grid.card-image-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > a.image-card.dch-project-card-standard {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* The one-column FAQ grid stretches a grid item by default. Keep the link
   itself shrink-wrapped so only the intended compact underline is painted. */
html body.home-global-soft-wash .home-faq-hard-fix .home-faq-all-answers-link {
    justify-self: center !important;
    inline-size: fit-content !important;
    max-inline-size: 100% !important;
    width: auto !important;
}

/* Desktop, tablet, and landscape FAQ use the normal block-heading scale.
   Phone portrait keeps its accepted size. */
@media (min-width: 601px), (orientation: landscape) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-heading h2 {
        font-size: 24px !important;
        line-height: 1.15 !important;
        font-weight: 850 !important;
    }
}

/* Only active Answers and FAQ outer surfaces are pulled into the 6px system. */
html body.seo-answer-page .seo-top-answers-card,
html body.seo-answer-page .seo-detail-related-card,
html body.seo-answer-page .answers-faq-topic-card,
html body.seo-answer-page .legacy-topic-card,
html body.seo-answer-page.seo-subtopic-question-hub .seo-top-answers-card,
html body.seo-answer-page.seo-answers-index .seo-top-answers-card {
    border-radius: var(--dch-visual-radius) !important;
}

html body.seo-answer-page .seo-top-answers-card .seo-top-answer-row,
html body.seo-answer-page .answers-faq-topic-card .seo-top-answer-row {
    border-radius: var(--dch-visual-radius-compact) !important;
}

/* #0b5fb8 was captured before this patch from the visible Answer label.
   Answer becomes a normal dark-navy block heading after capture. */
html body.seo-answer-page .seo-question-answer-box .seo-answer-label-clean strong {
    color: #062c73 !important;
}

/* Shared interactive hierarchy: the captured Answer blue is now the accent. */
html body .site-header .mobile-header-hub-button,
html body.seo-answer-page .seo-breadcrumbs a,
html body.seo-answer-page .seo-next-step-label {
    color: var(--dch-interactive-accent) !important;
}

html body .dch-ai-search__submit,
html body .seo-final-button,
html body .seo-related-card-strong .seo-telegram-button {
    border-color: rgba(11, 95, 184, 0.34) !important;
    box-shadow: 0 10px 22px rgba(11, 95, 184, 0.14) !important;
}

/* Preserve the existing lower-CTA geometry while applying the requested
   dark-navy heading, neutral support text, and accent action hierarchy. */
html body.seo-answer-page .seo-final-cta h2 {
    color: #062c73 !important;
}

html body.seo-answer-page .seo-final-cta p {
    color: #405a72 !important;
}

/* DROP_WEB_4_TERRA_POST_DEPLOY_REGRESSION_COLOR_PANEL_FIX_END */

/* DROP_WEB_4_TERRA_V4_2_FAQ_ALIGNMENT_COLOR_CLEANUP_DESKTOP_ANSWERS_RADIUS_START */
/* The existing active Home and language-letter rules resolve to #0b5fb8.
   Reuse that captured value through the V4 token for interactive states only. */
html body.home-global-soft-wash .home-faq-hard-fix .home-faq-all-answers-link {
    justify-self: start !important;
    inline-size: fit-content !important;
    max-inline-size: 100% !important;
    width: auto !important;
    margin-bottom: 0 !important;
    border-bottom-color: rgba(11, 95, 184, 0.42) !important;
}

html body.home-global-soft-wash .home-faq-hard-fix .home-faq-all-answers-link:hover,
html body.home-global-soft-wash .home-faq-hard-fix .home-faq-answer-link:hover,
html body.seo-answer-page .seo-top-answer-row:hover {
    color: var(--dch-interactive-accent) !important;
    border-bottom-color: var(--dch-interactive-accent) !important;
}

/* Match the accepted top padding per viewport after removing the former
   post-control margin, so the underline has the same clearance below it. */
html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
    padding: 22px 22px 22px !important;
}

@media (max-width: 980px) and (orientation: portrait) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        padding: 18px 22px 18px !important;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        padding: 16px 16px 16px !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    html body.home-global-soft-wash .home-faq-hard-fix .faq-layout {
        padding: 18px 22px 18px !important;
    }
}

/* Explore mechanics remain in brand.css; these are colour-only overrides. */
html body .site-header .language-switcher-v2-current,
html body .site-header .language-switcher-v2-caret,
html body .site-header .main-nav a.active,
html body .site-header .main-nav a[aria-current="page"],
html body .site-header .main-nav .explore-toggle.active,
html body .site-header .main-nav .explore-toggle[aria-expanded="true"],
html body .explore-close,
html body .explore-card-title,
html body .explore-section-card.active .explore-card-title,
html body .explore-section-card:hover .explore-card-title {
    color: var(--dch-interactive-accent) !important;
}

@media (hover: hover) and (pointer: fine) {
    html body .site-header .main-nav a:hover,
    html body .site-header .main-nav .explore-toggle:hover {
        color: var(--dch-interactive-accent) !important;
    }
}

/* Keep the rectangular CTA geometry while giving its action the shared accent. */
html body.seo-answer-page .seo-final-button,
html body.seo-answer-page .seo-final-button:hover {
    background: var(--dch-interactive-accent) !important;
    color: #ffffff !important;
    border-color: var(--dch-interactive-accent) !important;
    box-shadow: 0 10px 22px rgba(11, 95, 184, 0.18) !important;
}

@media (min-width: 981px) {
    html body.seo-answer-page .seo-final-cta p {
        font-weight: 600 !important;
    }

    /* This matches the late desktop 28px legacy selectors in brand.css. */
    html body.seo-answer-page .seo-detail-related-card,
    html body.seo-answer-page .answers-faq-topic-card,
    html body.seo-answer-page .legacy-topic-card,
    html body.seo-answer-page.seo-explore-hub-page.seo-subtopic-question-hub .seo-top-answers-card,
    html body.seo-answer-page.seo-explore-hub-page.seo-answers-index .seo-top-answers-card {
        border-radius: var(--dch-visual-radius) !important;
    }

    html body.seo-answer-page .seo-top-answers-card .seo-top-answer-row,
    html body.seo-answer-page .answers-faq-topic-card .seo-top-answer-row {
        border-radius: var(--dch-visual-radius-compact) !important;
    }
}
/* DROP_WEB_4_TERRA_V4_2_FAQ_ALIGNMENT_COLOR_CLEANUP_DESKTOP_ANSWERS_RADIUS_END */

/* DROP_WEB_4_TERRA_V4_3_MOBILE_PORTRAIT_CTA_SPACING_FOOTER_COLOR_START */
/* Portrait-only QA corrections. Desktop and landscape retain the accepted V4.2 layout. */
@media (max-width: 600px) and (orientation: portrait) {
    /* Keep the active Home label on the same final blue as the language letters. */
    html body.home-global-soft-wash .site-header .main-nav a.active,
    html body.seo-answer-page .site-header .main-nav a.active {
        color: var(--dch-interactive-accent) !important;
    }

    /* Match the accepted explanatory-copy to FAQ-card clearance. */
    html body.seo-answer-page .seo-platform-section .section-heading {
        margin-bottom: 18px !important;
    }

    /* Reuse the accepted functional-heading and secondary-copy hierarchy. */
    html body.seo-answer-page .seo-final-cta h2 {
        font-size: var(--dch-mobile-functional-heading-size) !important;
        line-height: var(--dch-mobile-functional-heading-line-height) !important;
        font-weight: var(--dch-mobile-functional-heading-weight) !important;
        letter-spacing: var(--dch-mobile-functional-heading-tracking) !important;
    }

    html body.seo-answer-page .seo-final-cta p {
        color: var(--dch-mobile-secondary-color) !important;
        font-size: var(--dch-mobile-secondary-size) !important;
        line-height: var(--dch-mobile-secondary-line-height) !important;
        font-weight: var(--dch-mobile-secondary-weight) !important;
        letter-spacing: 0 !important;
    }

    /* #161C45 is the dominant clean-interior arrow-square color in canonical cards. */
    html body.seo-answer-page .seo-final-button,
    html body.seo-answer-page .seo-final-button:hover {
        background: #161c45 !important;
        border-color: #161c45 !important;
        color: #ffffff !important;
    }
}

/* Recolor only the footer plane; the accepted footer animation remains untouched. */
html body .site-footer .footer-brand-title-link .footer-brand-telegram-icon,
html body .site-footer .footer-brand-title-link .footer-brand-telegram-icon svg,
html body .site-footer .footer-brand-title-link .footer-brand-telegram-icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* DROP_WEB_4_TERRA_V4_3_MOBILE_PORTRAIT_CTA_SPACING_FOOTER_COLOR_END */

/* DROP_WEB_4_TERRA_V4_4_PORTRAIT_LOCK_DESKTOP_LANDSCAPE_HARMONIZATION_START */
/* Semantic hierarchy and CTA rhythm only; cards, Explore, FAQ, and Ask AI are frozen. */
:root {
    --dch-v44-functional-heading-desktop-size: 32px;
    --dch-v44-functional-heading-desktop-line-height: 1.15;
    --dch-v44-functional-heading-landscape-size: 24px;
    --dch-v44-functional-heading-landscape-line-height: 1.14;
    --dch-v44-secondary-desktop-size: 18px;
    --dch-v44-secondary-landscape-size: 16px;
    --dch-v44-secondary-line-height: 1.5;
    --dch-v44-secondary-weight: 600;
    --dch-v44-secondary-color: #405a72;
    --dch-v44-cta-action: #161c45;
}

/* The approved shorter copy needs only content-driven portrait spacing. */
@media (max-width: 600px) and (orientation: portrait) {
    html body.seo-answer-page .seo-platform-section {
        padding-bottom: 24px !important;
    }

    html body.seo-answer-page .seo-final-cta-section {
        padding-top: 24px !important;
        padding-bottom: 60px !important;
    }

    html body.seo-answer-page .seo-final-cta {
        gap: 16px !important;
        padding: 24px 20px !important;
    }
}

/* Landscape keeps its own composition while adopting the same semantic scale. */
@media (max-width: 980px) and (orientation: landscape) {
    html body.home-global-soft-wash .home-platform-cards-section .section-heading h2,
    html body.seo-answer-page.seo-answers-index .seo-answer-copy h1,
    html body.seo-answer-page.seo-explore-hub-page:not(.seo-subtopic-question-hub) .seo-answer-copy h1 {
        font-size: var(--dch-v44-functional-heading-landscape-size) !important;
        line-height: var(--dch-v44-functional-heading-landscape-line-height) !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    html body.home-global-soft-wash .home-platform-subcopy,
    html body.seo-answer-page.seo-answers-index .seo-answer-copy .seo-lead,
    html body.seo-answer-page.seo-explore-hub-page:not(.seo-subtopic-question-hub) .seo-answer-copy .seo-lead,
    html body.seo-answer-page .seo-platform-section .section-copy,
    html body.seo-answer-page .seo-final-cta p {
        color: var(--dch-v44-secondary-color) !important;
        font-size: var(--dch-v44-secondary-landscape-size) !important;
        line-height: var(--dch-v44-secondary-line-height) !important;
        font-weight: var(--dch-v44-secondary-weight) !important;
        letter-spacing: 0 !important;
    }

    html body.seo-answer-page .seo-platform-section {
        padding-bottom: 28px !important;
    }

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

    html body.seo-answer-page .seo-final-cta-section {
        padding-top: 24px !important;
        padding-bottom: 36px !important;
    }

    html body.seo-answer-page .seo-final-cta {
        gap: 18px !important;
        padding: 22px 28px !important;
    }

    html body.seo-answer-page .seo-final-cta h2 {
        font-size: var(--dch-v44-functional-heading-landscape-size) !important;
        line-height: var(--dch-v44-functional-heading-landscape-line-height) !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }
}

/* Desktop preserves its grid but no longer treats normal section names as heroes. */
@media (min-width: 981px) {
    html body.home-global-soft-wash .home-platform-cards-section .section-heading h2,
    html body.seo-answer-page.seo-answers-index .seo-answer-copy h1,
    html body.seo-answer-page.seo-explore-hub-page:not(.seo-subtopic-question-hub) .seo-answer-copy h1 {
        font-size: var(--dch-v44-functional-heading-desktop-size) !important;
        line-height: var(--dch-v44-functional-heading-desktop-line-height) !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    html body.home-global-soft-wash .home-platform-subcopy,
    html body.seo-answer-page.seo-answers-index .seo-answer-copy .seo-lead,
    html body.seo-answer-page.seo-explore-hub-page:not(.seo-subtopic-question-hub) .seo-answer-copy .seo-lead,
    html body.seo-answer-page .seo-platform-section .section-copy,
    html body.seo-answer-page .seo-final-cta p {
        color: var(--dch-v44-secondary-color) !important;
        font-size: var(--dch-v44-secondary-desktop-size) !important;
        line-height: var(--dch-v44-secondary-line-height) !important;
        font-weight: var(--dch-v44-secondary-weight) !important;
        letter-spacing: 0 !important;
    }

    html body.seo-answer-page .seo-platform-section .section-heading {
        margin-bottom: 20px !important;
    }

    html body.seo-answer-page .seo-platform-section .section-copy {
        margin-bottom: 0 !important;
    }

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

    html body.seo-answer-page .seo-final-cta {
        gap: 28px !important;
        padding: 28px 34px !important;
    }

    html body.seo-answer-page .seo-final-cta h2 {
        font-size: 28px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    html body.seo-answer-page .site-footer {
        margin-top: 0 !important;
    }
}

/* One CTA action across viewports; panel and button geometry remain otherwise intact. */
html body.seo-answer-page .seo-final-button,
html body.seo-answer-page .seo-final-button:hover {
    background: var(--dch-v44-cta-action) !important;
    border-color: var(--dch-v44-cta-action) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(22, 28, 69, 0.18) !important;
}
/* DROP_WEB_4_TERRA_V4_4_PORTRAIT_LOCK_DESKTOP_LANDSCAPE_HARMONIZATION_END */

/* REAL_DEVICE_RESPONSIVE_CARD_CORRECTION_V4_START */
/* Loaded after brand.css: isolate card-front repairs from legacy generic rules. */
@keyframes dchLastDropPlanePulseV4 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

html body .dch-portrait-flip-card,
html body .dch-portrait-flip-card__front-info,
html body .dch-card-capabilities {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html body .dch-portrait-flip-card__front-info {
    position: absolute;
    z-index: 2 !important;
    display: grid;
    align-content: start;
    gap: clamp(3px, 0.5vw, 5px) !important;
    transform: none !important;
    color: #071d3d !important;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-static,
html body .dch-portrait-flip-card__front-info > .dch-card-primary-line {
    display: block;
    min-width: 0;
    color: #071d3d !important;
}

html body .dch-last-drop-link {
    display: inline-flex !important;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: #071d3d !important;
    line-height: inherit;
    text-decoration: none;
    pointer-events: auto !important;
}

html body .dch-last-drop-link:hover,
html body .dch-last-drop-link:focus-visible {
    color: #071d3d !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

html body .dch-last-drop-plane,
html body .dch-last-drop-plane svg {
    box-sizing: border-box !important;
    inline-size: 14px !important;
    block-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    flex: 0 0 14px !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

html body .dch-last-drop-plane {
    display: inline-grid !important;
    place-items: center;
    color: var(--dch-interactive-accent, #0b5fb8) !important;
    vertical-align: -2px;
    animation: dchLastDropPlanePulseV4 1.65s ease-in-out infinite !important;
    transform-origin: center center;
}

html body .dch-last-drop-plane svg {
    display: block !important;
    fill: var(--dch-interactive-accent, #0b5fb8) !important;
}

html body .dch-last-drop-plane svg path {
    fill: var(--dch-interactive-accent, #0b5fb8) !important;
    stroke: none !important;
}

html body .dch-portrait-flip-card__front-info > .dch-card-trustpilot,
html body .dch-portrait-flip-card__front-info > .dch-card-since,
html body .dch-card-trustpilot-label {
    color: #071d3d !important;
}

html body .dch-card-trustpilot-score {
    color: #148768 !important;
}

html body .dch-card-capabilities {
    position: absolute;
    z-index: 2;
    display: block;
    color: #66788b !important;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(8px, 0.85vw, 11px) !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
    pointer-events: none;
}

html body .site-header .mobile-header-hub-button {
    border-radius: 14px !important;
}

@media (min-width: 981px) {
    html body .dch-portrait-flip-card__front-info {
        top: 37% !important;
        right: 16% !important;
        left: 27.5% !important;
        font-size: clamp(12px, 1.05vw, 16px) !important;
        line-height: 1.18 !important;
    }

    html body .dch-card-capabilities {
        right: 24% !important;
        bottom: 9% !important;
        left: 10% !important;
    }

    /* This direct child is the first rendered white Answers index surface. */
    html body.seo-answer-page.seo-answers-index .seo-answer-copy > .seo-quick-answer.seo-answer-copy-quick {
        margin-top: 34px !important;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    html body .dch-portrait-flip-card__front-info {
        top: 10% !important;
        right: 17% !important;
        left: 28% !important;
        gap: 3px !important;
        font-size: 11px !important;
        font-weight: 780 !important;
        line-height: 1.18 !important;
    }

    html body .dch-card-capabilities {
        right: 24% !important;
        bottom: 8% !important;
        left: 10% !important;
        color: #718093 !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.12 !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    html body .dch-portrait-flip-card__front-info {
        top: 11% !important;
        right: 17% !important;
        left: 28% !important;
        gap: 3px !important;
        font-size: clamp(10px, 1.45vw, 13px) !important;
        line-height: 1.18 !important;
    }

    html body .dch-card-capabilities {
        right: 24% !important;
        bottom: 8.5% !important;
        left: 10% !important;
        font-size: clamp(9px, 1vw, 10px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .dch-last-drop-plane {
        animation: none !important;
    }
}
/* REAL_DEVICE_RESPONSIVE_CARD_CORRECTION_V4_END */

/* CARD_COUNTRY_BACK_V6_FINAL_20260820_START
   Final card data layout. The raster card art stays untouched; this late block
   owns only the rendered information band and flip-back data hierarchy. */
html body .dch-portrait-flip-card__front-info {
    gap: 2px !important;
    font-family: Inter, Arial, sans-serif;
    font-weight: 760 !important;
}

html body .dch-portrait-flip-card__front-info > .dch-card-country {
    white-space: normal !important;
    overflow-wrap: anywhere;
    color: #071d3d !important;
}

html body .dch-card-country-name {
    color: #071d3d !important;
}

html body .dch-card-country-status {
    font-weight: 820;
}

html body .dch-card-country--green .dch-card-country-status {
    color: #148768 !important;
}

html body .dch-card-country--red .dch-card-country-status {
    color: #b34a52 !important;
}

html body .dch-card-country--neutral .dch-card-country-status {
    color: #526b82 !important;
}

html body .dch-card-capabilities {
    left: 3.5% !important;
    right: 24% !important;
    bottom: 7% !important;
    color: #61758a !important;
    font-weight: 680 !important;
    line-height: 1.18 !important;
}

/* Keep the language switcher in the accepted Open Drop Hub radius family. */
html body .site-header .language-switcher-v2,
html body .site-header .language-switcher-v2-trigger {
    border-radius: 14px !important;
}

/* Back facts are data, not demo placeholders. The hook is intentionally inert. */
html body .dch-portrait-flip-card__back-copy {
    gap: 2px !important;
    white-space: normal !important;
}

html body .dch-portrait-flip-card__back-copy strong {
    overflow: visible;
    text-overflow: clip;
    line-height: 1.08;
}

html body .dch-card-back-fact {
    display: block;
    overflow-wrap: anywhere;
    color: rgba(241, 249, 255, 0.96);
}

html body .dch-card-back-label {
    color: #b8dcff;
    font-weight: 820;
}

html body .dch-card-more-details {
    display: block;
    margin-top: 5px;
    color: #8fceff;
    font-weight: 800;
}

@media (min-width: 981px) {
    html body .dch-portrait-flip-card__front-info {
        top: 25% !important;
        left: 27.5% !important;
        right: 16% !important;
        font-size: clamp(13px, 1.12vw, 17px) !important;
        line-height: 1.16 !important;
    }

    html body .dch-card-capabilities {
        font-size: clamp(11px, 0.92vw, 13px) !important;
    }

    html body .dch-portrait-flip-card__back-copy {
        font-size: clamp(10px, 0.88vw, 13px);
        line-height: 1.18;
    }

    html body .dch-portrait-flip-card__back-copy strong {
        font-size: clamp(14px, 1.3vw, 20px);
    }
}

@media (max-width: 980px) {
    html body .dch-portrait-flip-card__front-info {
        top: 10% !important;
        left: 28% !important;
        right: 17% !important;
        font-size: 13px !important;
        line-height: 1.12 !important;
    }

    html body .dch-card-country--compact {
        font-size: 9.5px;
        line-height: 1.08;
    }

    html body .dch-card-has-compact-country .dch-portrait-flip-card__front-info {
        top: 5% !important;
    }

    html body .dch-card-capabilities {
        font-size: 10.5px !important;
        line-height: 1.13 !important;
    }

    html body .dch-portrait-flip-card__back {
        align-items: stretch;
        padding: 7% 5% !important;
    }

    html body .dch-portrait-flip-card__back-copy {
        padding-right: 31%;
        font-size: 9px;
        line-height: 1.1;
    }

    html body .dch-portrait-flip-card__back-copy strong {
        font-size: 13px;
    }

    html body .dch-card-more-details {
        margin-top: 4px;
        font-size: 9px;
    }

    html body .dch-portrait-flip-card__back-actions {
        position: absolute;
        right: 5%;
        bottom: 8%;
        gap: 4px;
    }

    html body .dch-portrait-flip-card__back-actions a {
        width: 62px;
        min-height: 25px;
        padding: 3px 5px;
        font-size: 8.5px;
        line-height: 1.08;
        text-align: center;
        white-space: normal;
    }

    html body .dch-portrait-flip-card__back-actions button {
        width: 22px;
        height: 22px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .dch-last-drop-plane {
        animation: none !important;
    }
}
/* CARD_COUNTRY_BACK_V6_FINAL_20260820_END */

/* CARD_V6_1_REAL_DEVICE_CORRECTION_20260821_START
   Narrow V6.1 corrections. Artwork remains the single source of truth for
   project logos and the front arrow, so this block only controls DOM overlays. */
html body .dch-portrait-flip-card__front-info {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* The language trigger owns the visible surface. Keep the menu free to overlay. */
html body .site-header .language-switcher-v2 {
    border-radius: 14px !important;
    overflow: visible !important;
}

html body .site-header .language-switcher-v2-trigger {
    border-radius: 14px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}

html body .site-header .language-switcher-v2-trigger::before,
html body .site-header .language-switcher-v2-trigger::after {
    border-radius: inherit !important;
}

@media (min-width: 981px) {
    html body .dch-portrait-flip-card__front-info {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 980px) {
    html body .dch-portrait-flip-card__front-info,
    html body .dch-card-has-compact-country .dch-portrait-flip-card__front-info {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* EN rail values above remain untouched. ES-MX receives only the extra safe width it needs. */
    html body .dch-card-capabilities--es-mx {
        right: 15.5% !important;
        font-size: clamp(9px, 2.5vw, 10.5px) !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    html body .dch-portrait-flip-card__back {
        align-items: start;
        padding: 5% !important;
    }

    html body .dch-portrait-flip-card__back-copy {
        align-content: start;
    }
}
/* CARD_V6_1_REAL_DEVICE_CORRECTION_20260821_END */

/* CARD_V6_2_REAL_DEVICE_POLISH_20260821_START
   V6.2 keeps card art and the accepted rail untouched. It owns only the
   front-row reading hierarchy and the true visible language-trigger radius. */
html body .dch-portrait-flip-card__front-info > .dch-card-row,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-static {
    display: grid !important;
    grid-template-columns: minmax(max-content, auto) minmax(0, 1fr);
    column-gap: clamp(10px, 1.2vw, 16px);
    align-items: center;
    width: 100%;
    min-width: 0;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link {
    grid-template-columns: minmax(max-content, auto) minmax(0, 1fr) 14px;
    color: var(--dch-interactive-accent, #0b5fb8) !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link:hover,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link:focus-visible {
    color: var(--dch-interactive-accent, #0b5fb8) !important;
    text-decoration-line: underline !important;
}

html body .dch-card-row-label,
html body .dch-card-row-value,
html body .dch-card-country-status {
    font-weight: 760 !important;
}

/* This tie beats the earlier three-class 6px visual-system rule. */
html body .site-header .language-switcher-v2 .language-switcher-v2-trigger,
html body .site-header .language-switcher-v2 .language-switcher-v2-trigger[aria-expanded="true"] {
    border-radius: 14px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}
/* CARD_V6_2_REAL_DEVICE_POLISH_20260821_END */

/* CARD_V6_3_COMPACT_LAST_DROP_20260821_START
   Keep Last Drop as a single compact action group without changing other rows. */
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-static {
    display: inline-flex !important;
    align-items: center;
    width: fit-content !important;
    min-width: 0;
    max-width: 100%;
    column-gap: 0;
    white-space: nowrap;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-label,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-static .dch-last-drop-label {
    margin-inline-end: 10px;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-value {
    margin-inline-end: 6px;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-plane {
    flex: 0 0 14px;
    inline-size: 14px;
    block-size: 14px;
}
/* CARD_V6_3_COMPACT_LAST_DROP_20260821_END */

/* CARD_V6_4_LAST_DROP_LINK_TRUSTPILOT_20260821_START
   Draw one text-only link underline and reserve green for availability status. */
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link {
    position: relative;
    text-decoration-line: none !important;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link:hover,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link:focus-visible {
    text-decoration-line: none !important;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 1px;
    inline-size: calc(100% - 20px);
    block-size: 1px;
    background-color: currentColor;
    pointer-events: none;
}

html body .dch-portrait-flip-card__front-info > .dch-card-trustpilot .dch-card-trustpilot-score {
    color: #071d3d !important;
}
/* CARD_V6_4_LAST_DROP_LINK_TRUSTPILOT_20260821_END */

/* CARD_V6_5_TRUE_INLINE_LAST_DROP_20260821_START
   Last Drop reads as normal inline text; only the text wrapper owns its underline. */
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-static {
    display: block !important;
    justify-self: start;
    width: fit-content !important;
    min-width: 0;
    max-width: 100%;
    column-gap: normal;
    white-space: normal;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-label,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-static .dch-last-drop-label,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-value,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-static .dch-last-drop-value {
    margin-inline-end: 0 !important;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link::after {
    content: none !important;
    display: none !important;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-text,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-text .dch-last-drop-label,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-text .dch-last-drop-value {
    color: var(--dch-interactive-accent, #0b5fb8) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    opacity: 1 !important;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-text {
    display: inline;
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-plane,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-plane svg,
html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-plane svg path {
    color: var(--dch-interactive-accent, #0b5fb8) !important;
    fill: var(--dch-interactive-accent, #0b5fb8) !important;
    opacity: 1 !important;
}
/* CARD_V6_5_TRUE_INLINE_LAST_DROP_20260821_END */

/* BACKSIDE_ASSET_INTEGRATION_V1_20260822_START
   The approved raster owns the complete temporary backside visual. */
html body .dch-portrait-flip-card__back {
    display: block;
    padding: 0 !important;
    background-color: #dce7f7 !important;
    background-image: url("/static/images/cards/backside/dropcodeshub_backside_card_v10.webp") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: none !important;
    cursor: pointer;
}

/* Temporary facts and controls would duplicate the approved baked artwork. */
html body .dch-portrait-flip-card__back-copy,
html body .dch-portrait-flip-card__back-actions {
    display: none !important;
}
/* BACKSIDE_ASSET_INTEGRATION_V1_20260822_END */

/* BACKSIDE_EXPANSION_MECHANICS_V2_20260822_START
   The back visual is split at the native V10 y=432 seam: upper body, V4
   stretch material, then the original y=432-472 rounded cap. */
html body .dch-portrait-flip-card {
    align-self: start;
    transition: aspect-ratio 520ms cubic-bezier(0.22, 0.72, 0.24, 1);
}

html body .dch-portrait-flip-card.is-expanded {
    aspect-ratio: 1200 / 990;
}

html body .dch-portrait-flip-card__front {
    pointer-events: auto;
}

html body .dch-portrait-flip-card__back {
    display: block;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    pointer-events: none;
}

html body .dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__front {
    pointer-events: none !important;
}

html body .dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__back {
    pointer-events: auto;
}

html body .dch-portrait-flip-card__back-upper,
html body .dch-portrait-flip-card__back-cap,
html body .dch-card-back-expansion {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

html body .dch-portrait-flip-card__back-upper::before,
html body .dch-portrait-flip-card__back-cap::before {
    position: absolute;
    inset-inline: 0;
    display: block;
    content: "";
    width: 100%;
    background-image: url("/static/images/cards/backside/dropcodeshub_backside_card_v10.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

html body .dch-portrait-flip-card__back-upper::before {
    top: 0;
    height: 109.4908%;
}

html body .dch-portrait-flip-card__back-cap::before {
    bottom: 0;
    height: 1153.6586%;
}

html body .dch-card-back-expansion {
    background-image: url("/static/images/cards/backside/dropcodeshub_backside_expandable_background_v4.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 0;
    pointer-events: none;
}

html body .dch-portrait-flip-card.is-expanded .dch-card-back-expansion {
    pointer-events: auto;
}

html body .dch-card-back-cta,
html body .dch-card-back-expand,
html body .dch-card-back-collapse {
    position: absolute;
    z-index: 1;
}

html body .dch-card-back-cta {
    top: 35.65%;
    right: 4.2%;
    width: 31.5%;
    height: 37.3%;
    border-radius: 13px;
    cursor: pointer;
}

html body .dch-card-back-expand,
html body .dch-card-back-collapse {
    left: 5%;
    bottom: 8%;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(8, 104, 205, 0.5);
    border-radius: 12px;
    color: #083e7b;
    background: rgba(247, 251, 255, 0.92);
    box-shadow: 0 3px 10px rgba(31, 82, 141, 0.16);
    font: 760 clamp(10px, 1.05vw, 13px)/1.1 Inter, Arial, sans-serif;
    letter-spacing: 0;
    cursor: pointer;
}

html body .dch-portrait-flip-card.is-expanded .dch-card-back-expand {
    visibility: hidden;
    pointer-events: none;
}

html body .dch-card-back-collapse {
    opacity: 0;
}

html body .dch-portrait-flip-card.is-expanded .dch-card-back-collapse {
    opacity: 1;
}

html body .dch-card-back-cta:focus-visible,
html body .dch-card-back-expand:focus-visible,
html body .dch-card-back-collapse:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #087fe2;
}

@media (prefers-reduced-motion: reduce) {
    html body .dch-portrait-flip-card {
        transition-duration: 1ms !important;
    }
}
/* BACKSIDE_EXPANSION_MECHANICS_V2_20260822_END */

/* BACKSIDE_EXPANSION_OUTER_FLOW_V2_2_20260822_START
   The V2 expanded aspect ratio lost to the more-specific accepted card base
   selector, leaving the grid item at collapsed height. These selectors own
   the real grid-item height, so expansion reflows the document rather than
   compressing the three visual rows inside the original card box. */
html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card {
    --dch-backside-collapsed-aspect: 1200 / 330;
    align-self: start !important;
    height: auto !important;
    min-height: 0;
    overflow: visible;
    aspect-ratio: var(--dch-backside-collapsed-aspect) !important;
}

html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card.is-expanded,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card.is-expanded {
    /* 330 + (2 x 330): current rendered H grows to exactly 3 x H. */
    aspect-ratio: 1200 / 990 !important;
}

html body .dch-portrait-flip-card__back-visual {
    /* Its parent is now physically taller, so these native ratios resolve to
       stable V10 upper/cap = H and V4 expansion = 2H without compression. */
    min-height: 0;
}

html body .dch-card-back-cta {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-inline: 8% 30%;
    color: #ffffff;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(10px, 1.05vw, 15px);
    font-weight: 760;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

html body .dch-card-back-cta__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

html body .dch-card-front-logo-link {
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 3%;
    width: 23%;
    height: 48%;
    border-radius: clamp(8px, 1.15vw, 18px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html body .dch-card-front-logo-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #087fe2;
}
/* BACKSIDE_EXPANSION_OUTER_FLOW_V2_2_20260822_END */

/* BACKSIDE_EXPANSION_V2_3_INDEPENDENT_COLUMNS_CTA_20260822_START
   Two-column views receive two real vertical flows. The same card nodes move
   between them; portrait restores source order before the regular one-column
   grid resumes. */
@media (min-width: 981px), (max-width: 980px) and (orientation: landscape) {
    html body .card-image-grid.dch-independent-columns-active,
    html body .seo-card-grid.dch-independent-columns-active {
        display: block !important;
    }

    html body .dch-independent-columns-active > .dch-independent-card-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        width: 100%;
        min-width: 0;
    }

    html body .dch-independent-card-column {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    html body .dch-independent-card-column > .dch-project-card-shell {
        display: block !important;
        min-width: 0;
    }

    html body .dch-independent-card-column > .dch-project-card-shell > a.image-card.dch-project-card-standard {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card {
        position: relative;
        display: block !important;
        visibility: visible !important;
        width: 100%;
        min-width: 0;
        overflow: visible;
        pointer-events: auto !important;
        contain: layout;
        isolation: isolate;
    }
}

html body .dch-card-back-cta {
    z-index: 4 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: clamp(10px, 1.1vw, 15px) !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

html body .dch-card-back-cta__label {
    position: relative;
    z-index: 1;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    color: #ffffff !important;
    font: inherit !important;
    line-height: inherit !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}

/* BACKSIDE_EXPANSION_V2_3_INDEPENDENT_COLUMNS_CTA_20260822_END */

/* BACKSIDE_EXPANSION_V2_8_RUNTIME_PROOF_AND_REGRESSION_CLEANUP_20260823_START
   Keep the native V10/V4 geometry while isolating semantic hit areas from
   baked CTA artwork. No raster crop, overlap, or latency workaround remains. */
html body .dch-portrait-flip-card {
    --dch-card-info-rail-inline-start: 3.5%;
    --dch-card-info-rail-block-end: 7%;
    --dch-card-back-cta-inline-start: 64.22%;
    --dch-card-back-cta-block-start: 35.65%;
    --dch-card-back-cta-inline-size: 31.47%;
    --dch-card-back-cta-block-size: 37.3%;
    --dch-card-back-cta-visual-inline-start: 72.3%;
    --dch-card-back-cta-visual-block-center: 54.3%;
}

html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured],
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured],
html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured] {
    height: var(--dch-card-base-height) !important;
    aspect-ratio: auto !important;
    transition: height 520ms cubic-bezier(0.22, 0.72, 0.24, 1) !important;
    will-change: auto;
}

html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured].is-expanded,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured].is-expanded,
html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured].is-expanded {
    height: calc(var(--dch-card-base-height) * 3) !important;
    aspect-ratio: auto !important;
}

html body .dch-portrait-flip-card__back {
    overflow: hidden !important;
    background: rgb(225 234 250) !important;
    cursor: default !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

html body .dch-portrait-flip-card__front {
    cursor: default !important;
}

html body .dch-portrait-flip-card__inner {
    transition-property: transform;
    will-change: transform;
}

html body .dch-portrait-flip-card__back-visual {
    position: relative;
    display: grid;
    min-height: 0;
    height: 100%;
    grid-template-rows: var(--dch-card-upper-height) minmax(0, 1fr) var(--dch-card-cap-height) !important;
    background: rgb(225 234 250) !important;
    isolation: isolate;
    transition: none !important;
}

html body .dch-portrait-flip-card__back-visual::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    content: "";
    background: rgb(225 234 250);
    pointer-events: none;
}

html body .dch-portrait-flip-card__back-visual > * {
    z-index: 1;
}

html body .dch-portrait-flip-card__back-upper,
html body .dch-card-back-expansion,
html body .dch-portrait-flip-card__back-cap {
    background-color: rgb(225 234 250);
}

html body .dch-portrait-flip-card__back-upper {
    isolation: isolate;
}

html body .dch-portrait-flip-card__back-upper::before,
html body .dch-portrait-flip-card__back-cap::before {
    z-index: 0;
}

html body .dch-card-back-expansion {
    min-height: 0;
    opacity: 1 !important;
    z-index: 1;
    transition: none !important;
}

html body .dch-card-back-cta {
    top: var(--dch-card-back-cta-block-start) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--dch-card-back-cta-inline-start) !important;
    box-sizing: border-box;
    width: var(--dch-card-back-cta-inline-size) !important;
    height: var(--dch-card-back-cta-block-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: clamp(11px, 1.35vw, 17px) !important;
}

html body .dch-card-back-cta-visual-label {
    position: absolute;
    z-index: 3;
    top: var(--dch-card-back-cta-visual-block-center);
    left: var(--dch-card-back-cta-visual-inline-start);
    display: block;
    margin: 0;
    color: #ffffff !important;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(11px, 1.35vw, 17px) !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0;
    text-align: left;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-50%);
}

html body .dch-card-capabilities,
html body .dch-card-back-expand {
    left: var(--dch-card-info-rail-inline-start) !important;
    bottom: var(--dch-card-info-rail-block-end) !important;
}

html body .dch-card-capabilities {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
}

html body .dch-card-back-expand,
html body .dch-card-back-collapse {
    display: inline-flex !important;
    min-height: 0;
    align-items: center;
    gap: 0.3em;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--dch-interactive-accent, #0b5fb8) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 760 clamp(10.5px, 1.05vw, 13px)/1.18 Inter, Arial, sans-serif !important;
    line-height: 1.18 !important;
    white-space: nowrap;
}

html body .dch-portrait-flip-card__back-visual > .dch-card-back-expand {
    z-index: 3 !important;
}

html body .dch-card-back-collapse {
    left: var(--dch-card-info-rail-inline-start) !important;
    bottom: calc(var(--dch-card-cap-height) + var(--dch-card-info-rail-block-end)) !important;
}

html body .dch-card-control-arrow {
    display: inline-flex;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

html body .dch-card-control-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

html body .dch-card-front-flip-affordance {
    position: absolute;
    z-index: 3;
    top: 32.75%;
    right: 4.25%;
    width: 8.6%;
    height: 34.5%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html body .dch-card-front-flip-affordance:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #087fe2;
}

@media (prefers-reduced-motion: reduce) {
    html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured],
    html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured],
    html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured] {
        transition-duration: 1ms !important;
    }
}
/* BACKSIDE_EXPANSION_V2_8_RUNTIME_PROOF_AND_REGRESSION_CLEANUP_20260823_END */

/* CARD_VISUAL_CLEANUP_SCREENSHOT_PREP_V2_10_20260823_START
   Screenshot preparation only. The baked raster perimeter is intentionally not
   concealed or cropped here; its correction needs separately authorized artwork. */
html body .dch-portrait-flip-card {
    --dch-card-usp-font-size: clamp(11px, calc(5vw - 5px), 13px);
    --dch-card-usp-line-height: 1.12;
    --dch-last-drop-underline-offset: 2px;
    --dch-last-drop-underline-thickness: 1px;
    --dch-last-drop-visual-clearance: calc(
        var(--dch-last-drop-underline-offset) + var(--dch-last-drop-underline-thickness)
    );
}

html body .dch-card-capabilities,
html body .dch-card-capabilities--es-mx {
    font-size: var(--dch-card-usp-font-size) !important;
    line-height: var(--dch-card-usp-line-height) !important;
}

@media (min-width: 981px) {
    html body .dch-portrait-flip-card {
        --dch-card-usp-font-size: clamp(13px, 1.12vw, 17px);
        --dch-card-usp-line-height: 1.16;
    }
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link {
    inset-block-start: calc(0px - var(--dch-last-drop-visual-clearance));
}

html body .dch-portrait-flip-card__front-info > .dch-last-drop-link .dch-last-drop-text {
    text-decoration-thickness: var(--dch-last-drop-underline-thickness);
    text-underline-offset: var(--dch-last-drop-underline-offset);
}

/* TEMP screenshot-prep: visual CTA label hidden. */
html body .dch-card-back-cta-visual-label {
    display: none !important;
}

/* TEMP screenshot-prep: Less info visual control hidden. */
html body .dch-card-back-collapse {
    visibility: hidden !important;
    pointer-events: none !important;
}
/* CARD_VISUAL_CLEANUP_SCREENSHOT_PREP_V2_10_20260823_END */

/* BACKSIDE_NO_EXPAND_TEST_V2_11_20260823_START
   The current product has two states only: front and the fixed-height regular
   back. The approved clean raster remains untouched and owns the card frame,
   background and baked CTA arrow. */
html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card,
html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card {
    --dch-card-back-cta-inline-start: 64.22%;
    --dch-card-back-cta-inline-size: 31.47%;
    --dch-card-back-cta-block-start: 35.65%;
    --dch-card-back-cta-block-size: 37.3%;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1881 / 473 !important;
    overflow: visible !important;
    transition: none !important;
}

html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured],
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured],
html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card[data-dch-flow-measured],
html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card.is-expanded,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card.is-expanded,
html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card.is-expanded {
    height: auto !important;
    aspect-ratio: 1881 / 473 !important;
}

html body .dch-portrait-flip-card__back {
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    color: #071d3d !important;
    background-color: #dfeafb !important;
    background-image: url("/static/images/cards/mobile-portrait/dropcodeshub_backside_card_prototype_v10_outer_perimeter_cleaned.webp?v=cleaned-cards-20260823-1") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    cursor: default !important;
    transform: rotateX(180deg);
}

html body .dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__front {
    pointer-events: none !important;
}

html body .dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__back {
    pointer-events: auto !important;
}

html body .dch-portrait-flip-card__back-visual {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background: transparent !important;
    isolation: isolate;
}

html body .dch-portrait-flip-card__back-visual::before {
    content: none !important;
    display: none !important;
}

html body .dch-portrait-flip-card__back-copy {
    position: absolute !important;
    z-index: 2 !important;
    top: 15% !important;
    right: 36.5% !important;
    left: 3.7% !important;
    display: grid !important;
    min-width: 0 !important;
    gap: clamp(1px, 0.32vw, 4px) !important;
    padding: 0 !important;
    color: #071d3d !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: clamp(10px, 1.02vw, 14px) !important;
    font-weight: 680 !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    pointer-events: none !important;
}

html body .dch-portrait-flip-card__back-copy strong {
    display: block !important;
    overflow: visible !important;
    color: #071d3d !important;
    font-size: clamp(13px, 1.45vw, 20px) !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    text-overflow: clip !important;
}

html body .dch-card-back-fact {
    display: block !important;
    overflow-wrap: anywhere;
    color: #264b74 !important;
}

html body .dch-card-back-product {
    max-inline-size: 100%;
}

html body .dch-card-back-more {
    position: absolute !important;
    z-index: 2 !important;
    bottom: 9% !important;
    left: 3.7% !important;
    display: block !important;
    max-width: 54% !important;
    color: #0b5fb8 !important;
    font: 760 clamp(9px, 0.95vw, 13px)/1.12 Inter, Arial, sans-serif !important;
    letter-spacing: 0 !important;
    pointer-events: none !important;
    cursor: default !important;
}

html body .dch-card-back-cta {
    position: absolute !important;
    z-index: 3 !important;
    top: var(--dch-card-back-cta-block-start) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--dch-card-back-cta-inline-start) !important;
    display: block !important;
    box-sizing: border-box !important;
    width: var(--dch-card-back-cta-inline-size) !important;
    height: var(--dch-card-back-cta-block-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

html body .dch-card-back-cta__label {
    position: absolute !important;
    inset: 0 30% 0 0 !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box;
    color: #ffffff !important;
    font: 760 clamp(9px, 1.02vw, 15px)/1 Inter, Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
    white-space: nowrap !important;
    pointer-events: none !important;
}

html body .dch-card-back-cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #087fe2;
}

/* Defensive compatibility: stale expansion-only nodes cannot create a third state. */
html body .dch-card-back-expand,
html body .dch-card-back-collapse,
html body .dch-card-back-expansion,
html body .dch-portrait-flip-card__back-cap,
html body .dch-portrait-flip-card__back-upper {
    display: none !important;
}

@media (max-width: 980px) {
    html body .dch-portrait-flip-card__back-copy {
        top: 13% !important;
        right: 36.5% !important;
        left: 3.7% !important;
        gap: 1px !important;
        font-size: clamp(8.4px, 2.35vw, 10px) !important;
        line-height: 1.13 !important;
    }

    html body .dch-portrait-flip-card__back-copy strong {
        font-size: clamp(11px, 3.1vw, 14px) !important;
    }

    html body .dch-card-back-more {
        bottom: 8.5% !important;
        font-size: clamp(8px, 2.15vw, 10px) !important;
    }

    html body .dch-card-back-cta__label {
        font-size: clamp(8.4px, 2.2vw, 10px) !important;
    }
}
/* BACKSIDE_NO_EXPAND_TEST_V2_11_20260823_END */

/* BACKSIDE_RESPONSIVE_POLISH_FLIP_BLEED_V3_12_20260823_START
   Keep the approved front and back rasters intact. This pass only gives the
   fixed-height backside its final fact/helper hierarchy and keeps all HTML
   overlays inside their corresponding 3D face at the flip midpoint. */
html body .dch-portrait-flip-card {
    --dch-card-back-fact-font-size: clamp(13px, 1.12vw, 17px);
    --dch-card-back-fact-line-height: 1.06;
}

/* A face and its HTML overlay must be one composited 3D unit. Without this,
   some WebKit/Chromium paths can paint text while the parent face is edge-on. */
html body .dch-portrait-flip-card__inner {
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    will-change: transform;
}

html body .dch-portrait-flip-card__face {
    isolation: isolate;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity;
}

html body .dch-portrait-flip-card__front {
    transform: rotateX(0deg) translateZ(0.01px) !important;
}

html body .dch-portrait-flip-card__back {
    transform: rotateX(180deg) translateZ(0.01px) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s linear 260ms, visibility 0s linear 260ms;
}

html body .dch-portrait-flip-card__front > *,
html body .dch-portrait-flip-card__back > *,
html body .dch-portrait-flip-card__front-info,
html body .dch-card-capabilities,
html body .dch-portrait-flip-card__back-visual,
html body .dch-card-back-helper,
html body .dch-card-back-cta {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

html body .dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__front {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s linear 260ms, visibility 0s linear 260ms;
}

html body .dch-portrait-flip-card.is-flipped .dch-portrait-flip-card__back {
    opacity: 1;
    visibility: visible;
    transition: none;
}

html body .dch-portrait-flip-card[data-dch-card-state="front"] .dch-portrait-flip-card__back,
html body .dch-portrait-flip-card[data-dch-card-state="back"] .dch-portrait-flip-card__front {
    pointer-events: none !important;
}

html body .dch-portrait-flip-card__back-copy {
    top: 14% !important;
    right: 36.5% !important;
    left: 3.7% !important;
    gap: 1px !important;
    font-size: var(--dch-card-back-fact-font-size) !important;
    font-weight: 760 !important;
    line-height: var(--dch-card-back-fact-line-height) !important;
}

html body .dch-portrait-flip-card__back-copy strong {
    margin-block-end: clamp(2px, 0.34vw, 5px) !important;
    font-size: clamp(13px, 1.45vw, 20px) !important;
    line-height: 1.06 !important;
}

html body .dch-card-back-fact {
    color: #264b74 !important;
    font: inherit !important;
    line-height: inherit !important;
    white-space: nowrap;
}

html body .dch-card-back-helper {
    position: absolute !important;
    z-index: 2 !important;
    right: 36.5% !important;
    bottom: 9% !important;
    left: 3.7% !important;
    display: flex !important;
    min-width: 0 !important;
    align-items: end !important;
    gap: clamp(5px, 0.55vw, 9px) !important;
    pointer-events: none !important;
}

html body .dch-card-back-more {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    color: #0b5fb8 !important;
    font: 760 clamp(8px, 0.7vw, 10px)/1.1 Inter, Arial, sans-serif !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    cursor: default !important;
}

html body .dch-card-back-rail {
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    color: #66788b !important;
    font: 660 clamp(7.5px, 0.6vw, 9px)/1.1 Inter, Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* The Spanish rail is too long for the regular desktop helper line at the
   fixed card width. Keep it as a full readable rail below the CTA instead of
   allowing it to run under the CTA or reducing it to an unreadable size. */
html body .dch-card-back-helper--es-mx {
    right: 3.7% !important;
    bottom: 5% !important;
    left: 3.7% !important;
    display: block !important;
    height: 22% !important;
}

html body .dch-card-back-helper--es-mx .dch-card-back-more {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

html body .dch-card-back-helper--es-mx .dch-card-back-rail {
    position: absolute !important;
    right: 0 !important;
    bottom: 51% !important;
    left: 0 !important;
    text-align: right !important;
}

/* The dark-blue CTA is painted by the frozen raster. The label keeps its old
   left start, grows toward the baked arrow, and rises one visual pixel. */
html body .dch-card-back-cta__label {
    inset: 0 30% 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding-inline-start: 18.5% !important;
    transform: translateY(-1px) !important;
    font: 760 clamp(10px, 1.1vw, 16px)/1 Inter, Arial, sans-serif !important;
    text-align: left !important;
    white-space: nowrap !important;
}

html[lang="es-MX"] body .dch-card-back-cta__label {
    padding-inline-start: 12.5% !important;
}

@media (max-width: 980px) {
    html body .dch-portrait-flip-card {
        --dch-card-back-fact-font-size: 13px;
        --dch-card-back-fact-line-height: 1.06;
    }

    html body .dch-portrait-flip-card__back-copy {
        top: 7% !important;
        right: 36.5% !important;
        left: 3.7% !important;
        gap: 0 !important;
    }

    html body .dch-portrait-flip-card__back-copy strong {
        margin-block-end: 3px !important;
        font-size: 14px !important;
    }

    /* On the low mobile card, the full locale rail cannot share the same
       horizontal measure as helper copy. It moves to the clear strip below
       the baked CTA, while View more info stays anchored bottom-left. */
    html body .dch-card-back-helper {
        right: 3.7% !important;
        bottom: 5% !important;
        left: 3.7% !important;
        display: block !important;
        height: 22% !important;
    }

    html body .dch-card-back-more {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        font-size: clamp(8px, 2.15vw, 10px) !important;
        text-align: left !important;
    }

    html body .dch-card-back-rail {
        position: absolute !important;
        right: 0 !important;
        bottom: 51% !important;
        left: 0 !important;
        font-size: clamp(7.2px, 2vw, 8.5px) !important;
        text-align: left !important;
    }

    html body .dch-card-back-cta__label {
        padding-inline-start: 18.5% !important;
        font-size: clamp(9.2px, 2.42vw, 11px) !important;
        transform: translateY(-1px) !important;
    }

    html[lang="es-MX"] body .dch-card-back-cta__label {
        padding-inline-start: 12.5% !important;
    }
}
/* BACKSIDE_RESPONSIVE_POLISH_FLIP_BLEED_V3_12_20260823_END */

/* BACKSIDE_RESPONSIVE_MICRO_POLISH_V2_20260823_START
   The lower helper band is shared by its visual placeholder and capability
   rail in every responsive family. The frozen CTA raster still owns its art. */
html body .dch-card-back-more__desktop {
    display: inline !important;
}

html body .dch-card-back-more__mobile {
    display: none !important;
}

html body .dch-card-back-helper,
html body .dch-card-back-helper--es-mx {
    right: 3.7% !important;
    bottom: 8.5% !important;
    left: 3.7% !important;
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: baseline !important;
    gap: clamp(7px, 0.6vw, 10px) !important;
}

html body .dch-card-back-helper--es-mx .dch-card-back-more,
html body .dch-card-back-helper--es-mx .dch-card-back-rail {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

html body .dch-card-back-more {
    flex: 0 0 auto !important;
    font-size: clamp(8.2px, 0.7vw, 10.2px) !important;
}

html body .dch-card-back-rail {
    position: static !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    font-size: clamp(8.1px, 0.68vw, 10px) !important;
    line-height: 1.1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* The CTA hit region follows the frozen dark block exactly: 35.65% +
   37.3%, whose geometric midpoint is 54.3% of the card height. */
html body .dch-card-back-cta__label {
    top: 50% !important;
    right: 30% !important;
    bottom: auto !important;
    left: 0 !important;
    height: 1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 980px) and (orientation: landscape) {
    html body .dch-card-back-helper,
    html body .dch-card-back-helper--es-mx {
        bottom: 8% !important;
        align-items: baseline !important;
        gap: clamp(7px, 0.95vw, 9px) !important;
    }

    html body .dch-card-back-more__desktop {
        display: none !important;
    }

    html body .dch-card-back-more__mobile {
        display: inline !important;
    }

    html body .dch-card-back-more {
        font-size: clamp(8.6px, 1.08vw, 9.8px) !important;
    }

    html body .dch-card-back-rail {
        font-size: clamp(8.4px, 1.02vw, 9.6px) !important;
    }

    html[lang="es-MX"] body .dch-card-back-rail-extra {
        display: none !important;
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    html body .dch-card-back-helper,
    html body .dch-card-back-helper--es-mx {
        bottom: 7% !important;
        align-items: baseline !important;
        gap: 5px !important;
    }

    html body .dch-card-back-more__desktop {
        display: none !important;
    }

    html body .dch-card-back-more__mobile {
        display: inline !important;
    }

    html body .dch-card-back-more {
        font-size: clamp(7.6px, 2vw, 8.4px) !important;
    }

    html body .dch-card-back-rail {
        font-size: clamp(7.35px, 2.02vw, 8.25px) !important;
    }

    html[lang="es-MX"] body .dch-card-back-rail {
        font-size: clamp(6.9px, 1.84vw, 7.7px) !important;
    }
}
/* BACKSIDE_RESPONSIVE_MICRO_POLISH_V2_20260823_END */

/* FINAL_RESPONSIVE_CARD_POLISH_V3_20260823_START
   This final pass keeps the accepted cards and flip intact. It only gives each
   responsive family its own measured text-safe CTA and breathing-room rules. */
html body .dch-card-back-cta__label,
html[lang="es-MX"] body .dch-card-back-cta__label {
    top: 50% !important;
    right: 30% !important;
    bottom: auto !important;
    left: 0 !important;
    display: grid !important;
    height: 1.1em !important;
    place-items: center !important;
    box-sizing: border-box !important;
    padding-inline-start: 0 !important;
    text-align: center !important;
    transform: translateY(-50%) !important;
}

/* The CTA hit area is fixed by the approved raster at 35.65% from the card
   top and 37.3% high. Its text-safe width ends before the 30% arrow zone. */
@media (min-width: 981px) {
    html body .dch-card-back-cta__label {
        font-size: clamp(11.2px, 1.22vw, 18px) !important;
    }

    html body .dch-card-back-helper,
    html body .dch-card-back-helper--es-mx {
        bottom: 10% !important;
    }

    html body .dch-card-back-more {
        font-size: clamp(9.5px, 0.82vw, 12px) !important;
    }

    html body .dch-card-back-rail {
        font-size: clamp(9.3px, 0.79vw, 11.6px) !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    /* Lift the compressed three-line front stack without moving the grey USP. */
    html body .dch-portrait-flip-card__front-info,
    html body .dch-card-has-compact-country .dch-portrait-flip-card__front-info {
        top: calc(50% - 7%) !important;
    }

    /* The existing landscape scale is retained; only its safe text region is
       mathematically centered before the baked arrow. */
    html body .dch-card-back-cta__label {
        font-size: clamp(9.2px, 2.42vw, 11px) !important;
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    /* Portrait needs a smaller lift than landscape to retain the accepted
       balance while opening separation above the front grey USP. */
    html body .dch-portrait-flip-card__front-info,
    html body .dch-card-has-compact-country .dch-portrait-flip-card__front-info {
        top: calc(50% - 3.5%) !important;
    }

    html body .dch-card-back-cta__label {
        font-size: clamp(10.5px, 2.8vw, 12px) !important;
    }

    html body .dch-card-back-more {
        font-size: clamp(8.25px, 2.15vw, 9.1px) !important;
    }

    html body .dch-card-back-rail {
        font-size: clamp(7.8px, 2.15vw, 8.85px) !important;
    }

    html[lang="es-MX"] body .dch-card-back-rail {
        font-size: clamp(7.25px, 1.94vw, 8.05px) !important;
    }
}
/* FINAL_RESPONSIVE_CARD_POLISH_V3_20260823_END */

/* FINAL_CTA_LABEL_CENTERING_ROOT_CAUSE_20260823_START
   Frozen-raster measurements (1881 x 473): dark CTA = 1208,155..1800,315;
   the baked arrow begins at x=1702. The label therefore uses the real
   pre-arrow interval and one shared optical baseline correction. */
html body .feature-grid.card-image-grid > .dch-project-card-shell > article.dch-portrait-flip-card,
html body.seo-answer-page .seo-card-grid > .dch-project-card-shell > article.dch-portrait-flip-card,
html body .dch-independent-card-column > .dch-project-card-shell > article.dch-portrait-flip-card {
    --dch-card-back-cta-inline-start: 64.2212%;
    --dch-card-back-cta-inline-size: 31.4726%;
    --dch-card-back-cta-block-start: 32.7696%;
    --dch-card-back-cta-block-size: 33.8266%;
    --dch-card-back-cta-arrow-reserve: 16.5541%;
}

html body .dch-card-back-cta__label,
html[lang="es-MX"] body .dch-card-back-cta__label {
    inset: 0 var(--dch-card-back-cta-arrow-reserve) 0 0 !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: translateY(-0.09em) !important;
}
/* FINAL_CTA_LABEL_CENTERING_ROOT_CAUSE_20260823_END */