/* ============================================================
   media.css — responsive media queries
   Device bands (non-overlapping):
     <= 575px ............ mobile
     576px - 767px ....... large mobile
     768px - 991px ....... tablet
     992px - 1199px ...... desktop
     >= 1200px ........... large desktop
   NOTE: bands are isolated, so rules that apply to a *range*
   of devices (e.g. collapsed navbar on mobile + tablet) are
   repeated in each band they apply to.
   ============================================================ */

/* ============================================================
   <= 575px — MOBILE
   ============================================================ */
@media (max-width: 575px) {
    .we-resolve-padding { padding-top: 24px; }
    .platform { padding: 30px 0px; }

    /* SOP legal tables: collapse each row into a stacked card so 2-column
       data stays readable without horizontal scrolling on phones. */
    .legal-table-wrap {
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    .legal-table {
        min-width: 0;
        width: 100%;
    }
    .legal-table thead {
        display: none;
    }
    .legal-table tbody tr,
    .legal-table tbody td {
        display: block;
        width: 100%;
    }
    .legal-table tbody tr {
        border: 2px solid #222940;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 1rem;
    }
    .legal-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .legal-table tbody td,
    .legal-table tbody tr:nth-child(odd) td,
    .legal-table tbody tr:nth-child(even) td {
        background: #100D24;
        border-bottom: 1px solid #222940;
        padding: .75rem 1rem;
        white-space: normal;
    }
    .legal-table tbody td:last-child {
        border-bottom: none;
    }
    /* show the column heading above each value */
    .legal-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .3rem;
        color: var(--color-accent);
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .legal-table tbody td:first-child {
        font-size: 1rem;
    }

    /* DNS hero dome: full-width on small phones so it always renders whole */
    .bg-gradiant-cta-glow .cta-glow__bg--dns { max-width: 100%; }

    /* DNS hero search: stack the field + button, both full-width for easy taps */
    .dns-search { flex-direction: column; margin-top: 1.75rem; }
    .dns-search__field, .dns-search__btn { width: 100%; }
    .dns-search__btn { justify-content: center; }

    /* FAQ page: tighten spacing on mobile */
    .faq-head { margin-bottom: 32px; }
    .faq-accordion .accordion-button { padding: 18px 18px; font-size: 15px; }
    .faq-accordion .accordion-body { padding: 0 18px 20px; }

    /* review carousel: show 1 slide at a time on mobile */
    .owl-slide { width: calc(100vw - 48px); }

    /* "already being targeted" CTA: tighten for mobile */
    .target-cta__box { padding: 2.4rem 1.1rem 2rem; border-radius: 14px; }
    .target-cta__owl { width: 70px; margin-bottom: 1.1rem; }
    .target-cta .hero-title {
        margin-top: 35%;
    }
    .target-cta__box::after
    {
        box-shadow: inset 0 0 20px 0 rgba(0, 119, 255, .5);
    }
    .enforce-card
    {
        padding: 1rem 0.5rem;
    }

    .hero-title { font-size: 18px; }
    .hero-sub { font-size: 14px; }

    .bg-grid svg, .bg-grid img {
        width: 100%;
        height: 75%;
    }
    .trust-badges
    {
        gap: 0.3rem !important;
    }
    .risk-card
    {
        padding: 15px;
    }
    .trust-badges img { width: 55px; }

    .hero {
        position: unset;
        min-height: auto;
        display: block;
    }
    .command-center-intro { position: unset; }
    .command-center-visual .hide-img { display: none; }
    .infastructure-monitor img {
        position: unset;
        width: 100%;
        margin: 15px 0px;
    }
    .resolve-topright-glow { top: -50px; width: 90%; }
    .resolve-card { padding: 12px 15px; }

    /* mobile nav panel + stacked layout */
    .site-header .navbar-collapse {
        background: var(--color-nav-panel);
        border: 1px solid var(--color-border-soft);
        border-radius: 14px;
        padding: 1rem 1.2rem;
        margin-top: .75rem;
    }
    .header-actions { margin-top: .6rem; }
    .platform-nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-left: none;
        border-bottom: 2px solid var(--color-border-soft);
        padding-bottom: 12px;
        margin-bottom: 26px;
        scrollbar-width: none;
    }
    .platform-nav::-webkit-scrollbar { display: none; }
    .platform-nav .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .95rem;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.03);
    }
    .platform-nav .nav-link.active { background: rgba(0,174,255,.14); }
    .platform-nav .nav-link.active::before { display: none; }

    /* stacked tab content: image on top, text below */
    .platform-card { padding: 22px; min-height: auto; }
    .platform-visual { min-height: auto; margin-bottom: 12px; }
    .platform-visual svg, .platform-visual img { max-width: 220px; }
    .platform-panel-text { font-size: .95rem; line-height: 1.6; }

    .price-card {
        padding: 26px 20px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 24px;
    }
    .first-price-card { border-right: 2px solid; }
    .price-card--featured { margin-left: 0; margin-right: 0; }
    .how-it-works { padding: 50px 0; }

    /* how-it-works steps: badge on the LEFT, card on the right */
    .step-row > [class*="col-"] {
        display: flex;
        align-items: stretch;
        gap: 0px;
        margin-bottom: 5px;
    }
    .step-badge {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        margin-top: -18px;
        margin-right: -25px;
    
    }
    .step-pill { padding: 8px 18px; white-space: nowrap; }
    .step-line {
        width: 2px;
        height: auto;
        flex: 1 1 auto;
        margin-left: 0;
        margin-top: 8px;
        background: linear-gradient(180deg, var(--color-accent) 0%, transparent 100%);
    }
    .step-dot { top: 0; left: 50%; }
    /* dot now travels DOWN the vertical line */
    .step-row > [class*="col-"]:nth-child(1) .step-dot { animation-name: stepDot1V; }
    .step-row > [class*="col-"]:nth-child(2) .step-dot { animation-name: stepDot2V; }
    .step-row > [class*="col-"]:nth-child(3) .step-dot { animation-name: stepDot3V; }
    .step-card {
        flex: 1 1 auto;
        padding: 25px 15px 10px 30px;
        border-top: 1px solid var(--white-border-30);
        border-left: 0px;
    }

    /* small-mobile specific */
    .threat-cta { padding: 45px 18px; }
    .blog-card { gap: 16px; }
    .blog-thumb { flex-basis: 40%; width: 40%; }
    .final-cta { padding: 50px 18px 60px; }
    .final-cta-content .hero-title { font-size: 18px; }
    .hero-cta .btn-contact, .hero-cta .btn-login , .btn-contact
    {
        font-size: 14px;
    }
    .price-name
    {
        font-size: 18px;
    }
    .blog-title
    {
        font-size: 14px;
    }
    .price-item
    {
        font-size: 14px;
    }
    .blog-text
    {
        font-size: 12px;
    }
    .hero-tagline
    {
        font-size: 16px;
    }
    .cta-grid-img , .cta-grid-img-2 .cta-grid-img
    {
        height: 130px;
    }
    .cta-grid-section
    {
        min-height: 100px;
        padding-top: 100px;
        padding-bottom: 40px;
    }
    .step-pill
    {
        font-size: 12px;
        font-weight: 500;
        background:#000;
    }
    .step-icon
    {
        width: 100px;
        height: 80px;
    }
}

