/*
Theme Name: ROC
Theme URI:
Author: Geeks360
Author URI: https://geeks360.net
Description: Custom ACF-based WordPress theme for ROC. Pages are built with an ACF Flexible Content field (page_sections); global header and footer are managed from the Theme Settings options page.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: roc
*/

/* ==========================================================================
   FONTS - the live site's own FK Grotesk files (same outlines = same rendering).
   One family per file, exactly like live roc.ai ("FK Grotesk 400" etc.), so a
   family + weight pair renders the same glyphs (including the browser's faux
   bold where live asks for weight 700 on a single-weight family).
   ========================================================================== */
@font-face { font-family: "FK Grotesk 300"; src: url("assets/fonts/FKGrotesk-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "FK Grotesk 400"; src: url("assets/fonts/FKGrotesk-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "FK Grotesk 500"; src: url("assets/fonts/FKGrotesk-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "FK Grotesk 700"; src: url("assets/fonts/FKGrotesk-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "FK Grotesk 900"; src: url("assets/fonts/FKGrotesk-Black.ttf") format("truetype"); font-display: swap; }
/* Poppins: only the live /abis/ phone copy of the numbered items uses it (the
   site's et-fonts file, same family name as live). */
@font-face { font-family: "Poppins Regular"; src: url("assets/fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 400; src: url("assets/fonts/Poppins-400-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 500; src: url("assets/fonts/Poppins-500-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; src: url("assets/fonts/Poppins-600-latin.woff2") format("woff2"); font-display: swap; }

/* ==========================================================================
   DESIGN TOKENS - values measured on live roc.ai (baseline/tokens-observed.json)
   ========================================================================== */
:root {
    /* Colors */
    --color-ink: #111114;        /* primary text + dark sections */
    --color-cream: #f4f0e7;      /* page background, light sections */
    --color-rust: #c7493a;       /* brand accent, CTAs */
    --color-rust-dark: #761b10;  /* CTA hover */
    --color-steel: #abb4bd;      /* dividers, muted text on dark */
    --color-slate: #676c79;      /* dates, meta */
    --color-navy: #090e18;       /* footer / deep sections */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-ink-soft: #111111;   /* footer copyright (live module colour) */
    --color-graphite: #2f3233;   /* dark time bar (live /abis/ latent matching) */
    --color-rust-muted: #ae4033; /* Divi global button colour (live /abis/ View More) */
    --color-frost: #eee;         /* Divi default table border (live FAQ answer tables) */
    --color-table-head: #555;    /* Divi default table heading colour */
    --color-charcoal: #24252a;   /* card on ink (live /roc-access/ capability card) */
    --color-near-black: #080808; /* dark band behind the live /latent-fingerprint-for-law-enforcement/ hero and intro */
    --color-poppy: #e02826;      /* short line under the live Blog Posts heading */
    --color-ghost: #313436;      /* huge watermark word on ink (live /tattoo-recognition/ AMERICA'S FINEST) */
    --color-rule-grey: #858585;  /* phone group lines of the demo request form (live /roc-watch-book-a-demo/) */
    --color-text: var(--color-black);
    --color-bg: var(--color-cream);

    /* One screen for sections sized to the viewport; tall portrait desktops use a 4:3 screen instead (media.css, "Tall portrait"). */
    --screen-h: 100vh;

    /* Typography: one family per weight file, see FONTS above */
    --font-fallback: Helvetica, Arial, Lucida, sans-serif;
    --font-light: "FK Grotesk 300", var(--font-fallback);
    --font-regular: "FK Grotesk 400", var(--font-fallback);
    --font-medium: "FK Grotesk 500", var(--font-fallback);
    --font-bold: "FK Grotesk 700", var(--font-fallback);
    --font-black: "FK Grotesk 900", var(--font-fallback);
    --font-poppins: "Poppins Regular", var(--font-fallback);
    --font-poppins-web: "Poppins", var(--font-fallback); /* the Poppins 400 and 500 faces live loads on landing pages */
    --section-pad: 3%;           /* live Divi section padding of the rust survey band */
    --fs-body: 16px;
    --lh-body: 1.5em;

    /* Layout */
    --container-width: 80%;
    --container-max: 1340px;
    --radius-pill: 100px;
    --section-overlap: -1px;     /* live sections overlap by 1px to hide subpixel seams */
}

/* ==========================================================================
   BASE - minimal reset; every visual rule below is measured from the live site
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-regular);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: inherit; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Content helper from the live copy: a spaced "fi" pair (no ligature). */
.letter { letter-spacing: 1px; }

/* Tag Manager noscript frame (inc/tracking-tags.php): never shown. */
.roc-gtm-frame { display: none; visibility: hidden; }

/* Visually hidden, still read by screen readers. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   SITE HEADER - live default header (Divi Theme Builder layout 20926), see
   docs/header-spec.md. Desktop bar here; tablet/phone bar and the drill menu
   switches in media.css (burger at 980px and below).
   ========================================================================== */
/* The header overlays the page at the top of the document (it scrolls away with it);
   JS adds .sticky while scrolling back up (fixed + slide in). overflow-x: clip keeps
   the full-width dropdown band from widening the document. */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    overflow-x: clip;
}

/* A fixed header cannot widen the document, and with the slide transform overflow-x: clip
   would clip the dropdown to the bar (shown but not hoverable). */
.site-header.sticky {
    position: fixed;
    overflow-x: visible;
    animation: site-header-slide 0.5s linear both;
}

@keyframes site-header-slide {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.site-header__bar {
    background-color: var(--color-cream);
    border-bottom: 1px solid var(--color-ink);
}

.site-header__row {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    width: var(--container-width);
    max-width: var(--container-max);
    margin: 0 auto;
}

/* hardcoded: the live row has a clearfix ::after that counts as a third flex item, so
   space-between gives the nav half of the subpixel free space; kept for identical text
   positions (1/64px, visible in anti-aliasing). */
.site-header__row::after { content: ""; }

.site-header__brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 22.75%; /* hardcoded: live 1/4 column and 3% gutter (same subpixel layout) */
    margin-right: 3%;
}

.site-header__nav {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    width: 74.25%; /* hardcoded: live 3/4 column */
}

.site-nav__menu {
    display: flex;
    gap: 50px;
    margin: 0 -11px; /* hardcoded: live menu overhang, the pill ends flush with the row */
    list-style: none;
}

/* Landing header (live /age-estimation-api-pg/): only the Contact Us pill, centred in the 82px menu bar the full menu
   gives the other pages. */
.site-header--landing .site-nav__menu { min-height: 82px; align-items: center; }

.site-header--landing .site-nav__item { padding: 0; }

/* Logo-only header (live /roc-watch-book-a-demo/, Theme Builder layout 23573): the logo alone in the 80px bar, on a
   1320px row. Any-width rule: the logo stays 20px from the screen edge where live runs it into the edge (768 to 1320px). */
.site-header--logo .site-header__row {
    width: min(1320px, 100% - 40px);
    max-width: none;
}

.site-header--logo .site-header__brand {
    width: auto;
    min-height: 79px;
    margin-right: 0;
}

.site-nav__item {
    position: relative;
    display: flex;
    padding: 20px 0;
    cursor: pointer;
}

.site-nav__parent,
.site-nav__link,
.site-nav__cta,
.site-nav__dropdown a {
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-ink);
}

.site-nav__parent,
.site-nav__link,
.site-nav__dropdown a {
    display: block;
    width: fit-content;
    padding: 10px 0;
}

/* Hover underline (keyboard focus shows it too). */
.site-nav__item:not(.site-nav__item--cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 15px;
    width: 0;
    height: 2px;
    background-color: var(--color-ink);
    transition: all 0.5s ease-out;
}

.site-nav__item:not(.site-nav__item--cta):hover::after,
.site-nav__item:not(.site-nav__item--cta):focus-within::after { width: 100%; }

/* Contact Us pill. */
.site-nav__item--cta {
    align-self: center;
    padding: 0 11px;
}

.site-nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 24px;
    border-radius: 300px;
    background-color: var(--color-rust);
    color: var(--color-cream);
    transition: all 0.4s ease-in-out;
}

.site-nav__cta:hover { background-color: var(--color-ink); }

/* Dropdown: fades in 0.3s after hover (0.7s), fades out the same way; a full-width
   cream band behind the list. */
.site-nav__dropdown {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    width: 240px;
    margin-top: 2px;
    list-style: none;
    background-color: var(--color-cream);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease-in-out 0.3s, visibility 0.7s ease-in-out 0.3s;
}

.site-nav__dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -75vw;
    z-index: -1;
    width: 200vw;
    background-color: var(--color-cream);
}

/* Invisible bridge over the 1px gap between the item and the dropdown, so the pointer
   keeps the item hovered on its way down. */
.site-nav__dropdown::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 2px;
}

.site-nav__item:hover > .site-nav__dropdown,
.site-nav__item:focus-within > .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
}

/* Escape closes a keyboard-opened dropdown until focus or the pointer leaves it. */
.site-nav__item.is-dismissed > .site-nav__dropdown {
    opacity: 0;
    visibility: hidden;
}

/* Submenu headings (menu items with the class "blank" and no URL): grey text, 14px at every
   desktop width, no hover (live "menu slate options" snippet). */
.site-nav__heading {
    width: fit-content;
    padding: 10px 0;
    font-family: var(--font-medium);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-slate);
    cursor: default;
}

.site-nav__dropdown li:first-child a,
.site-nav__dropdown li.site-nav__heading:first-child { margin-top: 20px; }
.site-nav__dropdown li:last-child a { margin-bottom: 20px; }

.site-nav__dropdown a:hover,
.site-nav__dropdown .is-current a { color: var(--color-rust); }

/* Burger (shown at 980px and below): the live 16px pixel icon scaled up, with the
   live Divi offsets (3% translate, 2px drop). */
.site-header__burger {
    display: none;
    width: 44px;
    height: 32px;
    padding: 0 6px;
    transform: translateY(3%);
}

.site-header__burger::before {
    content: "";
    position: relative;
    top: 2px;
    display: block;
    width: 32px;
    height: 32px;
    background: url("assets/images/menu-burger.png") center / 32px no-repeat;
}

/* Drill menu (mobile overlay): parent list, tap a parent to slide its children in.
   Base values are the tablet ones (476 to 980px); phones override in media.css. */
.site-drill {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 120vh;
    overflow: hidden;
    background-color: var(--color-ink);
}

.site-drill__header {
    position: relative;
    z-index: 999;
    padding: 30px 37px 0;
}

.site-drill__back {
    display: none;
    padding: 1px 6px;
    font-size: 32px;
    line-height: normal;
    color: var(--color-white);
}

.site-drill.is-child .site-drill__back { display: inline-block; }

.site-drill__back svg {
    display: inline;
    width: 32px;
    height: 32px;
    max-width: none;
}

.site-drill__close {
    position: absolute;
    top: 30px;
    right: 88px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    padding: 1px 6px;
}

.site-drill__close svg {
    width: 32px;
    height: 32px;
    max-width: none;
}

.site-drill__screen {
    position: absolute;
    top: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
    padding: 120px 37px 0;
    transition: transform 0.35s ease;
}

.site-drill__screen--parent { left: 0; }
.site-drill__screen--child { left: 100%; }

.site-drill.is-child .site-drill__screen { transform: translateX(-100%); }

.site-drill__list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 120px 37px 0;
    border-top: 3px solid transparent;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* hardcoded: live mobile menu shadow */
    list-style: none;
}

/* Revealed like jQuery slideDown when the menu opens (JS animates height). */
.site-drill__list.is-revealing { overflow: hidden; }

.site-drill__parent,
.site-drill__link,
.site-drill__sublist a {
    display: block;
    width: 100%;
    padding: 0;
    font-family: var(--font-medium);
    font-size: 24px;
    font-weight: 500;
    line-height: 54px;
    color: var(--color-cream);
    text-align: left;
}

/* Live parent rows carry a faint tint and a 1px faint line on tablets (hardcoded:
   Divi mobile menu values), and dim while touched. */
.site-drill__parent {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    background-color: rgba(0, 0, 0, 0.03);
}

.site-drill__parent,
.site-drill__link {
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.site-drill__parent:hover,
.site-drill__link:hover { opacity: 0.7; }

.site-drill__title {
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 400;
    line-height: 54px;
    color: var(--color-steel);
    text-transform: uppercase;
}

.site-drill__sublist {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.site-drill__sublist a[aria-current="page"] { color: var(--color-rust); }

/* Submenu headings in the phone menu: from 476px up live shows them like the links
   (same size and colour, no link); the grey caps version is phone only (media.css). */
.site-drill__heading {
    font-family: var(--font-medium);
    font-size: 24px;
    font-weight: 500;
    line-height: 54px;
    color: var(--color-cream);
}

/* ==========================================================================
   BACK TO TOP - live Divi scroll-to-top arrow (Divi style-static, every width):
   40px box at the right screen edge 125px over the bottom, 40% black, rounded on
   the left, white 30px carrot; slides in from the right past 800px of scroll and
   back out under it (1s, Divi fadeInRight / fadeOutRight); no hover change.
   main.js toggles .is-visible / .is-leaving; at rest it is not rendered.
   ========================================================================== */
.back-to-top {
    display: none;
    position: fixed;
    right: 0;
    bottom: 125px;
    z-index: 99998; /* under the header, so the open phone menu covers it */
    margin: 0;
    padding: 5px;
    border: 0;
    border-radius: 5px 0 0 5px;
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--color-white);
    cursor: pointer;
}

.back-to-top.is-visible,
.back-to-top.is-leaving {
    display: block;
}

.back-to-top.is-visible {
    animation: back-to-top-in 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.back-to-top.is-leaving {
    opacity: 0;
    animation: back-to-top-out 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -4px;
}

.back-to-top__icon {
    display: block;
    width: 30px;
    height: 30px;
    fill: currentColor;
}

@keyframes back-to-top-in {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes back-to-top-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* ==========================================================================
   SITE FOOTER - live footers (Divi Theme Builder layouts 20927 and 22466), see
   docs/footer-spec.md. Desktop here; tablet (980px and below) and the phone
   reflow (767px and below: offices + icons, mail + phone, copyright) in media.css.
   ========================================================================== */
.site-footer {
    /* 1.5px as live: 1px at DPR 1, 1.5px on retina screens */
    border-top: 1.5px solid var(--color-ink);
    background-color: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-light);
    font-size: 14px;
    font-weight: 300;
    line-height: 19.6px;
}

/* The page's last section runs straight into the footer (live /age-estimation/). */
.site-footer--no-line { border-top: 0; }

.site-footer__inner {
    width: var(--container-width);
    max-width: var(--container-max);
    margin: 0 auto;
    padding-top: 100px;
}

/* Top row: five menu columns + offices (live 6-column row: 16.667% columns, no gaps). */
.site-footer__top { display: flex; }

.site-footer__col { width: 16.667%; }

/* The live CAPABILITIES list stops at 80% of its column, so the long licence plate item wraps. */
.site-footer__col--narrow .site-footer__menu { width: 80%; }

.site-footer__heading,
.site-footer__office {
    margin-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-transform: uppercase;
}

.site-footer__heading { color: var(--color-rust); }

.site-footer__menu {
    list-style: none;
    font-weight: 500;
}

/* Underlined on the item and on the link, like live: the two overlapping underlines give the
   exact anti-aliased line ends of live. */
.site-footer__menu li {
    margin-bottom: 7px;
    text-decoration: underline;
}

.site-footer__menu a { text-decoration: underline; }

/* One blank line under the item (live "Press Releases": 1 line + 7px). */
.site-footer__menu .site-footer__menu-gap { margin-bottom: calc(1lh + 7px); }

/* Every address keeps its 40px gap, the last one included (it sets the row height). */
.site-footer__address { margin-bottom: 40px; }

/* Live text modules turn #111111 on hover (300ms): only the office blocks show it. */
.site-footer__office,
.site-footer__address { transition: color 300ms ease 0ms; }

.site-footer__office:hover,
.site-footer__address:hover { color: var(--color-ink-soft); }

/* Bottom row: copyright, email, phone, icons in the first, second, third and sixth cell of the live
   6-column row (16.667% columns, no gaps).
   hardcoded: live row padding is 2% of the full-width section = 2.5% of this 80% container, at most 33px. */
.site-footer__bottom {
    display: grid;
    grid-template-columns: repeat(6, 16.667%);
    padding: min(2.5%, 33px) 0 80px;
}

.site-footer__contact { display: contents; }

.site-footer__copy {
    font-family: var(--font-medium);
    font-weight: 500;
    color: var(--color-ink-soft);
}

.site-footer__mail a { text-decoration: underline; }

.site-footer__mail a:hover,
.site-footer__tel a:hover { color: var(--color-rust); }

.site-footer__social {
    display: flex;
    grid-column: 6;
    gap: 24px;
}

/* Icons may shrink when the cell is narrower than 3 icons + 2 gaps. */
.site-footer__social a {
    min-width: 0;
    line-height: 0;
}

.site-footer__social img { width: 24px; }

/* Red bar footer (live /ztc/): 76px bar, centred line of copyright + links. */
.site-footer--bar {
    display: flex;
    align-items: center;
    height: 76px;
    padding: min(3%, 50px) 0;
    border-top: 0;
    background-color: var(--color-rust);
    color: var(--color-cream);
    font-family: var(--font-regular);
    font-weight: 400;
    line-height: 142%;
    letter-spacing: 0.25px;
}

.site-footer__bar {
    display: flex;
    justify-content: center;
    gap: 96px;
    width: var(--container-width);
    max-width: var(--container-max);
    margin: 0 auto;
}

.site-footer__bar a { text-decoration: underline; }

/* Contact row footer (live /roc-watch-book-a-demo/, Theme Builder layout 23574): copyright, email, phone and icons in
   four equal cells of a 740px row, centred in an 85px band with no top line. */
.site-footer--contact { border-top: 0; }

.site-footer--contact .site-footer__bottom {
    grid-template-columns: repeat(4, 25%);
    align-content: center;
    align-items: start;
    width: 80%;
    max-width: 740px;
    height: 85px;
    margin: 0 auto;
    padding: 0;
}

.site-footer--contact .site-footer__social { grid-column: 4; }

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
/* Content column: 80% wide, max 1340px (live .et_pb_row). */
.container {
    position: relative;
    z-index: 2; /* content stays above section-level effects such as the blinds overlay */
    width: var(--container-width);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* Page sections follow each other with the live 1px overlap. */
.page-sections > section { text-align: left; }
.page-sections > section + section { margin-top: var(--section-overlap); }
.page-sections > section + section.u-seam-flush { margin-top: 0; }
.page-sections > section + section.u-seam-overlap-3-desktop { margin-top: -3px; }
.page-sections > section + section.u-seam-overlap-1-phone { margin-top: 0; }

/* Scroll rise (ROC-99, the /sdk/ "Made by engineers" card motion reused for groups of other sections): the group
   starts lower and rises into place while its top edge scrolls from the bottom to the middle of the screen
   (roc_scroll_rise_attrs(), main.js initScrollMotion writes --motion-y, eased over its 15px scroll steps). Without
   JS, with reduced motion and in the full-page captures (data-scroll-motion-rest) it stays in place. */
.u-scroll-rise {
    transform: translateY(var(--motion-y, 0px));
    transition: transform 200ms linear;
}

/* Pill button with the diamond arrow (live .primary-dark / .primary-light). */
.btn-wrap {
    font-size: 16px;
    line-height: 24px;
}

.btn {
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    height: 56px;
    padding: 15.5px 50px 15.5px 24px;
    border-radius: var(--radius-pill);
    background-color: var(--color-rust);
    color: var(--color-cream);
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap; /* one line in the 56px pill (live wraps a long label out of the pill on narrow columns) */
    align-content: flex-end;
    cursor: pointer;
    transition: all 300ms ease 0ms;
}

.btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 17px;
    transform: translateY(-50%);
    background: url("assets/images/arrow.svg") center / contain no-repeat;
}

.btn:hover {
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.btn:hover::before { background-image: url("assets/images/arrow-rust.svg"); }

/* Button on light sections (live .primary-light): auto height, ink hover. */
.btn--light { height: auto; }

.btn--light:hover {
    background-color: var(--color-ink);
    color: var(--color-cream);
}

/* Pill with the 15px / 25px padding of the live hero and flag buttons. */
.btn--wide { padding: 15px 50px 15px 25px; }

/* Divi global button (live /latent-fingerprint-for-law-enforcement/, /face-recognition-sdk/ landing pages): a muted rust
   rectangle with 5px corners, 15px label, rust-dark on hover, the cream arrow stays. */
.btn--divi {
    height: auto;
    padding: 15.5px 50px 15.5px 24px;
    border-radius: 5px;
    background-color: var(--color-rust-muted);
    font-size: 15px;
}

.btn--divi:hover {
    background-color: var(--color-rust-dark);
    color: var(--color-cream);
}

.btn--divi:hover::before { background-image: url("assets/images/arrow.svg"); }

/* Flat rust button of the live landing pages (live .btn-without-icon): uppercase label, 5px corners, no arrow. */
.btn-flat {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 11px 24px;
    border-radius: 5px;
    background-color: var(--color-rust);
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 133%;
    text-transform: uppercase;
    color: var(--color-white);
}

.btn-flat.btn-flat--cream {
    font-family: var(--font-medium);
    color: var(--color-cream);
}

/* Outlined pill on dark sections (live .secondary-dark): steel border that turns
   rust on hover, cream text, rust arrow. */
.btn--outline {
    display: inline-flex;
    align-items: center;
    padding: 10px 50px 10px 24px;
    border: 1px solid var(--color-steel);
    background-color: transparent;
    transition: 0.5s;
}

.btn--outline::before {
    width: 22px;
    height: 22px;
    background-image: url("assets/images/arrow-rust.svg");
}

.btn--outline:hover {
    border-color: var(--color-rust);
    background-color: transparent;
    color: var(--color-cream);
}

/* Ink pill on rust sections (live .onred-btn): the rust arrow stays on hover. */
.btn--ink { background-color: var(--color-ink); }
.btn--ink::before,
.btn--ink:hover::before { background-image: url("assets/images/arrow-rust-on-ink.svg"); }

/* Visibility helpers for layouts with a "Hide on" setting (tiers in media.css). */

/* Sections (.block-<slug>) follow, one header comment per block. */

/* ==========================================================================
   BLOCK-HERO-MEDIA
   ========================================================================== */
.block-hero-media {
    position: relative;
    overflow: hidden;
    background-color: var(--color-white);
}

.block-hero-media__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
}

.block-hero-media__overlay {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 817px;
    background-image: linear-gradient(90deg, var(--color-black) 1%, rgba(255, 255, 255, 0) 100%);
}

.block-hero-media__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 80%;
    max-width: var(--container-max);
    height: 576px;
}

.block-hero-media__text {
    max-width: 65%;
    margin: 90px 0 13px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0.5px;
    color: var(--color-cream);
}

.block-hero-media__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 87px;
    font-weight: 500;
    line-height: 100%;
}

.block-hero-media__subtitle {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 135%;
}

.block-hero-media__actions { margin: 38px 0 13px; }

/* Outlined second button (live .secondary-dark, "Explore the API"): transparent pill, steel border that turns rust, no arrow. */
.block-hero-media__actions--pair {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn--ghost {
    display: inline-flex;
    align-items: center;
    padding: 14.5px 24px;
    border: 1px solid var(--color-steel);
    background-color: transparent;
    line-height: 140%;
    transition: all 300ms ease 0ms;
}

.btn--ghost::before { content: none; }

.btn--ghost:hover {
    border-color: var(--color-rust);
    background-color: transparent;
    color: var(--color-cream);
}

/* Variant "spaced" (live /roc-watch-schools/): background image (cover, top right)
   starting 50px down, the live 5.63vw section margin as an ink gap under it, text
   column at full width with the live 15px right padding; tiers in media.css. */
.block-hero-media--spaced {
    padding: 50px 0 5.63vw;
    background-color: var(--color-ink);
}

.block-hero-media--spaced .block-hero-media__frame { position: relative; }

.block-hero-media--spaced .block-hero-media__media { object-position: 100% 0; }

.block-hero-media--spaced .block-hero-media__overlay {
    min-height: 817px;
    background-image: none;
}

.block-hero-media--spaced .block-hero-media__content {
    height: 576px;
    padding-right: 15px;
}

.block-hero-media--spaced .block-hero-media__text {
    max-width: none;
    margin: 38px 0 13px;
}

.block-hero-media--spaced .block-hero-media__actions { margin: 0; }

/* Variant "padded" (live /watch/): the image also covers a 3.3vw ink top padding,
   the live 5.63vw section margin stays as an ink gap under it, steel eyebrow, text
   65% wide, standard pill; tiers in media.css. */
.block-hero-media--padded {
    padding: 0 0 5.63vw;
    background-color: var(--color-ink);
}

.block-hero-media--padded .block-hero-media__frame {
    position: relative;
    padding-top: 3.3vw;
}

.block-hero-media--padded .block-hero-media__media { object-position: 50% 50%; }

.block-hero-media--padded .block-hero-media__overlay { background-image: none; }

.block-hero-media--padded .block-hero-media__text { margin-top: 38px; }

.block-hero-media--padded .block-hero-media__eyebrow {
    font-weight: 500;
    color: var(--color-steel);
}

.block-hero-media--padded .block-hero-media__eyebrow::before { background-image: url("assets/images/carrot-steel.svg"); }

/* Variant "padded-inset" (live /sdk/): the text column keeps the live 15px right
   padding at every width and the eyebrow is a regular-weight paragraph. */
.block-hero-media--inset .block-hero-media__content { padding-right: 15px; }

.block-hero-media--inset .block-hero-media__eyebrow { font-weight: 400; }

/* Variant "textured" (live /abis/): padded with the text column at full width and
   the live 15px right padding, steel copy under the cream title; tiers in media.css. */
.block-hero-media--textured .block-hero-media__content { padding-right: 15px; }

.block-hero-media--textured .block-hero-media__text {
    max-width: none;
    color: var(--color-steel);
}

.block-hero-media--textured .block-hero-media__title { color: var(--color-cream); }

/* Variant "photo" (live /enroll/): padded with the photo anchored at the top, the text
   column at full width with the live 15px right padding; tiers in media.css. */
.block-hero-media--photo .block-hero-media__media { object-position: 50% 0; }

.block-hero-media--photo .block-hero-media__content { padding-right: 15px; }

.block-hero-media--photo .block-hero-media__text { max-width: none; }

/* Variant "split" (live /roc-access/): padded with the live dark gradient from the left
   over the photo (and its top padding) and the text in the left half of the row (live
   1/2 column, text module at most 622px); tiers in media.css. */
.block-hero-media--split .block-hero-media__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.627) 100%);
}

.block-hero-media--split .block-hero-media__overlay { z-index: 1; }

.block-hero-media--split .block-hero-media__text {
    width: 48.5%;
    max-width: 622px;
}

.block-hero-media--split .block-hero-media__actions { margin: -15px 0 0; }

.block-hero-media--split .block-hero-media__actions .btn { padding: 15px 50px 15px 25px; }

/* Variant "gradient" (live /roc-evidence/): padded with the live black gradient from the
   left (black up to 20%, clear at the right) over the photo and its top padding, the text
   column with the live 15px right padding; tiers in media.css. */
.block-hero-media--gradient .block-hero-media__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--color-black) 20%, rgba(255, 255, 255, 0) 100%);
}

.block-hero-media--gradient .block-hero-media__overlay { z-index: 1; }

.block-hero-media--gradient .block-hero-media__content { padding-right: 15px; }

/* Variant "bottom" (live /ai-gun-detection/): the photo carries its own gradient, anchored at the bottom. */
.block-hero-media--bottom .block-hero-media__media { object-position: 50% 100%; }

/* Variants "standard" (live /age-estimation/) and "bottom": the short copy and the button stay together in the
   middle of the hero, the button at the flow gap under the subtitle, as in Figma (live spreads them to the top
   and the bottom of the text column; DIGITAL-318); standard tablets keep the spread in media.css. */
.block-hero-media--standard .block-hero-media__content,
.block-hero-media--bottom .block-hero-media__content { justify-content: center; }

/* Bold lead-in of the subtitle (live h2 strong). */
.block-hero-media__subtitle strong {
    font-family: var(--font-bold);
    font-weight: 900;
}

.block-hero-media__inset { display: none; }

/* Phone texts: shown instead of the desktop ones at 767px and down. */
.block-hero-media__phone-only { display: none; }

/* The phone pill turns cream with rust text on hover (live phone button). */
.btn.block-hero-media__phone-only:hover { color: var(--color-rust); }

/* Brand eyebrow: the ROC mark sits on the text baseline (live .logo-text). */
.block-hero-media__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 70px;
    font-family: var(--font-bold);
    font-size: 51px;
    line-height: 0;
}

.block-hero-media__eyebrow::before {
    content: "";
    position: relative;
    display: flex;
    width: 51px;
    height: 38px;
    background: url("assets/images/carrot-cream.svg") center / contain no-repeat;
}

/* Video link: thumbnail at the left, bold cream text (live custom Divi button). */
.block-hero-media__video-link {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 15.5px 0.7em 15.5px 84px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-cream);
    transition: all 300ms ease 0ms;
}

.block-hero-media__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 72px;
    height: 47px;
    transform: translateY(-50%);
}

/* ==========================================================================
   VIDEO POPUP (live WP Video Popup plugin look): dark backdrop, 16:9 player
   90% wide up to 1200px, 60px close button in the top right corner.
   ========================================================================== */
.video-popup {
    position: fixed;
    inset: 0;
    z-index: 8888888;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    opacity: 0;
    transition: opacity 200ms;
}

.video-popup[hidden] { display: none; }

.video-popup.is-open { opacity: 1; }

.video-popup__frame {
    width: 90%;
    max-width: 1200px;
    max-height: 90%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.video-popup__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    background: url("assets/images/video-popup-close.png") center / 15px auto no-repeat;
    transition: opacity 0.25s;
}

.video-popup__close:hover { opacity: 0.7; }

/* ==========================================================================
   BLOCK-HERO-SPLIT-IMAGE
   Text column left, cut-out image right (absolute, bleeds off the viewport and
   is clipped by the section). The bottom padding is the live 5.63vw section
   margin (the gap shows the ink page background on live).
   ========================================================================== */
.block-hero-split-image {
    position: relative;
    overflow-x: clip;
    padding: 3.3vw 0 5.63vw;
    background-color: var(--color-ink);
}

.block-hero-split-image__row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 817px;
}

.block-hero-split-image__text-col {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 48.5%;
    height: 576px;
    margin-right: 3%;
    padding: 0 20px 0 0;
}

.block-hero-split-image__text {
    width: 100%;
    max-width: 622px;
    margin: 38px auto 13px 0;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

.block-hero-split-image__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 87px;
    font-weight: 500;
    line-height: 100%;
    color: var(--color-cream);
}

.block-hero-split-image__subtitle {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 135%;
    letter-spacing: 0.5px;
}

.block-hero-split-image__actions { margin-top: -15px; }

/* Padded text column (live /fingerprint-recognition/): 25px on the right, 40px under the button. */
.block-hero-split-image--capability.block-hero-split-image--padded .block-hero-split-image__text-col { padding: 0 25px 40px 0; }

.block-hero-split-image--gutter-25 .block-hero-split-image__text-col { padding-right: 25px; }

.block-hero-split-image__media-col {
    position: relative;
    z-index: 2;
    width: 48.5%;
    min-height: 1px;
}

.block-hero-split-image__media {
    position: absolute;
    top: 50%;
    right: -400px;
    width: clamp(1000px, 69.5vw, 1780px);
    transform: translateY(-50%);
    line-height: 0;
    pointer-events: none; /* the cut-out's box reaches over the hero button from 1921px up (DIGITAL-349); clicks pass through */
}

.block-hero-split-image__media img { margin-left: auto; }

/* ==========================================================================
   BLOCK-IMAGE-TEXT-SPLIT
   Ink section: picture left (31.6vw between 450 and 605px, cut bottom right corner
   on the picture's column, which stretches to the text height), light steel
   heading and copy right (live .leftimg / .rtext).
   ========================================================================== */
.block-image-text-split {
    padding: 126px 0 140px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-image-text-split__row {
    display: flex;
    gap: clamp(30px, 3vw, 60px);
}

.block-image-text-split__media {
    width: fit-content;
    margin-right: auto;
    line-height: 0;
    clip-path: polygon(100% 0, 100% 80%, 78% 100%, 0 100%, 0 0);
}

.block-image-text-split__media img { width: clamp(450px, 31.6vw, 605px); }

.block-image-text-split__text {
    max-width: clamp(562px, 39vw, 750px);
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 133%;
}

.block-image-text-split__heading {
    margin: -1vw 0 1vw;
    padding-bottom: 10px;
    font-family: var(--font-light);
    font-size: clamp(45px, 3.125vw, 60px);
    font-weight: 500;
    line-height: 142%;
}

/* ==========================================================================
   BLOCK-CENTERED-TITLE
   Ink section: centered steel heading (57px, 112%) and an optional centered pill.
   ========================================================================== */
.block-centered-title {
    padding: 130px 0 140px;
    background-color: var(--color-ink);
}

.block-centered-title__inner { padding: 0 25px; }

.block-centered-title__heading {
    margin-bottom: 28px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    text-align: center;
    color: var(--color-steel);
}

.block-centered-title__actions {
    margin: 38px 0 13px;
    text-align: center;
}

/* Intro variant: cream heading with a steel intro paragraph, 70px / 60px padding. */
.block-centered-title--intro { padding: 70px 0 60px; }

.block-centered-title--intro .block-centered-title__heading { color: var(--color-cream); }

.block-centered-title__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: var(--color-steel);
}

/* Banner variant (live /license-plate-recognition/ "FORMULA AI"): 65px over and under, the
   picture covers the section; the 87px ink heading (126%, 1vw under it) over a 45px copy line. */
.block-centered-title.block-centered-title--banner {
    position: relative;
    overflow: hidden;
    padding: 65px 0;
}

.block-centered-title__background {
    position: absolute;
    inset: 0;
    display: block;
}

.block-centered-title__background img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.block-centered-title--banner .block-centered-title__inner {
    position: relative;
    padding: 0;
}

.block-centered-title--banner .block-centered-title__heading {
    margin-bottom: 1vw;
    font-family: var(--font-bold);
    font-size: 87px;
    line-height: 126%;
    letter-spacing: -0.25px;
    color: var(--color-ink);
}

.block-centered-title--banner .block-centered-title__text {
    font-size: 45px;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-ink);
}

/* ==========================================================================
   BLOCK-LAPTOP-SHOWCASE
   Ink section: centered steel caption, 40px gap, then a 752px picture band
   (cover, centred, 10% above the top edge like the live background position).
   ========================================================================== */
.block-laptop-showcase { background-color: var(--color-ink); }

.block-laptop-showcase__caption { margin-bottom: 40px; }

/* Full width outside the 1025 to 1500px zoom band (the caption is one centred line). */
.block-laptop-showcase__eyebrow.container {
    width: 100%;
    max-width: none;
}

.block-laptop-showcase__eyebrow {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
    text-align: center;
    color: var(--color-steel);
}

.block-laptop-showcase__stage { height: 752px; }

.block-laptop-showcase__stage picture { display: contents; }

.block-laptop-showcase__image {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% -10%;
}

/* Titled variant: 70px of ink, then a 1028px band with the picture (cover,
   centred), an ink notch hanging from its top edge (1128px wide, 4.375vw tall,
   live #support::before) and the heading and text 120px down; tiers in media.css. */
/* The notch is wider than tablets: clip it inside the section. */
.block-laptop-showcase--titled {
    overflow: hidden;
    padding-top: 70px;
}

.block-laptop-showcase--titled .block-laptop-showcase__stage {
    position: relative;
    height: auto;
    min-height: 1028px;
    padding: 120px 0 50px;
}

.block-laptop-showcase--titled .block-laptop-showcase__stage::before {
    content: "";
    position: absolute;
    top: -1px;
    left: calc(50% - 564px);
    z-index: 1;
    width: 1128px;
    height: 4.375vw;
    background-color: var(--color-ink-soft);
    clip-path: polygon(50% 0, 100% 0, 95% 100%, 5% 100%, 0 0);
}

.block-laptop-showcase--titled .block-laptop-showcase__image {
    position: absolute;
    top: 0;
    left: 0;
    object-position: 50% 50%;
}

.block-laptop-showcase__heading {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--color-cream);
}

.block-laptop-showcase__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: var(--color-cream);
}

/* Short variant: the picture alone in a 650px band, cover, 71% down. */
.block-laptop-showcase--short .block-laptop-showcase__stage { height: 650px; }
.block-laptop-showcase--short .block-laptop-showcase__image { object-position: 50% 71%; }

.block-laptop-showcase--strip .block-laptop-showcase__stage { height: 473px; }
.block-laptop-showcase--strip .block-laptop-showcase__image { object-position: 50% 50%; }

/* Pattern variant (strip on #111, 510px band; live capability pages). */
.block-laptop-showcase--pattern { background-color: var(--color-ink-soft); }
.block-laptop-showcase--pattern .block-laptop-showcase__stage { height: 510px; }

/* Fluid variant: the picture fills a 62vw stage from its top edge; hotspots sit in
   a 1px content row 70px down (live Divi row), tiers in media.css. */
.block-laptop-showcase--fluid .block-laptop-showcase__stage {
    position: relative;
    height: 62vw;
    padding-top: 70px;
}

.block-laptop-showcase--fluid .block-laptop-showcase__image {
    position: absolute;
    top: 0;
    left: 0;
    object-position: 50% 0;
}

/* Hotspots at four fixed positions over the laptop picture (live "Spots" coordinates); the text box fades in over
   1s on hover or keyboard focus. Marker (Evan DIGITAL-157, ROC-99, in place of the live red plus icons): a rust dot
   (21% of the 48px box) in a 50% rust halo (70%) that breathes (scale 1.25, 2.4s loop); on hover or keyboard focus
   the halo turns into a rust ring. */
.block-laptop-showcase__spots { height: 1px; }

