/* Responsive overrides only, desktop-first max-width tiers, largest to smallest.
   Tiers used by the live site: 1500 (content zoom band starts at 1025px), 1440,
   1280, 1024, 1000, 980, 767, 475. */

/* ==== 1675 and up: wide screens use fixed paddings (live Divi defaults) ==== */
@media (min-width: 1675px) {
    .block-testimonial-carousel { padding: 50px 0; }
    .block-testimonial-carousel__main { padding-top: 33px; }
    .block-testimonial-carousel__logos { padding: 33px 0; }
    .block-title-image-band { padding: 50px 0; }
    .block-title-image-band__inner,
    .block-cta-form .container,
    .block-faq-accordion__body { padding: 33px 0; }
}

/* ==== 1500: live renders content columns at 80% zoom from 1025 to 1500px ==== */
@media (max-width: 1500px) {
    .container,
    .block-hero-media__overlay {
        width: 125%;
        zoom: 0.8;
    }
    .block-hero-media__overlay { max-width: 100%; }
    /* The 3px form border renders 2px at this zoom; match the pull-back. */
    .block-cta-form__form .frm-show-form { margin: -2.5px; }
}

/* /age-estimation-api-pg/ hero from 981 to 1024: live drops the 80% row zoom here and its 87px heading runs under the
   picture card (live bug). The copy keeps the zoomed layout of 1025px instead. */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-api-hero--offer .block-api-hero__copy { width: 125%; max-width: min(var(--container-max), 112.5vw); padding-bottom: 155px; zoom: 0.8; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    /* live /age-estimation-api-pg/ hero: the zoomed row ends 7.5px lower than at 1024 */
    .block-api-hero--offer .block-api-hero__copy { padding-bottom: 155px; }
    .block-api-hero:not(.block-api-hero--offer) .block-api-hero__note { margin: 9.5px 0 -9px; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    /* Header grid rule (client QA #38): the header row is 80% of the viewport on screen. A zoomed .container is
       zoom 0.8 of its css width, so 100vw in css px is 80% of the viewport on screen: body edges meet the logo and
       the Contact Us button at every width of the band. */
    .container { max-width: min(calc(var(--container-max) / 0.8), 100vw); }
}

/* ==== 476 and up: later steps of the dark form (live site-wide rule; the light
   form's own snippet rules override it): Previous left, Next 60px past the middle ==== */
@media (min-width: 476px) {
    .block-cta-form--dark .block-cta-form__form .frm_form_fields:not(.frm_page_num_1) .frm_submit.frm_flex {
        align-items: flex-end;
        justify-content: space-between;
        width: calc(50% + 60px);
    }
}

/* ==== 1440 ==== */
@media (max-width: 1440px) {
    .block-stat-rank__card { padding-bottom: 0; }
    .block-split-rows-media__video { height: 511px; }
}

/* ==== 1440: live uses 38px accordion titles from 1024 to 1440 ==== */
@media (max-width: 1440px) {
    .block-accordion-list__title { font-size: 38px; }
}

/* ==== 1400: header menu gap ==== */
@media (max-width: 1400px) {
    .site-nav__menu { gap: 30px; }
}

/* ==== 1280 ==== */
@media (max-width: 1280px) {
    .block-hero-media__content { height: 476px; }
    .block-hero-media__title { font-size: 68px; }
}

/* ==== 1279: header menu at 14px ==== */
@media (max-width: 1279px) {
    .site-nav__menu { gap: 20px; }
    .site-nav__parent,
    .site-nav__link,
    .site-nav__cta,
    .site-nav__dropdown a { font-size: 14px; }
}

/* ==== 1024: zoom band ends ==== */
@media (max-width: 1024px) {
    .container { width: var(--container-width); zoom: 1; }
    .block-hero-media__overlay { width: auto; max-width: none; zoom: 1; }
    .block-cta-form__form .frm-show-form { margin: -3px; }

    /* flow-root: the row's 40px bottom margin stays inside the ink section (live lets it collapse out,
       a cream stripe under the slider from 981 to 1024px; any-width rule) */
    .block-stat-rank { padding: 0; display: flow-root; }
}

/* ==== hero-split-image tiers (live /national-security/ hero) ====
   Any-width rule: live starts the 10vw text gutter at 1024px and puts the text 20 to 25px
   from the screen edge from 981 to 1023px; the theme keeps the page gutter down to 981px. */
@media (min-width: 981px) and (max-width: 1600px) {
    .block-hero-split-image { padding-left: 10vw; }
}

@media (max-width: 1440px) {
    .block-hero-split-image__media {
        top: 44%;
        right: -200px;
        width: 875px;
        height: 650px;
        transform: translateY(-44%);
    }
}

@media (max-width: 1280px) {
    .block-hero-split-image__text-col { height: 476px; }
}

/* Tall text column: live /digital-identity/ is excluded from the 476px rule. */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-hero-split-image--tall .block-hero-split-image__text-col { height: 576px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .block-hero-split-image--tall .block-hero-split-image__text-col { height: 28vw; }
}

@media (max-width: 1279px) {
    .block-hero-split-image__title { font-size: 68px; }
    .block-hero-split-image__media { width: 700px; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-hero-split-image__row { margin-left: 0; }
}

@media (max-width: 1024px) {
    .block-hero-split-image__row { width: 100%; }
}

@media (max-width: 980px) {
    .block-hero-split-image__text-col { padding-left: 20px; }
    .block-hero-split-image--gutter-25 .block-hero-split-image__text-col { padding-left: 25px; }
}

@media (max-width: 980px) {
    .block-hero-split-image { padding: 16.3vw 0 5.63vw 14.4vw; }
    .block-hero-split-image__row {
        display: block;
        width: var(--container-width);
    }
    .block-hero-split-image__text-col,
    .block-hero-split-image__media-col {
        width: 100%;
        margin-right: 0;
    }
    /* Any-width rule (sweep 6 Oct 2026): live lays the cut-out image over the title, subtitle and button
       from 768 to 980px; here the text column keeps its height and the image follows it, right aligned. */
    .block-hero-split-image__text-col,
    .block-hero-split-image--tall .block-hero-split-image__text-col { height: auto; }
    .block-hero-split-image__media {
        position: relative;
        top: 0;
        right: auto;
        width: 100%;
        height: auto;
        transform: none;
    }
    /* live Divi image wrapper: right-aligned inline-block around an inline image
       (the image renders 1/64px narrower, which the section height follows) */
    .block-hero-split-image__media { text-align: right; }
    .block-hero-split-image__media picture {
        display: inline-block;
        max-width: 100%;
    }
    .block-hero-split-image__media picture img { display: inline; }
    .block-hero-split-image__media img { width: auto; } /* live: intrinsic size of the srcset pick */
}

@media (max-width: 767px) {
    .block-hero-split-image { padding: 140px 0 0; }
    .block-hero-split-image__row {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        min-height: 0;
    }
    /* hardcoded: live 40px bottom padding plus the hidden button's -15px margin */
    .block-hero-split-image__text-col {
        height: auto;
        padding: 0 20px 25px;
    }
    .block-hero-split-image--gutter-25 .block-hero-split-image__text-col { padding: 0 25px 25px; }
    /* hardcoded: tall column (live /digital-identity/): 20px under the text less the 15px pull-up of the hidden button */
    .block-hero-split-image--tall .block-hero-split-image__text-col { padding-bottom: 5px; }
    .block-hero-split-image__text {
        max-width: 100%;
        margin: 0;
        font-size: 16px;
    }
    .block-hero-split-image__title { font-size: 13.5vw; }
    .block-hero-split-image__subtitle { font-size: 3.3vw; }
    .block-hero-split-image__media { margin-bottom: 60px; }
}

@media (max-width: 475px) {
    .block-hero-split-image__subtitle { display: none; }
}

/* ==== hero-split-image "capability" variant (live capability pages, /face-recognition/): the square
   cut-out is 650px wide from 1024 to 1440px and 550px up to 1279px (live child theme rules, the later
   one wins), 100px past the right edge; 7px right gutter on the text column; tablets keep the 550px
   picture under the text, right aligned; phones 40px under the picture. ==== */
.block-hero-split-image--capability .block-hero-split-image__text-col { padding-right: 7px; }

/* the picture box hugs the cut-out (right aligned like the live image wrapper), so its
   transparent box never lies over the title */
.block-hero-split-image--capability .block-hero-split-image__media { text-align: right; }
.block-hero-split-image--capability .block-hero-split-image__media picture { display: inline-block; }

/* The zoom band runs to 1500px, so these widths keep the laptop picture. */
@media (min-width: 1441px) and (max-width: 1500px) {
    .block-hero-split-image--capability:not(.block-hero-split-image--picture-narrow) .block-hero-split-image__media {
        top: 44%;
        right: -100px;
        width: 650px;
        height: auto;
        transform: translateY(-44%);
    }
}

/* Large screens: live runs the cut-out off the right edge up to about 2140px and under the 83px header up to about
   2515px. Here the picture stays inside the right column of the container, whole and clear of the text.
   The offset parent is the 1340px .container row (position: relative), not the section, so right: 0 is the
   container's right edge and 48.5% is the media column's width. */
@media (min-width: 1501px) {
    .block-hero-split-image--capability:not(.block-hero-split-image--picture-narrow) .block-hero-split-image__media-col { position: static; }
    .block-hero-split-image--capability:not(.block-hero-split-image--picture-narrow) .block-hero-split-image__media {
        top: 50%;
        right: 0;
        width: 48.5%;
        transform: translateY(-50%);
    }
}

@media (max-width: 1440px) {
    .block-hero-split-image--capability .block-hero-split-image__media {
        right: -100px;
        width: 650px;
        height: auto;
    }
}

@media (max-width: 1279px) {
    .block-hero-split-image--capability .block-hero-split-image__media { width: 550px; }
}

@media (max-width: 980px) {
    .block-hero-split-image--capability .block-hero-split-image__media {
        right: auto;
        max-width: 100%;
        margin-left: auto;
    }
    .block-hero-split-image--capability .block-hero-split-image__media img { width: 100%; }
}

@media (max-width: 767px) {
    .block-hero-split-image--capability .block-hero-split-image__text-col { padding: 0 7px 25px 20px; }
    .block-hero-split-image--capability .block-hero-split-image__media {
        width: auto;
        margin-bottom: 40px;
    }
    .block-hero-split-image--capability .block-hero-split-image__media img { width: auto; }
}

/* ==== statement-intro compact variant tiers ==== */
@media (min-width: 1024px) and (max-width: 1440px) {
    .block-statement-intro--compact .block-statement-intro__text {
        padding-top: 40px;
        font-size: 46px;
    }
}

@media (max-width: 980px) {
    .block-statement-intro.block-statement-intro--compact { padding: 30px 0 0; }
    .block-statement-intro--compact .container { padding: 0 25px; }
    .block-statement-intro--compact .block-statement-intro__text {
        margin-bottom: 30px;
        font-size: 3.13vw;
    }    .block-statement-intro.block-statement-intro--tight { padding: 0 0 3.75vw; }
    .block-statement-intro--tight .container { padding: 0; }
}

@media (max-width: 767px) {
    .block-statement-intro.block-statement-intro--compact { padding: 0 20px 96px; }
    .block-statement-intro--compact .container {
        width: 100%;
        padding: 0;
    }
    .block-statement-intro--compact .block-statement-intro__text {
        margin-bottom: 60px;
        font-size: 6.9vw;
        letter-spacing: 0;
    }    .block-statement-intro.block-statement-intro--tight { padding: 0 25px 40px; }
}

/* ==== statement-intro tight-tall variant (live capability pages): phones keep 96px under the button ==== */
@media (max-width: 767px) {
    .block-statement-intro.block-statement-intro--tight-tall { padding-bottom: 96px; }
}

/* ==== statement-intro open variant: phones keep the 96px under the button ==== */
@media (max-width: 767px) {
    .block-statement-intro.block-statement-intro--open { padding: 0 25px 96px; }
    .block-statement-intro--flat .block-statement-intro__actions { margin-top: 0; }
}

/* ==== statement-intro spaced variant: tablets drop the top padding, 3.13vw copy ==== */
@media (max-width: 980px) {
    .block-statement-intro.block-statement-intro--spaced { padding: 0 0 3.75vw; }
    .block-statement-intro--spaced .block-statement-intro__text {
        margin-bottom: 90px;
        font-size: 3.13vw;
    }
}

/* ==== statement-intro branded variant (live /roc-access/ s1). Tablets: no top padding,
   48px copy, 40px under it. Phones: 60 15 96, the steel eyebrow (28px, small mark), the
   phone title (15.2vw), 6.9vw copy and the centred 44px pill. ==== */
@media (max-width: 980px) {
    .block-statement-intro.block-statement-intro--branded { padding: 0 0 3.75vw; }
    .block-statement-intro--branded .block-statement-intro__text { margin-bottom: 40px; }
}

@media (max-width: 767px) {
    .block-statement-intro.block-statement-intro--branded { padding: 60px 15px 96px; }
    .block-statement-intro--branded .container { width: 100%; }
    .block-statement-intro--branded .block-statement-intro__eyebrow {
        gap: 6px;
        margin-bottom: calc(30px + 6.9vw);
        font-size: 28px;
        color: var(--color-steel);
    }
    .block-statement-intro--branded .block-statement-intro__eyebrow::before {
        width: 36px;
        height: 21px;
        background-image: url("assets/images/carrot-steel.svg");
    }
    .block-statement-intro--branded .block-statement-intro__title {
        display: block;
        margin-bottom: 20px;
        font-family: var(--font-bold);
        font-size: 15.2vw;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.5px;
        color: var(--color-cream);
    }
    .block-statement-intro--branded .block-statement-intro__text {
        margin-bottom: 60px;
        font-size: 6.9vw;
        line-height: 125%;
    }
    .block-statement-intro--branded .btn:hover { color: var(--color-rust); }
}

/* ==== statement-intro branded-phone variant (live /roc-evidence/ s1). Phones: the steel
   eyebrow 30px over the 13.5vw title, 24px under it; from 476 to 767px the eyebrow keeps
   its desktop size (51px, 70px under it) and the pill its 16px label ==== */
@media (max-width: 767px) {
    .block-statement-intro--branded-phone .block-statement-intro__eyebrow {
        display: flex;
        margin-bottom: 30px;
        letter-spacing: normal;
    }
    .block-statement-intro--branded-phone .block-statement-intro__title {
        margin-bottom: 24px;
        font-size: 13.5vw;
        letter-spacing: normal;
    }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-statement-intro--branded-phone .block-statement-intro__eyebrow {
        gap: 10px;
        margin-bottom: 70px;
        font-size: 51px;
    }
    .block-statement-intro--branded-phone .block-statement-intro__eyebrow::before {
        width: 51px;
        height: 38px;
    }
    .block-statement-intro--branded-phone .btn {
        padding: 17px 45px 17px 35px;
        font-size: 16px;
    }
}

/* ==== image-columns tiers ==== */
@media (max-width: 1024px) {
    /* Live quirk (option): the first column is fixed at 327px, the third wraps. */
    .block-image-columns--first-fixed .block-image-columns__item:first-child { width: 327px; }
}

@media (min-width: 981px) and (max-width: 1024px) {
    /* Live quirk (same option): the 327px empty column beside the image wraps
       under it and adds its 1px minimum height. */
    .block-image-columns--first-fixed .block-image-columns__image { margin-bottom: calc(5.8vw + 1px); }
}

@media (max-width: 980px) {
    .block-image-columns { padding: 30px 0; }
    .block-image-columns__eyebrow {
        margin: 0 25px 30px;
        font-size: 0.97vw;
    }
    .block-image-columns__image { width: 100%; }
    .block-image-columns__items {
        display: flow-root; /* live columns are floats: their margins stay inside */
        margin-bottom: 42px;
        padding: 0 25px;
    }
    .block-image-columns__item {
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .block-image-columns { padding: 40px 30px; }
    .block-image-columns .container { width: 100%; }
    .block-image-columns__eyebrow {
        margin: 0 0 40px;
        font-size: 3.25vw;
    }
    .block-image-columns__image { margin-bottom: 40px; }
    .block-image-columns__items { padding: 0; }
    .block-image-columns__title { font-size: 6.5vw; }
    .block-image-columns__body {
        margin-bottom: 60px;
        font-size: 4.2vw;
    }
    .block-image-columns__lead { line-height: 133%; }
}

/* ==== image-columns "labels" spacing tiers (live /abis/ s2) ==== */
@media (max-width: 980px) {
    .block-image-columns.block-image-columns--labels { padding-top: 30px; }
    .block-image-columns--labels .block-image-columns__title { margin-bottom: 10px; }
}

@media (max-width: 767px) {
    .block-image-columns.block-image-columns--labels { padding: 0 30px; }
    .block-image-columns--labels .block-image-columns__items { margin-bottom: 0; }
    .block-image-columns--labels .block-image-columns__item:last-child .block-image-columns__body { margin-bottom: 0; }
}

/* ==== image-columns "rows" spacing tiers ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-image-columns.block-image-columns--rows { padding-bottom: 60px; }
}

@media (max-width: 980px) {
    .block-image-columns.block-image-columns--rows { padding-top: 30px; }
    .block-image-columns--rows .block-image-columns__items { margin-bottom: 42px; }
    /* Stacked columns: the 42px row margin only separates the rows of three. */
    .block-image-columns--rows .block-image-columns__item:nth-child(3n+1):not(:first-child) { margin-top: 42px; }
}

@media (max-width: 767px) {
    /* flow-root: the list's 60px bottom margin stays inside the ink section (476 to 767px it collapsed
       out and showed a cream stripe; live paints that gap ink) */
    .block-image-columns.block-image-columns--rows {
        display: flow-root;
        padding: 0 25px;
    }
    .block-image-columns--rows .block-image-columns__image { margin-bottom: 24px; }
    .block-image-columns--rows .block-image-columns__items { margin-bottom: 60px; }
    .block-image-columns--rows .block-image-columns__item:nth-child(3n+1):not(:first-child) { margin-top: 0; }
    .block-image-columns--rows .block-image-columns__title { margin-bottom: 24px; }
    .block-image-columns--rows .block-image-columns__lead { line-height: 150%; }
}

/* ==== image-columns "titles" spacing tiers ==== */
@media (max-width: 980px) {
    .block-image-columns.block-image-columns--titles { padding: 30px 0; }
    .block-image-columns--titles .block-image-columns__eyebrow { margin-bottom: 30px; }
    .block-image-columns--titles .block-image-columns__items { margin-bottom: 42px; }
    .block-image-columns--titles .block-image-columns__item:nth-child(3n+1):not(:first-child) { margin-top: 42px; }
}

@media (max-width: 767px) {
    .block-image-columns.block-image-columns--titles { padding: 0 25px 96px; }
    .block-image-columns--titles .block-image-columns__eyebrow { margin-bottom: 40px; }
    .block-image-columns--titles .block-image-columns__image { margin-bottom: 24px; }
    .block-image-columns--titles .block-image-columns__item { min-height: 0; }
    .block-image-columns--titles .block-image-columns__item:nth-child(3n+1):not(:first-child) { margin-top: 0; }
    .block-image-columns--titles .block-image-columns__title {
        min-height: 0;
        margin-bottom: 14px;
        font-size: 5.6vw;
    }
    .block-image-columns--titles .block-image-columns__body {
        margin-bottom: 40px;
        line-height: 133%;
    }
    .block-image-columns--titles .block-image-columns__item:last-child .block-image-columns__body { margin-bottom: 0; }
}

/* ==== accordion-list dark / side eyebrow tiers ==== */
@media (max-width: 1440px) {
    .block-accordion-list__eyebrow { width: 23%; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-accordion-list.block-accordion-list--dark { padding: 0 0 120px; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-accordion-list.block-accordion-list--stacked { padding: 80px 0 120px; }
}

@media (min-width: 768px) and (max-width: 980px) {
    .block-accordion-list--stacked .block-accordion-list__row { margin-bottom: 150px; }
}

@media (max-width: 980px) {
    .block-accordion-list--side .container { width: 90%; }
    .block-accordion-list__eyebrow { font-size: 0.97vw; }    .block-accordion-list--stacked .block-accordion-list__row { display: block; }
    .block-accordion-list--stacked .block-accordion-list__eyebrow { width: auto; }
    .block-accordion-list--side.block-accordion-list--stacked .block-accordion-list__list { width: auto; }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--dark { padding: 30px 30px 96px; }
    .block-accordion-list.block-accordion-list--stacked { padding: 60px 25px 96px; }
    .block-accordion-list--side .container { width: auto; }
    .block-accordion-list__row { display: block; }
    .block-accordion-list__eyebrow {
        width: auto;
        margin-bottom: 40px;
        font-size: 3.25vw;
    }
    .block-accordion-list--side .block-accordion-list__list { width: auto; }
    .block-accordion-list--dark .block-accordion-list__item.is-open { background-color: var(--color-ink); }
    .block-accordion-list--dark .block-accordion-list__item.is-open .block-accordion-list__title { color: var(--color-cream); }
}

@media (max-width: 475px) {
    .block-accordion-list--dark .block-accordion-list__panel h6,
    .block-accordion-list--dark .block-accordion-list__panel p,
    .block-accordion-list--dark .block-accordion-list__panel span,
    .block-accordion-list__link { font-size: 16px; }
    .block-accordion-list__panel ul {
        flex-direction: column;
        margin-top: 20px;
    }
    .block-accordion-list__panel li { width: 100%; }
    .block-accordion-list--dark .block-accordion-list__panel { padding-bottom: 20px; }
    /* Phones have no hover band: a tapped (hovered) row keeps its steel icon and
       panel text like live, instead of the ink text meant for the rust band. */
    .block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__icon,
    .block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__panel h6,
    .block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__panel p,
    .block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__panel span,
    .block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__link,
    .block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__panel li { color: var(--color-steel); }
    .block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__link { border-color: var(--color-rust); }
    /* stacked variant: the 20px row padding sits on the head (the open panel starts 20px lower) */
    .block-accordion-list--stacked .block-accordion-list__item { padding: 0; }
    .block-accordion-list--stacked .block-accordion-list__head { padding: 20px 0; }
}

/* ==== accordion-list compact side variant tiers (live capability pages): none above and
   120px below from 768 to 1280px (live child theme rule), phones 0 25 96. ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-accordion-list.block-accordion-list--compact { padding: 0 0 120px; }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--compact { padding: 0 25px 96px; }
}

/* ==== accordion-list roomy side variant tiers (live /watch/) ==== */
@media (min-width: 1281px) {
    .block-accordion-list.block-accordion-list--roomy { padding: 240px 0 140px; }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-accordion-list--roomy .block-accordion-list__eyebrow { width: 23%; }
    .block-accordion-list--roomy .block-accordion-list__icon { padding-right: 60px; }
}

@media (min-width: 476px) and (max-width: 496px) {
    .block-accordion-list--roomy .block-accordion-list__item { padding: 20px 0; }
    .block-accordion-list--roomy .block-accordion-list__title { padding-left: 0; }
    .block-accordion-list--roomy .block-accordion-list__title::before { content: none; }
}

/* phones: the 20px row padding sits on the row, so an open panel follows the title directly (live) */
@media (max-width: 475px) {
    .block-accordion-list--roomy .block-accordion-list__item { padding: 20px 0; }
    .block-accordion-list--roomy .block-accordion-list__head { padding: 0; }
}

@media (min-width: 768px) and (max-width: 980px) {
    .block-accordion-list--roomy .block-accordion-list__row { margin-bottom: 40px; }
    .block-accordion-list--roomy .block-accordion-list__eyebrow {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 142%;
    }
}

/* ==== accordion-list padded side variant tiers ==== */
@media (max-width: 980px) {
    .block-accordion-list--padded .block-accordion-list__row {
        display: block;
        margin-bottom: 150px;
        padding: 0;
    }
    .block-accordion-list--padded .block-accordion-list__main { width: auto; }
    .block-accordion-list--padded .block-accordion-list__row > .block-accordion-list__list { width: auto; }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--padded { padding: 0 25px 96px; }
    .block-accordion-list--padded .block-accordion-list__row { margin-bottom: 0; }
    .block-accordion-list__main .block-accordion-list__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
        line-height: 112%;
    }
}

@media (max-width: 475px) {
    .block-accordion-list__main .block-accordion-list__heading br { display: none; }
}

/* ==== testimonial-carousel tiers ==== */
@media (min-width: 1024px) and (max-width: 1440px) {
    .block-testimonial-carousel__main { padding-bottom: 100px; }
    .block-testimonial-carousel__carousel .swiper-container { margin-bottom: 0; }
    .block-testimonial-carousel__quote { width: 70%; }
    .block-testimonial-carousel__quote p {
        font-size: 36px;
        line-height: 150%;
    }
    .block-testimonial-carousel__link-wrap { bottom: 0; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-testimonial-carousel { min-height: 0; }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .block-testimonial-carousel__logos-list { font-size: 26px; }
}

@media (min-width: 476px) and (max-width: 1279px) {
    .block-testimonial-carousel__quote {
        width: 83%;
        min-height: 350px;
    }
    .block-testimonial-carousel__logos-list { font-size: 22px; }
}

@media (max-width: 1024px) {
    .block-testimonial-carousel__logos {
        flex-direction: column;
        gap: 10px;
    }
}

@media (min-width: 476px) and (max-width: 1023px) {
    .block-testimonial-carousel__carousel .swiper-container {
        margin-bottom: 0;
        padding-bottom: 450px;
    }
}

@media (max-width: 980px) {
    .block-testimonial-carousel { padding: 50px 0; }
    .block-testimonial-carousel__main { padding: 30px 0 0; }
    .block-testimonial-carousel__carousel { margin-bottom: 30px; }
    .block-testimonial-carousel__logos { padding: 30px 0; }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-testimonial-carousel__quote {
        width: 75%;
        font-size: 32px;
    }
    .block-testimonial-carousel__quote p { line-height: 50px; }
    .block-testimonial-carousel__attribution { width: 45%; }
    .block-testimonial-carousel__logos { gap: 20px; }
    .block-testimonial-carousel__logos-list { font-size: 18px; }
    .block-testimonial-carousel__sep { margin: 0 10px; }
}

@media (max-width: 767px) {
    .block-testimonial-carousel {
        min-height: 0;
        padding: 60px 25px;
    }
    .block-testimonial-carousel .container { width: auto; }
    .block-testimonial-carousel__main { padding-top: 0; }
    .block-testimonial-carousel__carousel .swiper-container { margin-bottom: 0; }
    .block-testimonial-carousel__quote {
        font-family: var(--font-regular);
        font-size: 7vw;
    }
    .block-testimonial-carousel__quote p { line-height: 126%; }
    .block-testimonial-carousel__attribution {
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-testimonial-carousel__arrow {
        width: 36px;
        height: 36px;
    }
    .block-testimonial-carousel__link-wrap { display: none; }
    .block-testimonial-carousel__logos { padding: 0; }
    .block-testimonial-carousel__logos-label { font-size: 14px; }
    .block-testimonial-carousel__logos-list {
        font-size: 3.7vw;
        line-height: 5.55vw; /* live: 150% of the 3.7vw module size, also under the 475px font clamp */
    }
}

/* Plain spacing: the live rules above that only reach a page's first card
   carousel do not apply (60px under the quotes, names in one row). */
@media (min-width: 476px) and (max-width: 1440px) {
    .block-testimonial-carousel--plain .block-testimonial-carousel__carousel .swiper-container {
        margin-bottom: 60px;
        padding-bottom: 0;
    }
}

/* first-open: the quote card keeps 120px under it (live /digital-identity/). */
@media (min-width: 497px) {
    .block-testimonial-carousel--open .block-testimonial-carousel__slide { padding-bottom: 120px; }
}

@media (min-width: 497px) and (max-width: 1024px) {
    .block-testimonial-carousel--plain .block-testimonial-carousel__logos,
    .block-testimonial-carousel--flow .block-testimonial-carousel__logos,
    .block-testimonial-carousel--narrow .block-testimonial-carousel__logos,
    .block-testimonial-carousel--row .block-testimonial-carousel__logos,
    .block-testimonial-carousel--open .block-testimonial-carousel__logos { flex-direction: row; }
}

@media (min-width: 981px) and (max-width: 1024px) {
    .block-testimonial-carousel--plain .block-testimonial-carousel__logos,
    .block-testimonial-carousel--flow .block-testimonial-carousel__logos,
    .block-testimonial-carousel--narrow .block-testimonial-carousel__logos,
    .block-testimonial-carousel--row .block-testimonial-carousel__logos,
    .block-testimonial-carousel--open .block-testimonial-carousel__logos { gap: 50px; }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-testimonial-carousel--plain .block-testimonial-carousel__mark,
    .block-testimonial-carousel--flow.block-testimonial-carousel--narrow .block-testimonial-carousel__mark { max-width: 20%; }
    .block-testimonial-carousel--wide-mark .block-testimonial-carousel__mark { max-width: 30%; }
}

/* 476 to 767px (no baseline width; live overlaps the quote, its attribution and the
   arrows here): the quote takes its own height and the attribution follows it. */
@media (min-width: 476px) and (max-width: 767px) {
    .block-testimonial-carousel__quote { min-height: 0; }
    .block-testimonial-carousel__attribution {
        position: relative;
        margin-top: 20px;
    }
}

@media (max-width: 496px) {
    .block-testimonial-carousel__slide { padding-bottom: 20px; }
    .block-testimonial-carousel__quote { width: 100%; }
    .block-testimonial-carousel__attribution {
        position: relative;
        margin-top: 20px;
    }
    .block-testimonial-carousel__arrow {
        top: -90px;
        width: 45px;
        height: 45px;
    }
    .block-testimonial-carousel__arrow--prev { right: 60px; }
    .block-testimonial-carousel__logos { align-items: flex-start; }
    .block-testimonial-carousel__sep { margin: 0; }
}

@media (max-width: 475px) {
    .block-testimonial-carousel__main { padding-bottom: 60px; }
    .block-testimonial-carousel__quote { margin-bottom: 60px; }
    .block-testimonial-carousel__attribution {
        position: absolute;
        width: 100%;
        margin-top: 0;
    }
    .block-testimonial-carousel__logos-list { font-size: clamp(14px, 3.36vw, 16px); }
}

/* ==== flag-cta tiers ==== */
@media (min-width: 476px) and (max-width: 1279px) {
    .block-flag-cta__heading {
        font-size: 32px;
        line-height: 120%;
    }
}

@media (max-width: 980px) {
    .block-flag-cta { padding: 0 0 40px; }
    .block-flag-cta__row {
        display: block;
        padding: 0;
    }
    .block-flag-cta__media,
    .block-flag-cta__content {
        width: 100%;
        margin-right: 0;
    }
    .block-flag-cta__content { padding: 20px 80px; }
    .block-flag-cta__item { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-flag-cta { padding: 60px 30px; }
    .block-flag-cta .container { width: auto; }
    .block-flag-cta__content { padding: 0; }
    .block-flag-cta__heading {
        margin-top: 20px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-flag-cta__text,
    .block-flag-cta__item { font-size: 4.2vw; }
    .block-flag-cta__item { margin-bottom: 10px; }
    .block-flag-cta__actions { text-align: center; }
    .block-flag-cta .block-flag-cta__flag { width: 100%; }
}

@media (max-width: 475px) {
    /* live columns keep their margins inside (flag 40px + heading 20px) */
    .block-flag-cta__media,
    .block-flag-cta__content { display: flow-root; }
}

/* Cream theme and corner tab tiers (live /public-safety/) */
@media (min-width: 476px) and (max-width: 1279px) {
    .block-flag-cta--cream .block-flag-cta__flag { width: 88%; }
    .block-flag-cta--cream .block-flag-cta__content { padding-left: 0; }
    .block-flag-cta--cream .block-flag-cta__heading { line-height: 120%; }
}

@media (max-width: 980px) {
    .block-flag-cta.block-flag-cta--cream { padding: 0 0 40px; }
}

@media (max-width: 767px) {
    .block-flag-cta.block-flag-cta--cream { padding: 60px 30px; }
    .block-flag-cta--cream .block-flag-cta__heading {
        margin: 0 0 24px;
        line-height: 116%;
    }
    .block-flag-cta--cream .block-flag-cta__text,
    .block-flag-cta--cream .block-flag-cta__item { line-height: 133%; }
}

@media (max-width: 496px) {
    .block-flag-cta--top-tab::after { content: none; }
}

/* Ink theme tiers (live /digital-identity/) */
@media (max-width: 980px) {
    .block-flag-cta--ink .block-flag-cta__row { padding: 0; }
}

@media (max-width: 767px) {
    .block-flag-cta.block-flag-cta--ink { padding: 60px 25px 0; }
    .block-flag-cta--ink .block-flag-cta__flag { margin-bottom: 40px; }
    .block-flag-cta--ink .block-flag-cta__heading {
        margin: 0 0 24px;
        line-height: 112%;
    }
    .block-flag-cta--ink .block-flag-cta__text,
    .block-flag-cta--ink .block-flag-cta__item { line-height: 133%; }
}

/* Ink-cream tablets (live /face-analytics/): stacked like the ink theme, no band padding over the flag, 40px
   under the copy, the copy indented 80px with 30px between the items */
@media (max-width: 980px) {
    .block-flag-cta.block-flag-cta--ink-cream { padding: 0 0 40px; }
    .block-flag-cta--ink-cream .block-flag-cta__content { padding: 20px 80px; }
    .block-flag-cta--ink-cream .block-flag-cta__item { margin-bottom: 30px; }
}

/* Ink-cream phones (live /face-analytics/): 40px under the flag, 60px under the list, 140% lines, 10px between items */
@media (max-width: 767px) {
    .block-flag-cta.block-flag-cta--ink-cream { padding: 60px 25px; }
    .block-flag-cta--ink-cream .block-flag-cta__content { padding: 0; }
    .block-flag-cta--ink-cream .block-flag-cta__flag { margin-bottom: 40px; }
    .block-flag-cta--ink-cream .block-flag-cta__heading { margin: 0 0 24px; }
    .block-flag-cta--ink-cream .block-flag-cta__text,
    .block-flag-cta--ink-cream .block-flag-cta__item { line-height: 140%; }
    .block-flag-cta--ink-cream .block-flag-cta__item { margin-bottom: 10px; }
    .block-flag-cta--ink-cream .block-flag-cta__item:last-child { margin-bottom: 0; }
}

/* Ink-top theme tiers (live /roc-watch-schools/) */
@media (max-width: 1440px) {
    .block-flag-cta--ink-top .block-flag-cta__heading br,
    .block-flag-cta--ink-top .block-flag-cta__text br { display: none; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-flag-cta.block-flag-cta--ink-top { padding-bottom: 0; }
}

@media (max-width: 980px) {
    .block-flag-cta--ink-top .block-flag-cta__content { padding: 0; }
    .block-flag-cta--ink-top .block-flag-cta__text { margin-bottom: 30px; }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-flag-cta--ink-top .block-flag-cta__heading {
        font-size: 32px;
        line-height: 120%;
    }
    .block-flag-cta--ink-top .btn--outline { font-size: 3.7vw; }
}

@media (max-width: 475px) {
    .block-flag-cta--ink-top .block-flag-cta__heading { line-height: 116%; }
    /* live keeps the steel border on tap (.coe-btn rule) */
    .block-flag-cta--ink-top .btn--outline:hover { border-color: var(--color-steel); }
}

@media (max-width: 767px) {
    .block-flag-cta.block-flag-cta--ink-top { padding: 60px 25px; }
    .block-flag-cta--ink-top .block-flag-cta__flag { margin-bottom: 40px; }
    .block-flag-cta--ink-top .block-flag-cta__heading { margin: 0 0 24px; }
    .block-flag-cta--ink-top .block-flag-cta__text {
        width: 90%;
        margin-bottom: 40px;
        line-height: 133%;
    }
}

/* Steel theme tiers (live /watch/). The pill sits 25px under the copy at every width, as on phones
   (live shows it on phones only; desktop and tablets too per Evan, DIGITAL-298): the copy keeps its
   3.093% margin over 981px and the padding makes up the rest (both are % of the column width; flex so the
   smaller 1281 to 1440px pill is not lifted by the line box). Steel-top
   pages hide their pill on desktop and tablets and keep the empty row flat. */
@media (min-width: 981px) {
    .block-flag-cta--steel:not(.block-flag-cta--steel-top) .block-flag-cta__actions {
        display: flex;
        margin-top: 0;
        padding-top: calc(25px - 3.093%);
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .block-flag-cta.block-flag-cta--steel { padding-bottom: 150px; }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-flag-cta.block-flag-cta--steel { padding: 60px 0; }
    .block-flag-cta--steel .block-flag-cta__text { width: auto; }
}

@media (min-width: 768px) and (max-width: 980px) {
    .block-flag-cta--steel:not(.block-flag-cta--steel-top) .block-flag-cta__actions { margin-top: -5px; }
}

@media (max-width: 767px) {
    .block-flag-cta.block-flag-cta--steel { padding: 60px 25px; }
    .block-flag-cta--steel .block-flag-cta__text { width: auto; }
}

/* Ink-top-short theme tiers (live /sdk/): heading line breaks stay down to 476px,
   copy line breaks down to 1280px; tablets keep 150px over and under the
   stacked flag and copy (no gaps between them); phones 0 25 60. */
@media (min-width: 476px) and (max-width: 1440px) {
    .block-flag-cta--ink-top-short .block-flag-cta__heading br { display: inline; }
}

@media (min-width: 1280px) and (max-width: 1440px) {
    .block-flag-cta--ink-top-short .block-flag-cta__text br { display: inline; }
}

@media (min-width: 476px) and (max-width: 1279px) {
    .block-flag-cta--ink-top-short .block-flag-cta__text br { display: none; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-flag-cta.block-flag-cta--ink-top-short { padding-bottom: 150px; }
}

@media (max-width: 980px) {
    .block-flag-cta.block-flag-cta--ink-top-short { padding: 150px 0; }
    .block-flag-cta--ink-top-short .block-flag-cta__flag { margin-bottom: 0; }
    .block-flag-cta--ink-top-short .block-flag-cta__text { margin-bottom: 0; }
}

@media (max-width: 767px) {
    .block-flag-cta.block-flag-cta--ink-top-short { padding: 0 25px 60px; }
    .block-flag-cta--ink-top-short .block-flag-cta__flag { margin-bottom: 40px; }
}

@media (max-width: 475px) {
    .block-flag-cta--ink-top-short .block-flag-cta__heading br,
    .block-flag-cta--ink-top-short .block-flag-cta__text br { display: none; }
}

/* Steel-top theme tiers (live capability pages): tablets stack the flag (88% wide) over
   the heading with 150px over and under and 20px under the heading; phones 0 25 60, 60px
   under the flag, 40px under the heading, the centred pill at 3.7vw (476 to 767px). */
@media (min-width: 476px) and (max-width: 980px) {
    .block-flag-cta.block-flag-cta--steel-top { padding: 150px 0; }
    .block-flag-cta--steel-top .block-flag-cta__heading { margin-bottom: 20px; }
}

@media (max-width: 767px) {
    .block-flag-cta.block-flag-cta--steel-top { padding: 0 25px 60px; }
    .block-flag-cta--steel-top .block-flag-cta__flag { margin-bottom: 40px; }
    .block-flag-cta--steel-top .block-flag-cta__heading { margin-bottom: 40px; }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-flag-cta--steel-top .btn--ink { font-size: 3.7vw; }
}

/* ==== product-tabs tiers ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-product-tabs__stage { height: auto; }
}

@media (min-width: 476px) and (max-width: 1279px) {
    .block-product-tabs__bg { object-position: 50% 50%; }
    .block-product-tabs__text { width: 50%; }
}

@media (max-width: 980px) {
    .block-product-tabs__backgrounds { display: none; }
    .block-product-tabs__stage { padding: 60px 0 180px; }
    .block-product-tabs__panels { margin-bottom: 150px; }
    .block-product-tabs__tabs { margin-top: 0; }
}

@media (max-width: 767px) {
    .block-product-tabs { padding-bottom: 96px; }
    .block-product-tabs__stage {
        height: auto;
        padding: 96px 0 0;
    }
    .block-product-tabs .container { width: auto; }
    .block-product-tabs__head { padding: 0 30px; }
    .block-product-tabs__eyebrow {
        margin-bottom: 60px;
        font-size: 3.25vw;
    }
    .block-product-tabs__panels {
        height: auto;
        margin-bottom: 0;
        padding: 0;
    }
    .block-product-tabs__panel { display: block; }
    .block-product-tabs__panel + .block-product-tabs__panel { margin-top: 80px; }
    .block-product-tabs__phone-image {
        display: block;
        margin-bottom: 30px;
        line-height: 0;
    }
    .block-product-tabs__phone-image img { width: 100%; }
    .block-product-tabs__logo {
        min-height: 0;
        margin: 0 0 40px 30px;
    }
    .block-product-tabs__logo--w250 { width: 250px; }
    .block-product-tabs__logo--w220 { width: 220px; }
    .block-product-tabs__logo--w90 { width: 90%; }
    .block-product-tabs__logo img { width: 100%; }
    .block-product-tabs__text {
        width: 100%;
        min-height: 0;
        margin-bottom: 30px;
        padding: 0 30px;
        font-size: 4.2vw;
    }
    .block-product-tabs__text p br { display: none; }
    .block-product-tabs__heading {
        font-family: var(--font-bold);
        font-size: 5.6vw;
        line-height: 125%;
    }
    .block-product-tabs__actions { margin: 0 0 0 30px; }
    .block-product-tabs__actions .btn.btn--outline {
        padding: 12px 50px 12px 30px;
        font-size: 3.7vw;
    }
    /* live phone twin buttons use the padded 22px chevron icon */
    .block-product-tabs__actions .btn--outline::before,
    .block-product-tabs__actions .btn--outline:hover::before { background-image: url("assets/images/chevron-rust-small.svg"); }
    .block-product-tabs__tabs { display: none; }
}

/* Tall stage (live /public-safety/) */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-product-tabs--tall .block-product-tabs__stage { height: auto; }
}

@media (max-width: 980px) {
    .block-product-tabs--tall .block-product-tabs__eyebrow { font-size: 0.97vw; }
}

@media (max-width: 767px) {
    .block-product-tabs.block-product-tabs--tall { padding-bottom: 60px; }
    .block-product-tabs--tall .block-product-tabs__stage {
        height: auto;
        padding-top: 30px;
    }
    .block-product-tabs--tall .block-product-tabs__head { padding: 0 25px; }
    .block-product-tabs--tall .block-product-tabs__eyebrow {
        font-size: 3.25vw;
        line-height: 20px;
    }
    .block-product-tabs--tall .block-product-tabs__logo { margin-left: 25px; }
    .block-product-tabs--tall .block-product-tabs__text { padding: 0 25px; }
    .block-product-tabs--tall .block-product-tabs__actions { margin-left: 25px; }
}

/* Capability stage (live capability pages): the copy column at most 1220px wide from 1024
   to 1600px; the logo at its own width up to 980px; phones 96px over and under the
   products, 40px under the eyebrow, picture, logo and copy, 60px between products. */
@media (min-width: 1024px) and (max-width: 1600px) {
    .block-product-tabs--capability .block-product-tabs__panels { max-width: 1220px; }
}

/* above 1920px live contains the background in the bottom right corner (site-wide .products rule) */
@media (min-width: 1921px) {
    .block-product-tabs--capability .block-product-tabs__bg { object-fit: contain; }
}

@media (max-width: 980px) {
    .block-product-tabs--capability .block-product-tabs__logo { width: auto; }
}

@media (max-width: 767px) {
    .block-product-tabs.block-product-tabs--capability { padding-bottom: 96px; }
    .block-product-tabs--capability .block-product-tabs__stage { padding-top: 96px; }
    .block-product-tabs--capability .block-product-tabs__eyebrow,
    .block-product-tabs--capability .block-product-tabs__phone-image,
    .block-product-tabs--capability .block-product-tabs__text { margin-bottom: 40px; }
    .block-product-tabs--capability .block-product-tabs__panel + .block-product-tabs__panel { margin-top: 60px; }
    .block-product-tabs--capability .block-product-tabs__logo--w212 { width: 212px; }
    .block-product-tabs--capability .block-product-tabs__logo--w220 { width: 220px; }
    .block-product-tabs--capability .block-product-tabs__logo--w250 { width: 250px; }
    .block-product-tabs--capability .block-product-tabs__logo img { width: 100%; }
    .block-product-tabs--capability .block-product-tabs__text p br { display: inline; }
}

/* Single stage (live /digital-identity/) */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-product-tabs--single .block-product-tabs__stage { height: auto; }
}

@media (min-width: 476px) and (max-width: 1279px) {
    .block-product-tabs--single .block-product-tabs__bg { object-position: 100% 100%; }
}

@media (max-width: 980px) {
    .block-product-tabs--single .block-product-tabs__backgrounds { display: block; }
    .block-product-tabs--single .block-product-tabs__eyebrow { font-size: 0.97vw; }
    .block-product-tabs--single .block-product-tabs__panels { margin-bottom: 151px; } /* hardcoded: 150px row margin plus the empty 1px tab row */
}

@media (max-width: 767px) {
    .block-product-tabs.block-product-tabs--single { padding-bottom: 96px; }
    .block-product-tabs--single .block-product-tabs__stage { height: auto; }
    .block-product-tabs--single .block-product-tabs__backgrounds { display: none; }
    .block-product-tabs--single .block-product-tabs__panels { margin-bottom: 0; }
    .block-product-tabs--single .block-product-tabs__head { padding: 0 25px; }
    .block-product-tabs--single .block-product-tabs__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
        line-height: 20px;
    }
    .block-product-tabs--single .block-product-tabs__phone-image { margin-bottom: 40px; }
    .block-product-tabs--single .block-product-tabs__logo { margin: 0 0 40px 25px; }
    .block-product-tabs__logo--w212 { width: 212px; }
    .block-product-tabs--single .block-product-tabs__text {
        margin-bottom: 40px;
        padding: 0 25px;
    }
    .block-product-tabs--single .block-product-tabs__actions { margin-left: 25px; }
}

@media (max-width: 475px) {
    .block-product-tabs__actions .btn.btn--outline { font-size: 4.2vw; }
}

/* ==== feature-carousel tiers (live /public-safety/ "APPLICATIONS") ==== */
@media (max-width: 1900px) {
    .block-feature-carousel .swiper-container { padding-bottom: 6vw; }
}

@media (max-width: 1440px) {
    .block-feature-carousel .swiper-container { padding-bottom: 250px; }
}

/* live: exactly 1280px wide (a common laptop) has 150px under the cards */
@media (min-width: 1280px) and (max-width: 1280px) {
    .block-feature-carousel .swiper-container { padding-bottom: 150px; }
}

@media (max-width: 1024px) {
    .block-feature-carousel .swiper-container { padding-bottom: 450px; }
}

@media (max-width: 1023px) {
    .block-feature-carousel__title { margin: 0; }
}

@media (max-width: 980px) {
    .block-feature-carousel { padding: 11.8vw 0 0; }
    /* Live tablet quirk kept for parity: the eyebrow row sits at the left edge,
       0.97vw type, 456px above the cards. */
    .block-feature-carousel__head {
        width: 90%;
        margin: 0 7px 456px 0;
    }
    .block-feature-carousel__eyebrow { font-size: 0.97vw; }
}

@media (max-width: 767px) {
    .block-feature-carousel { padding: 56px 25px 40px; }
    .block-feature-carousel .container { width: auto; }
    .block-feature-carousel .block-feature-carousel__head {
        width: 90%;
        margin-bottom: 40px;
    }
    .block-feature-carousel__eyebrow { font-size: 3.25vw; }
    /* One card per view (live breaks its layout from 497 to 767px, not copied). */
    .block-feature-carousel__slide.swiper-slide-active,
    .block-feature-carousel__slide.swiper-slide-next { max-width: none; }
    .block-feature-carousel__slide:not(.swiper-slide-active):not(.swiper-slide-next) { min-width: 0; }
    .block-feature-carousel__slide:not(.swiper-slide-active):not(.swiper-slide-next) .block-feature-carousel__card { margin-right: 0; }
    .block-feature-carousel__title { font-size: 6.5vw; }
    .block-feature-carousel__text { font-size: 4.2vw; }
}

@media (max-width: 496px) {
    .block-feature-carousel .swiper-slide.block-feature-carousel__slide { height: auto; }
}

@media (max-width: 496px) {
    /* live drops the hover pull-up of accordion rows on phones */
    .block-accordion-list--dark .block-accordion-list__item:hover { margin: 0; }
}

@media (max-width: 475px) {
    .block-feature-carousel .swiper-container { padding-bottom: 100px; }
}

/* ==== feature-carousel "pair" variant tiers (live /enroll/). Tablets: live puts the
   heading row at the screen edge (eyebrow and heading at x 0) with 456px under it; the
   theme keeps the 456px but lines the heading up with the carousel (any-width rule). ==== */
@media (min-width: 1400px) {
    .block-feature-carousel--pair .swiper-slide.block-feature-carousel__slide { height: 550px; }
}

@media (max-width: 1900px) {
    .block-feature-carousel--pair .swiper-container { padding-bottom: 6vw; }
}

@media (max-width: 1440px) {
    .block-feature-carousel--pair .swiper-container { padding-bottom: 250px; }
}

@media (max-width: 1024px) {
    .block-feature-carousel--pair .swiper-container { padding-bottom: 450px; }
}

@media (max-width: 1023px) {
    .block-feature-carousel--pair .block-feature-carousel__title { margin: 25px 0 15px; }
    .block-feature-carousel--pair .block-feature-carousel__body { padding: 20px; }
}

@media (max-width: 980px) {
    .block-feature-carousel--pair .block-feature-carousel__head {
        width: var(--container-width);
        margin: 0 auto 456px;
    }
    .block-feature-carousel--pair .block-feature-carousel__eyebrow { font-size: 0.97vw; }
    .block-feature-carousel--pair .block-feature-carousel__heading { width: 100%; }
}

@media (max-width: 767px) {
    .block-feature-carousel.block-feature-carousel--pair { padding: 0 25px 60px; }
    .block-feature-carousel--pair .block-feature-carousel__head {
        width: auto;
        margin: 0;
    }
    .block-feature-carousel--pair .block-feature-carousel__eyebrow {
        margin: 0;
        padding-bottom: 40px;
        font-size: 3.25vw;
    }
    .block-feature-carousel--pair .block-feature-carousel__heading {
        width: 90%;
        margin-bottom: 40px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-feature-carousel--pair .block-feature-carousel__title { font-size: 5.6vw; }
}

@media (max-width: 475px) {
    .block-feature-carousel--pair .block-feature-carousel__heading br { display: none; }
    .block-feature-carousel--pair .swiper-slide.block-feature-carousel__slide { height: 500px; }
    .block-feature-carousel--pair .swiper-container { padding-bottom: 140px; }
    .block-feature-carousel--pair .block-feature-carousel__body { padding: 0; }
}

/* ==== feature-carousel "duo" variant tiers (live capability pages): 15vw under the cards
   from 1441 to 1900px, the public-safety tiers below (250 / 150 at 1280 / 450 / 100px);
   titles keep 25px over and 15px under; tablets and phones 20px under the copy; phones
   96 25 60 with 80px under the full-width eyebrow. ==== */
@media (min-width: 1441px) and (max-width: 1900px) {
    .block-feature-carousel--duo .swiper-container,
    .block-feature-carousel--capabilities .swiper-container,
    .block-feature-carousel--short .swiper-container { padding-bottom: 15vw; }
}

@media (min-width: 1901px) {
    .block-feature-carousel--capabilities .swiper-container,
    .block-feature-carousel--short .swiper-container { padding-bottom: 150px; }
}

@media (max-width: 1440px) {
    .block-feature-carousel--duo .swiper-container { padding-bottom: 250px; }
}

@media (min-width: 981px) and (max-width: 1440px) {
    .block-feature-carousel--duo .block-feature-carousel__body { padding-bottom: 0; }
}

@media (min-width: 1280px) and (max-width: 1280px) {
    .block-feature-carousel--duo .swiper-container { padding-bottom: 150px; }
}

@media (max-width: 1024px) {
    .block-feature-carousel--duo .swiper-container { padding-bottom: 450px; }
}

@media (max-width: 1023px) {
    .block-feature-carousel--duo .block-feature-carousel__title { margin: 25px 0 15px; }
}

/* Any-width rule: live puts the tablet eyebrow at the screen edge and the arrows right on the
   next section's eyebrow; the theme keeps the 456px but lines the eyebrow up with the carousel
   and leaves 40px under the arrows. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-feature-carousel.block-feature-carousel--duo { padding-bottom: 40px; }
    .block-feature-carousel--duo .block-feature-carousel__head {
        width: var(--container-width);
        margin: 0 auto 456px;
    }
}

@media (max-width: 767px) {
    .block-feature-carousel.block-feature-carousel--duo { padding: 96px 25px 60px; }
    .block-feature-carousel--duo .block-feature-carousel__head.container {
        width: auto;
        margin: 0 0 80px;
    }
}

@media (max-width: 475px) {
    .block-feature-carousel--duo .swiper-container { padding-bottom: 100px; }
}

/* ==== feature-carousel "overlap" variant tiers (live /roc-watch-schools/) ==== */
@media (min-width: 1901px) {
    .block-feature-carousel--overlap .swiper-container { padding-bottom: 150px; }
}

@media (min-width: 1441px) and (max-width: 1900px) {
    .block-feature-carousel--overlap .swiper-container { padding-bottom: 15vw; }
}

@media (max-width: 1023px) {
    .block-feature-carousel--overlap .block-feature-carousel__title { margin: 25px 0 15px; }
}

@media (max-width: 980px) {
    .block-feature-carousel--overlap { padding: 0 0 80px; }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-feature-carousel--overlap .swiper-container { padding-bottom: 550px; }
}

@media (max-width: 767px) {
    .block-feature-carousel--overlap { padding: 40px 15px 60px; }
    .block-feature-carousel--overlap .block-feature-carousel__title { font-size: 5.6vw; }
}

@media (max-width: 475px) {
    .block-feature-carousel--overlap .swiper-container { padding-bottom: 140px; }
}

/* ==== testimonial-carousel "plain-flow" spacing: phones hide the link, its margins stay ==== */
@media (max-width: 767px) {
    .block-testimonial-carousel--flow .block-testimonial-carousel__link-wrap {
        display: block;
        margin: -30px 0 40px;
    }
    .block-testimonial-carousel--flow .block-testimonial-carousel__link { display: none; }
}

/* ==== testimonial-carousel "plain-flow-snug" (live /watch/ tablet rule) ==== */
@media (min-width: 476px) and (max-width: 980px) {
    .block-testimonial-carousel.block-testimonial-carousel--snug .block-testimonial-carousel__link-wrap { margin: -85px 0 40px; }
}

/* ==== stats-counters tiers (live /physical-security/ sections 3 to 5) ==== */
@media (min-width: 1675px) {
    .block-stats-counters__stage { padding: 50px 0; }
    .block-stats-counters__deco { padding: 33px 0; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    /* The cut-out bands zoom with the content rows (live image rows). */
    .block-stats-counters__deco {
        width: 125%;
        zoom: 0.8;
    }
}

@media (min-width: 1024px) and (max-width: 1600px) {
    .block-stats-counters__text { max-width: clamp(720px, 57vw, 850px); }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-stats-counters__actions { padding: 60px 0 120px; }
}

@media (min-width: 476px) and (max-width: 1279px) {
    .block-stats-counters__deco-media { width: 20%; }
}

@media (max-width: 980px) {
    .block-stats-counters__stage { padding: 50px 0; }
    .block-stats-counters__deco { padding: 30px 0; }
    .block-stats-counters__row { display: block; }
    .block-stats-counters__col {
        width: 100%;
        margin-right: 0;
    }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-stats-counters__number { font-size: 60px; }
}

@media (max-width: 767px) {
    .block-stats-counters__intro { padding: 0 5px 24px 25px; }
    .block-stats-counters .container { width: 100%; }
    .block-stats-counters__heading { font-size: 8.4vw; }
    .block-stats-counters__text { font-size: 4.2vw; }
    .block-stats-counters__deco--top { display: none; }
    .block-stats-counters__deco--side .block-stats-counters__deco-media { transform: translateY(var(--motion-y, -150px)); }
    /* The background becomes a picture above the counters. */
    .block-stats-counters__stage {
        display: flow-root;
        min-height: 0;
        padding: 0 15px;
    }
    /* Cropped to the laptop so it fills the frame (Evan, DIGITAL-321): the 1840 x 1520 box from x 560 of the
       2880 x 1742 laptop picture, the only stats-counters background (/physical-security/). */
    .block-stats-counters__bg {
        display: block;
        aspect-ratio: 1840 / 1520;
        margin-bottom: 40px;
        overflow: hidden;
        line-height: 0;
    }
    .block-stats-counters__bg img {
        position: static;
        width: 156.52%;
        height: auto;
        margin-left: -30.43%;
    }
    .block-stats-counters__counter { margin-bottom: 30px; }
    .block-stats-counters__number {
        font-size: 13.5vw;
        line-height: 100%;
        text-align: center;
    }
    .block-stats-counters__label {
        font-size: 4.2vw;
        text-align: center;
    }
    .block-stats-counters__actions { padding: 0 0 96px; }
    .block-stats-counters__actions .btn.btn--outline {
        height: 44px;
        font-size: 4.2vw;
    }
}

@media (max-width: 475px) {
    .block-stats-counters__heading br { display: none; }
    .block-stats-counters__deco-media { width: 145px; }
}

/* ==== stats-counters footnote tiers (live /watch/, /roc-watch-schools/: the Divi row padding) ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-stats-counters__footnote { padding-top: 2.5vw; }
}

@media (min-width: 981px) and (max-width: 1024px) {
    .block-stats-counters__footnote { padding-top: 2vw; }
}

@media (max-width: 980px) {
    .block-stats-counters__footnote { padding-top: 30px; }
}

/* Phones, plain variant (/physical-security/): space between the footnote and the Learn More button. */
@media (max-width: 767px) {
    .block-stats-counters:not(.block-stats-counters--band):not(.block-stats-counters--bone):not(.block-stats-counters--ink) .block-stats-counters__footnote { padding-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-stats-counters .block-stats-counters__footnote.container { width: var(--container-width); }
}

/* ==== stats-counters "band" variant tiers (live /roc-watch-schools/) ==== */
@media (max-width: 1440px) {
    .block-stats-counters--band .block-stats-counters__text br { display: none; }
}

@media (max-width: 980px) {
    .block-stats-counters--band { padding: 40px 0; }
    .block-stats-counters--band .block-stats-counters__heading { padding-bottom: 30px; }
    .block-stats-counters--band .block-stats-counters__text { padding-bottom: 45px; }
    .block-stats-counters--band .block-stats-counters__counter {
        max-width: 80%;
        text-align: left;
    }
}

/* Three columns from 768px only: from 476 to 767px live squeezes them until the figures and the
   labels break mid-word over each other; the phone stack is kept there (any-width rule). */
@media (min-width: 768px) and (max-width: 980px) {
    .block-stats-counters--band .block-stats-counters__row { display: flex; }
    .block-stats-counters--band .block-stats-counters__col { flex: 1 1 0; }
    .block-stats-counters--band .block-stats-counters__number { font-size: 60px; }
}

@media (max-width: 767px) {
    .block-stats-counters--band { padding: 96px 25px; }
    .block-stats-counters--band .block-stats-counters__heading {
        margin-bottom: 14px;
        padding-bottom: 10px;
        line-height: 116%;
        text-align: center;
    }
    .block-stats-counters--band .block-stats-counters__text {
        margin-bottom: 30px;
        padding-bottom: 0;
        font-size: 16px;
        text-align: center;
    }
    .block-stats-counters--band .block-stats-counters__counter {
        max-width: 60%;
        margin-bottom: 30px;
        text-align: center;
    }
    .block-stats-counters--band .block-stats-counters__col:last-child .block-stats-counters__counter { margin-bottom: 0; }
}

@media (max-width: 475px) {
    .block-stats-counters--band .block-stats-counters__text br { display: none; }
}

/* ==== stats-counters "bone" variant tiers (live /watch/) ==== */
@media (min-width: 981px) and (max-width: 1280px) {
    .block-stats-counters.block-stats-counters--bone { padding-top: 0; }
}

@media (max-width: 980px) {
    .block-stats-counters.block-stats-counters--bone { padding: 0 0 60px; }
    .block-stats-counters--bone .block-stats-counters__heading {
        margin-bottom: 45px;
        padding-bottom: 10px;
    }
    .block-stats-counters--bone .block-stats-counters__counter { text-align: center; }
    .block-stats-counters--bone .block-stats-counters__figure { margin-bottom: 20px; }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-stats-counters--bone .block-stats-counters__label { line-height: 120%; }
    /* live .percent flex row: the number keeps one line and overflows centred */
    .block-stats-counters--bone .block-stats-counters__figure {
        display: flex;
        justify-content: center;
    }
    .block-stats-counters--bone .block-stats-counters__number { line-height: 120%; }
}

@media (max-width: 767px) {
    .block-stats-counters.block-stats-counters--bone { padding: 90px 25px 36px; }
    .block-stats-counters--bone .block-stats-counters__intro .container { padding-top: 0; }
    .block-stats-counters--bone .block-stats-counters__heading { margin-bottom: 30px; }
    .block-stats-counters--bone .block-stats-counters__counter {
        max-width: 80%;
        margin-bottom: 30px;
    }
    .block-stats-counters--bone .block-stats-counters__col:last-child .block-stats-counters__counter {
        max-width: 60%;
        margin-bottom: 0;
    }
}

@media (max-width: 475px) {
    .block-stats-counters--bone .block-stats-counters__heading br { display: inline; }
    .block-stats-counters--band .block-stats-counters__figure,
    .block-stats-counters--bone .block-stats-counters__figure {
        height: auto;
        margin-bottom: 14px;
    }
}

/* ==== numbered-grid "ready" style tiers ==== */
@media (min-width: 1675px) {
    .block-numbered-grid__below { padding: 33px 0; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    /* 2% of the section inside the zoomed row (live row padding) */
    .block-numbered-grid__below { padding: 2.5vw 0; }
}

@media (max-width: 980px) {
    .block-numbered-grid.block-numbered-grid--ready { padding: 11.8vw 0 0; }
    /* Live quirk kept: the heading row is 90% wide and starts at the left edge. */
    .block-numbered-grid--ready .block-numbered-grid__head {
        display: flow-root; /* live row: the intro margin stays inside */
        width: 112.5%;
        margin: 0 0 456px -12.5%;
    }
    .block-numbered-grid--ready .block-numbered-grid__eyebrow { margin-bottom: 126px; }
    .block-numbered-grid--ready .block-numbered-grid__heading { margin-bottom: 30px; }
    .block-numbered-grid--ready .block-numbered-grid__grid {
        display: block;
        margin-bottom: 40px;
    }
    .block-numbered-grid--ready .block-numbered-grid__item:nth-child(3) { margin-top: 40px; }
    .block-numbered-grid--ready .block-numbered-grid__number {
        font-size: 87px;
        line-height: 87px;
    }
    .block-numbered-grid--ready .block-numbered-grid__body { text-align: left; }
    .block-numbered-grid--ready .block-numbered-grid__title {
        width: 70%;
        font-family: var(--font-bold);
        font-size: 28px;
        line-height: 36px;
        color: var(--color-steel);
    }
    .block-numbered-grid__below { padding: 30px 0; }
}

@media (max-width: 767px) {
    .block-numbered-grid.block-numbered-grid--ready { padding: 0 25px; }
    .block-numbered-grid--ready .container { width: 100%; }
    .block-numbered-grid--ready .block-numbered-grid__head {
        width: auto;
        margin: 0;
    }
    .block-numbered-grid--ready .block-numbered-grid__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
        line-height: 142%;
    }
    .block-numbered-grid--ready .block-numbered-grid__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
        line-height: 112%;
    }
    .block-numbered-grid--ready .block-numbered-grid__intro {
        margin-bottom: 40px;
        font-size: 4.2vw;
    }
    .block-numbered-grid--ready .block-numbered-grid__grid { margin-bottom: 0; }
    .block-numbered-grid--ready .block-numbered-grid__item:nth-child(3) { margin-top: 0; }
    .block-numbered-grid--ready .block-numbered-grid__item:not(:last-child) { margin-bottom: 24px; }
    .block-numbered-grid--ready .block-numbered-grid__number {
        display: block;
        margin-bottom: 18px;
        font-size: 5.6vw;
        line-height: 100%;
    }
    .block-numbered-grid--ready .block-numbered-grid__title {
        width: auto;
        font-family: var(--font-medium);
        font-size: 5.6vw;
        line-height: 100%;
        color: var(--color-cream);
    }
    .block-numbered-grid__below {
        width: 100%;
        padding: 96px 0;
    }
    /* /physical-security/ hazard stripe (the only "ready" grid with a picture below that is not "roomy"): the
       next section's 60px top padding plus 42px leaves the same 106px from the stripe to the "Request a free
       trial" letters as from the "Powered by responsible AI" letters to the stripe (Evan, DIGITAL-321). */
    .block-numbered-grid--ready:not(.block-numbered-grid--roomy) .block-numbered-grid__below { padding-bottom: 42px; }
}

@media (max-width: 475px) {
    .block-numbered-grid--ready .block-numbered-grid__heading br,
    .block-numbered-grid--ready .block-numbered-grid__intro br { display: none; }
    .block-numbered-grid--ready .block-numbered-grid__title { padding-bottom: 10px; }
    .block-numbered-grid--ready .block-numbered-grid__body { display: block; }
}

/* ==== numbered-grid "advantage" style tiers (live /enroll/). Up to 1279px the numbers
   print at 54px in their 1.45vw line (live .services rule); 981 to 1024px the column
   items are 20px apart; tablets stack the columns with 87px number lines, 70% wide
   titles and copy; phones keep 25px sides, 5.6vw numbers and titles, Poppins copy
   like live, and the picture edge to edge 40px under the last item. ==== */
@media (max-width: 1279px) {
    .block-numbered-grid--advantage .block-numbered-grid__number {
        font-size: 54px;
        line-height: 2.175vw;
    }
}

@media (min-width: 981px) and (max-width: 1024px) {
    .block-numbered-grid--advantage .block-numbered-grid__item:nth-child(n) {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .block-numbered-grid--advantage .block-numbered-grid__body {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 980px) {
    .block-numbered-grid.block-numbered-grid--advantage { padding: 60px 0 0; }
    .block-numbered-grid--advantage .block-numbered-grid__eyebrow {
        margin: 0 25px 30px;
        font-size: 0.97vw;
    }
    .block-numbered-grid--advantage .block-numbered-grid__heading { margin-bottom: 30px; }
    .block-numbered-grid--advantage .block-numbered-grid__intro {
        width: 70%;
        margin-bottom: 60px;
    }
    .block-numbered-grid--advantage .block-numbered-grid__grid {
        display: block;
        margin-bottom: 40px;
    }
    .block-numbered-grid--advantage .block-numbered-grid__item:nth-child(n) {
        width: 100%;
        margin: 0;
    }
    .block-numbered-grid--advantage .block-numbered-grid__number {
        line-height: 87px;
    }
    .block-numbered-grid--advantage .block-numbered-grid__body { text-align: left; }
    .block-numbered-grid--advantage .block-numbered-grid__title {
        width: 70%;
        margin-bottom: 50px;
        font-size: 28px;
        line-height: 36px;
    }
    .block-numbered-grid--advantage .block-numbered-grid__body p { width: 70%; }
}

/* Live quirk kept: from 476 to 980px the copy of the last column runs full width. */
@media (min-width: 476px) and (max-width: 980px) {
    .block-numbered-grid--advantage .block-numbered-grid__item:last-child .block-numbered-grid__body p { width: 100%; }
}

@media (max-width: 767px) {
    .block-numbered-grid.block-numbered-grid--advantage { padding: 0; }
    .block-numbered-grid--advantage .container { width: 100%; }
    .block-numbered-grid--advantage .block-numbered-grid__head,
    .block-numbered-grid--advantage .block-numbered-grid__grid { padding: 0 25px; }
    .block-numbered-grid--advantage .block-numbered-grid__eyebrow {
        margin: 0 0 40px;
        font-size: 3.25vw;
    }
    .block-numbered-grid--advantage .block-numbered-grid__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-numbered-grid--advantage .block-numbered-grid__intro {
        width: 100%;
        margin-bottom: 40px;
        font-size: 4.2vw;
    }
    .block-numbered-grid--advantage .block-numbered-grid__grid { margin-bottom: 0; }
    .block-numbered-grid--advantage .block-numbered-grid__item:not(:last-child) { margin-bottom: 40px; }
    .block-numbered-grid--advantage .block-numbered-grid__number {
        display: block;
        margin-bottom: 18px;
        line-height: 5.6vw;
    }
    .block-numbered-grid--advantage .block-numbered-grid__title {
        width: 100%;
        margin-bottom: 14px;
        padding-bottom: 10px;
        font-size: 5.6vw;
        line-height: 100%;
    }
    .block-numbered-grid--advantage .block-numbered-grid__body { display: block; }
    .block-numbered-grid--advantage .block-numbered-grid__body a { font-family: var(--font-regular); }
    .block-numbered-grid--advantage .block-numbered-grid__body p {
        width: 100%;
        font-family: var(--font-poppins);
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-numbered-grid--advantage .block-numbered-grid__below:nth-child(n) {
        width: 100%;
        padding: 40px 0 0;
    }
}

@media (max-width: 475px) {
    .block-numbered-grid--advantage .block-numbered-grid__number { font-size: 5.6vw; }
    .block-numbered-grid--advantage .block-numbered-grid__title br { display: none; }
}

/* ==== flow-steps tiers (live /enroll/ s3). Tablets: live keeps the 719px cards (they run
   past the screen edge below about 900px) and at 768px shows only four steps with no way
   to the rest; the theme keeps every card inside the column and shows all steps. Phones:
   25px sides, the first `phone_rows` steps and a centred 44px "View More" pill (live
   turns it into a 24px full-width bar from 476 to 767px; the theme keeps the pill). ==== */
@media (max-width: 980px) {
    .block-flow-steps { padding: 60px 0 180px; }
    .block-flow-steps__eyebrow {
        margin: 0 25px 30px;
        font-size: 0.97vw;
    }
    .block-flow-steps__heading { margin-bottom: 0; }
}

@media (max-width: 767px) {
    .block-flow-steps { padding: 96px 25px; }
    .block-flow-steps .container { width: 100%; }
    .block-flow-steps__eyebrow {
        margin: 0 0 40px;
        font-size: 3.25vw;
    }
    .block-flow-steps__heading {
        margin-bottom: 40px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-flow-steps__step { margin-bottom: 24px; }
    .block-flow-steps__step.is-collapsed { display: none; }
    .block-flow-steps__step.is-collapsed.is-revealed { display: block; }
    .block-flow-steps__card {
        padding: 24px;
        font-size: 4.2vw;
    }
    .block-flow-steps__title { font-size: 5.6vw; }
    .block-flow-steps__more {
        display: block;
        padding-top: 40px;
        text-align: center;
    }
    .block-flow-steps .block-flow-steps__more .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 150px;
        height: 44px;
        padding: 0 24px;
        font-size: 3.7vw;
    }
    .block-flow-steps__more .btn::before { content: none; }
    .block-flow-steps__more .btn[hidden] { display: none; }
}

/* ==== spec-columns tiers (live /enroll/ s5). Up to 1024px live lets an item's pieces
   wrap as flex rows (link alone on a line, "#1" apart from its words) until the copy
   runs three lines over the next item; the theme flows an item with a link as one text
   block, centred in the 38px slot when it fits one line (any-width rule). Tablets: groups stacked, the
   eyebrow lined up with the column (live: at the screen edge) with the live 456px
   under it. Above 1920px live sets 42px headings and 22px items (the "#1" item runs
   three lines over the next one there too, so it flows as one block as well). Phones: 25px sides, 5.6vw headings, 4vw items, 40px between groups. ==== */
@media (min-width: 1921px) {
    .block-spec-columns__heading { font-size: 42px; }
    .block-spec-columns__list { font-size: 22px; }
    .block-spec-columns__list li:has(a) {
        display: block;
        padding-top: calc((38px - 1lh) / 2);
    }
}

@media (max-width: 1024px) {
    .block-spec-columns__list li:has(a) {
        display: block;
        padding-top: calc((38px - 1lh) / 2);
    }
}

@media (max-width: 980px) {
    .block-spec-columns { padding: 11.8vw 0 0; }
    .block-spec-columns__eyebrow {
        margin-bottom: 456px;
        font-size: 0.97vw;
    }
    .block-spec-columns__grid { display: block; }
    .block-spec-columns__group { width: auto; }
    .block-spec-columns__group:nth-child(2n):not(:last-child) { margin-bottom: 80px; }
}

@media (max-width: 767px) {
    .block-spec-columns { padding: 60px 25px; }
    .block-spec-columns .container { width: 100%; }
    .block-spec-columns__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
    }
    .block-spec-columns__group:nth-child(n):not(:last-child) { margin-bottom: 40px; }
    .block-spec-columns__heading { font-size: 5.6vw; }
    .block-spec-columns__list { font-size: 4.2vw; }
    .block-spec-columns__list li {
        font-size: 4vw;
        line-height: 133%;
    }
}

/* ==== rich-text "qa" tiers (live /enroll/ FAQ). Tablets: picture above the first
   answer; live puts the eyebrow at the screen edge with 456px under it, the theme keeps
   the 456px and lines the eyebrow up with the column (any-width rule). Phones: 25px
   sides, 40px under the picture, 8.4vw questions, 4.2vw answers. ==== */
@media (max-width: 980px) {
    .block-rich-text.block-rich-text--qa { padding: 12.9vw 0 19.5vw; }
    .block-rich-text--qa .block-rich-text__eyebrow {
        margin-bottom: 456px;
        font-size: 18px;
    }
    .block-rich-text__split { display: block; }
    .block-rich-text__media,
    .block-rich-text__body { width: auto; }
    .block-rich-text--qa .block-rich-text__text { text-align: left; }
}

@media (max-width: 767px) {
    .block-rich-text.block-rich-text--qa { padding: 25px 25px 180px; }
    .block-rich-text--qa .container { width: 100%; }
    .block-rich-text--qa .block-rich-text__eyebrow {
        margin-bottom: 40px;
        font-size: 14px;
    }
    .block-rich-text__split { margin-bottom: 40px; }
    .block-rich-text__media { margin-bottom: 40px; }
    .block-rich-text--qa .block-rich-text__heading {
        margin-bottom: 24px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 112%;
    }
    .block-rich-text--qa .block-rich-text__text {
        font-size: 4.2vw;
        line-height: 133%;
    }
}

/* ==== rich-text "aside" tiers (live /roc-access/ s3). Tablets: 12.9vw over, the picture
   under the copy, 120px under the section. Phones: 25 25 0, 8.4vw heading, 4.2vw copy,
   the picture full width with 40px under it. ==== */
@media (max-width: 980px) {
    .block-rich-text.block-rich-text--aside { padding: 12.9vw 0 120px; }
    .block-rich-text.block-rich-text--aside .block-rich-text__text {
        margin-bottom: 0;
        text-align: left;
    }
}

@media (max-width: 767px) {
    /* flow-root: the picture's 40px margin stays inside (else page background between sections) */
    .block-rich-text.block-rich-text--aside {
        display: flow-root;
        padding: 25px 25px 0;
    }
    .block-rich-text--aside .container { width: 100%; }
    .block-rich-text--aside .block-rich-text__split { margin-bottom: 0; }
    /* padding, not margin: the legacy phone snippet zeroes heading margins below 476px */
    .block-rich-text.block-rich-text--aside .block-rich-text__heading {
        margin-bottom: 0;
        padding-bottom: 20px;
        font-size: 8.4vw;
        line-height: 112%;
    }
    .block-rich-text.block-rich-text--aside .block-rich-text__text {
        margin-bottom: 20px;
        font-size: 4.2vw;
        line-height: 133%;
    }
}

/* ==== numbered-grid "why" style tiers (live capability pages). Up to 1279px the number is
   54px in its 87px line; up to 1024px it sits over the title and copy. Any-width rule: live puts the
   head at the screen edge from 768 to 980px with about 580px of empty steel under the
   intro; tablets keep the 1024px layout in the page column (11.8vw over the section,
   none under it, the copy as wide as its item). Phones: no numbers and no intro, 60 25 96, rows of two from 476px,
   one column below, medium 5.6vw titles and 4.2vw copy. ==== */
@media (max-width: 1279px) {
    .block-numbered-grid--why .block-numbered-grid__number { font-size: 54px; }
}

@media (max-width: 1024px) {
    .block-numbered-grid--why .block-numbered-grid__item:nth-child(n) { flex-wrap: wrap; }
    .block-numbered-grid--why .block-numbered-grid__number { width: 100%; }
}

@media (max-width: 980px) {
    .block-numbered-grid.block-numbered-grid--why {
        display: flow-root; /* the last row's 140px stays steel (live shows a 40px ink stripe here) */
        padding: 11.8vw 0 0;
    }
    .block-numbered-grid--why .block-numbered-grid__body {
        width: 100%;
        text-align: left;
    }
    .block-numbered-grid--why .block-numbered-grid__item:first-child { padding-right: 30px; }
}

@media (max-width: 767px) {
    .block-numbered-grid.block-numbered-grid--why { padding: 60px 25px 96px; }
    .block-numbered-grid--why .block-numbered-grid__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
        line-height: 140%;
    }
    .block-numbered-grid--why .block-numbered-grid__heading {
        margin-bottom: 30px;
        font-size: 8.4vw;
        line-height: 112%;
    }
    .block-numbered-grid--why .block-numbered-grid__intro { display: none; }
    .block-numbered-grid--why .block-numbered-grid__pair:nth-child(n) { margin-bottom: 0; }
    .block-numbered-grid--why .block-numbered-grid__item:nth-child(n) { gap: 20px; }
    .block-numbered-grid--why .block-numbered-grid__body {
        display: block;
        width: 100%;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-numbered-grid--why .block-numbered-grid__title {
        padding-bottom: 10px;
        font-family: var(--font-medium);
        font-size: 5.6vw;
        line-height: 100%;
    }
}

@media (max-width: 475px) {
    .block-numbered-grid--why .block-numbered-grid__pair { display: block; }
    .block-numbered-grid--why .block-numbered-grid__item:nth-child(n) {
        width: 100%;
        padding-right: 0;
    }
}

/* ==== numbered-grid "services" style tiers (live /roc-watch-schools/) ==== */
@media (min-width: 476px) and (max-width: 1279px) {
    .block-numbered-grid--services .block-numbered-grid__number { font-size: 54px; }
}

@media (min-width: 981px) and (max-width: 1279px) {
    /* live: the number keeps the line height of its 1.45vw module (150%) */
    .block-numbered-grid--services .block-numbered-grid__number { line-height: 2.175vw; }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .block-numbered-grid--services .block-numbered-grid__number { margin-bottom: calc(1vw + 20px); }
}

@media (max-width: 980px) {
    .block-numbered-grid--services .block-numbered-grid__head {
        width: auto;
        margin: 0 3.5px 60px -3.5px;
    }
    .block-numbered-grid--services .block-numbered-grid__eyebrow { margin-bottom: 40px; }
    /* padding, not margin: the live section is a flex column there, so the
       row margin stays inside it */
    .block-numbered-grid--services .block-numbered-grid__grid {
        display: flex;
        row-gap: 40px;
        margin-bottom: 0;
        padding-bottom: 40px;
    }
    .block-numbered-grid--services .block-numbered-grid__item:nth-child(3) { margin-top: 0; }
    .block-numbered-grid.block-numbered-grid--services .block-numbered-grid__item:nth-child(n) { width: 50%; }
    .block-numbered-grid--services .block-numbered-grid__number {
        margin-bottom: 1vw;
        line-height: 87px;
    }
    .block-numbered-grid--services .block-numbered-grid__title {
        width: auto;
        font-size: 2.3vw;
        line-height: 100%;
        color: var(--color-cream);
    }
}

@media (max-width: 767px) {
    .block-numbered-grid.block-numbered-grid--services { padding: 60px 25px 96px; }
    .block-numbered-grid--services .block-numbered-grid__head { margin: 0 0 120px; }
    .block-numbered-grid--services .block-numbered-grid__eyebrow {
        width: 55%;
        line-height: 20px;
    }
    .block-numbered-grid--services .block-numbered-grid__intro { width: 100%; }
    .block-numbered-grid--services .block-numbered-grid__actions {
        margin-bottom: 0;
        text-align: center;
    }
    .block-numbered-grid--services .block-numbered-grid__grid {
        display: block;
        margin-bottom: 96px;
        padding-bottom: 0;
    }
    .block-numbered-grid.block-numbered-grid--services .block-numbered-grid__item:nth-child(n) { width: auto; }
    .block-numbered-grid--services .block-numbered-grid__number {
        margin-bottom: 18px;
        line-height: 100%;
    }
    .block-numbered-grid--services .block-numbered-grid__title {
        padding-bottom: 10px;
        font-family: var(--font-medium);
        font-size: 5.6vw;
    }
}

/* 476 to 767px: live keeps the two columns and the tablet titles (2.3vw bold). */
@media (min-width: 476px) and (max-width: 767px) {
    .block-numbered-grid--services .block-numbered-grid__grid {
        display: flex;
        row-gap: 0;
    }
    .block-numbered-grid.block-numbered-grid--services .block-numbered-grid__item:nth-child(n) { width: 50%; }
    .block-numbered-grid--services .block-numbered-grid__number { line-height: 5.6vw; }
    .block-numbered-grid--services .block-numbered-grid__title {
        font-family: var(--font-bold);
        font-size: 2.3vw;
    }
}

@media (max-width: 475px) {
    .block-numbered-grid--services .block-numbered-grid__number { font-size: 5.6vw; }
}

/* ==== testimonial-carousel at exactly 1280px (live site-wide #deployed rule) ==== */
@media (min-width: 1280px) and (max-width: 1280px) {
    .block-testimonial-carousel__main { padding-bottom: 0; }
    .block-testimonial-carousel .block-testimonial-carousel__carousel .swiper-container { margin-bottom: 0; }
}

/* ==== cta-form "form rows: page rules" (live /roc-watch-schools/) ==== */
@media (min-width: 1025px) and (max-width: 1280px) {
    .block-cta-form--field-gap .block-cta-form__form#survey-dark .frm_form_fields .frm_fields_container,
    .block-cta-form--field-gap .block-cta-form__form#survey-light .frm_form_fields .frm_fields_container {
        flex-direction: column;
        align-items: flex-start;
    }
    .block-cta-form--field-gap .block-cta-form__form .frm_submit.frm_flex { position: relative; }
}

/* ==== feature-carousel "overlap": live container padding between 1025 and 1280px ==== */
@media (min-width: 1025px) and (max-width: 1280px) {
    .block-feature-carousel--overlap .swiper-container { padding-bottom: 450px; }
}

@media (min-width: 1280px) and (max-width: 1280px) {
    .block-feature-carousel--overlap .swiper-container { padding-bottom: 350px; }
}

/* ==== feature-carousel "overlap-tight" (live /watch/): room under the cards and
   section spacing ==== */
@media (min-width: 1025px) and (max-width: 1279px) {
    .block-feature-carousel--tight .swiper-container { padding-bottom: 350px; }
}

@media (min-width: 1280px) and (max-width: 1280px) {
    .block-feature-carousel--tight .swiper-container { padding-bottom: 250px; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-feature-carousel.block-feature-carousel--tight { padding-bottom: 60px; }
}

/* 350px at 1024 like live; below it the card copy runs longer, so the room grows 2px per px
   (live puts the arrows over the last line from about 1000px; any-width rule). */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-feature-carousel--tight .swiper-container { padding-bottom: calc(350px + (1024px - 100vw) * 2); }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-feature-carousel--tight .swiper-container { padding-bottom: 540px; }
}

@media (max-width: 767px) {
    .page-sections > section + section.block-feature-carousel--tight { margin-top: 0; }
    .block-feature-carousel--tight { background: linear-gradient(transparent 40px, var(--color-ink) 40px); }
    .block-feature-carousel--tight .block-feature-carousel__title { font-size: 6.5vw; }
}

@media (max-width: 475px) {
    .block-feature-carousel--tight .swiper-container { padding-bottom: 100px; }
}

/* ==== cta-form dark / caption tiers ==== */
@media (max-width: 980px) {
    .block-cta-form.block-cta-form--dark { padding: 160px 0 90px; }
    .block-cta-form.block-cta-form--flush-top { padding-top: 0; }
    .block-cta-form--captioned .block-cta-form__image { margin-bottom: 64px; }
}

@media (max-width: 767px) {
    .block-cta-form.block-cta-form--dark { padding: 60px 25px 96px; }
    .block-cta-form.block-cta-form--flush-top { padding-top: 0; }
    .block-cta-form--captioned .block-cta-form__image { margin-bottom: 5px; }
    .block-cta-form--dark .block-cta-form__image img { height: 42vw; }
    /* The photo keeps its proportions in the fixed-height box (live does it on some pages from 476 to 767px
       and on every page up to 475px; elsewhere it stretches the photo; any-width rule). */
    .block-cta-form__image img {
        object-fit: contain;
        object-position: left;
    }
    .block-cta-form__caption {
        margin-bottom: 25px;
        font-size: 9px;
    }
}

@media (max-width: 475px) {
    .block-cta-form__caption br { display: block; }
    /* later steps (light and dark form): the buttons hang 30px below the form (live site-wide rule) */
    .block-cta-form__form .frm_form_fields:not(.frm_page_num_1) .frm_submit.frm_flex { bottom: -30px; }
}

/* ==== 1023: below the accordion title band ==== */
@media (max-width: 1023px) {
    .block-accordion-list__title { font-size: 50px; }
}

/* ==== 768 to 991: side eyebrow accordions (live .faq__wrapper) drop to 36px titles ==== */
@media (min-width: 768px) and (max-width: 991px) {
    .block-accordion-list--side .block-accordion-list__title { font-size: 36px; }
}

/* ==== 1024: form fields stack, Next moves to its own row (right aligned) ==== */
@media (min-width: 476px) and (max-width: 1024px) {
    .block-cta-form__form .frm_fields_container { flex-direction: column; }
}

/* ==== 1024: red bar footer spreads its items over the row ==== */
@media (max-width: 1024px) {
    .site-footer__bar {
        justify-content: space-between;
        gap: 0;
    }
}

@media (min-width: 476px) and (max-width: 1279px) {
    .block-cta-form__form .frm_submit.frm_flex { position: relative; }
    .block-faq-accordion__question {
        padding: clamp(20px, 2vw, 40px) 0;
        line-height: 120%;
    }
}

/* ==== 1000 ==== */
@media (max-width: 1024px) and (min-width: 1000px) {
    .block-related-posts__thumb { height: 168px; }
}

/* live: 130px thumbnails up to 999px (168px at exactly 1000px, like 1024) */
@media (max-width: 999px) {
    .block-related-posts__thumb { height: 130px; }
}

@media (max-width: 1000px) {
    .block-hero-media__overlay { min-height: 600px; }
    .block-hero-media__content { height: 320px; }
    /* the copy fills the 320px column here, the group starts at its top as on live */
    .block-hero-media--standard .block-hero-media__content { justify-content: space-between; }
}

/* ==== 980: tablet ==== */
@media (max-width: 980px) {
    .block-hero-media__overlay { justify-content: flex-start; }
    .block-hero-media__content {
        width: 90%;
        max-width: 768px;
        margin-left: auto;
    }
    .block-hero-media__text {
        max-width: 622px;
        margin-top: 38px;
    }

    .block-statement-intro { padding: 3.75vw 0; }

    .block-split-rows-media { padding: 60px 0; }
    .block-split-rows-media__row {
        display: block;
        padding: 20px 0;
    }
    .block-split-rows-media__title,
    .block-split-rows-media__text {
        width: auto;
        margin-right: 0;
    }
    .block-split-rows-media__text { text-align: center; }
    .block-split-rows-media__media { display: none; }

    /* Static band: first line at the top, second at the bottom of a 620px photo. */
    .block-title-image-band {
        display: flex;
        flex-direction: column;
        height: 620px;
        min-height: 0;
        padding: 0;
    }
    .page-sections > .block-title-image-band { margin-top: 0; } /* live: no 1px overlap here */
    .block-title-image-band__inner {
        display: flex;
        flex: 1;
        padding: 0;
    }
    .block-title-image-band__title {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        font-size: 165px;
        text-shadow: 0 5px 22px rgba(0, 0, 0, 0.45);
    }

    .block-faq-accordion__question { font-size: 16px; }

    .block-related-posts { padding: 11.8vw 0 0; }
    .block-related-posts__eyebrow {
        padding-bottom: 40px;
        font-size: 18px;
    }
    .block-related-posts__eyebrow p { margin-bottom: 20px; }

    .block-cta-form { padding: 160px 0 90px; }
    .block-cta-form .container { padding: 30px 0; }

    .block-image-cta__heading { margin-bottom: 40px; }
    .block-image-cta__row { display: block; }
    .block-image-cta__text {
        width: auto;
        margin: 0 0 40px;
        text-align: center;
    }
    .block-image-cta__actions { width: auto; }

    .block-accordion-list { padding: 0 0 3.75vw; }
    .block-accordion-list__heading { margin-bottom: 40px; }
    .block-accordion-list__title { font-size: 36px; }

    .block-media-cards { padding: 0 0 3.75vw; }
    .block-media-cards__heading { margin-bottom: 40px; }
    .block-media-cards__card { display: block; }
    .block-media-cards--dark .block-media-cards__card { padding: 30px; }
    .block-media-cards__text {
        width: auto;
        text-align: center;
    }
    .block-media-cards--media-right .block-media-cards__text { margin-right: 0; }
    .block-media-cards--dark .block-media-cards__text { padding: 0; }
    .block-media-cards--dark .block-media-cards__title { margin-bottom: 20px; }
    .block-media-cards__media { display: none; }

    .block-numbered-grid { padding: 60px 0; }
    .block-numbered-grid--flush-top { padding-top: 0; }
    .block-numbered-grid__heading { margin-bottom: 40px; }
    .block-numbered-grid__grid { row-gap: 40px; }
    .block-numbered-grid .block-numbered-grid__item:nth-child(n) {
        width: 100%;
        margin-right: 0;
    }
    .block-numbered-grid__item--flush-below { margin-bottom: -40px; } /* cancels the 40px row gap under this item */
    .block-numbered-grid__body { text-align: center; }

    .block-rich-text { padding: 60px 0; }
    .block-rich-text--full-height { min-height: 0; }
    .block-rich-text__text {
        margin-bottom: 40px;
        text-align: center;
    }
    .block-statement-intro__text {
        margin-bottom: 25px;
        font-size: 48px;
    }

    .block-faq-accordion__body { padding: 30px 0; }
    .block-faq-accordion__heading,
    .block-faq-accordion__intro { margin-bottom: 40px; }
    .block-faq-accordion__intro { text-align: center; }
}

/* ==== 980: header switches to the burger and the drill menu ==== */
@media (max-width: 980px) {
    .site-header__bar { padding: 30px 0; }
    .site-header__row::after { content: none; }
    .site-header__brand,
    .site-header__nav {
        width: 50%;
        margin-right: 0;
    }
    .site-nav { display: none; }
    .site-header__burger { display: block; }
    .site-header.is-menu-open .site-drill { display: block; }
    /* Scroll lock while the drill menu is open (keeps the scroll position; html too,
       so a page that overflows sideways cannot shift the fixed overlay). */
    html.is-drill-open,
    html.is-drill-open body { overflow: hidden; }
}

/* ==== 980: tablet footer (smaller paddings). The six columns sit in two rows of three: live stacks
   them in one narrow column here (its old "keep the row" rule targets a 5-column row that no longer
   exists), a layout bug that is not copied. The icons sit closer together in the narrower cell. ==== */
@media (max-width: 980px) {
    .site-footer__inner { padding-top: 40px; }
    .site-footer__top { flex-wrap: wrap; }
    .site-footer__col {
        width: 33.333%;
        padding-right: 20px;
        margin-bottom: 40px;
    }
    .site-footer__bottom { padding: 0 0 40px; }
    .site-footer__social { gap: 10px; }

    .site-footer--bar { padding: 50px 20px; }
    .site-footer__bar { width: 100%; }

    /* Logo-only header: the same 80px bar (no burger row padding). */
    .site-header--logo .site-header__bar { padding: 0; }

    /* Contact row footer: the cells stack (live phone; live tablets keep the 85px band and the stack runs out of it,
       not copied), 10px apart, 40px above and 20px under the icons. */
    .site-footer--contact .site-footer__bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        max-width: none;
        padding: 40px 0 20px;
    }
    .site-footer--contact .site-footer__contact { display: contents; }
    .site-footer--contact .site-footer__copy,
    .site-footer--contact .site-footer__contact > p { margin: 0 0 10px; }
    .site-footer--contact .site-footer__social {
        flex-direction: row;
        align-items: normal;
        gap: 24px;
    }
}

/* ==== "Hide on" setting: desktop 981+, tablet 768 to 980, phone up to 767 ==== */
@media (min-width: 981px) {
    .u-hide-desktop { display: none; }
}

@media (min-width: 768px) and (max-width: 980px) {
    .u-hide-tablet { display: none; }
}

@media (max-width: 980px) {
    .page-sections > section + section.u-seam-overlap-3-desktop { margin-top: 0; }
}

/* ==== 767: the header sits in the page flow (live: static from 480 to 767px) ==== */
@media (max-width: 767px) {
    .site-header,
    .site-header.sticky {
        position: static;
        animation: none;
    }
    .site-header__bar { padding: 0; }
    .site-header__row {
        width: 100%;
        max-width: none;
        padding: 30px;
    }
    /* Live quirk kept for parity: the Divi menu module keeps its white background
       behind the burger from 480 to 767px (transparent above and below). */
    .site-header__nav { background-color: var(--color-white); }

    /* Logo-only header: 20px side padding, the logo centred in the 80px bar. */
    .site-header--logo .site-header__row { padding: 0 20px; width: 100%; }
}

/* ==== 767: phone footer: offices (70%) + icon stack (30%), then email + phone,
   then the copyright; the menu columns are not shown ==== */
@media (max-width: 767px) {
    .site-footer__inner {
        display: grid;
        grid-template-columns: 70% 30%;
    }
    .site-footer__top,
    .site-footer__bottom { display: contents; }
    .site-footer__col--menu { display: none; }
    .site-footer__col--offices {
        grid-area: 1 / 1;
        width: auto;
        padding: 0;
        margin: 0;
    }
    .site-footer__social {
        grid-area: 1 / 2;
        flex-direction: column;
        align-items: flex-end;
        gap: 16px;
    }
    .site-footer__contact {
        grid-area: 2 / 1 / 3 / 3;
        display: flex;
        gap: 24px;
        padding-bottom: 20px;
    }
    .site-footer__contact > p {
        margin: 0 0 10px;
    }
    /* hardcoded: live 10px module margin + 20px row padding under the copyright */
    .site-footer__copy {
        grid-area: 3 / 1 / 4 / 3;
        margin: 0 0 30px;
    }
}

/* ==== 476 to 767: the offices and the icons share the width half and half (live), below 476 it is 70% / 30% ==== */
@media (min-width: 476px) and (max-width: 767px) {
    .site-footer__inner { grid-template-columns: 50% 50%; }
}

/* ==== 476 to 767: large phones take only the moves set to "Phones: move up to" 767
   (live shows its phone twin sections in page order there) ==== */
@media (min-width: 476px) and (max-width: 767px) {
    .page-sections--phone-l-order {
        display: flex;
        flex-direction: column;
    }
    .u-phone-l-order-1 { order: 1; }
    .u-phone-l-order-2 { order: 2; }
    .u-phone-l-order-3 { order: 3; }
    .u-phone-l-order-4 { order: 4; }
    .u-phone-l-order-5 { order: 5; }
    .u-phone-l-order-6 { order: 6; }
    .u-phone-l-order-7 { order: 7; }
    .u-phone-l-order-8 { order: 8; }
    .u-phone-l-order-9 { order: 9; }
    .u-phone-l-order-10 { order: 10; }
    .u-phone-l-order-11 { order: 11; }
    .u-phone-l-order-12 { order: 12; }
    .u-phone-l-order-13 { order: 13; }
    .u-phone-l-order-14 { order: 14; }
    .u-phone-l-order-15 { order: 15; }
    .u-phone-l-order-16 { order: 16; }
    .u-phone-l-order-17 { order: 17; }
    .u-phone-l-order-18 { order: 18; }
    .u-phone-l-order-19 { order: 19; }
    .u-phone-l-order-20 { order: 20; }
    .u-phone-l-order-21 { order: 21; }
    .u-phone-l-order-22 { order: 22; }
    .u-phone-l-order-23 { order: 23; }
    .u-phone-l-order-24 { order: 24; }
    .u-phone-l-order-25 { order: 25; }
    .u-phone-l-order-26 { order: 26; }
    .u-phone-l-order-27 { order: 27; }
    .u-phone-l-order-28 { order: 28; }
}

/* ==== 767: phone ==== */
@media (max-width: 767px) {
    .u-hide-phone { display: none; }

    /* Media on top (470px, under the 90px phone header), text below on ink. */
    .block-hero-media {
        padding-top: 469px;
        background-color: var(--color-ink);
    }
    .block-hero-media__media {
        height: 470px;
        object-position: 50% 50%;
    }
    .block-hero-media__overlay {
        display: block;
        min-height: 0;
        padding: 40px 15px 96px;
        background: var(--color-ink);
    }
    .block-hero-media__content {
        display: block;
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
    }
    .block-hero-media__text {
        max-width: none;
        margin: 0;
        letter-spacing: normal;
    }
    .block-hero-media__title {
        margin-bottom: 24px;
        font-size: 13.5vw;
    }
    .block-hero-media__subtitle {
        margin-bottom: 60px;
        padding-bottom: 0;
        font-family: var(--font-light);
        font-size: 6.9vw;
        font-weight: 300;
        line-height: 125%;
        letter-spacing: 0.5px;
        color: var(--color-steel);
    }
    .block-hero-media__subtitle br { display: none; }
    .block-hero-media__actions {
        margin: -15px 0 0;
        text-align: center;
    }
    .block-hero-media__actions .btn {
        padding: 17px 45px 17px 35px;
        font-size: 3.7vw;
    }

    /* Phones: only the first video, full bleed. */
    .block-split-rows-media { padding: 0; }
    .block-split-rows-media .container { width: auto; }
    .block-split-rows-media__heading,
    .block-split-rows-media__rows { display: none; }
    .block-split-rows-media__media { display: block; }
    .block-split-rows-media__video {
        width: auto;
        height: 622px;
        margin-right: 0;
    }
    .block-split-rows-media__video + .block-split-rows-media__video { display: none; }

    .block-title-image-band__title {
        padding-bottom: 0;
        font-size: 115px;
    }

    /* Phones: the FAQ sits behind a toggle row. */
    .block-faq-accordion { padding: 60px 25px; }
    .block-faq-accordion .container { width: auto; }
    .block-faq-accordion__toggle-row { display: block; }
    .block-faq-accordion__toggle {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .block-faq-accordion__label {
        padding-bottom: 10px;
        font-family: var(--font-bold);
        font-size: 14px;
        font-weight: 500;
        line-height: 140%;
        color: var(--color-steel);
    }
    .block-faq-accordion__toggle-icon {
        height: 29px;
        margin: 0 0 16px auto;
    }
    .block-faq-accordion__body { padding: 40px 0 0; }
    .block-faq-accordion__heading {
        margin-bottom: 20px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-faq-accordion__intro {
        margin-bottom: 40px;
        font-size: 4.2vw;
        text-align: left;
    }
    .block-faq-accordion__item { padding: 10px 0; }
    .block-faq-accordion__item.is-open { padding: 20px 0 0; }
    .block-faq-accordion__question { line-height: 125%; }
    .block-faq-accordion__answer {
        margin: 20px 0;
        font-size: 14px;
    }

    .block-related-posts { padding: 60px 25px 0; }
    .block-related-posts .container { width: auto; }
    .block-related-posts__eyebrow { font-size: 3.2vw; }
    /* Phones: titles and excerpts only, the approved "Blog Module - Dark - Mobile" (Evan, DIGITAL-303, ROC-102) */
    .block-related-posts__thumb,
    .block-related-posts time { display: none; }

    .block-cta-form { padding: 60px 25px 96px; }
    .block-cta-form .container {
        width: auto;
        padding: 0;
    }
    .block-cta-form__image { margin-bottom: 40px; }
    .block-cta-form__image img { height: 150px; }
    .block-cta-form--phone-image-tall .block-cta-form__image img { height: 42vw; }

    /* Photo at a fixed 956px width from the top, gradient up to 40%, text at the bottom. */
    .block-image-cta {
        min-height: 794px;
        padding: 0;
    }
    .block-image-cta__image {
        left: 50%;
        width: 956px;
        height: auto;
        margin-left: -478px;
    }
    .block-image-cta::before { background-image: linear-gradient(0deg, var(--color-ink) 40%, rgba(255, 255, 255, 0) 100%); }
    .block-image-cta__heading {
        margin-bottom: 20px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-image-cta__text {
        font-size: 4.2vw;
        text-align: left;
        color: var(--color-steel);
    }
    .block-image-cta__actions .btn-wrap { margin: 20px 0; }

    .block-accordion-list { padding: 0 15px 96px; }
    .block-accordion-list .container { width: auto; }
    .block-accordion-list__heading {
        margin-bottom: 40px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-accordion-list__title { font-size: 24px; }
    .block-accordion-list__icon {
        align-self: center;
        height: 36px;
        margin-top: 0;
        padding-right: 0;
        color: var(--color-steel);
    }
    .block-accordion-list__item.is-open { background-color: var(--color-cream); }
    .block-accordion-list__item.is-open .block-accordion-list__title { color: var(--color-ink); }

    .block-media-cards { padding: 60px 15px 96px; }
    .block-media-cards--dark { padding-top: 96px; }
    .block-media-cards .container { width: auto; }
    .block-media-cards__heading {
        margin-bottom: 60px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-media-cards__card {
        margin-bottom: 40px;
        padding: 25px;
        border-color: var(--color-ink);
    }
    .block-media-cards__card:last-child { margin-bottom: 0; }
    .block-media-cards--dark .block-media-cards__card {
        padding: 25px;
        border-color: var(--color-steel);
    }
    .block-media-cards__text {
        padding: 0;
        font-size: 4.2vw;
        text-align: left;
    }
    .block-media-cards--dark .block-media-cards__title {
        margin-bottom: 40px;
        padding-bottom: 0;
        font-size: 5.6vw;
    }

    .block-numbered-grid { padding: 60px 15px 96px; }
    .block-numbered-grid .container { width: auto; }
    .block-numbered-grid__heading {
        margin-bottom: 60px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-numbered-grid__number { display: none; }
    .block-numbered-grid__body {
        font-size: 4.2vw;
        text-align: left;
    }
    .block-numbered-grid__image { margin-top: 20px; }
    .block-numbered-grid__image img { width: 100%; }
    .block-numbered-grid__flag { width: 100%; }
    .block-numbered-grid__actions {
        margin-bottom: 20px;
        padding-top: 80px;
    }
    .block-numbered-grid--phone-dark {
        padding-top: 96px;
        background-color: var(--color-ink);
    }
    .block-numbered-grid--phone-dark .block-numbered-grid__heading,
    .block-numbered-grid--phone-dark .block-numbered-grid__title { color: var(--color-cream); }
    .block-numbered-grid--phone-dark .block-numbered-grid__body { color: var(--color-steel); }

    .block-rich-text { padding: 0 15px 60px; }
    .block-rich-text .container { width: auto; }
    .block-rich-text__heading {
        margin-bottom: 10px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-rich-text__text {
        margin-bottom: 0;
        font-size: 4.2vw;
        text-align: left;
    }

    /* One swipe card per label: numeral, label, caption. */
    .block-stat-rank { padding: 0 15px 96px; }
    .block-stat-rank__row {
        display: block;
        width: auto;
        margin-bottom: 0;
    }
    .block-stat-rank__rank { display: none; }
    .block-stat-rank__slider {
        width: auto;
        padding-left: 0;
    }
    .block-stat-rank__swiper { height: auto; }
    .block-stat-rank .swiper-wrapper {
        flex-direction: row;
        align-items: flex-start;
        transition-property: transform, height;
    }
    .block-stat-rank__slide {
        display: block;
        height: auto;
    }
    .block-stat-rank__card {
        display: flex;
        flex-direction: column;
        padding: 20px;
    }
    .block-stat-rank__slide-number {
        display: block;
        font-family: var(--font-bold);
        font-size: 229px;
        font-weight: 500;
        line-height: 100%;
        text-align: center;
        color: var(--color-cream);
    }
    .block-stat-rank__label {
        width: auto;
        padding-bottom: 0;
        font-family: var(--font-medium);
        font-size: 36px;
        line-height: 42px;
        letter-spacing: 0.45px;
        text-align: center;
        color: var(--color-steel);
    }
    .block-stat-rank__slide-caption {
        display: block;
        margin-top: 20px;
        font-size: 18px;
        font-weight: 500;
        line-height: 42px;
        letter-spacing: 0.45px;
        text-align: center;
    }
    .block-stat-rank__slide-caption a { line-height: 122%; }
    .block-stat-rank__pagination { display: none; }
}

/* ==== 479: phone header overlays the page again, sticky without the slide ==== */
@media (max-width: 479px) {
    .site-header { position: absolute; }
    .site-header.sticky { position: fixed; }
    .site-header__row { border-bottom: 1px solid var(--color-ink); }
    .site-header__nav { background-color: transparent; }
    .site-drill__parent {
        border-bottom: 0;
        background-color: transparent;
    }
}

/* ==== 475: small phone ==== */
@media (max-width: 475px) {
    .page-sections > section { overflow: hidden; }

    /* Every pill button on small phones (live primary-dark / primary-light rule). */
    .btn-wrap .btn {
        height: 44px;
        padding: 10px 50px 10px 24px;
        font-size: 4.2vw;
    }

    .btn-wrap .btn--light {
        display: inline-flex;
        align-items: center;
    }

    .block-cta-form__image img { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 17% 100%, 0% 67%); }

    .block-related-posts { padding-bottom: 60px; }
    .block-related-posts::before,
    .block-related-posts::after { height: 40px; }
    .block-related-posts::before { clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); }
    .block-related-posts::after {
        bottom: 40px;
        clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
    }
    .block-related-posts__grid {
        flex-direction: column;
        gap: 40px;
    }
    .block-related-posts__item { width: 100%; }
    .block-related-posts__meta h3 {
        margin-bottom: 0;
        font-size: 3.5vw;
    }
    .block-related-posts__meta p {
        margin-bottom: 10px;
        font-size: 3.5vw;
    }

    /* Form base on small phones (the site form stylesheet does the rest). */
    .block-cta-form__form h2,
    .block-cta-form__form h3 {
        margin: 0;
        padding: 0;
    }
    .block-cta-form__form .frm_submit.frm_flex,
    .block-cta-form__form .frm_page_num_1 .frm_submit.frm_flex {
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .block-cta-form__form .frm_opt_container { flex-direction: column; }
    .block-cta-form__form .frm_page_num_2 .frm_opt_container {
        height: auto;
        margin-bottom: 40px;
    }

    .block-accordion-list__item { padding: 20px 0; }
    .block-accordion-list__head { padding: 0; }
    .block-accordion-list__title { padding-left: 0; }
    .block-accordion-list__title::before,
    .block-accordion-list__item::before { content: none; }
    .block-accordion-list__item:hover .block-accordion-list__title,
    .block-accordion-list__item:hover .block-accordion-list__icon { color: inherit; }
    .block-accordion-list__panel { padding: 20px 0 0; }

    .block-media-cards--light .block-media-cards__title { padding-bottom: 0; }
    .block-media-cards--light .block-media-cards__text {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .block-media-cards--light .block-media-cards__title br { display: none; }
    .block-faq-accordion__heading br { display: none; }
    .block-faq-accordion__question { width: 90%; }
    .block-faq-accordion__list { width: 100%; }
    .block-faq-accordion__answer p {
        font-size: 16px;
        line-height: 135%;
    }
    .block-faq-accordion__answer a {
        font-size: 16px;
        line-height: 135%;
        color: var(--color-steel);
    }

    .block-numbered-grid__title { padding-bottom: 0; }
    .block-numbered-grid__body {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .block-numbered-grid__body:not(.block-numbered-grid__body--keep-breaks) .block-numbered-grid__title br { display: none; }

    /* Phone section order (setting "Phones: show after section #"). */
    .page-sections--phone-order {
        display: flex;
        flex-direction: column;
    }
    .u-phone-order-1 { order: 1; }
    .u-phone-order-2 { order: 2; }
    .u-phone-order-3 { order: 3; }
    .u-phone-order-4 { order: 4; }
    .u-phone-order-5 { order: 5; }
    .u-phone-order-6 { order: 6; }
    .u-phone-order-7 { order: 7; }
    .u-phone-order-8 { order: 8; }
    .u-phone-order-9 { order: 9; }
    .u-phone-order-10 { order: 10; }
    .u-phone-order-11 { order: 11; }
    .u-phone-order-12 { order: 12; }
    .u-phone-order-13 { order: 13; }
    .u-phone-order-14 { order: 14; }
    .u-phone-order-15 { order: 15; }
    .u-phone-order-16 { order: 16; }
    .u-phone-order-17 { order: 17; }
    .u-phone-order-18 { order: 18; }
    .u-phone-order-19 { order: 19; }
    .u-phone-order-20 { order: 20; }
    .u-phone-order-21 { order: 21; }
    .u-phone-order-22 { order: 22; }
    .u-phone-order-23 { order: 23; }
    .u-phone-order-24 { order: 24; }
    .u-phone-order-25 { order: 25; }
    .u-phone-order-26 { order: 26; }
    .u-phone-order-27 { order: 27; }
    .u-phone-order-28 { order: 28; }
    .u-phone-order-29 { order: 29; }
    .u-phone-order-30 { order: 30; }
}

/* ==== 475: phone header and drill menu sizes ==== */
@media (max-width: 475px) {
    .site-header__burger {
        width: 34px;
        height: 22px;
    }
    .site-header__burger::before {
        width: 22px;
        height: 22px;
        background-size: 22px;
    }
    .site-drill__header { padding-top: 28px; }
    .site-drill__back { font-size: 24px; }
    .site-drill__back svg {
        width: 12px;
        height: 19px;
    }
    .site-drill__close {
        right: 42px;
        width: 22px;
        height: 22px;
    }
    .site-drill__close svg {
        width: 22px;
        height: 22px;
    }
    .site-drill__screen,
    .site-drill__list { padding-top: 90px; }

    /* Submenu headings turn into grey caps and replace the panel title (live, phones only). */
    .site-drill__heading {
        font-family: var(--font-regular);
        font-size: 18px;
        font-weight: 400;
        color: var(--color-steel);
        text-transform: uppercase;
    }
    .site-drill__panel:has(.site-drill__heading) .site-drill__title { display: none; }
}

/* ==== 475: addresses marked "one paragraph" wrap without their line breaks ==== */
@media (max-width: 475px) {
    .site-footer__address--flow br { display: none; }
}

/* ==== image-text-split tiers ==== */
@media (min-width: 1025px) and (max-width: 1280px) {
    .block-image-text-split__text br { display: none; }
}

@media (max-width: 1280px) {
    .block-image-text-split__text { max-width: 50%; }
    .block-image-text-split__heading { line-height: 120%; }
}

@media (max-width: 1024px) {
    .block-image-text-split__text br { display: block; }
}

@media (max-width: 980px) {
    .block-image-text-split { padding: 0 0 3.75vw; }
    .block-image-text-split__row { display: block; }
    .block-image-text-split__media {
        width: 100%;
        margin-bottom: 40px;
        clip-path: polygon(100% 0, 100% 80%, 90% 100%, 0 100%, 0 0);
    }
    .block-image-text-split__media img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .block-image-text-split__text { max-width: 100%; }
}

/* ==== centered-title and laptop-showcase tiers ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-centered-title { padding: 60px 0 80px; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-laptop-showcase__eyebrow.container {
        width: 125%;
        max-width: min(calc(var(--container-max) / 0.8), 100vw); /* same header grid as .container */
    }
}

@media (max-width: 980px) {
    .block-laptop-showcase__stage { height: 62vw; }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-centered-title__actions .btn { font-size: 16px; }
}

@media (max-width: 767px) {
    .block-centered-title { padding: 0 0 96px; }
    .block-centered-title__inner { width: 100%; }
    .block-centered-title__heading {
        font-size: 8.4vw;
        line-height: 116%;
        color: var(--color-cream);
    }
    .block-centered-title__actions { margin: 20px 0; }

    .block-laptop-showcase { margin-bottom: -40px; }
    .block-laptop-showcase__eyebrow {
        font-family: var(--font-bold);
        font-size: 15px;
    }
    .block-laptop-showcase__stage { height: 380px; }
}

/* ==== statement-intro linked, centered-title intro, laptop-showcase fluid tiers (live /watch/) ==== */
@media (min-width: 981px) and (max-width: 1280px) {
    .block-centered-title.block-centered-title--intro { padding: 70px 0 60px; }
}

@media (max-width: 980px) {
    .block-statement-intro.block-statement-intro--linked { padding: 0 0 3.75vw; }
    .block-statement-intro--linked .block-statement-intro__text { margin-bottom: 40px; }
    .block-statement-intro__link-wrap { margin-bottom: 60px; }

    .block-centered-title.block-centered-title--intro { padding: 0 0 3.75vw; }
    .block-centered-title--intro .block-centered-title__text { margin-bottom: 40px; }

    .block-laptop-showcase--fluid .block-laptop-showcase__stage {
        height: 60vw;
        padding-top: 55px;
    }
    .block-laptop-showcase__spot,
    .block-laptop-showcase__spot-text { margin-bottom: 30px; }
    .block-laptop-showcase__spot-text--4 { margin-bottom: 0; }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-laptop-showcase__spot--2 { right: 11.5vw; }
    .block-laptop-showcase__spot--4 {
        top: 12vw;
        left: 15vw;
    }
    .block-laptop-showcase__spot-text--2 { right: 17vw; }
    .block-laptop-showcase__spot-text--3 {
        bottom: -27.5vw;
        left: 40%;
    }
    .block-laptop-showcase__spot-text--4 {
        top: 9vw;
        left: 22vw;
    }
}

@media (max-width: 767px) {
    .block-centered-title.block-centered-title--intro { padding: 0 0 60px; }
    .block-centered-title--intro .block-centered-title__heading { text-align: left; }
    .block-centered-title--intro .block-centered-title__text {
        margin-bottom: 0;
        font-size: 4.2vw;
        text-align: left;
    }

    .block-laptop-showcase--fluid .block-laptop-showcase__stage {
        height: 260px;
        padding-top: 0;
    }
    .block-laptop-showcase--fluid .block-laptop-showcase__spots {
        width: auto;
        margin: 0 15px;
    }
    .block-laptop-showcase__spot {
        width: 28px;
        height: 28px;
    }
    .block-laptop-showcase__spot-text { font-size: 14px; }
}

@media (max-width: 475px) {
    /* the hotspot glow reaches over the section above (live) */
    .page-sections > .block-laptop-showcase--fluid { overflow: visible; }
    .block-centered-title__text br { display: none; }
    .block-laptop-showcase__spot--1 {
        top: 0;
        left: 51%;
    }
    .block-laptop-showcase__spot--2 { right: 60px; }
    .block-laptop-showcase__spot--3 {
        bottom: -195px;
        left: 42%;
    }
    .block-laptop-showcase__spot--4 {
        top: 90px;
        left: 60px;
    }
    .block-laptop-showcase__spot-text {
        align-items: center;
        height: 60px;
        padding: 10px;
    }
    .block-laptop-showcase__spot-text--1 {
        top: 30px;
        left: 41%;
        width: 105px;
    }
    .block-laptop-showcase__spot-text--2 {
        top: 40px;
        right: 95px;
        width: 125px;
    }
    .block-laptop-showcase__spot-text--3 {
        bottom: -163px;
        left: 120px;
        width: 130px;
    }
    .block-laptop-showcase__spot-text--4 {
        top: 24px;
        left: 35px;
        width: 90px;
    }
}

/* ==== content-tabs tiers (live /watch/) ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-content-tabs { padding-bottom: 80px; }
}

@media (min-width: 1024px) and (max-width: 1600px) {
    .block-content-tabs__list { width: 35%; }
}

@media (max-width: 980px) {
    .block-content-tabs { padding: 40px 0 80px; }
}

@media (min-width: 476px) and (max-width: 980px) {
    .block-content-tabs__list { width: 40%; }
    .block-content-tabs__title { margin-bottom: 0; }
}

@media (max-width: 767px) {
    .block-content-tabs { padding: 0 25px 96px; }
    .block-content-tabs .container { width: auto; }
    .block-content-tabs__heading {
        margin-bottom: 60px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-content-tabs__tab,
    .block-content-tabs__text { font-size: 4.2vw; }
    .block-content-tabs__panel { padding-bottom: 0; }
}

@media (max-width: 475px) {
    .block-content-tabs__list { width: 100%; }
    .block-content-tabs__title {
        margin-bottom: 18px;
        font-size: 5.6vw;
        line-height: 100%;
    }
}

/* ==== video-mockup tiers (live /watch/) ==== */
@media (max-width: 1440px) {
    .block-video-mockup__stage,
    .block-video-mockup__base { height: 350px; }
    .block-video-mockup__video { width: 560px; }
}

/* Live quirk kept for parity: the video's Divi column (a float) ends 74.98px below
   the bands and pushes the next section's content down by 14.98px from 981 to
   1024px (no zoom there, and the next section has no top padding). */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-video-mockup__base { margin-bottom: 14.98px; }
}

@media (max-width: 980px) {
    .block-video-mockup__stage { padding-top: 0; }
}

@media (max-width: 767px) {
    .block-video-mockup__stage { padding: 0 15px; }
    .block-video-mockup__frame.container { width: auto; }
    .block-video-mockup__video { width: 330px; }
}

@media (max-width: 496px) {
    .block-video-mockup__stage { height: 240px; }
    .block-video-mockup__base { height: 170px; }
}

@media (max-width: 475px) {
    /* The frame's shadow reaches into the next section (live). */
    .page-sections > .block-video-mockup { overflow: visible; }
    .block-video-mockup__stage::before,
    .block-video-mockup__stage::after {
        width: 30px;
        height: 40px;
    }
}

/* ==== feature-grid tiers ==== */
@media (max-width: 1440px) {
    .block-feature-grid__heading br { display: none; }
}

@media (max-width: 980px) {
    .block-feature-grid { padding: 11.8vw 0 12vw; }
    .block-feature-grid__item:nth-child(n) {
        width: 100%;
        margin-right: 0;
    }
    .block-feature-grid__title { padding-left: 32px; }
    .block-feature-grid__text {
        width: 100%;
        margin-bottom: 60px;
    }
    .block-feature-grid__form-heading { color: var(--color-rust); }
}

@media (max-width: 767px) {
    .block-feature-grid { padding: 60px 25px 170px; }
    .block-feature-grid .container { width: 100%; }
    .block-feature-grid__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-feature-grid__intro {
        width: 100%;
        margin-bottom: 40px;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-feature-grid__title {
        margin-bottom: 24px;
        font-size: 5.11vw;
        line-height: 127%;
    }
    .block-feature-grid__text {
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-feature-grid__form-heading {
        margin-bottom: 32px;
        font-size: 24px;
        text-align: center;
        color: var(--color-steel);
    }
}

@media (max-width: 475px) {
    .block-feature-grid__title { padding-left: 0; }
    .block-feature-grid:not(.block-feature-grid--grouped, .block-feature-grid--columns) .block-feature-grid__title::before { content: none; }
    .block-feature-grid__text { margin-bottom: 40px; }
    .block-feature-grid__item:last-child .block-feature-grid__text { margin-bottom: 96px; }
    .block-feature-grid--stripes::before,
    .block-feature-grid--stripes::after {
        height: 43px;
        clip-path: none;
    }
    .block-feature-grid--stripes::before {
        bottom: 42px;
        mask: linear-gradient(-45deg, var(--color-white) 75%, transparent 50%) left top;
    }
    .block-feature-grid--stripes::after {
        bottom: 0;
        mask: linear-gradient(135deg, var(--color-white) 88%, transparent 20%);
    }
}

/* ==== hero-media "spaced" variant tiers (live /roc-watch-schools/ hero) ==== */
@media (min-width: 1280px) {
    .block-hero-media--spaced .block-hero-media__title { font-size: 87px; }
}

@media (min-width: 981px) and (max-width: 1023px) {
    .block-hero-media--spaced .block-hero-media__content {
        height: 28vw;
        padding-left: 15px;
    }
}

/* Tablets: the image covers the 180px top padding too; the text column keeps its
   28vw box (the copy overflows it, like live). */
@media (max-width: 980px) {
    .block-hero-media--spaced { padding: 0 0 5.63vw; }
    .block-hero-media--spaced .block-hero-media__frame { padding-top: 180px; }
    .block-hero-media--spaced .block-hero-media__overlay {
        display: block;
        width: 80%;
        min-height: 715px;
        margin: 0 auto;
    }
    .block-hero-media--spaced .block-hero-media__content {
        width: 100%;
        max-width: none;
        height: 28vw;
        margin: 0;
        padding: 0;
    }
    .block-hero-media--spaced .block-hero-media__text { max-width: 540px; }
}

/* Phones: 60px ink, the phone image (440px), then the text on ink (live phone twin
   row: steel eyebrow, the subtitle as light steel copy, the video link centered). */
@media (max-width: 767px) {
    .block-hero-media--spaced { padding: 0; }
    .block-hero-media--spaced .block-hero-media__frame { padding-top: 60px; }
    .block-hero-media--spaced .block-hero-media__picture { display: block; }
    .block-hero-media--spaced .block-hero-media__media {
        position: static;
        height: 440px;
        object-position: 100% 0;
    }
    .block-hero-media--spaced .block-hero-media__overlay {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 60px 15px 96px;
    }
    .block-hero-media--spaced .block-hero-media__content { height: auto; }
    .block-hero-media--spaced .block-hero-media__text { max-width: none; margin: 0; }
    .block-hero-media--spaced .block-hero-media__eyebrow {
        padding-bottom: 1em;
        color: var(--color-steel);
    }
    .block-hero-media--spaced .block-hero-media__eyebrow::before { background-image: url("assets/images/carrot-steel.svg"); }
    .block-hero-media--spaced .block-hero-media__title {
        padding-bottom: 0;
        line-height: 100%;
    }
    .block-hero-media--spaced .block-hero-media__actions { text-align: center; }
    .block-hero-media__video-link { font-weight: 700; }
}

@media (max-width: 475px) {
    .block-hero-media__eyebrow {
        gap: 6px;
        margin-bottom: 30px;
        font-size: 28px;
    }
    .block-hero-media__eyebrow::before {
        width: 36px;
        height: 21px;
    }
    .block-hero-media__video-link { padding: 13px 0.7em 13px 84px; }
}

/* ==== hero-media "spaced" and "padded" variants in the 1025 to 1500px zoom band: the
   live hero row is a regular Divi row (125% wide, at most 1340px, zoomed), so the text
   column starts where the page container starts (before: 80% of the overlay, 96px too
   far right at 1100px). Baseline widths are unchanged. ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-hero-media--spaced .block-hero-media__content,
    .block-hero-media--padded .block-hero-media__content {
        width: 100%;
        max-width: min(calc(var(--container-max) / 0.8), 100vw); /* same header grid as .container */
    }
}

/* ==== hero-media "padded" variant tiers (live /watch/ hero) ==== */
@media (min-width: 1601px) {
    .block-hero-media--padded .block-hero-media__content { padding-right: 15px; }
}

@media (min-width: 1280px) {
    .block-hero-media--padded .block-hero-media__title { font-size: 87px; }
}

@media (max-width: 1000px) {
    .block-hero-media--padded .block-hero-media__overlay { min-height: 817px; }
    .block-hero-media--padded .block-hero-media__content { height: 476px; }
}

@media (max-width: 980px) {
    .block-hero-media--padded .block-hero-media__overlay { justify-content: center; }
    .block-hero-media--padded .block-hero-media__content {
        width: 80%;
        margin: 0 auto;
    }
}

/* Phones: the phone picture in a 490px band (cover, contained at the bottom from
   475px down), then the phone texts on ink with the live 60 15 96 padding. */
@media (max-width: 767px) {
    .block-hero-media.block-hero-media--padded { padding: 0; }
    .block-hero-media--padded .block-hero-media__frame { padding-top: 490px; }
    .block-hero-media--padded .block-hero-media__media { height: 490px; }
    .block-hero-media--padded .block-hero-media__overlay {
        min-height: 0;
        padding: 60px 15px 96px;
    }
    .block-hero-media--padded .block-hero-media__content {
        width: auto;
        height: auto;
        margin: 0;
    }
    .block-hero-media--padded .block-hero-media__text { margin: 0; }
    .block-hero-media--padded .block-hero-media__eyebrow {
        padding-bottom: 1em;
        font-weight: 400;
    }
    .block-hero-media--padded .block-hero-media__title {
        padding-bottom: 0;
        font-weight: 400;
    }
    .block-hero-media--padded .block-hero-media__actions { margin: 0; }
    .block-hero-media__title.block-hero-media__phone-only,
    .block-hero-media__subtitle.block-hero-media__phone-only { display: block; }
    .btn.block-hero-media__phone-only {
        display: inline-block;
        font-weight: 400;
    }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-hero-media--padded .block-hero-media__actions .btn { font-size: 16px; }
}

@media (max-width: 475px) {
    .block-hero-media--padded .block-hero-media__media {
        object-fit: contain;
        object-position: 50% 100%;
    }
}

/* ==== hero-media "padded-inset" variant (live /sdk/ hero): phones show the phone
   picture at its own size, centred at the top of a 478px band under 90px of ink
   (live row background), then the phone texts with the live 60 15 96 25 padding ==== */
@media (max-width: 767px) {
    .block-hero-media--inset .block-hero-media__frame { padding-top: 568px; }
    .block-hero-media--inset .block-hero-media__media {
        top: 90px;
        height: 478px;
        object-fit: none;
        object-position: 50% 0;
    }
    .block-hero-media--inset .block-hero-media__overlay { padding: 60px 15px 96px 25px; }
    .block-hero-media--inset .block-hero-media__content { padding-right: 0; }
    .block-hero-media--inset .block-hero-media__eyebrow { padding-bottom: 0; }
    .block-hero-media--inset .block-hero-media__title {
        padding-bottom: 10px;
        font-weight: 500;
    }
    .block-hero-media--inset .block-hero-media__subtitle { line-height: 115%; }
    .block-hero-media--inset .block-hero-media__actions { margin-top: -15px; }
    .block-hero-media--inset .btn.block-hero-media__phone-only { font-weight: 500; }
    .block-hero-media--inset .btn.block-hero-media__phone-only:hover { color: var(--color-ink); }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-hero-media--inset .block-hero-media__actions .btn {
        padding: 17px 45px 17px 35px;
        font-size: 3.7vw;
    }
}

/* ==== hero-media "textured" variant (live /abis/ hero). Tablets: the live section
   paddings (16.3vw over, 14.4vw left of the picture) with the 80% row centred in
   what is left and the text column at its top. Phones: the picture stays behind
   the text, 150px over it and 20px at the sides, 40px under the button. ==== */
@media (max-width: 980px) {
    .block-hero-media--textured .block-hero-media__frame { padding: 16.3vw 0 0 14.4vw; }
    .block-hero-media--textured .block-hero-media__overlay { align-items: flex-start; }
}

@media (max-width: 767px) {
    .block-hero-media.block-hero-media--textured { padding: 0; }
    .block-hero-media--textured .block-hero-media__frame { padding: 150px 20px 0; }
    .block-hero-media--textured .block-hero-media__media {
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }
    .block-hero-media--textured .block-hero-media__overlay {
        padding: 0 0 40px;
        background: none;
    }
    .block-hero-media--textured .block-hero-media__content { padding-right: 20px; }
    .block-hero-media--textured .block-hero-media__text {
        font-family: var(--font-light);
        font-size: 6.9vw;
        font-weight: 300;
        line-height: 115%;
        letter-spacing: 0.5px;
    }
    .block-hero-media--textured .block-hero-media__eyebrow {
        padding-bottom: 6.9vw;
        font-weight: inherit;
    }
    .block-hero-media--textured .block-hero-media__title {
        padding-bottom: 10px;
        font-size: 36px;
        font-weight: 500;
    }
    .block-hero-media--textured .block-hero-media__subtitle {
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
    }
    .block-hero-media--textured .block-hero-media__actions { margin: 20px 0; }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-hero-media--textured .block-hero-media__title { margin-bottom: 20px; }
    .block-hero-media--textured .block-hero-media__actions .btn {
        padding: 15.5px 50px 15.5px 24px;
        font-size: 16px;
    }
}

@media (max-width: 479px) {
    .block-hero-media--textured .block-hero-media__title { font-size: 12vw; }
}

/* ==== hero-media "photo" variant (live /enroll/ hero). From 768 to 1280px the text column
   starts 160px in from the left (live page rule on the hero row); in the 1025 to 1500px zoom
   band it ends inside the screen (live runs the empty box past the right edge). Tablets: the
   live section paddings with the column at the top; from 981 to 1023px 15px on both sides.
   Phones: 60px of ink, the phone photo as a 478px cover band (80% across, top), then the
   phone texts with the live 60 25 96 padding. ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-hero-media--photo .block-hero-media__overlay { justify-content: flex-start; }
    .block-hero-media--photo .block-hero-media__content {
        flex-shrink: 0;
        width: 80%;
        margin: 0 auto 0 160px;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .block-hero-media--photo .block-hero-media__content {
        width: calc(100% - 160px);
        max-width: calc(min(var(--container-max), 112.5vw) - 160px);
    }
}

@media (min-width: 981px) and (max-width: 1023px) {
    .block-hero-media--photo .block-hero-media__content { padding-left: 15px; }
}

@media (max-width: 980px) {
    .block-hero-media--photo .block-hero-media__frame { padding: 16.3vw 0 0 14.4vw; }
    .block-hero-media--photo .block-hero-media__overlay { align-items: flex-start; }
    .block-hero-media--photo .block-hero-media__content { padding: 0 15px; }
}

@media (max-width: 767px) {
    .block-hero-media--photo .block-hero-media__frame { padding: 538px 0 0; }
    .block-hero-media--photo .block-hero-media__media {
        top: 60px;
        height: 478px;
        object-fit: cover;
        object-position: 80% 0;
    }
    .block-hero-media--photo .block-hero-media__overlay { padding: 60px 25px 96px; }
    .block-hero-media--photo .block-hero-media__content { padding: 0; }
    .block-hero-media--photo .block-hero-media__eyebrow {
        padding-bottom: 0;
        font-weight: 400;
    }
    .block-hero-media--photo .block-hero-media__title {
        padding-bottom: 10px;
        font-weight: 500;
        letter-spacing: 1px;
    }
    .block-hero-media--photo .block-hero-media__subtitle { line-height: 115%; }
    .block-hero-media--photo .block-hero-media__actions { margin: 0; }
    .block-hero-media--photo .block-hero-media__actions .btn {
        height: 44px;
        padding: 10px 45px 10px 35px;
    }
    .block-hero-media--photo .btn.block-hero-media__phone-only { font-weight: 500; }
    .block-hero-media--photo .btn.block-hero-media__phone-only:hover::before { background-image: url("assets/images/arrow.svg"); }
}

/* Live: a 44px bar 60px in from both sides, label centred; from 476 to 767px live drops
   the bar to a 24px sliver (padding 0), the theme keeps the 44px pill (any-width rule). */
@media (max-width: 475px) {
    .block-hero-media--photo .btn.block-hero-media__phone-only {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 60px;
        padding: 0 45px 0 35px;
        font-size: 3.7vw;
    }
}

/* ==== hero-media "split" variant (live /roc-access/ hero). Up to 980px live shows no hero
   text: the title stays for screen readers, subtitle and button are left out (the page's
   statement section carries them on phones). Tablets: the phone picture over the photo,
   16.3vw from the top and 14.4vw from the left (live section paddings). Phones: the
   phone picture at its own ratio under 80px of ink, no photo. ==== */
@media (max-width: 980px) {
    .block-hero-media--split .block-hero-media__frame { padding: 16.3vw 0 0 14.4vw; }
    .block-hero-media--split .block-hero-media__inset {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: auto;
    }
    .block-hero-media--split .block-hero-media__overlay {
        position: absolute;
        width: 1px;
        height: 1px;
        min-height: 0;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .block-hero-media--split .block-hero-media__subtitle,
    .block-hero-media--split .block-hero-media__actions { display: none; }
}

@media (max-width: 767px) {
    .block-hero-media--split .block-hero-media__frame { padding: 80px 0 0; }
    .block-hero-media--split .block-hero-media__media,
    .block-hero-media--split .block-hero-media__frame::after { display: none; }
}

/* ==== hero-media "gradient" variant (live /roc-evidence/ hero). The live row is not zoomed
   in the 1025 to 1500px band (80% of the screen, at most 1340px). Tablets: the text column
   with 15px on both sides. Phones: only the phone picture (cover) in a 490px band, no
   gradient; the title stays for screen readers, subtitle and button are left out (the
   page's statement section carries them on phones). ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-hero-media--gradient .block-hero-media__overlay {
        width: auto;
        max-width: none;
        zoom: 1;
    }
    .block-hero-media--gradient .block-hero-media__content {
        width: 80%;
        max-width: var(--container-max);
    }
}

@media (max-width: 980px) {
    .block-hero-media--gradient .block-hero-media__content { padding: 0 15px; }
}

@media (max-width: 767px) {
    .block-hero-media--gradient .block-hero-media__frame::after { display: none; }
    .block-hero-media--gradient .block-hero-media__media {
        object-fit: cover;
        object-position: 50% 50%;
    }
    .block-hero-media--gradient .block-hero-media__overlay {
        position: absolute;
        width: 1px;
        height: 1px;
        min-height: 0;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .block-hero-media--gradient .block-hero-media__subtitle,
    .block-hero-media--gradient .block-hero-media__actions { display: none; }
}

/* hero-media "bottom" phones: 60px of ink over a 478px picture band (cover, 80% from the left), no texts (the title stays for
   screen readers; the page's statement section carries the texts). */
@media (max-width: 767px) {
    .block-hero-media--bottom .block-hero-media__overlay {
        position: absolute;
        width: 1px;
        height: 1px;
        min-height: 0;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .block-hero-media--bottom .block-hero-media__frame { padding-top: 538px; }
    .block-hero-media--bottom .block-hero-media__media {
        top: 60px;
        height: 478px;
        object-fit: cover;
        object-position: 80% 0;
    }
}

/* ==== rich-text "figure" tiers (live /roc-evidence/ s2). 1675px and up: 50px over (Divi
   section padding). 981 to 1040px: the picture 85% of its column at its own ratio.
   Tablets: picture over the text (551px box), centred copy, 3.75vw + 140px under. Phones:
   20 15 60, the picture full width at its own ratio, 40px under it, the eyebrow, 8.4vw
   heading and 4.2vw copy. ==== */
@media (min-width: 1675px) {
    .block-rich-text.block-rich-text--figure { padding-top: 50px; }
}

@media (min-width: 981px) and (max-width: 1040px) {
    .block-rich-text--figure .block-rich-text__media img {
        width: 85%;
        height: auto;
    }
}

@media (max-width: 980px) {
    .block-rich-text.block-rich-text--figure { padding: 0 0 calc(3.75vw + 140px); }
    .block-rich-text--figure .block-rich-text__media,
    .block-rich-text--figure .block-rich-text__body { width: auto; }
    .block-rich-text--figure .block-rich-text__text {
        margin-bottom: 40px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .block-rich-text.block-rich-text--figure { padding: 20px 15px 60px; }
    .block-rich-text--figure .container { width: 100%; }
    .block-rich-text--figure .block-rich-text__media { margin-bottom: 40px; }
    .block-rich-text--figure .block-rich-text__media img {
        width: 100%;
        height: auto;
    }
    .block-rich-text--figure .block-rich-text__eyebrow {
        display: block;
        margin-bottom: 40px;
        padding-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-transform: uppercase;
    }
    .block-rich-text.block-rich-text--figure .block-rich-text__heading {
        margin-bottom: 0;
        padding-bottom: 10px;
    }
    .block-rich-text.block-rich-text--figure .block-rich-text__text {
        margin-bottom: 0;
        line-height: 140%;
        text-align: left;
    }
}

/* ==== feature-grid "grouped" tiers (live /roc-evidence/ s3). The heading keeps its line
   break on desktops. Tablets: one column, 60px over and under, the cream eyebrow 16px
   over the heading, group headings, titles and copy centred like the live tablet layout
   (live prints them ink on ink there; the theme keeps the desktop colours, any-width
   rule) and 40px between the features (live has none between two of them). Phones: no
   eyebrow (the section above shows it), 8.4vw heading 60px over the groups, 3.5vw group
   headings, 5.6vw titles 24px over the 4.2vw copy, 40px between the features, 60px after
   a group, 48px under the section. ==== */
@media (max-width: 1440px) {
    .block-feature-grid--grouped .block-feature-grid__heading br { display: inline; }
}

@media (max-width: 980px) {
    .block-feature-grid.block-feature-grid--grouped { padding: 60px 0; }
    .block-feature-grid--grouped .block-feature-grid__eyebrow {
        margin-bottom: 16px;
        color: var(--color-cream);
    }
    .block-feature-grid--grouped .block-feature-grid__heading { margin-bottom: 40px; }
    .block-feature-grid--grouped .block-feature-grid__group,
    .block-feature-grid--grouped .block-feature-grid__item { text-align: center; }
    .block-feature-grid--grouped .block-feature-grid__item:nth-child(n) { margin-bottom: 40px; }
    .block-feature-grid--grouped .block-feature-grid__title { padding-left: 0; }
    .block-feature-grid--grouped .block-feature-grid__text { margin-bottom: 0; }
}

@media (max-width: 767px) {
    .block-feature-grid.block-feature-grid--grouped { padding: 0 15px 48px; }
    .block-feature-grid--grouped .block-feature-grid__eyebrow { display: none; }
    .block-feature-grid--grouped .block-feature-grid__heading {
        margin-bottom: 60px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-feature-grid--grouped .block-feature-grid__group,
    .block-feature-grid--grouped .block-feature-grid__item { text-align: left; }
    .block-feature-grid--grouped .block-feature-grid__group {
        padding-bottom: 0;
        font-size: 3.5vw;
    }
    .block-feature-grid__group br { display: inline; }
    .block-feature-grid--grouped .block-feature-grid__item.is-group-last { margin-bottom: 60px; }
    .block-feature-grid--grouped .block-feature-grid__item.is-last { margin-bottom: 0; }
    .block-feature-grid--grouped .block-feature-grid__title {
        margin-bottom: 24px;
        padding-bottom: 0;
        font-size: 5.6vw;
        line-height: 120%;
    }
    .block-feature-grid--grouped .block-feature-grid__item .block-feature-grid__text {
        margin-bottom: 0;
        font-size: 4.2vw;
        line-height: 140%;
    }
}

/* ==== headline-tags tiers (live /roc-evidence/ s4). 1675px and up: 33px rows (Divi).
   1025 to 1500px: the art row at the 80% zoom like the live row; up to 1279px the art keeps
   the 1440 proportion (58.7vw; live keeps 845px and covers more of the narrower heading,
   any-width rule). 981 to 1024px: live puts
   the 1056px art over the whole width, over the copy and the tags; the theme scales it
   like at 1440 (58.7vw) and keeps it under the text (any-width rule). Up to 1024px the
   heading breaks at the soft hyphens of the content ("Evi- / dence", "Work- / flow", the
   same six lines; live breaks the words anywhere). Tablets: no art row, the copy left in
   its 320px box (live prints it ink on ink, centred; the theme keeps it cream), the strip as wide
   as the column (live runs it past the screen), 40px under it. Phones: the small
   picture, 15.1vw heading 150px over the 4.2vw copy (233%), the strip across the column
   on ink, the backdrop at the bottom (natural size, 230px past the bottom edge), 28px
   under the section. ==== */
@media (min-width: 1675px) {
    .block-headline-tags__art-row { padding: 33px 0; }
}

@media (max-width: 1500px) {
    .block-headline-tags__anchor { zoom: 0.8; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .block-headline-tags__anchor { zoom: 1; }
    .block-headline-tags__art { width: 58.7vw; }
}

/* Art scroll motion (ROC-99, DIGITAL-301): where the art is over the text (1025px up) it moves with the scroll
   (--motion-y on the section, eased over the 15px scroll steps); the tag strip is filled and in front of it. */
@media (min-width: 1025px) {
    .block-headline-tags--art-motion .block-headline-tags__art {
        transform: translateY(var(--motion-y, 0px));
        transition: transform 200ms linear;
    }
    .block-headline-tags--art-motion .block-headline-tags__tags {
        position: relative;
        z-index: 51;
        background-color: var(--color-ink);
    }
}

@media (max-width: 1024px) {
    .block-headline-tags__anchor { zoom: 1; }
    .block-headline-tags__art {
        z-index: 0;
        width: 58.7vw;
    }
}

@media (max-width: 980px) {
    .block-headline-tags__column { width: auto; }
    .block-headline-tags { padding-bottom: 40px; }
    .block-headline-tags__tags {
        justify-content: space-between;
        gap: 0;
        width: auto;
    }
    .block-headline-tags__art-row { display: none; }
}

@media (max-width: 767px) {
    /* The live 28px section margin shows ink: kept as padding, the backdrop stays clipped
       at the live section edge (the ::after band covers it). */
    .block-headline-tags.block-headline-tags {
        z-index: auto;
        padding: 0 15px 28px;
        overflow: hidden;
    }
    .block-headline-tags::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 28px;
        background-color: var(--color-ink);
    }
    .block-headline-tags .container { width: 100%; }
    .block-headline-tags__backdrop {
        position: absolute;
        bottom: -202px;
        left: 50%;
        display: block;
        max-width: none;
        transform: translateX(-50%);
    }
    .block-headline-tags__inner { position: relative; }
    .block-headline-tags__picture {
        display: block;
        width: 200px;
        margin-bottom: 20px;
        line-height: 0;
    }
    .block-headline-tags__heading {
        margin-bottom: 150px;
        padding-bottom: 0;
        font-size: 15.1vw;
    }
    .block-headline-tags__text {
        width: 100%;
        margin-bottom: 20px;
        font-size: 4.2vw;
        line-height: 233%;
    }
    .block-headline-tags__tags {
        font-size: 3.5vw;
        background-color: var(--color-ink);
    }
}

@media (max-width: 475px) {
    .block-headline-tags__tags { padding: 14px 24px; }
}

/* ==== definition-rows tiers (live /roc-evidence/ s5 and s8). Tablets: title over copy,
   20px over and under each row, the copy centred; cream: 60px over and under, the
   heading over the pill.
   The role card keeps the page column on tablets with 40px between the blurbs (live
   moves the row to the screen edge with the blurbs 127px apart, copy at x 0). Phones:
   the card is a rust box (50px over and under) with the blurbs centred one under the
   other (24px + 30px apart, at most 253px wide), 40px under it; rows: 7vw title 24px
   over the 4.2vw copy, 40px to the rule, 60px between the rows. ==== */
@media (min-width: 1675px) {
    .block-definition-rows.block-definition-rows--cream { padding-bottom: 50px; }
}

@media (max-width: 980px) {
    .block-definition-rows.block-definition-rows--cream { padding: 60px 0; }
    .block-definition-rows__header { flex-direction: column; }
    .block-definition-rows__cards { gap: 40px; }
    .block-definition-rows__text { text-align: center; }
    .block-definition-rows__card { margin-bottom: 30px; }
    .block-definition-rows__row {
        display: block;
        padding: 20px 0;
    }
}

@media (max-width: 767px) {
    .block-definition-rows { padding: 0 15px 60px; }
    .block-definition-rows.block-definition-rows--cream { padding: 60px 15px; }
    .block-definition-rows .container { width: 100%; }
    .block-definition-rows__header { margin-bottom: 60px; }
    .block-definition-rows__heading {
        margin-bottom: 40px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-definition-rows__actions {
        display: flex;
        margin: 0;
    }
    .block-definition-rows__actions .btn { font-size: 16px; }
    .block-definition-rows__cards {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-bottom: 40px;
        padding: 50px 0;
        background-color: var(--color-rust);
        text-align: center;
    }
    .block-definition-rows__cards::before { display: none; }
    .block-definition-rows__card {
        flex: none;
        width: 100%;
        max-width: 253px;
    }
    .block-definition-rows__icon { margin: 0 auto 30px; }
    .block-definition-rows__card-title {
        padding-bottom: 0;
        font-size: 5.4vw;
    }
    .block-definition-rows__row {
        margin-bottom: 60px;
        padding: 0 0 40px;
    }
    .block-definition-rows__row:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .block-definition-rows--cream .block-definition-rows__row:last-child { margin-bottom: 40px; }
    .block-definition-rows__title {
        margin-bottom: 24px;
        font-size: 7vw;
    }
    .block-definition-rows__text {
        font-size: 4.2vw;
        text-align: left;
    }
    .block-definition-rows--intro .block-definition-rows__text p:not(:last-child) { margin-bottom: 17px; }
}

/* ==== accordion-list intro tiers (live /roc-evidence/ s6): tablets 120px under the
   section, the copy centred 40px over the list; phones 60 15 96 and 4.2vw copy. ==== */
@media (max-width: 980px) {
    .block-accordion-list.block-accordion-list--intro { padding-bottom: 120px; }
    .block-accordion-list--intro .block-accordion-list__intro {
        margin-bottom: 40px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--intro { padding: 60px 15px 96px; }
    .block-accordion-list--intro .block-accordion-list__intro {
        font-size: 4.2vw;
        text-align: left;
    }
}

/* ==== image-cta "tall" tiers (live /roc-evidence/ s9). Tablets: at least 60% of the screen
   height, 12.9vw over and 19.5vw under. Phones: the phone picture covers the section
   (gradient from the bottom), 460 25 60, the phone heading 10px over the cream copy. ==== */
@media (min-width: 1675px) {
    .block-image-cta.block-image-cta--tall { padding-top: 50px; }
}

@media (max-width: 980px) {
    .block-image-cta.block-image-cta--tall {
        min-height: 60vh;
        padding: 12.9vw 0 19.5vw;
    }
}

@media (max-width: 767px) {
    .block-image-cta.block-image-cta--tall {
        min-height: 0;
        padding: 460px 25px 60px;
    }
    .block-image-cta--tall .container { width: 100%; }
    .block-image-cta--tall .block-image-cta__image {
        left: 0;
        width: 100%;
        height: 100%;
        margin-left: 0;
    }
    .block-image-cta--tall::before { background-image: linear-gradient(0deg, var(--color-ink) 0%, rgba(255, 255, 255, 0) 100%); }
    .block-image-cta--tall .block-image-cta__heading { margin-bottom: 10px; }
    .block-image-cta--tall .block-image-cta__text {
        margin-bottom: 0;
        color: var(--color-cream);
    }
}

/* ==== From 475px down the live "nobr" modules drop their line breaks: the accordion intro
   and the definition-rows heading (live /roc-evidence/). ==== */
@media (max-width: 475px) {
    .block-accordion-list--intro .block-accordion-list__intro br,
    .block-definition-rows__heading br { display: none; }
    .block-definition-rows__heading,
    .block-definition-rows__title { padding-bottom: 0; }
    .block-definition-rows__actions .btn {
        height: 44px;
        padding: 10px 50px 10px 24px;
        font-size: 4.2vw;
    }
    .block-accordion-list--intro .block-accordion-list__panel {
        padding-bottom: 20px;
        font-size: 16px;
    }
    .block-accordion-list--intro .block-accordion-list__panel p { line-height: 135%; }
    /* live site-wide phone rule for light pills: a tapped pill loses its fill */
    .block-definition-rows .btn--light:hover {
        background-color: transparent;
        color: var(--color-black);
    }
}

/* ==== platform-icon-grid tiers (live /sdk/ s2). The language row is 70% wide
   (the plain container in the 1025 to 1500px zoom band), 60% on tablets. ==== */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-platform-icon-grid__languages { width: 70%; }
}

@media (max-width: 980px) {
    .block-platform-icon-grid__includes {
        flex-direction: column;
        gap: 0;
    }
    .block-platform-icon-grid__label,
    .block-platform-icon-grid__column { width: auto; }
    .block-platform-icon-grid__languages { width: 60%; }
    .block-platform-icon-grid__languages .block-platform-icon-grid__icon {
        width: auto;
        height: 53px;
    }
}

@media (max-width: 767px) {
    .block-platform-icon-grid { padding: 0 25px; }
    .block-platform-icon-grid .container { width: 100%; }
    .block-platform-icon-grid__heading {
        margin-bottom: 40px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-platform-icon-grid__heading br { display: none; }
    .block-platform-icon-grid__includes {
        margin-bottom: 24px;
        padding-bottom: 40px;
    }
    .block-platform-icon-grid__label {
        margin-bottom: 40px;
        font-size: 3.25vw;
    }
    .block-platform-icon-grid__title {
        margin-bottom: 24px;
        font-size: 5.6vw;
    }
    .block-platform-icon-grid__item { font-size: 4.2vw; }
    /* Live: only the first list loses the 5px under its last item on phones. */
    .block-platform-icon-grid__column:first-of-type .block-platform-icon-grid__item:last-child { margin-bottom: 0; }
    .block-platform-icon-grid__platforms { margin-bottom: 40px; }
    .block-platform-icon-grid__platforms .block-platform-icon-grid__icon { width: auto; }
    .block-platform-icon-grid__languages {
        flex-direction: column;
        gap: 40px;
        padding-bottom: 0;
    }
    .block-platform-icon-grid__group {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
}

@media (max-width: 479px) {
    .block-platform-icon-grid__column:not(:last-child) { margin-bottom: 30px; }
}

@media (max-width: 475px) {
    .block-platform-icon-grid__group {
        justify-content: center;
        gap: 40px;
    }
}

/* ==== laptop-showcase titled variant tiers (live /sdk/ s3 + phone section s4) ==== */
/* Desktops: the copy in two balanced lines at every width, in a 640px box instead of the three
   live lines (Evan, DIGITAL-303, ROC-102) */
@media (min-width: 981px) {
    .block-laptop-showcase--titled .block-laptop-showcase__text {
        max-width: 640px;
        margin: 0 auto;
        text-wrap: balance;
    }
    .block-laptop-showcase--titled .block-laptop-showcase__text br { display: none; }
}

/* Laptops: the 1028px stage crops this picture's sides, and centring it runs the monitor into the right
   edge. Centre the devices instead (their middle is 860.8px into the picture at this height), without
   leaving a gap at the picture's right edge. */
@media (min-width: 1025px) and (max-width: 1535px) {
    .block-laptop-showcase--titled .block-laptop-showcase__image { object-position: max(100vw - 1536px, 50vw - 860.8px) 50%; }
}

@media (max-width: 980px) {
    .block-laptop-showcase--titled .block-laptop-showcase__stage {
        height: auto;
        padding-top: 150px;
    }
    .block-laptop-showcase--titled .block-laptop-showcase__stage::before { height: 60px; }
    .block-laptop-showcase--titled .block-laptop-showcase__text {
        width: 50%;
        margin: 0 auto;
    }
}

/* Phones: 96px of ink, the text on ink (steel, left aligned), then the phone
   picture in a 325px band (live phone section s4). */
@media (max-width: 767px) {
    .block-laptop-showcase.block-laptop-showcase--titled {
        margin-bottom: 0;
        padding-top: 96px;
    }
    .block-laptop-showcase--titled .block-laptop-showcase__stage {
        min-height: 0;
        padding: 0;
    }
    .block-laptop-showcase--titled .block-laptop-showcase__stage::before {
        left: calc(50% - 150px);
        width: 300px;
        height: 40px;
    }
    .block-laptop-showcase--titled .block-laptop-showcase__intro {
        width: 100%;
        padding: 0 25px 40px;
    }
    .block-laptop-showcase--titled .block-laptop-showcase__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
        text-align: left;
        color: var(--color-steel);
    }
    .block-laptop-showcase--titled .block-laptop-showcase__text {
        width: 100%;
        font-size: 4.2vw;
        text-align: left;
        color: var(--color-steel);
    }
    .block-laptop-showcase--titled .block-laptop-showcase__image {
        position: static;
        height: 325px;
    }
}

@media (max-width: 475px) {
    .block-laptop-showcase--titled .block-laptop-showcase__heading br,
    .block-laptop-showcase--titled .block-laptop-showcase__text br { display: none; }
}

/* ==== feature-cards-grid tiers (live /sdk/ s5) ==== */
@media (min-width: 476px) and (max-width: 1279px) {
    .block-feature-cards-grid__card { min-height: 280px; }
}

@media (max-width: 980px) {
    .block-feature-cards-grid { padding: 200px 0 100px; }
    .block-feature-cards-grid__eyebrow { margin-bottom: 150px; }
    .block-feature-cards-grid__intro { width: 50%; }
}

/* Tablets: the card column grows with its copy (live keeps 168px and the copy
   runs out of the card over the next one; not copied). */
@media (min-width: 768px) and (max-width: 980px) {
    .block-feature-cards-grid__inner {
        height: auto;
        min-height: 168px;
    }
}

@media (max-width: 767px) {
    .block-feature-cards-grid { padding: 96px 25px; }
    .block-feature-cards-grid .container { width: 100%; }
    .block-feature-cards-grid__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
    }
    .block-feature-cards-grid__heading {
        margin-bottom: 14px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-feature-cards-grid__intro {
        width: auto;
        margin-bottom: 40px;
        font-size: 4.2vw;
    }
    .block-feature-cards-grid__row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0;
    }
    .block-feature-cards-grid__row:first-of-type,
    .block-feature-cards-grid__row:nth-of-type(2) { margin-bottom: 20px; }
    .block-feature-cards-grid__card {
        width: auto;
        font-size: 4.2vw;
        transform: none;
    }
    .block-feature-cards-grid__title { font-size: 5.6vw; }
    .block-feature-cards-grid__more { display: block; }
    .block-feature-cards-grid__more[hidden] { display: none; }
}

@media (min-width: 476px) and (max-width: 767px) {
    /* hardcoded: live line box leaves 7px under the button here */
    .block-feature-cards-grid__more { padding-bottom: 7px; }
    .block-feature-cards-grid__more .btn {
        height: 58px;
        padding: 17px 45px 17px 35px;
        font-size: 3.7vw;
    }
}

@media (max-width: 475px) {
    .block-feature-cards-grid__row.is-collapsed { display: none; }
    .block-feature-cards-grid__row.is-collapsed.is-revealed { display: flex; }
    /* 40px over "View More" while the next row is hidden; once it opens the rows keep the usual 20px
       (Evan, DIGITAL-303). Matched sections keep their gap inside row two. */
    .block-feature-cards-grid:not(.block-feature-cards-grid--matched) .block-feature-cards-grid__row:nth-of-type(2):has(+ .is-collapsed:not(.is-revealed)) { margin-bottom: 40px; }
}

/* ==== feature-cards-grid cards "under" tiers (live /roc-access/ s6). Tablets: two columns
   without the stagger (live squeezes three 23.2vw cards and breaks the words), the
   download heading 33px rust. Phones: 40px after the cards, the heading 5.14vw centred. ==== */
/* Narrow cards (tablets to about 1200px): live breaks long title words anywhere
   ("Accompanie / d"); the theme hyphenates them (same line count). */
@media (min-width: 768px) {
    .block-feature-cards-grid--under .block-feature-cards-grid__title { hyphens: auto; }
}

@media (min-width: 768px) and (max-width: 980px) {
    .block-feature-cards-grid--under .block-feature-cards-grid__intro { width: 50%; }
    .block-feature-cards-grid--under .block-feature-cards-grid__rows {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 80px;
    }
    .block-feature-cards-grid--under .block-feature-cards-grid__row { display: contents; }
    .block-feature-cards-grid--under .block-feature-cards-grid__card {
        width: auto;
        transform: none;
    }
    .block-feature-cards-grid--under .block-feature-cards-grid__form-heading {
        font-size: 33px;
        color: var(--color-rust);
    }
}

/* Laptops and portrait screens (/roc-access/ and /sdk/): 23.2vw cards are too narrow here and the stagger runs into
   the next content, so three equal cards fill the row (live keeps them narrow; not copied). */
@media (min-width: 981px) and (max-width: 1279px) {
    .block-feature-cards-grid--under .block-feature-cards-grid__row,
    .block-feature-cards-grid--dark .block-feature-cards-grid__row { gap: 24px; }
    .block-feature-cards-grid--under .block-feature-cards-grid__card,
    .block-feature-cards-grid--dark .block-feature-cards-grid__card {
        flex: 1 1 0;
        width: auto;
        min-height: 0;
        transform: none;
    }
    .block-feature-cards-grid--under .block-feature-cards-grid__title { hyphens: manual; }
    .block-feature-cards-grid--dark .block-feature-cards-grid__inner {
        height: auto;
        min-height: 168px;
    }
}

/* Up to 1024 there is no zoom: tighter gaps and side padding so "documentation" fits and the three cards stay equal. */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-feature-cards-grid--dark .block-feature-cards-grid__row { gap: 16px; }
    .block-feature-cards-grid--dark .block-feature-cards-grid__card {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* /sdk/: the last card starts at most 100px down, so on tall windows it does not reach the next section's heading. */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
    .block-feature-cards-grid--dark .block-feature-cards-grid__row:last-of-type .block-feature-cards-grid__card--offset-200 {
        transform: translateY(min(var(--motion-y, 100px), 100px));
    }
}

@media (max-width: 767px) {
    /* padding, not margin: the page's legacy phone snippet zeroes heading margins */
    .block-feature-cards-grid--under .block-feature-cards-grid__heading {
        margin-bottom: 0;
        padding-bottom: 14px;
    }
    .block-feature-cards-grid--under .block-feature-cards-grid__intro { width: auto; }
    .block-feature-cards-grid--under .block-feature-cards-grid__row:last-of-type { margin-bottom: 40px; }
    .block-feature-cards-grid--under .block-feature-cards-grid__form-heading {
        margin-bottom: 32px;
        font-size: 5.14vw;
        line-height: 125%;
        text-align: center;
    }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-feature-cards-grid--under .block-feature-cards-grid__heading { padding-bottom: 24px; }
}

@media (max-width: 475px) {
    .block-feature-cards-grid--under .block-feature-cards-grid__inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .block-feature-cards-grid--under .block-feature-cards-grid__title { padding-bottom: 0; }
}

/* ==== feature-cards-grid ink theme and latent-match tiers (live /abis/ s3) ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-feature-cards-grid--ink .block-feature-cards-grid__intro,
    .block-feature-cards-grid--ink .block-feature-cards-grid__card { width: 33.3vw; }
    .block-feature-cards-grid--ink .block-feature-cards-grid__inner { height: 190px; }
}

/* Tablets: the ink card column grows with its copy too (live keeps 190px and the copy runs out of
   the card; any-width rule, same decision as the /sdk/ cards). */
@media (min-width: 768px) and (max-width: 980px) {
    .block-feature-cards-grid--ink .block-feature-cards-grid__inner {
        height: auto;
        min-height: 190px;
    }
}

@media (max-width: 980px) {
    .block-feature-cards-grid--ink .block-feature-cards-grid__heading { font-size: 3.13vw; }
    /* Live tablet row: 90% wide at the left edge (the eyebrow touches the screen edge); here it
       lines up with the 80% column like the heading below it, 456px under it like live. */
    .latent-match__head.container {
        width: var(--container-width);
        margin: 0 auto 456px;
    }
    .latent-match__eyebrow { font-size: 0.97vw; }
    .latent-match__heading { font-size: 3.13vw; }
    .latent-match__text { margin-bottom: 120px; }
    .latent-match__bars { padding: 30px 0; }
}

@media (max-width: 767px) {
    .block-feature-cards-grid--ink .block-feature-cards-grid__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
    }
    .block-feature-cards-grid--ink .block-feature-cards-grid__intro {
        max-width: none;
        margin-bottom: 60px;
    }
    /* Live row two carries its 40px gap inside (it stays when View More goes). */
    .block-feature-cards-grid--matched .block-feature-cards-grid__row:nth-of-type(2) {
        margin-bottom: 0;
        padding-bottom: 40px;
    }
    .latent-match__head.container {
        width: 100%;
        margin: 60px 7px 0 0;
        padding-bottom: 40px;
    }
    .latent-match .container { width: 100%; }
    .latent-match__eyebrow { font-size: 3.2vw; }
    .latent-match__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
    }
    .latent-match__text {
        width: 100%;
        margin-bottom: 40px;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .latent-match__image {
        width: auto;
        margin-bottom: 0;
        text-align: right;
    }
    .latent-match__image img {
        width: auto;
        margin-left: auto;
    }
    .latent-match__bars { display: none; }
    .latent-match__note { margin-top: 10px; }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-feature-cards-grid--ink .block-feature-cards-grid__more .btn {
        height: 56px;
        /* hardcoded: the live link's text sits 4px under the middle of the pill */
        padding: 16px 45px 8px 35px;
    }
}

@media (max-width: 475px) {
    .block-feature-cards-grid--ink .block-feature-cards-grid__inner { height: 150px; }
    /* hardcoded: live line box leaves 7px under the button here too */
    .block-feature-cards-grid--ink .block-feature-cards-grid__more { padding-bottom: 7px; }
    .block-feature-cards-grid--matched .block-feature-cards-grid__row:nth-of-type(2) { padding-bottom: 20px; }
}

@media (min-width: 476px) and (max-width: 1279px) {
    .latent-match__image { width: 100%; }
    .latent-match__bar:first-child { width: 60%; }
}

/* ==== slider-showcase tiers (live /abis/ s4, s5) ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-slider-showcase__main.container { width: 125%; }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .block-slider-showcase__body { padding-bottom: 0; }
}

@media (max-width: 980px) {
    .block-slider-showcase,
    .block-slider-showcase--steel { padding: 30px 0; }
    .block-slider-showcase__head { padding: 0 25px; }
    .block-slider-showcase__eyebrow {
        margin-bottom: 30px;
        font-size: 0.97vw;
    }
    .block-slider-showcase__main.container { width: var(--container-width); }
    .block-slider-showcase--tablet-narrow .block-slider-showcase__image { width: 70%; }
}

@media (max-width: 767px) {
    .block-slider-showcase,
    .block-slider-showcase--steel { padding: 40px 30px; }
    .block-slider-showcase .container { width: 100%; }
    .block-slider-showcase__head { padding: 0; }
    .block-slider-showcase__eyebrow {
        margin-bottom: 100px;
        font-size: 3.25vw;
    }
    /* 40px under the logo so it reads as its own line (Evan, DIGITAL-304; live 24px) */
    .block-slider-showcase__logo {
        width: 170px;
        margin-bottom: 40px;
    }
    .block-slider-showcase__logo img { width: auto; }
    .block-slider-showcase__heading {
        margin-bottom: 24px;
        font-size: 8vw;
        line-height: 116%;
    }
    .block-slider-showcase__intro {
        width: auto;
        margin-bottom: 100px;
        font-size: 4.2vw;
    }
    .block-slider-showcase__media { height: 285px; }
    .block-slider-showcase--tablet-narrow .block-slider-showcase__image { width: 100%; }
    .block-slider-showcase__arrow { top: 230px; }
}

/* Small phones: the arrows above the picture, previous at the left and next at the right (Evan,
   DIGITAL-304; live keeps both at the right). Live per-section offsets: 67px up on ink, 62px on steel,
   4px further in on steel. */
@media (max-width: 475px) {
    .block-slider-showcase--notched::before { content: none; }
    .block-slider-showcase__arrow { top: -67px; }
    .block-slider-showcase__arrow--prev { left: 0; }
    .block-slider-showcase__arrow--next { right: 0; }
    .block-slider-showcase--steel .block-slider-showcase__arrow { top: -62px; }
    .block-slider-showcase--steel .block-slider-showcase__arrow--prev { left: 4px; }
    .block-slider-showcase--steel .block-slider-showcase__arrow--next { right: 4px; }
}

/* ==== numbered-grid "specs" tiers (live /abis/ s6). From 476 to 1279px live prints
   the numbers at 54px inside the module's own line height. ==== */
@media (min-width: 981px) and (max-width: 1279px) {
    .block-numbered-grid--specs .block-numbered-grid__number {
        font-size: 54px;
        line-height: calc(1.45vw * 1.5);
    }
}

/* Live items are flex columns with 20px gaps here. */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-numbered-grid--specs .block-numbered-grid__number { margin-bottom: calc(1vw + 20px); }
    .block-numbered-grid--specs .block-numbered-grid__title { margin-bottom: 70px; }
}

@media (max-width: 980px) {
    .block-numbered-grid.block-numbered-grid--specs { padding: 60px 0 180px; }
    .block-numbered-grid--specs .block-numbered-grid__eyebrow {
        margin: 0 25px 30px;
        font-size: 0.97vw;
    }
    .block-numbered-grid--specs .block-numbered-grid__heading { margin-bottom: 30px; }
    .block-numbered-grid--specs .block-numbered-grid__pair:first-child { margin-bottom: 40px; }
    .block-numbered-grid--specs .block-numbered-grid__item:nth-child(n) { width: 50%; }
    .block-numbered-grid--specs .block-numbered-grid__body { text-align: left; }
    .block-numbered-grid--specs .block-numbered-grid__number {
        font-size: 54px;
        line-height: 87px;
    }
    .block-numbered-grid--specs .block-numbered-grid__title,
    .block-numbered-grid--specs .block-numbered-grid__body p { width: 70%; }
    .block-numbered-grid--specs .block-numbered-grid__title {
        font-size: 28px;
        line-height: 36px;
        color: var(--color-steel);
        overflow-wrap: break-word;
    }
}

@media (max-width: 767px) {
    .block-numbered-grid.block-numbered-grid--specs { padding: 40px 15px 96px; }
    .block-numbered-grid--specs .container { width: 100%; }
    .block-numbered-grid--specs .block-numbered-grid__eyebrow {
        margin: 0 0 40px;
        font-size: 3.25vw;
    }
    .block-numbered-grid--specs .block-numbered-grid__heading {
        margin-bottom: 40px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-numbered-grid--specs .block-numbered-grid__intro {
        width: auto;
        margin-bottom: 60px;
        font-size: 4.2vw;
    }
    /* line-height 100%: from 476 to 767px live keeps the 54px figures in a 5.6vw line, so they reach
       up into the copy of the row above (any-width rule) */
    .block-numbered-grid--specs .block-numbered-grid__number {
        display: block;
        margin-bottom: 18px;
        line-height: 100%;
    }
    .block-numbered-grid--specs .block-numbered-grid__title,
    .block-numbered-grid--specs .block-numbered-grid__body p { width: auto; }
    .block-numbered-grid--specs .block-numbered-grid__pair:nth-child(n) { margin-bottom: 0; }
    .block-numbered-grid--specs .block-numbered-grid__title {
        margin-bottom: 8px;
        padding-bottom: 10px;
        font-family: var(--font-medium);
        font-size: 5.6vw;
        line-height: 100%;
        color: var(--color-cream);
    }
    .block-numbered-grid--specs .block-numbered-grid__body {
        display: block;
        font-family: var(--font-poppins);
        font-size: 4.2vw;
        line-height: 133%;
    }
}

@media (max-width: 475px) {
    .block-numbered-grid--specs .block-numbered-grid__pair {
        flex-direction: column;
        gap: 40px;
    }
    .block-numbered-grid--specs .block-numbered-grid__item:nth-child(n) { width: 100%; }
    .block-numbered-grid--specs .block-numbered-grid__number {
        font-size: 5.6vw;
        line-height: 100%;
    }
}

/* ==== laptop-showcase "short" variant tiers (live /abis/ s7) ==== */
@media (max-width: 767px) {
    .block-laptop-showcase.block-laptop-showcase--short { margin-bottom: 0; }
    .block-laptop-showcase--short .block-laptop-showcase__stage { height: 325px; }
    .block-laptop-showcase.block-laptop-showcase--strip { margin-bottom: 0; }
    .block-laptop-showcase--strip .block-laptop-showcase__stage { height: 140px; }
    .block-laptop-showcase--pattern .block-laptop-showcase__stage { height: 208px; }
}

/* ==== guide-form tiers (shared, see style.css GUIDE FORM) ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    /* At the zoom the 3px form border renders 2px (same pull-back as cta-form). */
    .guide-form .frm-show-form { margin: -2.5px; }
}

@media (max-width: 1024px) {
    .guide-form .frm_form_fields .frm_fields_container { flex-direction: column; }
}

/* Tablets: the stacked field and pill start at the heading's left edge, as on desktop
   (live centres them in the 460px form box, off the heading; Evan, DIGITAL-300). Phones
   centre heading, field and pill. */
@media (min-width: 768px) and (max-width: 1024px) {
    .guide-form .frm_form_fields .frm_fields_container { align-items: flex-start; }
}

@media (max-width: 475px) {
    .guide-form .frm_forms { max-width: none; }
    .guide-form .frm_form_fields .frm_fields_container { gap: 20px; }
    .guide-form .email-download { width: 100%; }
    .guide-form .with_frm_style .email-download input,
    .guide-form .with_frm_style .email-download input::placeholder {
        width: 100%;
        font-size: 4.2vw;
    }
    /* The hint sits centred in the pill, typing starts at the left (as /roc-access/, DIGITAL-299). */
    .guide-form .with_frm_style .email-download input::placeholder { text-align: center; }
    .guide-form .frm_submit {
        width: 225px;
        height: 55px;
        align-items: center;
    }
    /* Cream label like every other rust pill (live phones print it steel; Evan, DIGITAL-299). */
    .guide-form .with_frm_style .frm_submit .frm_button_submit {
        height: 50px;
        min-height: 50px;
        font-size: 4.2vw;
    }
    .guide-form--light .frm_submit.frm_flex { width: auto; }
    .guide-form--light .with_frm_style .frm_submit .frm_button_submit {
        height: 55px;
        min-height: 55px;
        font-size: 18px;
    }
}

/* ==== accordion-list "lead" and "badge" headers (live /roc-access/ s7 + s8, s11) ==== */
/* The live 100px under the link is section padding, outside the zoomed column; the
   badge header pads 2.5% of the screen there, of the column (at most 33px) above. */
@media (min-width: 1501px) {
    .block-accordion-list--header-badge .block-accordion-list__lead { padding: min(2.5%, 33px) 0; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-accordion-list--header-lead .block-accordion-list__lead { margin-bottom: 125px; }
    .block-accordion-list--header-badge .block-accordion-list__lead { padding: 2.5vw 0; }
}

@media (max-width: 1280px) {
    .block-accordion-list.block-accordion-list--header-badge { padding: 3vw 0 140px; }
}

/* Tablets. Lead: 200px over the eyebrow (150px under it), intro 50% with the link at the
   right beside its last lines, 447px over the picture and 87px under it (live paddings),
   36px titles, 33px rust download heading. Badge: no top padding, the header stacked 30px in, no badge,
   40px under the heading, the list 90% wide (past the 80% column like live). */
@media (max-width: 980px) {
    .block-accordion-list.block-accordion-list--header-lead { padding: 200px 0 100px; }
    .block-accordion-list--header-lead .block-accordion-list__lead { margin-bottom: 447px; } /* the link's 60px margin collapses into it */
    .block-accordion-list--header-lead .block-accordion-list__eyebrow { margin-bottom: 150px; }
    .block-accordion-list--header-lead .block-accordion-list__intro { width: 50%; }
    .block-accordion-list__link-wrap {
        margin: -82px 0 60px;
        text-align: right;
    }
    .block-accordion-list--header-lead .block-accordion-list__media { margin-bottom: 87px; }
    .block-accordion-list--header-lead .block-accordion-list__title,
    .block-accordion-list--header-badge .block-accordion-list__title { font-size: 36px; }
    .block-accordion-list__form-heading {
        font-size: 33px;
        color: var(--color-rust);
    }
    .block-accordion-list.block-accordion-list--header-badge { padding: 0 0 calc(3.75vw + 140px); }
    .block-accordion-list--header-badge .block-accordion-list__lead {
        display: block;
        padding: 30px 0 70px;
    }
    .block-accordion-list__aside,
    .block-accordion-list__intro-wrap { width: auto; }
    .block-accordion-list__badge { display: none; }
    .block-accordion-list--header-badge .block-accordion-list__heading { margin-bottom: 40px; }
    .block-accordion-list__lead-line,
    .block-accordion-list--header-badge .block-accordion-list__intro { text-align: center; }
    .block-accordion-list--header-badge .block-accordion-list__list { margin: 0 -6.25% 40px; }
}

/* Phones. Lead: 0 25 46 over the picture's 50px, 3.25vw eyebrow, 8.4vw heading, 4.2vw
   intro, no link, 24px rows, the download heading 24px centred 40px under the list.
   Badge: 96 15 60, 3.25vw eyebrow 20px over the 8.9vw heading, 4.2vw lead and copy,
   60px over the picture. */
@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--header-lead { padding: 0 25px; }
    .block-accordion-list--header-lead .block-accordion-list__lead { margin-bottom: 146px; }
    .block-accordion-list__phone-only { display: block; }
    .block-accordion-list__lead .block-accordion-list__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
    }
    .block-accordion-list__lead .block-accordion-list__heading {
        margin-bottom: 14px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-accordion-list--header-lead .block-accordion-list__intro {
        width: auto;
        font-size: 4.2vw;
    }
    .block-accordion-list--header-lead .block-accordion-list__link-wrap { display: none; }
    .block-accordion-list--header-lead .block-accordion-list__title,
    .block-accordion-list--header-badge .block-accordion-list__title { font-size: 24px; }
    .block-accordion-list__download { margin-top: 40px; }
    .block-accordion-list--header-lead .block-accordion-list__media { margin-bottom: 0; }
    .block-accordion-list__form-heading br,
    .block-feature-cards-grid__form-heading br { display: inline; }
    .block-accordion-list__form-heading {
        margin-bottom: 32px;
        font-size: 24px;
        line-height: 140%;
        text-align: center;
        color: var(--color-ink);
    }
    .block-accordion-list.block-accordion-list--header-badge { padding: 96px 15px 60px; }
    .block-accordion-list--header-badge .block-accordion-list__lead {
        margin-bottom: 60px;
        padding: 0;
    }
    .block-accordion-list--header-badge .block-accordion-list__eyebrow {
        margin-bottom: 20px;
        font-size: 3.25vw;
    }
    .block-accordion-list--header-badge .block-accordion-list__title { font-family: var(--font-medium); }
    .block-accordion-list--header-badge .block-accordion-list__heading {
        margin-bottom: 20px;
        font-size: 8.9vw;
        line-height: 120%;
    }
    .block-accordion-list__lead-line {
        margin-bottom: 20px;
        font-size: 4.2vw;
    }
    .block-accordion-list__lead-line,
    .block-accordion-list--header-badge .block-accordion-list__intro { text-align: left; }
    .block-accordion-list--header-badge .block-accordion-list__intro { font-size: 4.2vw; }
    .block-accordion-list--header-badge .block-accordion-list__list { margin: 0; }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-accordion-list__lead .block-accordion-list__heading { padding-bottom: 10px; }
    .block-accordion-list--header-lead .block-accordion-list__icon,
    .block-accordion-list--header-badge .block-accordion-list__icon { padding-right: 60px; }
}

/* Live drops the row numbers up to 496px (page CSS), the theme's phone rule at 475px. */
@media (min-width: 476px) and (max-width: 496px) {
    .block-accordion-list--header-lead .block-accordion-list__title,
    .block-accordion-list--header-badge .block-accordion-list__title { padding-left: 0; }
    .block-accordion-list--header-lead .block-accordion-list__title::before,
    .block-accordion-list--header-badge .block-accordion-list__title::before { content: none; }
}

@media (max-width: 475px) {
    .block-accordion-list__panel .panel-figure { flex-direction: column; }
    .block-accordion-list__panel .panel-figure figure { width: 100%; }
    .block-accordion-list__lead .block-accordion-list__heading,
    .block-accordion-list__lead-line { padding-bottom: 0; }
    .block-accordion-list--header-badge .block-accordion-list__eyebrow { margin-bottom: 50px; }
}

/* ==== numbered-grid pictures (live /roc-access/ s9 + s10). The live 100px under the intro
   is section padding, outside the zoomed column. Tablets: 200px over the pictures (two
   halves, no gap), intro 50%. Phones: 96px over the pictures (edge to edge, 40px apart),
   25px sides, 8.4vw heading, 4.2vw intro, 40px to the first item like between the items
   (live 88px; Evan, DIGITAL-300). ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-numbered-grid--pictures .block-numbered-grid__head { margin-bottom: 165px; }
}

@media (max-width: 980px) {
    .block-numbered-grid.block-numbered-grid--pictures { padding-top: 200px; }
    .block-numbered-grid__pictures { gap: 0; }
    .block-numbered-grid__picture { width: 50%; }
    .block-numbered-grid--pictures .block-numbered-grid__intro { width: 50%; }
    .block-numbered-grid--pictures .block-numbered-grid__head { margin-bottom: 227px; }
}

@media (max-width: 767px) {
    .block-numbered-grid.block-numbered-grid--pictures { padding: 96px 25px; }
    .block-numbered-grid__phone-only { display: block; }
    .block-numbered-grid--pictures .block-numbered-grid__title { font-size: 5.6vw; }
    .block-numbered-grid--pictures .block-numbered-grid__body { gap: 10px; }
    .block-numbered-grid__pictures {
        gap: 40px;
        margin: 0 -25px 40px;
    }
    .block-numbered-grid__picture { width: calc(50% - 20px); }
    .block-numbered-grid--pictures .block-numbered-grid__heading {
        margin-bottom: 14px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-numbered-grid--pictures .block-numbered-grid__intro {
        width: auto;
        font-size: 4.2vw;
    }
    .block-numbered-grid--pictures .block-numbered-grid__head { margin-bottom: 40px; }
}

@media (max-width: 475px) {
    .block-numbered-grid--pictures .block-numbered-grid__heading { padding-bottom: 0; }
    /* live site-wide phone rule for light pills: a tapped pill loses its fill */
    .block-numbered-grid--pictures .btn--light:hover {
        background-color: transparent;
        color: var(--color-black);
    }
}

/* ==== cta-form rows-centered option (live /roc-access/ page rules): up to 1024px the
   stacked email field sits in the middle of the column ==== */
@media (max-width: 1024px) {
    .block-cta-form--rows-centered .block-cta-form__form#survey-dark .frm_form_fields .frm_fields_container,
    .block-cta-form--rows-centered .block-cta-form__form#survey-light .frm_form_fields .frm_fields_container { align-items: center; }
}

/* ==== cta-form phone-tight option (live /roc-access/ s12): 36px over, 60px under ==== */
@media (max-width: 767px) {
    .block-cta-form.block-cta-form--phone-tight { padding: 36px 25px 60px; }
}

/* ==== related-posts on large phones (476 to 767px): the cards are text only (no dates since ROC-102), so the
   grid keeps 40px of ink over the stripes (24px under the last excerpt + 142px over the 126px stripes) ==== */
@media (min-width: 476px) and (max-width: 767px) {
    .block-related-posts__grid { margin-bottom: 142px; }
}

/* ==== related-posts phone-ink option (live /roc-access/ page CSS): from 475px down the
   titles stand 10px over the excerpts and 60px of ink follow the stripes (live section margin) ==== */
@media (max-width: 475px) {
    .block-related-posts.block-related-posts--phone-ink { padding-bottom: 120px; }
    .block-related-posts--phone-ink::before { bottom: 60px; }
    .block-related-posts--phone-ink::after { bottom: 100px; }
    .block-related-posts--phone-ink .block-related-posts__meta h3 { padding-bottom: 10px; }
}

/* ==== related-posts capability spacing (live capability pages): 60px under the eyebrow from
   981px up, 20px on phones; phones keep 10px under the titles and 60px of ink under the
   stripes (live #explore margin on the ink page). ==== */
@media (min-width: 981px) {
    .block-related-posts--capability .block-related-posts__eyebrow { padding-bottom: 60px; }
}

@media (max-width: 475px) {
    .block-related-posts--capability .block-related-posts__eyebrow { padding-bottom: 20px; }
    .block-related-posts.block-related-posts--capability { padding-bottom: 120px; }
    .block-related-posts--capability::before { bottom: 60px; }
    .block-related-posts--capability::after { bottom: 100px; }
    .block-related-posts--capability .block-related-posts__meta h3 { margin-bottom: 10px; }
}

/* ==== faq-accordion "flush" variant (live /roc-evidence/): phones with 40px of ink over
   the toggle (the live margin under the related posts) and 40px under it, no bottom
   padding, 60px under the opened list ==== */
@media (max-width: 767px) {
    .block-faq-accordion.block-faq-accordion--flush { padding: 40px 25px 0; }
    .block-faq-accordion--flush .block-faq-accordion__toggle-row { padding-bottom: 40px; }
    .block-faq-accordion--flush .block-faq-accordion__body { padding: 0 0 60px; }
}

/* label_open (live product FAQs): 18px label on tablets; phones keep the toggle row with its plus icon and no gap under it. */
@media (max-width: 980px) {
    .block-faq-accordion--label-open .block-faq-accordion__label { font-size: 18px; }
}

@media (max-width: 767px) {
    .block-faq-accordion--label-open .block-faq-accordion__label {
        margin-bottom: 0;
        font-size: 14px;
    }
    .block-faq-accordion--label-open .block-faq-accordion__toggle-icon { display: block; }
}

/* flush-rich (live capability pages): the related posts above keep the ink margin, so no
   padding over the toggle; 60px under the section, open or closed. */
@media (min-width: 476px) {
    .block-faq-accordion--rich .block-faq-accordion__answer p {
        font-size: 18px;
        line-height: 135%;
    }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-faq-accordion--rich .block-faq-accordion__list { width: 100%; }
    .block-faq-accordion--rich .block-faq-accordion__question { line-height: 120%; }
    .block-faq-accordion--rich .block-faq-accordion__item.is-open { padding-top: 0; }
}

@media (max-width: 767px) {
    .block-faq-accordion.block-faq-accordion--rich { padding: 0 25px 60px; }
    .block-faq-accordion--rich .block-faq-accordion__body { padding-bottom: 0; }
}

/* ==== faq-accordion "roomy" variant (live /roc-access/ page CSS): 18px answer paragraphs
   on tablets and desktops; phone questions run up to the icon, rows at least 27px, an
   open row 10px down from 475px ==== */
@media (min-width: 768px) {
    .block-faq-accordion--roomy .block-faq-accordion__answer p { font-size: 18px; }
}

@media (max-width: 767px) {
    .block-faq-accordion--roomy .block-faq-accordion__question {
        flex: 1;
        width: auto;
    }
    .block-faq-accordion--roomy .block-faq-accordion__head { min-height: 27px; }
}

@media (max-width: 475px) {
    .block-faq-accordion--roomy .block-faq-accordion__item.is-open { padding-top: 10px; }
}

/* ==== checklist-card tiers (live /roc-access/ s2). Tablets: live squeezes the heading and
   the card side by side (titles five lines deep); the theme stacks them like phones
   (any-width rule). Phones: 20 15 60, 8.4vw heading, 20px card padding, 3.3vw titles;
   from 475px down 10px rows, an 87px product column and the check at 60%. ==== */
@media (max-width: 980px) {
    .block-checklist-card { padding: 0 0 calc(3.75vw + 140px); }
    .block-checklist-card__row { display: block; }
    .block-checklist-card__intro,
    .block-checklist-card__card { width: auto; }
}

@media (max-width: 767px) {
    .block-checklist-card { padding: 20px 15px 60px; }
    .block-checklist-card .container { width: 100%; }
    .block-checklist-card__heading {
        margin-bottom: 30px;
        padding-bottom: 0;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-checklist-card__phone-only { display: block; }
    .block-checklist-card__card { padding: 20px; }
    .block-checklist-card__title {
        font-size: 3.3vw;
        line-height: 125%;
    }
}

@media (max-width: 475px) {
    .block-checklist-card__labels { align-items: center; }
    .block-checklist-card__item { padding: 10px 0; }
    .block-checklist-card__title { padding-bottom: 0; }
    .block-checklist-card__column { width: 87px; }
    .block-checklist-card__check { transform: scale(0.6); }
}

/* cream flag-cta with the animated flag: phones use the full column width */
@media (max-width: 767px) {
    .block-flag-cta--cream .block-flag-cta__flag.flag-lottie { width: 100%; }
}

/* ==== hero-media second button (live /age-estimation/): phones stack the two pills, centred, 37px apart ==== */
@media (max-width: 767px) {
    .block-hero-media__actions--pair {
        flex-direction: column;
        align-items: center;
        gap: 37px;
        margin-bottom: 20px;
    }
    .block-hero-media__actions--pair .btn--ghost { padding: 10px 24px; }
}

/* ==== checklist-card phone_flush (live /ai-gun-detection/): no space over the heading, 10px under the heading and the
   titles, 56px under the section ==== */
@media (max-width: 767px) {
    .block-checklist-card.block-checklist-card--phone-flush { padding: 0 15px 56px; }
    .block-checklist-card--phone-flush .block-checklist-card__heading { padding-bottom: 10px; }
}

@media (max-width: 475px) {
    .block-checklist-card--phone-flush .block-checklist-card__title { padding-bottom: 10px; }
}

/* ==== checklist-card footnote variant (live /age-estimation-api-pg/): tablets and phones put the footnote under the
   card; phones keep 10px under the heading and the titles (live 475px rules of that page), the footnote 20px under the
   card in 3.5vw, and 96px under the section. ==== */
/* Live heading size on that page: min(50px, 3.35vw) from 981px, 5.6vw on tablets (phones keep 8.4vw). */
@media (min-width: 768px) {
    .block-checklist-card--noted .block-checklist-card__heading { font-size: min(50px, 3.35vw); }
}

@media (min-width: 768px) and (max-width: 980px) {
    .block-checklist-card--noted .block-checklist-card__heading { font-size: 5.6vw; }
}

@media (max-width: 980px) {
    .block-checklist-card__note { width: auto; margin-left: 0; }
}

@media (max-width: 767px) {
    .block-checklist-card.block-checklist-card--noted { padding: 20px 15px 96px; }
    .block-checklist-card--noted .block-checklist-card__heading { padding-bottom: 10px; }
    .block-checklist-card__note { margin: 20px 0 0; font-size: 3.5vw; }
}

@media (max-width: 475px) {
    .block-checklist-card--noted .block-checklist-card__title { padding-bottom: 10px; }
}

/* ==== definition-rows intro variant on tablets: live starts the eyebrow at the top edge, under the ribbon notch, with the
   heading in ink on ink (not copied); here 96px over the eyebrow and 40px to the heading like phones. ==== */
@media (max-width: 980px) {
    .block-trial-banner--ribbon .block-trial-banner__text br { display: none; }
    .block-definition-rows.block-definition-rows--intro { padding-top: 96px; }
    .block-definition-rows--intro .block-definition-rows__eyebrow { margin-bottom: 40px; }
}

/* ==== definition-rows intro variant (live /age-estimation-api-pg/) on phones: 96 20 36, the eyebrow stays (40px over
   the heading), the heading and the row titles keep their 10px under, the intro in 4.2vw. ==== */
@media (max-width: 767px) {
    .block-definition-rows.block-definition-rows--intro { padding: 96px 20px 36px; }
    .block-definition-rows--intro .block-definition-rows__eyebrow { display: block; margin-bottom: 40px; }
    .block-definition-rows--intro .block-definition-rows__header { margin-bottom: 60px; }
    .block-definition-rows--intro .block-definition-rows__heading { margin-bottom: 0; }
    .block-definition-rows__intro { font-size: 4.2vw; }
    .block-definition-rows--intro .block-definition-rows__row:last-child { margin-bottom: 60px; }
}

@media (max-width: 475px) {
    .block-definition-rows--intro .block-definition-rows__heading,
    .block-definition-rows--intro .block-definition-rows__title { padding-bottom: 10px; }
}

/* ==== numbered-steps tiers (live /roc-access/ s4, phone twin s5). Tablets and phones: no
   eyebrow, each step is the picture (134px) with the numeral (191px in a 25% line) at the
   right, then the title and copy over a steel rule (none under the last step). Tablets:
   60px over, 180px under, 57px heading, 36px gaps; phones: 60 0 96, 25px sides for the
   texts, 50px for the steps, 8.4vw heading, 5.6vw titles, 4.2vw copy, centred 44px pill. ==== */
/* The live closing row pads 2.5%: of the column, at most 33px, from 1501px; of the
   screen in the 1025 to 1500px zoom band. */
@media (min-width: 1501px) {
    .block-numbered-steps__closing { padding-top: min(2.5%, 33px); }
    .block-numbered-steps__actions { padding-bottom: min(2.5%, 33px); }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-numbered-steps__closing { padding-top: 2.5vw; }
    .block-numbered-steps__actions { padding-bottom: 2.5vw; }
}

/* 981 to 1024px: live keeps the 839px cards in the 80% column, so they run past the
   column (even rows and the odd numerals past the screen edge). The theme fits them:
   the numeral (150px) takes its own width, the card the rest with 30px at the right,
   a 110px picture with 20px after it, 24px titles and 16px copy; same 206px rows
   (any-width rule). */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-numbered-steps__number {
        flex: 0 0 auto;
        font-size: 150px;
    }
    .block-numbered-steps__image {
        width: 110px;
        margin-right: 20px;
    }
    .block-numbered-steps__title { font-size: 24px; }
    .block-numbered-steps__card { font-size: 16px; }
    .block-numbered-steps__card,
    .block-numbered-steps__card--snug { padding-right: 30px; }
    .block-numbered-steps__media {
        flex-shrink: 0;
        width: auto;
    }
}

@media (max-width: 980px) {
    .block-numbered-steps { padding: 60px 0 180px; }
    .block-numbered-steps__eyebrow { display: none; }
    .block-numbered-steps__heading { margin-bottom: 30px; }
    .block-numbered-steps__intro { margin-bottom: 0; }
    .block-numbered-steps__step {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 0;
        margin: 0 0 36px;
        padding: 0 50px 30px;
        border-bottom: 1px solid var(--color-steel);
    }
    .block-numbered-steps__step:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
    .block-numbered-steps__card,
    .block-numbered-steps__inner { display: contents; }
    .block-numbered-steps__media {
        display: block;
        width: auto;
        line-height: 0;
    }
    .block-numbered-steps__image {
        width: 134px;
        margin: 0;
    }
    .block-numbered-steps__body {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 80%;
        margin-top: 60px;
        padding: 0;
    }
    .block-numbered-steps__title {
        margin-bottom: 20px;
        font-size: 5.6vw;
        line-height: 130%;
    }
    .block-numbered-steps__title br { display: inline; }
    .block-numbered-steps__text { line-height: 24px; }
    .block-numbered-steps__number,
    .block-numbered-steps__step:nth-child(even) .block-numbered-steps__number {
        order: 0;
        line-height: 25%;
        text-align: right;
    }
    .block-numbered-steps__closing {
        padding-top: 30px;
        margin-bottom: 40px;
        font-size: 48px;
    }
    .block-numbered-steps__actions { padding-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-numbered-steps { padding: 60px 0 96px; }
    .block-numbered-steps .container {
        width: 100%;
        padding: 0 25px;
    }
    .block-numbered-steps__heading {
        margin-bottom: 0;
        padding-bottom: 40px; /* padding: the legacy phone snippet zeroes heading margins */
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-numbered-steps__intro {
        width: auto;
        margin-bottom: 40px;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-numbered-steps__step { margin: 0 -25px 30px; }
    .block-numbered-steps__step:last-child { margin-bottom: 0; }
    .block-numbered-steps__body {
        width: auto;
        margin-top: 24px;
    }
    /* padding, not margin: the legacy phone snippet zeroes heading margins below 476px */
    .block-numbered-steps__title {
        margin-bottom: 0;
        padding-bottom: 20px;
    }
    .block-numbered-steps__card { font-size: 4.2vw; }
    .block-numbered-steps__text { line-height: 133%; }
    /* 50px over the closing line (tablets and live 30px), room after the last step's "audit." (Evan, DIGITAL-300) */
    .block-numbered-steps__closing {
        margin-bottom: 60px;
        padding-top: 50px;
        font-size: 6.9vw;
        line-height: 125%;
    }
    .block-numbered-steps__actions { text-align: center; }
}

/* ==== Reduced motion: the sticky header and the drill screens move without sliding
   (fades stay; the drill list reveal is skipped in JS) ==== */
@media (prefers-reduced-motion: reduce) {
    .site-header.sticky { animation: none; }
    .site-drill__screen { transition: none; }
    .video-popup { transition: none; }
    .block-feature-cards-grid__card { transform: none; }
    .block-age-use-cards__card { transform: none; }
    .u-scroll-rise { transform: none; }
    .block-laptop-showcase__spot::before { animation: none; }
    .back-to-top.is-visible { animation: none; }
}

/* ==== stat-rank "figure" variant (live /face-recognition/): tablets stack the caption (centred)
   over the copy, 11.8vw over the section and none under it; phones put the copy (phone sizes,
   no <br> up to 475px) over the caption link, 25px gutters and 96px under. ==== */
@media (max-width: 980px) {
    .block-stat-rank.block-stat-rank--figure { padding: 11.8vw 0 0; }
    .block-stat-rank--figure .block-stat-rank__columns { flex-direction: column; }
    .block-stat-rank--figure .block-stat-rank__aside,
    .block-stat-rank--figure .block-stat-rank__body { width: 100%; margin-right: 0; }
    .block-stat-rank--figure .block-stat-rank__text { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-stat-rank.block-stat-rank--figure { padding: 0 25px 96px; }
    .block-stat-rank--figure .container { width: auto; }
    .block-stat-rank--figure .block-stat-rank__figure { margin-bottom: 50px; }
    .block-stat-rank--figure .block-stat-rank__columns {
        flex-direction: column-reverse;
        gap: 20px;
        padding-top: 20px;
    }
    .block-stat-rank--figure .block-stat-rank__aside {
        justify-content: flex-start;
        margin-bottom: 30px;
    }
    .block-stat-rank--figure .block-stat-rank__caption,
    .block-stat-rank--figure .block-stat-rank__caption a { font-size: 4.2vw; line-height: 133%; }
    .block-stat-rank--figure .block-stat-rank__body {
        padding-left: 0;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-stat-rank--figure .block-stat-rank__heading {
        font-size: 8.4vw;
        font-weight: 500;
        line-height: 116%;
    }
    .block-stat-rank--figure .block-stat-rank__text { margin-bottom: 0; }
}

@media (max-width: 475px) {
    .block-stat-rank--figure .block-stat-rank__text br { display: none; }
}

/* ==== feature-grid columns style (live /fingerprint-recognition/ s1) ==== */
@media (min-width: 1024px) and (max-width: 1440px) {
    .block-feature-grid--columns .block-feature-grid__heading {
        padding-top: 40px;
        font-size: 46px;
    }
}

@media (max-width: 980px) {
    .block-feature-grid.block-feature-grid--columns { padding: 0 0 3.75vw; }
    .block-feature-grid--columns .block-feature-grid__heading { font-size: 3.13vw; }
    .block-feature-grid--columns .block-feature-grid__item:nth-child(n) { width: 100%; }
    .block-feature-grid--columns .block-feature-grid__grid { row-gap: 0; }
    .block-feature-grid--columns .block-feature-grid__item:nth-child(2) { margin-bottom: 40px; }
}

@media (max-width: 767px) {
    .block-feature-grid.block-feature-grid--columns { padding: 96px 25px; }
    .block-feature-grid--columns .container {
        width: 100%;
        margin-bottom: 0;
    }
    .block-feature-grid--columns .block-feature-grid__heading {
        font-size: 7vw;
        line-height: 125%;
        letter-spacing: 0;
    }
    .block-feature-grid--columns .block-feature-grid__item:nth-child(n) {
        margin-bottom: 0;
        padding: 0 0 40px;
        border-top: 0;
    }
    .block-feature-grid--columns .block-feature-grid__item:last-child { padding-bottom: 0; }
    .block-feature-grid--columns .block-feature-grid__item:last-child .block-feature-grid__text { margin-bottom: 0; }
    .block-feature-grid--columns .block-feature-grid__title { font-size: 5.6vw; }
    .block-feature-grid--columns .block-feature-grid__text { font-size: 4.2vw; }
}

/* ==== stat-rank list variant (live /fingerprint-recognition/ s3) ==== */
@media (min-width: 1675px) {
    .block-stat-rank__list-row { padding: 33px 0; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-stat-rank__list-row { padding: 2.5vw 0; }
}

@media (max-width: 1280px) {
    .block-stat-rank.block-stat-rank--list { padding-bottom: 60px; }
}

@media (max-width: 980px) {
    .block-stat-rank.block-stat-rank--list { padding: 0 0 60px; }
    .block-stat-rank__title { font-size: 3.13vw; }
    .block-stat-rank__list-row {
        flex-direction: column;
        padding: 30px 0;
    }
    .block-stat-rank__numeral,
    .block-stat-rank__claims { width: 100%; }
}

/* live: the square of the second claim is a 16px glyph where its column fits the whole claim */
@media (min-width: 1025px), (min-width: 476px) and (max-width: 980px) {
    .block-stat-rank__claims:first-of-type .block-stat-rank__claim:nth-child(2)::before { width: 16px; }
}

@media (max-width: 767px) {
    .block-stat-rank.block-stat-rank--list { padding: 96px 25px 60px; }
    .block-stat-rank--list .container { width: 100%; }
    .block-stat-rank__title {
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-stat-rank__list-row { padding: 0; }
    .block-stat-rank__numeral {
        justify-content: center;
        margin-bottom: 40px;
    }
    .block-stat-rank__hash { font-size: 26.7vw; }
    .block-stat-rank__digit { font-size: 53.45vw; }
    .block-stat-rank__claims { font-size: 4.2vw; }
    .block-stat-rank__claim { margin-bottom: 24px; max-width: none; }
    .block-stat-rank__claim::before {
        width: 3.2vw;
        height: 3.2vw;
    }
}

@media (max-width: 475px) {
    .block-stat-rank__numeral { gap: 12px; }
}

/* ==== feature-cards-grid match only (live /fingerprint-recognition/ s5) ==== */
@media (max-width: 980px) {
    .block-feature-cards-grid--match-only { padding: 11.8vw 0 0; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-feature-cards-grid--match-only .latent-match__bars { padding-bottom: 8px; }
}

@media (max-width: 767px) {
    .block-feature-cards-grid--match-only { padding: 0 25px 96px; }
    .block-feature-cards-grid--match-only .latent-match__head.container { margin-top: 0; }
}

/* ==== hero-split-image padded text column (live /fingerprint-recognition/ hero) ==== */
@media (max-width: 980px) {
    .block-hero-split-image--capability.block-hero-split-image--padded .block-hero-split-image__text-col { padding: 0 25px 40px; }
}

@media (max-width: 767px) {
    .block-hero-split-image--phone-subtitle .block-hero-split-image__actions { text-align: center; }
}

@media (max-width: 475px) {
    /* live: the flex text module lets the subtitle run 17px into the column's right padding */
    .block-hero-split-image--phone-subtitle .block-hero-split-image__subtitle {
        display: block;
        margin: 0 -17px 40px 0;
    }
}

/* ==== related-posts tall top (live /fingerprint-recognition/): 160px over the eyebrow on desktops ==== */
@media (min-width: 981px) {
    .block-related-posts.block-related-posts--tall-top { padding-top: 160px; }
}

@media (max-width: 980px) {
    .block-related-posts--tall-top .block-related-posts__eyebrow p { margin-bottom: 0; }
}

/* phones: no ink under the stripes (the face page keeps 60px of live margin there) */
@media (max-width: 475px) {
    .block-related-posts.block-related-posts--capability.block-related-posts--phone-flush { padding-bottom: 60px; }
    .block-related-posts--capability.block-related-posts--phone-flush::before { bottom: 0; }
    .block-related-posts--capability.block-related-posts--phone-flush::after { bottom: 40px; }
}

/* related-posts option "phone_titles_flush" (live /face-analytics/): no gap under the card titles on phones */
@media (max-width: 475px) {
    .block-related-posts--capability.block-related-posts--phone-titles-flush .block-related-posts__meta h3 { margin-bottom: 0; }
}

/* ==== product-tabs capability-wide (live /fingerprint-recognition/): the copy column keeps the page column ==== */
@media (min-width: 1024px) and (max-width: 1600px) {
    .block-product-tabs--capability.block-product-tabs--wide .block-product-tabs__panels { max-width: min(var(--container-max), 112.5vw); }
}

/* Header grid (QA #38): in the zoom band the wide panels meet the logo and Contact Us edges like .container. */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-product-tabs--capability.block-product-tabs--wide .block-product-tabs__panels { max-width: min(calc(var(--container-max) / 0.8), 100vw); }
}

/* ==== flag-cta keep breaks (live /fingerprint-recognition/): the heading lines stay broken ==== */
.block-flag-cta--keep-breaks .block-flag-cta__heading br { display: inline; }

/* ==== numbered-grid why, phone Poppins (live /fingerprint-recognition/ page CSS) ==== */
@media (max-width: 767px) {
    .block-numbered-grid--why.block-numbered-grid--phone-poppins .block-numbered-grid__eyebrow {
        font-size: 3.2vw;
        line-height: 125%;
    }
    .block-numbered-grid--phone-poppins .block-numbered-grid__body { font-family: var(--font-poppins); }
    .block-numbered-grid--why.block-numbered-grid--phone-poppins .block-numbered-grid__title { line-height: 115%; }
}

/* ==== faq-accordion tracked heading (live /fingerprint-recognition/) ==== */
.block-faq-accordion--tracked .block-faq-accordion__heading { letter-spacing: 0.5px; }

/* ==== product-tabs small phone eyebrow (live /fingerprint-recognition/) ==== */
@media (max-width: 767px) {
    .block-product-tabs--capability.block-product-tabs--eyebrow-small .block-product-tabs__eyebrow {
        font-size: 3.2vw;
        line-height: 142%;
    }
}

@media (max-width: 475px) {
    .block-faq-accordion.block-faq-accordion--rich.block-faq-accordion--top-space { padding-top: 60px; }
}

/* ==== accordion-list small phone eyebrow (live /fingerprint-recognition/) ==== */
@media (max-width: 767px) {
    .block-accordion-list--side.block-accordion-list--eyebrow-small .block-accordion-list__eyebrow { font-size: 3.2vw; }
}

/* ==== faq-accordion plain answer lists (live /fingerprint-recognition/ page CSS) ==== */
.block-faq-accordion--plain-lists .block-faq-accordion__answer a { color: var(--color-rust); }
.block-faq-accordion--plain-lists .block-faq-accordion__answer ul {
    display: block;
    padding: 0 0 23px 16px;
    list-style: disc;
}
.block-faq-accordion--plain-lists .block-faq-accordion__answer li { padding-left: 0; }
.block-faq-accordion--plain-lists .block-faq-accordion__answer li::before { content: none; }

@media (max-width: 767px) {
    .block-faq-accordion--plain-lists .block-faq-accordion__answer ul {
        padding-left: 14px;
        font-size: 14px;
    }
}

.block-faq-accordion--plain-lists .block-faq-accordion__answer table {
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid var(--color-frost);
    border-collapse: collapse;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
}

.block-faq-accordion--plain-lists .block-faq-accordion__answer th {
    padding: 9px 24px;
    font-weight: 700;
    color: var(--color-table-head);
    text-align: left;
}

.block-faq-accordion--plain-lists .block-faq-accordion__answer td {
    padding: 6px 24px;
    border-top: 1px solid var(--color-frost);
}

@media (max-width: 767px) {
    .block-faq-accordion--plain-lists .block-faq-accordion__answer table {
        font-size: 14px;
        line-height: 21px;
    }
}

/* live /fingerprint-recognition/ phones: an open row has no padding under its title, the panel keeps 40px under its copy */
@media (max-width: 475px) {
    .block-accordion-list--open-tight .block-accordion-list__item.is-open .block-accordion-list__head { padding-bottom: 0; }
    .block-accordion-list--open-tight .block-accordion-list__item.is-open .block-accordion-list__panel { padding-bottom: 40px; }
}

/* ==== rank-figure tiers (live /iris-recognition/) ==== */
@media (min-width: 1024px) and (max-width: 1600px) {
    .block-rank-figure__brand .block-rank-figure__time,
    .block-rank-figure__rival .block-rank-figure__time span { font-size: clamp(28px, 2.5vw, 48px); }
}

/* compare variant: live page rule (#post-18105) from 768 to 1280px: no padding over, 160px under */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-rank-figure.block-rank-figure--compare { padding: 0 0 160px; }
}

@media (max-width: 1279px) {
    .block-rank-figure__brand { padding: 20px; }
}

@media (max-width: 980px) {
    .block-rank-figure { padding: 11.8vw 0 0; }
    .block-rank-figure__head.container {
        width: var(--container-width);
        margin: 0 auto 456px; /* live: the row is 90% wide at the left edge with 456px under it; here it lines up with the column */
        padding-bottom: 60px;
    }
    .block-rank-figure__eyebrow { font-size: 0.97vw; }
    .block-rank-figure__heading { font-size: 3.13vw; }
    .block-rank-figure--features .block-rank-figure__figure { margin-bottom: 30px; }
    .block-rank-figure__compare { flex-direction: column; }
    .block-rank-figure__brand {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        align-self: stretch;
        gap: 0;
        width: 100%;
        margin-right: 0;
    }
    .block-rank-figure__brand-logo { margin: 0 23.25% 30px; }
    .block-rank-figure__brand-logo img { width: auto; }
    .block-rank-figure__rivals {
        width: 100%;
        padding-left: 130px;
    }
    .block-rank-figure__rival { margin-bottom: 30px; }
    .block-rank-figure__feature { width: 100%; }
}

@media (max-width: 767px) {
    .block-rank-figure { padding: 96px 25px; }
    .block-rank-figure .container { width: 100%; }
    .block-rank-figure__head.container {
        margin-bottom: 0;
        padding-bottom: 40px;
    }
    .block-rank-figure__eyebrow { font-size: 3.25vw; }
    .block-rank-figure__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-rank-figure__text {
        width: 100%;
        margin-bottom: 40px;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-rank-figure--compare .block-rank-figure__text { margin-bottom: 60px; }
    .block-rank-figure--features .block-rank-figure__text { line-height: 133%; }
    .block-rank-figure__feature-title {
        margin-bottom: 24px;
        font-size: 5.11vw;
        line-height: 127%;
    }
    .block-rank-figure__feature-text {
        margin-bottom: 40px;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-rank-figure__feature:last-child .block-rank-figure__feature-text { margin-bottom: 0; }
    .block-rank-figure__compare {
        flex-direction: column-reverse;
        padding: 61.6px 0 0 15px;
    }
    .block-rank-figure__brand {
        justify-content: space-between;
        padding: 40px 0 0;
        border: 0;
    }
    .block-rank-figure__brand-logo { margin: 0; }
    .block-rank-figure__brand-logo img { width: auto; }
    .block-rank-figure__brand .block-rank-figure__time {
        font-size: 11.1vw;
        line-height: 100%;
    }
    .block-rank-figure__rivals {
        flex-wrap: nowrap;
        gap: 0;
        justify-content: space-between;
        padding: 40px 0;
        border-top: 1px solid var(--color-steel);
        border-bottom: 1px solid var(--color-steel);
    }
    .block-rank-figure__rival {
        max-width: none;
        margin-bottom: 0;
    }
    .block-rank-figure__rival .block-rank-figure__time,
    .block-rank-figure__rival .block-rank-figure__time span {
        font-size: 5.6vw;
        line-height: 100%;
    }
    .block-rank-figure__note-phone {
        padding-top: 30px;
        font-family: var(--font-regular);
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-rank-figure__note-phone a { text-decoration: underline; }
    .block-rank-figure__rival-logo { grid-template-rows: 1fr; }
    .block-rank-figure__rival:nth-child(1) img { width: 21.85vw; }
    .block-rank-figure__rival:nth-child(2) img { width: 13.95vw; }
    .block-rank-figure__rival:nth-child(3) img { width: 31.16vw; }
}

@media (max-width: 475px) {
    .block-rank-figure--compare .block-rank-figure__heading br { display: none; }
    .block-rank-figure__feature-title { padding-left: 0; }
    .block-rank-figure__feature-title::before { content: none; } /* live hides the blurb icon on phones */
}

/* ==== hero-split-image own phone subtitle (live /iris-recognition/) ==== */
@media (max-width: 767px) {
    .block-hero-split-image--phone-text .block-hero-split-image__subtitle--phone {
        display: block;
        margin-bottom: 50px;
        font-size: 6.9vw;
        font-weight: 400;
        line-height: 125%;
    }
    .block-hero-split-image--phone-text .block-hero-split-image__actions { text-align: center; }
    .block-hero-split-image--capability.block-hero-split-image--phone-text .block-hero-split-image__text-col { padding-bottom: 0; }
}

.block-hero-split-image__subtitle strong {
    font-family: var(--font-bold);
    font-weight: 900;
}

/* ==== product-tabs small phone copy (live /iris-recognition/) ==== */
@media (max-width: 767px) {
    .block-product-tabs--capability.block-product-tabs--text-small .block-product-tabs__text p {
        font-size: 3.7vw;
        line-height: 133%;
    }
    .block-product-tabs--capability.block-product-tabs--text-small .block-product-tabs__eyebrow { line-height: 142%; }
}

/* first-flow-narrow on /iris-recognition/: the quote row is 1220px at most from 1024 to 1600px (live row rule) */
@media (min-width: 1024px) and (max-width: 1600px) {
    .block-testimonial-carousel--narrow .block-testimonial-carousel__main { max-width: 1220px; }
}

@media (max-width: 767px) {
    .block-hero-split-image__subtitle--phone br { display: none; }
}

/* option "phone_top_roomy" (live /face-analytics/): 120px of ink over the closed phone toggle row, 60px under it */
@media (max-width: 475px) {
    .block-faq-accordion.block-faq-accordion--rich.block-faq-accordion--top-roomy { padding-top: 120px; }
}

/* live /iris-recognition/: the closed phone FAQ keeps 120px over and 100px under its toggle row */
@media (max-width: 475px) {
    .block-faq-accordion.block-faq-accordion--rich.block-faq-accordion--roomy-phone { padding: 120px 25px 100px; }
}

.block-faq-accordion--steel-links .block-faq-accordion__answer a { color: var(--color-steel); }

/* live /abis/, /sdk/, /enroll/, /watch/: the intro links ("More: roc.ai/...") are steel with a rust underline */
.block-faq-accordion--intro-links-steel .block-faq-accordion__intro a {
    color: var(--color-steel);
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

/* statement-intro tight-150 (live /license-plate-recognition/): 150px under the section above 980px */
@media (min-width: 981px) {
    .block-statement-intro.block-statement-intro--tight-150 { padding-bottom: 150px; }
}

.block-statement-intro--tight-150 .block-statement-intro__actions { margin-top: 0; }
.block-statement-intro--tight-150 .btn { font-weight: 500; }

/* hero-split-image text column "medium" (live /license-plate-recognition/): 520px from 768 to 1280px */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-hero-split-image--medium .block-hero-split-image__text-col { height: 520px; }
}
@media (min-width: 768px) and (max-width: 980px) {
    .block-hero-split-image--medium .block-hero-split-image__text-col { height: auto; }
}

@media (max-width: 980px) {
    .block-hero-split-image--capability.block-hero-split-image--medium .block-hero-split-image__text-col { padding: 0 25px 40px; }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .block-hero-split-image--capability.block-hero-split-image--medium .block-hero-split-image__text-col { padding-right: 25px; }
}

@media (max-width: 767px) {
    .block-hero-split-image--capability.block-hero-split-image--medium .block-hero-split-image__text-col { padding-bottom: 25px; }
}

/* ==== image-columns spacing "capability" (live /license-plate-recognition/ s2) ==== */
.block-image-columns.block-image-columns--capability { padding: 0 0 11.1vw; }
.block-image-columns--capability .block-image-columns__eyebrow { line-height: 20px; }
.block-image-columns--capability .block-image-columns__items { row-gap: 3.47vw; }
.block-image-columns--capability .block-image-columns__title { margin-bottom: 0; }

@media (max-width: 980px) {
    .block-image-columns.block-image-columns--capability { padding: 0 0 3.75vw; }
    .block-image-columns--capability .block-image-columns__eyebrow {
        margin: 0 0 50px;
        font-size: 18px;
    }
    .block-image-columns--capability .block-image-columns__title { font-size: 1.94vw; }
    .block-image-columns--capability .block-image-columns__items {
        margin-bottom: 0;
        padding: 0;
    }
    .block-image-columns--capability .block-image-columns__item:nth-child(3n+1):not(:first-child) { margin-top: 3.47vw; }
}

@media (max-width: 767px) {
    .block-image-columns.block-image-columns--capability { padding: 0 25px 96px; }
    .block-image-columns--capability .block-image-columns__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
        line-height: 140%;
    }
    .block-image-columns--capability .block-image-columns__item:nth-child(3n+1):not(:first-child) { margin-top: 0; }
    .block-image-columns--capability .block-image-columns__item:last-child { margin-bottom: 0; }
    .block-image-columns--capability .block-image-columns__image { margin-bottom: 24px; }
    .block-image-columns--capability .block-image-columns__title { font-size: 5.6vw; }
    .block-image-columns--capability .block-image-columns__item { margin-bottom: 24px; }
    .block-image-columns--capability .block-image-columns__body {
        margin-bottom: 0;
        line-height: 133%;
    }
}

/* ==== centered-title banner tiers ==== */
@media (max-width: 980px) {
    .block-centered-title.block-centered-title--banner { padding: 3.13vw 0; }
}

@media (max-width: 767px) {
    .block-centered-title.block-centered-title--banner {
        padding: 30px 25px;
        border-bottom: 96px solid var(--color-ink); /* live: a 96px section margin, ink too */
    }
    .block-centered-title--banner .block-centered-title__heading { font-size: 6.9vw; }
    .block-centered-title--banner .block-centered-title__text br { display: inline; }
    .block-centered-title--banner .block-centered-title__text { font-size: 4.2vw; }
}

/* ==== numbered-claims tiers ==== */
@media (min-width: 1024px) and (max-width: 1440px) {
    .block-numbered-claims__heading { font-size: 56px; }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .block-numbered-claims { padding: 120px 0; }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .block-numbered-claims__title { margin-top: clamp(18px, calc(30.25px - (100vw - 1024px) * 0.048), 31px); }
}

@media (max-width: 980px) {
    .block-numbered-claims__grid { margin-bottom: 0; }
    .block-numbered-claims__item,
    .block-numbered-claims__item:nth-last-child(-n+2) { margin-bottom: 40px; }
    .block-numbered-claims__number {
        font-size: 54px;
        line-height: 87px;
    }
    .block-numbered-claims__title {
        width: 70%;
        font-size: 28px;
        line-height: 129%;
    }
    .block-numbered-claims__heading {
        font-size: 57px;
        line-height: 112%;
    }
    .block-numbered-claims__text { font-size: 18px; }
}

@media (max-width: 767px) {
    .block-numbered-claims { padding: 0 25px 96px; }
    .block-numbered-claims .container { width: 100%; }
    .block-numbered-claims__grid { margin-bottom: 80px; }
    .block-numbered-claims__item,
    .block-numbered-claims__item:nth-last-child(-n+2) {
        width: 100%;
        margin-bottom: 44px;
    }
    .block-numbered-claims__title { width: 100%; }
    .block-numbered-claims__item:last-child { margin-bottom: 0; }
    .block-numbered-claims__number {
        margin-bottom: 18px;
        font-size: 5.6vw;
        line-height: 100%;
    }
    .block-numbered-claims__title {
        font-size: 5.6vw;
        line-height: 100%;
    }
    .block-numbered-claims__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
        line-height: 125%;
    }
    .block-numbered-claims__text { font-size: 4.2vw; }
}

@media (max-width: 475px) {
    .block-numbered-claims__heading br,
    .block-numbered-claims__text br { display: none; }
}

/* product-tabs phone top 60 (live /license-plate-recognition/): 60px over the products on phones */
@media (max-width: 767px) {
    .block-product-tabs--capability.block-product-tabs--top-60 .block-product-tabs__stage { padding-top: 60px; }
    .block-product-tabs.block-product-tabs--capability.block-product-tabs--top-60 {
        padding-bottom: 176px; /* live: 80px and a 96px section margin, ink too */
    }
}

/* ==== faq-accordion with a picture (live /license-plate-recognition/): picture left, heading and intro right ==== */
.block-faq-accordion.block-faq-accordion--with-image { padding: 3vw 0 calc(3vw + 60px); } /* live: the section margin is ink too */
.block-faq-accordion--with-image .block-faq-accordion__body { padding: 0; }

.block-faq-accordion__split {
    display: flex;
    column-gap: 3%;
    padding-bottom: 128px;
}

.block-faq-accordion__figure,
.block-faq-accordion__split-text { width: 48.5%; }

.block-faq-accordion__figure { line-height: 0; }
.block-faq-accordion__figure img { width: auto; max-width: 100%; }

.block-faq-accordion--with-image .block-faq-accordion__heading { margin-bottom: 30px; }
.block-faq-accordion--with-image .block-faq-accordion__intro {
    margin-bottom: 0;
    line-height: 24px;
}
.block-faq-accordion--with-image .block-faq-accordion__intro p { line-height: 24px; }

@media (min-width: 1675px) {
    .block-faq-accordion.block-faq-accordion--with-image { padding: 50px 0 110px; }
}

@media (max-width: 980px) {
    .block-faq-accordion.block-faq-accordion--with-image { padding: 50px 0 110px; }
    .block-faq-accordion__split {
        flex-direction: column;
        padding-bottom: 128px;
    }
    .block-faq-accordion__figure,
    .block-faq-accordion__split-text { width: 100%; }
    .block-faq-accordion__figure { margin-bottom: 0; }
}

@media (max-width: 767px) {
    .block-faq-accordion.block-faq-accordion--with-image { padding: 110px 20px 91px; }
    .block-faq-accordion--with-image .container { width: 100%; }
    .block-faq-accordion__split { padding-bottom: 60px; }
    .block-faq-accordion__figure { margin-bottom: 40px; }
    .block-faq-accordion--with-image .block-faq-accordion__heading { font-size: 6.9vw; }
    .block-faq-accordion--with-image .block-faq-accordion__intro,
    .block-faq-accordion--with-image .block-faq-accordion__intro p { font-size: 4.2vw; line-height: 133%; }
}

/* cta-form top notch (live #cta-new::after on /license-plate-recognition/): a cream notch (29% wide,
   4.375vw tall, cut at 15.3%) over the right end of the section above */
.block-cta-form--top-notch::after {
    content: "";
    position: absolute;
    top: -4.36vw;
    right: 0;
    width: 29%;
    height: calc(4.36vw + 1px); /* 1px into its own section, so the anti-aliased bottom edge never leaves a hairline */
    background: var(--color-cream);
    clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 475px) {
    .block-faq-accordion--list-full .block-faq-accordion__answer li { font-size: 16px; }
}

/* hero-split-image flush left (live /liveness/): no 10vw text gutter, the text starts at the page column */
@media (min-width: 981px) and (max-width: 1500px) {
    .block-hero-split-image.block-hero-split-image--flush-left { padding-left: 0; }
}

@media (min-width: 981px) and (max-width: 1023px) {
    .block-hero-split-image--flush-left .block-hero-split-image__text-col { padding-left: 25px; }
}

@media (min-width: 981px) and (max-width: 1024px) {
    .block-hero-split-image--flush-left .block-hero-split-image__row {
        width: var(--container-width);
        margin-left: auto;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .block-hero-split-image--flush-left .block-hero-split-image__row {
        max-width: 1340px;
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .block-hero-split-image--capability.block-hero-split-image--flush-left .block-hero-split-image__text-col,
    .block-hero-split-image--flush-left .block-hero-split-image__text-col { padding-left: 25px; }
    .block-hero-split-image.block-hero-split-image--flush-left .block-hero-split-image__media { margin-bottom: 20px; }
}

/* hero-split-image text column "wide" (live /liveness/): three fifths of the row in the 981-1280 tiers */
@media (min-width: 981px) and (max-width: 1280px) {
    .block-hero-split-image--wide .block-hero-split-image__text-col { width: 58.85%; padding-right: 25px; }
    .block-hero-split-image--wide .block-hero-split-image__media-col { width: 38.15%; }
}

/* hero-split-image narrow picture (live /liveness/): 871px above 1440px, 650px to 1280px, then 800px */
@media (min-width: 1441px) {
    .block-hero-split-image--capability.block-hero-split-image--picture-narrow .block-hero-split-image__media { right: -200px; width: 871px; }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .block-hero-split-image--capability.block-hero-split-image--picture-narrow .block-hero-split-image__media { width: 800px; }
}

@media (min-width: 1501px) and (max-width: 1674px) {
    .block-hero-split-image--flush-left .block-hero-split-image__row { width: 80vw; max-width: none; margin-left: 0; }
}

@media (min-width: 1601px) and (max-width: 1674px) {
    .block-hero-split-image.block-hero-split-image--flush-left { padding-left: 10vw; }
}

/* ==== columns-statement tiers ==== */
@media (max-width: 1024px) {
    .block-columns-statement__cols { margin-top: 98px; }
}

@media (max-width: 980px) {
    .block-columns-statement { padding-top: 30px; }
    .block-columns-statement__heading { font-size: 32px; }
    .block-columns-statement__cols { display: block; margin: 116px 0 110px; }
    .block-columns-statement__col { width: auto; margin-right: 0; }
    .block-columns-statement__title { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-columns-statement { padding-top: 0; }
    .block-columns-statement__heading { margin-bottom: 24px; font-size: 6.5vw; }
    .block-columns-statement__text { font-size: 4.2vw; line-height: 133%; }
    .block-columns-statement__actions { margin-top: 60px; text-align: center; }
    .block-columns-statement__cols { margin: 86px 0 16px; }
    .block-columns-statement .container { width: calc(100% - 50px); }
    .block-columns-statement__col:nth-child(1) .block-columns-statement__copy { max-width: 252px; }
    .block-columns-statement__col:nth-child(2) .block-columns-statement__copy { max-width: 264px; }
    .block-columns-statement__col:nth-child(3) .block-columns-statement__copy { max-width: 236px; }
    .block-columns-statement__col { padding-bottom: 44px; }
    .block-columns-statement__number { margin-bottom: 18px; font-size: 4.2vw; line-height: 100%; }
    .block-columns-statement__title { margin-bottom: 18px; font-size: 6.5vw; }
    .block-columns-statement__copy { font-size: 4.2vw; line-height: 133%; }
}

/* ==== video-split tiers ==== */
@media (min-width: 991px) {
    .block-video-split { min-height: 500px; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-video-split__row { max-width: 1340px; }
}

@media (max-width: 1440px) {
    .block-video-split__heading,
    .block-video-split__item { margin-bottom: clamp(12.27px, calc(12.27px + (100vw - 1024px) * 0.01137), 17px); }
    .block-video-split__item:last-child { margin-bottom: 0; }
}

@media (max-width: 1024px) {
    .block-video-split__row { width: 100%; }
}

@media (max-width: 980px) {
    .block-video-split__band { padding-bottom: 7px; }
    .block-video-split__band video { display: block; width: 100%; height: auto; }
    .block-video-split__row { display: block; padding: 0; }
    .block-video-split__text-col { width: auto; padding: 20px 80px; }
    .block-video-split__heading { margin-bottom: 30px; font-size: 32px; }
    .block-video-split__item { margin-bottom: 30px; }
    .block-video-split__item:last-child { margin-bottom: 0; }
}

@media (max-width: 767px) {
    .block-video-split { padding-bottom: 60px; }
    .block-video-split__text-col { padding: 0 25px; }
    .block-video-split__heading { margin: 60px 0 24px; font-size: 8.4vw; }
    .block-video-split__text { margin-bottom: 24px; font-size: 4.2vw; }
    .block-video-split__item { margin-bottom: 18px; padding-left: 30px; font-size: 4.2vw; }
    .block-video-split__item:last-child { margin-bottom: 0; }
}

/* ==== rich-text lead tiers ==== */
@media (max-width: 980px) {
    .block-rich-text.block-rich-text--lead { padding: 179px 0 0; }
    .block-rich-text--lead .container { padding-bottom: 55px; }
    .block-rich-text--lead .block-rich-text__heading { font-size: 32px; }
}

@media (max-width: 767px) {
    .block-rich-text.block-rich-text--lead { padding: 60px 0 0; }
    .block-rich-text--lead .container { padding-bottom: 60px; }
    .block-rich-text--lead .container { width: calc(100% - 50px); }
    .block-rich-text--lead .block-rich-text__heading { padding-bottom: 10px; font-size: 8.4vw; }
    .block-rich-text--lead .block-rich-text__text { font-size: 4.2vw; }
}

/* ==== tag-features tiers ==== */
@media (max-width: 980px) {
    .block-tag-features__tags { display: block; margin-bottom: 125px; }
    .block-tag-features__tag-col { width: auto; margin: 0; padding-bottom: 30px; }
    .block-tag-features__row { display: block; }
    .block-tag-features__text { width: auto; margin: 0 0 30px; }
    .block-tag-features__badge { width: auto; padding-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-tag-features { padding: 0 25px; }
    .block-tag-features .container { width: 100%; }
    .block-tag-features__tags { margin-bottom: 40px; }
    .block-tag-features__line { font-size: 4.2vw; }
    .block-tag-features__tag-col:last-child .block-tag-features__line { max-width: 85%; }
    .block-tag-features__badge { padding-bottom: 0; }
    .block-tag-features__badge--phone { margin-bottom: 24px; }
    .block-tag-features__heading { margin-bottom: 25px; font-size: 8.4vw; }
    .block-tag-features__text { margin-bottom: 0; font-size: 4.2vw; line-height: 133%; }
}

/* ==== rich-text portrait tiers ==== */
@media (max-width: 980px) {
    .block-rich-text--portrait .block-rich-text__split { display: flex; flex-direction: column-reverse; gap: 0; }
    .block-rich-text--portrait .block-rich-text__media,
    .block-rich-text--portrait .block-rich-text__body { width: auto; }
    .block-rich-text--portrait .block-rich-text__heading { max-width: none; font-size: 32px; }
    .block-rich-text--portrait .block-rich-text__text { max-width: 448px; }
}

@media (max-width: 767px) {
    .block-rich-text.block-rich-text--portrait { padding: 60px 25px 97px; }
    .block-rich-text--portrait .container { width: 100%; }
    .block-rich-text--portrait .block-rich-text__split { flex-direction: column; }
    .block-rich-text--portrait .block-rich-text__media { margin-bottom: 24px; }
    .block-rich-text--portrait .block-rich-text__heading { margin-bottom: 24px; padding-bottom: 10px; font-size: 8.4vw; }
    .block-rich-text--portrait .block-rich-text__text { font-size: 4.2vw; line-height: 133%; }
}

/* ==== big-number tiers ==== */
/* live keeps 400px from 981 to 1023px, where the figure breaks into two lines and runs off the section: the scaling stays on down to 981px */
@media (min-width: 981px) and (max-width: 1440px) {
    .block-big-number__number { font-size: clamp(288px, 28.125vw, 400px); line-height: 480px; }
}

@media (max-width: 1024px) {
    .block-big-number__caption.container { width: 100%; }
}

@media (max-width: 980px) {
    .block-big-number { padding: 60px 0 120px; }
    .block-big-number__eyebrow { font-size: 0.97vw; }
    .block-big-number__number { font-size: 220px; }
    .block-big-number__caption.container { padding-right: 60px; padding-left: 60px; }
}

@media (max-width: 767px) {
    .block-big-number { padding: 0 25px 40px; }
    .block-big-number .container { width: 100%; }
    .block-big-number__eyebrow { font-size: 3.25vw; }
    .block-big-number__number { margin-bottom: 14px; font-size: 24.4vw; }
    .block-big-number__caption.container { padding-right: 0; padding-left: 0; }
    .block-big-number__caption-text { padding-left: 0; font-size: 4.2vw; line-height: 133%; }
}

/* hero-split-image narrow picture, any-width rule (sweep 6 Oct 2026): live lets the 800px cut-out box lie over the
   title and text from 981 to 1024px; here the picture is smaller so its box starts right of the text column */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-hero-split-image--capability.block-hero-split-image--picture-narrow .block-hero-split-image__media { width: 430px; }
}

/* ==== numbered-grid "finest" tiers (live /tattoo-recognition/) ==== */
@media (min-width: 1024px) and (max-width: 1499px) {
    .block-numbered-grid--finest .block-numbered-grid__heading { font-size: 56px; }
}

@media (min-width: 1281px) and (max-width: 1600px) {
    /* live: the head row is a fixed 1220px wide here */
    .block-numbered-grid--finest .block-numbered-grid__head {
        width: 1220px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* ==== faq-accordion "padded" and "intro_plain" (live /tattoo-recognition/) ==== */
@media (min-width: 768px) {
    .block-faq-accordion.block-faq-accordion--padded { padding: 6.66vw 0; }
}

/* the picture module keeps its own 20px under it (40px on tablets, 20px on phones) */
.block-faq-accordion--picture-gap .block-faq-accordion__figure { margin-bottom: 20px; }

@media (min-width: 768px) and (max-width: 980px) {
    .block-faq-accordion--picture-gap .block-faq-accordion__figure { margin-bottom: 40px; }
}

.block-faq-accordion--intro-plain .block-faq-accordion__intro { letter-spacing: normal; }

@media (min-width: 1025px) and (max-width: 1280px) {
    .block-numbered-grid--finest .block-numbered-grid__number { margin-bottom: 1vw; }
}

@media (min-width: 981px) and (max-width: 1024px) {
    /* live: the copy sits 70px under the title in the unzoomed tablet range */
    .block-numbered-grid--finest .block-numbered-grid__title { margin-bottom: 70px; }
}

/* ==== image-list tiers (live /tattoo-recognition/) ==== */
@media (min-width: 768px) {
    /* live: the section's -2px bottom margin pulls the next section over it */
    .block-image-list { margin-bottom: -2px; }
}

@media (max-width: 980px) {
    .block-image-list { padding-bottom: 3.75vw; }
    .block-image-list__heading { font-size: 3.95vw; }
    .block-image-list__row { padding: 0; }
    .block-image-list__media { width: 42.5%; margin-right: 0; }
    .block-image-list__media img { margin-bottom: 30px; }
    .block-image-list__list {
        width: 57.5%;
        margin-bottom: 0;
        padding: 20px 80px;
    }
}

@media (max-width: 767px) {
    .block-image-list::after {
        bottom: -1px;
        width: 45%;
        height: 50px;
    }
    .block-image-list { padding: 0 15px 146px 25px; }
    .block-image-list .container { width: 100%; }
    .block-image-list__heading {
        margin-bottom: 40px;
        font-size: 8.4vw;
    }
    .block-image-list__row { display: block; }
    .block-image-list__media { width: 100%; }
    .block-image-list__media img {
        width: 95%;
        margin: 0 auto 20px;
    }
    .block-image-list__caption {
        width: 95%;
        margin: 0 0 40px;
        padding: 0 25px;
        font-size: 4.2vw;
        line-height: 133%;
    }
    /* live: two columns that fill downwards, so rows read: first, fourth / second, fifth / third */
    .block-image-list__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        gap: 30px 0;
        width: 100%;
        min-height: 0;
        padding: 0;
    }
    .block-image-list__item {
        padding-left: 30px;
        font-size: 4.2vw;
        line-height: 170%;
    }
}

/* ==== stat-tabs tiers (live /tattoo-recognition/) ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    /* the zoomed hairline renders at 1px */
    .block-stat-tabs__list { border-bottom-width: 1.25px; }
    .block-stat-tabs__tab-label { border-bottom-width: 3.75px; }
}

@media (min-width: 981px) and (max-width: 1024px) {
    .block-stat-tabs__number { font-size: 5vw; }
}

@media (max-width: 980px) {
    .block-stat-tabs__heading { font-size: 3.95vw; }
    .block-stat-tabs__number {
        font-size: 60px;
        line-height: 140%;
    }
}

@media (max-width: 767px) {
    .block-stat-tabs { padding: 60px 25px; }
    .block-stat-tabs .container { width: 100%; }
    .block-stat-tabs__heading { font-size: 8.4vw; }
    .block-stat-tabs__tab {
        font-size: 18px;
        line-height: 150%;
    }
    .block-stat-tabs__counters {
        display: block;
        padding-top: 20px;
    }
    .block-stat-tabs__counter {
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
    }
    .block-stat-tabs__number {
        font-size: 13.5vw;
        line-height: 100%;
    }
    .block-stat-tabs__label {
        font-size: 4.2vw;
        line-height: 200%;
    }
}

@media (max-width: 767px) {
    .block-numbered-grid.block-numbered-grid--finest { padding: 96px 15px; }
    .block-numbered-grid--finest .container { width: 100%; }
    .block-numbered-grid--finest .block-numbered-grid__eyebrow {
        margin-bottom: 96px;
        font-size: 13.5vw;
        line-height: 100%;
    }
    .block-numbered-grid--finest .block-numbered-grid__heading {
        margin-bottom: 40px;
        padding: 0 10px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-numbered-grid--finest .block-numbered-grid__intro {
        margin-bottom: 24px;
        padding: 0 10px;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-numbered-grid--finest .block-numbered-grid__intro br { display: inline; } /* live keeps the break after "meticulously" */
    .block-numbered-grid--finest .block-numbered-grid__head { margin: 0 0 60px; }
    .block-numbered-grid--finest .block-numbered-grid__grid { margin-bottom: 0; }
    .block-numbered-grid--finest .block-numbered-grid__pair,
    .block-numbered-grid--finest .block-numbered-grid__pair:first-child,
    .block-numbered-grid--finest .block-numbered-grid__pair:last-child {
        display: flow-root;
        margin-bottom: 0;
        padding: 0 10px;
    }
    .block-numbered-grid.block-numbered-grid--finest .block-numbered-grid__item {
        width: auto;
        margin-bottom: 40px;
        padding-right: 0;
    }
    .block-numbered-grid--finest .block-numbered-grid__number {
        margin-bottom: 18px;
        font-size: 5.6vw;
        line-height: 100%;
    }
    .block-numbered-grid--finest .block-numbered-grid__title {
        margin-bottom: 8px;
        font-family: var(--font-medium);
        font-size: 5.6vw;
    }
    /* live: only the first item keeps the 24px under its copy inside its box */
    .block-numbered-grid--finest .block-numbered-grid__body p {
        margin-bottom: 0;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-numbered-grid--finest .block-numbered-grid__pair:first-child .block-numbered-grid__item:first-child .block-numbered-grid__body p { padding-bottom: 24px; }
}

/* ==== product-tabs "single-tall" phones (live /tattoo-recognition/): no padding over the eyebrow, 80px under the
   copy and 60px of ink (the live margin) under the section ==== */
@media (max-width: 767px) {
    .block-product-tabs.block-product-tabs--single-tall { padding-bottom: 156px; }
    .block-product-tabs--single-tall .block-product-tabs__stage { padding-top: 0; }
    .block-product-tabs--single-tall .block-product-tabs__panels { margin-bottom: 80px; }
    .block-product-tabs--single-tall .block-product-tabs__actions { margin-left: 15px; }
}

/* faq-accordion "padded" phones (live /tattoo-recognition/): 60px of ink over the toggle (the live margin under the
   related posts), 40px under the toggle row and 60px under it */
@media (max-width: 767px) {
    .block-faq-accordion.block-faq-accordion--padded { padding: 60px 25px 61px; }
    .block-faq-accordion--padded .block-faq-accordion__toggle-row { padding-bottom: 40px; }
    .block-faq-accordion--picture-gap .block-faq-accordion__figure { margin-bottom: 20px; }
}

/* numbered-grid "finest" tablets (768 to 980px). Any-width rule: live keeps the 120px ghost word (it breaks into
   "AMERICA'", "S", "FINEST") and squeezes the columns to about 120px; here the word scales with the screen and the
   columns share the row. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-numbered-grid--finest .block-numbered-grid__eyebrow {
        margin-bottom: 30px;
        font-size: 12vw;
        line-height: 100%;
    }
    .block-numbered-grid--finest .block-numbered-grid__pair,
    .block-numbered-grid--finest .block-numbered-grid__pair:first-child,
    .block-numbered-grid--finest .block-numbered-grid__pair:last-child {
        display: flex;
        margin-bottom: 40px;
        padding: 0;
    }
    .block-numbered-grid.block-numbered-grid--finest .block-numbered-grid__item {
        width: 50%;
        padding-right: 40px;
    }
    .block-numbered-grid--finest .block-numbered-grid__title {
        margin-bottom: 30px;
        font-size: 28px;
        line-height: 36px;
        color: var(--color-steel);
    }
}

/* hero-split-image capability with the 25px gutter on phones (live /tattoo-recognition/): the title starts 25px in */
@media (max-width: 767px) {
    .block-hero-split-image--capability.block-hero-split-image--gutter-25 .block-hero-split-image__text-col { padding: 0 25px 25px; }
}

/* ==== BLOCK-STANDARDS (lane B): /testing-and-standards/ ==== */
/* live starts this title 440px down from 1024 to 1600px (Divi section padding quirk); use the top space of the wider tier */
@media (min-width: 1024px) and (max-width: 1600px) {
    .block-standards-title { padding-top: 138px; }
}

@media (max-width: 1279px) {
    .block-standards-title__heading { font-size: 68px; line-height: 68px; }
}

/* at the 80% content zoom the bullet rows are 22.8px on live (2.5px padding) */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-standards-document__text ul li { padding-bottom: 2.5px; }
}

/* tablet */
@media (max-width: 980px) {
    .block-standards-title { margin-bottom: 5.63vw; padding: 16.3vw 0 0 14.4vw; }
    .block-standards-title .container { min-height: 817px; }
    .block-standards-title__heading { margin-bottom: 40px; }
    .block-standards-document .container { padding-bottom: 60px; }
    .block-standards-document__belief,
    .block-standards-document__standards,
    .block-standards-document__beyond { margin-bottom: 150px; }
    .block-standards-closing { padding-bottom: 120px; }
    .block-standards-closing__row { flex-direction: column; }
    .block-standards-closing__image { width: 100%; }
    .block-standards-closing__text { width: 100%; }
}

/* phone */
@media (max-width: 767px) {
    .block-standards-title { margin-bottom: 0; padding: 120px 0 0; }
    .block-standards-title .container,
    .block-standards-document .container,
    .block-standards-closing .container { box-sizing: border-box; width: 100%; }
    .block-standards-title .container { min-height: 0; padding: 0 25px; }
    .block-standards-title__image { margin-bottom: 64px; }
    /* The "Updated" line sits centred between the title and the picture, set like the Code of Ethics hero date
       (legal.css .legal-hero__meta: 24px under the title, 16px on 32px, 24px to the picture; DIGITAL-326). */
    .block-standards-title--dated .block-standards-title__heading { margin-bottom: 24px; }
    .block-standards-title__updated {
        margin: 0 0 24px;
        color: var(--color-slate);
        font-family: var(--font-medium);
        font-size: 16px;
        line-height: 2;
        text-align: center;
    }
    .block-standards-title--dated + .block-standards-document .block-standards-document__updated { display: none; }
    .block-standards-document .container { padding: 0 25px 64px; }
    .block-standards-document__updated { margin-bottom: 24px; font-size: 3.4vw; line-height: 200%; }
    .block-standards-document__eyebrow { font-size: 3vw; }
    .block-standards-document__heading { margin-bottom: 24px; font-size: 7.6vw; }
    .block-standards-document__text { font-size: 3.8vw; }
    .block-standards-document__text p { margin-bottom: 10px; padding-bottom: 0; }
    .block-standards-document__intro { margin-bottom: 64px; }
    .block-standards-document__belief { margin-bottom: 40px; }
    .block-standards-document__standards { margin-bottom: 20px; }
    .block-standards-document__beyond { margin-bottom: 0; }
    .block-standards-document__text h2 { margin-bottom: 24px; font-size: 7.6vw; }
    .block-standards-document__text h3 { font-size: 5vw; }
    .block-standards-document__text h4 { font-size: 4.8vw; }
    .block-standards-document__text h6 { margin-bottom: 40px; font-size: 5vw; line-height: 140%; }
    .block-standards-document__partners { margin-bottom: 60px; }
    .block-standards-document__partner { display: block; }
    .block-standards-document__logo img { width: 120px; }
    .block-standards-document__partner-copy { padding: 30px 0 0; font-size: 3.78vw; }
    .block-standards-document__partner-name { font-size: 4.2vw; }
    .block-standards-document__partner-copy a { font-size: 3.8vw; }
    .block-standards-document__text ul li { padding-bottom: 3px; }
    .block-standards-closing { padding-bottom: 0; }
    .block-standards-closing .container { padding: 0 25px; }
    .block-standards-closing__image { margin-bottom: 30px; }
    .block-standards-closing__text { width: 100%; margin-top: 0; font-size: 8vw; line-height: 140%; }
    .block-standards-closing__button { padding: 64px 0 104px; }
}

@media (max-width: 475px) {
    .block-standards-title__heading { font-size: 58px; line-height: 58px; }
}

/* ==== BLOCK-ZTC (lane B): /ztc/ responsive rules ==== */
/* The quote rows are 66% of the screen wide above 1500px and from 768 to 1024px (live Divi row width), the standard rows between. */
@media (min-width: 1501px) {
    .block-founder-quote .container { width: 66vw; max-width: 1340px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .block-founder-quote .container { width: 66vw; }
}

/* Tablets: live Divi lays the logo over the announcement bar and the heading (a page CSS bug); here it stays in the flow. */
@media (max-width: 980px) {
    .block-announcement-bar { padding-top: 3.3vw; }
    .block-brand-intro { padding: 64px 0 40px; }
    .block-brand-intro__logo { margin-bottom: 40px; }
    .block-brand-intro__logo img { width: 292px; }
    .block-brand-intro__main,
    .block-brand-intro__art { margin-bottom: 0; }
    .block-brand-intro__second { text-align: left; }
    .block-brand-intro__text { margin-left: auto; margin-right: auto; }
    .block-product-link-rows { padding-top: 0; }
    .block-product-link-rows__row { margin-bottom: 20px; padding: 20px; }
    .block-product-link-rows__row:last-child { margin-bottom: 0; }
    .block-product-link-rows__main { flex-basis: 100%; min-height: 0; padding: 30px; text-align: center; }
    .block-product-link-rows__logo img { margin: 0; }
    .block-product-link-rows__text { margin-left: auto; margin-right: auto; }
    .block-product-link-rows__side { display: none; }
    .block-customer-form__heading { text-align: left; }
    .block-customer-form__text { margin-bottom: 20px; }
    .block-customer-form__form { margin-bottom: 60px; }
    .block-founder-quote { padding-bottom: 40px; }
}

@media (max-width: 767px) {
    .block-announcement-bar { padding: 130px 0 40px; }
    .block-announcement-bar .container { padding: 5px 0 0; }
    /* Centred on the line itself, as on live: ".page-sections > section" (left) outranks the section's centring and
       the strong's flex centring only centres a line that fits, so the two-line phone title sat on the left (DIGITAL-327). */
    .block-announcement-bar__title { margin: 0 0 30px; font-size: 4.2vw; font-weight: 400; line-height: 22px; text-align: center; }
    .block-brand-intro { padding: 96px 0 0; }
    .block-brand-intro__logo,
    .block-brand-intro__main { margin-bottom: 96px; }
    .block-brand-intro .container { box-sizing: border-box; width: 100%; padding: 0; }
    .block-brand-intro__main,
    .block-brand-intro__second { box-sizing: border-box; padding: 0 20px; }
    .block-brand-intro__heading { margin-bottom: 40px; font-size: 65px; line-height: 100%; }
    .block-brand-intro__lead { margin-bottom: 60px; font-size: 34px; }
    .block-brand-intro .btn { font-size: 4.2vw; }
    .block-brand-intro .btn-wrap { padding-bottom: 20px; }
    .block-brand-intro__art { margin-bottom: 96px; }
    .block-brand-intro__second { text-align: center; }
    .block-brand-intro__subheading { margin-bottom: 24px; font-size: 8.4vw; line-height: 116%; }
    .block-product-link-rows,
    .block-customer-form,
    .block-founder-quote { box-sizing: border-box; }
    .block-product-link-rows .container,
    .block-customer-form .container,
    .block-founder-quote .container { box-sizing: border-box; width: 100%; padding: 0 20px; }
    .block-product-link-rows { padding-top: 60px; }
    .block-product-link-rows__row { margin-bottom: 40px; padding: 40px 25px 25px; border-color: var(--color-ink); }
    .block-product-link-rows__row:last-child { margin-bottom: 96px; }
    .block-product-link-rows__main { padding: 0; text-align: left; }
    .block-product-link-rows__arrow { top: -24px; }
    .block-product-link-rows__logo { margin-bottom: 30px; }
    .block-product-link-rows__text { max-width: 100%; margin: 0 0 30px; font-size: 4.2vw; }
    /* Logo widths on phones differ per brand (live Divi image modules: 257, 190 and 214px). */
    .block-product-link-rows__row:nth-child(1) .block-product-link-rows__logo img { width: 257px; }
    .block-product-link-rows__row:nth-child(2) .block-product-link-rows__logo img { width: 190px; }
    .block-product-link-rows__row:nth-child(3) .block-product-link-rows__logo img { width: 214px; }
    .block-product-link-rows__phone-image { display: block; }
    .block-product-link-rows__phone-image img { display: block; width: 100%; height: auto; }
    .block-customer-form__heading { margin-bottom: 24px; font-size: 8.4vw; line-height: 116%; text-align: center; }
    .block-customer-form__text { margin-bottom: 60px; font-size: 4.2vw; }
    .block-customer-form__form { margin-bottom: 96px; }
    .block-founder-quote { padding-bottom: 96px; }
    .block-founder-quote__head { margin-bottom: 60px; }
    .block-founder-quote__mark img { width: 109px; }
    .block-founder-quote__photo { flex: none; }
    .block-founder-quote__photo img { width: 64px; }
    .block-founder-quote__author { width: 175px; }
    .block-founder-quote__name { font-size: 4.2vw; }
    .block-founder-quote__quote { font-size: 7vw; line-height: 125%; }
    .block-founder-quote__signature img { width: 316px; }
}

@media (max-width: 475px) {
    .block-brand-intro__lead br,
    .block-brand-intro__subheading br,
    .block-product-link-rows__text br,
    .block-customer-form__text br { display: none; }
}

/* ==== BLOCK-AGE-API (lane B): /age-estimation-api/ responsive rules ==== */
@media (max-width: 980px) {
    .block-price-plans__note,
    .block-trial-banner__note { max-width: 100%; }
    .block-tagline-link { padding: 0 0 3.75vw; }
    .block-tagline-link__text { font-size: 3.13vw; }
    .block-rank-cards .container { width: 90%; }
    .block-rank-cards__title,
    .block-rank-cards__rank { font-size: 28px; line-height: 36px; }
}

@media (max-width: 767px) {
    .block-tagline-link { padding: 0 25px 96px; }
    .block-tagline-link .container { width: 100%; }
    .block-tagline-link__text { margin-bottom: 40px; font-size: 6.9vw; }
    .block-tagline-link__link { font-size: 3.7vw; line-height: 120%; }
    .block-rank-cards { padding: 96px 25px; }
    .block-rank-cards__background img { top: 50%; transform: translate(-50%, -50%); }
    .block-rank-cards .container { width: 100%; }
    .block-rank-cards__row { flex-direction: column; gap: 39px; margin-bottom: 23px; }
    /* live phone card: the 335 x 361 outline picture at its own size on ink, no clipping, 1px in from the column */
    .block-rank-cards__card { width: 335px; height: 361px; margin: 0 0 0 1px; background: none; clip-path: none; }
    .block-rank-cards__card:hover { background: none; }
    .block-rank-cards__body { position: relative; width: 335px; height: 361px; margin: 0; padding: 60px 8px 39px 15px; background-color: var(--color-ink); clip-path: none; }
    .block-rank-cards__card-art { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 335px; height: 361px; max-width: none; object-fit: none; object-position: 0 0; }
    .block-rank-cards__rank,
    .block-rank-cards__title,
    .block-rank-cards__note { position: relative; z-index: 1; }
    .block-rank-cards__title { font-size: 32px; line-height: 40px; }
    .block-rank-cards__rank { padding-bottom: 10px; font-size: 4.2vw; line-height: 100%; }
    .block-rank-cards__note { font-size: 3.5vw; line-height: 133%; }
    .block-rank-cards__caption { width: 95%; color: var(--color-steel); font-size: 3.5vw; }
    .block-rank-cards__caption a { text-decoration-color: currentColor; }
}

/* ==== feature-carousel "capabilities" tablets and phones (live /object-detection/).
   Any-width rule: live starts its tablet heading and intro at the screen edge and leaves 456px between the intro and the
   cards; here the head follows the page column and the intro is 60px over the cards. ==== */
@media (max-width: 980px) {
    .block-feature-carousel--capabilities .block-feature-carousel__head {
        width: var(--container-width);
        margin-right: auto;
        margin-left: auto;
    }
    .block-feature-carousel--capabilities .block-feature-carousel__eyebrow {
        margin-bottom: 126px;
        font-size: 18px;
    }
    .block-feature-carousel--capabilities .block-feature-carousel__heading { margin-bottom: 100px; }
}

@media (max-width: 767px) {
    .block-feature-carousel.block-feature-carousel--capabilities { padding: 0 25px 60px; }
    .block-feature-carousel--capabilities .block-feature-carousel__head {
        width: 100%;
        margin-bottom: 0;
    }
    .block-feature-carousel--capabilities .block-feature-carousel__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
        line-height: 18px;
    }
    .block-feature-carousel--capabilities .block-feature-carousel__heading {
        margin-bottom: 40px;
        font-size: 8.4vw;
    }
    .block-feature-carousel--capabilities .block-feature-carousel__title { margin: 25px 0 15px; }
    .block-feature-carousel--capabilities .block-feature-carousel__text br { display: none; }
}

/* testimonial-carousel "first-gap" (live /object-detection/): like first-row, with 60px under the cards from 768 to 1024px
   instead of the 450px of padding the other pages keep there */
@media (min-width: 476px) and (max-width: 1024px) {
    .block-testimonial-carousel--gap .block-testimonial-carousel__carousel .swiper-container {
        margin-bottom: 60px;
        padding-bottom: 0;
    }
}

/* numbered-grid "roomy" (live /object-detection/): 20px more under the number in the unzoomed 981 to 1024px range */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-numbered-grid--roomy .block-numbered-grid__number { margin-bottom: calc(1vw + 20px); }
}

/* accordion-list stacked with a heading over the list (live /object-detection/ "APPLICATIONS"): 5vw under the
   section from 768px, 96px over and under on phones */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-accordion-list.block-accordion-list--stacked.block-accordion-list--main { padding-bottom: 5vw; }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--stacked.block-accordion-list--main { padding: 96px 25px; }
}

/* testimonial-carousel "first-gap" (live /object-detection/): 60px under the cards in the 80% zoom band too */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-testimonial-carousel--gap .block-testimonial-carousel__carousel { margin-bottom: 60px; }
}

/* product-tabs "tall-capped" (live /object-detection/): the copy column at most 1220px wide from 1024 to 1600px */
@media (min-width: 1024px) and (max-width: 1600px) {
    .block-product-tabs--capped .block-product-tabs__panels { max-width: 1220px; }
}

/* ==== list-promo tiers (live /object-detection/) ====
   Tablets: live shows two "Read Blog" links (one over and one under the picture); the theme keeps one, under the picture. */
@media (max-width: 980px) {
    .block-list-promo { padding: 140px 0; }
    .block-list-promo__eyebrow { margin-bottom: 115px; }
    .block-list-promo__row { display: block; }
    .block-list-promo__intro,
    .block-list-promo__list { width: 100%; }
    .block-list-promo__intro { margin-right: 0; }
    .block-list-promo__card {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "author"
            "title"
            "copy"
            "media"
            "link";
    }
    .block-list-promo__card-text { display: contents; }
    .block-list-promo__author { grid-area: author; }
    .block-list-promo__card-title { grid-area: title; }
    .block-list-promo__card-copy {
        grid-area: copy;
        margin-bottom: 40px;
    }
    .block-list-promo__card-media {
        grid-area: media;
        width: 100%;
        margin-bottom: 30px;
    }
    .block-list-promo__card-media img {
        width: 100%;
        object-fit: cover;
    }
    .block-list-promo__card-link { grid-area: link; }
}

@media (max-width: 767px) {
    .block-list-promo { padding: 0 25px 96px; }
    .block-list-promo .container { width: 100%; }
    .block-list-promo__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
        line-height: 18.4px;
    }
    .block-list-promo__row { margin-bottom: 40px; }
    .block-list-promo__list { padding-left: 0; }
    .block-list-promo__heading {
        margin-bottom: 24px;
        font-size: 8.4vw;
    }
    .block-list-promo__text {
        margin-bottom: 24px;
        font-size: 4.2vw;
    }
    .block-list-promo__item {
        margin-bottom: 10px;
        font-size: 4.2vw;
        line-height: 170%;
    }
    .block-list-promo__item::before { top: 7px; }
    .block-list-promo__card {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title title"
            "copy copy"
            "media media"
            "link author";
        padding: 40px 25px 30px;
    }
    .block-list-promo__card-text { display: contents; }
    .block-list-promo__card-title {
        grid-area: title;
        margin-bottom: 18px;
        font-size: 5.6vw;
    }
    .block-list-promo__card-copy {
        grid-area: copy;
        margin-bottom: 24px;
        font-size: 4.2vw;
    }
    .block-list-promo__card-media {
        grid-area: media;
        margin-bottom: 24px;
    }
    .block-list-promo__card-media img {
        width: 100%;
        height: auto;
    }
    .block-list-promo__card-link {
        grid-area: link;
        align-self: start;
        margin-bottom: 30px;
        padding-bottom: 5px;
        font-size: 4.2vw;
    }
    .block-list-promo__author {
        grid-area: author;
        align-self: start;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 28px;
    }
    .block-list-promo__author-picture {
        width: 42px;
        margin-right: 15px;
        overflow: hidden;
        border-radius: 50%;
    }
    .block-list-promo__author-name {
        padding-left: 0;
        font-size: 3.7vw;
    }
    .block-list-promo__card-title,
    .block-list-promo__card-copy { padding-right: 40px; }
}

@media (max-width: 980px) {
    .block-accordion-list--stacked.block-accordion-list--main .block-accordion-list__main { width: 100%; }
    /* any-width rule: live pulls the heading 8px up over the eyebrow once it sits under it */
    .block-accordion-list--stacked .block-accordion-list__main .block-accordion-list__heading { margin-top: 0; }
}

@media (max-width: 767px) {
    .block-accordion-list--stacked .block-accordion-list__main .block-accordion-list__heading { margin: 0 0 24px; }
}

/* product-tabs "tall-capped" phones (live /object-detection/): nothing over the eyebrow, 40px under the eyebrow and the
   picture, 60px under the logo, 60px between the products, 80px under the last one and 40px of ink after it */
@media (max-width: 767px) {
    .block-product-tabs.block-product-tabs--tall.block-product-tabs--capped { padding-bottom: 121px; }
    .block-product-tabs--capped .block-product-tabs__stage { padding-top: 0; }
    .block-product-tabs--capped .block-product-tabs__eyebrow {
        margin-bottom: 40px;
        line-height: 18.4px;
    }
    .block-product-tabs--capped .block-product-tabs__phone-image { margin-bottom: 40px; }
    .block-product-tabs--capped .block-product-tabs__logo { margin-bottom: 60px; }
    .block-product-tabs--capped .block-product-tabs__logo--w212 { width: 212px; }
    .block-product-tabs--capped .block-product-tabs__logo--w250 { width: 250px; }
    .block-product-tabs--capped .block-product-tabs__logo--w300 { width: 300px; }
    .block-product-tabs--capped .block-product-tabs__logo img { width: 100%; }
    .block-product-tabs--capped .block-product-tabs__text { margin-bottom: 28px; }
    .block-product-tabs--capped .block-product-tabs__panel + .block-product-tabs__panel { margin-top: 60px; }
}

@media (max-width: 767px) {
    .block-numbered-grid--roomy .block-numbered-grid__eyebrow { line-height: 20px; }
}

/* ==== rank-numeral tiers (live /face-analytics/) ====
   Live fixes the section height from 981 to 1600px (75vw up to 1279px, 68vw to 1600px); the row overflows it a little
   and the next section's padding hides that. */
@media (min-width: 981px) and (max-width: 1279px) {
    .block-rank-numeral { height: 75vw; }
}

@media (min-width: 1280px) and (max-width: 1600px) {
    .block-rank-numeral { height: 68vw; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-rank-numeral__row { padding: 36px 0; }
}

@media (max-width: 1024px) {
    .block-rank-numeral__row { padding: 2vw 0; }
}

@media (min-width: 1500px) {
    .block-accordion-list--headed .block-accordion-list__heading { font-size: 72px; }
}

@media (max-width: 980px) {
    .block-accordion-list--headed .block-accordion-list__heading { font-size: 3.95vw; }
    .block-accordion-list--headed .block-accordion-list__list { width: 100%; }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--headed { padding: 96px 25px; }
    .block-accordion-list--headed .block-accordion-list__heading {
        margin-bottom: 24px;
        padding-bottom: 0;
        font-size: 8.4vw;
    }
}

/* feature-carousel "short" phones (live /face-analytics/): 60px under the section, 40px under the eyebrow, smaller titles with 15px under */
@media (max-width: 767px) {
    .block-feature-carousel.block-feature-carousel--short { padding: 0 25px 60px; }
    .block-feature-carousel--short .block-feature-carousel__head { margin-bottom: 40px; }
    .block-feature-carousel--short .block-feature-carousel__eyebrow { line-height: 18px; }
    .block-feature-carousel--short .block-feature-carousel__title {
        margin: 0 0 15px;
        padding-bottom: 0;
        font-size: 5.6vw;
        line-height: 118%;
    }
}

/* rank-numeral picture on small desktops (live /face-analytics/, 981-1279px): hung at 30% of the stage height instead of centered */
@media (min-width: 981px) and (max-width: 1279px) {
    .block-rank-numeral__picture { top: 30%; }
}

/* rank-numeral tablets and phones. Any-width rule: live starts the eyebrow at 7.4px type and the heading and copy at the
   screen edge on tablets, and hangs the picture 678px off the left edge; here the head follows the page column and the
   picture overlaps the numerals from the right. Phones follow live. */
@media (max-width: 980px) {
    .block-rank-numeral__eyebrow { font-size: 18px; }
    .block-rank-numeral__heading { font-size: 3.95vw; }
    .block-rank-numeral__row {
        position: relative;
        flex-wrap: wrap;
        padding: 30px 0;
    }
    .block-rank-numeral__numerals {
        justify-content: flex-start;
        width: 100%;
        margin-right: 0;
    }
    .block-rank-numeral__hash {
        margin-bottom: 30px;
        font-size: 126.72px;
        line-height: 101.4px;
    }
    .block-rank-numeral__digit {
        font-size: 254.4px;
        line-height: 100%;
    }
    .block-rank-numeral__stage {
        position: static;
        width: 0;
        margin: 0;
    }
    .block-rank-numeral__row { min-height: 44vw; }
    .block-rank-numeral__picture {
        top: 50%;
        right: 0;
        left: auto;
        width: 40vw;
    }
    .block-rank-numeral__caption { display: none; }
}

@media (max-width: 767px) {
    .block-rank-numeral__text--phone a { font-size: 16px; line-height: 24px; }
}

@media (max-width: 767px) {
    .block-rank-numeral {
        padding: 0 0 137px;
        overflow-x: clip;
    }
    .block-rank-numeral::before {
        bottom: 40px;
        height: 40px;
    }
    .block-rank-numeral::after {
        top: calc(100% - 40px);
        height: 40px;
    }
    .block-rank-numeral .container { width: 100%; }
    .block-rank-numeral__eyebrow,
    .block-rank-numeral__heading,
    .block-rank-numeral__text {
        margin-right: 25px;
        margin-left: 25px;
    }
    .block-rank-numeral__eyebrow {
        margin-bottom: 60px;
        font-size: 3.25vw;
        line-height: 18px;
    }
    .block-rank-numeral__heading {
        margin-bottom: 20px;
        padding-bottom: 0;
        font-size: 8.4vw;
    }
    .block-rank-numeral__text {
        margin-bottom: 0;
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-rank-numeral__text p { padding-bottom: 1em; }
    .block-rank-numeral__text--phone { margin-bottom: 20px; }
    .block-rank-numeral__text--phone p {
        margin-bottom: 0;
        padding-bottom: 1em;
    }
    .block-rank-numeral__text--phone p:last-child { padding-bottom: 0; }
    .block-rank-numeral__row { padding: 0 15px 0 40px; }
    .block-rank-numeral__numerals {
        justify-content: flex-start;
        align-items: flex-start;
    }
    .block-rank-numeral__hash {
        align-self: center;
        margin-bottom: 0;
        font-size: 26.8vw;
        line-height: 21.44vw;
    }
    .block-rank-numeral__digit {
        padding-top: 40px;
        font-size: 53.5vw;
        line-height: 80%;
    }
    .block-rank-numeral__picture {
        top: auto;
        right: -8.2vw;
        bottom: -101px;
        width: 90vw;
        transform: none;
    }
}

/* rank-numeral on wide phones: the picture keeps its 390px size so it never climbs over the copy */
@media (min-width: 391px) and (max-width: 767px) {
    .block-rank-numeral__picture { width: 351px; }
}

/* product-tabs phone top flush (live /face-analytics/): nothing over the eyebrow on phones */
@media (max-width: 767px) {
    .block-product-tabs--capability.block-product-tabs--top-flush .block-product-tabs__stage { padding-top: 0; }
}

/* product-tabs eyebrow tight (live /face-analytics/): a 14px eyebrow on a 20px line from 768px up (the tall stage's 0.97vw
   tablet eyebrow is 7px there) */
@media (min-width: 768px) {
    .block-product-tabs--eyebrow-tight .block-product-tabs__eyebrow {
        font-size: 14px;
        line-height: 20px;
    }
}

/* bordered-cells tablets: live keeps the 28px labels and 40px padding, so "Environments" runs out of its cell; here the
   padding and labels shrink so every word stays inside */
@media (min-width: 768px) and (max-width: 980px) {
    .block-bordered-cells__cell { padding: 30px 20px; }
    .block-bordered-cells__text { font-size: 24px; }
}

/* bordered-cells phones (live /ai-gun-detection/): two cells per row, 120px rows, centred 18px labels, the page gutter */
@media (max-width: 767px) {
    .block-bordered-cells { padding: 0 15px 96px; }
    .block-bordered-cells .container { width: auto; }
    .block-bordered-cells__heading {
        margin-bottom: 10px;
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-bordered-cells__heading br { display: none; }
    .block-bordered-cells__grid { grid-template-columns: repeat(2, 1fr); }
    .block-bordered-cells__cell {
        align-items: center;
        min-height: 120px;
        padding: 20px;
    }
    .block-bordered-cells__cell:nth-child(odd) { border-left-width: 1px; border-right-width: 0; }
    .block-bordered-cells__cell:nth-child(even) { border-right-width: 1px; border-left-width: 1px; }
    .block-bordered-cells__text { font-size: 18px; }
    .block-bordered-cells__text.u-hide-phone { display: none; }
    .block-bordered-cells__phone-only { display: block; }
}

/* text-media-rows tablets and phones (live /ai-gun-detection/): rows stack with the media on top. Live keeps the
   two halves on tablets, centres the copy and squeezes the 57px heading into a half column; here the rows follow the
   phone layout with larger type. */
@media (max-width: 980px) {
    .block-text-media-rows { padding: 0 0 60px; }
    .block-text-media-rows__row {
        flex-direction: column;
        gap: 40px;
    }
    .block-text-media-rows__media { order: -1; }
    .block-text-media-rows__copy,
    .block-text-media-rows__media { flex: 0 0 auto; }
    .block-text-media-rows__media--video { height: 355px; }
    .block-text-media-rows__heading {
        margin-bottom: 10px;
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .block-text-media-rows { padding: 0 15px 60px; }
    .block-text-media-rows .container { width: auto; }
    .block-text-media-rows__row + .block-text-media-rows__row { margin-top: 60px; }
    .block-text-media-rows__row { gap: 40px; }
    .block-text-media-rows__row:first-child { padding-top: 40px; }
    .block-text-media-rows__row:last-child { padding-bottom: 40px; }
    .block-text-media-rows__heading {
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-text-media-rows__text {
        font-size: 16.38px;
        line-height: 140%;
    }
    .block-text-media-rows__text p { padding-bottom: 16.38px; }
    .block-text-media-rows__text p:last-child { padding-bottom: 0; }
}

/* numbered-pairs tablets and phones (live /ai-gun-detection/): one column of items; live centres the tablet titles and
   squeezes the 57px heading into the half column, here the tablet follows the phone structure with larger type. */
@media (max-width: 980px) {
    .block-numbered-pairs__head { margin-bottom: 60px; }
    .block-numbered-pairs__heading { font-size: 44px; }
    .block-numbered-pairs__list {
        grid-template-columns: 100%;
        row-gap: 40px;
        margin-bottom: 96px;
    }
    .block-numbered-pairs__closing {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 60px;
    }
    .block-numbered-pairs__closing-copy {
        flex: 0 0 auto;
        margin-bottom: 40px;
    }
    .block-numbered-pairs__actions {
        display: flex;
        justify-content: center;
    }
    .block-numbered-pairs__actions .btn { margin-top: 20px; }
    .block-numbered-pairs { padding-bottom: 60px; }
}

@media (max-width: 767px) {
    .block-numbered-pairs .container {
        width: auto;
        padding: 0 15px;
    }
    .block-numbered-pairs .block-numbered-pairs__closing { padding-top: 60px; }
    .block-numbered-pairs__eyebrow,
    .block-numbered-pairs__number { display: none; }
    .block-numbered-pairs__heading {
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-numbered-pairs__intro,
    .block-numbered-pairs__text {
        font-size: 16.38px;
        line-height: 140%;
    }
    .block-numbered-pairs__title { font-size: 5.6vw; }
    .block-numbered-pairs__phone-image { display: block; }
    .block-numbered-pairs__phone-image img {
        display: block;
        width: 100%;
        height: auto;
    }
    .block-numbered-pairs__actions .btn {
        height: 44px;
        padding: 10px 50px 10px 24px;
        font-size: 16.38px;
    }
}

@media (max-width: 475px) {
    .block-numbered-pairs__heading br { display: none; }
}

/* highlight-statement tablets and phones (live /ai-gun-detection/): 48px / 115% on tablets, 10.5vw / 125% on phones */
@media (max-width: 980px) {
    .block-highlight-statement { padding: 0 0 3.75vw; }
    .block-highlight-statement__text {
        margin-bottom: 40px;
        font-size: 48px;
        line-height: 115%;
    }
    .block-highlight-statement__actions {
        height: auto;
        padding: 38px 0 13px;
    }
}

@media (max-width: 767px) {
    .block-highlight-statement { padding: 60px 15px 96px; }
    .block-highlight-statement .container { width: auto; }
    .block-highlight-statement__text {
        margin-bottom: 60px;
        font-size: 10.5vw;
        line-height: 125%;
    }
    .block-highlight-statement__actions {
        display: flex;
        justify-content: center;
        padding: 0 0 20px;
    }
    .block-highlight-statement__actions .btn {
        height: 44px;
        padding: 10px 50px 10px 24px;
        font-size: 16.38px;
    }
}

@media (max-width: 475px) {
    .block-highlight-statement .anim::after { height: 2px; }
}

/* outlined-cards tablets and phones: the text only, in one outlined box per card (live /ai-gun-detection/) */
@media (max-width: 980px) {
    .block-outlined-cards__card {
        display: block;
        border-color: var(--color-ink);
    }
    .block-outlined-cards__copy { padding: 25px; }
    .block-outlined-cards__body {
        width: auto;
        min-height: 0;
    }
    .block-outlined-cards__copy { margin-right: 0; }
    .block-outlined-cards__media { display: none; }
}

@media (max-width: 767px) {
    .block-outlined-cards { padding: 0 15px; }
    .block-outlined-cards .container { width: auto; }
    .block-outlined-cards__text {
        font-size: 16.38px;
        line-height: 140%;
    }
}

/* scroll-reveal tablets and phones (live /ai-gun-detection/): tablets keep the cream copy over the video (the ink copy is
   left out; the box stays 750px tall like live), phones put the heading under the video, static, in ink */
@media (max-width: 980px) {
    .block-scroll-reveal { padding: 0 0 3.75vw; }
    .block-scroll-reveal__ink { display: none; }
}

@media (max-width: 767px) {
    .block-scroll-reveal { padding: 96px 0 0; }
    .block-scroll-reveal .container {
        width: 100%;
        padding: 0;
    }
    .block-scroll-reveal__stage {
        min-height: 0;
        height: auto;
        overflow: visible;
    }
    .block-scroll-reveal__video { margin-bottom: 37px; }
    .block-scroll-reveal__text {
        position: relative;
        padding-top: 0;
        margin-bottom: 40px;
        transform: none;
    }
    .block-scroll-reveal__heading {
        font-family: var(--font-medium);
        font-size: 15.2vw;
        font-weight: 500;
        line-height: 260%;
        color: var(--color-ink);
    }
}

/* callout-columns tablets and phones (live /ai-gun-detection/): everything stacks; the callout is a plain outlined box with
   centred copy and the button under it, the three columns follow each other 40px apart */
@media (max-width: 980px) {
    .block-callout-columns {
        margin-bottom: 0;
        padding-bottom: 60px;
    }
    .block-callout-columns__callout {
        display: block;
        margin-bottom: 120px;
        padding: 40px;
        background-color: transparent;
        clip-path: none;
        text-align: center;
    }
    .block-callout-columns__callout::before { content: none; }
    .block-callout-columns__callout-copy {
        margin: 0 0 40px;
        padding: 0;
    }
    .block-callout-columns__callout-copy p { width: auto; }
    .block-callout-columns__intro { margin-bottom: 40px; }
    .block-callout-columns__heading,
    .block-callout-columns__intro-text { width: 100%; }
    .block-callout-columns__heading { font-size: 44px; }
    .block-callout-columns__columns {
        display: block;
    }
    .block-callout-columns__column + .block-callout-columns__column { margin-top: 40px; }
    .block-callout-columns__title { font-size: 28px; }
}

@media (max-width: 767px) {
    .block-callout-columns {
        margin-bottom: 0;
        padding: 0 15px 96px;
    }
    .block-callout-columns .container { width: auto; }
    .block-callout-columns__callout { margin-bottom: 96px; }
    .block-callout-columns__callout-copy {
        font-size: 16.38px;
        line-height: 140%;
    }
    .block-callout-columns__callout-copy p { width: 102%; }
    .block-callout-columns__callout-action { text-align: center; }
    .block-callout-columns .btn--outline {
        height: 44px;
        font-size: 16.38px;
    }
    .block-callout-columns__eyebrow { display: none; }
    .block-callout-columns__intro { margin-bottom: 60px; }
    .block-callout-columns__heading {
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-callout-columns__intro-text,
    .block-callout-columns__text {
        font-size: 16.38px;
        line-height: 140%;
    }
    .block-callout-columns__title { font-size: 5.6vw; }
}

@media (max-width: 475px) {
    .block-callout-columns__heading br,
    .block-callout-columns__title br { display: none; }
}

@media (max-width: 767px) {
    .block-photo-band { height: 142px; }
}

/* definition-rows "cream-open" tablets and phones: 60px over and under; phones keep the 27px titles 14px over the copy */
@media (max-width: 980px) {
    .block-definition-rows.block-definition-rows--cream-open { padding: 0 0 60px; }
    .block-definition-rows--cream-open .block-definition-rows__heading { flex: 0 0 auto; }
    .block-definition-rows--cream-open .block-definition-rows__heading { font-size: 44px; }
}

@media (max-width: 767px) {
    .block-definition-rows.block-definition-rows--cream-open { padding: 60px 15px; }
    .block-definition-rows__eyebrow { display: none; }
    .block-definition-rows--cream-open .block-definition-rows__heading { font-size: 8.4vw; }
    .block-definition-rows--cream-open .block-definition-rows__header { margin-bottom: 0; }
    .block-definition-rows--cream-open .block-definition-rows__heading,
    .block-definition-rows--cream-open .block-definition-rows__title { padding-bottom: 10px; }
    .block-definition-rows--cream-open .block-definition-rows__title { margin-bottom: 14px; }
    .block-definition-rows--cream-open .block-definition-rows__row:last-child { margin-bottom: 0; }
}

@media (min-width: 1675px) {
    .block-definition-rows.block-definition-rows--cream-open { padding-bottom: 0; }
}

/* image-cta "cover" phones (live /ai-gun-detection/): an 850px section covered by the phone picture, a gradient from ink
   at 32% to clear at 72%, the copy on the 15px page gutter */
@media (max-width: 767px) {
    .block-image-cta.block-image-cta--cover {
        min-height: 850px;
        padding: 0 15px;
    }
    .block-image-cta--cover .block-image-cta__image {
        left: 0;
        width: 100%;
        height: 100%;
        margin-left: 0;
    }
    .block-image-cta--cover::before { background-image: linear-gradient(0deg, var(--color-ink) 32%, rgba(255, 255, 255, 0) 72%); }
    .block-image-cta--cover .container {
        width: 100%;
        margin: 0;
    }
    .block-image-cta--cover .block-image-cta__heading { padding-bottom: 10px; }
}

/* accordion-list "group" tiers (live /ai-gun-detection/): tablets 60px over the first group; phones 96px over it, 40px
   between the groups, 60px under the second, 4.2vw heading and lead (120% leading) */
@media (max-width: 980px) {
    .block-accordion-list.block-accordion-list--group .block-accordion-list__intro {
        font-size: 22px;
        text-align: left;
    }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--dark.block-accordion-list--group { padding: 96px 15px 0; }
    .block-accordion-list.block-accordion-list--dark.block-accordion-list--group-end { padding: 0 15px 60px; }
    .block-accordion-list--group .container { padding-bottom: 40px; }
    .block-accordion-list--group-end .container { padding-bottom: 0; }
    .block-accordion-list--group .block-accordion-list__heading { font-size: 4.2vw; }
    .block-accordion-list.block-accordion-list--group .block-accordion-list__intro {
        margin-bottom: 40px;
        font-size: 4.2vw;
    }
}

/* seam "overlap-1-phone": flush above 767px, the 1px overlap on phones */
@media (max-width: 767px) {
    .page-sections > section + section.u-seam-overlap-1-phone { margin-top: var(--section-overlap); }
}

/* highlight-statement button row inside the 80% zoom band: 62.73px (live Divi wrapper) */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-highlight-statement__actions { height: 62.73px; }
}

/* cta-form option "desktop_gap" (live /ai-gun-detection/): 80px between the photo and the form from 981px up */
@media (min-width: 981px) {
    .block-cta-form--desktop-gap .block-cta-form__image { margin-bottom: 80px; }
}

/* related-posts options "bottom_200" and "phone_eyebrow_tight" (live /ai-gun-detection/) */
@media (min-width: 981px) {
    .block-related-posts.block-related-posts--bottom-200 { padding-bottom: 200px; }
}

@media (max-width: 475px) {
    .block-related-posts--capability.block-related-posts--eyebrow-tight .block-related-posts__eyebrow p { margin-bottom: 0; }
}

/* related-posts option "eyebrow_roomy" (live /abis/, /enroll/): capability spacing, but the eyebrow keeps its
   80px gap above 980px and 40px on phones */
@media (min-width: 981px) {
    .block-related-posts--capability.block-related-posts--eyebrow-roomy .block-related-posts__eyebrow { padding-bottom: 80px; }
}

@media (max-width: 475px) {
    .block-related-posts--capability.block-related-posts--eyebrow-roomy .block-related-posts__eyebrow { padding-bottom: 40px; }
}

/* faq-accordion option "body_padded" (live /ai-gun-detection/): the block keeps 2% of the screen width over and under
   (30px on tablets) and the copy follows the heading directly */
@media (min-width: 981px) {
    .block-faq-accordion--body-padded .block-faq-accordion__body { padding: 2% 0; }
    .block-faq-accordion--body-padded .block-faq-accordion__heading { margin-bottom: 0; }
}

@media (min-width: 1501px) {
    .block-faq-accordion--body-padded .block-faq-accordion__body { padding: min(2%, 33px) 0; }
}

@media (min-width: 768px) and (max-width: 980px) {
    .block-faq-accordion--body-padded .block-faq-accordion__body { padding: 30px 0; }
    .block-faq-accordion--body-padded .block-faq-accordion__heading { margin-bottom: 0; }
}

/* scroll-reveal in the 80% zoom band (live /ai-gun-detection/): live places the ink copy with a 120px offset inside the zoomed
   row, 24px above the cream copy; kept so the page matches live (30px here is 24px on screen) */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-scroll-reveal__ink { inset: -30px 0 0; }
}

/* image-cta "cover" (live /ai-gun-detection/): from 981px the copy takes 3/5 of the row and the button 2/5 */
@media (min-width: 981px) {
    .block-image-cta--cover .block-image-cta__text { width: 58.8%; }
    .block-image-cta--cover .block-image-cta__actions { width: 38.2%; }
}

/* faq-accordion option "toggle_flush" (live /ai-gun-detection/): nothing under the closed phone toggle row */
@media (max-width: 475px) {
    .block-faq-accordion.block-faq-accordion--toggle-flush .block-faq-accordion__toggle-row { padding-bottom: 0; }
}

/* faq-accordion option "phone_top_flush" (live /enroll/): the closed phone FAQ is only the toggle row with its own 40px
   and the 1px of the empty live column under it (live 27 Oct 2026 moved the section's 40px under the open list onto the
   rows); the open list keeps its 40px. */
@media (max-width: 767px) {
    .block-faq-accordion.block-faq-accordion--padded.block-faq-accordion--phone-top-flush { padding-top: 0; padding-bottom: 1px; }
    .block-faq-accordion--padded.block-faq-accordion--phone-top-flush .block-faq-accordion__body { padding-bottom: 40px; }
}

/* label_open (live product FAQs since the 26 Oct edit, custom_padding_phone 0 25 40 25; was 60 25 60 25): no ink over the closed
   phone toggle row, 40px under it. */
@media (max-width: 767px) {
    .block-faq-accordion.block-faq-accordion--label-open { padding: 0 25px 40px; }
    /* the flush variant (live /roc-evidence/) keeps the 40px of ink over the toggle row and its 40px under the row */
    .block-faq-accordion.block-faq-accordion--label-open.block-faq-accordion--flush { padding: 40px 25px 0; }
}

/* The FAQ under the related posts on phones, the same on every page (Evan, DIGITAL-308, 309, 311, 315, 318; live and the
   per-page phone paddings above leave 0 to 120px over the label and 48 to 108px under it): like live /enroll/, 60px of ink
   between the stripes and the label up to 475px (the related posts keep it, or the FAQ when they end at the stripes), the
   label row right under the stripes from 476 to 767px, and while closed 40px under the label row to the footer. The
   selectors outweigh the per-page options; the top holds when the FAQ opens, so the label does not jump. */
@media (max-width: 767px) {
    .block-related-posts + section.block-faq-accordion:has(> .block-faq-accordion__body[id]) { padding-top: 0; }
    .block-related-posts + section.block-faq-accordion:has(> .block-faq-accordion__body[hidden]) { padding-bottom: 0; }
    .block-related-posts + section.block-faq-accordion:has(> .block-faq-accordion__body[hidden]) .block-faq-accordion__toggle-row { padding-bottom: 40px; }
}

@media (max-width: 475px) {
    .block-related-posts:not(.block-related-posts--capability, .block-related-posts--phone-ink) + section.block-faq-accordion:has(> .block-faq-accordion__body[id]),
    .block-related-posts--phone-flush + section.block-faq-accordion:has(> .block-faq-accordion__body[id]) { padding-top: 60px; }
}

@media (max-width: 767px) {
    .block-cta-form--phone-image-151 .block-cta-form__image img { height: 151px; }
}

/* hero-photo: 68px title from 476 to 1279px, taller paddings on tablets, phones show the phone picture */
@media (min-width: 476px) and (max-width: 1279px) {
    .block-hero-photo__title { font-size: 68px; }
}

@media (max-width: 980px) {
    .block-hero-photo { padding: 200px 0 245px; }
    .block-hero-photo__copy { width: 100%; }
}

@media (max-width: 767px) {
    .block-hero-photo { padding: 50px 0 100px; }
    .block-hero-photo__bg { display: none; }
    .block-hero-photo__text { font-size: 18px; }
    .block-hero-photo__phone { display: block; width: 100%; height: auto; }
}

/* the copy-to-button gap changes with the live row: 12px from 981 to 1024px, 31px on tablets and phones */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-hero-photo__actions { margin-top: 1.2vw; }
}

@media (max-width: 980px) {
    .block-hero-photo__actions { margin-top: 31px; }
}

@media (max-width: 475px) {
    .block-hero-photo__actions { margin-top: 30px; }
}

@media (min-width: 1501px) {
    .block-hero-photo__actions { margin-top: min(1.2vw, 20px); }
}

@media (max-width: 475px) {
    .btn-wrap .btn.btn--divi { height: auto; padding: 13px 50px 13px 24px; font-size: 15px; }
}

/* rank-checklist: live runs the two halves out of the row from 981px down (the rank hangs off the left edge, any-width
   rule), so up to 1024px the list takes its own width and the rank the rest; tablets and phones stack the halves */
@media (max-width: 1024px) {
    .block-rank-checklist__rank { flex: 1 1 0; width: auto; }
    .block-rank-checklist__list { flex: none; width: auto; }
}

@media (max-width: 980px) {
    .block-rank-checklist { padding-top: 150px; }
    .block-rank-checklist__row { display: block; }
    .block-rank-checklist__rank { width: 100%; margin-right: 0; }
    .block-rank-checklist__list { width: 100%; padding-left: 0; border-left: 0; }
}

@media (max-width: 767px) {
    .block-rank-checklist { padding-top: 100px; }
    .block-rank-checklist__heading { font-size: 32px; }
    .block-rank-checklist__text { font-size: 18px; }
    .block-rank-checklist__band { padding-bottom: 100px; }
    .block-rank-checklist__number { font-size: 50px; }
    .block-rank-checklist__caption { font-size: 18px; }
    .block-rank-checklist__item { font-size: 22px; }
}

/* badge-tabs: the wide tab row keeps 5% of the viewport at each side in the zoom band, fills the screen up to 1024px */
@media (min-width: 1025px) and (max-width: 1500px) {
    .container.block-badge-tabs__wide { max-width: min(1400px, 112.5vw); padding-top: 2.5vw; }
}

@media (max-width: 1024px) {
    .container.block-badge-tabs__wide { width: 100%; padding-top: 2vw; }
    .block-badge-tabs__tabs { margin-bottom: 1.5vw; }
}

@media (max-width: 980px) {
    .container.block-badge-tabs__wide { padding-top: 30px; }
    .block-badge-tabs__tabs { margin-bottom: 30px; }
}

@media (max-width: 768px) {
    .block-badge-tabs__cards { flex-direction: column; align-items: center; }
    .block-badge-tabs__number { margin-bottom: 20px; font-size: 32px; }
    .block-badge-tabs__card { font-size: 18px; }
}

@media (max-width: 767px) {
    .block-badge-tabs { padding: 100px 0; }
    .block-badge-tabs__heading { font-size: 32px; }
    .block-badge-tabs__text { font-size: 18px; }
    .block-badge-tabs__note { width: 80%; margin-left: auto; margin-right: auto; }
}

/* quote-portraits: the live carousel keeps empty room under the quotes in the zoom band (250px) and from 476 to 1024px (450px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .block-quote-portraits .swiper-container { margin-bottom: 0; padding-bottom: 250px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .block-quote-portraits .swiper-container { margin-bottom: 0; padding-bottom: 450px; }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .block-quote-portraits__body { padding-bottom: 0; }
}

@media (max-width: 1024px) {
    .block-quote-portraits__heading { margin-bottom: 1.5%; }
}

@media (max-width: 980px) {
    .block-quote-portraits__heading { margin-bottom: 30px; }
    .block-quote-portraits__arrow--prev { left: max(-80px, -10vw); }
    .block-quote-portraits__arrow--next { right: max(-80px, -10vw); }
    .block-quote-portraits__row { display: block; text-align: center; }
    .block-quote-portraits__cta-text { width: 100%; margin-right: 0; text-align: center; }
    .block-quote-portraits__cta-button { width: 100%; }
}

@media (max-width: 767px) {
    .block-quote-portraits__top { padding-top: 100px; }
    .block-quote-portraits__heading { font-size: 32px; }
    .block-quote-portraits__slide { display: block; }
    .block-quote-portraits__portrait { flex-basis: auto; }
    .block-quote-portraits__portrait img { width: 50%; }
    .block-quote-portraits__arrow--prev { left: -25px; }
    .block-quote-portraits__arrow--next { right: -25px; }
    .block-quote-portraits__cta { padding-bottom: 100px; }
}

/* icon-cards: cards stack up to 980px (no gap inside a pair, 40px between pairs); smaller intro and card titles on phones */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-icon-cards__head,
    .block-icon-cards__body { margin-bottom: 1.2vw; }
}

@media (max-width: 980px) {
    .block-icon-cards__pair { display: block; }
    .block-icon-cards__card { width: 100%; }
    .block-icon-cards__head,
    .block-icon-cards__body { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-icon-cards { padding: 100px 0; }
    .block-icon-cards__heading { font-size: 32px; }
    .block-icon-cards__title { font-size: 20px; }
}

/* statement-flag: the gap under the copy follows the row width (1.5%) up to 1024px, then 30px; phones use smaller type */
@media (max-width: 980px) {
    .block-statement-flag__text { margin-bottom: 30px; }
    .block-statement-flag__copy { font-size: 30px; }
}

@media (max-width: 767px) {
    .block-statement-flag { padding: 100px 0; }
    .block-statement-flag__heading { font-size: 32px; }
    .block-statement-flag__copy { font-size: 18px; line-height: 1.5em; }
}

/* post-cards: the row padding follows the live Divi row (2.5vw in the zoom band, 2vw up to 1024px, 30px on tablets and phones) */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-post-cards__row > .container { padding: 2.5vw 0; }
}

@media (max-width: 1024px) {
    .block-post-cards__row > .container { padding: 2vw 0; }
}

@media (max-width: 980px) {
    .block-post-cards__row > .container { padding: 30px 0; }
    .block-post-cards__grid { display: block; }
    .block-post-cards__card { width: 100%; }
    .block-post-cards__picture { max-width: 360px; margin-right: auto; margin-left: auto; }
    .block-post-cards__body { max-width: 550px; margin: 0 auto; }
    .block-post-cards__title { font-size: 22px; line-height: 28.6px; }
}

@media (max-width: 767px) {
    .block-post-cards__picture { max-width: none; }
}

/* learn-more-form: live Divi section padding is 50px from 1675px up and on tablets and phones (3% in between); the
   survey buttons are 54px tall (43px up to 768px) */
@media (min-width: 1675px) {
    .block-learn-more-form { padding-top: 50px; padding-bottom: 50px; }
}

@media (min-width: 1501px) {
    .block-learn-more-form .container { padding: min(2vw, 33px) 0; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-learn-more-form .container { padding: 2.5vw 0; }
}


#form-steps .frm_submit .frm_button_submit { min-height: 54px; }

@media (max-width: 978px) {
    #form-steps .frm_submit .frm_button_submit { min-height: 43px; }
}

/* hero-photo "contain": the copy column is 58.8% of the row from 981 to 1024px, the same paddings from 768px up, 36px title on small phones */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-hero-photo--contain .block-hero-photo__copy { width: 58.8%; }
}

@media (max-width: 980px) {
    .block-hero-photo.block-hero-photo--contain { padding: 100px 0 200px; }
}

@media (max-width: 767px) {
    .block-hero-photo.block-hero-photo--contain { padding: 100px 0 0; background-color: #040001; }
    .block-hero-photo--contain .block-hero-photo__text { font-size: 20px; }
}

@media (max-width: 475px) {
    .block-hero-photo--contain .block-hero-photo__title { font-size: 36px; }
}

/* intro-heading: smaller paddings and type on phones */
@media (max-width: 767px) {
    .block-intro-heading { padding: 60px 0; }
    .block-intro-heading__heading { font-size: 32px; }
    .block-intro-heading__subheading { font-size: 22px; }
}

/* image-features: the gap under the heading is the live 1.5% of the row up to 1024px, 30px on tablets; tablets and phones stack the picture over the copy */
@media (min-width: 1025px) {
    .block-image-features__heading { margin-bottom: 20px; }
}

@media (max-width: 980px) {
    .block-image-features__row { display: block; }
    .block-image-features__picture,
    .block-image-features__copy { width: 100%; }
    .block-image-features__heading { margin-bottom: 30px; }
    .block-image-features__feature { padding-left: 45px; }
    .block-image-features__actions { padding-left: 45px; }
}

@media (max-width: 767px) {
    .block-image-features__heading { font-size: 32px; line-height: 130%; }
    .block-image-features__feature,
    .block-image-features__actions { padding-left: 0; }
}

/* industry-rows: the rows fill the screen up to 1024px; tablets and phones stack them (text over the picture on the first row) */
@media (max-width: 1024px) {
    .block-industry-rows .container { width: 100%; }
}

@media (max-width: 980px) {
    .block-industry-rows__head { padding: 25px 0; }
    .block-industry-rows__head .container { padding-bottom: 60px; }
}

@media (max-width: 768px) {
    .block-industry-rows__row,
    .block-industry-rows__row--text-left { flex-direction: column-reverse; }
    .block-industry-rows__row--text-left { flex-direction: column; }
    .block-industry-rows__picture,
    .block-industry-rows__body { width: 100%; }
    .block-industry-rows__picture img { max-width: 512px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .block-industry-rows__head { padding-bottom: 0; }
    .block-industry-rows__head .container { padding: 60px 40px; }
    .block-industry-rows__picture img { max-width: 250px; }
    .block-industry-rows__body { padding: 60px 40px; }
    .block-industry-rows__title { font-size: 32px; line-height: 120%; }
}

/* stats-flag: the flag goes under the figures up to 980px; smaller type on phones */
@media (max-width: 980px) {
    .block-stats-flag__stats,
    .block-stats-flag__flag { width: 50%; }
}

@media (max-width: 768px) {
    .block-stats-flag__row { display: block; }
    .block-stats-flag__stats,
    .block-stats-flag__flag { width: 100%; }
}

/* industry-rows from 769 to 980px: live keeps the two columns, without a gap, sharing the width in proportion to their content */
@media (min-width: 769px) and (max-width: 980px) {
    .block-industry-rows__row { justify-content: flex-start; }
    .block-industry-rows__picture { flex: 0 1 504px; width: auto; }
    .block-industry-rows__body { flex: 0 1 560px; width: auto; }
}

@media (max-width: 767px) {
    .block-stats-flag__heading { font-size: 32px; line-height: 120%; }
    .block-stats-flag__value { font-size: 32px; line-height: 130%; }
}

/* difference-list: the gap under the points is 1.5% of the row up to 1024px, 30px on tablets; the list is 18px in on phones */
@media (max-width: 1024px) {
    .block-difference-list__list { margin-bottom: 1.2vw; }
}

@media (max-width: 980px) {
    .block-difference-list__list { margin-bottom: 30px; }
}

/* difference-list: the points stack up to 768px; smaller type on phones */
@media (max-width: 768px) {
    .block-difference-list__list { gap: 40px; }
    .block-difference-list__item { width: 100%; }
}

@media (max-width: 767px) {
    .block-difference-list__list { padding: 0 0 18px 18px; }
    .block-difference-list__heading { font-size: 32px; }
    .block-difference-list__subheading { font-size: 22px; }
    .block-difference-list__title { font-size: 22px; }
    .block-difference-list__text { font-size: 18px; }
}

/* ==== lottie-hero: tablets start 300px down with 60px over and 180px under the stage; phones swap the
   animation for the title over a picture ==== */
@media (max-width: 980px) {
    .block-lottie-hero { padding: 360px 0 180px; }
    .block-lottie-hero__stage { height: 840px; }
}

@media (max-width: 767px) {
    /* The statement below overlaps the picture's last 68px. */
    .block-lottie-hero { margin-bottom: -68px; padding: 280px 0 0; }
    .block-lottie-hero__stage { display: none; }

    .block-lottie-hero__phone {
        position: relative;
        display: block;
        padding: 128px 25px;
    }

    .block-lottie-hero__phone-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .block-lottie-hero__title {
        position: relative;
        padding-bottom: 10px;
        font-family: var(--font-bold);
        font-size: 14.8vw;
        font-weight: 500;
        line-height: 100%;
        color: var(--color-cream);
    }
}

/* ==== video-statement ==== */
@media (max-width: 1440px) {
    .block-video-statement__text { font-size: 46px; }
}

@media (max-width: 980px) {
    .block-video-statement { padding: 0 0 3.75vw; }
    .block-video-statement__text { font-size: 3.13vw; }
}

@media (max-width: 767px) {
    .block-video-statement { padding: 0 25px 96px; }
    .block-video-statement .container { width: 100%; }
    .block-video-statement__text {
        margin-bottom: 40px;
        font-size: 6.9vw;
        letter-spacing: 0;
    }
    .block-video-statement__action { text-align: center; }
    .block-video-statement__button {
        padding: 13px 0.7em 13px 84px;
        font-size: 3.5vw;
    }
}

/* ==== ranked-cards: icons are 99px (80%) up to 1279px; tablets and phones ==== */
@media (max-width: 1279px) {
    .block-ranked-cards__icon { width: 124px; height: 144px; }
    .block-ranked-cards__icon-image { width: 99.19px; }
}

/* Any-width rule: live squeezes three cards into 166px columns from 768 to 980px (titles and links run out of the
   cards); here tablets show two columns. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-ranked-cards__slot { width: calc(50% - 16px); }
}

@media (max-width: 767px) {
    .block-ranked-cards { padding: 0 25px 96px; }
    .block-ranked-cards .container { width: 100%; }
    .block-ranked-cards__row { padding-bottom: 40px; }
    .block-ranked-cards__eyebrow,
    .block-ranked-cards--plain .block-ranked-cards__eyebrow {
        margin-bottom: 40px;
        font-size: 3.25vw;
    }
    /* Live shows the figure at 60% of the width from 496px down; here from the phone tier. */
    .block-ranked-cards__figure-image {
        width: 60%;
        height: auto;
        margin: 60px auto 0;
        object-fit: fill;
    }
    .block-ranked-cards__grid {
        justify-content: flex-start;
        gap: 14px;
    }
    .block-ranked-cards__slot {
        width: calc(50% - 7px);
        height: 280px;
        margin: 0;
        background: none;
        clip-path: none;
    }
    .block-ranked-cards__card {
        width: 100%;
        height: 100%;
        margin: 1px 1px 0;
        border: 1px solid var(--color-steel);
        clip-path: none;
    }
    .block-ranked-cards__link { display: contents; }
    .block-ranked-cards__icon { width: auto; height: 94px; margin-bottom: 10px; }
    .block-ranked-cards__icon-image { width: 77px; }
    .block-ranked-cards__title { display: flex; align-items: center; font-size: 4.2vw; line-height: 100%; }
    .block-ranked-cards__title::after { display: block; width: 27px; height: 27px; }
    .block-ranked-cards__text { font-size: 3.5vw; }
    .block-ranked-cards__text p { line-height: 133%; }
}

/* ==== advantage-tabs ==== */
@media (max-width: 1440px) {
    .block-advantage-tabs__panel { font-size: 38px; }
    .block-advantage-tabs__text { line-height: 46.36px; }
}

@media (max-width: 1024px) {
    .block-advantage-tabs__row { padding-bottom: 102px; }
    .block-advantage-tabs__tab { font-size: 20px; line-height: 20px; }
}

/* Any-width rule: live breaks "ADVANTAGE" mid word and wraps the tabs with a 107px line height from 768
   to 980px; here the heading scales down and the tabs stay on one row. */
@media (max-width: 980px) {
    .block-advantage-tabs__heading {
        font-size: min(120px, 12.4vw);
        line-height: 91.67%;
    }
}

/* Tablet tabs copy live: the tab row wraps with a 107px line height and the statement stays at 57px. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-advantage-tabs__tablist {
        flex-wrap: wrap;
        gap: 75px;
    }
    .block-advantage-tabs__tab { line-height: 107px; }
    .block-advantage-tabs__row { padding-bottom: 120px; }
    .block-advantage-tabs__heading { margin-bottom: 287px; }
    .block-advantage-tabs__panel { font-size: 57px; }
    .block-advantage-tabs__text { line-height: 70px; }
}

@media (max-width: 767px) {
    .block-advantage-tabs { padding: 0 25px 96px; }
    .block-advantage-tabs .container { width: 100%; }
    .block-advantage-tabs__row { padding-bottom: 0; }
    .block-advantage-tabs__desktop { display: none; }
    .block-advantage-tabs__heading {
        margin-bottom: 60px;
        font-size: 13vw;
        line-height: 100%;
        text-align: left;
    }
    .block-advantage-tabs__phone { display: block; }
    .block-advantage-tabs__item { margin-bottom: 40px; }
    .block-advantage-tabs__item:last-child { margin-bottom: 0; }
    .block-advantage-tabs__item-title {
        padding-bottom: 10px;
        font-family: var(--font-bold);
        font-size: 5.6vw;
        font-weight: 500;
        line-height: 115%;
        color: var(--color-cream);
    }
    .block-advantage-tabs__item-text {
        font-size: 4.2vw;
        line-height: 133%;
        color: var(--color-steel);
    }
}

@media (prefers-reduced-motion: reduce) {
    .block-advantage-tabs__panel.is-active { animation: none; }
}

/* ==== accordion-list "home" side variant tiers (live front page, but keep the top space from 768 to 1280) ==== */
@media (min-width: 768px) and (max-width: 1280px) {
    .block-accordion-list.block-accordion-list--home { padding: 100px 0 120px; }
}

@media (max-width: 767px) {
    .block-accordion-list.block-accordion-list--home { padding: 96px 25px 97px; }
}

@media (max-width: 475px) {
    .block-accordion-list--home .block-accordion-list__eyebrow br { display: none; }
}

/* ==== product-showcase. Tablets (768-980px) copy live: the 116px heading wraps to one word per line, the
   cards stack in one column with 364px pictures and no gap between cards. Kept different from live: the
   eyebrow stays 18px (live prints it at 7px, unreadable) and its spacing is adjusted to keep the picture
   at the live position. ==== */
@media (min-width: 768px) and (max-width: 980px) {
    .block-product-showcase__eyebrow { margin-bottom: 134px; }
    .block-product-showcase__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        margin-top: 150px;
    }
    .block-product-showcase__line { align-items: flex-start; }
    .block-product-showcase__tagline { margin-top: 36px; }
    .block-product-showcase__card { width: 100%; }
    .block-product-showcase__card-image img { width: 364px; }
    /* Live leaves an empty line under the third card (ROC Enroll). */
    .block-product-showcase__card:nth-child(3) .block-product-showcase__card-text { padding-bottom: 41px; }
}

@media (max-width: 767px) {
    .block-product-showcase { padding: 0 20px 96px; }
    .block-product-showcase .container {
        width: 100%;
        padding-bottom: 50px;
    }
    .block-product-showcase__heading {
        margin-bottom: 60px;
        font-size: 16.67vw;
        line-height: 100%;
    }
    .block-product-showcase__eyebrow {
        margin-bottom: 40px;
        font-size: 3.85vw;
        line-height: 142%;
    }
    /* Live prints the tab label at 7px on phones; kept small but readable. */
    .block-product-showcase__tab {
        width: 108px;
        height: 34px;
        padding-right: 8px;
    }
    .block-product-showcase__tab-label {
        padding-right: 20px;
        font-size: 12px;
        line-height: 14px;
    }
    .block-product-showcase__tab-label::after {
        top: 1px;
        right: 2px;
        width: 11px;
        height: 9px;
    }
    .block-product-showcase__line {
        display: block;
        margin-top: 24px;
    }
    .block-product-showcase__logo img { width: 184px; }
    .block-product-showcase__tagline {
        margin-top: 15px;
        font-size: 4.2vw;
        line-height: 128%;
        text-align: left;
    }
    .block-product-showcase__grid {
        gap: 10px 18px;
        justify-content: flex-start;
        margin-top: 40px;
    }
    .block-product-showcase__card {
        width: calc(50% - 9px);
        margin-bottom: 30px;
    }
    .block-product-showcase__card-title {
        padding-left: 25px;
        font-size: 16px;
        line-height: 16px;
    }
    .block-product-showcase__card-title--plain { padding-left: 0; }
    .block-product-showcase__card-title::before {
        width: 20px;
        height: 14px;
    }
    .block-product-showcase__card-text {
        font-size: 3.9vw;
        line-height: 133%;
    }
}

/* ==== people-rotator: live wide screens (1920px and up) have no gap under the statement; tablets stack the
   eyebrow over the statement (live prints a 7px eyebrow over the text at 768px), phones follow live ==== */
@media (min-width: 1920px) {
    .block-people-rotator__row { margin-bottom: 0; }
}

@media (max-width: 980px) {
    .block-people-rotator { padding: 60px 0 180px; }
    .block-people-rotator__row {
        display: block;
        margin-bottom: 60px;
    }
    .block-people-rotator__eyebrow {
        width: auto;
        margin-bottom: 30px;
    }
    .block-people-rotator__phrases { width: auto; }
    .block-people-rotator__phrase {
        font-size: 6.2vw;
        line-height: 112%;
    }
    .block-people-rotator__list { margin-left: 0; }
}

/* Tablets (768-980px) copy live's 57px statement at 78.5% width and its picture row position. Kept different:
   live prints the "MADE BY HUMANS" label at 7px and lets the statement overlap it, so the label stays 18px
   above the statement and the gap below is shortened so the portraits sit where they do on live. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-people-rotator__row { margin-bottom: 114px; }
    .block-people-rotator__eyebrow { margin-bottom: 0; }
    .block-people-rotator__people { margin-bottom: 150px; }
    .block-people-rotator__phrases { width: 78.5%; }
    .block-people-rotator__phrase {
        font-size: 57px;
        line-height: 64px;
    }
}

@media (max-width: 767px) {
    .block-people-rotator { padding: 0 25px 96px; }
    .block-people-rotator .container { width: 100%; }
    .block-people-rotator__row { margin-bottom: 92px; }
    .block-people-rotator__eyebrow {
        margin-bottom: 50px;
        font-size: 3.25vw;
        line-height: 20px;
    }
    .block-people-rotator__phrase {
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-people-rotator__phrase.u-hide-phone { display: none; }
    .block-people-rotator__phrase--phone.is-active { display: block; }
    .block-people-rotator__person { min-width: 0; width: 16.3vw; }
    .block-people-rotator__portrait { width: 16.3vw; }
    .block-people-rotator__name {
        font-size: 2.8vw;
        line-height: 130%;
    }
    .block-people-rotator__link {
        font-size: 3.7vw;
        line-height: 120%;
    }
}

/* ==== counter-band: from 1281px the section is at least 800px tall (counters at the bottom), below it is as tall as its
   content; wide screens use fixed paddings; up to 1024px 80px paddings ==== */
@media (min-width: 1281px) {
    .block-counter-band { min-height: 800px; }
}

@media (min-width: 1675px) {
    .block-counter-band__row { padding: 33px 0; }
}

@media (max-width: 1280px) {
    .block-counter-band { padding: 80px 0; }
}

/* Tablets (768-980px) copy live: counters stack in one column, 80% wide, the first group at 60px and the
   second at 87px. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-counter-band__row {
        display: block;
        padding: 30px 0;
    }
    .block-counter-band__slot { width: 100%; }
    .block-counter-band__heading-row + .block-counter-band__row .block-counter-band__number {
        font-size: 60px;
        line-height: 72px;
    }
}

@media (max-width: 767px) {
    .block-counter-band { padding: 60px 25px 123px; }
    .block-counter-band .container { width: 100%; }
    .block-counter-band__heading {
        font-size: 8.4vw;
        line-height: 116%;
    }
    .block-counter-band__heading-row { padding-bottom: 60px; }
    .block-counter-band__row {
        display: block;
        padding: 0;
    }
    .block-counter-band__row + .block-counter-band__row { margin-top: 30px; }
    .block-counter-band__slot { width: 100%; }
    .block-counter-band__slot + .block-counter-band__slot { margin-top: 30px; }
    .block-counter-band__number {
        height: 18.46vw;
        font-size: 13.5vw;
        line-height: 100%;
    }
    .block-counter-band__label {
        font-size: 4.2vw;
        line-height: 200%;
    }
}

/* ==== flag-statement. Any-width rule: live lays the tablet link over the flag and shrinks the statement to 24px;
   here tablets stack the flag, the statement and the link. ==== */
@media (min-width: 1501px) {
    .block-flag-statement { padding: 160px 0; }
}

@media (max-width: 1440px) {
    .block-flag-statement__text { font-size: 46px; }
}

@media (max-width: 980px) {
    .block-flag-statement {
        min-height: 0;
        padding: 100px 0;
    }
    .block-flag-statement__row {
        display: block;
        margin-top: 60px;
    }
    .block-flag-statement__text {
        width: 85%;
        font-size: 5.2vw;
    }
    .block-flag-statement__action {
        margin-top: 30px;
        text-align: right;
    }
}

/* Tablets (768-980px) copy live's 120px padding, 800px minimum height and 24px statement. Kept different:
   live lays the link over the statement, here it sits right-aligned under it. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-flag-statement {
        min-height: 800px;
        padding: 120px 0;
    }
    .block-flag-statement__row { margin-top: 100px; }
    .block-flag-statement__text {
        width: 100%;
        font-size: 24.04px;
        line-height: 27.64px;
    }
    .block-flag-statement__action { margin-top: 20px; }
}

@media (max-width: 767px) {
    .block-flag-statement { padding: 60px 25px 53px; }
    .block-flag-statement .container { width: 100%; }
    .block-flag-statement__flag { width: 100%; }
    .block-flag-statement__row { margin-top: 59px; }
    .block-flag-statement__text {
        width: 100%;
        font-size: 8.4vw;
    }
    .block-flag-statement__action {
        margin-top: 25px;
        padding-bottom: 0;
        text-align: center;
    }
    .block-flag-statement__pill {
        display: inline-block;
        padding: 10px 50px 10px 24px;
        font-size: 4.2vw;
        font-weight: 500;
    }
}

/* ==== image-band ==== */
@media (max-width: 980px) {
    .block-image-band { height: 62vw; }
}

@media (max-width: 767px) {
    .block-image-band { height: 380px; }
    .block-image-band__image--phone { display: block; }
}

/* ==== standards-marquee: the wide wrapper follows the 80% zoom band like a full width row; the static row is centred
   in its column below 1431px, full width with 40px padding from 768 to 1025px; below 768px the groups stand still,
   stacked, and the logos wrap three to a line (live does this up to 475px only and scrolls the groups on larger
   phones; Evan, 26 Oct 2026, DIGITAL-293: no moving logo rows on phones) ==== */
@media (max-width: 1500px) {
    .block-standards-marquee__wide { zoom: 0.8; }
}

@media (max-width: 1430px) {
    .block-standards-marquee__logos {
        left: auto;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 1024px) {
    .block-standards-marquee__wide { zoom: 1; }
    .block-standards-marquee__logo { padding: 0 40px; }
}

@media (max-width: 767px) {
    .page-sections > section + section.block-standards-marquee { margin-top: -40px; }
    .block-standards-marquee { background: linear-gradient(to bottom, transparent 40px, var(--color-ink) 40px); }
}

/* Tablets (768-980px): live ends the section right under the logo row. */
@media (min-width: 768px) and (max-width: 980px) {
    .block-standards-marquee__static { padding-bottom: 0; }
}

/* Label and word sizes follow the screen like live at 475px and below and stop at the desktop sizes above. */
@media (max-width: 767px) {
    .block-standards-marquee__track { width: 100%; }
    .block-standards-marquee__set { display: none; }
    .block-standards-marquee__set:first-of-type {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        margin: 0 auto;
    }
    .block-standards-marquee__viewport {
        width: calc(100% - 40px);
        margin-left: 13px;
    }
    .block-standards-marquee__group { flex: 1 1 auto; }
    .block-standards-marquee__label { font-size: min(3.5vw, 18px); }
    .block-standards-marquee__cell { height: 87px; }
    .block-standards-marquee__word { font-size: min(6.5vw, 40px); }
    .block-standards-marquee__cell img {
        max-width: 81px;
        max-height: 66px;
    }
    .block-standards-marquee__static {
        margin-top: 40px;
        padding-bottom: 41px;
    }
    .block-standards-marquee__static-label {
        width: calc(100% - 80px);
        margin-bottom: 24px;
        font-size: min(3.5vw, 18px);
    }
    .block-standards-marquee__logo img {
        max-width: 81px;
        max-height: 52px;
    }
    .block-standards-marquee__logos {
        flex-wrap: wrap;
        width: calc(100% - 40px);
        margin: 0 auto;
        border-bottom: 0;
    }
    .block-standards-marquee__logo {
        width: 33.3333%;
        height: 87px;
        padding: 0;
        border-bottom: 1px solid var(--color-steel);
    }
    .block-standards-marquee__logo:nth-child(3n + 1) { border-left: 1px solid var(--color-steel); }
}

/* ==== industry pages: tiers (live /commercial-security/, /fintech/, /ai/) ==== */
@media (min-width: 1675px) {
    :root { --section-pad: 50px; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-benefits-segments { padding: 54.375px 0 18.4px; }
    .block-benefits-segments__segments > .block-benefits-segments__heading { margin-bottom: 6.015px; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-product-trio { padding: 68.02px 0 68.66px; }
    .block-product-trio__heading { margin-bottom: 70.17px; }
    .block-product-trio__text { margin-top: 36.36px; }
    .block-product-trio__card { padding-bottom: 46.92px; }
    .block-use-case-grid { padding: 59.8px 0 71.98px; }
}

@media (max-width: 1500px) {
    .block-use-case-grid__wide { zoom: 0.8; }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .block-use-case-grid__cases { max-width: 125%; }
}

@media (max-width: 1024px) {
    .block-benefits-segments { padding: 44.72px 0 0; }
    .block-benefits-segments--wide { padding-bottom: 31px; }
    .block-use-case-grid__wide {
        width: 80%;
        margin: 0 auto;
    }
    .block-use-case-grid__cases { width: 100%; margin-top: 62px; }
    .block-use-case-grid__column { width: 48.5%; }
    .block-use-case-grid__picture img {
        width: calc(15.51vw - 5.9px);
        height: auto;
    }
}

@media (min-width: 981px) and (max-width: 1024px) {
    .block-product-trio { padding: 68px 0 68.05px; }
    .block-benefits-segments__segments {
        width: 54.14%;
        margin-left: 9.16%;
        margin-bottom: -0.28px;
    }
    .block-product-trio__heading { margin-bottom: 54.7px; }
    .block-product-trio__text {
        margin-top: 28.5px;
        margin-bottom: 50px;
    }
}

@media (min-width: 768px) and (max-width: 980px) {
    /* live: the segment rows and the use cases sit 32px in from the headings; the product cards are 500px wide at the left */
    .block-benefits-segments__segment { padding: 0 32.18px; }
    .block-use-case-grid__cases { padding: 0 32.18px; }
}

@media (max-width: 980px) {
    .block-benefits-segments { padding-top: 64px; }
    .block-benefits-segments__row { display: block; }
    .block-benefits-segments__benefits,
    .block-benefits-segments__segments,
    .block-benefits-segments--wide .block-benefits-segments__benefits,
    .block-benefits-segments--wide .block-benefits-segments__segments {
        width: 100%;
        margin-left: 0;
    }
    .block-benefits-segments__segments {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
    }
    .block-use-case-grid__cases { display: block; }
    .block-use-case-grid__column { width: 100%; }
    .block-use-case-grid__picture img {
        width: 214px;
        height: auto;
    }
    .block-product-trio__cards { display: block; }
    .block-product-trio__card {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 50px 40px 47px;
    }
    .block-product-trio__text { margin-top: 50px; }
    .block-product-trio__link { margin-top: 50px; }
}

@media (max-width: 767px) {
    .block-industry-hero__button { padding-block: 13px; }
    .block-benefits-segments { padding: 64px 0 30px; }
    .block-benefits-segments .container { width: 80%; }
    /* live: a 2fr 3fr grid with 15px gap and 15px text padding, i.e. the picture is 40% of the row minus 6px */
    .block-use-case-grid__picture { flex: 0 0 calc(40% - 6px); }
    .block-use-case-grid__picture img {
        width: 100%;
        max-width: 214px;
        height: auto;
    }
    .block-use-case-grid__case { gap: 30px; }
    .block-learn-more-form { padding: 50px 20px; }
}

/* ==== ai page blocks ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-details-video { padding: 54.39px 0 71.97px; }
    .block-check-columns { padding-bottom: 42.21px; }
}

@media (max-width: 1024px) {
    .block-check-columns__list { width: 100%; }
    .block-details-video { padding: 44.72px 0 51.19px; }
}

@media (max-width: 980px) {
    .block-check-columns__list { display: block; }
    .block-details-video__main { width: 100%; }
}

@media (max-width: 767px) {
    .block-check-columns { padding-bottom: 9px; }
}

/* ==== about page (live /about-us/) ==== */
@media (max-width: 475px) {
    .block-about-mission__point--nobr br,
    .block-about-mission__title br,
    .block-proof-band__heading br,
    .block-leadership-team__heading br,
    .block-leadership-team__text br { display: none; }
}

/* ---- about page: 1024 and below (no zoom): the lead sentence and the flag keep two columns ---- */
@media (max-width: 1024px) {
    .block-proof-band__number { height: 75px; }
}

/* ---- about page: tablets (981px down): one column; sentences centred, 18px; the full photo whole and still
   (no parallax band) ---- */
@media (max-width: 980px) {
    .block-full-photo--parallax { aspect-ratio: auto; }
    .block-full-photo--parallax img {
        transform: none;
        will-change: auto;
    }
    .block-about-mission { padding-top: 110px; }
    .block-about-mission__title { margin-bottom: 40px; }
    .block-about-mission__lead-row { margin-bottom: 0; }
    .block-about-mission__lead {
        width: calc((50% - 48px) * 1.02);
        margin-bottom: 40px;
        font-size: 18px;
        line-height: 21.6px;
    }
    .block-about-mission__animation { width: calc(50% - 48px); }
    .block-about-mission__heading-row { margin-top: 0; }
    .block-about-mission__heading { margin-bottom: 40px; }
    .block-about-mission__points { display: block; margin-bottom: 0; }
    .block-about-mission__point { width: 100%; }
    .block-about-mission__logo { margin-top: 0; }

    .block-proof-band__intro { margin-bottom: 40px; }
    .block-proof-band__counters { display: block; margin-bottom: 120px; }
    .block-proof-band__slot { width: 100%; }
    .block-proof-band__number {
        height: 92px;
        font-size: 60px;
    }
    .block-proof-band__slot--button { text-align: left; }

    .block-leadership-team__intro { margin-bottom: 40px; }
    .block-leadership-team__founders { display: block; }
    .block-leadership-team__founder {
        width: 89.6%;
        margin: 0 auto;
    }
    .block-leadership-team__quote-row { margin-bottom: 80px; }
    .block-leadership-team__members-row {
        display: flow-root; /* the last member's bottom margin stays inside the row */
    }
    .block-leadership-team__member { width: 100%; }

    .block-proof-band__closing { margin-bottom: 40px; }
    .block-chapter-video__copy { margin-bottom: 40px; }
    .block-closing-mark__heading {
        width: 53.1%;
        margin-bottom: 40px;
        font-size: 57px;
        line-height: 63.84px;
    }
    .block-closing-mark__logo { width: 38.25%; }
}

@media (min-width: 768px) and (max-width: 980px) {
    /* the live icons are 62px wide with their own heights (the square ones are stretched boxes) */
    .block-about-mission__point:nth-child(n) img {
        width: 62px;
        object-fit: contain;
    }
    .block-about-mission__point:nth-child(1) img { height: 72px; }
    .block-about-mission__point:nth-child(2) img { height: 72px; }
    .block-about-mission__point:nth-child(3) img { height: 65px; }
    .block-about-mission__point:nth-child(4) img { height: 85px; }
    /* live keeps the 116px title here, one or two words per line and 1170px tall; scaled with the width instead */
    /* live prints the rust band's headings and sentences in ink on tablets (the links stay cream) */
    .block-proof-band__heading,
    .block-proof-band__text,
    .block-proof-band__paragraphs { color: var(--color-ink); }
    .block-proof-band__paragraphs a { color: var(--color-cream); }
    .block-about-mission__title { text-align: center; }
    .block-about-mission__lead,
    .block-about-mission__point-title,
    .block-about-mission__point-text,
    .block-proof-band__text,
    .block-proof-band__paragraphs,
    .block-leadership-team__text,
    .block-chapter-video__subheading,
    .block-chapter-video__text { text-align: center; }
}

/* ---- about page: phones (767px down): type in vw like the live modules ---- */
@media (max-width: 767px) {
    .block-about-mission { padding-top: 220px; }
    .block-about-mission .container,
    .block-proof-band .container,
    .block-leadership-team .container,
    .block-chapter-video .container,
    .block-closing-mark .container { width: calc(100% - 30px); }
    .block-about-mission__title {
        margin-bottom: 60px;
        font-size: 13.8vw;
        line-height: 1.25em;
    }
    .block-about-mission__lead-row {
        display: block;
        margin-bottom: 96px;
    }
    .block-about-mission__lead {
        width: 102%;
        margin-bottom: 40px;
        font-family: var(--font-regular); /* live: the regular face with a bold weight on phones */
        font-size: 7vw;
        line-height: 1.25em;
    }
    .block-about-mission__animation {
        width: 100%;
        margin-left: 0;
    }
    .block-about-mission__heading {
        font-size: 8.4vw;
        line-height: 1.16em;
    }
    .block-about-mission__point { margin-bottom: 60px; }
    .block-about-mission__points {
        display: flow-root; /* the last point's 60px stays inside the 36px under the points */
        margin-bottom: 36px;
    }
    .block-about-mission__point-title {
        font-size: 5.6vw;
        line-height: 1.2em;
    }
    .block-about-mission__point-text {
        font-size: 4.2vw;
        line-height: 1.4em;
    }
    .block-about-mission .block-about-mission__logo {
        width: 100%;
        margin-bottom: -13px;
    }

    .block-proof-band { padding: 60px 0; }
    .block-proof-band__intro { margin-bottom: 60px; }
    .block-proof-band__heading {
        font-size: 8.4vw;
        line-height: 1.16em;
    }
    .block-proof-band__text,
    .block-proof-band__paragraphs {
        font-size: 4.2vw;
        line-height: 1.4em;
    }
    .block-proof-band__paragraphs p:not(:last-child) { padding-bottom: 1em; }
    .block-proof-band__closing { margin-bottom: 0; }
    .block-proof-band__counters { margin-bottom: 96px; }
    .block-proof-band__slot { margin-bottom: 40px; }
    .block-proof-band__slot:nth-child(3) { margin-bottom: 60px; }
    .block-proof-band__slot--button { margin-bottom: 0; text-align: center; }
    .block-proof-band__label {
        font-size: 4.2vw;
        line-height: 2em;
    }
    .block-proof-band .btn--ink { font-size: 4.2vw; }

    .block-leadership-team { padding: 60px 0 96px; }
    .block-leadership-team__intro { margin-bottom: 60px; }
    .block-leadership-team__heading {
        font-size: 8.4vw;
        line-height: 1.16em;
    }
    .block-leadership-team__text {
        font-size: 4.2vw;
        line-height: 1.4em;
    }
    .block-leadership-team__founders { margin-bottom: 40px; }
    .block-leadership-team__founder {
        width: 100%;
        margin-bottom: 40px;
    }
    .block-leadership-team__founder:last-child { margin-bottom: 0; }
    .block-leadership-team__quote-row {
        display: block;
        margin-bottom: 60px;
        padding: 40px 0;
    }
    .block-leadership-team__mark { width: 100%; margin-bottom: 40px; }
    .block-leadership-team__mark img { width: 109px; }
    .block-leadership-team__quote { font-size: 7vw; line-height: 1.25em; }
    .block-leadership-team__attribution { font-size: 4.2vw; line-height: 1.33em; }
    .block-leadership-team__quotes { width: 100%; }
    .block-leadership-team__label--exec { margin-bottom: 60px; }
    .block-leadership-team__member { margin-bottom: 40px; }
    .block-leadership-team__member:last-child { margin-bottom: 10px; }
    .block-leadership-team__members-row:last-child { margin-bottom: 0; }
    /* live: in the three person last row the last column keeps its 30px column margin too */
    .block-leadership-team__members-row:last-child .block-leadership-team__member:last-child { margin-bottom: 40px; }

    .block-chapter-video { margin-bottom: -100px; }
    .block-chapter-video__heading {
        margin-bottom: 50px;
        font-size: 8.4vw;
        line-height: 1.16em;
    }
    .block-chapter-video__subheading {
        margin-bottom: 24px;
        font-size: 6.5vw;
        line-height: 1.2em;
    }
    .block-chapter-video__text {
        font-size: 4.2vw;
        line-height: 1.4em;
    }
    .block-chapter-video__text p:not(:last-child) { padding-bottom: 1em; }
    .block-chapter-video__copy { margin-bottom: 96px; }

    .block-closing-mark { padding: 160px 0 60px; }
    .block-closing-mark__row { display: block; }
    .block-closing-mark__heading {
        width: 100%;
        margin-bottom: 50px;
        font-size: 13.8vw;
        line-height: 1.16em;
    }
    .block-closing-mark__logo {
        display: block;
        width: 100%;
    }
    .block-closing-mark__logo img { width: 85px; }
}

@media (max-width: 475px) {
    .block-proof-band__number {
        height: 65px;
        font-size: 13.5vw;
        line-height: 1em;
    }
    .block-proof-band .btn--ink {
        height: auto;
        padding: 10px 50px 10px 24px;
    }
    .block-leadership-team__bio strong {
        color: var(--color-rust);
        text-decoration: none;
    }
}

@media (min-width: 476px) and (max-width: 767px) {
    .block-proof-band__number { font-size: 60px; }
}

/* ---- industry pages, tablets (768 to 980px): the product cards are 500px wide at the left (live) ---- */
@media (min-width: 768px) and (max-width: 980px) {
    .block-product-trio__card { max-width: 500px; }
}

/* ---- /fintech/ (wide benefits): section bottoms measured on the live page ---- */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-benefits-segments--wide { padding-bottom: 71.99px; }
}

/* ---- /ai/ (centred hero, details and video): tablet and phone offsets from the live page ---- */
@media (max-width: 1024px) {
    .block-details-video__video { margin-left: 0; }
    .block-check-columns__item b { font-size: 17.2px; }
}

@media (max-width: 980px) {
    .block-check-columns { padding-bottom: 29px; }
    .block-details-video { padding: 64px 0 81px; }
}


/* ---- learn-more-form (form 2): phone rules of the live #form-steps ---- */
@media (max-width: 768px) {
    #form-steps .frm_page_num_2 .frm_first + div { margin-top: 10px; }
    #form-steps .frm_primary_label { margin-bottom: 20px; }
}

@media (max-width: 767px) {
    #form-steps .frm_opt_container { flex-direction: column; }
    #form-steps .frm_radio { max-width: 100%; }
}

@media (max-width: 475px) {
    #form-steps .frm_opt_container h3 br { display: none; }
}

/* ---- industry-hero tiers (positions measured on the live /commercial-security/, /fintech/ and /ai/) ---- */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-industry-hero {
        --hero-top: 239.8px;
        --title-gap: 20.15px;
        --sub-gap: 36px;
    }
    .block-industry-hero--gap-300 { --title-gap: 0px; }
    .block-industry-hero--centered { --hero-top: 183.8px; }
    .block-industry-hero__content { zoom: 0.8; }
}

@media (max-width: 1024px) {
    .block-industry-hero {
        --hero-top: 265.5px;
        --title-gap: 12.25px;
        --sub-gap: 20.48px;
    }
    .block-industry-hero--gap-300 { --title-gap: 0px; }
    .block-industry-hero--centered { --hero-top: 195.5px; }
    .block-industry-hero__title {
        font-size: 68px;
        line-height: 95.2px;
    }
    .block-use-case-grid__wide { zoom: 1; }
}

@media (max-width: 980px) {
    .block-industry-hero {
        --hero-top: 175px;
        --title-gap: 30px;
        --sub-gap: 30px;
        min-height: 0;
    }
    .block-industry-hero--gap-300 { --title-gap: 0px; }
    .block-industry-hero--centered { --hero-top: 105px; }
}

@media (max-width: 767px) {
    .block-industry-hero {
        --hero-top: 81.9px;
        min-height: 500px;
        padding-bottom: 0;
    }
    .block-industry-hero--gap-300 { --hero-top: 148.5px; }
    .block-industry-hero--centered {
        --hero-top: 105px;
        min-height: 0;
        padding-bottom: 82px;
    }
    .block-industry-hero__title {
        width: 312px;
        font-size: 36px;
        line-height: 50.4px;
    }
    .block-industry-hero__subtitle { width: 312px; }
}


@media (max-width: 767px) {
    .block-product-trio__link { padding-block: 13px; }
}

@media (max-width: 767px) {
    .block-product-trio {
        padding: 32.1px 0 72.2px;
    }
    .block-product-trio__heading { margin-bottom: 34.1px; }
}

@media (max-width: 1024px) {
    .block-use-case-grid { padding: 51.48px 0 51.19px; }
}

/* learn-more-form: up to 1024px the live row is the full width inside the 20px section padding */
@media (max-width: 1024px) {
    .block-learn-more-form .container { width: 100%; }
}

@media (max-width: 1024px) {
    .block-learn-more-form .container { padding: 2% 0; }
}

/* ---- industry pages, section paddings up to 980px (live Divi sections: 50px sides of the dark and rust bands) ---- */
@media (max-width: 980px) {
    .block-benefits-segments { padding: 64px 0 19px; }
    .block-use-case-grid { padding: 61px 0 80px; }
    .block-learn-more-form { padding: 50px 20px; }
}

@media (min-width: 768px) and (max-width: 980px) {
    .block-product-trio { padding: 70.77px 0 115.65px; }
    .block-product-trio__heading { margin-bottom: 63.9px; }
}

@media (max-width: 980px) {
    .block-learn-more-form .container { padding: 30px 0; }
}

/* ---- /fintech/ (wide benefits) at 981 to 1024px ---- */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-benefits-segments--wide { padding-bottom: 51.2px; }
    .block-benefits-segments--wide .block-benefits-segments__segments {
        width: 43.6%;
        margin-left: 9.16%;
    }
    .block-benefits-segments--wide .block-benefits-segments__segments > .block-benefits-segments__heading { margin-bottom: 20.76px; }
    .block-benefits-segments--wide + .block-use-case-grid { padding-bottom: 51.2px; }
}

/* ---- /fintech/ (wide benefits) up to 980px ---- */
@media (max-width: 980px) {
    .block-benefits-segments--wide { padding-bottom: 80px; }
    .block-benefits-segments--wide .block-benefits-segments__segments > .block-benefits-segments__heading { margin-bottom: 30px; }
}

@media (max-width: 980px) {
    .block-check-columns__list { left: 29px; }
}

/* ---- industry-hero photo focus (live: background-position of the Divi section) ---- */
@media (max-width: 767px) {
    .block-industry-hero__image { object-position: 59% 50%; }
    .block-industry-hero__image--phone { display: block; }
    .block-industry-hero--overlay .block-industry-hero__image { object-position: 59% 50%; }
}

/* ---- lane C subpixel pass: industry pages, phone (positions measured on the live pages) ---- */
@media (max-width: 767px) {
    .block-use-case-grid { padding-bottom: 80px; }
    .block-use-case-grid__case { margin-bottom: 24px; }
}

/* ---- lane C subpixel pass: home, phone ---- */
@media (max-width: 767px) {
    .block-product-showcase { padding-bottom: 95.86px; }
    .block-counter-band { padding-bottom: 120.74px; }
    .block-accordion-list--home .block-accordion-list__eyebrow { margin-bottom: 20px; }
    .block-accordion-list.block-accordion-list--home { padding-bottom: 96px; }
    .block-flag-statement .block-flag-statement__row { margin-top: 60px; }
    .block-counter-band__row + .block-counter-band__row,
    .block-counter-band__slot + .block-counter-band__slot { margin-top: 30.67px; }
}

/* ---- lane C subpixel pass: home, 80% zoom band (1025 to 1500px) ---- */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-video-statement { padding-bottom: 80.61px; }
    .block-ranked-cards__eyebrow { margin-bottom: 456.2px; }
    .block-ranked-cards .container { position: relative; top: -0.18px; }
    .block-ranked-cards { margin-bottom: -0.16px; }
    .block-advantage-tabs { padding-bottom: 128.08px; }
}

/* live: the ranked icons keep their natural size (124 or 125px) inside the 80% zoom band and sit on 45px of space;
   up to 1024px the icon itself is scaled to 80% */
@media (min-width: 768px) and (max-width: 1500px) {
    .block-ranked-cards__icon {
        width: auto;
        height: auto;
        padding-bottom: 45px;
    }
    .block-ranked-cards__icon-image { width: auto; max-width: 100%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .block-ranked-cards__icon-image { zoom: 0.8; }
}

/* ---- lane C subpixel pass: home, 981 to 1024px ---- */
@media (min-width: 981px) and (max-width: 1024px) {
    .block-advantage-tabs { padding-bottom: 128.3px; }
    .block-product-showcase { margin-bottom: -0.49px; }
}

/* ==== BLOCK-API-HERO (lane B): /age-estimation-api/ hero responsive rules ==== */
/* Up to 1500px the live field sits in the 80% content zoom (125% wide, scaled back). */
@media (min-width: 981px) and (max-width: 1500px) {
    .block-api-hero__desktop { width: 125%; zoom: 0.8; }
}

@media (max-width: 980px) {
    .block-api-hero { height: 817px; margin-bottom: 5.63vw; }
    .block-api-hero__desktop { display: none; }
    .block-api-hero__phone { display: block; }
    .block-api-hero__copy { gap: 0; box-sizing: border-box; padding: 281px 15px 0; }
    .block-api-hero__eyebrow { font-size: 0.97vw; }
    .block-api-hero__text { max-width: 622px; margin: 38px 0 13px; }
    .block-api-hero__button { margin: 38px 0 13px; }
    .block-api-hero:not(.block-api-hero--offer) .block-api-hero__note { margin-top: 0; }
}

@media (max-width: 767px) {
    .block-api-hero { display: flex; flex-direction: column; height: auto; margin-bottom: 0; padding: 90px 0 96px; }
    .block-api-hero__field { position: static; inset: auto; }
    .block-api-hero__phone { position: relative; }
    .block-api-hero__copy { width: 100%; margin-top: -240px; padding: 0 15px; }
    .block-api-hero__eyebrow { margin-bottom: 40px; font-size: 3.5vw; }
    .block-api-hero__text { max-width: none; margin: 20px 0 60px; }
    .block-api-hero__heading { font-size: 12vw; line-height: 100%; }
    /* body size of the phone pages (live 3.3vw, smaller than the 3.5vw legal note; ROC review DIGITAL-306) */
    .block-api-hero__subheading { max-width: none; margin: 0; font-size: 4.2vw; line-height: 135%; }
    .block-api-hero__button { margin: 0; text-align: center; }
    .block-api-hero__button .btn { height: 44px; padding: 10px 50px 10px 24px; font-size: 4.2vw; }
    /* the legal note centred under the centred button, 40px below it like the other legal notes of the page (live puts
       the NIST caption 7px under the button here) */
    .block-api-hero:not(.block-api-hero--offer) .block-api-hero__note { margin: 40px 0 60px; font-size: 3.5vw; text-align: center; }
}

/* Offer variant (live /age-estimation-api-pg/) on tablets and phones: the section grows with its content; the picture
   card sits between the eyebrow and the heading (live tablets overlap it with the heading, not copied). Phones centre the
   buttons and show the outlined one under the note. */
@media (max-width: 980px) {
    .block-api-hero.block-api-hero--offer { height: auto; margin-bottom: 0; padding-bottom: 96px; }
    .block-api-hero--offer .block-api-hero__copy { padding-bottom: 0; }
    .block-api-hero--offer .block-api-hero__eyebrow { font-size: 14px; }
    .block-api-hero--offer .block-api-hero__image { position: static; width: 487px; max-width: 100%; margin-top: 40px; }
    .block-api-hero--offer .block-api-hero__text { max-width: none; margin: 50px 0 0; }
}

@media (max-width: 767px) {
    .block-api-hero--offer .block-api-hero__copy { display: flex; flex-direction: column; }
    .block-api-hero--offer .block-api-hero__eyebrow { margin-bottom: 40px; font-size: 3.5vw; }
    .block-api-hero--offer .block-api-hero__image { width: 100%; margin: 0; }
    .block-api-hero--offer .block-api-hero__text { margin: 50px 0 0; }
    .block-api-hero__points { padding-left: 16px; }
    .block-api-hero__points li { font-size: 4.2vw; }
    .block-api-hero__price { margin-top: 22px; font-size: 4.2vw; }
    .block-api-hero--offer .block-api-hero__button { display: contents; }
    .block-api-hero--offer .block-api-hero__button .btn { align-self: center; }
    .block-api-hero--offer .block-api-hero__button .btn:first-child { order: 1; margin-top: 70px; }
    .block-api-hero--offer .block-api-hero__note { order: 2; margin-top: 54px; font-size: 3.5vw; text-align: center; }
    .block-api-hero--offer .block-api-hero__secondary { order: 3; margin-top: 61px; padding: 0 24px; }
}

/* Rust ribbon (live /age-estimation-api-pg/) on phones: 60px over and under, 25px sides, notches 36px (top) and 34px (bottom, as measured on live 26 Oct) cut at 25%. */
@media (max-width: 767px) {
    .block-trial-banner.block-trial-banner--ribbon { padding: 60px 25px; }
    /* the notches reach out of the band: beats the phone overflow clip of every page section */
    .page-sections > .block-trial-banner--ribbon { overflow: visible; }
    .block-trial-banner--ribbon .container { width: 100%; }
    .block-trial-banner--ribbon .block-trial-banner__heading { margin-bottom: 0; font-size: 8.4vw; line-height: 116%; }
    .block-trial-banner--ribbon .block-trial-banner__text { font-size: 18px; }
    .block-trial-banner--ribbon .block-trial-banner__button { margin-top: 45px; }
    .block-trial-banner--ribbon .btn { height: 44px; padding: 10px 50px 10px 24px; font-size: 4.2vw; }
    .block-trial-banner--ribbon::before,
    .block-trial-banner--ribbon::after { clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); }
    .block-trial-banner--ribbon::before { top: -35px; height: 36px; }
    .block-trial-banner--ribbon::after { bottom: -33px; width: 30%; height: 34px; }
}

@media (max-width: 430px) {
    .block-api-hero__phone { height: 450px; }
}

@media (max-width: 390px) {
    .block-api-hero__phone { height: 425px; }
}

@media (max-width: 340px) {
    .block-api-hero__phone { height: 400px; }
}


/* /age-estimation-api/ benefit list up to 1024px: the number is 54px in a 22px line, items stack with 20px gaps (live child CSS). */
@media (max-width: 1024px) {
    .block-benefit-list__item { display: flex; flex-direction: column; gap: 20px; margin-bottom: 60px; }
    .block-benefit-list__number { margin-bottom: 10.24px; font-size: 54px; line-height: 22.27px; }
    .block-benefit-list__title { margin-bottom: 20px; }
}

@media (max-width: 1024px) {
    .block-faq-accordion--api .block-faq-accordion__body { padding-bottom: 0; }
}

/* ==== BLOCK-AGE-API (lane B): tablets, 768 to 980px. Live Divi stacks the steps and plans here; its tablet quirks (a 650px code box wider
   than the screen, benefit columns at 70% of a half, cards 117px wide) are not copied. ==== */
@media (min-width: 768px) and (max-width: 980px) {
    .block-api-integration { padding-bottom: 28.8px; margin-bottom: 140px; }
    .block-api-integration__intro { display: block; margin-bottom: 80px; }
    .block-api-integration__video { display: none; }
    .block-api-integration__heading { margin-bottom: 40px; }
    .block-api-integration__steps { display: block; margin-bottom: 80px; }
    .block-api-integration__step { margin-bottom: 40px; }
    .block-api-integration__code-row { margin-bottom: 200px; }
    .block-api-integration__code-row:last-child { margin-bottom: 0; }
    .block-price-plans__plans { display: block; margin-bottom: 80px; }
    .block-price-plans__plan { margin-bottom: 3px; }
    .block-price-plans__plan:last-child { margin-bottom: 0; }
    .block-benefit-list { padding: 60px 0; }
    .block-benefit-list__items { grid-template-columns: repeat(2, calc((100% - 48px) / 2)); }
}

/* Laptops and portrait screens: three equal cards and no stagger instead of narrow 23.2vw cards (live; not copied). */
@media (min-width: 981px) and (max-width: 1279px) {
    .block-age-use-cards__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 24px;
    }
    .block-age-use-cards__card {
        min-height: 0;
        transform: none;
    }
}

/* ==== BLOCK-AGE-API (lane B): phones, from 767px down (live values: 4.2vw text, 8.4vw headings) ==== */
@media (max-width: 767px) {
    .block-api-integration,
    .block-rules-panel,
    .block-price-plans,
    .block-age-use-cards,
    .block-benefit-list,
    .block-trial-banner { box-sizing: border-box; }

    .block-api-integration .container,
    .block-benefit-list .container { box-sizing: border-box; width: 100%; padding: 0 15px; }
    .block-rules-panel .container,
    .block-price-plans .container,
    .block-age-use-cards .container,
    .block-trial-banner .container { width: 100%; }

    .block-api-integration { padding-bottom: 40px; }
    .block-api-integration__eyebrow { margin-bottom: 40px; }
    .block-api-integration__intro { display: block; margin-bottom: 100px; }
    .block-api-integration__heading { margin-bottom: 10px; font-size: 8.4vw; line-height: 116%; }
    .block-api-integration__text { margin-bottom: 60px; font-size: 4.2vw; }
    .block-api-integration__video { height: 251px; margin: 0 -15px; }
    .block-api-integration__steps { display: block; margin-bottom: 100px; }
    .block-api-integration__step { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; margin-bottom: 40px; }
    .block-api-integration__number,
    .block-api-integration__step-title { margin: 0; font-size: 5.6vw; line-height: 100%; }
    .block-api-integration__step-text { flex: 0 0 100%; margin-top: 24px; font-size: 4.2vw; }
    .block-api-integration__button { margin-bottom: 96px; text-align: center; }
    .block-api-integration .btn,
    .block-benefit-list .btn,
    .block-price-plans .btn { height: 44px; padding-top: 10px; padding-bottom: 10px; font-size: 4.2vw; }
    .block-api-integration__code-row { display: block; margin-bottom: 80px; padding: 0 10px; }
    .block-api-integration__code-row:last-child { margin-bottom: 40px; }
    .block-api-integration__code-heading { margin-bottom: 50px; padding-bottom: 10px; font-size: 8.4vw; line-height: 116%; }
    .block-api-integration__code { width: 100%; padding: 5px; border-radius: 30px; }
    .block-api-integration__code pre { padding: 10px; }
    .block-api-integration__code code { font-size: 10px; line-height: 2; }

    .block-rules-panel { padding: 0 25px 46px; }
    .block-rules-panel__background img { position: absolute; bottom: 0; left: 50%; width: 200%; max-width: none; height: auto; object-fit: initial; transform: translateX(-50%); }
    .block-rules-panel__row { display: flex; flex-direction: column-reverse; gap: 40px; padding-top: 40px; }
    .block-rules-panel__heading { margin-bottom: 10px; font-size: 8.4vw; line-height: 116%; }
    .block-rules-panel__text { width: 100%; font-size: 4.2vw; }
    .block-rules-panel__image { height: 355px; }

    .block-price-plans { padding: 96px 25px 97px; }
    .block-price-plans__heading { margin-bottom: 40px; font-size: 8.4vw; line-height: 116%; }
    /* live phones set the heading, the sub-heading and the intro flush left */
    .block-price-plans__heading,
    .block-price-plans__subheading,
    .block-price-plans__intro { text-align: left; }
    .block-price-plans__subheading { font-size: 5.6vw; line-height: 120%; }
    .block-price-plans__intro { margin-bottom: 60px; font-size: 4.2vw; }
    .block-price-plans__plans { display: block; margin-bottom: 60px; }
    .block-price-plans__plan { margin-bottom: 60px; }
    .block-price-plans__plan:last-child { margin-bottom: 0; }
    .block-price-plans__details { margin-bottom: 16px; font-size: 3.9vw; }
    .block-price-plans__name { font-size: 5.6vw; line-height: 105%; }
    .block-price-plans__price { padding-bottom: 24px; font-size: 7vw; }
    .block-price-plans__price strong { font-size: 8.4vw; }
    .block-price-plans__contact { margin-bottom: 96px; font-size: 4.2vw; }
    /* the 3.5vw phone legal size of the hero note and the NIST caption (live 15px, and 14px under "Ready to build?") */
    .block-price-plans__note { width: 100%; font-size: 3.5vw; }

    .block-age-use-cards { padding: 96px 25px; }
    .block-age-use-cards__eyebrow { margin-bottom: 40px; font-size: 3.25vw; }
    .block-age-use-cards__heading { margin-bottom: 64px; padding: 0; font-size: 8.4vw; line-height: 115%; }
    .block-age-use-cards__grid { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
    .block-age-use-cards__card { justify-content: flex-start; width: 100%; transform: none; }
    .block-age-use-cards__title { font-size: 5.6vw; line-height: 117%; }
    .block-age-use-cards__text { font-size: 4.2vw; }
    .block-age-use-cards__link { font-size: 3.7vw; line-height: 120%; }
    .block-age-use-cards__arrow,
    .block-tagline-link__arrow { width: 12px; height: auto; }
    /* centred on the text line (live keeps the arrow at the top of the line, above the text) */
    .block-age-use-cards__arrow { vertical-align: middle; }

    .block-benefit-list { padding: 0 25px 56px; }
    .block-benefit-list .container { padding: 0; }
    .block-benefit-list__eyebrow { margin-bottom: 50px; font-size: 3.5vw; }
    .block-benefit-list__heading { margin-bottom: 60px; font-size: 8.4vw; line-height: 116%; }
    .block-benefit-list__items { display: block; }
    .block-benefit-list__item { display: block; margin-bottom: 40px; }
    .block-benefit-list__number { display: none; }
    .block-benefit-list__title { margin-bottom: 8px; font-size: 4.2vw; line-height: 100%; }
    .block-benefit-list__text { padding-right: 15px; font-size: 4.2vw; line-height: 133%; }
    .block-benefit-list__item:nth-child(3) .block-benefit-list__text { padding-right: 6px; }
    .block-benefit-list__item:nth-child(4) .block-benefit-list__text { padding-right: 40px; }
    .block-benefit-list__button { margin-top: 60px; text-align: center; }

    /* "Ready to build?" stays centred like on desktop (live phones set the heading and the sentence flush left; ROC
       review DIGITAL-306 asked for heading, body and legal centred) */
    .block-trial-banner { padding: 25px 25px 96px; }
    .block-trial-banner__image { margin-bottom: 40px; }
    .block-trial-banner__heading { margin-bottom: 10px; font-size: 8.4vw; line-height: 116%; }
    .block-trial-banner__text { margin-bottom: 40px; font-size: 4.2vw; }
    .block-trial-banner__button { text-align: center; }
    .block-trial-banner__note { font-size: 3.5vw; }
}

@media (min-width: 1501px) {
    .block-faq-accordion--api .block-faq-accordion__body { padding-bottom: 1.2%; }
}
/* faq-list: row padding and section padding follow the live Divi rules (3% of the width, 50px from 1675px and up to 980px) */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-faq-list .container { padding: 2.5vw 0; }
}

@media (max-width: 1024px) {
    .block-faq-list .container { padding: 2vw 0; }
}

@media (min-width: 1675px) {
    .block-faq-list { padding-top: 50px; padding-bottom: 50px; }
}

@media (max-width: 980px) {
    .block-faq-list { padding-top: 50px; padding-bottom: 50px; }
    .block-faq-list .container { padding: 30px 0; }
}

@media (max-width: 767px) {
    .block-faq-list__heading { margin-bottom: 72px; }
}

/* ==== /roc-watch-book-a-demo/ rows (demo-hero, image-text-split "list", stats-counters "ink", testimonial-carousel
   "side", button-checklist): live renders them at the 80% zoom from 1025 to 1500px. Any-width rule: live drops the
   zoom from 981 to 1024px, where the rows run edge to edge and the form and the counters overflow the screen; here
   the zoomed layout carries on down to 981px, at least 20px from each screen edge (125vw - 50px at the zoom; live
   keeps that room down to 1096px). ==== */
@media (min-width: 981px) and (max-width: 1500px) {
    .block-demo-hero .container,
    .block-image-text-split--list .block-image-text-split__row,
    .block-stats-counters--ink .block-stats-counters__row,
    .block-stats-counters--ink .block-stats-counters__footnote,
    .block-testimonial-carousel--side .block-testimonial-carousel__main,
    .block-button-checklist .container {
        width: 125%;
        zoom: 0.8;
    }
    .block-demo-hero .container,
    .block-image-text-split--list .block-image-text-split__row,
    .block-stats-counters--ink .block-stats-counters__footnote { max-width: min(1320px, 125vw - 50px); }
    .block-stats-counters--ink .block-stats-counters__row { max-width: min(1180px, 125vw - 50px); }
    .block-testimonial-carousel--side .block-testimonial-carousel__main { max-width: min(1120px, 125vw - 50px); }
}

/* live child theme rule for the first text module of a page: the hero title is 68px from 476 to 1279px */
@media (min-width: 476px) and (max-width: 1279px) {
    .block-demo-hero .block-demo-hero__title { font-size: 68px; }
}

/* live child theme rule: the quote cards lose their bottom padding from 1024 to 1440px */
@media (min-width: 1024px) and (max-width: 1440px) {
    .block-testimonial-carousel--side .block-testimonial-carousel__slide { padding-bottom: 0; }
}

@media (min-width: 1675px) {
    .block-stats-counters--ink .block-stats-counters__footnote { padding-top: 33px; }
    .block-testimonial-carousel--side .block-testimonial-carousel__main { padding: 33px 0; }
}

/* ==== demo-hero, tablets and phones (980px and below): one column. Tablets (768 to 980px, live squeezes three columns
   and runs the title and the form off the screen) keep the desktop sizes in the 80% column: title, logo and intro,
   badges, form, points. Phones follow live: title, intro, badges, the form across the screen, then the logo over the
   points; vw sizes like live. ==== */
@media (max-width: 980px) {
    .block-demo-hero .container {
        flex-direction: column;
        align-items: stretch;
        width: var(--container-width);
        max-width: none;
        margin-bottom: 60px;
    }
    .block-demo-hero__main,
    .block-demo-hero__side { display: contents; }
    .block-demo-hero__title { order: 1; }
    .block-demo-hero__logo { order: 2; }
    .block-demo-hero__intro { order: 3; }
    .block-demo-hero__badges {
        order: 4;
        margin: 0 0 48px;
        padding-bottom: 0;
    }
    .block-demo-hero__form {
        order: 5;
        margin-bottom: 60px;
    }
    .block-demo-hero__features { order: 6; }
}

@media (max-width: 767px) {
    .block-demo-hero { padding-top: 140px; }
    .block-demo-hero .container {
        width: 100%;
        margin-bottom: 0;
    }
    .block-demo-hero__title {
        margin: 0 20px 20px;
        font-size: 14.4vw;
    }
    .block-demo-hero__intro {
        padding: 0 20px;
        font-size: 7vw;
    }
    .block-demo-hero__badges {
        order: 3;
        align-items: stretch;
        margin: 0;
        padding: 0 20px;
    }
    /* live module gaps: 30px under the first two badges, 60px under the last (it sets the row height) */
    .block-demo-hero__badge { margin-bottom: 30px; }
    .block-demo-hero__badge:last-child { margin-bottom: 60px; }
    .block-demo-hero__badge-label,
    .block-demo-hero__badge-image { font-size: 2vw; }
    .block-demo-hero__form { order: 4; }
    /* The logo sits in its own heading line over the points (live phone text module). */
    .block-demo-hero__logo {
        order: 5;
        padding: 0 20px 10px;
        font-family: var(--font-bold);
        font-size: 4.2vw;
        line-height: 133%;
    }
    .block-demo-hero__logo img { margin-bottom: 24px; }
    .block-demo-hero__features {
        padding: 0 20px 60px;
    }
    .block-demo-hero__feature-title,
    .block-demo-hero__feature-text { font-size: 4.2vw; }
}

/* ==== image-text-split "list" (live /roc-watch-book-a-demo/): tablets and phones stack the picture (as uploaded) over
   the text; phones use the 20px page padding and vw sizes, and drop the line break in the copy. ==== */
@media (max-width: 980px) {
    .block-image-text-split--list { padding: 0; }
    .block-image-text-split--list .block-image-text-split__row { width: var(--container-width); }
    .block-image-text-split--list .block-image-text-split__media { margin-bottom: 30px; }
    .block-image-text-split--list .block-image-text-split__media img { height: auto; }
}

@media (max-width: 767px) {
    .block-image-text-split--list .block-image-text-split__row {
        width: 100%;
        margin-bottom: 96px;
        padding: 0 20px;
    }
    .block-image-text-split--list .block-image-text-split__media { margin-bottom: 40px; }
    .block-image-text-split--list .block-image-text-split__heading { font-size: 8.4vw; }
    .block-image-text-split--list .block-image-text-split__text p {
        margin-bottom: 30px;
        font-size: 4.2vw;
    }
    .block-image-text-split--list .block-image-text-split__text br { display: none; }
    .block-image-text-split--list .block-image-text-split__text li {
        font-size: 4.2vw;
        line-height: 150%;
    }
}

/* ==== stats-counters "ink" (live /roc-watch-book-a-demo/): tablets keep the three columns (60px figures, 18px labels,
   left aligned like live); phones stack the counters centred with vw sizes and the 260px footnote. ==== */
@media (max-width: 980px) {
    .block-stats-counters.block-stats-counters--ink { padding: 0; }
    .block-stats-counters--ink .block-stats-counters__row,
    .block-stats-counters--ink .block-stats-counters__footnote.container { width: var(--container-width); }
    .block-stats-counters--ink .block-stats-counters__counter { text-align: left; }
    .block-stats-counters--ink .block-stats-counters__figure { justify-content: flex-start; }
    .block-stats-counters--ink .block-stats-counters__label { font-size: 18px; }
}

@media (max-width: 767px) {
    .block-stats-counters--ink .block-stats-counters__row,
    .block-stats-counters--ink .block-stats-counters__footnote.container { width: 100%; }
    .block-stats-counters--ink .block-stats-counters__counter,
    .block-stats-counters--ink .block-stats-counters__col:last-child .block-stats-counters__counter {
        max-width: 100%;
        margin-bottom: 30px;
        text-align: center;
    }
    /* live 72px figure box; any-width rule: it grows with the vw number from about 400px (live runs the number over
       the label from about 500 to 767px) */
    .block-stats-counters--ink .block-stats-counters__figure,
    .block-stats-counters--band.block-stats-counters--ink .block-stats-counters__figure {
        height: max(72px, 13.5vw + 19px);
        margin-bottom: 0;
        justify-content: center;
    }
    .block-stats-counters--ink .block-stats-counters__number { font-size: 13.5vw; }
    .block-stats-counters--ink .block-stats-counters__label { font-size: 4.2vw; }
    .block-stats-counters--ink .block-stats-counters__footnote {
        margin-bottom: 60px;
        padding: 0 20px 60px;
        font-size: 2.8vw;
    }
    .block-stats-counters--ink .block-stats-counters__footnote p {
        max-width: 260px;
        margin: 0 auto;
    }
}

/* ==== testimonial-carousel "side": tablets and phones put the quote mark over the quotes (90px apart); phones use
   the 20px page padding, a 110px mark and vw sizes. ==== */
@media (max-width: 980px) {
    .block-testimonial-carousel.block-testimonial-carousel--side { padding-bottom: 50px; }
    .block-testimonial-carousel--side .block-testimonial-carousel__main { width: var(--container-width); }
    .block-testimonial-carousel--side .block-testimonial-carousel__body {
        flex-direction: column;
        align-items: stretch;
        gap: 60px;
    }
    .block-testimonial-carousel--side .block-testimonial-carousel__mark { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    .block-testimonial-carousel--side .block-testimonial-carousel__main {
        width: 100%;
        padding: 0 20px;
    }
    .block-testimonial-carousel--side .block-testimonial-carousel__mark { width: 110px; }
    .block-testimonial-carousel--side .block-testimonial-carousel__mark img { width: 100%; }
    .block-testimonial-carousel--side .swiper-wrapper { min-height: 400px; }
    .block-testimonial-carousel--side .block-testimonial-carousel__quote {
        font-family: var(--font-light);
        font-size: 7vw;
    }
    .block-testimonial-carousel--side .block-testimonial-carousel__attribution {
        font-size: 4.2vw;
        line-height: 120%;
    }
}

/* ==== button-checklist: tablets keep the two columns (57px heading, live tablet), phones stack the centred button,
   the centred heading and the list. ==== */
@media (max-width: 980px) {
    .block-button-checklist { padding: 50px 0; }
    .block-button-checklist .container { max-width: 840px; }
    .block-button-checklist__heading { font-size: 57px; }
}

@media (max-width: 767px) {
    .block-button-checklist { padding: 60px 20px; }
    .block-button-checklist .container {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .block-button-checklist__action,
    .block-button-checklist__text { width: 100%; }
    .block-button-checklist__action {
        margin-bottom: 60px;
        text-align: center;
    }
    .block-button-checklist__button.btn {
        height: auto;
        padding: 17px 45px 17px 35px;
        font-size: 3.7vw;
    }
    .block-button-checklist__heading {
        margin-bottom: 40px;
        font-size: 5.6vw;
        text-align: center;
    }
    .block-button-checklist__list { margin-bottom: 60px; }
    .block-button-checklist__list li { font-size: 4.2vw; }
}

@media (max-width: 475px) {
    .block-button-checklist__button.btn {
        height: 44px;
        padding: 10px 50px 10px 24px;
        font-size: 4.2vw;
    }
}

/* ==== Tall portrait desktop screens (a 1080 x 1920 monitor turned on its side, 2:3 or taller, desktop layout).
   Sections sized to one screen use a 4:3 screen (--screen-h: 75vw) instead of the full height, the front page
   Lottie stage keeps its 1920 x 1080 proportion (live: a fixed 1080px stage under an SVG of 48.6vw), and the blinds
   section is as tall as its content (main.js starts the wipe when its bottom reaches the screen bottom instead of
   its top reaching the top). Landscape screens and tablets (1024 x 1366 is 0.75) keep the live layout.
   Header band titles: assets/css/utility.css. ==== */
@media (min-width: 981px) and (max-aspect-ratio: 2/3) {
    :root { --screen-h: 75vw; }
    .block-rich-text--full-height { min-height: 0; }
    .block-lottie-hero__stage { height: 56.25vw; }
}

/* ==== Header grid, second round (client QA #38, 1025 to 1500px only) ====
   The header row is 80% of the viewport on screen. A zoomed (0.8) column is that wide at 100vw in css px, so every column cap
   that was a fixed px or 112.5vw/125vw value is clamped to it. Type that sat in the wider column scales with it
   (the longest word of each heading must fit its column, no mid-word break). */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-use-case-grid__cases { max-width: min(calc(var(--container-max) / 0.8), 100vw); }
    .block-product-tabs--capability .block-product-tabs__panels,
    .block-product-tabs--capped .block-product-tabs__panels { max-width: min(1220px, 100vw); }
    .block-testimonial-carousel--narrow .block-testimonial-carousel__main { max-width: min(1220px, 100vw); }
    .block-testimonial-carousel--side .block-testimonial-carousel__main { max-width: min(1120px, 100vw); }
    .block-stats-counters--ink .block-stats-counters__footnote { max-width: min(1320px, 100vw); }
    .block-stats-counters--ink .block-stats-counters__row { max-width: min(1180px, 100vw); }
    .container.block-badge-tabs__wide { max-width: min(1400px, 100vw); }
    .block-hero-split-image--flush-left .block-hero-split-image__row,
    .block-video-split__row { max-width: min(calc(var(--container-max) / 0.8), 100vw); }
    .legal-hub__row .legal-hub__wrap { padding-left: 12.5vw; padding-right: 12.5vw; }

    .block-closing-mark__heading { font-size: min(116px, 9.5vw); line-height: min(145px, 11.9vw); }
    .block-headline-tags__heading { font-size: min(160px, 13.4vw); }
    .block-checklist-card:not(.block-checklist-card--noted) .block-checklist-card__heading { font-size: min(57px, 4.3vw); }
    .block-callout-columns__title { font-size: min(33px, 2.9vw); }
    .block-callout-columns { padding-bottom: 240px; }
    .block-proof-band__number { font-size: min(87px, 7.2vw); }
    .block-feature-cards-grid--matched .block-feature-cards-grid__row:nth-of-type(2) { margin-bottom: 240px; }
}

/* ==== Review fixes at 1025 to 1500px ====
   Accelerate the Investigation (/ai-gun-detection/): the last row rises 100px into place while scrolling, so the section
   keeps 80px under it and the last line of copy stays above the image that follows.
   Unify the Evidence Workflow (/roc-evidence/): the section content (z-index 2) sat under the art (z-index 50), so a cube
   covered the "Collaborate" tag. The content now sits above the art, so the filled tag strip hides the cube as designed. ==== */
@media (min-width: 1025px) and (max-width: 1500px) {
    .block-definition-rows--cream-open { padding-bottom: 80px; }
    .block-headline-tags--art-motion .block-headline-tags__inner { z-index: 52; }
}