/* ============================================================
   576px - 767px — LARGE MOBILE
   ============================================================ */
@media (min-width: 576px) and (max-width: 767px) {
    .we-resolve-padding { padding-top: 40px; }
    .platform { padding: 30px 0px; }

    /* DNS hero search: stack the field + button, both full-width */
    .dns-search { flex-direction: column; margin-top: 2rem; }
    .dns-search__field, .dns-search__btn { width: 100%; }
    .dns-search__btn { justify-content: center; }

    /* review carousel: show 1 slide at a time on small screens */
    .owl-slide { width: calc(100vw - 48px); }

    .hero-title { font-size: 18px; }
    .hero-sub { font-size: 14px; }

    .bg-grid svg, .bg-grid img {
        width: 100%;
        height: 75%;
    }
    .trust-badges img { width: 55px; }

    .hero {
        position: unset;
        min-height: auto;
        display: block;
    }
    .command-center-intro { position: unset; }
    .command-center-visual .hide-img { display: none; }
    .infastructure-monitor img {
        position: unset;
        width: 100%;
        margin: 15px 0px;
    }
    .resolve-topright-glow { top: -50px; width: 90%; }
    .resolve-card { padding: 12px 15px; }

    /* mobile nav panel + stacked layout */
    .site-header .navbar-collapse {
        background: var(--color-nav-panel);
        border: 1px solid var(--color-border-soft);
        border-radius: 14px;
        padding: 1rem 1.2rem;
        margin-top: .75rem;
    }
    .header-actions { margin-top: .6rem; }
    .platform-nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-left: none;
        border-bottom: 2px solid var(--color-border-soft);
        padding-bottom: 12px;
        margin-bottom: 26px;
        scrollbar-width: none;
    }
    .platform-nav::-webkit-scrollbar { display: none; }
    .platform-nav .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .95rem;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.03);
    }
    .platform-nav .nav-link.active { background: rgba(0,174,255,.14); }
    .platform-nav .nav-link.active::before { display: none; }

    /* stacked tab content: image on top, text below */
    .platform-card { padding: 22px; min-height: auto; }
    .platform-visual { min-height: auto; margin-bottom: 12px; }
    .platform-visual svg, .platform-visual img { max-width: 220px; }
    .platform-panel-text { font-size: .95rem; line-height: 1.6; }

    .price-card {
        padding: 26px 20px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 24px;
    }
    .first-price-card { border-right: 2px solid; }
    .price-card--featured { margin-left: 0; margin-right: 0; }
    .how-it-works { padding: 50px 0; }

    /* how-it-works steps: badge on the LEFT, card on the right */
    .step-row > [class*="col-"] {
        display: flex;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 5px;
    }
       .step-badge {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        margin-top: -18px;
        margin-right: -25px;
    
    }
    .step-pill { padding: 8px 18px; white-space: nowrap;  background:#000; }
    .step-line {
        width: 2px;
        height: auto;
        flex: 1 1 auto;
        margin-left: 0;
        margin-top: 8px;
        background: linear-gradient(180deg, var(--color-accent) 0%, transparent 100%);
    }
    .step-dot { top: 0; left: 50%; }
    /* dot now travels DOWN the vertical line */
    .step-row > [class*="col-"]:nth-child(1) .step-dot { animation-name: stepDot1V; }
    .step-row > [class*="col-"]:nth-child(2) .step-dot { animation-name: stepDot2V; }
    .step-row > [class*="col-"]:nth-child(3) .step-dot { animation-name: stepDot3V; }
    .step-card {
        flex: 1 1 auto;
        padding: 25px 15px 10px 30px;
        border-top: 1px solid var(--white-border-30);
        border-left: 0px;
    }
}