.block-laptop-showcase__spot {
    position: absolute;
    width: 48px;
    height: 48px;
    margin-bottom: 1.5%;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.block-laptop-showcase__spot::before,
.block-laptop-showcase__spot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.block-laptop-showcase__spot::before {
    width: 70%;
    height: 70%;
    border: 1.5px solid transparent;
    background-color: color-mix(in srgb, var(--color-rust) 50%, transparent);
    animation: roc-spot-breathe 2.4s ease-in-out infinite;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.block-laptop-showcase__spot::after {
    width: 21%;
    height: 21%;
    background-color: var(--color-rust);
}

.block-laptop-showcase__spot:hover::before,
.block-laptop-showcase__spot:focus-visible::before {
    border-color: var(--color-rust);
    background-color: transparent;
    animation: none;
}

@keyframes roc-spot-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.25); }
}

.block-laptop-showcase__spot--1 {
    top: -70px;
    left: 54%;
}

.block-laptop-showcase__spot--2 {
    top: 13vw;
    right: 6.5vw;
}

.block-laptop-showcase__spot--3 {
    bottom: -34vw;
    left: 48%;
}

.block-laptop-showcase__spot--4 {
    top: 19vw;
    left: 11vw;
}

.block-laptop-showcase__spot-text {
    position: absolute;
    display: flex;
    width: 177px;
    margin-bottom: 1.5%;
    padding: 30px;
    border-radius: 15px;
    background: rgba(17, 17, 20, 0.9);
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 120%;
    color: var(--color-cream);
    opacity: 0;
    transition: all 1s ease;
}

.block-laptop-showcase__spot:hover + .block-laptop-showcase__spot-text,
.block-laptop-showcase__spot:focus-visible + .block-laptop-showcase__spot-text,
.block-laptop-showcase__spot-text:hover { opacity: 1; }

.block-laptop-showcase__spot-text--1 {
    top: -10px;
    left: 49%;
}

.block-laptop-showcase__spot-text--2 {
    top: 12vw;
    right: 10vw;
    padding: 23px;
}

.block-laptop-showcase__spot-text--3 {
    bottom: -30.5vw;
    left: 44%;
    align-items: center;
    width: 191px;
    height: 91px;
    padding: 19px;
}

.block-laptop-showcase__spot-text--4 {
    top: 18vw;
    left: 14vw;
    align-items: center;
    height: 91px;
    margin-bottom: 0;
}

/* ==========================================================================
   BLOCK-FEATURE-GRID
   Ink section: steel heading and half-width intro, feature titles (cream, 47px
   in from the column edge after the rust square of the live icon slot) with copy at 70%
   in two columns (48.5% + 3% gutter), then a download form: email pill and
   rust "Get Your Copy" pill side by side. Optional steel stripes at the bottom
   edge (live #guide::before / ::after; the lower one reaches 4px into the next
   section).
   ========================================================================== */
.block-feature-grid {
    position: relative;
    padding: 150px 0 220px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-feature-grid__heading {
    margin-bottom: 20px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0.5px;
}

.block-feature-grid__intro {
    width: 50%;
    margin-bottom: 120px;
    font-size: 18px;
    line-height: 24px;
}

.block-feature-grid__grid {
    display: flex;
    flex-wrap: wrap;
}

.block-feature-grid__item { width: 48.5%; }
.block-feature-grid__item:nth-child(odd) { margin-right: 3%; }

.block-feature-grid__title {
    margin-bottom: 20px;
    padding-left: 47px;
    font-family: var(--font-bold);
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    color: var(--color-cream);
}

/* Rust square in front of each title (live blurb icon, a 16px FontAwesome square, 6px down);
   phones in media.css drop it with the indent. The grouped and columns styles have none. */
.block-feature-grid:not(.block-feature-grid--grouped, .block-feature-grid--columns) .block-feature-grid__title { position: relative; }
.block-feature-grid:not(.block-feature-grid--grouped, .block-feature-grid--columns) .block-feature-grid__title::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: var(--color-rust);
}

.block-feature-grid__text {
    width: 70%;
    margin-bottom: 120px;
    font-size: 18px;
    line-height: 24px;
}

.block-feature-grid__form-heading {
    margin-bottom: 36px; /* guide form: room for the error over the field (see GUIDE FORM) */
    font-family: var(--font-bold);
    font-size: 33px;
    line-height: 100%;
    color: var(--color-cream);
}

.block-feature-grid--stripes::before,
.block-feature-grid--stripes::after {
    content: "";
    position: absolute;
    z-index: 999;
    height: 63px;
    background: var(--color-steel);
}

.block-feature-grid--stripes::before {
    right: 0;
    bottom: 58px;
    width: 29%;
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.block-feature-grid--stripes::after {
    left: 0;
    bottom: -4px;
    width: 71%;
    clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 0% 100%);
}

/* Style "grouped" (live /roc-evidence/ s3): no top padding, 120px under; steel eyebrow
   60px over the 57px heading (80px under it); rust group headings 40px over their
   features; 28px cream titles over cream copy in two columns (48.5% + 3%), 60px between
   the rows, 80px after a group, 120px after the last row; tiers in media.css. */
.block-feature-grid.block-feature-grid--grouped {
    padding: 0 0 120px;
    color: var(--color-cream);
}

.block-feature-grid__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--color-steel);
}

.block-feature-grid--grouped .block-feature-grid__heading {
    margin-bottom: 80px;
    padding-bottom: 10px;
    line-height: 112%;
    letter-spacing: normal;
    color: var(--color-cream);
}

.block-feature-grid--grouped .block-feature-grid__grid { column-gap: 3%; }

.block-feature-grid--grouped .block-feature-grid__item:nth-child(n) {
    margin: 0 0 60px;
}

.block-feature-grid--grouped .block-feature-grid__item.is-row-end { margin-bottom: 80px; }
.block-feature-grid--grouped .block-feature-grid__item.is-final-row { margin-bottom: 120px; }

.block-feature-grid__group {
    width: 100%;
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-rust);
}

.block-feature-grid__group br { display: none; }

.block-feature-grid--grouped .block-feature-grid__title {
    margin-bottom: 0;
    padding: 0 0 10px;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: 0.5px;
}

.block-feature-grid--grouped .block-feature-grid__text {
    width: auto;
    margin-bottom: 0;
    line-height: 140%;
}

/* Columns style (live /fingerprint-recognition/ "Lead the way with the gold standard"): the
   statement heading (light, 115%) 40px over two columns of 47.25% with 5.5% between them, each
   item under a 1px steel rule with 40px over and under, the title 28px over the copy at 85%. */
.block-feature-grid.block-feature-grid--columns {
    display: flow-root; /* the container's bottom margin stays inside, on ink */
    padding: 40px 0 0;
    color: var(--color-steel);
}

.block-feature-grid--columns .container {
    /* live: the last row's 40px bottom margin under the items (the section background runs under it) */
    margin-bottom: 40px;
}

.block-feature-grid--columns .block-feature-grid__heading {
    margin-bottom: 40px;
    font-family: var(--font-regular);
    font-size: 60px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

.block-feature-grid--columns .block-feature-grid__grid {
    column-gap: 5.5%;
    row-gap: 40px;
}

.block-feature-grid--columns .block-feature-grid__item:nth-child(n) {
    width: 47.25%;
    margin: 0;
    padding: 40px 0;
    border-top: 1px solid var(--color-steel);
}

.block-feature-grid--columns .block-feature-grid__title {
    margin: 0;
    padding: 0 0 10px;
    font-size: 28px;
    line-height: 120%;
}

.block-feature-grid--columns .block-feature-grid__text {
    width: 85%;
    margin: 0;
    line-height: 133%;
}

/* ==========================================================================
   BLOCK-RANK-FIGURE (live /iris-recognition/ "The world's fastest iris algorithm" and
   "Future-proofed identity verification"): ink section, 150px over and 100px under, a bold
   eyebrow with 60px under it, the 57px steel heading (20px under), copy and a big figure picture.
   Compare: a row (30px over) of the outlined ROC box (a quarter, 55px padding, logo and time
   centred 40px apart) and the rivals (three quarters, 130px in, logos over light 48px times 40px
   apart) with the note under them. Features: the figure over the heading, then two columns of
   features; tiers in media.css.
   ========================================================================== */
.block-rank-figure {
    padding: 150px 0 100px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-rank-figure__head { padding-bottom: 60px; }

.block-rank-figure__eyebrow {
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-rank-figure__heading {
    margin-bottom: 20px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

.block-rank-figure__text {
    width: 50%;
    margin-bottom: 120px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

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

.block-rank-figure--compare .block-rank-figure__text { margin-bottom: 120px; }

.block-rank-figure__compare {
    display: flex;
    padding-top: 30px;
}

.block-rank-figure__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 40px;
    width: 22.75%;
    margin-right: 3%;
    padding: 55px;
    border: 1px solid var(--color-steel);
}

.block-rank-figure__brand-logo {
    margin-bottom: 6.58%; /* live: of the box's content width */
    line-height: 0;
}
.block-rank-figure__brand-logo img {
    /* live: 151px, or the box less the picture's 21px side margins where the page column is narrower */
    width: min(151px, calc(18.2vw - 42px));
    max-width: none;
}

.block-rank-figure__time {
    white-space: nowrap;
    font-family: var(--font-medium);
    font-size: 48px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-steel);
}

.block-rank-figure__rivals {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 40px;
    width: 74.25%;
    padding-left: 130px;
}

.block-rank-figure__rival {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 160px;
    height: 120px;
    margin-bottom: 2.02%; /* live: of the rivals' content width */
}

.block-rank-figure__rival-logo {
    /* live: the picture sits centred in a 31px row at the top of a 61px picture box */
    display: grid;
    grid-template-rows: 31px 1fr;
    flex-shrink: 0;
    align-items: center;
    height: 61px;
    line-height: 0;
}
.block-rank-figure__rival-logo img { width: auto; max-width: 100%; }

.block-rank-figure__rival .block-rank-figure__time {
    padding-bottom: 10px;
    font-family: var(--font-light);
    font-weight: 500;
    line-height: 48px;
}

.block-rank-figure__note {
    width: 65%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 24px;
}

.block-rank-figure__note-phone p { margin: 0; }
.block-rank-figure__note p { margin: 0; }
.block-rank-figure__note a { text-decoration: underline; }

.block-rank-figure--features .block-rank-figure__text {
    width: 100%;
    line-height: 24px;
}

.block-rank-figure--features .block-rank-figure__figure { margin-bottom: 1.5%; }

.block-rank-figure__features {
    display: flex;
    flex-wrap: wrap;
    column-gap: 3%;
}

.block-rank-figure__feature { width: 48.5%; }

/* The rust 16px square of live's Divi blurb icon sits at the left of the title, centred on it (DIGITAL-311). */
.block-rank-figure__feature-title {
    position: relative;
    margin-bottom: 20px;
    padding-left: 47px;
    font-family: var(--font-bold);
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    color: var(--color-cream);
}

.block-rank-figure__feature-title::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    left: 0;
    width: 16px;
    height: 16px;
    background-color: var(--color-rust);
}

.block-rank-figure__feature-text {
    margin-bottom: 120px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 24px;
}

/* ==========================================================================
   BLOCK-NUMBERED-CLAIMS (live /license-plate-recognition/ s4): ink, 220px over and 250px under
   (120px / 120px from 768 to 1280px, none over and 96px under on phones); two columns of claims
   (a 1.45vw rust number, the 2.3vw cream line, 60px between the rows, 220px after the last), then
   the 75px steel statement (56px from 1024 to 1440px) and its 1.25vw copy.
   ========================================================================== */
.block-numbered-claims {
    padding: 220px 0 250px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-numbered-claims__grid {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 220px;
}

.block-numbered-claims__item {
    width: 50%;
    margin-bottom: 60px;
}

.block-numbered-claims__item:nth-last-child(-n+2) { margin-bottom: 0; }

.block-numbered-claims__number {
    margin-bottom: 1vw;
    font-family: var(--font-medium);
    font-size: 1.45vw;
    font-weight: 500;
    line-height: 150%;
    color: var(--color-rust);
}

.block-numbered-claims__title {
    font-family: var(--font-medium);
    padding-bottom: 10px;
    font-size: 2.3vw;
    font-weight: 500;
    line-height: 100%;
    color: var(--color-cream);
}

.block-numbered-claims__title br { display: none; }

.block-numbered-claims__heading {
    margin-bottom: 1vw;
    font-family: var(--font-medium);
    font-size: 75px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-steel);
}


.block-numbered-claims__text {
    font-family: var(--font-regular);
    font-size: 1.25vw;
    line-height: 133%;
}


/* ==========================================================================
   BLOCK-HEADLINE-TAGS
   Ink section (live /roc-evidence/ s4): in the left 2/3 column a 160px cream heading
   (110%), 320px of cream copy with 300% leading and an outlined steel strip of tags
   (80px apart); under it a row (2% of the screen over and under a 1px line, 33px from
   1675px) anchors the 1056px art at the right screen edge, 130px below the line, over
   the next section. Tiers in media.css.
   ========================================================================== */
.block-headline-tags {
    position: relative;
    z-index: 2;
    background-color: var(--color-ink);
}

.block-headline-tags__backdrop,
.block-headline-tags__picture { display: none; }

.block-headline-tags__column { width: 65.667%; }

.block-headline-tags__heading {
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 160px;
    font-weight: 500;
    line-height: 110%;
    color: var(--color-cream);
}

.block-headline-tags__text {
    width: 320px;
    margin-bottom: 60px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 300%;
    color: var(--color-cream);
}

.block-headline-tags__tags {
    display: flex;
    gap: 80px;
    width: fit-content;
    margin: 0;
    padding: 20px 44px;
    border: 1px solid var(--color-steel);
    list-style: none;
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    color: var(--color-steel);
}

.block-headline-tags__art-row { padding: 2vw 0; }

.block-headline-tags__anchor {
    position: relative;
    height: 1px;
}

.block-headline-tags__art {
    position: absolute;
    right: 0;
    bottom: -130px;
    z-index: 50;
    width: 1056px;
    max-width: none;
}

/* ==========================================================================
   BLOCK-DEFINITION-ROWS
   Live /roc-evidence/ s5 (ink) and s8 (cream). Rows: 80px over and under, a 1px rust
   rule under every row but the last, the 45px light title (125%) in the left half and
   18px copy (140%) in the right one (48.5% + 3%). Ink: 100px over and under the section.
   Cream: 126px over, 3vw under (50px from 1675px), the heading (3/5 of the row) with the pill beside it,
   40px under the last row. The role card: three 192px blurbs 127px apart in an 80px
   padded row; the rust band behind them is 351px tall, centred on them and runs from the
   left screen edge to 931px past the start of the row. Tiers in media.css.
   ========================================================================== */
.block-definition-rows {
    position: relative;
    padding: 100px 0;
    overflow-x: clip;
    background-color: var(--color-ink);
    color: var(--color-cream);
}

.block-definition-rows--cream {
    padding: 126px 0 3vw;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-definition-rows__header {
    display: flex;
    gap: 3%;
}

.block-definition-rows__heading {
    flex: 0 0 58.8%;
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-definition-rows__actions { margin: 38px 0 13px; }

.block-definition-rows__cards {
    position: relative;
    display: flex;
    gap: 127px;
    padding: 80px 34px 80px 0;
}

.block-definition-rows__cards::before {
    content: "";
    position: absolute;
    top: calc(50% - 175.5px);
    left: -100vw;
    width: calc(931px + 100vw);
    height: 351px;
    background-color: var(--color-rust);
}

.block-definition-rows__card {
    position: relative;
    flex: 1 1 0;
    max-width: 192px;
    margin-bottom: 19.58px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-definition-rows__card:last-child { margin-bottom: 0; }

.block-definition-rows__icon {
    display: block;
    width: 74px;
    margin-bottom: 30px;
}

.block-definition-rows__card-title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 133%;
}

.block-definition-rows__row {
    display: flex;
    gap: 3%;
    padding: 80px 0;
    border-bottom: 1px solid var(--color-rust);
}

.block-definition-rows__row:last-child { border-bottom: 0; }

.block-definition-rows--cream .block-definition-rows__row:last-child { margin-bottom: 40px; }

.block-definition-rows__title,
.block-definition-rows__text { flex: 0 0 48.5%; }

.block-definition-rows__title {
    padding-bottom: 10px;
    font-family: var(--font-light);
    font-size: 45px;
    font-weight: 500;
    line-height: 125%;
}

.block-definition-rows__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

/* Intro variant (live /age-estimation-api-pg/ "REGULATORY READINESS"): 220px over and 60px under, the eyebrow 60px over
   the heading, the intro sentence under it and 80px to the rows; the bold lead line of a row sits 18px over its
   paragraph. */
.block-definition-rows.block-definition-rows--intro { padding: 220px 0 60px; }

.block-definition-rows--intro .block-definition-rows__eyebrow {
    margin-bottom: 60px;
    color: var(--color-steel);
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 20px;
}

.block-definition-rows--intro .block-definition-rows__header { display: block; margin-bottom: 80px; }

.block-definition-rows--intro .block-definition-rows__heading { margin-bottom: 0; }

.block-definition-rows__intro {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-definition-rows--intro .block-definition-rows__text p:not(:last-child) { margin-bottom: 18px; }

.block-definition-rows--intro .block-definition-rows__text strong { font-weight: 600; }

/* ==========================================================================
   BLOCK-STATEMENT-INTRO
   ========================================================================== */
.block-statement-intro {
    position: relative;
    padding: 126px 0 140px;
    background-color: var(--color-ink);
}

.block-statement-intro__text {
    /* hardcoded: live keeps 1.5% module spacing minus a 15px pull-up */
    margin-bottom: calc(1.5% - 15px);
    font-family: var(--font-light);
    font-size: 60px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

.block-statement-intro__text p:not(:last-child) { padding-bottom: 1em; }

/* Compact variant: the live 1.5% module spacing under the text, the button
   wrapper pulls up by 15px (also when its button is hidden). */
.block-statement-intro.block-statement-intro--compact { padding: 0; }
.block-statement-intro--compact .container {
    display: flow-root; /* live column is a float: the pull-up stays inside */
    padding-top: 60px;
}
.block-statement-intro--compact .block-statement-intro__text {
    margin-bottom: 1.5%;
    line-height: 125%;
}

/* Tight variant (compact plus): no top padding, 115% leading, regular weight button. */
.block-statement-intro--tight .container { padding-top: 0; }
.block-statement-intro--tight .block-statement-intro__text { line-height: 115%; }
.block-statement-intro--tight .btn { font-weight: 400; }
.block-statement-intro--tight-margin .block-statement-intro__actions { margin-top: 0; } /* live /object-detection/: no pull-up under the copy */

/* Open variant (tight plus): 3.75vw under the section, medium weight button. */
.block-statement-intro.block-statement-intro--open { padding-bottom: 3.75vw; }
.block-statement-intro--open .btn { font-weight: 500; }

.block-statement-intro__actions {
    margin-top: -15px;
    text-align: center;
}

/* Spaced variant: 126px over the copy, 90px under it, 60px under the section. */
.block-statement-intro.block-statement-intro--spaced { padding: 126px 0 60px; }
.block-statement-intro--spaced .block-statement-intro__text { margin-bottom: 90px; }

/* Spaced-flat variant (live /enroll/): spaced without the pull-up, a 54px pill (auto
   height) that turns cream with rust text on hover. */
.block-statement-intro--spaced-flat .block-statement-intro__actions { margin-top: 0; }
.block-statement-intro--spaced-flat .btn { height: auto; }
.block-statement-intro--spaced-flat .btn:hover { color: var(--color-rust); }
.block-statement-intro--spaced-flat .btn:hover::before { background-image: url("assets/images/arrow.svg"); }

/* Flush variant (live /abis/): no top padding, 120px under the section, no space
   under the copy; tablets take the spaced tiers (media.css). */
/* Branded variant (live /roc-access/): 140px over, 100px under, 60px under the copy;
   the hidden phone button keeps no room. */
.block-statement-intro.block-statement-intro--branded { padding: 140px 0 100px; }
.block-statement-intro--branded .block-statement-intro__text { margin-bottom: 60px; }
.block-statement-intro--branded .block-statement-intro__actions { margin-top: 0; }

/* Branded-phone variant (live /roc-evidence/): branded, the brand eyebrow (and the phone
   title) only on phones; tiers in media.css. */
.block-statement-intro--branded-phone .block-statement-intro__eyebrow { display: none; }

/* Brand eyebrow: the ROC mark on the text baseline (live .logo-text.beige). */
.block-statement-intro__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 70px;
    font-family: var(--font-bold);
    font-size: 51px;
    font-weight: 300;
    line-height: 0;
    letter-spacing: 0.5px;
    color: var(--color-cream);
}

.block-statement-intro__eyebrow::before {
    content: "";
    position: relative;
    display: flex;
    width: 51px;
    height: 38px;
    background: url("assets/images/carrot-cream.svg") center / contain no-repeat;
}

/* Phone title: phones only (media.css). */
.block-statement-intro__title { display: none; }

.block-statement-intro.block-statement-intro--flush { padding: 0 0 120px; }
.block-statement-intro--flush .block-statement-intro__text { margin-bottom: 0; }

/* Linked variant: 60px under the copy, then the button as a right-aligned steel
   text link with the long arrow; the rust underline sweeps in on hover (live
   .slider-btn). */
.block-statement-intro--linked .block-statement-intro__text { margin-bottom: 60px; }

.block-statement-intro__link-wrap {
    font-size: 16px;
    line-height: 24px;
    text-align: right;
}

.block-statement-intro__link {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0 30px 5px 0;
    border-bottom: 1px solid var(--color-rust);
    font-family: var(--font-regular);
    font-size: 22px;
    line-height: 24px;
    color: var(--color-steel);
    transition: ease-out;
}

.block-statement-intro__link::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background: url("assets/images/arrow-long-steel.png") center no-repeat;
}

.block-statement-intro__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--color-rust);
    transition: ease-out;
}

.block-statement-intro__link:hover { border-bottom-color: transparent; }

.block-statement-intro__link:hover::after {
    width: 100%;
    transition: 1.3s ease-out;
}

/* ==========================================================================
   BLOCK-IMAGE-COLUMNS
   ========================================================================== */
.block-image-columns {
    position: relative;
    padding: 150px 0;
    background-color: var(--color-ink);
}

.block-image-columns__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-image-columns__image {
    width: 65.667%; /* hardcoded: live 2/3 column with the 3% gutter */
    margin-bottom: 5.8vw;
    line-height: 0;
}

.block-image-columns__image img { width: 100%; }

.block-image-columns__items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.block-image-columns__item {
    width: 31.3333%;
    margin-right: 3%;
}

.block-image-columns__item:nth-child(3n),
.block-image-columns__item:last-child { margin-right: 0; }

.block-image-columns__title {
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-cream);
}

.block-image-columns__body {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 150%;
    color: var(--color-steel);
}

.block-image-columns__lead {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: inherit;
    font-weight: 500;
    line-height: 150%;
}

.block-image-columns__body p:not(:last-child) { padding-bottom: 1em; }

/* Spacing "rows" (live /physical-security/): rows of three with 50px between
   them (and under the last one), 10px under each lead. */
.block-image-columns.block-image-columns--rows { padding: 120px 0 177px; }

.block-image-columns--rows .block-image-columns__items {
    row-gap: 50px;
    margin-bottom: 50px;
}

.block-image-columns--rows .block-image-columns__lead { margin-bottom: 10px; }

/* Spacing "titles" (live /digital-identity/): no leads, 89px under the eyebrow,
   every title box at least 70px tall, rows of three 50px apart. */
.block-image-columns.block-image-columns--titles { padding: 120px 0 177px; }
.block-image-columns--titles .block-image-columns__eyebrow { margin-bottom: 89px; }

.block-image-columns--titles .block-image-columns__items {
    row-gap: 50px;
    margin-bottom: 50px;
}

.block-image-columns--titles .block-image-columns__item { min-height: 100px; }
.block-image-columns--titles .block-image-columns__title { min-height: 70px; }

/* Spacing "labels" (live /abis/): 100px over the section, a small steel label
   over each title, 40px under the title. */
.block-image-columns.block-image-columns--labels { padding-top: 100px; }
.block-image-columns--labels .block-image-columns__title { margin-bottom: 40px; }

.block-image-columns__label {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 133%;
    color: var(--color-steel);
}

/* ==========================================================================
   BLOCK-STAT-RANK
   ========================================================================== */
.block-stat-rank {
    position: relative;
    overflow-x: clip; /* the pagination sits 30px right of the container: never wider than the viewport (1025 to 1110px) */
    padding: 126px 0 100px;
    background-color: var(--color-ink);
}

.block-stat-rank__row {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.block-stat-rank__rank {
    width: 40%;
    border-right: 7px solid var(--color-steel);
    font-family: var(--font-bold);
    font-size: 245px;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    color: var(--color-cream);
}

.block-stat-rank__number {
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-stat-rank__prefix {
    display: block;
    font-size: 132px;
}

.block-stat-rank__caption {
    font-size: 18px;
    line-height: 100%;
}

.block-stat-rank__caption a,
.block-stat-rank__slide-caption a {
    font-family: var(--font-regular);
    color: var(--color-rust);
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

.block-stat-rank__slider {
    position: relative;
    width: 60%;
    padding-left: 110px;
}

.block-stat-rank__swiper {
    position: relative;
    z-index: 1;
    height: 280px;
    overflow: hidden;
}

.block-stat-rank .swiper-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition-property: transform;
    box-sizing: content-box;
}

.block-stat-rank__slide {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    transition-property: transform;
}

.block-stat-rank__card { padding: 20px; }

.block-stat-rank__slide-number,
.block-stat-rank__slide-caption { display: none; }

.block-stat-rank__label {
    width: 500px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 82px;
    font-weight: 500;
    line-height: 100%;
    color: var(--color-cream);
}

.block-stat-rank__pagination {
    position: absolute;
    top: 50%;
    right: -30px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(-50%);
}

.block-stat-rank__pagination .swiper-pagination-bullet {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.block-stat-rank__pagination .swiper-pagination-bullet-active { background: rgba(0, 0, 0, 0.75); }

/* Variant "figure" (live /face-recognition/): the rank graphic over a 22.75% + 3% + 74.25% row. */
.block-stat-rank.block-stat-rank--figure { padding: 150px 0; }

.block-stat-rank__figure { line-height: 0; }

.block-stat-rank__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.block-stat-rank__columns { display: flex; }

.block-stat-rank__aside {
    display: flex;
    justify-content: center;
    width: 22.75%;
    margin-right: 3%;
}

.block-stat-rank--figure .block-stat-rank__caption { line-height: 24px; }

.block-stat-rank--figure .block-stat-rank__caption a { font-size: 18px; }

.block-stat-rank__body {
    width: 74.25%;
    padding-left: 130px;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-steel);
}

.block-stat-rank__heading {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-steel);
}

.block-stat-rank__text { margin-bottom: 2.02%; }

/* List variant (live /fingerprint-recognition/ "Top ranked by NIST."): 40px over, 160px under
   (60px up to 1280px); the heading 60px at 115%; a row of the numeral (half the row, the light
   italic hash 218px and the bold digit 438px with 30px between them, centred in 448px) and two
   quarters of claims (18px at 133%, 260px wide, a 14px rust square 20px before the copy, 40px
   apart); the row pads 2vw (2.5vw from 1025 to 1500px, 33px from 1675px). */
.block-stat-rank.block-stat-rank--list { padding: 40px 0 160px; }

.block-stat-rank__title {
    margin-bottom: 40px;
    font-family: var(--font-medium);
    font-size: 60px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

.block-stat-rank__list-row {
    display: flex;
    align-items: flex-start;
    padding: 2vw 0;
}

.block-stat-rank__numeral {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 50%;
    color: var(--color-rust);
}

.block-stat-rank__hash {
    font-family: var(--font-light);
    font-size: 218px;
    font-style: italic;
    font-weight: 300;
    line-height: 100%;
}

.block-stat-rank__digit {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 438px;
    font-weight: 500;
    line-height: 100%;
}

.block-stat-rank__claims {
    width: 25%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 133%;
    color: var(--color-steel);
}

.block-stat-rank__claim {
    display: flex;
    gap: 20px;
    max-width: 260px;
    margin-bottom: 40px;
}

.block-stat-rank__claim::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background-color: var(--color-rust);
}

.block-stat-rank__claim p { line-height: 133%; }
/* live /fingerprint-recognition/: the claim link ("Ranked by NIST") is not underlined */
.block-stat-rank__claim a { color: inherit; text-decoration: none; }

/* ==========================================================================
   BLOCK-RICH-TEXT (+ blinds transition)
   ========================================================================== */
.block-rich-text {
    position: relative;
    padding: 126px 0 140px;
    background-color: var(--color-ink);
}

.block-rich-text--full-height { min-height: 100vh; }

.block-rich-text__heading {
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-cream);
}

.block-rich-text__text {
    margin-bottom: 1.5%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    color: var(--color-steel);
}

.block-rich-text__text p:not(:last-child) { padding-bottom: 1em; }

/* Variant "qa" (live /enroll/ FAQ): eyebrow, the picture beside the first question and
   answer (48.5% each, 3% apart, 120px under them), a second one at full width. */
.block-rich-text.block-rich-text--qa { padding: 150px 0 220px; }

.block-rich-text__eyebrow {
    margin-bottom: 80px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: var(--color-steel);
}

.block-rich-text__split {
    display: flex;
    gap: 3%;
    margin-bottom: 120px;
}

.block-rich-text__media,
.block-rich-text__body { width: 48.5%; }

.block-rich-text__media { line-height: 0; }

.block-rich-text__media img { width: 100%; }

.block-rich-text--qa .block-rich-text__heading { margin-bottom: 30px; }

.block-rich-text--qa .block-rich-text__more .block-rich-text__heading {
    margin-bottom: 24px;
    padding-bottom: 0;
}

.block-rich-text--qa .block-rich-text__text {
    margin-bottom: 0;
    line-height: 24px;
}

.block-rich-text--qa .block-rich-text__text a {
    border-bottom: 2px solid var(--color-rust);
    font-size: 18px;
    line-height: 133%;
}

/* Variant "aside" (live /roc-access/ s3): no section padding, heading and copy in the
   left column, the picture at its own size in the right one (at most the column). */
.block-rich-text.block-rich-text--aside { padding: 0; }

.block-rich-text--aside .block-rich-text__split { margin-bottom: 0; }

.block-rich-text--aside .block-rich-text__heading { margin-bottom: 30px; }

.block-rich-text--aside .block-rich-text__text {
    margin-bottom: 0;
    line-height: 24px;
}

.block-rich-text--aside .block-rich-text__media img {
    width: auto;
    max-width: 100%;
}

/* Variant "figure" (live /roc-evidence/ s2): 3vw over (50px from 1675px), 100px under; two
   halves without a gap, the picture stretched to a 551px square like live (7.6% taller than
   its ratio; cropping it to cover cut off the right of the screenshot) with the live 2px steel outline that follows its cut corner (drop shadows); the
   eyebrow only on phones; tiers in media.css. */
.block-rich-text.block-rich-text--figure { padding: 3vw 0 100px; }

.block-rich-text--figure .block-rich-text__split {
    gap: 0;
    margin-bottom: 0;
}

.block-rich-text--figure .block-rich-text__media,
.block-rich-text--figure .block-rich-text__body { width: 50%; }

.block-rich-text--figure .block-rich-text__media {
    filter: drop-shadow(2px 0 0 var(--color-steel)) drop-shadow(-2px 0 0 var(--color-steel)) drop-shadow(0 2px 0 var(--color-steel)) drop-shadow(0 -2px 0 var(--color-steel));
}

.block-rich-text--figure .block-rich-text__media img {
    width: 551px;
    max-width: 100%;
    height: 551px;
}

.block-rich-text--figure .block-rich-text__eyebrow { display: none; }

.block-rich-text--figure .block-rich-text__text { margin-bottom: 0; }

/* Blinds: fixed overlay of ten cream bars, driven by GSAP (assets/js/main.js). */
.blinds {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.blinds__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blinds__bar {
    display: block;
    flex: 1;
    background: var(--color-cream);
    transform: scaleY(0);
    transform-origin: center;
}

/* Background of the section after a blinds transition (set by the script). */
.page-sections .is-blinds-dark { background-color: var(--color-ink); }
.page-sections .is-blinds-light { background-color: var(--color-cream); }

/* ==========================================================================
   BLOCK-SPLIT-ROWS-MEDIA
   ========================================================================== */
.block-split-rows-media {
    position: relative;
    padding: 126px 0 140px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-split-rows-media--white { background-color: var(--color-white); }

.block-split-rows-media__heading {
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-split-rows-media__row {
    display: flex;
    align-items: flex-start;
    padding: 80px 0;
}

.block-split-rows-media__row:not(:last-child) { border-bottom: 1px solid var(--color-rust); }
.block-split-rows-media__row:last-child { margin-bottom: 40px; }

.block-split-rows-media__title,
.block-split-rows-media__text { width: 48.5%; }

.block-split-rows-media__title { margin-right: 3%; }

.block-split-rows-media__title {
    padding-bottom: 10px;
    font-family: var(--font-light);
    font-size: 45px;
    font-weight: 500;
    line-height: 125%;
}

.block-split-rows-media__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-split-rows-media__text p:not(:last-child) { padding-bottom: 1em; }

.block-split-rows-media__media { display: flex; }

.block-split-rows-media__video {
    position: relative;
    width: 48.5%;
    margin-right: 3%;
    height: clamp(300px, 21.8vw, 365px);
    overflow: hidden;
}

.block-split-rows-media__video:last-child { margin-right: 0; }

.block-split-rows-media__video video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
}

/* ==========================================================================
   BLOCK-NUMBERED-GRID
   ========================================================================== */
.block-numbered-grid {
    position: relative;
    padding: 120px 0;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-numbered-grid--flush-top { padding-top: 0; }

.block-numbered-grid__heading {
    margin-bottom: 80px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

/* Flex columns with percentage widths and margins (not grid) so subpixel column
   positions, and with them the text rasterisation, equal the live layout. */
.block-numbered-grid__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 80px;
}

.block-numbered-grid__item { width: 48.5%; }
.block-numbered-grid__item:nth-child(odd) { margin-right: 3%; }

.block-numbered-grid--gap-wide .block-numbered-grid__item { width: 47.25%; }
.block-numbered-grid--gap-wide .block-numbered-grid__item:nth-child(odd) { margin-right: 5.5%; }

.block-numbered-grid__number {
    margin-bottom: 20px;
    font-family: var(--font-regular);
    font-size: 21px;
    line-height: 160%;
    color: var(--color-rust);
}

.block-numbered-grid__body {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-numbered-grid__body p:not(:last-child) { padding-bottom: 1em; }

.block-numbered-grid__body a {
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

.block-numbered-grid__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.5px;
}

.block-numbered-grid__image { line-height: 0; }

.block-numbered-grid__image img { width: 90%; }

/* Flag animation in the image cell (live /age-estimation/ #flag-lottie in a 459px code module with 40px under it). */
.block-numbered-grid__flag {
    width: 459px;
    margin-bottom: 40px;
}

.block-numbered-grid__actions {
    padding-top: 80px;
    text-align: center;
}

/* Pictures over the heading (live /roc-access/ s9 + s10): no top padding, two pictures
   46% wide 8% apart, 60px over the heading; heading 20px over the 80% intro, 40px and
   100px (live section padding) under the intro before the grid. */
.block-numbered-grid.block-numbered-grid--pictures { padding-top: 0; }

.block-numbered-grid__pictures {
    display: flex;
    gap: 8%;
    margin-bottom: 60px;
    line-height: 0;
}

.block-numbered-grid__picture { width: 46%; }

.block-numbered-grid__phone-only { display: none; }

.block-numbered-grid__picture img { width: 100%; }

.block-numbered-grid--pictures .block-numbered-grid__head { margin-bottom: 140px; } /* the intro's 40px collapses into it */

.block-numbered-grid--pictures .block-numbered-grid__heading { margin-bottom: 20px; }

.block-numbered-grid--pictures .block-numbered-grid__intro {
    width: 80%;
    margin-bottom: 40px;
    line-height: 140%;
    color: var(--color-black);
}

/* Style "ready" (live /physical-security/ "READY TO ROC"): ink section, eyebrow,
   steel heading and intro, rust numbers and cream titles scaled with the screen
   (vw, like live), the image full width below with the live row padding. */
.block-numbered-grid.block-numbered-grid--ready {
    padding: 20px 0;
    background-color: var(--color-ink);
}

.block-numbered-grid__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 20px;
    color: var(--color-cream);
}

.block-numbered-grid--ready .block-numbered-grid__heading {
    margin-bottom: 30px;
    padding-bottom: 0;
    color: var(--color-steel);
}

.block-numbered-grid__intro {
    margin-bottom: 60px;
    font-size: 18px;
    line-height: 133%;
    color: var(--color-steel);
}

.block-numbered-grid--ready .block-numbered-grid__grid { margin-bottom: 215px; }

.block-numbered-grid--ready .block-numbered-grid__item { width: 50%; }
.block-numbered-grid--ready .block-numbered-grid__item:nth-child(odd) { margin-right: 0; }

.block-numbered-grid--ready .block-numbered-grid__number {
    margin-bottom: 1vw;
    font-family: var(--font-medium);
    font-size: 1.45vw;
    line-height: 150%;
}

.block-numbered-grid--ready .block-numbered-grid__body { line-height: 20px; }

.block-numbered-grid--ready .block-numbered-grid__title {
    font-family: var(--font-medium);
    font-size: 2.3vw;
    line-height: 100%;
    letter-spacing: normal;
    color: var(--color-cream);
}

/* Style "services" (also gets the "ready" class): intro at 52% with an outlined
   pill under it, 120px above the grid, bold cream titles. */
.block-numbered-grid.block-numbered-grid--services { padding: 11.8vw 0 8vw; }

.block-numbered-grid--services .block-numbered-grid__head { margin-bottom: 120px; }

.block-numbered-grid--services .block-numbered-grid__intro { width: 52%; }

.block-numbered-grid--services .block-numbered-grid__actions {
    padding-top: 0;
    text-align: left;
}

.block-numbered-grid--services .btn--outline::before {
    width: 12px;
    height: 17px;
}

.block-numbered-grid--services .block-numbered-grid__grid { margin-bottom: 0; }

.block-numbered-grid--services .block-numbered-grid__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
}

/* Style "specs" (live /abis/ "HYPERSCALABLE"): ink section, 120px padding, steel
   heading 90% wide, intro 70% wide, columns 50% minus 80px with 80px between them,
   4vw under the first row and 40px under the others, rust numbers and cream
   titles scaled with the screen (vw), 50px under the titles; tiers in media.css. */
.block-numbered-grid.block-numbered-grid--specs {
    padding: 120px 0;
    background-color: var(--color-ink);
}

.block-numbered-grid--specs .block-numbered-grid__eyebrow { line-height: 142%; }

.block-numbered-grid--specs .block-numbered-grid__heading {
    width: 90%;
    margin-bottom: 1.5%;
    padding-bottom: 0;
    line-height: 64px;
    color: var(--color-steel);
}

.block-numbered-grid--specs .block-numbered-grid__intro { width: 70%; }
/* Live rows: flex rows with an 80px gap whose clearfix is a flex item too (one more
   gap at the end), half-width columns that shrink to fit (never under their longest
   word). */
.block-numbered-grid--specs .block-numbered-grid__grid { display: block; }

.block-numbered-grid--specs .block-numbered-grid__pair {
    display: flex;
    gap: 80px;
    margin-bottom: 40px;
}

.block-numbered-grid--specs .block-numbered-grid__pair::after { content: ""; }
.block-numbered-grid--specs .block-numbered-grid__pair:first-child { margin-bottom: 4vw; }

.block-numbered-grid--specs .block-numbered-grid__item:nth-child(n) {
    width: 50%;
    margin: 0;
}

.block-numbered-grid--specs .block-numbered-grid__number {
    margin-bottom: 1vw;
    font-family: var(--font-medium);
    font-size: 1.45vw;
    line-height: 150%;
}

.block-numbered-grid--specs .block-numbered-grid__body {
    line-height: 24px;
    color: var(--color-steel);
}

.block-numbered-grid--specs .block-numbered-grid__title {
    margin-bottom: 50px;
    font-size: 2.3vw;
    line-height: 100%;
    letter-spacing: normal;
    color: var(--color-cream);
}

/* Style "why" (live capability pages, /face-recognition/ "WHY ROC"): steel section, 120px
   over and 20px under, a steel notch (29% wide, 4.375vw tall, cut at 15.3%) over the
   right end of the section above; ink eyebrow, heading and 55% intro (120px under it);
   rows of two items 80px apart (140px under the last), each item a flex row: the 87px
   number 60px from the title and copy (half the item); tiers in media.css. */
.block-numbered-grid.block-numbered-grid--why {
    padding: 120px 0 20px;
    background-color: var(--color-steel);
}

.block-numbered-grid--why::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-color: var(--color-steel);
    clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
}

.block-numbered-grid--why .block-numbered-grid__eyebrow { color: var(--color-ink); }

.block-numbered-grid--why .block-numbered-grid__heading {
    margin-bottom: 30px;
    padding-bottom: 0;
}

.block-numbered-grid--why .block-numbered-grid__intro {
    width: 55%;
    margin-bottom: 120px;
    color: var(--color-ink);
}

.block-numbered-grid--why .block-numbered-grid__grid { display: block; }

.block-numbered-grid--why .block-numbered-grid__pair {
    display: flex;
    align-items: flex-start;
    margin-bottom: 80px;
}

.block-numbered-grid--why .block-numbered-grid__pair:last-child { margin-bottom: 140px; }

.block-numbered-grid--why .block-numbered-grid__item:nth-child(n) {
    display: flex;
    gap: 60px;
    width: 50%;
    margin: 0;
    padding-bottom: 40px;
}

.block-numbered-grid--why .block-numbered-grid__number {
    margin-bottom: 2.5%;
    font-family: var(--font-medium);
    font-size: 87px;
    line-height: 87px;
    color: var(--color-ink);
}

.block-numbered-grid--why .block-numbered-grid__body {
    width: 50%;
    line-height: 24px;
}

.block-numbered-grid--why .block-numbered-grid__title {
    line-height: 130%;
    letter-spacing: normal;
}

/* Style "advantage" (live /enroll/ "THE ROC ADVANTAGE"): ink section without bottom
   padding, steel heading 90% wide and intro 84% wide, three columns (29.67% with 5.5%
   gutters), rust numbers and steel titles scaled with the screen (vw), copy with rust
   underlined links, the picture full width right under the row; tiers in media.css. */
.block-numbered-grid.block-numbered-grid--advantage {
    padding: 120px 0 0;
    background-color: var(--color-ink);
}

.block-numbered-grid--advantage .block-numbered-grid__eyebrow {
    font-size: 14px;
    line-height: 142%;
}

.block-numbered-grid--advantage .block-numbered-grid__heading {
    width: 90%;
    margin-bottom: 1.5%;
    padding-bottom: 0;
    line-height: 64px;
    color: var(--color-steel);
}

.block-numbered-grid--advantage .block-numbered-grid__intro {
    width: 84%;
    margin-bottom: 80px;
}

.block-numbered-grid--advantage .block-numbered-grid__grid {
    flex-wrap: nowrap;
    margin-bottom: 2vw;
}

.block-numbered-grid--advantage .block-numbered-grid__item:nth-child(n) {
    width: 29.6667%;
    margin-right: 5.5%;
}

.block-numbered-grid--advantage .block-numbered-grid__item:last-child { margin-right: 0; }

.block-numbered-grid--advantage .block-numbered-grid__number {
    margin-bottom: 1vw;
    font-family: var(--font-medium);
    font-size: 1.45vw;
    line-height: 150%;
}

.block-numbered-grid--advantage .block-numbered-grid__body {
    line-height: 24px;
    color: var(--color-steel);
}

.block-numbered-grid--advantage .block-numbered-grid__title {
    margin-bottom: 10px;
    font-size: 2.3vw;
    line-height: 100%;
    letter-spacing: normal;
}

.block-numbered-grid--advantage .block-numbered-grid__body a {
    border-bottom: 2px solid var(--color-rust);
    text-decoration: none;
}

.block-numbered-grid--advantage .block-numbered-grid__below:nth-child(n) { padding: 0; }

.block-numbered-grid__below {
    padding: 2vw 0;
    line-height: 0;
}

.block-numbered-grid__below img { width: 100%; }

/* ==========================================================================
   BLOCK-FLOW-STEPS
   Ink section: eyebrow, steel heading, outlined 719px step cards in a zigzag (odd
   steps left, even steps right). Each card but the last draws a thin rust elbow from
   its outer edge down towards the next card (the live step SVGs); the horizontal run
   is 145px, shorter when the column is too narrow for it to land on the next card,
   none when the column is narrower than 744px. Cards are never wider than the column
   (from 719px down they stack at full width).
   ========================================================================== */
.block-flow-steps {
    padding: 160px 0 20px;
    background-color: var(--color-ink);
}

.block-flow-steps__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-flow-steps__heading {
    width: 90%;
    margin-bottom: 50px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 64px;
    color: var(--color-steel);
}

.block-flow-steps__list {
    container-type: inline-size;
    list-style: none;
}

.block-flow-steps__step { margin-bottom: 36px; }
.block-flow-steps__step:last-child { margin-bottom: 0; }

.block-flow-steps__card {
    --flow-run: min(146px, calc((100cqw - 719px) / 2 + 1px));
    position: relative;
    width: min(719px, 100%);
    padding: 40px;
    border: 1px solid var(--color-steel);
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
    color: var(--color-steel);
}

.block-flow-steps__step:nth-child(even) .block-flow-steps__card { margin-left: auto; }

/* The elbow needs room to land on the next card: shown from a 744px column up. */
@container (min-width: 744px) {
    .block-flow-steps__step:not(:last-child) .block-flow-steps__card::after { content: ""; }
}

.block-flow-steps__step:not(:last-child) .block-flow-steps__card::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 1px);
    width: var(--flow-run);
    height: 135px;
    background: url("assets/images/flow-step-right.svg") right top no-repeat;
}

.block-flow-steps__step:nth-child(even):not(:last-child) .block-flow-steps__card::after {
    left: calc(-1 * var(--flow-run));
    background-image: url("assets/images/flow-step-left.svg");
    background-position: left top;
}

/* Scroll rise (ROC-99): a lower step can trail the one above it by up to the 100px start offset, so each elbow runs
   100px further down (the same stroke as the step SVG) behind the next card (ink fill; every step paints over the
   one before) and stays joined. */
.block-flow-steps--rise .block-flow-steps__card { background-color: var(--color-ink); }

.block-flow-steps--rise .block-flow-steps__step:not(:last-child) .block-flow-steps__card::after {
    height: 235px;
    background:
        url("assets/images/flow-step-right.svg") right top no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='146' height='100'><path d='M145 0V100' stroke='%23C7493A'/></svg>") right 135px no-repeat;
}

.block-flow-steps--rise .block-flow-steps__step:nth-child(even):not(:last-child) .block-flow-steps__card::after {
    background:
        url("assets/images/flow-step-left.svg") left top no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='146' height='100'><path d='M0.5 0V100' stroke='%23C7493A'/></svg>") left 135px no-repeat;
}

.block-flow-steps__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
}

.block-flow-steps__more { display: none; }

.block-flow-steps__more .btn:hover { color: var(--color-rust); }

/* ==========================================================================
   BLOCK-SPEC-COLUMNS
   Steel section: ink eyebrow, then rows of two spec groups (48.5% wide, 3% apart,
   80px between rows), each an ink heading (2.3vw) over a list: 38px items 24px
   apart, a 3px cream bar 24px left of each item. Like live, an item keeps its 38px
   slot when its copy runs to a second line (the line spills into the gap).
   ========================================================================== */
.block-spec-columns {
    padding: 120px 0;
    background-color: var(--color-steel);
    color: var(--color-ink);
}

.block-spec-columns__eyebrow {
    margin-bottom: 80px;
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 142%;
}

.block-spec-columns__grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 3%;
    row-gap: 80px;
}

.block-spec-columns__group { width: 48.5%; }

.block-spec-columns__heading {
    margin-bottom: 28px;
    font-family: var(--font-bold);
    font-size: 2.3vw;
    font-weight: 500;
    line-height: 130%;
}

.block-spec-columns__list {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-spec-columns__list ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 0 1em 24px;
    list-style: none;
}

/* Live items are flex rows: "#1", the link and the rest wrap as separate pieces. */
.block-spec-columns__list li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    height: 38px;
}

.block-spec-columns__list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: -24px;
    width: 3px;
    height: 38px;
    background-color: var(--color-cream);
}

.block-spec-columns__list a { text-decoration: underline; }

/* ==========================================================================
   BLOCK-MEDIA-CARDS
   ========================================================================== */
.block-media-cards {
    position: relative;
    padding: 80px 0 120px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-media-cards--dark {
    background-color: var(--color-ink);
    color: var(--color-cream);
}

.block-media-cards__heading {
    margin-bottom: 80px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-media-cards__card {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--color-steel);
}

.block-media-cards__text {
    width: 58.8%;
    padding: 30px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-media-cards--dark .block-media-cards__text { padding: 30px 60px; }

.block-media-cards__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.5px;
}

.block-media-cards--dark .block-media-cards__title { margin-bottom: 66px; }
.block-media-cards--dark .block-media-cards__copy { letter-spacing: 0.5px; }

.block-media-cards__copy p:not(:last-child) { padding-bottom: 1em; }

.block-media-cards__card--link { cursor: pointer; }

.block-media-cards__title a {
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

.block-media-cards__media {
    position: relative;
    width: 38.2%;
    height: 371px;
    overflow: hidden;
}

.block-media-cards--media-right .block-media-cards__text,
.block-media-cards--media-left .block-media-cards__media { margin-right: 3%; }

.block-media-cards__media video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Like live: the width attribute (natural width) up to the column, so a narrower
   photo keeps its own width; at least 367px tall, cropped by cover. */
.block-media-cards__media img {
    display: block;
    max-width: 100%;
    height: auto;
    min-height: 367px;
    object-fit: cover;
}

.block-media-cards__media--right video,
.block-media-cards__media--right img { object-position: 100% 50%; }

.block-media-cards__media--left video,
.block-media-cards__media--left img { object-position: 0 0; }

/* ==========================================================================
   BLOCK-TITLE-IMAGE-BAND
   ========================================================================== */
.block-title-image-band {
    position: relative;
    min-height: var(--screen-h);
    padding: 3% 0;
    background-color: var(--color-white);
}

.block-title-image-band__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
}

.block-title-image-band__inner { padding: 2% 0; }

.block-title-image-band__title {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 176px;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: 0.06px;
    text-align: center;
    color: var(--color-cream);
}

/* ==========================================================================
   Toggle icons (plus / minus, template-parts/partials/icon-plus-minus.php)
   ========================================================================== */
.icon-toggle {
    display: block;
    width: 32px;
    height: 32px;
}

.icon-toggle--minus { display: none; }
.is-open .icon-toggle--plus { display: none; }
.is-open .icon-toggle--minus { display: block; }

/* Accordion panels clip while they slide (assets/js/main.js) and never serve
   as the scroll anchor, so the page does not shift under the pointer. */
.is-animating {
    overflow: hidden;
    overflow-anchor: none;
}

/* ==========================================================================
   BLOCK-ACCORDION-LIST
   ========================================================================== */
.block-accordion-list {
    position: relative;
    padding: 80px 0 120px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-accordion-list__heading {
    margin-bottom: 80px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-accordion-list__list { counter-reset: accordion; }

.block-accordion-list__item {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-steel);
    counter-increment: accordion;
}

.block-accordion-list__item:first-child { border-top: 1px solid var(--color-steel); }

/* Hover: a rust band sweeps in from the left. */
.block-accordion-list__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.block-accordion-list__item:hover::before {
    width: 100%;
    background-color: var(--color-rust);
}

/* An open row keeps the section colours (ink title and text on cream; the dark
   theme rows are ink anyway), so opening never flashes a black block and the
   open text stays readable once the hover band slides away. Live Divi fills
   the open row with ink and greys its text out (not copied). */
.block-accordion-list__item.is-open { margin-bottom: 1px; }

.block-accordion-list__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 0;
    cursor: pointer;
}

.block-accordion-list__title {
    padding-left: 100px;
    font-family: var(--font-medium);
    font-size: 50px;
    font-weight: 500;
    line-height: 1.3em;
    transition: color 300ms ease 0ms;
}

.block-accordion-list__title::before {
    content: counter(accordion, decimal-leading-zero);
    position: absolute;
    left: 12px;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-steel);
}

.block-accordion-list__icon {
    align-self: flex-start;
    flex-shrink: 0;
    margin-top: 14px;
    padding-right: 60px;
    color: var(--color-ink);
}

.block-accordion-list__item:hover .block-accordion-list__title,
.block-accordion-list__item:hover .block-accordion-list__title::before,
.block-accordion-list__item:hover .block-accordion-list__icon { color: var(--color-cream); }

.block-accordion-list__panel {
    position: relative; /* stays above the hover band of an open row */
    padding: 20px 100px 40px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 135%;
    color: var(--color-ink);
}

.block-accordion-list__panel p {
    margin-bottom: 20px;
    line-height: 140%;
}

/* Panel content: bold lead (h6), paragraphs, two-column square bullet list and
   an underlined "Learn More" link (live Divi text defaults inside the panel). */
.block-accordion-list__panel h6 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 135%;
}

.block-accordion-list__panel strong { font-weight: 600; }

/* Industry link under a panel text (front page, live "faq-link"): cream text, arrow and a rust line; the line
   turns ink while the row is hovered, and on the link itself an ink line grows to 90%. */
.block-accordion-list__panel a.faq-link {
    position: relative;
    padding-right: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-rust);
    font-size: 18px;
    line-height: 28px;
    color: var(--color-cream);
    text-decoration: none;
    transition: all 1s ease-out;
}

.block-accordion-list__panel a.faq-link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--color-ink);
    transition: all 0.7s ease-out;
}

.block-accordion-list__panel a.faq-link::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: url("assets/images/arrow-long-cream.svg") right center no-repeat;
}

.block-accordion-list__item:hover a.faq-link { border-color: var(--color-ink); }

.block-accordion-list__panel a.faq-link:hover { border-bottom-color: transparent; }

.block-accordion-list__panel a.faq-link:hover::before { width: 90%; }

/* Divi spacing: every paragraph but the last one of the panel (a list may follow it) */
.block-accordion-list__panel p:not(:last-of-type) { padding-bottom: 1em; }

.block-accordion-list__panel ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 23px 1em;
    font-size: 16px;
    line-height: 26px;
}

.block-accordion-list__panel li {
    width: 40%;
    list-style-type: square;
}

.block-accordion-list__panel li span {
    font-size: 18px;
    line-height: 135%;
}

.block-accordion-list__link {
    position: relative;
    z-index: 1;
    padding: 0 24px 10px 0;
    border-bottom: 1px solid var(--color-rust);
    color: var(--color-cream);
    transition: all 1s ease-out;
}

.block-accordion-list__link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--color-ink);
    transition: all 0.7s ease-out;
}

.block-accordion-list__link:hover::before { width: 90%; }

.block-accordion-list__link::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: url("assets/images/arrow-long-cream.svg") right center no-repeat;
}

/* Dark theme with a side eyebrow (live /national-security/ "USE CASES"). */
.block-accordion-list.block-accordion-list--dark {
    padding: 100px 0 240px;
    background-color: var(--color-ink);
    color: var(--color-cream);
}

.block-accordion-list__row {
    display: flex;
    align-items: flex-start;
}

.block-accordion-list__eyebrow {
    width: 21.7%;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-accordion-list--side .block-accordion-list__list { width: 75.25%; }

/* hardcoded: live module border, a 1px black line under the list */
.block-accordion-list--dark .block-accordion-list__list { border-bottom: 1px solid var(--color-black); }

.block-accordion-list--dark .block-accordion-list__title {
    font-family: var(--font-medium);
    letter-spacing: 1px;
}

.block-accordion-list--dark .block-accordion-list__icon {
    align-self: center;
    height: 36px;
    margin-top: 0;
    color: var(--color-steel);
}

.block-accordion-list--dark .block-accordion-list__item:first-child:hover { border-top-color: var(--color-rust); }

/* Stacked side variant (live /public-safety/ "CAPABILITIES"): Divi's plain 3/4
   column, no title spacing, no line under the list. */
.block-accordion-list.block-accordion-list--stacked { padding: 13.5vw 0 5vw; }
.block-accordion-list--stacked .block-accordion-list__eyebrow { text-transform: uppercase; }
.block-accordion-list--side.block-accordion-list--stacked .block-accordion-list__list {
    width: 74.25%;
    border-bottom: 0;
}
.block-accordion-list--stacked .block-accordion-list__title { letter-spacing: normal; }
/* with a heading above the list (live /object-detection/ "APPLICATIONS"): the 3/4 column holds both, the heading 8px up and 30px over the list */
.block-accordion-list--stacked .block-accordion-list__main { width: 74.25%; }
.block-accordion-list--stacked .block-accordion-list__main .block-accordion-list__heading { margin: -8px 0 30px; }
.block-accordion-list--roomy .block-accordion-list__eyebrow { text-transform: none; }

/* Compact side variant (live capability pages, /face-recognition/ "CAPABILITIES"): stacked
   with 50px above and 100px below; tiers in media.css. */
.block-accordion-list.block-accordion-list--compact { padding: 50px 0 100px; }
.block-accordion-list.block-accordion-list--partners { padding: 0 0 7vw; }

/* Heading above the list in the right column (with a side eyebrow). */
.block-accordion-list--side .block-accordion-list__main .block-accordion-list__list { width: auto; }
.block-accordion-list__main .block-accordion-list__heading {
    margin-bottom: 50px;
    padding-bottom: 0;
    color: var(--color-steel);
}

/* Padded side variant (live /physical-security/ "APPLICATIONS"): 25px row
   padding, Divi's plain 3/4 column for the heading and the list. */
.block-accordion-list--padded .block-accordion-list__row { padding: 0 25px; }
.block-accordion-list--padded .block-accordion-list__main { width: 74.25%; }
.block-accordion-list--padded .block-accordion-list__row > .block-accordion-list__list { width: 74.25%; }

/* Live quirk: a hovered row pulls up by 2px and the rows below by 3px more
   (its matching padding is overridden on live, so only the margins apply). */
.block-accordion-list--dark .block-accordion-list__item { background-color: var(--color-ink); }

.block-accordion-list--dark .block-accordion-list__item:hover {
    margin: -2px 0 -3px;
    transition: all 1s ease;
}

.block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__title::before,
.block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__icon { color: var(--color-ink); }

/* Live panel colours: white list markers, steel text, cream link; on a hovered
   row the text turns ink and the list items take the text size (live quirk:
   the open row grows by a few pixels while hovered). */
.block-accordion-list--dark .block-accordion-list__panel { color: var(--color-white); }

.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 {
    line-height: 135%;
    color: var(--color-steel);
}

.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__panel li { color: var(--color-ink); }

.block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__panel li {
    font-size: 18px;
    line-height: 135%;
}

.block-accordion-list--dark .block-accordion-list__item:hover .block-accordion-list__link { border-color: var(--color-ink); }

/* ==========================================================================
   BLOCK-TESTIMONIAL-CAROUSEL
   Cream section: quote mark, one-slide Swiper (6.7.5, loop, 300ms) with square
   arrows at the top right, attribution pinned under the quote, an underlined
   link at the bottom right, then a "Deployed by" row.
   ========================================================================== */
.block-testimonial-carousel {
    position: relative;
    min-height: 800px;
    padding: 3% 0;
    background-color: var(--color-cream);
    color: var(--color-black);
}

.block-testimonial-carousel__main { padding-top: 2%; }

.block-testimonial-carousel__body {
    position: relative;
    display: flow-root; /* live column: the carousel's bottom margin stays inside */
}

.block-testimonial-carousel__mark {
    max-width: 30%;
    margin-bottom: 60px;
    line-height: 0;
}

.block-testimonial-carousel__mark img { width: auto; }

.block-testimonial-carousel__carousel {
    position: relative;
    margin-bottom: 1.5%;
}

.block-testimonial-carousel__carousel .swiper-container { margin-bottom: 60px; }

.block-testimonial-carousel__slide {
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}

.block-testimonial-carousel__quote {
    display: flex;
    width: 75%;
    min-height: 330px; /* a longer quote pushes the attribution down (live lets it run over it) */
    font-family: var(--font-light);
    font-size: 45px;
    font-weight: 300;
    line-height: 64px;
}

.block-testimonial-carousel__attribution {
    position: absolute;
    bottom: 0;
    width: 50%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 24px;
    color: var(--color-ink);
}

.block-testimonial-carousel__arrow {
    position: absolute;
    top: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    border: 1px solid var(--color-ink);
    background-color: var(--color-cream);
}

.block-testimonial-carousel__arrow:hover { border-color: var(--color-rust); }

.block-testimonial-carousel__arrow::before {
    content: "";
    width: 14px;
    height: 21px;
    margin: 0 auto;
    background: url("assets/images/chevron-left-ink.svg") center / cover no-repeat;
}

.block-testimonial-carousel__arrow--prev { right: 76px; }
.block-testimonial-carousel__arrow--next { right: 0; }
.block-testimonial-carousel__arrow--next::before { background-image: url("assets/images/chevron-right-ink.svg"); }

.block-testimonial-carousel__link-wrap {
    position: absolute;
    right: 0;
    bottom: 42px;
    z-index: 2; /* above the Swiper container (z-index 1) it overlaps */
    height: 50px;
    font-size: 16px;
    line-height: 24px;
}

.block-testimonial-carousel--plain .block-testimonial-carousel__link { font-weight: 500; }

.block-testimonial-carousel--flow .block-testimonial-carousel__link-wrap {
    position: relative;
    bottom: auto;
    height: auto;
    margin: -82px 0 60px;
    text-align: right;
}

.block-testimonial-carousel--flow .block-testimonial-carousel__link { font-weight: 400; }

.block-testimonial-carousel__logos {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 2% 0;
}

.block-testimonial-carousel__logos-label {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 16px;
}

.block-testimonial-carousel__logos-list {
    font-family: var(--font-medium);
    font-size: 36px;
    line-height: 24px;
    color: var(--color-ink);
}

.block-testimonial-carousel__sep {
    margin: 0 20px;
    color: var(--color-steel);
}

/* ==========================================================================
   BLOCK-FLAG-CTA
   Rust band: flag left (vertically centered), copy right. Two equal columns
   (48.5% + 3% gutter like the live row); the copy column is indented 100px.
   ========================================================================== */
.block-flag-cta {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    background-color: var(--color-rust);
    color: var(--color-ink);
}

.block-flag-cta__row {
    display: flex;
    padding: 40px 0;
}

.block-flag-cta__media {
    display: flex;
    align-items: center;
    width: 48.5%;
    margin-right: 3%;
}

.block-flag-cta__flag {
    width: 459px;
    margin-bottom: 40px;
    line-height: 0;
}

.block-flag-cta__flag img { width: 100%; }

/* Animated flag box (flag-cta, code of ethics; live #flag-lottie): the drawing is 0.2% larger than its box and
   clipped, its height follows the drawing; lottie's own layer transform is kept. */
.flag-lottie { overflow: hidden; }

.flag-lottie svg {
    width: 100.2%;
    height: 100.2%;
    max-width: none;
    transform: translate3d(0, 0, 0);
}

.block-flag-cta__content {
    width: 48.5%;
    padding: 20px 0 20px 100px;
}

.block-flag-cta__heading {
    margin-bottom: 20px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-flag-cta__text,
.block-flag-cta__item {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-flag-cta__text { margin-bottom: 25px; }

.block-flag-cta__list { list-style: none; }

.block-flag-cta__item {
    position: relative;
    margin-bottom: 3.093%; /* hardcoded: live module spacing, % of the column width */
    padding-left: 40px;
}

.block-flag-cta__item:last-child { margin-bottom: 40px; }

.block-flag-cta__item-text { display: block; }

.block-flag-cta__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: var(--color-ink);
}

.block-flag-cta__actions { margin-top: -15px; }

/* Cream theme (live /public-safety/): 60px padding, the flag stacked in its
   centred column (60px under it), black heading, 24px copy leading, rust
   bullets, no gap under the list. */
.block-flag-cta.block-flag-cta--cream {
    padding: 60px 0;
    background-color: var(--color-cream);
    color: var(--color-black);
}
.block-flag-cta--cream .block-flag-cta__media {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.block-flag-cta--cream .block-flag-cta__flag { margin-bottom: 60px; }
/* Animated flag on cream (live /public-safety/ #flag-lottie in a 459px code module with 40px under it; 100% on phones). */
.block-flag-cta--cream .block-flag-cta__flag.flag-lottie {
    width: 459px;
    margin-bottom: 40px;
}
.block-flag-cta--cream .block-flag-cta__heading { line-height: 64px; }
.block-flag-cta--cream .block-flag-cta__text,
.block-flag-cta--cream .block-flag-cta__item {
    line-height: 24px;
    color: var(--color-ink);
}
.block-flag-cta--cream .block-flag-cta__text { margin-bottom: 24px; }
.block-flag-cta--cream .block-flag-cta__item::before { background-color: var(--color-rust); }
.block-flag-cta--cream .block-flag-cta__item:last-child { margin-bottom: 0; }

/* Ink theme (live /digital-identity/): steel copy, rust bullets, 80px row padding,
   no gap under the list. */
.block-flag-cta.block-flag-cta--ink {
    background-color: var(--color-ink);
    color: var(--color-steel);
}
.block-flag-cta--ink .block-flag-cta__row { padding: 80px 0; }
.block-flag-cta--ink .block-flag-cta__flag { margin-bottom: 0; }
.block-flag-cta--ink .block-flag-cta__text { margin-bottom: 24px; }
.block-flag-cta--ink .block-flag-cta__item::before { background-color: var(--color-rust); }
.block-flag-cta--ink .block-flag-cta__item:last-child { margin-bottom: 0; }

/* Ink-top theme (live /roc-watch-schools/): 150px padding, flag (459px) and copy
   both start at the top of the row, no copy indent, steel 133% copy, outlined
   pill with the small rust arrow. */
.block-flag-cta.block-flag-cta--ink-top {
    padding: 150px 0;
    background-color: var(--color-ink);
    color: var(--color-steel);
}
.block-flag-cta--ink-top .block-flag-cta__row { padding: 0; }
.block-flag-cta--ink-top .block-flag-cta__media { align-items: flex-start; }
.block-flag-cta--ink-top .block-flag-cta__content { padding: 0; }
.block-flag-cta--ink-top .block-flag-cta__text {
    margin-bottom: 3.093%; /* hardcoded: live module spacing, % of the column width */
    line-height: 133%;
}
.block-flag-cta--ink-top .block-flag-cta__actions { margin-top: 0; }
.block-flag-cta--ink-top .btn--outline::before {
    width: 12px;
    height: 17px;
}

/* Steel theme (ink-top plus, live /watch/): steel band, black heading, the flag 90% of its column with
   nothing under it, ink copy 80% wide, ink pill with the rust carrot. */
.block-flag-cta.block-flag-cta--steel {
    background-color: var(--color-steel);
    color: var(--color-black);
}
.block-flag-cta--steel .block-flag-cta__flag {
    width: 90%;
    margin-bottom: 0;
}
.block-flag-cta--steel .block-flag-cta__text {
    width: 80%;
    color: var(--color-ink);
}
.block-flag-cta--steel .block-flag-cta__actions { margin-top: -15px; }
.block-flag-cta--steel .btn--ink::before,
.block-flag-cta--steel .btn--ink:hover::before { background-image: url("assets/images/carrot-rust.svg"); }

/* Ink-top-short theme (ink-top plus, live /sdk/): 33px over the row and 150px under it, the flag 90% of its
   column with nothing under it. */
.block-flag-cta.block-flag-cta--ink-top-short { padding: 33px 0 150px; }
.block-flag-cta--ink-top-short .block-flag-cta__flag {
    width: 90%;
    margin-bottom: 0;
}
.block-flag-cta--ink-top-short .block-flag-cta__text { margin-bottom: 0; }

/* Steel-top theme (steel plus, live capability pages, /face-recognition/): no padding over
   the row (the steel section above runs into it), 150px under it, 40px under the heading;
   tiers in media.css. */
.block-flag-cta.block-flag-cta--steel-top { padding: 0 0 150px; }
.block-flag-cta--steel-top .block-flag-cta__flag { width: 459px; }
.block-flag-cta--steel-top .block-flag-cta__heading { margin-bottom: 40px; }

/* Corner tab: a section-coloured tab with a cut corner over the previous section. */
.block-flag-cta.block-flag-cta--top-tab { overflow: visible; }
.block-flag-cta--top-tab::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-color: inherit;
    clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================================================
   BLOCK-PRODUCT-TABS
   850px stage with the active product's background (cover, bottom right), the
   product copy in a fixed 555px band and the tab row under it. The bottom
   padding of the section is the live 60px gap on ink. Phones stack every
   product with its phone image; tabs and backgrounds are hidden there.
   ========================================================================== */
.block-product-tabs {
    position: relative;
    padding-bottom: 60px;
    background-color: var(--color-ink);
}

.block-product-tabs__stage {
    position: relative;
    max-width: 1920px;
    height: 850px;
    margin: 0 auto;
    padding: 80px 0 84px;
}

.block-product-tabs__backgrounds {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.block-product-tabs__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 100% 100%;
    opacity: 0;
}

.block-product-tabs__bg.is-active { opacity: 1; }

.block-product-tabs__eyebrow {
    margin-bottom: 50px;
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-cream);
}

.block-product-tabs__panels {
    height: 555px;
    padding-bottom: 65px;
}

.block-product-tabs__panel { display: none; }
.block-product-tabs__panel.is-active { display: block; }

.block-product-tabs__phone-image { display: none; }

.block-product-tabs__logo {
    min-height: 80px;
    margin-bottom: 55px;
    line-height: 0;
}

/* Intrinsic size; the tall stage keeps the width attribute like live (a 592px
   logo renders 0.2px wider in the 80% zoom band than its auto width). */
.block-product-tabs:not(.block-product-tabs--tall) .block-product-tabs__logo img { width: auto; }

.block-product-tabs__text {
    width: 30%;
    min-height: 180px;
    margin-bottom: 100px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
    color: var(--color-steel);
}

.block-product-tabs__heading {
    padding-bottom: 10px;
    font-family: var(--font-black);
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
}

.block-product-tabs__actions { margin-bottom: 95px; }

.block-product-tabs__tabs {
    display: flex;
    margin-top: 11px; /* hardcoded: live copy band overflows its 555px height by 11px and pushes the floated tabs down */
}

.block-product-tabs__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 68px;
    padding: 0 1em;
    border: 1px solid var(--color-steel);
    background-color: rgba(17, 17, 20, 0.8);
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-cream);
    transition: 0.3s;
}

.block-product-tabs__tab:hover {
    border-color: transparent; /* live drops the border on hover */
    background-color: var(--color-rust);
    color: var(--color-ink);
}

.block-product-tabs__tab.is-active {
    background-color: var(--color-steel);
    color: var(--color-ink);
}

/* Tall stage (live /public-safety/): 950px, full width, no gap under it, 18px
   eyebrow, 700 headings, the copy sits at the bottom of its 180px band, and the
   tab row keeps a 4.38vw bottom padding (shows where the stage height is auto). */
.block-product-tabs.block-product-tabs--tall { padding-bottom: 0; }
.block-product-tabs--tall .block-product-tabs__stage {
    max-width: none;
    height: 950px;
}
.block-product-tabs--tall .block-product-tabs__eyebrow {
    font-size: 18px;
    line-height: 142%;
}
.block-product-tabs--tall .block-product-tabs__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.block-product-tabs--tall .block-product-tabs__heading { font-family: var(--font-bold); }
.block-product-tabs--tall .block-product-tabs__tabs { padding-bottom: 4.38vw; }

/* Capability stage (live capability pages, /face-recognition/): tall with 350px logos
   from 981px up and no padding under the tab row; tiers in media.css. */
.block-product-tabs--capability .block-product-tabs__tabs { padding-bottom: 0; }
.block-product-tabs--capability .block-product-tabs__logo { width: 350px; }

/* Single stage (live /digital-identity/): one product, no tab row (live keeps
   an empty 1px row under the copy band), 750px, full width, no gap under it,
   18px eyebrow, 700 heading, the background at its own size in the bottom
   right corner. */
.block-product-tabs.block-product-tabs--single { padding-bottom: 0; }
.block-product-tabs--single .block-product-tabs__stage {
    max-width: none;
    height: 750px;
}
.block-product-tabs--single-tall .block-product-tabs__stage { height: 800px; } /* live /tattoo-recognition/; tiers below 1281px as "single" */
.block-product-tabs--single .block-product-tabs__bg { object-fit: none; }
.block-product-tabs--single .block-product-tabs__eyebrow {
    font-size: 18px;
    line-height: 142%;
}
.block-product-tabs--single .block-product-tabs__heading { font-family: var(--font-bold); }
.block-product-tabs--single .block-product-tabs__panels { margin-bottom: 12px; } /* hardcoded: the copy band overflow (11px) plus the empty 1px tab row */

/* ==========================================================================
   BLOCK-IMAGE-CTA
   ========================================================================== */
.block-image-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--screen-h);
    padding: 120px 0;
    background-color: var(--color-white);
    color: var(--color-cream);
}

.block-image-cta__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.block-image-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(0deg, var(--color-ink) 0%, rgba(255, 255, 255, 0) 100%);
}

.block-image-cta__heading {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-image-cta__row {
    display: flex;
    align-items: flex-start;
}

.block-image-cta__text {
    width: 65.667%;
    margin-right: 3%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.25px;
}

.block-image-cta__text p:not(:last-child) { padding-bottom: 1em; }

.block-image-cta__actions {
    display: flex;
    align-items: flex-end;
    width: 31.3333%;
}

/* Variant "tall" (live /roc-evidence/ s9): 118% of the screen height, 3vw over (50px from
   1675px) and 13vw under the text; tiers in media.css. */
.block-image-cta.block-image-cta--tall {
    min-height: calc(var(--screen-h) * 1.18);
    padding: 3vw 0 13vw;
}

/* ==========================================================================
   BLOCK-CTA-FORM
   Photo plus a Formidable multi-step form. The form look on every step comes
   from the site form stylesheet (Custom CSS & JS snippet, #survey-light /
   .footerform hooks on the wrapper, printed site-wide). The rules below are
   the base that snippet relied on from Divi and Divi_Child, which the ROC
   theme does not load.
   ========================================================================== */
.block-cta-form {
    position: relative;
    padding: 160px 0;
    background-color: var(--color-cream);
}

.block-cta-form .container { padding: 2% 0; }

/* Bottom line: the live #light-surv snippet draws 1px of ink under the section. */
.block-cta-form--line { border-bottom: 1px solid var(--color-ink); }

.block-cta-form__image {
    margin-bottom: 64px;
    line-height: 0;
}

.block-cta-form__image img {
    width: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 11.4% 100%, 0% 71%);
}

/* Dark variant (live /national-security/): ink section, the photo keeps its own
   cut corners, a small right-aligned caption under it. */
.block-cta-form.block-cta-form--dark {
    padding-bottom: 90px;
    background-color: var(--color-ink);
}

/* forms.css draws a 3px cream border around every Formidable form; live removes
   it on this page. Keep its width, since the negative form margin relies on it. */
.block-cta-form--dark .block-cta-form__form .frm-show-form { border-color: transparent; }

.block-cta-form--dark .block-cta-form__form { position: relative; }

.block-cta-form--dark .block-cta-form__form .frm_submit { z-index: 1; }

.block-cta-form--dark .block-cta-form__form .frm_forms .frm_submit button.frm_prev_page {
    font-weight: 700;
    color: var(--color-steel);
}

.block-cta-form--dark .block-cta-form__form .frm_submit .frm_prev_page::before { content: url("assets/images/arrow-back-steel.svg"); }

.block-cta-form--plain-image .block-cta-form__image img { clip-path: none; }

.block-cta-form.block-cta-form--flush-top { padding-top: 0; }

/* beats the survey snippet's 24px column gap (#survey-dark ... .frm_fields_container) */
.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,
.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 { gap: clamp(12px, 1.25vw, 24px); }

.block-cta-form--captioned .block-cta-form__image { margin-bottom: 16px; }

.block-cta-form__caption {
    margin-bottom: 64px;
    font-family: var(--font-regular);
    font-size: 10px;
    line-height: 12px;
    text-align: right;
    color: var(--color-steel);
}

.block-cta-form__caption br { display: none; }

.block-cta-form__form .frm_forms.with_frm_style { max-width: 100%; }

/* The snippet gives every Formidable form a 3px cream border (important); on
   the cream section it is invisible, the negative margin (inside a new block
   formatting context, so it does not collapse outward) keeps the layout. */