/* ============================================================
   768px - 991px — TABLET
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .we-resolve-padding { padding-top: 80px; }

    .hero-content img { max-width: 340px; }
    .bg-grid svg, .bg-grid img { width: 100%; }
    .resolve-topright-glow { top: -65px; width: 80%; }

    /* mobile nav panel + stacked layout still active on tablet */
    .site-header .navbar-collapse {
        background: var(--color-nav-panel);
        border: 1px solid var(--color-border-soft);
        border-radius: 14px;
        padding: 1rem 1.2rem;
        margin-top: .75rem;
    }
    .header-actions { margin-top: .6rem; }
    .platform-nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-left: none;
        border-bottom: 2px solid var(--color-border-soft);
        padding-bottom: 12px;
        margin-bottom: 26px;
        scrollbar-width: none;
    }
    .platform-nav::-webkit-scrollbar { display: none; }
    .platform-nav .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .95rem;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.03);
    }
    .platform-nav .nav-link.active { background: rgba(0,174,255,.14); }
    .platform-nav .nav-link.active::before { display: none; }
    .platform-card { padding: 22px; }
    .price-card {
        padding: 26px 20px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 24px;
    }
    .first-price-card { border-right: 2px solid; }
    .price-card--featured { margin-left: 0; margin-right: 0; }
    .how-it-works { padding: 50px 0; }
    
    /* how-it-works steps: badge on the LEFT, card on the right */
    .step-row > [class*="col-"] {
        display: flex;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 5px;
    }
       .step-badge {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        margin-top: -18px;
        margin-right: -25px;
    
    }
    .step-pill { padding: 8px 18px; white-space: nowrap;  background:#000;}
    .step-line {
        width: 2px;
        height: auto;
        flex: 1 1 auto;
        margin-left: 0;
        margin-top: 8px;
        background: linear-gradient(180deg, var(--color-accent) 0%, transparent 100%);
    }
    .step-dot { top: 0; left: 50%; }
    /* dot now travels DOWN the vertical line */
    .step-row > [class*="col-"]:nth-child(1) .step-dot { animation-name: stepDot1V; }
    .step-row > [class*="col-"]:nth-child(2) .step-dot { animation-name: stepDot2V; }
    .step-row > [class*="col-"]:nth-child(3) .step-dot { animation-name: stepDot3V; }
    .step-card {
        flex: 1 1 auto;
        padding: 25px 15px 10px 30px;
        border-top: 1px solid var(--white-border-30);
        border-left: 0px;
    }
 
}