.block-cta-form__form { display: flow-root; }
.block-cta-form__form .frm-show-form { margin: -3px; }

.block-cta-form__form #form { scroll-margin-top: 200px; }

.block-cta-form__form h2 {
    padding-bottom: 10px;
    font-weight: 500;
    line-height: 1.3em;
}

.block-cta-form__form h3 {
    font-size: 24px;
    font-weight: 700;
}

.block-cta-form__form .frm_primary_label,
.block-cta-form__form .frm_page_num_3 h3.frm_pos_top.frm_section_spacing {
    margin: 0 0 clamp(15px, 1.45vw, 27px);
    border: 0;
    font-size: clamp(24px, 1.45vw, 28px);
    font-weight: 700;
    line-height: 128%;
    color: var(--color-steel);
}

.block-cta-form__form .frm_required { display: none; }

.block-cta-form__form .frm_submit.frm_flex {
    position: absolute;
    bottom: 0;
    justify-content: center;
}

.block-cta-form__form .frm_page_num_1 .frm_submit.frm_flex { justify-content: flex-end; }

.block-cta-form__form button {
    font-family: var(--font-bold);
    font-weight: 700;
}

.block-cta-form__form .frm_button_submit::after {
    width: 16px;
    height: 16px;
}

.block-cta-form__form .frm_forms .frm_submit button.frm_prev_page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 100px;
    box-shadow: none;
    background-color: transparent;
    font-size: clamp(16px, 0.83vw, 18px);
    text-shadow: none;
}

.block-cta-form__form .frm_submit .frm_prev_page::before {
    display: block;
    height: 16px;
}

.block-cta-form__form .frm_opt_container { display: flex; }

.block-cta-form__form .frm_page_num_2 .frm_opt_container {
    flex-wrap: wrap;
    height: clamp(133px, 13vw, 250px);
    padding: clamp(30px, 3vw, 60px) 0;
    border-top: 1px solid var(--color-steel);
    border-bottom: 1px solid var(--color-steel);
}

.block-cta-form__form .with_frm_style .frm_checkbox input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--color-cream);
    background: #111111;
}

.block-cta-form__form .with_frm_style .frm_checkbox input[type="checkbox"]::before {
    width: 8px;
    height: 8px;
    margin: 3px auto;
    box-shadow: none;
    background-color: var(--color-rust);
}

.block-cta-form__form .frm_page_num_3 input {
    height: 47px;
    border-radius: 0;
}

.block-cta-form__form .frm_page_num_3 .frm_section_heading { margin: 0; }
.block-cta-form__form .frm_page_num_3 .frm_form_field { margin-bottom: 30px; }

/* ==========================================================================
   BLOCK-RELATED-POSTS
   ========================================================================== */
.block-related-posts {
    position: relative;
    overflow-x: clip; /* live clips the 200px tags at the page edge on narrow cards */
    padding: 128px 0 160px;
    background-color: var(--color-ink);
}

/* Stepped steel stripe along the bottom edge (two flipped trapezoids). */
.block-related-posts::before,
.block-related-posts::after {
    content: "";
    position: absolute;
    z-index: 999;
    width: 50%;
    height: 63px;
    background: var(--color-steel);
    transform: scaleY(-1);
}

.block-related-posts::before {
    right: 0;
    bottom: 0;
    clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.block-related-posts::after {
    left: 0;
    bottom: 63px;
    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0% 100%);
}

.block-related-posts .container { display: flow-root; } /* keeps the grid's bottom margin inside */

.block-related-posts__eyebrow {
    padding-bottom: 80px;
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 142%;
    text-transform: uppercase;
    color: var(--color-steel);
}

.block-related-posts__grid {
    text-align: start; /* like live: the cards are not a Divi "align left" module */
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    margin-bottom: 96px;
}

.block-related-posts__item {
    display: flex;
    flex-direction: column;
    width: 33%;
}

.block-related-posts__link {
    display: block;
    color: #e02826; /* hardcoded: live link color, only the card box inherits it */
}

.block-related-posts__thumb {
    position: relative;
    display: flex;
    width: 100%;
    height: 232px;
    margin-bottom: 24px;
}

.block-related-posts__thumb img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: bottom left;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 5.85% 100%, 0% 91%);
}

.block-related-posts__tag {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 24px;
    padding-top: 2px;
    /* ink outline on the ink module instead of live's cream one (Evan, DIGITAL-312): it still parts the rust label from
       rust or ochre in the photo; the cream /blog/ cards keep the cream outline */
    border-right: 3px solid var(--color-ink);
    border-bottom: 3px solid var(--color-ink);
    background: var(--color-rust);
    font-family: var(--font-bold);
    font-size: clamp(14px, 0.83vw, 16px);
    text-transform: uppercase;
    color: var(--color-cream);
}

.block-related-posts__meta {
    display: flex;
    flex-direction: column;
}

.block-related-posts__meta h3 {
    margin-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
    color: var(--color-cream);
}

.block-related-posts__meta p {
    margin-bottom: 24px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    color: var(--color-steel);
}

.block-related-posts time {
    display: flex;
    font-family: var(--font-medium);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-slate);
}

/* ==========================================================================
   BLOCK-FAQ-ACCORDION
   ========================================================================== */
.block-faq-accordion {
    position: relative;
    padding: 6.66vw 0;
    background-color: var(--color-ink);
}

.block-faq-accordion__toggle-row { display: none; }

.block-faq-accordion__body { padding: 2% 0; }

/* label_open (live product FAQs): the label row above the heading on desktops; the plus icon stays phone only. */
.block-faq-accordion--label-open .block-faq-accordion__toggle-row { display: block; }
.block-faq-accordion--label-open .block-faq-accordion__label {
    margin-bottom: 60px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: var(--color-steel);
}
.block-faq-accordion--label-open .block-faq-accordion__toggle-icon { display: none; }

.block-faq-accordion__heading {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    letter-spacing: 0.5px;
    color: var(--color-cream);
}

/* Variant "flush" (live /roc-evidence/): no row padding around the body, plain heading. */
.block-faq-accordion--flush .block-faq-accordion__body { padding: 0; }

.block-faq-accordion--flush .block-faq-accordion__heading,
.block-faq-accordion--rich .block-faq-accordion__heading { letter-spacing: normal; }

/* Variant "text" (live /watch/): paragraphs 1em apart, bullet list in 26px lines. */
.block-faq-accordion--text .block-faq-accordion__intro p:not(:last-child) { padding-bottom: 1em; }

.block-faq-accordion--text .block-faq-accordion__intro ul {
    padding: 0 0 1em 1em;
    line-height: 26px;
}

/* Variant "flush-rich" (live capability pages): the intro keeps its paragraphs 1em apart,
   a square-bullet list (26px lines, 10px apart), 600 bold and rust links. */
.block-faq-accordion--rich .block-faq-accordion__intro p:not(:last-child) { padding-bottom: 1em; }

.block-faq-accordion--rich .block-faq-accordion__intro strong { font-weight: 600; }

.block-faq-accordion--rich .block-faq-accordion__intro a { color: var(--color-rust); }

.block-faq-accordion--rich .block-faq-accordion__intro ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 1em 1em;
    line-height: 26px;
    list-style: none;
}

.block-faq-accordion--rich .block-faq-accordion__intro li {
    position: relative;
    padding-left: 12px;
}

.block-faq-accordion--rich .block-faq-accordion__intro li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -12px;
    width: 12px;
    height: 12px;
    background: var(--color-rust);
}

.block-faq-accordion__intro {
    margin-bottom: 60px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.25px;
    color: var(--color-steel);
}

.block-faq-accordion__list {
    width: 90%;
    text-align: start; /* like live: the list is not a Divi "align left" module */
}

.block-faq-accordion__item {
    overflow: hidden;
    border-bottom: 1px solid var(--color-steel);
}

.block-faq-accordion__item.is-open { border-top: 1px solid var(--color-steel); }

.block-faq-accordion__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.block-faq-accordion__question {
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 500;
    line-height: 250%;
    color: var(--color-steel);
    transition: color 300ms ease 0ms;
}

.block-faq-accordion__item.is-open .block-faq-accordion__question,
.block-faq-accordion__head:hover .block-faq-accordion__question { color: var(--color-rust); }

.block-faq-accordion__icon,
.block-faq-accordion__toggle-icon {
    flex-shrink: 0;
    color: var(--color-steel);
}

.block-faq-accordion__icon .icon-toggle,
.block-faq-accordion__toggle-icon .icon-toggle {
    width: 24px;
    height: 24px;
}

.block-faq-accordion__item.is-open .block-faq-accordion__icon { color: var(--color-rust); }

.block-faq-accordion__answer {
    margin-bottom: 20px;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-cream);
}

.block-faq-accordion__answer p {
    margin-bottom: 0.5lh;
    line-height: 140%;
}

.block-faq-accordion__answer strong { font-weight: 600; }

.block-faq-accordion__answer ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 23px 1em;
    line-height: 26px;
    list-style: none;
}

/* Numbered answers: same spacing as the bullet lists, native numbers in the left padding. */
.block-faq-accordion__answer ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 23px 1em;
    line-height: 26px;
}

.block-faq-accordion__answer ol li::before { content: none; }

.block-faq-accordion__answer li {
    position: relative;
    padding-left: 12px;
}

.block-faq-accordion__answer li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -12px;
    width: 12px;
    height: 12px;
    background: var(--color-rust);
}

/* ==========================================================================
   BLOCK-FEATURE-CAROUSEL
   Ink section: eyebrow, Swiper card carousel (6.7.5, loop, 300ms, two cards per
   view and 80px apart from 768px up, one below). Like live, the active card and
   the one after it are 40% of the row wide while every other card keeps Swiper's
   own slot (half the row plus 40px), so the third card peeks in at the right edge.
   Square arrows sit at the bottom corners of the carousel box.
   ========================================================================== */
.block-feature-carousel {
    padding: 150px 0 120px;
    background-color: var(--color-ink);
}

.block-feature-carousel__head { margin-bottom: 40px; }

.block-feature-carousel__eyebrow {
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-feature-carousel__main { position: relative; }

.block-feature-carousel .swiper-container { padding-bottom: 80px; }

/* beats the Swiper auto height rule (.swiper-container-autoheight .swiper-slide), also printed later by the Divi Supreme plugin */
.block-feature-carousel .swiper-slide.block-feature-carousel__slide { height: 450px; }

/* Active and next card: 40% of the row (Swiper's inline width stays the slot). */
.block-feature-carousel__slide.swiper-slide-active,
.block-feature-carousel__slide.swiper-slide-next { max-width: 40%; }

/* Every other card is half the row wide with a 40px gap (live). Its box keeps
   the 80px Swiper gap and is 40px narrower, so the slot is the same width as
   live (Swiper rounds its own width down to half pixels) and the card inside
   reaches 40px into the gap. */
.block-feature-carousel__slide:not(.swiper-slide-active):not(.swiper-slide-next) { min-width: calc(50% - 40px); }
.block-feature-carousel__slide:not(.swiper-slide-active):not(.swiper-slide-next) .block-feature-carousel__card { margin-right: -40px; }

.block-feature-carousel__media {
    position: relative;
    height: 240px;
}

.block-feature-carousel__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(89% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}

.block-feature-carousel__image--top { object-position: 50% 0; }

.block-feature-carousel__body { padding: 20px 20px 20px 0; }

.block-feature-carousel__title {
    margin: 25px 0 15px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 118%;
    color: var(--color-cream);
}

.block-feature-carousel__text {
    font-size: 18px;
    line-height: 133%;
    color: var(--color-steel);
}

.block-feature-carousel__text a {
    color: inherit;
    text-decoration: underline var(--color-rust);
}

/* A Learn More under a card's copy, as in the accordions. */
.block-feature-carousel__text .block-accordion-list__link {
    color: var(--color-cream);
    text-decoration: none;
}

.block-feature-carousel__text p:has(> .block-accordion-list__link) { margin-top: 20px; }

/* Variant "pair" (live /enroll/ "SOLUTIONS"): eyebrow and steel heading 120px over the
   carousel, exactly two cards per view (no peeking card), 315px pictures, the cards as
   tall as their copy (550px from 1400px up), 50px under the cards; tiers in media.css. */
.block-feature-carousel--pair .block-feature-carousel__head { margin-bottom: 120px; }

.block-feature-carousel--pair .block-feature-carousel__eyebrow {
    margin-bottom: 100px;
    font-size: 14px;
}

.block-feature-carousel__heading {
    width: 90%;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 64px;
    color: var(--color-steel);
}

.block-feature-carousel--pair .swiper-container { padding-bottom: 50px; }

.block-feature-carousel--pair .swiper-slide.block-feature-carousel__slide { height: auto; }

.block-feature-carousel--pair .block-feature-carousel__slide:nth-child(n) {
    min-width: 0;
    max-width: none;
}

.block-feature-carousel--pair .block-feature-carousel__slide:nth-child(n) .block-feature-carousel__card { margin-right: 0; }

.block-feature-carousel--pair .block-feature-carousel__media { height: 315px; }

.block-feature-carousel--pair .block-feature-carousel__body { padding: 20px 20px 0; }

/* Variant "duo" (live capability pages, /face-recognition/ "APPLICATIONS"): two equal
   cards per view, as tall as their copy, 60px under the eyebrow, 100px under the
   section, 150px under the cards from 1901px up; tiers in media.css (no space under
   the copy from 981 to 1440px). */
.block-feature-carousel.block-feature-carousel--duo { padding-bottom: 100px; }

.block-feature-carousel--duo .block-feature-carousel__head { margin-bottom: 60px; }

.block-feature-carousel--duo .swiper-container { padding-bottom: 150px; }

.block-feature-carousel--duo .swiper-slide.block-feature-carousel__slide { height: auto; }

.block-feature-carousel--duo .block-feature-carousel__slide:nth-child(n) {
    min-width: 0;
    max-width: none;
}

.block-feature-carousel--duo .block-feature-carousel__slide:nth-child(n) .block-feature-carousel__card { margin-right: 0; }


/* Variant "overlap": 100px over the previous section (live -100px margin on a
   transparent section, the ink page shows below it). */
.page-sections > section + section.block-feature-carousel--overlap { margin-top: -100px; }

.block-feature-carousel--overlap {
    padding: 0 0 125px;
    background: linear-gradient(transparent 100px, var(--color-ink) 100px);
}

.block-feature-carousel--overlap .swiper-slide.block-feature-carousel__slide { height: 21.875vw; }

.block-feature-carousel__arrow {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-cream);
    background: url("assets/images/chevron-left-rust.svg") 50% 50% / 14px auto no-repeat;
    transition: border 0.3s;
}

.block-feature-carousel__arrow:hover { border-color: var(--color-rust); }

.block-feature-carousel__arrow--prev { left: 0; }

.block-feature-carousel__arrow--next {
    right: 0;
    background-image: url("assets/images/chevron-right-rust.svg");
}

/* ==========================================================================
   BLOCK-VIDEO-MOCKUP
   An ink band and a cream band of the same height (537px, 350px up to 1440px),
   the cream band's top corners cut into the ink one (15.2vw x 3.28125vw wedges),
   and the video in a rounded ink frame 70px down, centred, over both bands.
   ========================================================================== */
.block-video-mockup__stage {
    position: relative;
    height: 537px;
    padding-top: 70px;
    background-color: var(--color-ink);
}

.block-video-mockup__stage::before,
.block-video-mockup__stage::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 15.2vw;
    height: 3.28125vw;
    background: var(--color-cream);
}

.block-video-mockup__stage::before {
    left: 0;
    clip-path: polygon(0% 0, 72% 0, 100% 100%, 0 100%, 0 100%);
}

.block-video-mockup__stage::after {
    right: 0;
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}

.block-video-mockup__frame { text-align: center; }

.block-video-mockup__video {
    display: inline-block;
    width: 862px;
    max-width: none;
    height: auto;
    border: 6px solid var(--color-ink);
    border-radius: 40px;
    box-shadow: 0 4px 22px 11px rgba(0, 0, 0, 0.25);
    vertical-align: top;
}

.block-video-mockup__base {
    position: relative;
    z-index: 1;
    height: 537px;
    background-color: var(--color-cream);
}

.block-video-mockup__frame.container { z-index: 2; }

/* ==========================================================================
   BLOCK-CONTENT-TABS
   Ink section: steel heading, text tabs over a 1px steel line (the active or
   hovered tab is bold with a 5px rust bar over the line), then the panel: bold
   steel title and copy. Tiers in media.css.
   ========================================================================== */
.block-content-tabs {
    padding: 120px 0 160px;
    background-color: var(--color-ink);
}

.block-content-tabs__heading {
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-steel);
}

.block-content-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 40%;
    width: 20%;
    border-bottom: 1px solid var(--color-steel);
}

.block-content-tabs__tab {
    position: relative;
    padding: 0 0 4px;
    border: 0;
    background: none;
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: normal;
    text-align: center;
    color: var(--color-cream);
    cursor: pointer;
}

.block-content-tabs__tab.is-active,
.block-content-tabs__tab:hover { font-weight: 900; }

.block-content-tabs__tab.is-active::after,
.block-content-tabs__tab:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 5px;
    background: var(--color-rust);
}

.block-content-tabs__panel {
    margin-top: 40px;
    padding-bottom: 40px;
    color: var(--color-steel);
}

.block-content-tabs__title {
    margin-bottom: 36px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 128%;
}

/* The live panel copy starts with an empty paragraph (1em). */
.block-content-tabs__text {
    padding: 1em 0 15px;
    font-family: var(--font-regular);
    font-size: 28px;
    line-height: 128%;
}

.block-content-tabs__text p { padding-bottom: 1em; }

/* ==========================================================================
   BLOCK-STATS-COUNTERS (live /physical-security/: heading section, the laptop
   background with counters, the Learn More section; three Divi sections)
   ========================================================================== */
.block-stats-counters { background-color: var(--color-ink); }

.block-stats-counters__intro {
    position: relative;
    z-index: 3;
    padding: 150px 0 25px;
}

.block-stats-counters__heading {
    margin-bottom: 24px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-steel);
}

.block-stats-counters__text {
    font-size: 18px;
    line-height: 133%;
    color: var(--color-steel);
}

/* Decorative cut-outs: a full-width band centred on its section (the live
   image row: row paddings around a 1px column, moved up by half its height, so
   the picture rasterizes on the same subpixel), the picture at the right (top)
   or left (side) edge. */
.block-stats-counters__deco {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 3;
    width: 100%;
    max-width: 1920px;
    padding: 2% 0;
    line-height: 0;
    transform: translateY(-50%);
}

.block-stats-counters__deco::before {
    content: "";
    display: block;
    height: 1px;
}

.block-stats-counters__deco-media {
    position: absolute;
    top: 50%;
    width: 100%;
}

/* The offset is the first scroll motion value (JS sets --motion-y while scrolling,
   in 15px scroll steps eased by a 200ms transition like the live Divi effect). */
.block-stats-counters__deco-media { transition: transform 200ms linear; }

.block-stats-counters__deco--top .block-stats-counters__deco-media {
    right: 0;
    text-align: right;
    transform: translateY(var(--motion-y, -100px));
}

.block-stats-counters__deco--side .block-stats-counters__deco-media {
    left: 0;
    transform: translateY(var(--motion-y, 0px));
}

.block-stats-counters__deco-media img { display: inline-block; }

.block-stats-counters__stage {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-height: 1160px;
    padding: 3% 0;
}

/* Background image: cover, anchored at the top (live CSS background). */
.block-stats-counters__bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.block-stats-counters__row {
    display: flex;
    align-items: flex-start;
}

.block-stats-counters__col {
    width: 31.3333%;
    margin-right: 3%;
}

.block-stats-counters__col:last-child { margin-right: 0; }

/* Counter: hidden until it scrolls into view, then fades in over 1s. */
.block-stats-counters__counter {
    max-width: 80%;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1s;
}

.block-stats-counters__counter--narrow { max-width: 65%; }

.block-stats-counters__counter.is-active { opacity: 1; }

/* Figure box of a fixed height above the label (live Divi .percent). */
.block-stats-counters__figure {
    position: relative;
    z-index: 2;
    height: 72px;
    margin-bottom: 20px;
}

.block-stats-counters__number {
    white-space: nowrap; /* any-width rule: live breaks "100" / "%" over the label from 981 to about 1100px */
    font-family: var(--font-medium);
    font-size: 87px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-rust);
}

.block-stats-counters__label {
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    color: var(--color-steel);
}

.block-stats-counters__label--loose { line-height: 200%; }

.block-stats-counters__label--tight { line-height: 133%; }

/* Variant "band": rust band, cream heading and text, centred counters over ink labels. */
.block-stats-counters--band {
    padding: 4.69vw 0;
    background-color: var(--color-rust);
}

.block-stats-counters--band .block-stats-counters__intro { padding: 0; }

.block-stats-counters--band .block-stats-counters__heading {
    margin-bottom: 30px;
    padding-bottom: 10px;
    line-height: 112%;
    color: var(--color-cream);
}

.block-stats-counters--band .block-stats-counters__text {
    max-width: none;
    padding-bottom: 80px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-cream);
}

.block-stats-counters--band .block-stats-counters__stage {
    display: block;
    min-height: 0;
    padding: 0;
}

.block-stats-counters--band .block-stats-counters__counter {
    max-width: 100%;
    text-align: center;
}

.block-stats-counters--band .block-stats-counters__row { max-width: 957px; }

.block-stats-counters--band .block-stats-counters__figure { margin-bottom: 40px; }

.block-stats-counters--band .block-stats-counters__number { color: var(--color-cream); }

.block-stats-counters--band .block-stats-counters__label { color: var(--color-ink); }

/* Variant "bone" (band plus): cream band, ink heading centred, rust numbers. */
.block-stats-counters--bone {
    padding: 90px 0;
    background-color: var(--color-cream);
}

.block-stats-counters--bone .block-stats-counters__intro .container { padding-top: 60px; }

.block-stats-counters--bone .block-stats-counters__heading {
    margin-bottom: 45px;
    text-align: center;
    color: var(--color-ink);
}

.block-stats-counters--bone .block-stats-counters__row { max-width: 957px; }

.block-stats-counters--bone .block-stats-counters__counter { max-width: 80%; }

.block-stats-counters--bone .block-stats-counters__figure { margin-bottom: 40px; }

.block-stats-counters--bone .block-stats-counters__number { color: var(--color-rust); }

/* Counter label ending in a superscript 1 (live .counter.sup h6:after). */
.block-stats-counters__mark {
    font-size: 0.6em;
    line-height: inherit;
    vertical-align: super;
}

/* Footnote under the counters: 14px ink, centred (live /watch/, /roc-watch-schools/). */
.block-stats-counters__footnote {
    padding-top: 33px;
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: var(--color-ink);
}

/* On the plain variant the section is dark (/physical-security/). */
.block-stats-counters:not(.block-stats-counters--band):not(.block-stats-counters--bone):not(.block-stats-counters--ink) .block-stats-counters__footnote { color: var(--color-steel); }

.block-stats-counters__footnote sup {
    position: relative;
    bottom: 0.8em;
    font-size: 0.7rem;
    line-height: 0;
    vertical-align: baseline;
}

.block-stats-counters__actions {
    overflow: hidden;
    padding: 150px 0;
}

.block-stats-counters__actions .btn-wrap { text-align: center; }

/* Live: the outlined pill keeps the plain 12 x 17 button arrow here. */
.block-stats-counters__actions .btn--outline::before {
    width: 12px;
    height: 17px;
}

/* ==========================================================================
   BLOCK-PLATFORM-ICON-GRID (live /sdk/ "Everything you need to dive straight
   into dev."): steel heading, capability columns over a steel line, platform
   and language icons spread across the row; tiers in media.css.
   ========================================================================== */
.block-platform-icon-grid {
    padding-top: 100px;
    background-color: var(--color-ink);
}

.block-platform-icon-grid__heading {
    margin-bottom: 87px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-steel);
}

/* Four columns 22.75% wide with the live 3% gutters (Divi 1/4 columns). */
.block-platform-icon-grid__includes {
    display: flex;
    align-items: flex-start;
    gap: 3%;
    margin-bottom: 100px;
    padding-bottom: 87px;
    border-bottom: 1px solid var(--color-steel);
}

.block-platform-icon-grid__label,
.block-platform-icon-grid__column { width: 22.75%; }

.block-platform-icon-grid__label,
.block-platform-icon-grid__title {
    font-family: var(--font-bold);
    font-size: 28px;
    line-height: 128%;
    color: var(--color-cream);
}

.block-platform-icon-grid__title {
    margin-bottom: 20px;
    line-height: 118%;
}

.block-platform-icon-grid__list { list-style: none; }

.block-platform-icon-grid__item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 166%;
    color: var(--color-steel);
}

/* A linked item is clickable across the whole row and opens in a new tab (live clickable rows). */
.block-platform-icon-grid__item a { flex: 1; }

/* The square arrow sits inline after the text (live 15 x 20 box, contained). */
.block-platform-icon-grid__item img {
    display: inline;
    height: 20px;
    object-fit: contain;
}

.block-platform-icon-grid__platforms,
.block-platform-icon-grid__languages {
    display: flex;
    justify-content: space-between;
}

.block-platform-icon-grid__platforms { margin-bottom: 90px; }

.block-platform-icon-grid__languages {
    width: 70%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-bottom: 70px;
}

.block-platform-icon-grid__cell {
    display: flex;
    align-items: flex-start;
    line-height: 0;
}

.block-platform-icon-grid__cell picture { display: contents; }

/* Phone rows of the languages; one row with the others above phones. */
.block-platform-icon-grid__group { display: contents; }

/* ==========================================================================
   BLOCK-FEATURE-CARDS-GRID (live /sdk/ "Made by engineers for engineers."):
   cream section, eyebrow, heading, intro, outlined cards three per row (title
   at the top, text at the bottom of a 168px column); tiers in media.css.
   ========================================================================== */
.block-feature-cards-grid {
    padding: 100px 0;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-feature-cards-grid__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 0.97vw;
    line-height: 142%;
}

.block-feature-cards-grid__heading {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-feature-cards-grid__intro {
    margin-bottom: 87px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    color: var(--color-black);
}

.block-feature-cards-grid__row {
    display: flex;
    justify-content: space-between;
    gap: 49px;
    margin-bottom: 60px;
}

/* Live: the second row ends 20px lower (its Divi clearfix is a flex item with a gap). */
.block-feature-cards-grid__row:nth-of-type(2) { margin-bottom: 80px; }

.block-feature-cards-grid__row:last-of-type { margin-bottom: 0; }

.block-feature-cards-grid__card {
    position: relative;
    width: 23.2vw;
    min-height: 238px;
    padding: 34px 25px;
    border: 1px solid var(--color-steel);
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 118%;
    overflow-wrap: break-word;
}

/* Staggered columns: the first scroll motion value (JS sets --motion-y). */
.block-feature-cards-grid__card--offset-100 { transform: translateY(var(--motion-y, 100px)); }

.block-feature-cards-grid__card--offset-200 { transform: translateY(var(--motion-y, 200px)); }

.block-feature-cards-grid__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 168px;
}

.block-feature-cards-grid__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 117%;
}

/* Live /sdk/ "Web API" card: the arrow icon sits 10px after the title. */
.block-feature-cards-grid__title img {
    display: inline;
    margin-left: 10px;
}

/* A card with a link (/sdk/ "Web API", DIGITAL-303): the title link covers the whole card; hover and
   keyboard focus turn the border rust like the slider arrows. */
.block-feature-cards-grid__link { color: inherit; }

.block-feature-cards-grid__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.block-feature-cards-grid__link:focus-visible { outline: none; }

.block-feature-cards-grid__card--link {
    transition: border-color 0.3s ease;
}

.block-feature-cards-grid__card--link:hover,
.block-feature-cards-grid__card--link:focus-within { border-color: var(--color-rust); }

.block-feature-cards-grid__more {
    display: none;
    padding-top: 40px;
    text-align: center;
}

/* Live "View More" hover (phones): no fill, black text, the arrow stays black. */
.block-feature-cards-grid__more .btn:hover {
    background-color: transparent;
    color: var(--color-black);
}

.block-feature-cards-grid__more .btn:hover::before { background-image: url("assets/images/arrow.svg"); }

/* Cards "under" (live /roc-access/ s6): the copy follows the title, intro 80% wide,
   80px under the cards, then the download heading (22px) and form. */
.block-feature-cards-grid--under .block-feature-cards-grid__intro { width: 80%; }

.block-feature-cards-grid--under .block-feature-cards-grid__inner {
    display: block;
    height: auto;
}

.block-feature-cards-grid--under .block-feature-cards-grid__row:last-of-type { margin-bottom: 80px; }



.block-feature-cards-grid__form-heading {
    margin-bottom: 36px; /* guide form: room for the error over the field (see GUIDE FORM) */
    font-size: 22px;
    line-height: 100%;
}

/* Theme "ink" (live /abis/ s3): ink section with steel copy and cream eyebrows,
   the background picture at its own size (centred, 10% down: object-position works
   like the live background-position), cards with a 283px column; tiers in media.css. */
/* Clipped sideways: at 768px live pushes the third card 4px past the screen edge. */
.block-feature-cards-grid--ink {
    position: relative;
    overflow-x: clip;
    padding: 0 0 100px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-feature-cards-grid__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: none;
    object-position: 50% 10%;
}

.block-feature-cards-grid--ink .block-feature-cards-grid__eyebrow { color: var(--color-cream); }

.block-feature-cards-grid--ink .block-feature-cards-grid__heading {
    padding-bottom: 0;
    line-height: 115%;
    letter-spacing: 0.5px;
}

.block-feature-cards-grid--ink .block-feature-cards-grid__intro {
    max-width: 50vw;
    color: var(--color-steel);
}

.block-feature-cards-grid--ink .block-feature-cards-grid__inner { height: 283px; }

.block-feature-cards-grid--ink .block-feature-cards-grid__text a {
    position: relative; /* stays clickable above the stretched card link */
    z-index: 1;
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

/* The live View More here falls back to the Divi global button colour. On hover
   live turns the pill and the text cream (text gone, not copied): cream pill,
   ink text, rust arrow like the other dark pills. */
.block-feature-cards-grid--ink .block-feature-cards-grid__more .btn { background-color: var(--color-rust-muted); }

.block-feature-cards-grid--ink .block-feature-cards-grid__more .btn:hover {
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-feature-cards-grid--ink .block-feature-cards-grid__more .btn:hover::before { background-image: url("assets/images/arrow-rust.svg"); }

/* Theme "dark" (live /sdk/ since 9 Oct 2026): the cream layout on ink, steel copy, cream heading and intro. */
.block-feature-cards-grid--dark {
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-feature-cards-grid--dark .block-feature-cards-grid__heading,
.block-feature-cards-grid--dark .block-feature-cards-grid__intro { color: var(--color-cream); }

/* Match only (live /fingerprint-recognition/ s5): 150px over and 100px under the latent part. */
.block-feature-cards-grid--match-only { padding: 150px 0 100px; }
.block-feature-cards-grid--match-only .latent-match__bars { padding: 0 0 10px; }

/* With the latent part the second row keeps the live 80px under it. */
.block-feature-cards-grid--matched .block-feature-cards-grid__row:nth-of-type(2) { margin-bottom: 80px; }

/* ==========================================================================
   LATENT-MATCH (partial of feature-cards-grid, live /abis/ s3 lower part):
   cream eyebrow, steel heading and copy, hand picture, two time bars (dark and
   steel, a rust line after the steel one), small cream note with a rust link.
   ========================================================================== */
.latent-match__head { padding-bottom: 60px; }

.latent-match__eyebrow {
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.latent-match__heading {
    margin-bottom: 20px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

.latent-match__text {
    width: 65%;
    margin-bottom: 80px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 24px;
    color: var(--color-steel);
}

.latent-match__image {
    width: 1120px;
    max-width: 100%;
    margin-bottom: 60px;
    line-height: 0;
}

.latent-match__image img { width: 100%; }

/* hardcoded: live row padding is 2% of the full-width section, at most 33px. */
.latent-match__bars { padding: min(2%, 33px) 0; }

.latent-match__bars-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.latent-match__bar {
    position: relative;
    padding: 40px 0 40px 50px;
    background-color: var(--color-graphite);
    font-family: var(--font-regular);
    font-size: 21px;
    line-height: 170%;
    color: var(--color-steel);
}

.latent-match__bar:first-child { width: 752px; }

.latent-match__bar + .latent-match__bar {
    width: 288px;
    background-color: var(--color-steel);
    color: var(--color-ink);
}

.latent-match__bar + .latent-match__bar::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: 0;
    width: 2px;
    height: 100%;
    background-color: var(--color-rust);
}

.latent-match__value {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 128%;
}

.latent-match__note {
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 24px;
    color: var(--color-cream);
}

.latent-match__note a { color: var(--color-rust); }

/* ==========================================================================
   BLOCK-SLIDER-SHOWCASE (live /abis/ "INFINITELY MODULAR" and "ROC Examine"):
   head (eyebrow, logo, heading, intro), then a one-slide carousel of big
   screenshots contained in a 526px box, centred title and copy under each,
   square arrows beside the picture; tiers in media.css.
   ========================================================================== */
.block-slider-showcase {
    position: relative;
    padding: 0 0 150px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-slider-showcase--steel {
    padding: 120px 0;
    background-color: var(--color-steel);
    color: var(--color-ink);
}

/* Steel wedge rising from the top right corner into the section above. */
.block-slider-showcase--notched::before {
    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-color: var(--color-steel);
    clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
}

.block-slider-showcase__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-slider-showcase__logo {
    margin-bottom: 80px;
    line-height: 0;
}

.block-slider-showcase__heading {
    width: 90%;
    margin-bottom: 20px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 64px;
    letter-spacing: 0.1px;
}

.block-slider-showcase__intro {
    width: 70%;
    margin-bottom: 60px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

/* hardcoded: live row is 65vw wide outside the 1025 to 1500px zoom band */
.block-slider-showcase__main.container { width: 65vw; }

.block-slider-showcase__media {
    display: flex;
    justify-content: center;
    height: 526px;
}

.block-slider-showcase__image {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
}

.block-slider-showcase__body {
    padding: 20px;
    text-align: center;
}

.block-slider-showcase__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 19px;
    font-weight: 500;
    line-height: 140%;
}

.block-slider-showcase__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-slider-showcase__text p:not(:last-child) { padding-bottom: 1em; }

/* Square arrows (live 48px icon box with a 1px border): cream outline with rust
   chevrons on ink, ink outline and chevrons on steel; rust outline on hover. */
.block-slider-showcase__arrow {
    position: absolute;
    top: 242px;
    z-index: 10;
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-cream);
    background: url("assets/images/chevron-left-rust.svg") 50% 50% / 14px auto no-repeat;
    cursor: pointer;
}

.block-slider-showcase__arrow:hover { border-color: var(--color-rust); }

.block-slider-showcase__arrow--prev { left: 59px; }

.block-slider-showcase__arrow--next {
    right: 59px;
    background-image: url("assets/images/chevron-right-rust.svg");
}

.block-slider-showcase--steel .block-slider-showcase__arrow {
    border-color: var(--color-ink);
    background-image: url("assets/images/chevron-left-ink.svg");
}

.block-slider-showcase--steel .block-slider-showcase__arrow--next { background-image: url("assets/images/chevron-right-ink.svg"); }

.block-slider-showcase--steel .block-slider-showcase__arrow:hover { border-color: var(--color-rust); }

/* ==========================================================================
   ARROW LINK (shared, live Divi .slider-btn): 22px ink text with the long arrow at
   the right and a rust underline that is redrawn from the left on hover.
   ========================================================================== */
.arrow-link {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0 40px 5px 0;
    border-bottom: 1px solid var(--color-rust);
    font-family: var(--font-regular);
    font-size: 22px;
    line-height: 24px;
    color: var(--color-ink);
    transition: ease-out;
}

.arrow-link::before {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: 0;
    width: 20px;
    height: 28px;
    transform: translateY(-50%);
    background: url("assets/images/arrow-long-ink.svg") right center / contain no-repeat;
}

.arrow-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--color-rust);
    transition: ease-out;
}

.arrow-link:hover { border-bottom-color: transparent; }

.arrow-link:hover::after {
    width: 100%;
    transition: 1.3s ease-out;
}

/* ==========================================================================
   LINE LINK (shared): the arrow link's hover without the arrow, for text that can wrap
   (Legal Center and Media Coverage lists, Evan, DIGITAL-333). A rust line under the text
   that is redrawn from the left, line after line, while the link around it is hovered or
   has keyboard focus.
   ========================================================================== */
.line-link {
    background: linear-gradient(var(--color-rust), var(--color-rust)) 0 100% / 100% var(--line-link-width, 1px) no-repeat;
}

a:hover .line-link,
a:focus-visible .line-link { animation: line-link-redraw 1.3s ease-out; }

@keyframes line-link-redraw {
    from { background-size: 0 var(--line-link-width, 1px); }
}

@media (prefers-reduced-motion: reduce) {
    a:hover .line-link,
    a:focus-visible .line-link { animation: none; }
}

/* ==========================================================================
   GUIDE FORM (shared): the live "Download the ... Product Guide" Formidable form
   (email pill and "Get Your Copy"), the live page rules scoped to .guide-form (not
   "download-form": a legacy site-wide snippet styles that class).
   Dark sections (live /roc-watch-schools/): ink frame, cream focus, outlined hover.
   Light sections (--light, live /roc-access/): cream frame, ink focus border on a
   transparent field, ink hover. Tiers in media.css.
   The heading over the form stands 36px over the field (32px on phones) and the error
   message sits in that gap (forms.css), so heading and field read as one small section
   on every page that has the form (Evan, DIGITAL-300).
   ========================================================================== */
.guide-form .frm_forms {
    display: flow-root; /* keeps the form's -3px margins inside */
    max-width: 460px;
}

/* After submit: Formidable's "Click here if you are not automatically redirected" link. */
.guide-form .frm-redirect-msg a { text-decoration: underline; }

/* The site's Additional CSS frames every Formidable form with a 3px cream border
   (important) and 2em padding; live removes both here. The padding goes, the
   border sits just outside the form box and an ink frame covers it, painted
   under the fields (the submit pill can reach past the form box). The frame runs
   1px past the border on both sides, so no cream edge shows at fractional pixel
   ratios or at the zoom (Evan saw a white box on a phone, DIGITAL-299). */
.guide-form .frm-show-form {
    position: relative;
    z-index: 0;
    margin: -3px;
    padding: 0;
}

.guide-form .frm-show-form::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border: 5px solid var(--color-ink);
    pointer-events: none;
}

.guide-form .frm_form_fields > fieldset { padding: 0; }

.guide-form .frm_form_fields .frm_fields_container {
    display: flex;
    gap: clamp(12px, 1.25vw, 24px);
    align-items: center;
}

.guide-form .frm_form_field { margin: 0; }

.guide-form .frm_form_field label,
.guide-form .frm_required { display: none; }

.guide-form .with_frm_style .email-download input {
    width: clamp(300px, 23vw, 456px);
    height: 55px;
    padding-left: 24px;
    border: 1px solid var(--color-steel);
    border-radius: 100px;
    background: var(--color-cream);
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ink);
    box-shadow: none;
}

.guide-form .with_frm_style .email-download input::placeholder {
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ink);
    opacity: 1;
}

.guide-form .with_frm_style .email-download input:focus {
    border-color: var(--color-cream);
    background: var(--color-white);
}

.guide-form .frm_submit {
    position: relative;
    display: flex;
}

/* min-height: the Additional CSS fixes submit buttons at 54px (important) from 960px. */
.guide-form .with_frm_style .frm_submit .frm_button_submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 55px;
    min-height: 55px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50px;
    background: var(--color-rust);
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-cream);
    box-shadow: none;
    outline: none;
}

/* Focus and press keep the rust pill with its cream label: forms-base.css (the plugin stylesheet) paints its light grey
   on :focus and :active, which left the label unreadable after a failed submit. Keyboard focus gets the browser focus ring
   back like the survey pills (ROC-96). Before :hover, so hovering a focused pill still shows the hover colours. */
.guide-form .with_frm_style .frm_submit .frm_button_submit:is(:focus, :active) {
    background: var(--color-rust);
    color: var(--color-cream);
}

.guide-form .with_frm_style .frm_submit .frm_button_submit:focus-visible {
    outline: revert;
}

.guide-form .with_frm_style .frm_submit .frm_button_submit:hover {
    border: 1px solid var(--color-rust);
    background: transparent;
    color: var(--color-cream);
}

.guide-form--light .frm-show-form::after { border-color: var(--color-cream); }

/* The submit pill keeps its own width in the row (a legacy site-wide snippet makes
   .frm_submit.frm_flex absolute and calc(50% + 60px) wide for the survey form). */
.guide-form--light .frm_submit.frm_flex {
    position: relative;
    bottom: auto;
    width: auto;
}

.guide-form--light .with_frm_style .email-download input:focus {
    border-color: var(--color-ink);
    background: transparent;
}

.guide-form--light .with_frm_style .frm_submit .frm_button_submit:hover {
    border: 0;
    background: var(--color-ink);
}

/* ==========================================================================
   BLOCK-ACCORDION-LIST headers "lead" and "badge", picture and download form
   (live /roc-access/ s7 + s8 and s11); tiers in media.css.
   ========================================================================== */
/* Lead (s7): 100px over the eyebrow and under the link, the picture right under it. */
.block-accordion-list.block-accordion-list--header-lead { padding: 100px 0; }

.block-accordion-list--header-lead .block-accordion-list__lead { margin-bottom: 100px; }

.block-accordion-list__lead .block-accordion-list__eyebrow {
    width: auto;
    margin-bottom: 60px;
    color: inherit;
    font-family: var(--font-bold);
    font-size: 0.97vw;
    font-weight: 400;
    line-height: 142%;
}

.block-accordion-list__lead .block-accordion-list__heading { margin-bottom: 20px; }

.block-accordion-list__intro {
    width: 80%;
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-black);
}

/* Intro under the default heading (live /roc-evidence/ s6): 160px over the section,
   24px under the heading, the copy at full width 80px over the list; tiers in media.css. */
.block-accordion-list.block-accordion-list--intro { padding-top: 160px; }

.block-accordion-list--intro .block-accordion-list__heading { margin-bottom: 24px; }

.block-accordion-list--intro .block-accordion-list__intro {
    width: auto;
    margin-bottom: 80px;
    font-family: var(--font-regular);
    color: var(--color-ink);
}

.block-accordion-list--dark .block-accordion-list__lead .block-accordion-list__eyebrow,
.block-accordion-list--dark .block-accordion-list__lead-line,
.block-accordion-list--dark .block-accordion-list__intro { color: var(--color-steel); }

.block-accordion-list__link-wrap { line-height: 24px; }

.block-accordion-list__phone-only { display: none; }

.block-accordion-list__media { line-height: 0; }

.block-accordion-list__media img { width: 100%; }

.block-accordion-list__download { margin-top: 120px; }

.block-accordion-list__form-heading {
    margin-bottom: 36px; /* guide form: room for the error over the field (see GUIDE FORM) */
    font-size: 22px;
    line-height: 100%;
}

/* The download headings break before "Product Guide" on phones only. */
.block-accordion-list__form-heading br,
.block-feature-cards-grid__form-heading br { display: none; }

/* The site's default form padding (2em) and 3px cream frame stay (live: the page CSS
   only clears them on the first download form). */
.guide-form.guide-form--framed .frm-show-form {
    margin: 0;
    padding: 2em;
}

/* Badge (s11): min(3vw, 50px) over the header, 140px under the list; the header row
   pads 2.5% over and under, eyebrow and badge in the left 19%, 8% gap, the rest 73%. */
.block-accordion-list.block-accordion-list--header-badge { padding: min(3vw, 50px) 0 140px; }

.block-accordion-list--header-badge .block-accordion-list__lead {
    display: flex;
    gap: 8%;
    margin-bottom: 120px;
    padding: 2.5% 0;
}

.block-accordion-list__aside { width: 19%; }

.block-accordion-list__intro-wrap { width: 73%; }

.block-accordion-list--header-badge .block-accordion-list__eyebrow {
    width: auto;
    margin-bottom: 80px;
    font-family: var(--font-bold);
    font-size: 0.97vw;
    font-weight: 400;
    line-height: 142%;
}

.block-accordion-list__badge { line-height: 0; }

.block-accordion-list__badge img { width: 100%; }

.block-accordion-list__lead-line {
    padding-bottom: 10px;
    letter-spacing: -0.25px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
}

.block-accordion-list--header-badge .block-accordion-list__intro {
    width: auto;
    margin-bottom: 0;
    letter-spacing: -0.25px;
}

/* Badge rows (live custom-faq-accordion-new on ink): regular titles, steel rules
   under each row only, no line under the list. */
.block-accordion-list--header-badge .block-accordion-list__list { border-bottom: 0; }

.block-accordion-list--header-badge .block-accordion-list__item { border-bottom-color: var(--color-steel); }

.block-accordion-list--header-badge .block-accordion-list__item:first-child { border-top: 0; }

.block-accordion-list--header-badge .block-accordion-list__title {
    font-family: var(--font-regular);
    letter-spacing: normal;
}

.block-accordion-list--header-badge .block-accordion-list__item:hover .block-accordion-list__title::before,
.block-accordion-list--header-badge .block-accordion-list__item:hover .block-accordion-list__icon { color: var(--color-cream); }

.block-accordion-list--header-badge .block-accordion-list__intro a {
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

/* Lead rows (live custom-faq-accordion-new): a hovered row pulls up by 2px and the rows
   below by 3px more (same live quirk as the dark rows), the first row's top rule turns
   rust, and the plus sits in the middle of the row. */
.block-accordion-list--header-lead .block-accordion-list__item:hover {
    margin: -2px 0 -3px;
    transition: all 1s ease;
}

.block-accordion-list--header-lead .block-accordion-list__item:first-child:hover { border-top-color: var(--color-rust); }

.block-accordion-list--header-lead .block-accordion-list__icon {
    align-self: center;
    height: 36px;
    margin-top: 0;
}

/* Picture beside the copy inside an open row (live .faq-img). */
.block-accordion-list__panel .panel-figure {
    display: flex;
    gap: 30px;
}

.block-accordion-list__panel .panel-figure figure {
    flex-shrink: 0;
    width: 59%;
    margin: 0;
    line-height: 0;
}

.block-accordion-list__panel .panel-figure img { width: 100%; }

/* ==========================================================================
   BLOCK-CHECKLIST-CARD (live /roc-access/ s2): heading in the left 28% (live 1/3
   column of a gutters4 row, centred on the card), 8% gap, the 64% charcoal card
   with 40px padding and 20px corners; capability rows 30px over and under with a
   slate rule, the last one without; tiers in media.css.
   ========================================================================== */
.block-checklist-card {
    padding: min(3vw, 50px) 0 140px;
    background-color: var(--color-ink);
}

.block-checklist-card__row {
    display: flex;
    align-items: center;
    gap: 8%;
}

.block-checklist-card__intro { width: 28%; }

.block-checklist-card__heading {
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-cream);
}

.block-checklist-card__phone-only { display: none; }

.block-checklist-card__card {
    width: 64%;
    padding: 40px;
    border-radius: 20px;
    background-color: var(--color-charcoal);
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 142%;
    color: var(--color-steel);
}

.block-checklist-card__labels {
    display: flex;
    justify-content: space-between;
}

.block-checklist-card__column {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 100px;
    text-align: center;
}

.block-checklist-card__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid var(--color-slate);
}

.block-checklist-card__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.block-checklist-card__title {
    padding-bottom: 10px;
    font-size: 28px;
    font-weight: 500;
    line-height: 35px;
    color: var(--color-cream);
}

.block-checklist-card__check { display: block; }

/* Footnote variant (live /age-estimation-api-pg/): steel footnote under the card, aligned with it, and 260px under the
   section for the notch of the rust ribbon that follows. */
.block-checklist-card--noted { padding-bottom: 260px; }

.block-checklist-card__note {
    width: 62.4%;
    margin: 35px 0 37.5px 36%;
    color: var(--color-steel);
    font-family: var(--font-regular);
    font-size: 15px;
    line-height: 133%;
}

.block-checklist-card__note a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   BLOCK-NUMBERED-STEPS (live /roc-access/ s4 "How it works"): 160px over and
   100px under, steel eyebrow, the 57px heading 90% wide and the intro 80%;
   step rows 96px apart: the 839px outlined card (206px tall, picture, title,
   copy) and the 191px numeral in a 22.75% column on the free side (right for
   odd steps, left for even ones); the numeral of the current step is rust
   (main.js initNumberedSteps). Closing statement and pill; tiers in media.css.
   ========================================================================== */
.block-numbered-steps {
    padding: 160px 0 100px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-numbered-steps__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 400;
    line-height: 142%;
}

.block-numbered-steps__heading {
    width: 90%;
    margin-bottom: 1.5%;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 64px;
    color: var(--color-cream);
}

.block-numbered-steps__intro {
    width: 80%;
    margin-bottom: 50px;
    font-size: 18px;
    line-height: 24px;
}

.block-numbered-steps__intro strong { font-weight: 600; }

.block-numbered-steps__step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3%;
    margin-bottom: 96px;
}

.block-numbered-steps__card {
    display: flex;
    flex: 0 1 839px;
    align-items: center;
    min-width: 0;
    height: 206px;
    padding: 30px 96px 30px 30px;
    border: 1px solid var(--color-steel);
    font-size: 18px;
    line-height: 133%;
}

.block-numbered-steps__card--snug { padding-right: 66px; }

.block-numbered-steps__inner {
    display: flex;
    align-items: center;
    max-width: 839px;
}

.block-numbered-steps__media {
    display: flex;
    width: 100%;
}

.block-numbered-steps__image {
    width: 144px;
    max-width: none;
    height: auto;
    margin-right: 30px;
}

.block-numbered-steps__body { padding-left: 15px; }

.block-numbered-steps__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
}

.block-numbered-steps__title br { display: none; }

.block-numbered-steps__number {
    flex: 0 1 22.75%;
    font-family: var(--font-bold);
    font-size: 191px;
    font-weight: 700;
    line-height: 100%;
    text-align: right;
    color: rgba(103, 108, 121, 0.15);
}

.block-numbered-steps__step:nth-child(even) .block-numbered-steps__number {
    order: -1;
    text-align: left;
}

.block-numbered-steps__number.is-active { color: var(--color-rust); }

.block-numbered-steps__closing {
    padding-top: 2.5%;
    margin-bottom: 60px;
    font-family: var(--font-light);
    font-size: 60px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: 0.5px;
}

.block-numbered-steps__actions {
    margin-top: -15px;
    padding-bottom: 2.5%;
}

/* Entrance from the top (live Divi "fadeTop": numbered-steps card pictures on desktops,
   definition-rows card icons); main.js revealTop() sets the classes. */
.u-reveal-pending { opacity: 0; }

.u-revealed { animation: reveal-top 1s cubic-bezier(0.77, 0, 0.175, 1); }