/* ============================================================
   992px - 1199px — DESKTOP
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    .we-resolve-padding { padding-top: 120px; }

    .hero-content img { max-width: 400px; }
    .bg-grid svg, .bg-grid img { width: 100%; }
    .resolve-topright-glow { top: -65px; width: 80%; }

    /* horizontal navbar styling */
    .navbar-brand { max-width: 130px !important; }
    .site-header .nav-link,
    .btn-contact,
    .btn-login { font-size: 14px; }
    .navbar-nav,
    .header-actions { gap: 10px !important; }
    .cta-glow__bg
    {
        width: 100%;
        top: 90px;
    }
    /* DNS hero dome: keep pinned to the top and full-width so it stays whole */
    .bg-gradiant-cta-glow .cta-glow__bg--dns
    {
        width: 100%;
        max-width: 760px;
        top: 0;
    }
    .steps-scroll
    {
        height: 430px;
    }
    .cta-search-deco
    {
        bottom: 20%;
    }
    .cta-mail-deco
    {
        top: 30%;
        left: 5%;
    }
    .cta-glow__content
    {
        padding-top: 10rem;
    }
    .platform
    {
        padding: 30px 0px;
    }
}

/* ============================================================
   >= 1200px — LARGE DESKTOP
   ============================================================ */
@media (min-width: 1200px) {
    /* .we-resolve-padding uses base 170px from style.css */
    .hero-content img { max-width: 460px; }

}

/* compliance-card: two per row on lg+ -> no divider before the first item */
@media (min-width: 992px) {
    .compliance-card .row>[class*="col-"]:nth-child(2n+1)::before {
        display: none;
    }

    /* open the header dropdown on hover (desktop only) */
    .site-header .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
    }

    /* keep the toggle accent-coloured (like .active) for as long as its
       menu is open, including while the cursor is inside the menu */
    .site-header .nav-item.dropdown:hover>.nav-link,
    .site-header .nav-item.dropdown:focus-within>.nav-link {
        color: var(--color-accent);
    }

    /* center the menu under its toggle instead of left-aligning it */
    .site-header .nav-item.dropdown>.dropdown-menu {
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    /* invisible bridge across the menu gap so moving the cursor
       from the toggle to the menu doesn't drop the hover state */
    .site-header .nav-item.dropdown>.dropdown-menu::before {
        content: "";
        position: absolute;
        top: -.6rem;
        left: 0;
        right: 0;
        height: .6rem;
    }
}

@media (min-width: 1920px) {
    .sh-hero
    {
        padding: 150px 0px !important;
    }
}
/* ============================================================
   STEP DOT — vertical travel (mobile timeline)
   mirrors stepDot1/2/3 but animates `top` instead of `left`
   ============================================================ */
@keyframes stepDot1V {
    0%   { top: 0%;   opacity: 1; }
    5%   { top: 0%;   opacity: 1; }
    25%  { top: 100%; opacity: 1; }
    26%  { top: 100%; opacity: 0; }
    27%  { top: 0%;   opacity: 0; }
    80%  { top: 0%;   opacity: 0; }
    81%  { top: 0%;   opacity: 1; }
    100% { top: 0%;   opacity: 1; }
}
@keyframes stepDot2V {
    0%   { top: 0%;   opacity: 1; }
    30%  { top: 0%;   opacity: 1; }
    50%  { top: 100%; opacity: 1; }
    51%  { top: 100%; opacity: 0; }
    52%  { top: 0%;   opacity: 0; }
    80%  { top: 0%;   opacity: 0; }
    81%  { top: 0%;   opacity: 1; }
    100% { top: 0%;   opacity: 1; }
}
@keyframes stepDot3V {
    0%   { top: 0%;   opacity: 1; }
    55%  { top: 0%;   opacity: 1; }
    75%  { top: 100%; opacity: 1; }
    76%  { top: 100%; opacity: 0; }
    77%  { top: 0%;   opacity: 0; }
    80%  { top: 0%;   opacity: 0; }
    81%  { top: 0%;   opacity: 1; }
    100% { top: 0%;   opacity: 1; }
}