@keyframes reveal-top {
    from {
        opacity: 0;
        transform: translateY(-10%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   BLOCK-COLUMNS-STATEMENT (live /liveness/ s1): ink, 126px over; the 57px cream statement (920px
   wide), a steel line, then three columns (31.34% wide, 3% apart) of a rust number, a 33px bold
   steel title and a short copy; 120px under the columns.
   ========================================================================== */
.block-columns-statement {
    padding: 126px 0 20px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-columns-statement__heading {
    max-width: 920px;
    margin-bottom: 58px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.5px;
    color: var(--color-cream);
}

.block-columns-statement__text {
    margin-bottom: 20px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 24px;
}

.block-columns-statement__cols {
    display: flex;
    margin: 106px 0 120px;
}

.block-columns-statement__col {
    width: 31.34%;
    margin-right: 3%;
    padding-bottom: 20px;
}

.block-columns-statement__col:last-child { margin-right: 0; }

.block-columns-statement__number {
    margin-bottom: 30px;
    font-family: var(--font-regular);
    font-size: 21px;
    line-height: 24px;
    color: var(--color-rust);
}

.block-columns-statement__title {
    margin-bottom: 50px;
    font-family: var(--font-bold);
    font-size: 33px;
    font-weight: 400;
    line-height: 120%;
}

.block-columns-statement__copy {
    width: fit-content;
    max-width: 15.56em;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-columns-statement__col:nth-child(1) .block-columns-statement__copy { max-width: 15em; }
.block-columns-statement__col:nth-child(3) .block-columns-statement__copy { max-width: 13.28em; }

/* ==========================================================================
   BLOCK-VIDEO-SPLIT (live /liveness/ s2): cream, 500px at least from 991px; the video covers the left
   half (cover, with two 72 x 100px cream notches on its right edge); the text column starts after the
   half way line plus a 100px gutter: a 57px rust heading (460px wide), 18px ink copy (405px) and a list
   with 15px rust square bullets, 40px over and under the row.
   ========================================================================== */
.block-video-split {
    position: relative;
    padding-bottom: 40px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-video-split__video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
}

.block-video-split__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-video-split__video::before,
.block-video-split__video::after {
    content: "";
    position: absolute;
    right: -2px;
    width: 72px;
    height: 100px;
    background-color: var(--color-cream);
}

.block-video-split__video::before { top: 0; }
.block-video-split__video::after { bottom: 0; }

.block-video-split__row {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 40px 0;
}

.block-video-split__text-col {
    width: 48.5%;
    padding: 20px 0 20px 100px;
}

.block-video-split__heading {
    max-width: 460px;
    margin-bottom: 17px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-rust);
}

.block-video-split__text {
    max-width: 405px;
    margin-bottom: 14px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-video-split__list { list-style: none; }

.block-video-split__item {
    position: relative;
    max-width: 300px;
    margin-bottom: 17px;
    padding-left: 40px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-video-split__item:last-child { margin-bottom: 0; }

.block-video-split__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: var(--color-rust);
}

/* Variant "lead" (live /liveness/ s3): ink, 126px over; the bold 57px heading and the copy are at most 800px wide; 71px under the copy. */
.block-rich-text.block-rich-text--lead { padding: 126px 0 0; }

.block-rich-text--lead .container { padding-bottom: 71px; }

.block-rich-text--lead .block-rich-text__heading {
    max-width: 800px;
    margin-bottom: 0;
    font-family: var(--font-bold);
    line-height: 120%;
}

.block-rich-text--lead .block-rich-text__text {
    max-width: 800px;
    margin-bottom: 0;
    text-align: left;
}

/* ==========================================================================
   BLOCK-TAG-FEATURES (live /liveness/ s4): ink, 145px under; three columns (31% wide, 3% apart) of a
   103px rust tag (14px Poppins) over a 330px Poppins line, 125px under them; the 57px cream heading
   (878px wide) and 64px under it; the 160% copy (494px) and the badge picture in two halves.
   ========================================================================== */
.block-tag-features {
    padding: 0 0 145px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-tag-features__tags {
    display: flex;
    margin-bottom: 125px;
}

.block-tag-features__tag-col {
    width: 31%;
    margin-right: 3%;
}

.block-tag-features__tag-col:last-child { margin-right: 0; }

.block-tag-features__tag {
    width: 100%;
    max-width: 103px;
    margin-bottom: 13px;
    padding: 2px;
    background-color: var(--color-rust);
    font-family: var(--font-poppins);
    font-size: 14px;
    line-height: 120%;
    text-align: center;
    color: var(--color-cream);
}

.block-tag-features__line {
    max-width: 330px;
    font-family: var(--font-poppins);
    font-size: 18px;
    line-height: 140%;
}

.block-tag-features__tag-col:last-child .block-tag-features__line { max-width: 250px; }

.block-tag-features__heading {
    max-width: 878px;
    margin-bottom: 64px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-cream);
}

.block-tag-features__row { display: flex; }

.block-tag-features__text {
    width: 48.5%;
    margin-right: 3%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0.5px;
}

.block-tag-features__text > * { max-width: 494px; }

.block-tag-features__badge { width: 48.5%; line-height: 0; }

.block-tag-features__badge img { max-width: 100%; height: auto; }

/* Variant "portrait" (live /liveness/ s5): ink, 145px under; the picture at its own size left, the 57px heading
   (590px wide, 38px under) and the 448px copy right, in halves 3% apart; tiers in media.css. */
.block-rich-text.block-rich-text--portrait { padding: 0 0 145px; }

.block-rich-text--portrait .block-rich-text__split {
    gap: 3%;
    margin-bottom: 0;
}

.block-rich-text--portrait .block-rich-text__media,
.block-rich-text--portrait .block-rich-text__body { width: 48.5%; }

.block-rich-text--portrait .block-rich-text__media img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.block-rich-text--portrait .block-rich-text__eyebrow { display: none; }

.block-rich-text--portrait .block-rich-text__heading {
    max-width: 590px;
    margin-bottom: 38px;
    line-height: 120%;
    letter-spacing: 0.5px;
}

.block-rich-text--portrait .block-rich-text__text {
    max-width: 448px;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   BLOCK-BIG-NUMBER (live /liveness/ s6): ink, 64px under; an 18px bold cream eyebrow (40px under), the
   400px bold steel figure (120% leading; 288px to 400px with the screen from 1024 to 1440px), then the
   18px caption 7px lower and 310px in from the left, 20px above the end.
   ========================================================================== */
.block-big-number {
    overflow-x: clip;
    padding: 0 0 64px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-big-number__eyebrow {
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-big-number__number {
    font-family: var(--font-bold);
    font-size: 400px;
    font-weight: 700;
    line-height: 120%;
    color: var(--color-steel);
}

.block-big-number__caption { padding-top: 7px; }

.block-big-number__caption-text {
    padding: 0 0 20px 310px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 120%;
}

/* live /liveness/: the "Source" link is not underlined */
.block-big-number__caption-text a { text-decoration: none; color: var(--color-steel); }

/* ==========================================================================
   BLOCK: image-list (live /tattoo-recognition/ "A new standard in tattoo matching")
   Ink; the heading 3.6vw, then the picture (58.8% of the row) with its caption under it and the
   list (38.2%, 100px in from its left, centred beside the picture); tiers in media.css.
   ========================================================================== */
.block-image-list {
    position: relative;
    padding-bottom: 7vw;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

/* the rust notch that rises from the stat-tabs band below (29% wide, 4.375vw tall, cut at 15.3%) */
.block-image-list::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px; /* 1px into the rust section below, so the anti-aliased bottom edge never leaves a hairline */
    width: 29%;
    height: calc(4.375vw + 1px);
    background-color: var(--color-rust);
    clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
}

.block-image-list__head { padding-bottom: 2.5vw; }

.block-image-list__heading {
    margin-bottom: 2.5vw;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 3.6vw;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-steel);
}

.block-image-list__row {
    display: flex;
    align-items: center;
    padding: 40px 0;
}

.block-image-list__media {
    width: 58.8%;
    margin-right: 3%;
}

.block-image-list__picture { line-height: 0; }

.block-image-list__media img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 2.55%;
}

.block-image-list__caption {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 17px 28px 0;
    font-family: var(--font-bold);
    font-size: 28px;
    line-height: 36px;
    color: var(--color-cream);
}

.block-image-list__list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 38.2%;
    min-height: 265px; /* live: a 265px column with the items spread over it */
    margin-bottom: 70px;
    padding-left: 100px;
    list-style: none;
}

.block-image-list__item {
    position: relative;
    padding-left: 40px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-image-list__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: var(--color-rust);
}

/* ==========================================================================
   BLOCK: stat-tabs (live /tattoo-recognition/ "Precision-engineered biometric identification")
   Rust; cream heading 3.6vw, two tabs over a thin ink line (the active one bold with an ink bar),
   a panel of three counters: 87px cream numbers in a 72px figure box over 18px ink labels.
   ========================================================================== */
.block-stat-tabs {
    padding: 6.5vw 0 10.4vw;
    background-color: var(--color-rust);
}

.block-stat-tabs__head { padding-bottom: 6.9vw; }

.block-stat-tabs__heading {
    margin-bottom: 2.5vw;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 3.6vw;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-cream);
}

.block-stat-tabs__list {
    display: flex;
    border-bottom: 1px solid var(--color-ink);
}

.block-stat-tabs__tab {
    width: 50%;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-regular);
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 200%;
    text-align: left;
    color: var(--color-ink);
    cursor: pointer;
}

.block-stat-tabs__tab-label {
    display: inline-block;
    border-bottom: 4px solid transparent;
}

.block-stat-tabs__tab.is-active { font-weight: 900; }

.block-stat-tabs__tab.is-active .block-stat-tabs__tab-label { border-bottom-color: var(--color-ink); }

.block-stat-tabs__panel { padding: 4.1vw 30px 0 0; }

.block-stat-tabs__counters { display: flex; }

/* Counter: hidden until it scrolls into view, then fades in over 1s (shared counter script). */
.block-stat-tabs__counter {
    width: 33.333%;
    opacity: 0;
    transition: opacity 1s;
}

.block-stat-tabs__counter.is-active { opacity: 1; }

.block-stat-tabs__number {
    height: 72px;
    margin-bottom: 20px;
    font-family: var(--font-medium);
    font-size: 87px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-cream);
}

.block-stat-tabs__label {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 500;
    line-height: 200%;
    color: var(--color-ink);
}

/* Style "finest" (live /tattoo-recognition/ "AMERICA'S FINEST"): "services" without the button. The eyebrow
   becomes a centred 120px ghost word in dark graphite (two lines), the heading a 57px statement at 90% width,
   the intro 60px over the grid; tiers in media.css. */
.block-numbered-grid.block-numbered-grid--finest { padding: 100px 0 180px; }

.block-numbered-grid--finest .block-numbered-grid__head { margin-bottom: 0; }

.block-numbered-grid--finest .block-numbered-grid__eyebrow {
    margin-bottom: 50px;
    padding-bottom: 10px;
    font-size: 120px;
    line-height: 110px;
    text-align: center;
    color: var(--color-ghost);
}

.block-numbered-grid--finest .block-numbered-grid__heading {
    width: 90%;
    margin-bottom: 1.5%;
    font-size: 57px;
    line-height: 64px;
}

.block-numbered-grid--finest .block-numbered-grid__intro {
    width: 100%;
    margin-bottom: 60px;
}

.block-numbered-grid.block-numbered-grid--finest .block-numbered-grid__item { padding-right: 80px; }

.block-numbered-grid--finest .block-numbered-grid__grid { display: block; }

.block-numbered-grid--finest .block-numbered-grid__pair { display: flex; }

.block-numbered-grid--finest .block-numbered-grid__pair:first-child { margin-bottom: 4vw; }

/* live: the second row has a 10px gutter, which moves its left column 10px in */
.block-numbered-grid--finest .block-numbered-grid__pair:last-child {
    margin-bottom: 40px;
    padding: 0 10px;
}

.block-numbered-grid--finest .block-numbered-grid__title { margin-bottom: 50px; }

.block-numbered-grid--finest .block-numbered-grid__body p {
    font-size: 18px;
    line-height: 24px;
    color: var(--color-steel);
}


/* ==========================================================================
   BLOCK-STANDARDS (lane B): /testing-and-standards/ title, document text and closing statement.
   Values are the Divi settings of the live page (desktop; tablet and phone in media.css).
   ========================================================================== */

.block-standards-title { padding: 8.6vw 0 0; }

.block-standards-title__heading {
    margin: 0 0 96px;
    padding-bottom: 10px;
    color: var(--color-ink);
    font-family: var(--font-regular);
    font-size: 87px;
    font-weight: 400;
    line-height: 87px;
    text-align: center;
}

.block-standards-title__image { margin-bottom: 128px; }

.block-standards-title__image img {
    display: block;
    width: 100%;
    height: auto;
}

.block-standards-document { padding: 0; }

.block-standards-document .container { padding-bottom: 96px; }

.block-standards-document__updated {
    margin: 0 0 40px;
    color: var(--color-slate);
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    text-align: right;
}

.block-standards-document__eyebrow {
    margin: 0 0 60px;
    color: var(--color-rust);
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 24px;
}

.block-standards-document__heading {
    margin: 0 0 40px;
    padding-bottom: 10px;
    color: var(--color-ink);
    font-family: var(--font-regular);
    font-size: 57px;
    font-weight: 400;
    line-height: 112%;
}

.block-standards-document__text {
    color: var(--color-ink);
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-standards-document__text p {
    margin: 0 0 20px;
    padding: 0;
}

.block-standards-document__text h2 {
    margin: 0 0 40px;
    padding-bottom: 10px;
    font-size: 57px;
    font-weight: 400;
    line-height: 112%;
}

.block-standards-document__text h3 {
    margin: 0;
    padding-bottom: 10px;
    color: var(--color-rust);
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 400;
    line-height: 120%;
}

.block-standards-document__text h4 {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 22px;
    font-weight: 400;
    line-height: 127%;
}

.block-standards-document__text h6 {
    margin: 0 0 50px;
    padding-bottom: 10px;
    font-size: 28px;
    font-weight: 400;
    line-height: 120%;
}

.block-standards-document__text a { text-decoration: underline; }

.block-standards-document__text ul {
    margin: 0;
    padding: 0 0 1em 1em;
    line-height: 26px;
    list-style: square;
}

.block-standards-document__text ul li { padding-bottom: 2px; }

.block-standards-document__text ul li::marker { color: var(--color-rust); }

.block-standards-document__intro { margin-bottom: 128px; }

.block-standards-document__intro p:first-child { padding-bottom: 1em; margin-bottom: 0; }

.block-standards-document__belief { margin-bottom: 96px; }

.block-standards-document__standards { margin-bottom: 30px; }

.block-standards-document__partners {
    margin: 0 0 96px;
    padding: 0;
    list-style: none;
}

.block-standards-document__partner {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.block-standards-document__partner:last-child { margin-bottom: 0; }

.block-standards-document__logo { flex: none; }

.block-standards-document__logo img { display: block; width: auto; max-width: none; height: auto; }

.block-standards-document__partner-copy {
    flex: 1;
    padding-left: 35px;
    color: var(--color-ink);
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-standards-document__partner-name {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 22px;
    font-weight: 400;
    line-height: 127%;
}

.block-standards-document__partner-copy p { margin: 0; padding: 0; }

.block-standards-document__partner-copy a { text-decoration: underline; }


.block-standards-closing__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.block-standards-closing__image { width: 38.2%; }

.block-standards-closing__image img { display: block; width: 100%; height: auto; }

.block-standards-closing__text {
    width: 58.7%;
    margin: -10px 0 0;
    color: var(--color-slate);
    font-family: var(--font-regular);
    font-size: 40px;
    line-height: 160%;
}

.block-standards-closing__button {
    margin: 0;
    padding: 128px 0 248px;
    border-bottom: 1px solid var(--color-steel);
    text-align: center;
}

.block-standards-closing .btn {
    border: 1px solid var(--color-steel);
    background-color: transparent;
    color: var(--color-ink);
}

.block-standards-closing .btn::before { background-image: url("assets/images/arrow-rust.svg"); }

.block-standards-closing .btn:hover { border-color: var(--color-rust); background-color: transparent; color: var(--color-ink); }

/* ==== BLOCK-ZTC (lane B): /ztc/ announcement-bar, brand-intro, product-link-rows, customer-form, founder-quote ==== */
.block-announcement-bar {
    padding: 5.3vw 0 0;
    background-color: var(--color-ink);
    color: var(--color-cream);
    text-align: center;
}

.block-announcement-bar .container { padding: 40px 0; }

.block-announcement-bar__title,
.block-announcement-bar__text {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.5px;
}

.block-announcement-bar__title {
    margin-bottom: 1.5%;
    font-family: var(--font-bold);
}

.block-announcement-bar__title strong {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.block-announcement-bar__icon { display: block; width: 22px; height: auto; }

.block-announcement-bar__text { max-width: 840px; margin: 0 auto; text-align: center; }

.block-brand-intro {
    padding: 128px 0 0;
    background-color: var(--color-cream);
    color: var(--color-ink);
    text-align: center;
}

.block-brand-intro__logo { margin: 0 0 180px; }

.block-brand-intro__logo img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }

.block-brand-intro__main { margin-bottom: 180px; }

.block-brand-intro__heading {
    margin: 0 0 20px;
    padding: 0 0 10px;
    text-align: center;
    font-family: var(--font-bold);
    font-size: 87px;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: -0.25px;
}

.block-brand-intro__lead {
    max-width: 1060px;
    margin: 0 auto 40px;
    text-align: center;
    font-family: var(--font-light);
    font-size: 45px;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: 0.5px;
}

.block-brand-intro .btn-wrap { text-align: center; }

.block-brand-intro__art { margin-bottom: 180px; }

.block-brand-intro__art picture { display: block; }

.block-brand-intro__art img { display: block; width: 100%; max-width: 100%; height: auto; }

.block-brand-intro__subheading {
    margin: 0 0 20px;
    padding: 0 0 10px;
    text-align: center;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-brand-intro__text {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.5px;
}

.block-product-link-rows {
    padding: 80px 0 0;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-product-link-rows__row {
    display: flex;
    gap: 3.02%;
    margin: 0 0 40px;
    padding: 20px;
    border: 1px solid var(--color-steel);
    cursor: pointer;
}

.block-product-link-rows__row:last-child { margin-bottom: 128px; }

.block-product-link-rows__main {
    position: relative;
    display: flex;
    flex: 0 0 58.75%;
    flex-direction: column;
    justify-content: space-between;
    min-height: 371px;
    box-sizing: border-box;
    padding: 50px 30px 30px;
}

.block-product-link-rows__arrow { position: absolute; top: 0; right: 0; display: block; width: 24px; height: auto; }

.block-product-link-rows__logo { display: block; margin-bottom: 17.93px; }

.block-product-link-rows__logo img { display: block; max-width: 100%; height: auto; }

.block-product-link-rows__text {
    max-width: 400px;
    margin: 0 0 17.93px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-product-link-rows__phone-image { display: none; }

.block-product-link-rows__side { position: relative; flex: 1; min-width: 0; overflow: hidden; }

.block-product-link-rows__side img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.block-customer-form {
    background-color: var(--color-cream);
    color: var(--color-ink);
    text-align: center;
}

.block-customer-form__heading {
    margin: 0 0 20px;
    padding: 0 0 10px;
    text-align: center;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-customer-form__text {
    max-width: 840px;
    margin: 0 auto 120px;
    text-align: center;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.5px;
}

.block-customer-form__form { margin-bottom: 128px; text-align: left; }

.block-founder-quote {
    padding: 0 0 128px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-founder-quote__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 60px; }

.block-founder-quote__mark img { display: block; width: 169px; height: auto; }

.block-founder-quote__author { display: flex; align-items: center; }

.block-founder-quote__photo { margin-right: 15px; }

.block-founder-quote__photo img { display: block; width: 115px; height: auto; }

.block-founder-quote__name {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-founder-quote__name strong { font-weight: 600; }

.block-founder-quote__role { display: block; }

.block-founder-quote__quote {
    margin: 0 0 60px;
    font-family: var(--font-light);
    font-size: 36px;
    font-weight: 300;
    line-height: 160%;
    letter-spacing: -0.25px;
}

.block-founder-quote__signature img { display: block; width: 642px; max-width: 100%; height: auto; margin: 0 auto; }

/* ==== BLOCK-AGE-API (lane B): /age-estimation-api/ tagline-link, rank-cards, api-integration, rules-panel, price-plans, age-use-cards, benefit-list, trial-banner ==== */
.block-tagline-link {
    padding: 60px 0;
    background-color: var(--color-ink);
    color: var(--color-cream);
}

.block-tagline-link__text {
    margin: 0 0 1.5%;
    color: var(--color-steel);
    font-family: var(--font-light);
    font-size: 45px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: 0.5px;
}

.block-tagline-link__link {
    display: block;
    width: fit-content;
    margin: 60px 0 0;
    padding: 0 0 5px;
    border-bottom: 1px solid var(--color-rust);
    color: var(--color-cream);
    font-family: var(--font-regular);
    font-size: 22px;
    line-height: 18px;
}

.block-tagline-link__arrow { display: inline-block; width: 18px; height: auto; margin-left: 1px; vertical-align: top; }

.block-rank-cards {
    position: relative;
    padding: 450px 0 160px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-rank-cards__background { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }

/* Divi true parallax (live): main.js sets --parallax-shift on the section, the picture top inside it
   (phones: static, centred). */
.block-rank-cards__background img { position: absolute; top: 0; left: 50%; display: block; width: auto; max-width: none; height: auto; transform: translate(-50%, var(--parallax-shift, 0px)); }

.block-rank-cards__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.block-rank-cards__card {
    display: block;
    box-sizing: border-box;
    width: 337px;
    height: 360px;
    margin: 1px;
    background-color: var(--color-steel);
    clip-path: polygon(83% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
    transition: background-color 300ms ease;
}

.block-rank-cards__card:hover { background-color: var(--color-rust); }

.block-rank-cards__body {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: calc(100% - 2px);
    height: 358px;
    margin: 1px;
    padding: 60px 8px 15px 15px;
    background-color: #111113;
    clip-path: polygon(83% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
    color: var(--color-steel);
}

.block-rank-cards__card-art { display: none; }

.block-rank-cards__rank {
    align-self: flex-start;
    margin-bottom: 0;
    color: var(--color-rust);
    font-family: var(--font-bold);
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
}

.block-rank-cards__title {
    display: block;
    flex-grow: 1;
    padding-bottom: 10px;
    color: var(--color-cream);
    font-family: var(--font-bold);
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
}

.block-rank-cards__note {
    display: block;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 22px;
}

/* Legal size (15px against the 18px body, ROC review DIGITAL-306; live sets the caption at the body size). */
.block-rank-cards__caption {
    color: var(--color-white);
    font-family: var(--font-regular);
    font-size: 15px;
    line-height: 133%;
}

.block-rank-cards__caption p { margin: 0; }

.block-rank-cards__caption a { text-decoration: underline; text-decoration-color: var(--color-rust); }

.block-api-integration {
    padding: 0 0 180px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-api-integration__eyebrow {
    margin: 0 0 76px;
    color: var(--color-steel);
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 20px;
}

.block-api-integration__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3%;
    margin-bottom: 80px;
}

.block-api-integration__heading,
.block-api-integration__code-heading {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-api-integration__heading {
    margin-bottom: 40px;
    color: var(--color-cream);
}

.block-api-integration__text {
    margin: 0;
    color: var(--color-cream);
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-api-integration__video { height: 370px; overflow: hidden; }

.block-api-integration__video video { display: block; width: 100%; height: 100%; object-fit: cover; }

.block-api-integration__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
    margin: 0 0 80px;
    padding: 0;
    list-style: none;
}

.block-api-integration__step { display: block; }

.block-api-integration__number {
    display: block;
    margin-bottom: 20px;
    color: var(--color-rust);
    font-family: var(--font-regular);
    font-size: 21px;
    line-height: 100%;
}

.block-api-integration__step-title {
    display: block;
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 33px;
    font-weight: 700;
    line-height: 100%;
}

.block-api-integration__step-text {
    display: block;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.5px;
}

.block-api-integration__button { margin-bottom: 100px; }

.block-api-integration .btn--outline,
.block-benefit-list .btn--outline { background-color: var(--color-ink); }

.block-api-integration .btn--outline:hover,
.block-benefit-list .btn--outline:hover { background-color: transparent; }

.block-api-integration__code-row {
    display: grid;
    grid-template-columns: 38.2% 58.8%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 200px;
}

.block-api-integration__code-row:last-child { margin-bottom: 0; }

.block-api-integration__code-heading { color: var(--color-steel); }

.block-api-integration__code {
    box-sizing: border-box;
    width: 650px;
    max-width: 100%;
    margin-left: auto;
    padding: 28px 44px;
    overflow: hidden;
    border: 1px solid #03c9a5;
    border-radius: 28px;
    background-color: var(--color-ink);
    box-shadow: 0 4px 100px 63px rgba(3, 201, 165, 0.23);
}

.block-api-integration__code pre {
    margin: 0;
    padding: 10px;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    font-family: "Courier New", monospace;
}

.block-api-integration__code code {
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
    color: var(--color-cream);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: clamp(16px, 1.45vw, 24px);
    font-weight: 400;
    line-height: 1.45;
    text-overflow: ellipsis;
}

.block-api-integration__code .code-url,
.block-api-integration__code .code-string,
.block-api-integration__code .code-number { color: #03c9a5; }

.block-rules-panel {
    position: relative;
    padding: 0 0 180px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-rules-panel__background { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }

.block-rules-panel__background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.block-rules-panel__row {
    display: grid;
    grid-template-columns: 58.8% 38.2%;
    align-items: center;
    justify-content: space-between;
}

.block-rules-panel__image img { display: block; width: 634px; max-width: 100%; height: auto; }

.block-rules-panel__heading {
    margin: 0;
    padding: 0 0 10px;
    color: var(--color-steel);
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

/* Shaded variant (live /age-estimation-api-pg/ .lp-apply-sec): from 981px a dark veil fades in over the grid behind the text side. */
@media (min-width: 981px) {
    .block-rules-panel--shaded::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(17, 17, 20, 0) 40%, rgba(17, 17, 20, 0.8) 62%, rgba(17, 17, 20, 0.8) 100%);
    }

    .block-rules-panel--shaded .container { position: relative; z-index: 1; }

    .block-rules-panel--shaded .block-rules-panel__text { width: 340px; }
}

.block-rules-panel__text {
    width: 270px;
    margin: 0;
    color: var(--color-steel);
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-price-plans {
    padding: 120px 0;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-price-plans__heading {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    text-align: center;
}

.block-price-plans__intro { margin-bottom: 80px; text-align: center; font-family: var(--font-regular); font-size: 18px; line-height: 140%; }

.block-price-plans__intro p { margin: 0; }

.block-price-plans__subheading {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.5px;
}

.block-price-plans__plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
    margin-bottom: 60px;
}

.block-price-plans__details { margin-bottom: 35px; font-family: var(--font-regular); font-size: 18px; line-height: 133%; }

.block-price-plans__name {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 700;
    line-height: 105%;
}

.block-price-plans__plan-text { margin: 0; }

.block-price-plans__features { margin: 20px 0 0; padding: 0 0 23px 1em; list-style: none; line-height: 26px; }

.block-price-plans__features li { position: relative; padding: 10px; }

.block-price-plans__features li::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -16px;
    width: 16px;
    height: 16px;
    background-color: var(--color-rust);
}

.block-price-plans__price {
    margin: 0;
    padding: 0 0 40px;
    border-bottom: 1px solid var(--color-rust);
    font-family: var(--font-regular);
    font-size: 29px;
    line-height: 100%;
}

.block-price-plans__price strong { font-family: var(--font-bold); font-size: 57px; font-weight: 700; }

.block-price-plans__contact {
    margin-bottom: 100px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    text-align: center;
}

.block-price-plans__contact p { margin: 0; }

.block-price-plans__contact a { text-decoration: underline; text-decoration-color: var(--color-rust); }

.block-price-plans__button { text-align: center; }

.block-price-plans__note {
    width: 920px;
    max-width: 90vw; /* live: 920px, wider than the 80% row and running past it on the right; 90vw (row starts at 10vw) keeps that and never scrolls sideways */
    margin: 40px auto 0;
    font-family: var(--font-regular);
    font-size: 15px;
    line-height: 110%;
    letter-spacing: 0.5px;
    text-align: center;
}

.block-age-use-cards {
    padding: 160px 0;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-age-use-cards__eyebrow {
    margin: 0 0 60px;
    font-family: var(--font-bold);
    font-size: 0.97vw;
    line-height: 142%;
}

.block-age-use-cards__heading {
    margin: 0 0 107px;
    padding: 0;
    color: var(--color-cream);
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0.5px;
}

.block-age-use-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, min(23.2vw, calc((100% - 98px) / 3)));
    justify-content: space-between;
    gap: 60px 49px;
    margin-bottom: 80px;
}

.block-age-use-cards__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 238px;
    padding: 34px 25px;
    border: 1px solid var(--color-steel);
}

/* Staggered columns: the first scroll motion value (JS sets --motion-y). */
.block-age-use-cards__card--offset-100 { transform: translateY(var(--motion-y, 100px)); }

.block-age-use-cards__card--offset-200 { transform: translateY(var(--motion-y, 200px)); }

.block-age-use-cards__title {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 117%;
}

.block-age-use-cards__text { margin: 0; font-family: var(--font-regular); font-size: 18px; line-height: 118%; }

.block-age-use-cards__link {
    display: block;
    width: fit-content;
    padding: 0 0 5px;
    border-bottom: 1px solid var(--color-rust);
    color: var(--color-cream);
    font-family: var(--font-regular);
    font-size: 22px;
    line-height: 18px;
}

.block-age-use-cards__arrow { display: inline-block; width: 18px; height: auto; margin-left: 1px; vertical-align: top; }

.block-benefit-list {
    padding: 126px 0 140px;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-benefit-list__eyebrow {
    margin: 0 0 40px;
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 142%;
}

.block-benefit-list__heading {
    margin: 0 0 40px;
    padding: 0 0 10px;
    color: var(--color-cream);
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-benefit-list__items {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 48px) / 2));
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-benefit-list__item { display: block; margin-bottom: 59px; }


.block-benefit-list__button { margin-top: 60px; }

.block-benefit-list__number {
    display: block;
    margin-bottom: 1vw;
    color: var(--color-rust);
    font-family: var(--font-medium);
    font-size: 1.45vw;
    line-height: 150%;
}

.block-benefit-list__title {
    margin: 0 0 21px;
    padding: 0 0 10px;
    color: var(--color-cream);
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 700;
    line-height: 100%;
}

.block-benefit-list__text { margin: 0; font-family: var(--font-regular); font-size: 18px; line-height: 24px; }

.block-trial-banner {
    padding: 120px 0;
    background-color: var(--color-cream);
    color: var(--color-ink);
    text-align: center;
}

/* centred like live: beats the left alignment every page section gets */
.page-sections > .block-trial-banner { text-align: center; }

.block-trial-banner__image { margin-bottom: 80px; }

.block-trial-banner__image img { display: block; width: 100%; height: auto; }

/* Rust ribbon style (live /age-estimation-api-pg/ "100 free age checks."): rust band, 120px over and under, cream
   heading and sentence, the ink pill 45px under the sentence; a notched tab rises over the previous section at the right
   (29% wide) and one hangs under the band at the left (38% wide), both 4.375vw tall. */
.block-trial-banner--ribbon {
    position: relative;
    z-index: 2;
    background-color: var(--color-rust);
    color: var(--color-cream);
}

.block-trial-banner--ribbon::before,
.block-trial-banner--ribbon::after {
    content: "";
    position: absolute;
    height: 4.375vw;
    background-color: var(--color-rust);
    clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
}

.block-trial-banner--ribbon::before { top: calc(-4.375vw + 1px); right: 0; width: 29%; }

.block-trial-banner--ribbon::after { bottom: calc(-4.375vw + 1px); left: 0; width: 38%; transform: scale(-1, -1); }

.block-trial-banner--ribbon .block-trial-banner__text { margin: 0; line-height: 124%; }

.block-trial-banner--ribbon .block-trial-banner__button { margin-top: 45px; }

.block-trial-banner__heading {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-trial-banner__text { margin: 0 0 80px; font-family: var(--font-regular); font-size: 18px; line-height: 140%; }

.block-trial-banner__note {
    width: 920px;
    max-width: 90vw;
    margin: 40px auto 0;
    font-family: var(--font-regular);
    font-size: 15px;
    line-height: 110%;
    letter-spacing: 0.5px;
}

.block-faq-accordion--api .block-faq-accordion__heading { color: var(--color-steel); }

.block-faq-accordion--api .block-faq-accordion__intro { margin-bottom: 99px; }

.block-faq-accordion--api .block-faq-accordion__body { padding-bottom: 1.9%; }

/* ==========================================================================
   BLOCK: list-promo (live /object-detection/ "WEAPONS DETECTION")
   Ink, 140px over and under; cream eyebrow, heading and copy left (48.5%) with the rust square list right,
   then a cream card with 38px padding: text 38.2%, picture 58.8% (450px tall); tiers in media.css.
   ========================================================================== */
.block-list-promo {
    padding: 140px 0;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-list-promo__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 20px;
    color: var(--color-cream);
}

.block-list-promo__row {
    display: flex;
    margin-bottom: 80px;
}

.block-list-promo__intro {
    width: 48.5%;
    margin-right: 3%;
}

.block-list-promo__heading {
    margin-bottom: 30px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-steel);
}

.block-list-promo__text {
    margin-bottom: 60px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-list-promo__text p + p { margin-top: 20px; }

.block-list-promo__list {
    width: 48.5%;
    padding-left: 100px;
    list-style: none;
}

.block-list-promo__item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 40px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-list-promo__item:last-child { margin-bottom: 0; }

.block-list-promo__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: var(--color-rust);
}

.block-list-promo__card {
    display: flex;
    padding: 38px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-list-promo__card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 38.2%;
    margin-right: 3%;
    padding-right: 40px;
}

.block-list-promo__author {
    display: flex;
    align-items: center;
    min-height: 52px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 500;
    line-height: 42px;
    color: var(--color-slate);
}

.block-list-promo__author-name { padding-left: 57.5px; }

/* live /object-detection/: the 42px round photo sits 15px before the name on desktops and tablets too (phones in media.css) */
.block-list-promo__author-picture {
    flex: 0 0 42px;
    width: 42px;
    margin-right: 15px;
    overflow: hidden;
    line-height: 0;
    border-radius: 50%;
}

.block-list-promo__author-picture img {
    width: 100%;
    height: auto;
}

.block-list-promo__author-picture + .block-list-promo__author-name { padding-left: 0; }

.block-list-promo__card-title {
    margin-bottom: 25px;
    font-family: var(--font-bold);
    font-size: 33px;
    font-weight: 500;
    line-height: 115%;
    color: var(--color-ink);
}

.block-list-promo__card-copy {
    margin-bottom: 86px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
    color: var(--color-black);
}

.block-list-promo__card-link {
    width: fit-content;
    border-bottom: 1px solid var(--color-rust);
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 133%;
    color: var(--color-rust);
}

.block-list-promo__card-media {
    display: flex;
    align-items: flex-end;
    width: 58.8%;
}

.block-list-promo__card-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: right;
}

/* Feature-carousel "capabilities" (live /object-detection/ "CAPABILITIES"): eyebrow 60px over a full width heading
   (100px under it), the intro 60px over the 400px slides, 100px under the section. */
.block-feature-carousel.block-feature-carousel--capabilities { padding-bottom: 100px; }

.block-feature-carousel--capabilities .block-feature-carousel__head { margin-bottom: 60px; }

.block-feature-carousel--capabilities .block-feature-carousel__eyebrow {
    margin-bottom: 60px;
    line-height: 20px;
}

.block-feature-carousel--capabilities .block-feature-carousel__heading {
    width: 100%;
    margin-bottom: 100px;
    line-height: 112%;
}

.block-feature-carousel--capabilities .block-feature-carousel__intro {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
    color: var(--color-steel);
}

.block-feature-carousel--capabilities .swiper-slide.block-feature-carousel__slide { height: 400px; }

/* Numbered-grid option "roomy" (live /object-detection/ "READY TO ROC", style ready): 11.8vw over and 8vw under the
   section, 140px under the grid. */
.block-numbered-grid.block-numbered-grid--roomy { padding: 11.8vw 0 8vw; }

.block-numbered-grid--roomy .block-numbered-grid__grid { margin-bottom: 140px; }

/* Numbered-grid option "top_notch" (live /object-detection/): an ink notch rises over the end of the previous section
   (29% wide, 4.375vw tall, cut at 15.3%), not on phones. */
@media (min-width: 768px) {
    .block-numbered-grid--top-notch::before {
        content: "";
        position: absolute;
        top: calc(1px - 4.375vw);
        right: 0;
        width: 29%;
        height: 4.375vw;
        background-color: var(--color-ink);
        clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ==========================================================================
   BLOCK: rank-numeral (live /face-analytics/ "AGE ESTIMATION")
   Ink; 5.55vw over and 4vw under; a 3.95vw heading; a row of 48.5% (the giant #1 at its right end), a narrow
   middle column that carries the picture (46.6vw wide, from 130% to the left of the column, centred on it) and
   22.8% for the caption; two steel bands at the bottom edge; tiers in media.css.
   ========================================================================== */
.block-rank-numeral {
    position: relative;
    padding: 5.55vw 0 4vw;
    background-color: var(--color-ink);
    color: var(--color-steel);
}

.block-rank-numeral::before,
.block-rank-numeral::after {
    content: "";
    position: absolute;
    z-index: 6;
    height: 63px;
    background-color: var(--color-steel);
}

.block-rank-numeral::before {
    bottom: 58px;
    left: 0;
    width: 20%;
    clip-path: polygon(0 0, 79.5% 0, 100% 100%, 0 100%);
}

.block-rank-numeral::after {
    top: calc(100% - 58px);
    right: 0;
    width: 80%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 5.55% 100%);
}

.block-rank-numeral__eyebrow {
    margin-bottom: 60px;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 142%;
    color: var(--color-cream);
}

.block-rank-numeral__heading {
    margin-bottom: 1.5%;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 3.95vw;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-steel);
}

.block-rank-numeral__text {
    margin-bottom: 1.5%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-rank-numeral__row {
    display: flex;
    padding: 33px 0;
}

.block-rank-numeral__numerals {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 48.5%;
    margin-right: 3%;
}

.block-rank-numeral__hash {
    margin-bottom: 20px;
    font-family: var(--font-light);
    font-size: 240px;
    font-weight: 300;
    line-height: 192px;
    color: var(--color-steel);
}

.block-rank-numeral__digit {
    position: relative;
    z-index: 1;
    font-family: var(--font-bold);
    font-size: 477px;
    font-weight: 700;
    line-height: 100%;
    color: var(--color-steel);
}

.block-rank-numeral__stage {
    position: relative;
    width: 22.8%;
    margin-right: 3%;
}

.block-rank-numeral__picture {
    position: absolute;
    top: 50%;
    left: -130%;
    z-index: 5;
    width: 46.6vw;
    line-height: 0;
    transform: translateY(-50%);
}

.block-rank-numeral__picture img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 700px;
    margin: 0 auto;
}

.block-rank-numeral__caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 22.8%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

.block-rank-numeral__caption p,
.block-rank-numeral__text--phone p { margin-bottom: 20px; }

.block-rank-numeral__caption a,
.block-rank-numeral__text a { text-decoration: underline; color: var(--color-rust); }

/* Feature-carousel "short" (live /face-analytics/ "APPLICATIONS"): standard cards in 400px slides, nothing under the section. */
.block-feature-carousel.block-feature-carousel--short { padding-bottom: 0; }

.block-feature-carousel--short .swiper-slide.block-feature-carousel__slide { height: 400px; }

/* Headed side variant (live /face-analytics/ "Part of the ROC Identity Toolkit"): the heading over the whole row (56px,
   72px from 1500px), the list in the right 3/4 column; spaced like "stacked". */
.block-accordion-list--headed .block-accordion-list__heading {
    margin-bottom: 30px;
    padding-bottom: 10px;
    font-size: 56px;
    line-height: 112%;
    color: var(--color-steel);
}

.block-accordion-list--headed .block-accordion-list__list {
    width: 74.25%;
    margin-left: auto;
}

/* Ink-cream theme (live /face-analytics/): the ink theme with a cream heading, 60px over and under the band, 20px row
   padding and the copy at the start of its column; every list item but the last has 3.093% under it; tiers in media.css. */
.block-flag-cta.block-flag-cta--ink-cream { padding: 60px 0; }
.block-flag-cta--ink-cream .block-flag-cta__row { padding: 20px 0; }
.block-flag-cta--ink-cream .block-flag-cta__content { padding: 20px 0; }
.block-flag-cta--ink-cream .block-flag-cta__heading { width: 95%; color: var(--color-cream); }
.block-flag-cta--ink-cream .block-flag-cta__flag { margin-bottom: 0; }

/* the ink notch that rises over the end of the section above (29% wide, 4.375vw tall, cut at 15.3%), not on phones */
@media (min-width: 768px) {
    .block-flag-cta--ink-cream { overflow: visible; }
    .block-flag-cta--ink-cream::before {
        content: "";
        position: absolute;
        top: calc(1px - 4.375vw);
        right: 0;
        width: 29%;
        height: 4.375vw;
        background-color: var(--color-ink);
        clip-path: polygon(15.3% 0, 100% 0, 100% 100%, 0 100%);
    }
}
.block-flag-cta--ink-cream .block-flag-cta__text { line-height: 140%; }
.block-flag-cta--ink-cream .block-flag-cta__item { margin-bottom: 3.093%; }
.block-flag-cta--ink-cream .block-flag-cta__item:last-child { margin-bottom: 0; }

/* product-tabs option "text_top" (live /face-analytics/): the copy starts at the top of its band */
.block-product-tabs--text-top .block-product-tabs__text { justify-content: flex-start; }

/* option "bg_center" (live /face-analytics/): the background is centered, not bottom right */
.block-product-tabs--bg-center .block-product-tabs__bg { object-position: 50% 50%; }

/* ==========================================================================
   BLOCK: bordered-cells (live /ai-gun-detection/ "Real-Time Gun Detection for Faster Incident Response")
   Ink; a 57px heading and a grid of outlined cells (3 per row, 240px tall, 40px padding, a bold 28px label at the
   bottom); the rows keep their own outline, so the line between two rows is doubled like live. Tiers in media.css.
   ========================================================================== */
.block-bordered-cells {
    padding: min(3vw, 50px) 0 140px;
    background-color: var(--color-ink);
}

.block-bordered-cells__heading {
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-cream);
}

.block-bordered-cells__grid {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
}

.block-bordered-cells__cell {
    display: flex;
    align-items: flex-end;
    min-height: 240px;
    padding: 40px;
    border-color: var(--color-slate);
    border-style: solid;
    border-width: 1px 0;
}

.block-bordered-cells__cell:nth-child(3n + 1) { border-left-width: 1px; }
.block-bordered-cells__cell:nth-child(3n + 2) { border-left-width: 1px; border-right-width: 1px; }
.block-bordered-cells__cell:nth-child(3n) { border-right-width: 1px; }

.block-bordered-cells__text {
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 700;
    line-height: 115%;
    color: var(--color-steel);
}

.block-bordered-cells__phone-only { display: none; }

/* ==========================================================================
   BLOCK: text-media-rows (live /ai-gun-detection/ "What is AI Gun Detection?" / "How AI Gun Detection Systems Work")
   Ink; rows of two halves with 40px between them (57px heading, 18px copy in steel; a looping video cropped from the
   bottom, or a picture, beside it); 80px between rows, 140px under the section; tiers in media.css.
   ========================================================================== */
.block-text-media-rows {
    padding: min(3vw, 50px) 0 140px;
    background-color: var(--color-ink);
}

.block-text-media-rows__row {
    display: flex;
    justify-content: space-between;
}

.block-text-media-rows__row + .block-text-media-rows__row { margin-top: 80px; }

.block-text-media-rows__copy,
.block-text-media-rows__media {
    flex: 0 0 48.5%;
    min-width: 0;
}

.block-text-media-rows__row--media-left .block-text-media-rows__media { order: -1; }

.block-text-media-rows__heading {
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-cream);
}

.block-text-media-rows__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
    color: var(--color-steel);
}

.block-text-media-rows__text p { padding-bottom: 18px; }
.block-text-media-rows__text p:last-child { padding-bottom: 0; }

.block-text-media-rows__media { clip-path: polygon(0 0, 100% 0, 100% 100%, 17% 100%, 0 73%); }

.block-text-media-rows__media--video {
    position: relative;
    overflow: hidden;
}

.block-text-media-rows__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

.block-text-media-rows__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   BLOCK: numbered-pairs (live /ai-gun-detection/ "ROC GUN DETECTION")
   Cream; a 14px eyebrow, a 57px heading with an 18px intro, numbered items in rows of two (21px rust number, 28px bold
   title, 18px copy; 100px between rows, 140px under the last), then a closing line (heading and copy in 3/5, the button
   in 2/5, centred on each other); 80px under the section. Tiers in media.css.
   ========================================================================== */
.block-numbered-pairs {
    padding-bottom: 80px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-numbered-pairs__head { margin-bottom: 120px; }

.block-numbered-pairs__eyebrow {
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.block-numbered-pairs__heading {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-numbered-pairs__intro {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-numbered-pairs__intro p { padding-bottom: 0; }

.block-numbered-pairs__list {
    display: grid;
    list-style: none;
    grid-template-columns: 48.5% 48.5%;
    column-gap: 3%;
    row-gap: 100px;
    margin-bottom: 140px;
}

.block-numbered-pairs__number {
    margin-bottom: 20px;
    font-family: var(--font-regular);
    font-size: 21px;
    line-height: 160%;
    color: var(--color-rust);
}

.block-numbered-pairs__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 120%;
}

.block-numbered-pairs__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-numbered-pairs__text a { text-decoration: underline; }

.block-numbered-pairs__phone-image { display: none; }

.block-numbered-pairs__closing {
    display: flex;
    align-items: center;
    gap: 3%;
}

.block-numbered-pairs__closing-copy { flex: 0 0 58.8%; }
.block-numbered-pairs__actions { flex: 1 1 auto; }

/* ==========================================================================
   BLOCK: highlight-statement (live /ai-gun-detection/ "The role of gun detection ...")
   Cream; 140px over and 100px under; an 87px light statement (125% leading, ink) with 80px under it and a centred
   button. A span.anim in the statement gets a 12px rust underline that grows once when the span is 40% in view
   (main.js adds .in-view); tiers in media.css.
   ========================================================================== */
.block-highlight-statement {
    padding: 140px 0 100px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-highlight-statement__text {
    margin-bottom: 80px;
    font-family: var(--font-light);
    font-size: 87px;
    font-weight: 300;
    line-height: 125%;
}

.block-highlight-statement__actions {
    height: 62px;
    text-align: center;
}

.block-highlight-statement .btn,
.block-numbered-pairs .btn { height: 55px; }

.block-highlight-statement .anim {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.block-highlight-statement .anim::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 12px;
    background: var(--color-rust);
    transform: scaleX(0);
    transform-origin: left center;
}

.block-highlight-statement .anim.in-view::after { animation: roc-underline-once 1.5s ease-in-out forwards; }

@keyframes roc-underline-once {
    0% { transform: scaleX(0); }
    50% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .block-highlight-statement .anim::after { transform: scaleX(1); }
    .block-highlight-statement .anim.in-view::after { animation: none; }
}

/* ==========================================================================
   BLOCK: outlined-cards (live /ai-gun-detection/ "Public Safety / Access Control / Tactical Response")
   Cream; cards with a 1px steel outline, 40px apart: the text in 3/5 (50px padding, 300px tall, title at the top and
   copy at the bottom), the picture in 2/5 (20px padding). Tiers in media.css.
   ========================================================================== */
.block-outlined-cards {
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-outlined-cards__card {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-steel);
}

.block-outlined-cards__card + .block-outlined-cards__card { margin-top: 40px; }

.block-outlined-cards__copy {
    flex: 0 0 58.7%;
    margin-right: 3%;
    padding: 50px;
}

.block-outlined-cards__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32vw;
    min-height: 300px;
}

.block-outlined-cards__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 120%;
}

.block-outlined-cards__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-outlined-cards__text p + p { padding-top: 1em; }

/* Learn More on these cream cards: ink text and arrow. */
.block-outlined-cards__text .block-accordion-list__link { color: var(--color-ink); }

.block-outlined-cards__text .block-accordion-list__link::after { background-image: url("assets/images/arrow-long-ink.svg"); }

.block-outlined-cards__media {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
}

.block-outlined-cards__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   BLOCK: scroll-reveal (live /ai-gun-detection/ "Own the Vertical Space")
   Cream; 120px over and 400px under; a looping video, and a 176px light heading (500px of padding above it) drawn
   twice: cream inside the video box (clipped by it) and ink behind it, so the letters change colour where they leave
   the video. Both copies move with the scroll (data-scroll-motion, main.js) and start 200px down; the ink copy is
   above the next section like live. Tiers in media.css.
   ========================================================================== */
.block-scroll-reveal {
    padding: 120px 0 400px;
    background-color: var(--color-cream);
}

.block-scroll-reveal .block-scroll-reveal__frame {
    position: relative;
    z-index: 5;
}

.block-scroll-reveal__stage {
    position: relative;
    z-index: 10;
    min-height: 750px;
    height: var(--stage-height, auto);
    overflow: hidden;
}

.block-scroll-reveal__video {
    display: block;
    width: 100%;
    height: auto;
}

.block-scroll-reveal__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 500px;
    transform: translateY(var(--motion-y, 200px));
}

.block-scroll-reveal__text--over { z-index: 4; }

.block-scroll-reveal__ink {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.block-scroll-reveal__heading {
    padding-bottom: 10px;
    font-family: var(--font-light);
    font-size: 176px;
    font-weight: 300;
    line-height: 200%;
    text-align: center;
    color: var(--color-cream);
}

.block-scroll-reveal__text--under .block-scroll-reveal__heading { color: var(--color-ink); }

/* ==========================================================================
   BLOCK: callout-columns (live /ai-gun-detection/ "Beyond fixed-camera setups" + "CONFIGURABLE WORKFLOWS")
   Cream; the section is 200px short at the bottom (the next section covers it) and slides up with the scroll (main.js).
   The callout is a 1px ink outline with the top-right corner cut (95% / 25%): an ink box with a cream fill one pixel in,
   both clipped. Then a 14px eyebrow, a 57px heading (70% wide) with copy, and three columns 5.5% apart (33px bold
   titles, 18px copy). Tiers in media.css.
   ========================================================================== */
.block-callout-columns {
    position: relative;
    margin-bottom: -200px;
    transform: translateY(var(--motion-y, 0px));
    padding-bottom: 120px;
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-callout-columns__callout {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 120px;
    border: 1px solid var(--color-ink);
    background-color: var(--color-ink);
    clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}

.block-callout-columns__callout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: var(--color-cream);
    clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}

.block-callout-columns__callout-copy {
    position: relative;
    z-index: 100;
    flex: 0 0 58.7%;
    margin-right: 3%;
    padding: 80px 0 80px 80px;
    font-family: var(--font-regular);
    font-size: 18px;
    letter-spacing: 0.1px;
    line-height: 140%;
}

.block-callout-columns__callout-copy p { width: 102%; }

.block-callout-columns__callout-action {
    position: relative;
    z-index: 100;
    flex: 1 1 auto;
    text-align: center;
}

.block-callout-columns .btn--outline {
    height: 56px;
    padding: 0 50px 0 24px;
    color: var(--color-ink);
}

.block-callout-columns .btn--outline::before {
    width: 12px;
    height: 17px;
    background-image: url("assets/images/carrot-rust.svg");
    background-position: 0 0;
    background-size: auto;
}

.block-callout-columns .btn--outline:hover { color: var(--color-ink); }

.block-callout-columns__eyebrow {
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.block-callout-columns__intro { margin-bottom: 80px; }

.block-callout-columns__heading {
    width: 70%;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 112%;
}

.block-callout-columns__intro-text {
    width: 70%;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

.block-callout-columns__columns {
    display: flex;
    justify-content: space-between;
}

.block-callout-columns__column {
    flex: 0 0 29.67%;
    min-width: 0;
}

.block-callout-columns__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 33px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 120%;
    overflow-wrap: anywhere; /* live lets the unbreakable "to the Environment" run into the next column below 1100px */
}

.block-callout-columns__text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 140%;
}

/* BLOCK: photo-band (live /ai-gun-detection/ multi-screen strip): a covering photograph 33vw tall (142px on phones). */
.block-photo-band {
    position: relative;
    z-index: 3; /* above the 200px of the section before it (live paints the band over that section's last lines) */
    height: 33vw;
    overflow: hidden;
    background-color: var(--color-ink);
}

.block-photo-band__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
}

/* definition-rows theme "cream-open" (live /ai-gun-detection/ "POST-EVENT ANALYTICS"): 120px over and nothing under, a 14px
   eyebrow over a heading 70% wide with 40px under it, the last row without the extra 40px. */
.block-definition-rows--cream-open { padding: 120px 0 0; }

.block-definition-rows__eyebrow {
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.block-definition-rows--cream-open .block-definition-rows__heading { flex: 0 0 70%; }
.block-definition-rows--cream-open .block-definition-rows__row:last-child { margin-bottom: 0; }

/* accordion-list "group" and "group-end" (live /ai-gun-detection/): a 28px bold heading (rust underline on its link) over a
   28px steel lead with 60px under it; 80px over the first group and 100px (zoomed with the row) under it, none over and 120px under the second.
   Numbers can continue from the group above (start-N). */
.block-accordion-list.block-accordion-list--dark.block-accordion-list--group { padding: 80px 0 0; }
.block-accordion-list--group .container { padding-bottom: 100px; }
.block-accordion-list--group-end .container { padding-bottom: 0; }
.block-accordion-list.block-accordion-list--dark.block-accordion-list--group-end { padding: 0 0 120px; }

.block-accordion-list--group .block-accordion-list__heading {
    margin-bottom: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 120%;
}

.block-accordion-list--group .block-accordion-list__heading a { border-bottom: 2px solid var(--color-rust); }

.block-accordion-list--group-end .block-accordion-list__title { font-family: var(--font-regular); } /* live: the second list is set in the regular cut */
.block-accordion-list--group-end .block-accordion-list__item:first-child { border-top: 0; }

.block-accordion-list.block-accordion-list--group .block-accordion-list__intro {
    width: 100%;
    margin-bottom: 60px;
    font-size: 28px;
    letter-spacing: 0.5px;
    line-height: 120%;
}

.block-accordion-list--start-1 .block-accordion-list__list { counter-reset: accordion 1; }
.block-accordion-list--start-2 .block-accordion-list__list { counter-reset: accordion 2; }
.block-accordion-list--start-3 .block-accordion-list__list { counter-reset: accordion 3; }
.block-accordion-list--start-4 .block-accordion-list__list { counter-reset: accordion 4; }
.block-accordion-list--start-5 .block-accordion-list__list { counter-reset: accordion 5; }
.block-accordion-list--start-6 .block-accordion-list__list { counter-reset: accordion 6; }

/* ==========================================================================
   BLOCK-HERO-PHOTO (live /latent-fingerprint-for-law-enforcement/, /face-recognition-sdk/)
   ========================================================================== */
.block-hero-photo {
    position: relative;
    overflow: hidden;
    padding: 100px 0 200px;
    background-color: var(--color-near-black);
    color: var(--color-white);
}

.block-hero-photo--cover { margin-top: 300px; }

/* contain (live /face-recognition-sdk/): ink-black band, the whole photograph fitted, 700px copy column, 20px copy */
.block-hero-photo--contain { background-color: #020202; }
.block-hero-photo--contain .block-hero-photo__bg { object-fit: contain; object-position: 50% 50%; }
.block-hero-photo--contain .block-hero-photo__copy {
    width: 100%;
    max-width: 700px;
}

.block-hero-photo--contain .block-hero-photo__text {
    padding-bottom: 20px;
    font-size: 20px;
    line-height: 170%;
}

.block-hero-photo__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.block-hero-photo__copy { width: 48.5%; max-width: 520px; }

.block-hero-photo__title {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 48px;
    font-weight: 500;
    line-height: 112%;
}

.block-hero-photo__text {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 24px;
    line-height: 142%;
}

.block-hero-photo__actions { margin-top: 20px; }

.block-hero-photo__phone { display: none; }

/* ==========================================================================
   BLOCK-RANK-CHECKLIST (live /latent-fingerprint-for-law-enforcement/)
   ========================================================================== */
.block-rank-checklist {
    padding-top: 100px;
    background-color: var(--color-near-black);
    color: var(--color-white);
}

.block-rank-checklist__intro {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.block-rank-checklist__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 48px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-rust);
}

.block-rank-checklist__text {
    margin: 0;
    font-family: var(--font-light);
    font-size: 20px;
    line-height: 170%;
}

.block-rank-checklist__band {
    padding: 50px 0 150px;
    border-bottom: 1px solid #333;
}

.block-rank-checklist__row {
    display: flex;
    max-width: 1150px;
    margin: 0 auto;
    align-items: center;
}

.block-rank-checklist__rank {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 48.5%;
    margin-right: 3%;
}

.block-rank-checklist__number {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 100px;
    font-weight: 500;
    line-height: 130%;
    color: var(--color-rust);
}

.block-rank-checklist__caption {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 25px;
    line-height: 160%;
    color: var(--color-steel);
}

.block-rank-checklist__list {
    width: 48.5%;
    margin: 0;
    padding: 20px 0 20px 100px;
    border-left: 5px solid var(--color-black);
    list-style: none;
}

.block-rank-checklist__item {
    display: flex;
    align-items: center;
    font-family: var(--font-regular);
    font-size: 25px;
    line-height: 34px;
    color: var(--color-steel);
}

.block-rank-checklist__item:not(:last-child) { margin-bottom: 12px; }
.block-rank-checklist__item span { padding-left: 10px; }
.block-rank-checklist__icon { flex: none; width: 24px; height: auto; }

/* ==========================================================================
   BLOCK-BADGE-TABS (live /latent-fingerprint-for-law-enforcement/ "Breakthrough biometrics")
   ========================================================================== */
.block-badge-tabs {
    padding: 200px 0;
    background-color: var(--color-black);
    color: var(--color-white);
}

.block-badge-tabs__intro {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.block-badge-tabs__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 48px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-steel);
}

.block-badge-tabs__text {
    margin: 0;
    font-family: var(--font-light);
    font-size: 19px;
    line-height: 179%;
}

.container.block-badge-tabs__wide {
    max-width: 1400px;
    padding-top: min(2vw, 33px);
}

.block-badge-tabs__stage { padding-top: 50px; }

.block-badge-tabs__tabs { margin-bottom: 21px; }

.block-badge-tabs__list {
    display: flex;
    justify-content: center;
}

.block-badge-tabs__tab {
    padding: 4px 30px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    font-family: var(--font-regular);
    font-size: 16px;
    font-weight: 600;
    line-height: 27.2px;
    text-transform: uppercase;
    color: var(--color-cream);
    cursor: pointer;
}

.block-badge-tabs__tab.is-active { border-bottom-color: var(--color-rust); }
.block-badge-tabs__tab:focus-visible { outline: 2px solid var(--color-steel); outline-offset: -2px; }

.block-badge-tabs__panel {
    min-height: 243px;
    padding: 24px 30px;
}

.block-badge-tabs__cards {
    display: flex;
    gap: 35px;
}

.block-badge-tabs__card {
    width: 100%;
    max-width: 496px;
    min-height: 165px;
    padding: 30px;
    background-color: var(--color-ink);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    font-family: var(--font-regular);
    font-size: 20px;
    line-height: 136%;
}

.block-badge-tabs__card.is-highlight { background-color: var(--color-rust); }

.block-badge-tabs__number {
    margin: 0 0 30px;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 54px;
    font-weight: 500;
    line-height: 75%;
    text-transform: capitalize;
    color: var(--color-steel);
}

.block-badge-tabs__card.is-highlight .block-badge-tabs__number { color: var(--color-white); }
.block-badge-tabs__label a { color: var(--color-white); text-decoration: underline; }

.block-badge-tabs__note {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 167%;
    text-align: center;
    color: var(--color-steel);
}

.block-badge-tabs__note p { margin: 0; }
.block-badge-tabs__note a { text-decoration: underline; color: inherit; }

/* ==========================================================================
   BLOCK-QUOTE-PORTRAITS (live /latent-fingerprint-for-law-enforcement/ "Empowering a new era of public safety")
   ========================================================================== */
.block-quote-portraits {
    background-color: var(--color-cream);
    color: var(--color-black);
}

.block-quote-portraits__top { padding-top: 200px; }

.block-quote-portraits__heading {
    margin: 0 0 20px;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 48px;
    font-weight: 500;
    line-height: 112%;
    text-align: center;
    color: var(--color-ink);
}

.block-quote-portraits__carousel {
    position: relative;
    max-width: 1158px;
    margin: 0 auto;
}

.block-quote-portraits .swiper-container {
    margin-bottom: 60px;
    padding: 0 15px;
}

.block-quote-portraits__slide {
    display: flex;
    align-items: center;
    height: auto;
}

.block-quote-portraits__portrait {
    display: flex;
    flex: 0 0 210px;
    justify-content: center;
}

.block-quote-portraits__portrait img {
    display: block;
    width: 100%;
    height: auto;
}

.block-quote-portraits__body {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
}

.block-quote-portraits__quote {
    margin: 0 0 25px;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 30.06px;
}

.block-quote-portraits__name {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.44px;
    line-height: 17.44px;
    text-transform: uppercase;
}

.block-quote-portraits__arrow {
    position: absolute;
    z-index: 2; /* over the swiper container, which covers the inner part of the arrows on phones (DIGITAL-349) */
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-black) 50% 50% / 8px 13px no-repeat;
    cursor: pointer;
}

.block-quote-portraits__arrow--prev {
    left: -80px;
    background-image: url("assets/images/chevron-thin-left-rust.svg");
}

.block-quote-portraits__arrow--next {
    right: -80px;
    background-image: url("assets/images/chevron-thin-right-rust.svg");
}

.block-quote-portraits__arrow:focus-visible { outline: 2px solid var(--color-rust); outline-offset: 2px; }

.block-quote-portraits__cta { padding: 60px 0 200px; }

.block-quote-portraits__row {
    display: flex;
    align-items: flex-start;
}

.block-quote-portraits__cta-text {
    width: 48.5%;
    margin: 0 3% 0 0;
    padding-top: 15px;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 24px;
    text-align: right;
    text-transform: uppercase;
}

.block-quote-portraits__cta-button { width: 48.5%; }

/* ==========================================================================
   BLOCK-ICON-CARDS (live /latent-fingerprint-for-law-enforcement/ "Why faster fingerprint recognition matters")
   ========================================================================== */
.block-icon-cards {
    padding: 170px 0;
    background-color: var(--color-black);
    color: var(--color-cream);
}

.block-icon-cards__intro {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.block-icon-cards__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 40px;
    font-weight: 500;
    line-height: 135%;
    color: var(--color-rust);
}

.block-icon-cards__text {
    margin: 18px 0 0;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 24px;
}

.block-icon-cards__row { padding-top: 40px; }
.block-icon-cards__row--first { padding-top: 60px; }

.block-icon-cards__pair {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: space-between;
}


.block-icon-cards__card {
    width: 48.5%;
    background-color: var(--color-ink);
}

.block-icon-cards__head {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.block-icon-cards__icon {
    flex: none;
    width: 112px;
    height: 112px;
}

.block-icon-cards__title {
    margin: 0;
    padding-left: 40px;
    font-family: var(--font-medium);
    font-size: 28px;
    font-weight: 400;
    line-height: 34px;
    color: var(--color-steel);
}

.block-icon-cards__body {
    margin: 0 0 18px;
    padding: 0 40px 40px;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 24px;
}

.block-icon-cards__bar {
    max-width: 360px;
    height: 8px;
    margin-left: auto;
    background-color: var(--color-rust);
}

/* ==========================================================================
   BLOCK-STATEMENT-FLAG (live /latent-fingerprint-for-law-enforcement/ "The future of fingerprint is American.")
   ========================================================================== */
.block-statement-flag {
    padding: 200px 0;
    background-color: var(--color-cream);
    color: var(--color-black);
}

.block-statement-flag .container { text-align: center; }

.block-statement-flag__text { margin-bottom: 1.5%; }

.block-statement-flag__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 48px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-ink);
}

.block-statement-flag__copy {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 27px;
    line-height: 113%;
}

.block-statement-flag__picture {
    max-width: 950px;
    margin: 60px auto 0;
}

.block-statement-flag__picture img {
    display: block;
    width: 100%;
    height: auto;
}

.block-statement-flag__actions { margin-top: 60px; }

/* ==========================================================================
   BLOCK-POST-CARDS (live /latent-fingerprint-for-law-enforcement/ "Blog Posts")
   ========================================================================== */
.block-post-cards {
    padding: 100px 0 80px;
    background-color: var(--color-white);
    color: var(--color-black);
}

.block-post-cards__row > .container { padding: min(2vw, 33px) 0; }

.block-post-cards__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 20.8px;
    text-align: center;
    text-transform: uppercase;
}

.block-post-cards__heading::after {
    content: "";
    display: block;
    position: relative;
    top: 5px;
    width: 31px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--color-poppy);
}

.block-post-cards__grid {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

/* The whole card opens the post, like the live clickable cards (data-card-link, main.js). */
.block-post-cards__card[data-card-link] { cursor: pointer; }

.block-post-cards__card {
    display: flex;
    flex-direction: column;
    width: 31.333%;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
}

.block-post-cards__picture img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.block-post-cards__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 30px 20px 20px;
}

.block-post-cards__title {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 24px;
    font-weight: 500;
    line-height: 31.2px;
}

.block-post-cards__link {
    margin-top: auto;
    font-family: var(--font-regular);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-transform: capitalize;
    color: var(--color-rust);
}


/* ==========================================================================
   BLOCK-INTRO-HEADING (live /face-recognition-sdk/ "All-in-one ROC SDK.")
   ========================================================================== */
.block-intro-heading {
    padding: 170px 0;
    background-color: var(--color-ink);
    color: var(--color-white);
    text-align: center;
}

.block-intro-heading .container { text-align: center; }

.block-intro-heading__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 48px;
    font-weight: 500;
    line-height: 112%;
    color: var(--color-rust);
}

.block-intro-heading__subheading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 30px;
    font-weight: 500;
    line-height: 113%;
}

.block-intro-heading__text {
    margin: 16px 0 0;
    font-family: var(--font-light);
    font-size: 18px;
    line-height: 120%;
}

/* ==========================================================================
   BLOCK-IMAGE-FEATURES (live /face-recognition-sdk/ "Face Recognition and Analytics")
   ========================================================================== */
.block-image-features {
    padding: 100px 0;
    background-color: var(--color-cream);
    color: #030409;
}

.block-image-features__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.block-image-features__picture,
.block-image-features__copy { width: 48.5%; }

.block-image-features__picture img {
    display: block;
    width: 100%;
    max-width: 584px;
    height: auto;
}

.block-image-features__heading {
    margin: 0 0 1.2vw;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 36px;
    font-weight: 500;
    line-height: 130%;
    color: var(--color-ink);
}

.block-image-features__feature { max-width: 600px; margin-bottom: 40px; }
.block-image-features__feature:last-child { margin-bottom: 60px; }

.block-image-features__title {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 25px;
    font-weight: 500;
    line-height: 130%;
}

.block-image-features__text {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 133%;
}

/* ==========================================================================
   BLOCK-INDUSTRY-ROWS (live /face-recognition-sdk/ "INDUSTRIES")
   ========================================================================== */
.block-industry-rows {
    padding-bottom: 75px;
    background-color: var(--color-ink);
    color: var(--color-white);
}

.block-industry-rows__head { padding: 25px 0; }

.block-industry-rows__head .container { padding: 60px 50px 20px; }

.block-industry-rows__label {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: var(--color-steel);
}

.block-industry-rows__label::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin: 15px auto 0;
    background-color: var(--color-rust);
}

.block-industry-rows__section { padding: 25px 0; }

.block-industry-rows__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1040px;
    margin: 0 auto;
}

.block-industry-rows__row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 184px;
    height: 350px;
    background: url("assets/images/bracket-top-right-rust.svg") 0 0 / 184px 350px no-repeat;
}

.block-industry-rows__row--text-left { flex-direction: row-reverse; }

.block-industry-rows__row--text-left::before {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    background-image: url("assets/images/bracket-bottom-left-rust.svg");
}

.block-industry-rows__picture,
.block-industry-rows__body { width: 48.5%; }

.block-industry-rows__picture img {
    display: block;
    width: 100%;
    height: auto;
}

.block-industry-rows__body { padding: 60px 50px; }

.block-industry-rows__title {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 48px;
    font-weight: 500;
    line-height: 120%;
}

.block-industry-rows__text {
    margin: 0;
    padding-bottom: 18px;
    font-family: var(--font-light);
    font-size: 18px;
    line-height: 140%;
}

.block-industry-rows__more {
    margin: 15px 0 0;
    font-family: var(--font-light);
    font-size: 18px;
    line-height: 140%;
}

.block-industry-rows__row--text-left .block-industry-rows__more { text-align: right; }

.block-industry-rows__more a {
    font-family: var(--font-medium);
    font-weight: 400;
    line-height: 23.94px;
    color: var(--color-rust);
}

/* ==========================================================================
   BLOCK-STATS-FLAG (live /face-recognition-sdk/ "Built for purpose. Battletested for edge.")
   ========================================================================== */
.block-stats-flag {
    background-color: var(--color-cream);
    color: var(--color-black);
}

.block-stats-flag__intro { padding-top: 100px; }

.block-stats-flag__intro-text {
    max-width: 650px;
    padding-right: 2px;
}

.block-stats-flag__heading {
    margin: 0 0 24px;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 48px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-ink);
}

.block-stats-flag__text {
    margin: 0;
    font-family: var(--font-poppins-web);
    font-size: 16px;
    line-height: 24px;
}

.block-stats-flag__band { padding: 50px 0 100px; }

.block-stats-flag__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.block-stats-flag__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 296px));
    gap: 24px;
    width: 48.5%;
    margin: -2px 0 0;
}

.block-stats-flag__stat { margin: 0; }

.block-stats-flag__value {
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 48px;
    font-weight: 500;
    line-height: 130%;
    color: var(--color-rust);
}

.block-stats-flag__label {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 24px;
}

.block-stats-flag__flag { width: 48.5%; }

.block-stats-flag__flag img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   BLOCK-DIFFERENCE-LIST (live /face-recognition-sdk/ "The ROC difference")
   ========================================================================== */
.block-difference-list {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background-color: var(--color-ink);
    color: var(--color-white);
}

.block-difference-list__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

.block-difference-list__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 48px;
    font-weight: 500;
    line-height: 130%;
    text-align: center;
    color: var(--color-rust);
}

.block-difference-list__subheading {
    max-width: 950px;
    margin: 0 auto 40px;
    padding-bottom: 10px;
    font-family: var(--font-light);
    font-size: 30px;
    font-weight: 500;
    line-height: 113%;
    text-align: center;
}

.block-difference-list__list {
    display: flex;
    flex-wrap: wrap;
    gap: 75px 45px;
    justify-content: center;
    margin: 0 0 20px;
    padding: 0 0 20px 20px;
    list-style: none;
}

.block-difference-list__item {
    position: relative;
    width: calc(50% - 23px);
    max-width: 600px;
    padding-left: 50px;
}

.block-difference-list__item::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 28px;
    height: 28px;
    background: url("assets/images/arrow-diamond-rust.svg") 0 0 / 28px 28px no-repeat;
}

.block-difference-list__title {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 29px;
    font-weight: 500;
    line-height: 186%;
    color: var(--color-steel);
}

.block-difference-list__text {
    font-family: var(--font-light);
    font-size: 20px;
    line-height: 26px;
}

.block-difference-list__text p { margin: 0; }
.block-difference-list__text a { font-family: var(--font-medium); color: var(--color-rust); }

.block-difference-list__actions { padding-top: 40px; }

/* ==========================================================================
   LOTTIE-HERO (front page): ink stage under the header band, Lottie loop
   ========================================================================== */
/* The top padding is the 280px the live hero hangs below the page top, behind the header band. */
.block-lottie-hero {
    padding-top: 280px;
    background: var(--color-ink);
}

.block-lottie-hero__stage {
    height: 1080px;
    overflow: clip;
}

.block-lottie-hero__animation { width: 100%; }

.block-lottie-hero__animation svg { width: 100%; height: 100%; }

.block-lottie-hero__phone { display: none; }

/* ==========================================================================
   VIDEO-STATEMENT (front page): large light statement, video button
   ========================================================================== */
.block-video-statement {
    padding: 128px 0 80px;
    background: var(--color-ink);
}

.block-video-statement__text {
    margin-bottom: 128px;
    font-family: var(--font-light);
    font-size: 60px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

.block-video-statement__action { padding-bottom: 7px; }

.block-video-statement__button {
    position: relative;
    display: inline-block;
    padding: 15.5px 0.7em 15.5px 84px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-cream);
}

.block-video-statement__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 72px;
    height: 47px;
    transform: translateY(-50%);
}

/* ==========================================================================
   RANKED-CARDS (front page): TOP RANKED cards over a parallax figure
   ========================================================================== */
.block-ranked-cards {
    position: relative;
    background: var(--color-ink);
}

/* Divi true parallax: the figure box hangs 30% of the screen height above the section, is that much taller
   and is moved by home.js (30% of the scroll distance). */
.block-ranked-cards__backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.block-ranked-cards__figure {
    position: absolute;
    top: -30vh;
    left: 0;
    width: 100%;
    height: calc(100% + 30vh);
}

.block-ranked-cards__figure-image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: none;
    object-position: 50% 60px; /* live: background-position 50% 60px (a three-value object-position is invalid) */
}

.block-ranked-cards__row { padding-bottom: 40px; }

.block-ranked-cards__eyebrow {
    margin-bottom: 456px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-cream);
}

/* Without the figure the cards follow the eyebrow at the 100px eyebrow gap of the product showcase. */
.block-ranked-cards--plain .block-ranked-cards__eyebrow { margin-bottom: 100px; }

.block-ranked-cards__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 31px;
}

/* Column width (live): 380px, shrinking with the row; the 1px outline is the steel slot showing around
   the ink card, both cut at the top right corner. */
.block-ranked-cards__slot {
    width: min(380.195px, calc(33.03% - 62.1px));
    height: 360px;
    margin: 1px 0 1px 1px;
    background: var(--color-steel);
    clip-path: polygon(83% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
}

.block-ranked-cards__card {
    height: calc(100% - 2px);
    margin: 1px 1px 0;
    padding: 20px 8px 15px 15px;
    background: var(--color-ink);
    clip-path: polygon(83% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
}

.block-ranked-cards__icon {
    width: 124px;
    height: 169px;
    margin-bottom: 10px;
}

.block-ranked-cards__icon-image {
    width: 124px;
    height: auto;
}

.block-ranked-cards__title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    color: var(--color-rust);
}

.block-ranked-cards__title::after {
    content: "";
    display: inline-block;
    width: 36px;
    height: 18px;
    background: url("assets/images/chevron-rust-wide.svg") center / auto no-repeat;
}

.block-ranked-cards__text {
    font-size: 16px;
    line-height: 22px;
    color: var(--color-steel);
}

.block-ranked-cards__text p { padding-bottom: 1em; }

.block-ranked-cards__text p:last-child { padding-bottom: 0; }

.block-ranked-cards__text a { text-decoration: underline; }

.block-ranked-cards__card { position: relative; }

.block-ranked-cards__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.block-ranked-cards__text a {
    position: relative;
    z-index: 1;
}

.block-ranked-cards__text a:hover { text-decoration: none; }

/* Fade-from-the-top entrance (live Divi animation): used by home.js on [data-enter-top]. */
@keyframes enter-top {
    from { opacity: 0; transform: translateY(-10%); }
    to { opacity: 1; transform: translateX(0); }
}

.is-armed { opacity: 0; }

.is-armed.is-entered { opacity: 1; animation: enter-top 1s cubic-bezier(0.77, 0, 0.175, 1) both; }

/* ==========================================================================
   ADVANTAGE-TABS (front page): ghost heading, text tabs, one large statement per tab
   ========================================================================== */
:root { --color-ghost: #313436; /* ghost heading on ink (live THE ROC ADVANTAGE) */ }

.block-advantage-tabs {
    padding: 128px 0;
    background: var(--color-ink);
}

.block-advantage-tabs__row { padding-bottom: 110px; }

.block-advantage-tabs__heading {
    margin-bottom: 80px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 120px;
    font-weight: 500;
    line-height: 110px;
    text-align: center;
    color: var(--color-ghost);
}

.block-advantage-tabs__tablist {
    display: flex;
    gap: 75px;
}

.block-advantage-tabs__tab {
    padding: 0 0 16px;
    font-family: var(--font-medium);
    font-size: 28px;
    font-weight: 400;
    line-height: 28px;
    color: rgba(171, 180, 189, 0.4);
    border-bottom: 3px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.block-advantage-tabs__tab:hover {
    color: var(--color-rust);
    border-bottom-color: var(--color-rust);
}

.block-advantage-tabs__tab.is-active {
    color: var(--color-rust);
    border-bottom-color: var(--color-rust);
}

.block-advantage-tabs__tab:focus-visible {
    outline: 2px solid var(--color-steel);
    outline-offset: 4px;
}

.block-advantage-tabs__panel {
    margin-top: 20px;
    padding: 1em 0 15px;
    font-size: 57px;
}

.block-advantage-tabs__panel.is-active { animation: advantage-fade 1s ease both; }

@keyframes advantage-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.block-advantage-tabs__text {
    padding-bottom: 1em;
    font-family: var(--font-light);
    font-size: 1em;
    line-height: 70px;
    color: var(--color-steel);
}

.block-advantage-tabs__phone { display: none; }

/* Front page partners list (live "ROC PARTNERS INCLUDE"): compact with 100px above and 120px below. */
.block-accordion-list.block-accordion-list--home { padding: 100px 0 120px; }
.block-accordion-list--home .block-accordion-list__eyebrow { text-transform: none; }
/* Live front page: the plus sits at the row end and moves 60px in while the row is hovered (phones: stays). */
.block-accordion-list--home .block-accordion-list__icon {
    padding-right: 0;
    transition: padding-right 1s ease;
}

.block-accordion-list--home .block-accordion-list__item:hover .block-accordion-list__icon { padding-right: 60px; }

@media (max-width: 475px) {
    .block-accordion-list--home .block-accordion-list__item:hover .block-accordion-list__icon { padding-right: 0; }
}
.block-accordion-list--side.block-accordion-list--stacked.block-accordion-list--home .block-accordion-list__list { border-bottom: 1px solid var(--color-black); }

/* ranked-cards: the whole card is a link (stretched title link; the source link stays above it). */
/* ==========================================================================
   PRODUCT-SHOWCASE (front page): "One platform ..." heading, framed picture, product cards
   ========================================================================== */
.block-product-showcase {
    background: var(--color-ink);
    color: var(--color-cream);
}

.block-product-showcase__heading {
    margin-bottom: 100px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 116px;
    font-weight: 500;
    line-height: 145px;
    letter-spacing: 0.1px;
}

.block-product-showcase__eyebrow {
    margin-bottom: 100px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.56px;
}

.block-product-showcase__hero { position: relative; }

.block-product-showcase__hero-link { display: block; }

.block-product-showcase__hero-image {
    width: 100%;
    outline: 1px solid var(--color-steel);
    outline-offset: -1px;
    /* The picture has a dark cut corner bottom left; clip it so the outline does not box that corner.
       The other points sit 2px outside the box so the zoom band's fractional edges keep a full outline. */
    clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px), 5.76% calc(100% + 2px), 5.76% 100%, 0 91.08%, -2px 91.08%);
}

/* Corner tab: rust, bottom left corner cut, underlined label with an arrow (live "Learn More"). */
.block-product-showcase__tab {
    position: absolute;
    top: 1px;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 86px;
    padding-right: 20px;
    background: var(--color-rust);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%, 0 57%);
}

.block-product-showcase__tab-label {
    position: relative;
    padding: 0 32px 1px 0;
    font-size: 22px;
    line-height: 22px;
    border-bottom: 1px solid var(--color-ink);
}

.block-product-showcase__tab-label::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 6px;
    width: 16px;
    height: 12px;
    background: url("assets/images/arrow-tab-cream.svg") center / contain no-repeat;
}

.block-product-showcase__line {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.block-product-showcase__logo img { width: 322px; }

.block-product-showcase__tagline {
    font-size: 28px;
    line-height: 35.84px;
    text-align: right;
    color: var(--color-steel);
}

.block-product-showcase__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 24px;
    margin-top: 80px;
}

.block-product-showcase__card {
    position: relative;
    width: min(420px, calc((100% - 48px) / 3));
}

.block-product-showcase__card-image { margin-bottom: 34px; }

.block-product-showcase__card-image img { max-width: 100%; }

.block-product-showcase__card-title {
    position: relative;
    padding: 0 0 10px 40px;
    font-family: var(--font-bold);
    font-size: 32px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.5px;
    color: var(--color-cream);
}

.block-product-showcase__card-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 31px;
    height: 32px;
    background: url("assets/images/carrot-cream.svg") center / contain no-repeat;
}

.block-product-showcase__card-title--plain { padding-left: 0; }

.block-product-showcase__card-title--plain::before { content: none; }

/* The whole card opens the product, like the live clickable blurbs (data-card-link, main.js). */
.block-product-showcase__card[data-card-link] { cursor: pointer; }

.block-product-showcase__card-text {
    font-size: 18px;
    line-height: 23.94px;
    letter-spacing: 0.5px;
    color: var(--color-steel);
}

/* ==========================================================================
   PEOPLE-ROTATOR (front page): MADE BY HUMANS statement and portraits
   ========================================================================== */
.block-people-rotator {
    padding: 180px 0;
    background: var(--color-ink);
}

.block-people-rotator__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 150px;
}

.block-people-rotator__eyebrow {
    width: 22.75%;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.56px;
    color: var(--color-cream);
}

.block-people-rotator__phrases { width: 74.25%; }

.block-people-rotator__phrase {
    display: none;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 400;
    line-height: 64px;
    color: var(--color-steel);
}

.block-people-rotator__phrase.is-active { display: block; }

.block-people-rotator__phrase--phone.is-active { display: none; }

.block-people-rotator__people { padding-bottom: 65px; }

.block-people-rotator__list {
    display: flex;
    justify-content: space-between;
    margin-left: 25.75%;
}

.block-people-rotator__person {
    min-width: 115px;
    text-align: center;
}

.block-people-rotator__portrait {
    width: 115px;
    height: auto;
    margin: 0 auto 10px;
    border-radius: 500px;
    filter: grayscale(1);
}

.block-people-rotator__person.is-active .block-people-rotator__portrait { filter: none; }

.block-people-rotator__name {
    font-size: 18px;
    line-height: 24px;
    color: var(--color-steel);
}

.block-people-rotator__link-row {
    display: flex;
    justify-content: flex-end;
}

.block-people-rotator__link {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 20px);
    width: fit-content;
    padding-bottom: 10px;
    font-size: 22px;
    line-height: 18px;
    color: var(--color-cream);
    border-bottom: 1px solid var(--color-rust);
}

.block-people-rotator__link::after {
    content: "";
    width: 14px;
    height: 11px;
    background: url("assets/images/arrow-long-cream.svg") center / contain no-repeat;
}

/* ==========================================================================
   COUNTER-BAND (front page): "Join forces with the best." counting numbers on rust
   ========================================================================== */
.block-counter-band {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 120px 0;
    background: var(--color-rust);
}

.block-counter-band__heading-row { padding-bottom: 40px; }

.block-counter-band__heading {
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 400;
    line-height: 64px;
    color: var(--color-cream);
}

.block-counter-band__row {
    display: flex;
    padding: 2% 0;
}

.block-counter-band__slot { width: 33.3333%; }

.block-counter-band__counter { width: 80%; }

.block-counter-band__number {
    height: 92px;
    font-family: var(--font-medium);
    font-size: 87px;
    font-weight: 500;
    line-height: 104.4px;
    color: var(--color-cream);
}

.block-counter-band__label {
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    color: var(--color-ink);
}

/* counter-band numbers fade in as they start counting (live Divi number counter). */
.block-counter-band__counter.is-armed { opacity: 0; }

.block-counter-band__counter.is-armed.is-entered {
    opacity: 1;
    transition: opacity 1s ease;
}

/* ==========================================================================
   FLAG-STATEMENT (front page): flag graphic, bold statement, link
   ========================================================================== */
.block-flag-statement {
    min-height: 800px;
    padding: 140px 0;
    background: var(--color-cream);
}

.block-flag-statement__flag { width: 80%; }

.block-flag-statement__flag img { width: 100%; }

.block-flag-statement__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 100px;
}

.block-flag-statement__text {
    width: 58.8%;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0.5px;
    color: var(--color-ink);
}

.block-flag-statement__action { padding-bottom: 0; }

.block-flag-statement__link { padding: 0 44px 0 0; }

.block-flag-statement__pill { display: none; }

/* ==========================================================================
   IMAGE-BAND (front page): wide picture band
   ========================================================================== */
.block-image-band {
    position: relative;
    height: 752px;
    overflow: hidden;
    background: var(--color-ink);
}

.block-image-band__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% -10%;
}

.block-image-band__image--phone { display: none; }

/* ==========================================================================
   STANDARDS-MARQUEE (front page): scrolling testing and standards boxes, static logo row
   ========================================================================== */
/* The section sits 80px up over the band above it and is clear over that band (ink below it). */
.page-sections > section + section.block-standards-marquee { margin-top: -80px; }

.block-standards-marquee {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent 80px, var(--color-ink) 80px);
}

.block-standards-marquee__viewport { overflow: clip; }

.block-standards-marquee__track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

.block-standards-marquee__set {
    display: flex;
    flex-shrink: 0;
    gap: 24px;
}

.block-standards-marquee__group {
    flex: 0 0 760px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.block-standards-marquee__label {
    padding-bottom: 20px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-cream);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.block-standards-marquee__cells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.block-standards-marquee__cell,
.block-standards-marquee__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 172px;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.block-standards-marquee__cell:first-child { border-left: 1px solid rgba(255, 255, 255, 0.35); }

.block-standards-marquee__cell img {
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 95px;
}

.block-standards-marquee__word {
    font-family: var(--font-bold);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-steel);
}

.block-standards-marquee__static {
    margin-top: 81px;
    padding-bottom: 81px;
}

.block-standards-marquee__static-label {
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    width: 80%;
    max-width: 1340px;
    margin: 0 auto 39.5px;
    color: var(--color-cream);
}

/* The static row is 1483px wide and centred on the screen from 1431px up (live: left 50vw - 741.5px). */
.block-standards-marquee__logos {
    position: relative;
    left: calc(50vw - 741.5px);
    display: flex;
    width: 1483.4px;
    border-top: 1px solid var(--color-steel);
    border-bottom: 1px solid var(--color-steel);
}

.block-standards-marquee__logo {
    width: 16.6667%;
    border-right: 1px solid var(--color-steel);
}

.block-standards-marquee__logo:first-child { border-left: 1px solid var(--color-steel); }

.block-standards-marquee__logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 95px;
}

.block-standards-marquee__logo-phone { display: none; }

/* Hover rules of the front page (live): the source link loses its underline on the cards, the corner tab and
   the people link swap their underline for a line that sweeps across. */
.block-product-showcase__tab-label::before,
.block-people-rotator__link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
}

.block-product-showcase__tab-label::before { background: var(--color-ink); }

.block-product-showcase__tab:hover .block-product-showcase__tab-label,
.block-product-showcase__tab:focus-visible .block-product-showcase__tab-label { border-bottom-color: transparent; }

.block-product-showcase__tab:hover .block-product-showcase__tab-label::before,
.block-product-showcase__tab:focus-visible .block-product-showcase__tab-label::before { width: 100%; }

.block-people-rotator__link { position: relative; }

.block-people-rotator__link::before {
    bottom: 0;
    background: var(--color-cream);
    transition: width 0s ease-out;
}

.block-people-rotator__link:hover,
.block-people-rotator__link:focus-visible { border-bottom-color: transparent; }

.block-people-rotator__link:hover::before,
.block-people-rotator__link:focus-visible::before {
    width: 100%;
    transition-duration: 1.3s;
}

/* ==========================================================================
   INDUSTRY PAGES (live /commercial-security/, /fintech/, /ai/): industry-hero, benefits-segments,
   use-case-grid, product-trio, learn-more-form
   ========================================================================== */
:root { --section-pad: 3%; /* live Divi section padding (50px from 1675px up and on phones) */ }

/* ---- industry-hero ---- */
.block-industry-hero {
    --hero-top: 278px;
    --title-gap: 20.0938px;
    --sub-gap: 33px;
    position: relative;
    min-height: 600px;
    padding: var(--hero-top) 0 82px;
    overflow: clip;
    text-align: center;
    background: var(--color-ink);
}

.page-sections > section + section.block-industry-hero { margin-top: 0; }

.block-industry-hero.block-industry-hero--gap-300 { margin-top: 300px; }

.block-industry-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
}

/* live: every industry hero has a half black layer over the photo (and, on /fintech/, a gradient under it) */
.block-industry-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
}

/* live /fintech/ also has a white to black gradient, but it sits under the photo, which covers it completely, so it is not drawn */

.block-industry-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.block-industry-hero__title {
    width: 500px;
    max-width: 100%;
    margin: 0 auto var(--title-gap);
    padding-bottom: 10px;
    font-family: var(--font-black);
    font-size: 36px;
    font-weight: 500;
    line-height: 50.4px;
    color: var(--color-cream);
}

.block-industry-hero__subtitle {
    width: 500px;
    max-width: 100%;
    margin: 0 auto var(--sub-gap);
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-cream);
}

.block-industry-hero__button {
    position: relative;
    display: inline-block;
    padding: 15.5px 50px 15.5px 24px;
    border-radius: 5px;
    background: var(--color-rust-muted);
    font-family: var(--font-bold);
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-cream);
    transition: background-color 0.3s ease;
}

.block-industry-hero__button::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 17px;
    transform: translateY(-50%);
    background: url("assets/images/arrow.svg") center / contain no-repeat;
}

.block-industry-hero__button:hover { background: var(--color-rust-dark); }

.block-industry-hero__image--phone { display: none; }

.block-industry-hero--gap-300 {
    --title-gap: 0px;
}

.block-industry-hero--gap-300 .block-industry-hero__subtitle { line-height: 25.2px; }

.block-industry-hero--centered { --hero-top: 208px; }

.block-industry-hero--centered .block-industry-hero__title { font-weight: 400; }

.block-industry-hero--centered .block-industry-hero__subtitle {
    font-family: var(--font-regular);
    font-size: 25px;
    font-weight: 400;
    line-height: 35px;
}

.block-industry-hero--overlay .block-industry-hero__image { object-position: 50% 0; }

/* ---- benefits-segments ---- */
.block-benefits-segments {
    padding: 64px 0 19px;
    background: var(--color-ink);
    color: var(--color-white);
}

.block-benefits-segments .container { max-width: 1000px; }

.block-benefits-segments__row { display: flex; }

.block-benefits-segments__benefits { width: 36.7%; }

.block-benefits-segments__segments {
    width: 54.8%;
    margin-left: 8.5%;
}

.block-benefits-segments__segments > .block-benefits-segments__heading { margin-bottom: 6.01px; }

.block-benefits-segments--wide { padding-bottom: 83px; }

.block-benefits-segments--wide .block-benefits-segments__segment-title {
    margin-top: 0;
    color: var(--color-white); /* live /fintech/: white titles (the rust titles are /commercial-security/) */
}

.block-benefits-segments--wide .block-benefits-segments__segment { margin-bottom: 21px; }

.block-benefits-segments--wide .block-benefits-segments__benefits { width: 47.25%; }

.block-benefits-segments--wide .block-benefits-segments__segments { width: 44.25%; }

.block-benefits-segments--wide .block-benefits-segments__segments > .block-benefits-segments__heading {
    margin-bottom: 25.75px;
    padding-bottom: 10px;
    font-family: var(--font-poppins-web);
    font-size: 25px;
    line-height: 32.5px;
}

.block-benefits-segments__heading {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 28px;
    font-weight: 500;
    line-height: 36.4px;
    color: var(--color-rust);
}

.block-benefits-segments__heading--small {
    margin-bottom: 8px;
    padding-bottom: 10px;
    font-size: 25px;
    line-height: 32.5px;
}

.block-benefits-segments__text p { line-height: 24px; }

.block-benefits-segments__text ul,
.block-benefits-segments__segment-text ul { list-style: disc; }

.block-benefits-segments__text ul { padding: 0 0 16px 16px; }

.block-benefits-segments__text li {
    padding: 10px 0 0;
    line-height: 26px;
}

.block-benefits-segments__text b { font-weight: 600; color: var(--color-rust); }

.block-benefits-segments__segment {
    display: flex;
    gap: 15px;
    margin-bottom: 21px;
}

/* live spaces two of the /commercial-security/ segments more tightly than the 21px default */
.block-benefits-segments__segment--after-16 { margin-bottom: 16px; }
.block-benefits-segments__segment--after-11 { margin-bottom: 11px; }

.block-benefits-segments__icon {
    flex: none;
    align-self: flex-start;
    margin-top: -3px;
    width: 32px;
    height: 32px;
}

.block-benefits-segments__segment-title {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-rust);
}

.block-benefits-segments__segment-text ul {
    padding: 0 0 0 14px;
}

.block-benefits-segments__segment-text li {
    font-size: 14px;
    line-height: 26px;
}

/* ---- use-case-grid ---- */
.block-use-case-grid {
    padding: 64px 0 83.01px;
    background: var(--color-white);
}

.block-use-case-grid--cream { background: var(--color-cream); }

/* live /fintech/ sets the case titles in Poppins 500 (the other pages keep FK Grotesk) */
.block-use-case-grid--cream .block-use-case-grid__title { font-family: var(--font-poppins-web); }

.block-use-case-grid__heading {
    padding-bottom: 10px;
    font-family: var(--font-poppins-web);
    font-size: 16px;
    font-weight: 500;
    line-height: 20.8px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-black);
}

.block-use-case-grid__heading::after {
    content: "";
    display: block;
    position: relative;
    top: 16px;
    width: 31px;
    height: 2px;
    margin: 0 auto;
    background: linear-gradient(256deg, #eb6530 0%, #e32e2a 100%);
}

.block-use-case-grid .block-use-case-grid__head { max-width: 1000px; }

.block-use-case-grid__cases {
    display: flex;
    justify-content: space-between;
    width: 1137.1px;
    max-width: 100%;
    margin: 62px auto 0;
}

.block-use-case-grid__column { width: 550px; }

.block-use-case-grid__case {
    display: flex;
    gap: 30px;
    margin-bottom: 24px;
}

.block-use-case-grid__picture { padding-bottom: 30px; } /* live: the picture column keeps 30px under the picture */

.block-use-case-grid__picture img {
    box-sizing: border-box;
    width: 214px;
    height: auto;
    max-width: none;
    border-left: 10px solid #f26324; /* live: the orange edge on every case picture */
    object-fit: fill;
}

.block-use-case-grid__title {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 19px;
    font-weight: 500;
    line-height: 22.8px;
    color: var(--color-black);
}

.block-use-case-grid__text p:not(:last-child) { padding-bottom: 15px; }

.block-use-case-grid__text {
    padding-bottom: 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--color-ink);
}

.block-use-case-grid__text a { color: #e02826; }

/* ---- product-trio ---- */
.block-product-trio {
    padding: 62.6px 0 62.63px;
    background: var(--color-ink);
}

.block-product-trio .container { padding: 2% 0; }

.block-product-trio__heading {
    margin-bottom: 67.26px;
    padding-bottom: 10px;
    font-family: var(--font-poppins-web);
    font-size: 16px;
    font-weight: 500;
    line-height: 20.8px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-steel);
}

.block-product-trio__heading::after {
    content: "";
    display: block;
    position: relative;
    top: 16px;
    width: 31px;
    height: 2px;
    margin: 0 auto;
    background: linear-gradient(256deg, #eb6530 0%, #e32e2a 100%);
}

.block-product-trio__cards {
    display: flex;
    justify-content: space-between;
}

.block-product-trio__card {
    display: flex;
    flex-direction: column;
    width: 31.34%;
    min-height: 374px;
    padding: 49.77px 40px 47px;
    border-radius: 0 0 80px;
    background: var(--color-black);
    color: var(--color-white);
}

.block-product-trio__logo img {
    width: auto;
    height: 40px;
}

.block-product-trio__text {
    margin-top: 36.27px;
    font-size: 18px;
    line-height: 24px;
}

.block-product-trio__link {
    align-self: flex-start;
    margin-top: auto;
    padding: 15.5px 50px 15.5px 24px;
    border-radius: 5px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-rust);
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* live: the dark arrow is on the button all the time but only shows on the dark red hover fill */
.block-product-trio__link {
    position: relative;
}

.block-product-trio__link::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 17px;
    transform: translateY(-50%);
    background: url("assets/images/arrow.svg") center / contain no-repeat;
}

.block-product-trio__link:hover,
.block-product-trio__link:focus-visible {
    background: var(--color-rust-dark);
    color: var(--color-white);
}

/* ---- learn-more-form ---- */
.block-learn-more-form {
    padding: var(--section-pad) 20px;
    background: var(--color-rust);
}

.block-learn-more-form__heading {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 28px;
    font-weight: 500;
    line-height: 33.6px;
    text-align: center;
    color: var(--color-cream);
}

.block-learn-more-form__text {
    font-family: var(--font-poppins-web);
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: var(--color-cream);
}

.block-learn-more-form .container { padding: 35px 0; }

.block-learn-more-form__text { margin-bottom: 36px; }

/* ---- industry-hero variants (live /fintech/: title and subtitle touch; live /ai/: top-aligned, large light subtitle) ---- */
/* ---- check-columns ---- */
.block-check-columns {
    padding: 39px 0 45px;
    background: var(--color-cream);
}

.block-check-columns .container { padding-top: 15px; }

.block-check-columns__heading {
    width: 701px;
    max-width: 100%;
    margin: 0 auto 19px;
    padding-bottom: 10px;
    font-size: 28px;
    line-height: 36.4px;
    text-align: center;
    color: var(--color-black);
}

.block-check-columns__list {
    display: flex;
    justify-content: space-between;
    width: 962px;
    max-width: 100%;
    margin: 0 auto;
    list-style: none;
    position: relative;
    left: 27px; /* live: the three columns sit 27px right of the centre */
}

.block-check-columns__item {
    --check-indent: 32px;
    position: relative;
    flex: 0 0 31.33%;
    padding: 2px 0 10px var(--check-indent);
    line-height: 26px;
    color: var(--color-black);
}

.block-check-columns__item:nth-child(2) { --check-indent: 16px; } /* live: the middle point has one list less indent */

.block-check-columns__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: calc(var(--check-indent) - 29px); /* live: the 20px mark sits 29px left of the text */
    width: 20px;
    height: 20px;
    background: url("assets/images/check-bullet.svg") center / contain no-repeat;
}

/* ---- details-video ---- */
.block-details-video {
    padding: 64px 0 83px;
    background: var(--color-cream);
}

.block-details-video .container { max-width: 1000px; }

.block-details-video__row { display: flex; }

.block-details-video__main { width: 57.8%; }

.block-details-video__media {
    width: 36.7%;
    height: 400px;
    margin-left: 5.5%;
}

.block-details-video__video {
    width: 300px;
    height: 600px;
    max-width: none;
    margin-left: 57px;
}

.block-details-video__heading {
    margin-bottom: 19px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 25px;
    font-weight: 500;
    line-height: 32.5px;
    color: var(--color-black);
}

.block-details-video__text {
    font-family: var(--font-poppins-web);
    line-height: 24px;
    color: var(--color-black);
}

.block-details-video__text p { padding-bottom: 16px; }

.block-details-video__text p:last-child { padding-bottom: 0; }

.block-details-video__text ul {
    padding: 0 0 16px 16px;
    list-style: disc;
}

.block-details-video__text li { line-height: 26px; }

.block-details-video__text b { font-weight: 600; }

/* ==========================================================================
   ABOUT PAGE (live /about-us/): about-mission, proof-band, leadership-team, full-photo, chapter-video,
   closing-mark
   ========================================================================== */

/* ---- about-mission ---- */
.block-about-mission {
    padding-top: 200px;
    background: var(--color-cream);
    color: var(--color-ink);
}

.block-about-mission__eyebrow {
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.block-about-mission__title {
    margin-bottom: 80px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 116px;
    font-weight: 500;
    line-height: 145px;
}

.block-about-mission__lead-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 120px;
}

/* live: two columns of half the row less 40px, the sentence box 2% wider than its column */
.block-about-mission__lead {
    width: calc((50% - 40px) * 1.02);
    font-family: var(--font-bold);
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
}

.block-about-mission__animation {
    width: calc(50% - 40px);
}

/* the live svg is an inline box, so its line box adds a few pixels under the animation */
.block-about-mission__animation svg {
    display: inline;
    width: 100%;
    transform: translate3d(0, 0, 0);
}

.block-about-mission__heading {
    margin-bottom: 60px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 63.84px;
}

.block-about-mission__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 120px; /* live 160px under the last row, less the 40px the points already carry */
}

.block-about-mission__point {
    width: 48.5%;
    margin-bottom: 40px;
}

.block-about-mission__icon { line-height: 0; }