/* brand-monitoring hero glow — recentre the angular gradient on small screens */
@media (max-width: 991px) {
    /* collapsed navbar: stack the dropdown columns instead of sitting them side by side */
    .site-header .dropdown-cols {
        display: block;
    }
    .site-header .dropdown-col+.dropdown-col {
        margin-left: 0;
        padding-left: 0;
        margin-top: .35rem;
        padding-top: .5rem;
    }
    /* vertical dotted divider -> horizontal one when stacked */
    .site-header .dropdown-col+.dropdown-col::before {
        left: .85rem;
        right: .85rem;
        top: 0;
        bottom: auto;
        width: auto;
        height: 2px;
        background-image: repeating-linear-gradient(90deg,
                rgba(0, 174, 255, .95) 0 3px,
                rgba(0, 174, 255, 0) 3px 8px);
        -webkit-mask-image: linear-gradient(90deg,
                transparent 0%, #000 22%, #000 78%, transparent 100%);
        mask-image: linear-gradient(90deg,
                transparent 0%, #000 22%, #000 78%, transparent 100%);
    }

    .compliance-hero-glow {
        display: none;
    }

    /* compliance-card: stacked -> hide all dividers */
    .compliance-card .row>[class*="col-"]::before {
        display: none;
    }

    .brand-hero-glow {
        background: conic-gradient(from 134.67deg at 47.64% 51.96%, #00AEFF 2deg, rgba(0, 0, 0, 0) 121deg, #00080f00 226deg, #00aeff 360deg);
    }

    /* enforcement flow: drop sticky + inner scrollbox, let steps flow with page */
    .enforcement-flow .ef-sticky {
        position: static;
        padding-right: 0;
        margin-bottom: 2rem;
        text-align: center;
    }
    .enforcement-flow .ef-scroll {
        max-height: none;
        padding-right: 0;
    }

    /* bottom CTA: less top padding on small screens */
    .cta-glow__content {
        padding-top: 3rem;
    }

    /* hero CTA: kill the extra top padding on small screens
       (compound selector needed to beat .bg-gradiant-cta-glow .cta-glow__content) */
    .bg-gradiant-cta-glow .cta-glow__content {
        padding-top: 0;
        padding-bottom: 5rem;
    }
    .stats-eyebrow
    {
        margin-bottom: 10px;
    }
    /* hide the icon decorations on small screens */
    .cta-mail-deco,
    .cta-shield-deco,
    .cta-alert-deco,
    .cta-search-deco {
        display: none;
    }
    .bg-gradiant-cta-glow .cta-glow__bg
    {
        top: auto;
        bottom: 0;
    }
    /* DNS hero dome: stay at the top, centred and scaled to the viewport */
    .bg-gradiant-cta-glow .cta-glow__bg--dns
    {
        top: 0;
        bottom: auto;
        width: 100%;
        max-width: 560px;
    }
    .stats-content .hero-sub 
    {
        margin-bottom: 0px;
    }
}

/* ===== vendors / dark-web sections ===== */
@media (max-width: 991px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* TOC becomes a horizontal scroll strip above the content */
    .legal-toc {
        position: static;
        top: auto;
    }

    .legal-toc__list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
    }

    .legal-toc__link {
        white-space: nowrap;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 8px;
    }

    .legal-toc__link.active {
        border-left-color: transparent;
        border-bottom-color: var(--color-accent);
    }
}

@media (max-width: 767px) {
    /* DNS hero dome: scale down for tablets/phones so the whole dome fits */
    .bg-gradiant-cta-glow .cta-glow__bg--dns {
        max-width: 460px;
    }

    /* DMARC meta strip: stack items with a horizontal dashed divider on phones */
    .dmarc-meta__item {
        flex-basis: 100%;
        justify-content: flex-start;
        padding: .25rem .5rem;
    }
    .dmarc-meta__item + .dmarc-meta__item {
        padding-top: 1rem;
        margin-top: 1rem;
    }
    .dmarc-meta__item + .dmarc-meta__item::before {
        left: 0;
        right: 0;
        top: 0;
        width: auto;
        height: 2px;
        background: repeating-linear-gradient(
            to right,
            var(--color-accent) 0 7px,
            transparent 7px 14px
        );
        -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
    }

    .legal-head .hero-title {
        font-size: 2rem;
    }

    .legal-block {
        padding: 1.5rem 1.35rem;
    }

    .legal-block__head {
        gap: .7rem;
    }

    .threat-cta {
        flex-direction: column;
        text-align: center;
        padding: 36px 24px;
    }

    .threat-cta__title {
        font-size: 2rem;
    }

    .benefits-box {
        flex-wrap: wrap;
        gap: 14px;
        border: none;
        overflow: visible;
    }

    .benefit-item {
        flex: 1 1 calc(50% - 14px);
        border: 1px solid var(--color-accent) !important;
        border-radius: 12px;
    }

    .benefits {
        padding: 40px 0px;
    }

    .iceberg-glow svg {
        display: none !important;
    }

    .iceberg-hero .hero-title {
        padding: 15px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        text-align: center;
    }
}

/* about-us stat cards: tighter padding on small screens */
@media (max-width: 575.98px) {
    .stat-card {
        padding: 1.1rem 1.15rem;
    }

    /* datasheets: stack card image on top, banner content vertically */
    .ds-card--row {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .ds-card__media {
        flex: 0 0 auto;
        align-self: center;
    }
    .ds-banner {
        padding: 22px 20px;
    }

    .ds-banner__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* platform commitments: gradient vertical dividers between columns (desktop) */
@media (min-width: 768px) {
    .commit-panel .row > [class*="col-"] + [class*="col-"] .commit-col {
        border-left: 1px solid transparent;
        border-image: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.11) 50%,
                rgba(255, 255, 255, 0) 100%) 1;
        padding-left: 1.5rem;
    }
}

/* see-it-in-action spire CTA: keep spire + text proportional on small screens */
@media (max-width: 767.98px) {
    .action-cta {
        background-size: 115% auto;
        padding-top: 66vw;
        padding-bottom: 40px;
    }
}

/* ============================================================
   PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .step-dot { animation: none; left: 0; }
    .owl-track { animation: none; }

    .vview-img .vv-shield,
    .vview-img .vv-glow,
    .vview-img .vv-badge {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact__mesh .spark,
    .contact__mesh .cta-line-flow { animation: none; }
}

/* ---- Credential Leak checker (credentialLeak.php) ---- */
@media (prefers-reduced-motion: reduce) {
    .leak-hero__blob { animation: none; }
}

/* ---- Free-tool AJAX search (js/tool-search.js) ---- */
/* the spinner is the only signal a scan is still running, so slow it rather
   than stopping it outright */
@media (prefers-reduced-motion: reduce) {
    .tool-loading__spinner { animation-duration: 2.4s; }
}

@media (max-width: 767px) {
    /* drop the decorative blobs entirely so hero text stays clean on phones */
    .leak-hero__blob { display: none; }

    .leak-feature {
        flex-basis: 100%;
        justify-content: flex-start;
    }
    .leak-feature + .leak-feature {
        padding-top: 1rem;
        margin-top: 1rem;
    }
    /* switch the divider to a horizontal dashed line on phones */
    .leak-feature + .leak-feature::before {
        left: 0;
        right: 0;
        top: 0;
        width: auto;
        height: 2px;
        background: repeating-linear-gradient(
            to right,
            var(--color-accent) 0 7px,
            transparent 7px 14px
        );
        -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
    }
}

/* Security Headers hero: tighten vertical padding at ~150%+ browser zoom
   (effective viewport width 1280px and below). */
@media (max-width: 1280px) {
    .sh-hero {
        padding: 60px 0px !important;
    }
}

/* Security Headers hero: hide the wide banner image on small screens
   (the owl/globe art doesn't read well) — fall back to the dark color. */
@media (max-width: 991px) {
    .sh-hero {
        background-image: none !important;
    }
}

/* SSL Checker hero: same vertical rhythm as the other free-tool heroes. */
@media (min-width: 1920px) {
    .ssl-hero {
        padding: 150px 0px !important;
    }
}

@media (max-width: 1280px) {
    .ssl-hero {
        padding: 60px 0px !important;
    }
}

/* Below ~1200px the owl starts crowding the search field, so it fades back and
   the circuit board narrows; under 768px both drop out entirely. */
@media (max-width: 1199px) {
    .ssl-hero__owl {
        width: 200px;
        opacity: .55;
    }

    .ssl-hero__circuit {
        width: 180px;
        opacity: .6;
    }
}

@media (max-width: 767px) {
    .ssl-hero__owl,
    .ssl-hero__circuit {
        display: none;
    }
}

/* .sh-search__field carries a 300px flex-basis, which leaves no room for the button
   on a phone and pushes it off the right edge. Stack them instead. */
@media (max-width: 575px) {
    .ssl-hero .sh-search {
        flex-direction: column;
        align-items: stretch;
    }

    .ssl-hero .sh-search__field {
        flex: 1 1 auto;
    }

    .ssl-hero .sh-search__btn {
        width: 100%;
    }
}