/* the icon pictures keep the sizes and gaps of the live modules */
.block-about-mission__point:nth-child(1) .block-about-mission__icon { margin-bottom: 29px; }
.block-about-mission__point:nth-child(2) .block-about-mission__icon { margin-bottom: 18px; }
.block-about-mission__point:nth-child(3) .block-about-mission__icon { margin-bottom: 34px; }
.block-about-mission__point:nth-child(4) .block-about-mission__icon { margin-bottom: 14px; }
.block-about-mission__point:nth-child(1) img { width: 61.8px; height: 72px; }
.block-about-mission__point:nth-child(2) img { width: 72px; height: 72px; }
.block-about-mission__point:nth-child(3) img { width: 85px; height: 65px; }
.block-about-mission__point:nth-child(4) img { width: 95.5px; height: 85px; }

.block-about-mission__point-title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 33.6px;
    letter-spacing: 0.5px;
}

.block-about-mission__point-text {
    font-size: 18px;
    line-height: 25.2px;
}

.block-about-mission__logo { margin-bottom: -35px; line-height: 0; }

.block-about-mission__logo img { width: 100%; height: auto; }

/* ---- proof-band ---- */
.block-proof-band {
    padding: 120px 0;
    background: var(--color-rust);
    color: var(--color-cream);
}

.block-proof-band__intro { margin-bottom: 80px; }

.block-proof-band__heading {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 63.84px;
}

.block-proof-band__closing .block-proof-band__heading { font-family: var(--font-regular); }

.block-proof-band__text,
.block-proof-band__paragraphs {
    font-size: 18px;
    line-height: 25.2px;
}

.block-proof-band__counters {
    display: flex;
    align-items: center;
    margin-bottom: 120px;
}

.block-proof-band__slot { width: 25%; }

.block-proof-band__counter { width: 80%; }

.block-proof-band__number {
    height: 92px;
    font-family: var(--font-medium);
    font-size: 87px;
    font-weight: 500;
    line-height: 1.2;
}

.block-proof-band__label {
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    color: var(--color-ink);
}

.block-proof-band__slot--button { text-align: center; }

.block-proof-band .btn--ink { background-color: var(--color-ink); }

.block-proof-band .btn--ink:hover {
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.block-proof-band__paragraphs p:not(:last-child) { padding-bottom: 18px; }

.block-proof-band__paragraphs a { text-decoration: underline; }

/* ---- leadership-team ---- */
.block-leadership-team {
    padding: 120px 0;
    background: var(--color-cream);
    color: var(--color-ink);
}

.block-leadership-team__intro { margin-bottom: 80px; }

.block-leadership-team__heading {
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 63.84px;
}

.block-leadership-team__text {
    font-size: 18px;
    line-height: 25.2px;
}

.block-leadership-team__label {
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--color-rust);
}

.block-leadership-team__label--exec { text-transform: uppercase; }

.block-leadership-team__founders {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.block-leadership-team__founder {
    width: 31.34%;
    font-size: 18px;
    line-height: 23.94px;
}

.block-leadership-team__portrait {
    margin-bottom: 30px;
    line-height: 0;
}

.block-leadership-team__portrait img { width: 100%; height: auto; }

.block-leadership-team__name {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 22px;
    font-weight: 500;
    line-height: 27.5px;
}

.block-leadership-team__bio strong {
    font-family: var(--font-medium);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

.block-leadership-team__quote-row {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    padding: 60px 0;
    border-top: 1.25px solid var(--color-steel);
    border-bottom: 1.25px solid var(--color-steel);
}

.block-leadership-team__mark {
    width: 33.33%;
    line-height: 0;
}

.block-leadership-team__mark img { width: auto; max-width: 100%; }

.block-leadership-team__quotes { width: 66.67%; }

.block-leadership-team__quotes .swiper-container { padding-bottom: 0; }

.block-leadership-team__slide {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.block-leadership-team__quote {
    font-family: var(--font-light);
    font-size: 36px;
    font-weight: 400;
    line-height: 57.6px;
    letter-spacing: -0.25px;
    color: var(--color-black);
}

.block-leadership-team__attribution {
    order: 1;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 19px;
    line-height: 25.27px;
}

.block-leadership-team__members-row {
    display: flex;
    padding-left: 0;
    list-style: none;
    flex-wrap: wrap;
    column-gap: 3%;
    margin-bottom: 40px;
}

.block-leadership-team__members-row:last-child { margin-bottom: 0; }

.block-leadership-team__member {
    width: 22.75%;
    font-size: 18px;
    line-height: 23.94px;
}

.block-leadership-team__member-name {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 22px;
    font-weight: 500;
    line-height: 27.5px;
}

.block-leadership-team__member-role {
    text-decoration: underline;
    text-decoration-color: var(--color-rust);
}

/* ---- full-photo ---- */
.block-full-photo { line-height: 0; background: var(--color-white); }

.block-full-photo img { width: 100%; height: auto; }

/* Scroll parallax (ROC-99): a 5:2 band (40% of the width) over the 3:2 photo (66.7%), which moves from -40% (its
   lower part, the band middle at the screen bottom) to 0 (its top, the band middle at the screen top) of its height,
   linear with the scroll; -20% (the centre) without JS or with reduced motion. Desktop only (981px up, media.css keeps
   the whole photo below). It follows the scroll exactly, frame by frame, with no easing (DIGITAL-294: a transition
   made it trail each wheel step and look choppy): where the browser ties an animation to the scroll (Chrome 115+,
   Safari 26+, main.js adds is-scroll-timeline) the animation below does it on the compositor, elsewhere main.js
   writes --motion-y every frame. */
.block-full-photo--parallax {
    aspect-ratio: 5 / 2;
    overflow: hidden;
}

.block-full-photo--parallax img {
    transform: translateY(var(--motion-y, -20%));
    will-change: transform;
}

@keyframes full-photo-parallax {
    from { transform: translateY(-40%); }
    to { transform: translateY(0); }
}

@supports (animation-timeline: view()) {
    @media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
        .block-full-photo--parallax.is-scroll-timeline { view-timeline: --full-photo-parallax block; }
        .block-full-photo--parallax.is-scroll-timeline img {
            animation: full-photo-parallax linear both;
            animation-timeline: --full-photo-parallax;
            animation-range: entry 50% exit 50%;
        }
    }
}

/* ---- chapter-video ---- */
.block-chapter-video {
    padding: 60px 0 0;
    margin-bottom: -300px;
    background: var(--color-cream);
    color: var(--color-ink);
}

.block-chapter-video__heading {
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-family: var(--font-medium);
    font-size: 57px;
    font-weight: 500;
    line-height: 63.84px;
}

.block-chapter-video__subheading {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 28px;
    font-weight: 500;
    line-height: 33.6px;
    color: var(--color-rust);
}

.block-chapter-video__copy { margin-bottom: 80px; }

.block-chapter-video__text {
    font-size: 18px;
    line-height: 25.2px;
}

.block-chapter-video__text p:not(:last-child) { padding-bottom: 18px; }

.block-chapter-video__text a { text-decoration: underline; }

.block-chapter-video__media { line-height: 24px; } /* the live video is an inline box, so its line box adds 6px under it */

.block-chapter-video__video {
    display: inline;
    width: 100%;
    height: auto;
}

/* ---- closing-mark ---- */
.block-closing-mark {
    padding: 430px 0 140px;
    background: var(--color-ink);
    color: var(--color-cream);
}

.block-closing-mark__row {
    display: flex;
    align-items: flex-end;
}

.block-closing-mark__heading {
    width: 58.75%;
    margin-bottom: -45px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 116px;
    font-weight: 500;
    line-height: 145px;
}

.block-closing-mark__logo {
    display: flex;
    justify-content: flex-end;
    width: 38.25%;
    margin-left: auto;
    line-height: 0;
}

.block-closing-mark__logo img { width: 170px; height: auto; }

/* the live Divi modules break a word that is wider than its column; the very large headings need it on narrow tablets */
.block-about-mission,
.block-proof-band,
.block-leadership-team,
.block-chapter-video,
.block-closing-mark { overflow-wrap: break-word; }

/* ==========================================================================
   LEARN-MORE-FORM: the survey form 2 on /commercial-security/, /fintech/ and /ai/ (live: the Divi child
   theme rules for the section id #form-steps, ported here; the Divi child theme is replaced by this theme)
   ========================================================================== */
#form-steps .frm_forms {
    width: 100%;
    max-width: 100%;
}

#form-steps .frm_page_num_1 {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

#form-steps .frm_page_num_2 {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

#form-steps .frm_page_num_3 {
    width: 100%;
    max-width: 1015px;
    margin: 0 auto;
}

#form-steps select,
#form-steps input { height: 45px; }

#form-steps textarea { min-height: 120px; }

#form-steps .frm_opt_container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

#form-steps .frm_radio {
    max-width: 350px;
    padding: 50px 40px;
    border-radius: 5px;
    background-color: #b03f31;
}

#form-steps .frm_radio label,
#form-steps .frm_radio h3 {
    position: relative;
    display: inline;
    padding: 0;
    text-indent: 0;
    font-family: var(--font-medium);
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-white);
}

#form-steps .frm_radio label input {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: none;
}

#form-steps .frm_radio label input::before {
    width: 15px;
    height: 15px;
    margin: 0;
    background-color: var(--color-black);
    box-shadow: none;
}

#form-steps .frm_radio label p {
    margin-top: 20px;
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-black);
}

#form-steps .frm_primary_label {
    margin-bottom: 50px;
    font-family: var(--font-medium);
    font-size: 24px;
    line-height: 1;
    text-align: center;
    color: var(--color-ink);
}

#form-steps .frm_submit { justify-content: center; }

#form-steps .frm_submit .frm_button_submit {
    display: flex;
    gap: 10px;
    align-items: center;
    border: none;
    box-shadow: none;
    background-color: var(--color-black);
}

#form-steps .frm_submit .frm_prev_page {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--color-white);
    box-shadow: none;
    background-color: transparent;
}

#form-steps .frm_submit .frm_button_submit::after {
    content: url("data:image/svg+xml;utf8,<svg width=\"12\" height=\"17\" viewBox=\"0 0 12 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 8.5L8 4.25L4 0L0 4.25L4 8.5L0 12.75L4 17L8 12.75L12 8.5Z\" fill=\"%23C7493A\"/></svg>");
    display: block;
    height: 16px;
}

#form-steps .frm_submit .frm_prev_page::before {
    content: url("data:image/svg+xml;utf8,<svg width=\"12\" height=\"17\" viewBox=\"0 0 12 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 8.5L4 12.75L8 17L12 12.75L8 8.5L12 4.25L8 0L4 4.25L0 8.5Z\" fill=\"%23111114\"/></svg>");
    display: block;
    height: 16px;
}

#form-steps .frm_page_num_2 .frm_top_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#form-steps .frm_page_num_2 .frm_opt_container { width: 100%; }

#form-steps .frm_page_num_2 .frm_first + div { margin-top: 50px; }

#form-steps .frm_page_num_3 .frm_pos_top {
    margin-bottom: 10px;
    border: none;
    font-family: var(--font-medium);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: var(--color-ink);
}

#form-steps .frm_page_num_3 .frm_description {
    margin-bottom: 16px;
    font-family: var(--font-regular);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: var(--color-ink);
}

#form-steps .frm_page_num_3 label {
    margin-bottom: 5px;
    font-family: var(--font-regular);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--color-ink);
}

#form-steps .frm_forms .frm_submit button[type="submit"]:hover { color: var(--color-white); }

/* the rust band's own button hover (live "#form button.frm_button_submit:hover") */
#form-steps .frm_forms button.frm_button_submit:hover {
    background-color: var(--color-cream);
    color: var(--color-rust);
}

/* live /fintech/: the photo is pinned to the top edge of the band */
/* ==== BLOCK-API-HERO (lane B): /age-estimation-api/ hero with the changing age field ==== */
.block-api-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-ink);
}

.block-api-hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.block-api-hero__copy {
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 200px 0 240px;
}

.block-api-hero__eyebrow {
    margin: 0;
    color: var(--color-steel);
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 142%;
}

.block-api-hero__text { max-width: 65%; margin-bottom: 10px; }

.block-api-hero__heading {
    margin: 0;
    padding: 0 0 10px;
    color: var(--color-cream);
    font-family: var(--font-bold);
    font-size: 87px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.5px;
}

.block-api-hero__subheading {
    margin: 0;
    padding: 0 0 10px;
    color: var(--color-cream);
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 135%;
    letter-spacing: 0.5px;
}

.block-api-hero__button { margin: 38px 0 13px; }

/* Offer variant (live /age-estimation-api-pg/ hero), values in Divi units (the copy zooms with the content rows):
   eyebrow, then the heading block 40px lower with the 487px picture card at the same height on the right; square
   bullet points, a bold price line, the rust pill beside an outlined one and a small steel note. */
.block-api-hero--offer .block-api-hero__copy { position: relative; gap: 0; padding-bottom: 123px; }

.block-api-hero--offer .block-api-hero__eyebrow { margin-bottom: 40px; }

.block-api-hero--offer .block-api-hero__image {
    position: absolute;
    top: 260px;
    right: 0;
    width: 487px;
}

.block-api-hero__picture { display: block; width: 100%; height: auto; border-radius: 3.05% / 4.89%; } /* live rounds the animated card at every width */

.block-api-hero--offer .block-api-hero__text { max-width: none; margin-bottom: 0; }

.block-api-hero__points { margin: 0; padding: 0 0 0 18px; list-style: none; }

.block-api-hero__points li {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    padding-left: 16px;
    color: var(--color-cream);
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 500;
    line-height: 135%;
    letter-spacing: 0.5px;
}

.block-api-hero__points li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-color: var(--color-rust);
}

.block-api-hero__price {
    margin: 23.5px 0 0;
    color: var(--color-cream);
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 600;
    line-height: 135%;
    letter-spacing: 0.5px;
}

.block-api-hero--offer .block-api-hero__button {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 61px 0 0;
}

.block-api-hero__secondary.btn--outline {
    height: 56px;
    padding: 0 24px;
    background-color: var(--color-ink);
}

.block-api-hero__secondary.btn--outline::before { display: none; }

/* Legal size like the other legal notes of the page (15px against the 18px body, ROC review DIGITAL-306; live 12px). */
.block-api-hero__note {
    margin: 47.5px 0 0;
    color: var(--color-steel);
    font-family: var(--font-regular);
    font-size: 15px;
    line-height: 133%;
}

/* Plain hero (live /age-estimation-api/): the billing note sits 60px under the button, 49px in the 80% zoom band (see media.css). */
.block-api-hero:not(.block-api-hero--offer) .block-api-hero__note { margin-top: -0.5px; }

/* The field, desktop: a 1600 x 700 scene (scaled and extended by the script) over a grid of 1px lines. */
.block-api-hero__desktop {
    position: relative;
    width: 100%;
    height: max(700px, 92svh);
    overflow: hidden;
    background-color: var(--color-ink);
    color: var(--color-cream);
    font-family: var(--font-regular);
    --cell-w: 100px;
    --cell-h: 87.5px;
    --grid-origin-x: 0px;
}

.block-api-hero__desktop .world-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(to right, rgba(103, 108, 121, 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(103, 108, 121, 0.12) 1px, transparent 1px);
    background-size: var(--cell-w) var(--cell-h);
    background-position: var(--grid-origin-x) 0;
}

.block-api-hero__desktop .world-hover {
    position: absolute;
    inset: 0;
    z-index: 7;
    overflow: hidden;
    background-image: linear-gradient(90deg, var(--color-ink) 10%, transparent);
}

.block-api-hero__desktop .world-hover-cell { position: absolute; }

.block-api-hero__desktop .world-hover-cell::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--color-rust);
    opacity: 0;
}

.block-api-hero__desktop .world-hover-cell.flash::after { animation: api-hero-trail 0.38s ease-out forwards; }

@keyframes api-hero-trail {
    0% { opacity: 0.92; }
    18% { opacity: 0.72; }
    55% { opacity: 0.28; }
    100% { opacity: 0; }
}

.block-api-hero__desktop .scene {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1600px;
    height: 700px;
    overflow: visible;
    transform: translateX(-50%);
    transform-origin: top center;
}

.block-api-hero__desktop .content,
.block-api-hero__desktop .world-extension { position: absolute; inset: 0; z-index: 3; }

.block-api-hero__desktop .content { width: 1600px; height: 700px; }

.block-api-hero__desktop .world-extension { overflow: visible; }

.block-api-hero__desktop .item,
.block-api-hero__phone .item { display: flex; align-items: center; justify-content: center; transform-origin: center; }

.block-api-hero__desktop .item { position: absolute; transform: translate(-50%, -50%); }

/* Cell positions of the 16 x 8 scene: column centres every 6.25%, row centres every 12.5% of 1600 x 700. */
.block-api-hero__desktop .content .item:nth-child(16n + 1) { left: 3.125%; }

.block-api-hero__desktop .content .item:nth-child(16n + 2) { left: 9.375%; }

.block-api-hero__desktop .content .item:nth-child(16n + 3) { left: 15.625%; }

.block-api-hero__desktop .content .item:nth-child(16n + 4) { left: 21.875%; }

.block-api-hero__desktop .content .item:nth-child(16n + 5) { left: 28.125%; }

.block-api-hero__desktop .content .item:nth-child(16n + 6) { left: 34.375%; }

.block-api-hero__desktop .content .item:nth-child(16n + 7) { left: 40.625%; }

.block-api-hero__desktop .content .item:nth-child(16n + 8) { left: 46.875%; }

.block-api-hero__desktop .content .item:nth-child(16n + 9) { left: 53.125%; }

.block-api-hero__desktop .content .item:nth-child(16n + 10) { left: 59.375%; }

.block-api-hero__desktop .content .item:nth-child(16n + 11) { left: 65.625%; }

.block-api-hero__desktop .content .item:nth-child(16n + 12) { left: 71.875%; }

.block-api-hero__desktop .content .item:nth-child(16n + 13) { left: 78.125%; }

.block-api-hero__desktop .content .item:nth-child(16n + 14) { left: 84.375%; }

.block-api-hero__desktop .content .item:nth-child(16n + 15) { left: 90.625%; }

.block-api-hero__desktop .content .item:nth-child(16n + 16) { left: 96.875%; }

.block-api-hero__desktop .content .item:nth-child(n + 1):nth-child(-n + 16) { top: 6.25%; }

.block-api-hero__desktop .content .item:nth-child(n + 17):nth-child(-n + 32) { top: 18.75%; }

.block-api-hero__desktop .content .item:nth-child(n + 33):nth-child(-n + 48) { top: 31.25%; }

.block-api-hero__desktop .content .item:nth-child(n + 49):nth-child(-n + 64) { top: 43.75%; }

.block-api-hero__desktop .content .item:nth-child(n + 65):nth-child(-n + 80) { top: 56.25%; }

.block-api-hero__desktop .content .item:nth-child(n + 81):nth-child(-n + 96) { top: 68.75%; }

.block-api-hero__desktop .content .item:nth-child(n + 97):nth-child(-n + 112) { top: 81.25%; }

.block-api-hero__desktop .content .item:nth-child(n + 113):nth-child(-n + 128) { top: 93.75%; }

.block-api-hero__desktop .world-extension .item { pointer-events: none; }

.block-api-hero .gray { color: var(--color-steel); }

.block-api-hero .red { color: var(--color-rust); }

.block-api-hero .paper { color: var(--color-cream); }

.block-api-hero .age { line-height: 1; letter-spacing: -0.005em; }

.block-api-hero .age.xs { opacity: 0.45; }

.block-api-hero .age.sm { opacity: 0.72; }

.block-api-hero__desktop .age.xs { font-size: 16px; }

.block-api-hero__desktop .age.sm { font-size: 23px; }

.block-api-hero__desktop .age.md { font-size: 34px; }

.block-api-hero__desktop .item.slot-md.identity-age { font-size: 28px; }

.block-api-hero__desktop .item.copy-safe.slot-md.identity-age { font-size: 23px; }

.block-api-hero__desktop .asset { position: absolute; aspect-ratio: 1 / 1; height: auto; line-height: 0; }

.block-api-hero__desktop .asset.xs { width: 15px; opacity: 0.35; }

.block-api-hero__desktop .asset.sm { width: 23px; opacity: 0.58; }

.block-api-hero__desktop .asset.md { width: 33px; opacity: 0.9; }

.block-api-hero__desktop .card.md { width: 35px; }

.block-api-hero__desktop .face.md { width: 34px; }

.block-api-hero__desktop .peak.md { width: 31px; }

.block-api-hero__desktop .item.copy-safe.slot-md.asset { width: 24px; }

.block-api-hero__desktop .item.copy-safe.slot-md.identity-card { width: 25px; }

.block-api-hero__desktop .item.copy-safe.slot-md.identity-face { width: 24px; }

.block-api-hero__desktop .item.copy-safe.slot-md.identity-peak { width: 23px; }

.block-api-hero .asset img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    transform: translate(-50%, -50%) scale(var(--asset-scale, 1));
}

.block-api-hero .asset.face { --asset-scale: 0.94; }

.block-api-hero .asset.card { --asset-scale: 0.9; }

.block-api-hero .asset.peak { --asset-scale: 0.78; }

.block-api-hero .mark { width: 10px; height: 10px; opacity: 0.52; }

.block-api-hero__desktop .mark.xs { transform: translate(-50%, -50%) scale(0.65); }

.block-api-hero__desktop .mark.sm { transform: translate(-50%, -50%) scale(0.9); }

.block-api-hero__desktop .mark.md { transform: translate(-50%, -50%) scale(1.1); }

.block-api-hero__desktop .item.identity-plus,
.block-api-hero__desktop .item.identity-x { transform: translate(-50%, -50%) scale(var(--markScale, 1)); }

.block-api-hero .mark::before,
.block-api-hero .mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentcolor;
    transform: translate(-50%, -50%);
}

.block-api-hero .mark::before { width: 10px; height: 1.25px; }

.block-api-hero .mark::after { width: 1.25px; height: 10px; }

.block-api-hero .mark.x::before,
.block-api-hero .mark.x::after { transform: translate(-50%, -50%) rotate(45deg); }

.block-api-hero .mark.gray { color: var(--color-slate); }

.block-api-hero .mark.paper { color: var(--color-steel); }

.block-api-hero .mark.red { color: var(--color-rust); }

.block-api-hero .item.check {
    position: absolute;
    width: 34px;
    height: 34px;
    color: #03c9a5;
    font-size: 34px;
}

.block-api-hero__desktop .item.copy-safe.slot-md.identity-check { width: 26px; height: 26px; font-size: 26px; }

.block-api-hero .item.check.check-left-deep { color: #173f3a; }

.block-api-hero .item.check.check-left { color: #126d60; }

.block-api-hero .item.check.check-mid { color: #079d87; }

.block-api-hero .item.check.check-right { color: #03c9a5; }

.block-api-hero .item.check::before {
    content: "";
    position: absolute;
    top: 47%;
    left: 50%;
    width: 0.52em;
    height: 0.27em;
    border-bottom: 0.085em solid currentcolor;
    border-left: 0.085em solid currentcolor;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
}

.block-api-hero .age-21plus { position: absolute; }

.block-api-hero .age-21plus .age-core { display: inline-block; }

.block-api-hero .age-21plus .age-plus {
    position: absolute;
    top: -0.02em;
    left: calc(100% + 0.07em);
    font-size: 0.42em;
    line-height: 1;
}

.block-api-hero .item.morphing { opacity: 0; filter: blur(1px); transition: opacity 0.16s ease, filter 0.16s ease; }

.block-api-hero .item.settling { animation: api-hero-settle 0.28s ease-out; }

@keyframes api-hero-settle {
    0% { opacity: 0; filter: blur(1px); }
    100% { opacity: 1; filter: blur(0); }
}

/* The field, tablets and phones: square cells, 8 columns, the lower rows fade out. */
.block-api-hero__phone {
    display: none;
    position: relative;
    width: 100%;
    height: 475px;
    overflow: hidden;
    background-color: var(--color-ink);
    font-family: var(--font-regular);
}

.block-api-hero__phone .matrix {
    --cols: 8;
    --cell: calc(100vw / var(--cols));
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--cell));
    grid-auto-rows: var(--cell);
    width: 100%;
}

.block-api-hero__phone .cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cell);
    height: var(--cell);
    border-top: 1px solid rgba(103, 108, 121, 0.12);
    border-left: 1px solid rgba(103, 108, 121, 0.12);
    overflow: visible;
}

.block-api-hero__phone .cell:nth-child(8n) { border-right: 1px solid rgba(103, 108, 121, 0.12); }

.block-api-hero__phone .item { position: relative; flex: 0 0 auto; }

.block-api-hero__phone .age.xs { font-size: calc(var(--cell) * 0.23); }

.block-api-hero__phone .age.sm { font-size: calc(var(--cell) * 0.34); }

.block-api-hero__phone .age.md { font-size: calc(var(--cell) * 0.36); }

.block-api-hero__phone .asset { position: relative; }

.block-api-hero__phone .asset.xs { width: calc(var(--cell) * 0.2); opacity: 0.35; }

.block-api-hero__phone .asset.sm { width: calc(var(--cell) * 0.31); opacity: 0.58; }

.block-api-hero__phone .asset.md { width: calc(var(--cell) * 0.45); opacity: 0.9; }

.block-api-hero__phone .card.md { width: calc(var(--cell) * 0.47); }

.block-api-hero__phone .face.md { width: calc(var(--cell) * 0.46); }

.block-api-hero__phone .peak.md { width: calc(var(--cell) * 0.42); }

.block-api-hero__phone .asset img { position: static; width: 100%; height: auto; transform: scale(var(--asset-scale, 1)); }

.block-api-hero__phone .mark { position: relative; width: calc(var(--cell) * 0.18); height: calc(var(--cell) * 0.18); }

.block-api-hero__phone .mark.xs { scale: 0.65; }

.block-api-hero__phone .mark.sm { scale: 0.9; }

.block-api-hero__phone .mark.md { scale: 1.1; }

.block-api-hero__phone .mark::before { width: 100%; }

.block-api-hero__phone .mark::after { height: 100%; }

.block-api-hero__phone .item.check { position: relative; }

.block-api-hero__phone .item.slot-xs.identity-check { width: calc(var(--cell) * 0.22); height: calc(var(--cell) * 0.22); font-size: calc(var(--cell) * 0.22); }

.block-api-hero__phone .item.slot-sm.identity-check { width: calc(var(--cell) * 0.33); height: calc(var(--cell) * 0.33); font-size: calc(var(--cell) * 0.33); }

.block-api-hero__phone .item.slot-md.identity-check { width: calc(var(--cell) * 0.46); height: calc(var(--cell) * 0.46); font-size: calc(var(--cell) * 0.46); }

.block-api-hero__phone .age-21plus { position: relative; }

.block-api-hero__phone .age-21plus .age-plus { left: calc(100% + 0.06em); }

.block-api-hero__phone::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 65%;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(17, 17, 20, 0.1) 0%, rgba(17, 17, 20, 0.18) 16%, rgba(17, 17, 20, 0.3) 32%, rgba(17, 17, 20, 0.46) 48%, rgba(17, 17, 20, 0.64) 64%, rgba(17, 17, 20, 0.8) 78%, rgba(17, 17, 20, 0.92) 89%, rgba(17, 17, 20, 0.98) 96%, var(--color-ink) 100%);
}

/* Lower field rows: neutral grey and progressively smaller (live: from the fifth row down). */
.block-api-hero__phone .cell:nth-child(n + 33) .item { color: var(--color-slate); opacity: 0.62; }

.block-api-hero__phone .cell:nth-child(n + 33) .item img { opacity: 0.72; filter: grayscale(1) brightness(0.72); }

.block-api-hero__phone .cell:nth-child(n + 33):nth-child(-n + 40) .item { transform: scale(0.88); }

.block-api-hero__phone .cell:nth-child(n + 41):nth-child(-n + 48) .item { transform: scale(0.78); }

.block-api-hero__phone .cell:nth-child(n + 49):nth-child(-n + 56) .item { transform: scale(0.68); }

.block-api-hero__phone .cell:nth-child(n + 57):nth-child(-n + 64) .item { transform: scale(0.58); }

.block-api-hero__phone .cell:nth-child(n + 65):nth-child(-n + 72) .item { transform: scale(0.5); }

.block-api-hero__phone .cell:nth-child(n + 73) .item { transform: scale(0.44); }

/* ==========================================================================
   BLOCK-FAQ-LIST (live /face-recognition-sdk/ "FAQ")
   ========================================================================== */
.block-faq-list {
    padding: var(--section-pad) 0;
    background-color: var(--color-ink);
    color: var(--color-white);
}

.block-faq-list .container { padding: min(2vw, 33px) 0; }

.block-faq-list__heading {
    max-width: 1200px;
    margin: 0 auto 52px;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 25px;
    font-weight: 500;
    line-height: 130%;
    text-align: center;
}

.block-faq-list__list {
    max-width: 1200px;
    margin: 0 auto;
}

.block-faq-list__item {
    margin-bottom: 15px;
    padding: 20px 50px 20px 20px;
    background-color: #191919;
}

.block-faq-list__head {
    position: relative;
    cursor: pointer;
}

.block-faq-list__head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    width: 20px;
    height: 10px;
    margin-top: -5px;
    background: url("assets/images/chevron-faq-rust.png") 0 0 / 20px 10px no-repeat;
}

.block-faq-list__item.is-open .block-faq-list__head::after { transform: rotate(180deg); }
.block-faq-list__head:focus-visible { outline: 2px solid var(--color-steel); outline-offset: 4px; }

.block-faq-list__question {
    margin: 0;
    font-family: var(--font-medium);
    font-size: 22px;
    font-weight: 500;
    line-height: 130%;
}

.block-faq-list__answer {
    overflow: hidden;
    padding-top: 20px;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 24px;
}

.block-faq-list__answer[hidden] { display: none; }
.block-faq-list__answer--empty { padding-top: 0; }
.block-faq-list__answer p { margin: 0; }
.block-faq-list__answer ol {
    margin: 0;
    padding: 0 0 23px;
    list-style: decimal inside;
}

.block-faq-list__answer li {
    padding-bottom: 20px;
    line-height: 26px;
}

/* ==========================================================================
   BLOCK-DEMO-HERO (live /roc-watch-book-a-demo/ first row): ink, 120px over a 1320px row. Left: 87px title,
   product logo, intro and feature points. Right: the form card (637px, the live column's narrowest width) and
   three badges under it. The page's rows sit in the 80% zoom from 981 to 1500px (media.css).
   ========================================================================== */
.block-demo-hero {
    display: flow-root; /* the row margins stay inside the ink section */
    padding: 120px 0 0;
    background-color: var(--color-ink);
    color: var(--color-cream);
}

.block-demo-hero .container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1320px;
    margin-bottom: 60px; /* row margin: it zooms with the row */
}

/* hardcoded: live Divi columns with the 3% gutter after each column (the hidden phone column follows) */
.block-demo-hero__main {
    flex: 1 1 0;
    min-width: 0;
    margin-right: 3%;
}

.block-demo-hero__side {
    display: flex;
    flex: 0 0 637px;
    flex-wrap: wrap;
    margin-right: 3%;
}

.block-demo-hero__title {
    margin-bottom: 80px;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 87px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.25px;
}

.block-demo-hero__logo,
.block-demo-hero__intro,
.block-demo-hero__feature-text {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 124%;
}

/* The logo sits inline in its own line like the live text module (the line box sets the gap to the intro). */
.block-demo-hero__logo { padding-bottom: 1em; }

.block-demo-hero__logo img,
.block-demo-hero__badge-image img {
    display: inline;
    vertical-align: baseline;
}

.block-demo-hero__logo img { width: 199px; }

.block-demo-hero__intro { margin-bottom: 24px; }

.block-demo-hero__feature-title {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 18px;
    font-weight: 500;
    line-height: 133%;
}

.block-demo-hero__feature-text {
    padding-bottom: 1em;
    color: var(--color-steel);
}

.block-demo-hero__feature-text:last-child { padding-bottom: 0; }

/* The form card: cream, cut bottom corners, 60px padding over the fields (form rules in assets/css/forms.css). */
.block-demo-hero__form {
    width: 100%;
    margin-bottom: 4.785%; /* hardcoded: live Divi module gap in this column */
}

/* Badges: label over a picture, spread over the column 48px under the form (live flex row with row-gap 48px). */
.block-demo-hero__badges {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 48px;
    padding-bottom: 4.785%;
    list-style: none;
}

.block-demo-hero__badge-label,
.block-demo-hero__badge-image {
    font-family: var(--font-bold);
    font-size: 14px;
    font-weight: 700; /* live asks for 700 on the single-weight family: faux bold, kept for identical glyphs */
    line-height: 200%;
    text-align: center;
    color: var(--color-rust);
}

.block-demo-hero__badge-label { padding-bottom: 1em; }


/* ==========================================================================
   BLOCK-IMAGE-TEXT-SPLIT, variant "list" (live /roc-watch-book-a-demo/ second row): two equal columns of the 1320px row
   with the 3% gutter, the picture at the column width, a bold 57px cream heading, white copy and a list with rust
   square markers; 120px under the row.
   ========================================================================== */
.block-image-text-split--list {
    display: flow-root;
    padding: 0;
    color: var(--color-white);
}

.block-image-text-split--list .block-image-text-split__row {
    gap: 3%;
    width: 100%;
    max-width: 1320px;
    margin-bottom: 120px; /* row margin: it zooms with the row */
}

.block-image-text-split--list .block-image-text-split__media,
.block-image-text-split--list .block-image-text-split__text {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    margin: 0;
    clip-path: none;
}

.block-image-text-split--list .block-image-text-split__media img { width: 100%; }

.block-image-text-split--list .block-image-text-split__heading {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 57px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: normal;
    color: var(--color-cream);
}

.block-image-text-split--list .block-image-text-split__text p {
    margin-bottom: 3.093%; /* hardcoded: live Divi module gap of the half column */
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 124%;
}

.block-image-text-split--list .block-image-text-split__text br { display: inline; }

.block-image-text-split--list .block-image-text-split__text ul {
    padding: 0 0 16px 16px;
    font-size: 16px;
    list-style: square outside;
}

.block-image-text-split--list .block-image-text-split__text li {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 200%;
    color: var(--color-cream);
}

.block-image-text-split--list .block-image-text-split__text li::marker { color: var(--color-rust); }

/* ==========================================================================
   BLOCK-STATS-COUNTERS, variant "ink" (live /roc-watch-book-a-demo/): no heading, three counters in a 1180px row,
   cream 28px labels, then the footnote over a steel line in the 1320px row and 80px of ink under it.
   ========================================================================== */
.block-stats-counters.block-stats-counters--ink {
    display: flow-root;
    padding: 0;
    background-color: var(--color-ink);
}

.block-stats-counters--ink .block-stats-counters__intro { display: none; }

.block-stats-counters--ink .block-stats-counters__row {
    width: 100%;
    max-width: 1180px;
}

.block-stats-counters--ink .block-stats-counters__counter { max-width: 100%; }

.block-stats-counters--ink .block-stats-counters__number { line-height: 100%; }

.block-stats-counters--ink .block-stats-counters__label {
    font-size: 28px;
    line-height: 115%;
    color: var(--color-cream);
}

.block-stats-counters--ink .block-stats-counters__footnote {
    width: 100%;
    max-width: 1320px;
    margin-bottom: 80px; /* row margin: it zooms with the row */
    padding: 2% 0 60px;
    border-bottom: 1px solid var(--color-steel);
    color: var(--color-steel);
}

/* ==========================================================================
   BLOCK-TESTIMONIAL-CAROUSEL, style "side" (live /roc-watch-book-a-demo/): ink, a 1120px row with the quote mark in
   the first quarter (vertically centred) and the quotes in the other three quarters, 45px light cream quotes over
   15px names; the quote box keeps the live 430px height (the tallest quote sets it when taller). The rules carry the
   modifier so the default style's width tiers (media.css) do not reach them.
   ========================================================================== */
.block-testimonial-carousel.block-testimonial-carousel--side {
    min-height: 0;
    padding: 0 0 min(3%, 50px);
    background-color: var(--color-ink);
}

.block-testimonial-carousel--side .block-testimonial-carousel__main {
    width: 100%;
    max-width: 1120px;
    padding: 2% 0;
}

.block-testimonial-carousel--side .block-testimonial-carousel__body {
    display: flex;
    align-items: center;
    gap: 3%;
}

.block-testimonial-carousel--side .block-testimonial-carousel__mark {
    flex: 0 0 22.75%;
    max-width: none;
    margin: 0;
}

.block-testimonial-carousel--side .block-testimonial-carousel__carousel {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.block-testimonial-carousel--side .block-testimonial-carousel__carousel .swiper-container {
    margin-bottom: 0;
    padding-bottom: 0;
}

.block-testimonial-carousel--side .swiper-wrapper { min-height: 430px; }

.block-testimonial-carousel--side .block-testimonial-carousel__slide {
    display: block;
    padding: 20px;
}

.block-testimonial-carousel--side .block-testimonial-carousel__quote {
    display: block;
    width: auto;
    min-height: 0;
    margin: 0;
    font-family: var(--font-light);
    font-size: 45px;
    font-weight: 300;
    line-height: 142%;
    color: var(--color-cream);
}

.block-testimonial-carousel--side .block-testimonial-carousel__quote p {
    font-size: inherit;
    line-height: inherit;
}

.block-testimonial-carousel--side .block-testimonial-carousel__attribution {
    position: static;
    width: auto;
    margin-top: 40px;
    padding-bottom: 10px;
    font-family: var(--font-regular);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: var(--color-cream);
}

/* ==========================================================================
   BLOCK-BUTTON-CHECKLIST (live /roc-watch-book-a-demo/ "This demo is ideal if you are:"): steel band, a 900px row of
   two fifths (the ink pill, vertically centred) and three fifths (38px heading, ink square list).
   ========================================================================== */
.block-button-checklist {
    padding: min(3%, 50px) 0;
    background-color: var(--color-steel);
    color: var(--color-ink);
}

.block-button-checklist .container {
    display: flex;
    align-items: center;
    max-width: 900px;
}

.block-button-checklist__action { width: 40%; }

.block-button-checklist__text { width: 60%; }

.block-button-checklist__heading {
    padding-bottom: 10px;
    font-family: var(--font-bold);
    font-size: 38px;
    font-weight: 500;
    line-height: 120%;
}

.block-button-checklist__list {
    padding: 0 0 16px 16px;
    font-size: 16px;
    list-style: square outside;
}

.block-button-checklist__list li {
    font-family: var(--font-regular);
    font-size: 18px;
    line-height: 150%;
}